/* Cotatop night mode (design proposal). Day colours live in cotatop-styles.css; .site wraps each page, .night is added by the moon button. */
.site { background: var(--paper); color: var(--ink); min-height: 100vh; transition: background-color 0.2s, color 0.2s; }

/* Moon / sun button in the nav */
.theme-toggle {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 44px; height: 44px; padding: 0; border-radius: 50%;
  border: 1px solid var(--line-soft); background: transparent; color: var(--ink); cursor: pointer;
  transition: background-color 0.15s, border-color 0.15s, transform 0.15s;
}
.theme-toggle svg { width: 20px; height: 20px; }
.theme-toggle:hover { border-color: var(--blue); color: var(--blue); transform: translateY(-2px); }
.theme-toggle:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }

/* Narrow phones: the round button leaves the bar (so "Hablemos" fits) and becomes a row in the phone menu */
.menu .menu-theme { display: none; }
.menu-theme button {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 12px 16px;
  font: inherit; font-size: 16px; text-align: left; color: var(--ink); background: none; border: 0; cursor: pointer;
}
.menu-theme button svg { width: 18px; height: 18px; flex: none; }
.menu-theme button:hover { background: #EEF4FE; color: var(--blue); }
.night .menu-theme button:hover { background: #16264A; }
@media (max-width: 480px) {
  .nav-links:has(.menu) > .theme-toggle { display: none; }
  .menu .menu-theme { display: block; }
}

/* Night palette */
.night {
  --ink: #E8EDF5;
  --ink-2: #C6D0DF;
  --muted: #9AA7BE;
  --line-soft: #34425E;
  --paper: #0A1322;
  --white: #121E35;
  --blue: #6A9BF2;
  color-scheme: dark;
}

/* Text that must stay white on photos and blue buttons */
.night .hero, .night .hero .btn-ghost, .night .hero .btn-ghost:hover,
.night .btn-primary, .night .btn-primary:hover, .night .skip, .night .skip:focus,
.night .nav-cta:hover, .night .form button, .night .contact-ways a svg,
.night .page-hero .btn-primary:hover, .night .plan-badge, .night .plan.featured .price-note,
.night .plan .btn-primary:hover, .night .calc-nav button.next { color: #fff; }
.night .btn-primary, .night .form button, .night .calc-nav button.next, .night .plan-badge { background: #2F6FE0; }
.night .calc-nav button.next { border-color: #2F6FE0; }

/* Blocks that are dark navy by day: a raised navy panel by night */
.night .level:nth-child(5), .night .service.accent, .night .case-visual.boz,
.night .cta-band, .night .plan.featured, .night .rate-card th {
  background: #1C2E52; color: #F6F8FB;
}
.night .level:nth-child(5) { border-right-color: #1C2E52; }
.night .service.accent .service-foot a { color: #F6F8FB; }
.night .nav-cta { background: #E8EDF5; color: #0A1322; }
.night .nav-cta:hover { background: #2F6FE0; }
.night .btn-primary:hover, .night .form button:hover, .night .calc-nav button.next:hover,
.night .plan .btn-primary:hover, .night .page-hero .btn-primary:hover { background: #E8EDF5; color: #0A1322; border-color: #E8EDF5; }
.night .page-hero .btn-ghost:hover { background: #E8EDF5; color: #0A1322; }

/* Light-blue tints by day: deep blue tints by night */
.night .band { background: #13223D; box-shadow: 0 0 0 100vmax #13223D; }
.night .rate-card tr.total td, .night .price-note, .night .calc-result .tip { background: #1A2C4E; }
.night .price-note { color: #A9C5F7; }
.night .calc-option:has(input:checked) { background: #16264A; }
.night .nav-links > a:not(.nav-cta):hover, .night .nav-links > a:not(.nav-cta):focus-visible,
.night .lang summary:hover, .night .menu summary:hover, .night .contact-ways a:hover { background: #1A2C4E; }
.night .nav-links > a[aria-current="page"], .night .menu li a:hover, .night .lang li a:hover,
.night .rate-card tbody tr:hover td, .night .price-table tbody tr:hover td { background: #16264A; }
.night .rate-card tbody tr.total:hover td { background: #22375F; }
.night .contact-ways a:hover { color: var(--ink); }

/* Menus: soft shadow instead of a bright offset one */
.night .lang ul, .night .menu ul { box-shadow: 6px 6px 0 #000; }
.night .service:hover, .night .plan:hover, .night .benefit:hover, .night .model:hover, .night .pay > div:hover { box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45); }

/* Logo square a little lighter so it shows on the dark page */
.night .logo-mark rect { fill: #1C2E52; }

/* Client logo panel keeps its white background (their brand colours) */
.night .case-visual.seis { background: #fff; }

/* Yellow notes stay readable */
.night .placeholder { color: #5C4600; }
.night select option { background: #121E35; color: #E8EDF5; }