/* Header / navegación — barra blanca translúcida fija, estilo apple.com */

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  color: var(--color-ink);
  border-bottom: 1px solid transparent;
  transition: background var(--duration-fast) var(--ease), border-color var(--duration-fast) var(--ease);
}

.site-header.is-scrolled {
  background: rgba(255, 255, 255, 0.92);
  border-bottom-color: var(--color-border);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding-block: var(--space-2);
}

.brand {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  flex-shrink: 0;
  text-decoration: none;
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: var(--tracking-tight);
  font-size: var(--text-lg);
  color: var(--color-accent);
}

.brand__icon {
  width: 32px;
  height: 32px;
}

.nav-menu {
  display: none;
}

.nav-menu.is-open {
  display: flex;
  flex-direction: column;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--color-white);
  color: var(--color-ink);
  box-shadow: var(--shadow-float);
  padding: var(--space-2) var(--space-3) var(--space-3);
  gap: var(--space-1);
}

.nav-menu a {
  display: block;
  padding: var(--space-2) var(--space-1);
  text-decoration: none;
  font-weight: 600;
  font-size: var(--text-sm);
  min-height: 44px;
}

.nav-cta {
  display: none;
}

.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: transparent;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-ink);
}

.nav-toggle svg {
  width: 20px;
  height: 20px;
}

@media (min-width: 1280px) {
  .nav-toggle {
    display: none;
  }

  .nav-menu {
    display: flex !important;
    position: static;
    flex-direction: row;
    align-items: center;
    background: none;
    color: inherit;
    box-shadow: none;
    padding: 0;
    gap: 18px;
  }

  .nav-menu a {
    padding: var(--space-1) 2px;
    min-height: auto;
    position: relative;
    font-size: var(--text-xs);
    white-space: nowrap;
  }

  .nav-menu a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 0;
    height: 2px;
    background: var(--color-accent);
    transition: width var(--duration-fast) var(--ease);
  }

  .nav-menu a:hover::after,
  .nav-menu a:focus-visible::after {
    width: 100%;
  }

  .nav-cta {
    display: inline-flex;
    flex-shrink: 0;
    min-height: 40px;
    padding: 10px 20px;
    font-size: var(--text-xs);
    white-space: nowrap;
  }
}

/* Secciones — bloques rectangulares simples, blanco y gris claro alternados (sin cortes diagonales ni fondos oscuros) */

.section {
  position: relative;
  padding-block: var(--space-12);
  background: var(--color-white);
}

.section--tint {
  background: var(--color-bg-tint);
}

/* Fondo premium en degradé — reservado para la sección de la calculadora, como momento destacado */
.section--teal {
  background: radial-gradient(circle at 12% 12%, rgba(255, 255, 255, 0.08), transparent 45%),
    linear-gradient(135deg, #06282a 0%, #0a4647 55%, #135953 100%);
  color: var(--color-white);
}

.section--teal h1,
.section--teal h2,
.section--teal h3 {
  color: var(--color-white);
}

.section--teal p {
  color: rgba(255, 255, 255, 0.75);
}

.section--teal .section-eyebrow {
  color: rgba(255, 255, 255, 0.9);
}

.section--teal .section-eyebrow::before {
  background: rgba(255, 255, 255, 0.9);
}

.section-header {
  max-width: 640px;
  margin-bottom: var(--space-8);
}

.section-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: var(--space-2);
}

.section-eyebrow::before {
  content: "";
  width: 28px;
  height: 2px;
  background: var(--color-accent);
}

/* Composición asimétrica reusable: dos columnas desbalanceadas */

.split {
  display: grid;
  gap: var(--space-6);
}

@media (min-width: 1024px) {
  .split {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--space-10);
    align-items: center;
  }

  .split--wide-left {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  }

  .split--wide-right {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  }

  .split--sticky > *:first-child {
    position: sticky;
    top: 120px;
    align-self: start;
  }

  .split--trio {
    grid-template-columns: 190px minmax(0, 1fr) 320px;
    gap: var(--space-6);
  }
}

/* Título largo de la guía (sección Recursos): más chico que el h2 default para que una
   oración larga no se vea sobredimensionada, y la aclaración entre paréntesis, más chica
   todavía, como subtítulo. */
#recursos .section-header h2 {
  font-size: clamp(1.75rem, 1.3rem + 2vw, 2.5rem);
}

#recursos .section-header h2 .section-header__sub {
  display: block;
  margin-top: var(--space-1);
  font-size: 0.4em;
  font-weight: 600;
  color: var(--color-accent);
}

/* En mobile/tablet la calculadora se apila en una sola columna en el orden del HTML
   (tarjeta primero, título después). Se invierte solo ahí para que el título
   "Herramienta gratuita" quede arriba de la tarjeta; el layout de escritorio no cambia. */
@media (max-width: 1023.98px) {
  #calculadora .split > .card {
    order: 2;
  }

  #calculadora .split > .section-header {
    order: 1;
  }
}

/* Footer — gris claro con texto oscuro, como el pie de apple.com */

.site-footer {
  background: var(--color-bg-tint);
  color: var(--color-ink-soft);
  padding-block: var(--space-10) var(--space-6);
}

.site-footer p {
  color: var(--color-ink-soft);
  font-size: var(--text-sm);
}

.site-footer a {
  color: var(--color-ink);
  text-decoration: none;
}

.footer-grid {
  display: grid;
  gap: var(--space-6);
  padding-bottom: var(--space-8);
}

@media (min-width: 768px) {
  .footer-grid {
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--space-4);
  }
}

.footer-col--brand {
  max-width: 34ch;
}

.site-footer a.footer-logo {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--text-lg);
  color: var(--color-accent);
  margin-bottom: var(--space-2);
}

.footer-whatsapp {
  display: inline-flex;
  gap: 8px;
  margin-top: var(--space-2);
  min-height: 40px;
  padding: 8px 16px;
  font-size: var(--text-xs);
}

.footer-col__title {
  font-weight: 700;
  color: var(--color-ink);
  font-size: var(--text-sm);
  margin-bottom: var(--space-2);
}

.footer-links {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.footer-links a {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--text-sm);
}

.footer-links a:hover {
  color: var(--color-accent);
}

.footer-links svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.footer-bottom {
  padding-top: var(--space-3);
  border-top: var(--border-hairline);
  font-size: var(--text-xs);
}