/* /transporte — rediseño editorial (handoff 2026-10-20).
   Mismo lenguaje que el home: retícula Swiss, alternancia oscuro/claro, vidrio
   solo sobre foto y sombra dura solo en CTA primarios. Aquí el azul de
   Transporte (#3450FE, #7184FE sobre navy) releva al cyan en todo el
   contenido. Esquinas redondeadas con las mismas medidas que el home
   (--r-*; para volver a esquina viva basta con ponerlas en 0).
   Tres tamaños: hasta 767 px celular (el formulario del catálogo es la hoja
   que sube desde abajo: lo controla app.js) · 768–1199 px tablet · 1200 px o
   más escritorio. El menú NO vive aquí: lo pinta /verticales/_nav/nav.js. */

@font-face {
  font-family: "Exo 2";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/tipografias/Exo2-Variable.woff2") format("woff2");
}

:root {
  --navy: #0D183E;
  --navy-900: #070C1F;
  --navy-line: #24345C;
  --transporte: #3450FE;
  --transporte-hover: #2A43E0;
  --transporte-tint: #7184FE;
  --cyan: #00D4FF;
  --ink-muted: #5B6478;
  --on-dark: #E6E6E6;
  --line: #DCE0E8;
  --surface-2: #F4F5F8;
  --gutter: 20px;
  --seccion: 80px;
  --menu: 48px;
  --r-chico: 10px;     /* chips, botones en celular */
  --r-boton: 10px;     /* botones, pestañas (15 px desde tableta) */
  --r-foto: 20px;      /* fotos */
  --r-tarjeta: 15px;   /* paneles y tarjetas (25 px desde tableta) */
  --sombra-dura: 6px 6px 0 0 #070C1F;
  --sombra-dura-clara: 6px 6px 0 0 #0D183E;
  --barra-movil: calc(80px + env(safe-area-inset-bottom));
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: #FFFFFF;
  color: var(--navy);
  font-family: "Exo 2", system-ui, -apple-system, sans-serif;
  font-weight: 300;
  line-height: 1.5;
  /* Mismo suavizado de letra que el resto del sitio (app/globals.css): sin él,
     en Mac el texto claro sobre fondo oscuro se ve más grueso de lo que es. */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* La barra fija del celular no tapa el final del pie. */
  padding-bottom: var(--barra-movil);
}
img { display: block; max-width: 100%; }
h1, h2, h3, p { margin: 0; }
a { color: var(--transporte); text-decoration: none; transition: color 120ms; }
a:hover { color: var(--navy); }
button { font-family: inherit; }
:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
[hidden] { display: none !important; }
/* Al saltar a una sección (#calificador, #catalogo…) el título no queda bajo el menú fijo. */
section[id], .catalogo { scroll-margin-top: calc(var(--menu) + 16px); }

.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 2000;
  padding: 10px 16px; background: var(--navy); color: #FFFFFF; font-weight: 600;
}
.skip-link:focus { top: 12px; color: #FFFFFF; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.contenedor { width: 100%; max-width: 1440px; margin: 0 auto; padding: 0 var(--gutter); }

/* ── Tipografía ───────────────────────────────────────────── */
.eyebrow {
  font-size: 11px; font-weight: 600; letter-spacing: 2pt; text-transform: uppercase;
  color: var(--transporte);
}
.eyebrow--claro { color: var(--transporte-tint); }
.eyebrow--gris { color: var(--ink-muted); }
/* Cabecera de sección: filete superior de 3 px (navy en claro). */
.filete { border-top: 3px solid var(--navy); padding-top: 16px; }
.micro {
  margin: 0 0 6px; font-size: 11px; font-weight: 700; letter-spacing: 2pt;
  text-transform: uppercase; color: var(--transporte-tint);
}
h2 { font-size: 36px; font-weight: 200; line-height: 1.04; text-wrap: balance; }
/* La segunda mitad del titular (la promesa) en el acento: azul claro sobre
   navy; en fondo claro, peso 400 en navy (nunca color de acento como texto). */
.frag { color: var(--transporte-tint); }
.calificador-sec .frag, .faq .frag { color: var(--navy); font-weight: 400; }
.numeral {
  display: block; font-size: 120px; font-weight: 100; line-height: .8; letter-spacing: -3px;
  color: var(--navy-line);
}
.chevron { display: block; flex-shrink: 0; }

/* ── Botones ──────────────────────────────────────────────── */
.btn {
  min-height: 48px; padding: 0 24px; border-radius: var(--r-boton);
  display: inline-flex; align-items: center; justify-content: center; gap: 16px;
  border: 1px solid transparent; cursor: pointer; text-align: center;
  font-size: 16px; font-weight: 700; line-height: 1.2;
  transition: background-color 120ms, border-color 120ms, color 120ms;
}
.btn--52 { min-height: 52px; }
.btn--primario { background: var(--transporte); color: #FFFFFF; box-shadow: var(--sombra-dura); }
.btn--primario:hover { background: var(--transporte-hover); color: #FFFFFF; }
.btn--primario:disabled { opacity: 0.4; cursor: not-allowed; }
.btn--primario:disabled:hover { background: var(--transporte); }
/* Secundario sobre foto (vidrio). */
.btn--vidrio {
  color: #FFFFFF; border-color: rgba(255, 255, 255, 0.4); font-size: 15px;
  background: rgba(255, 255, 255, 0.08);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.btn--vidrio:hover { color: #FFFFFF; border-color: #FFFFFF; }
.btn--contorno { color: var(--navy); border-color: var(--navy); background: transparent; font-size: 14px; }
.btn--contorno:hover { color: var(--navy); background: var(--surface-2); }
.btn--contorno:disabled { opacity: 0.4; cursor: not-allowed; }
.enlace-flecha {
  align-self: flex-start; min-height: 44px; display: inline-flex; align-items: center;
  font-size: 15px; font-weight: 700; color: var(--navy); border-bottom: 2px solid var(--navy);
}
.enlace-flecha:hover { color: var(--transporte); }

/* ── 1 · Portada (oscuro sobre foto) ──────────────────────── */
.hero {
  position: relative; overflow: hidden; color: #FFFFFF; background: var(--navy-900);
  display: flex; flex-direction: column; justify-content: flex-end;
}
.hero__foto {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 60% 50%;
}
/* Velo: capa plana + degradado de near black (92 % → 55 %). */
.hero__velo {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(0deg, rgba(7, 12, 31, 0.92) 0%, rgba(7, 12, 31, 0.55) 100%),
    rgba(7, 12, 31, 0.14);
}
.hero__grid { position: relative; padding-top: calc(var(--menu) + 40px); padding-bottom: 48px; }
.hero__copy { display: flex; flex-direction: column; gap: 18px; }
.hero__marca { display: flex; flex-direction: column; gap: 12px; }
.hero h1 { font-size: 44px; font-weight: 200; line-height: 1; text-wrap: balance; }
.hero h1 span { color: var(--transporte-tint); }
.hero__lead { font-size: 16px; line-height: 1.55; color: var(--on-dark); max-width: 520px; }
.hero__acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.hero__nota { flex-basis: 100%; font-size: 13px; font-weight: 600; letter-spacing: 1pt; color: var(--on-dark); }

.aviso-catalogo { padding: 12px 16px; border-radius: var(--r-chico); font-size: 14px; font-weight: 600; line-height: 1.5; }
.aviso-catalogo--ok { background: rgba(52, 80, 254, 0.32); border: 1px solid var(--transporte-tint); color: #FFFFFF; }
.aviso-catalogo--err { background: rgba(196, 41, 61, 0.35); border: 1px solid rgba(255, 140, 155, 0.6); color: #FFFFFF; }

/* ── Formulario del catálogo ──────────────────────────────── */
/* Celular: es la hoja que sube desde abajo (la abre y cierra app.js). */
.catalogo {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 1200;
  max-height: calc(100dvh - 40px); overflow-y: auto; overscroll-behavior: contain;
  padding: 24px 20px calc(32px + env(safe-area-inset-bottom));
  border-radius: var(--r-tarjeta) var(--r-tarjeta) 0 0;
  display: flex; flex-direction: column; gap: 20px;
  color: #FFFFFF; background: var(--navy);
  border-top: 1px solid rgba(255, 255, 255, 0.22);
  transform: translateY(110%); visibility: hidden;
  transition: transform 0.28s ease, visibility 0s linear 0.28s;
}
.catalogo.is-abierto { transform: translateY(0); visibility: visible; transition: transform 0.28s ease; }
.catalogo-velo { position: fixed; inset: 0; z-index: 1150; background: rgba(7, 12, 31, 0.6); }
html.catalogo-bloqueo, html.catalogo-bloqueo body { overflow: hidden; }
.catalogo__cabeza { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.catalogo__eyebrow { font-size: 11px; font-weight: 700; color: #FFFFFF; }
.catalogo__chevron { display: none; }
.catalogo__cerrar {
  min-height: 44px; padding: 0 6px; border: 0; background: none; cursor: pointer;
  font-size: 12px; font-weight: 700; letter-spacing: 2pt; text-transform: uppercase; color: var(--on-dark);
}
.catalogo__vista { display: flex; flex-direction: column; gap: 20px; }
.catalogo__titulo { font-size: 28px; font-weight: 300; line-height: 1.15; }
.solo-amplio { display: none; }
.catalogo__form { display: flex; flex-direction: column; gap: 20px; }
.catalogo__familias { margin: 0; padding: 0; border: 0; min-width: 0; }
.catalogo__etiqueta {
  display: block; margin: 0 0 10px; padding: 0;
  font-size: 11px; font-weight: 700; letter-spacing: 2pt; text-transform: uppercase; color: var(--on-dark);
}
.catalogo__form > .catalogo__etiqueta { margin-bottom: -14px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { position: relative; cursor: pointer; }
.chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.chip span {
  min-height: 44px; padding: 0 14px; display: inline-flex; align-items: center;
  border-radius: var(--r-chico); border: 1px solid rgba(255, 255, 255, 0.28); background: transparent; color: #FFFFFF;
  font-size: 14px; font-weight: 600; transition: background-color 120ms, border-color 120ms;
}
.chip:hover span { border-color: var(--transporte-tint); }
.chip input:checked + span { background: var(--transporte); border-color: var(--transporte); color: #FFFFFF; }
.chip input:focus-visible + span { outline: 2px solid var(--cyan); outline-offset: 2px; }
.catalogo__input {
  width: 100%; height: 44px; padding: 0; border: 0; border-radius: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.32); background: transparent; color: #FFFFFF;
  font-family: inherit; font-size: 16px; font-weight: 300;
}
.catalogo__input::placeholder { color: #8A93A6; }
.catalogo__input:focus { outline: none; border-bottom-color: var(--transporte-tint); }
.catalogo__input:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
.catalogo__input[aria-invalid="true"] { border-bottom-color: #FF6B7A; }
.catalogo__hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.catalogo__msg { font-size: 13px; font-weight: 500; color: #FF6B7A; }
.catalogo .btn--primario { justify-content: space-between; }
.catalogo__nota { font-size: 12px; color: var(--on-dark); }
.catalogo__nota a { color: #FFFFFF; text-decoration: underline; text-underline-offset: 3px; }
.catalogo__texto { font-size: 16px; line-height: 1.6; color: var(--on-dark); }
.catalogo__texto strong { font-weight: 600; color: #FFFFFF; }
.catalogo__vista[data-catalogo-view="done"] .catalogo__titulo { font-size: 28px; font-weight: 200; }
.catalogo__reenvio-msg { font-size: 13px; font-weight: 600; color: var(--transporte-tint); }
.catalogo__reenvio-msg--err { color: #FF6B7A; }
.catalogo .btn--contorno { color: #FFFFFF; border-color: rgba(255, 255, 255, 0.5); }
.catalogo .btn--contorno:hover { background: transparent; border-color: #FFFFFF; }
.catalogo__corregir {
  align-self: flex-start; min-height: 44px; padding: 0; border: 0; background: none; cursor: pointer;
  font-size: 14px; font-weight: 700; color: var(--transporte-tint);
}

/* ── 2 · Activos por familia (navy) ───────────────────────── */
.familias { background: var(--navy); color: #FFFFFF; padding: var(--seccion) 0; }
.familias__cabeza { display: flex; flex-direction: column; gap: 12px; margin-bottom: 28px; }
.familias__grid { display: flex; flex-direction: column; gap: 16px; }
.familias__tabs {
  display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none;
  margin: 0 calc(-1 * var(--gutter)); padding: 0 var(--gutter) 4px;
}
.familias__tabs::-webkit-scrollbar { display: none; }
.familia-tab {
  flex-shrink: 0; min-height: 48px; padding: 0 14px; border-radius: var(--r-boton);
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  border: 1px solid var(--navy-line); background: transparent;
  color: #FFFFFF; cursor: pointer; text-align: left; white-space: nowrap;
  transition: border-color 120ms, background-color 120ms;
}
.familia-tab:hover { border-color: var(--transporte-tint); }
.familia-tab[aria-selected="true"] { background: rgba(52, 80, 254, 0.18); border-color: var(--transporte); }
.familia-tab__txt { display: flex; align-items: baseline; gap: 14px; }
.familia-tab__n { font-size: 12px; font-weight: 700; color: var(--transporte-tint); }
.familia-tab__marca { display: none; font-size: 16px; }
.familia-tab__nombre { font-size: 15px; font-weight: 600; }
.familia-panel {
  position: relative; overflow: hidden; min-height: 460px; border-radius: var(--r-tarjeta);
  display: flex; flex-direction: column; justify-content: flex-end;
  background: var(--navy-900);
}
.familia-panel__foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.familia-panel__velo {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(13, 24, 62, 0) 35%, rgba(13, 24, 62, 0.75) 100%);
}
/* Tarjeta de vidrio sobre la foto. */
.familia-card {
  position: relative; margin: 12px; padding: 20px; border-radius: var(--r-boton);
  display: flex; flex-direction: column; gap: 14px;
  background: rgba(13, 24, 62, 0.55);
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  border: 1px solid rgba(255, 255, 255, 0.22);
}
.familia-card__cabeza { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.familia-card__nombre { font-size: 26px; font-weight: 300; line-height: 1.15; }
.familia-card__cuenta { flex-shrink: 0; font-size: 13px; font-weight: 700; letter-spacing: 1pt; }
.familia-card__ayuda { font-size: 16px; font-weight: 300; line-height: 1.55; text-wrap: pretty; }
.familia-card__ideal {
  font-size: 14px; font-weight: 600; line-height: 1.5; color: var(--on-dark);
  border-top: 1px solid rgba(255, 255, 255, 0.22); padding-top: 12px;
}

/* ── 3 · Caso Blue Line (claro) ───────────────────────────── */
.caso { padding: var(--seccion) 0; background: #FFFFFF; }
.caso__grid { display: flex; flex-direction: column; gap: 24px; }
.caso__card { display: flex; flex-direction: column; gap: 16px; }
.caso__numero { display: flex; align-items: baseline; gap: 16px; }
.caso__numero > span:first-child { font-size: 140px; font-weight: 100; line-height: .8; letter-spacing: -6px; }
.caso__numero-txt { font-size: 20px; font-weight: 300; line-height: 1.2; }
.caso__dato { font-size: 32px; font-weight: 200; line-height: 1.1; }
.caso__dato span { color: var(--transporte); font-weight: 300; }
.caso__marco { position: relative; height: 240px; overflow: hidden; border: 2px solid var(--navy); border-radius: var(--r-foto); background: #E6E6E6; }
.caso__foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 30% 60%; }

/* ── 4 · Calificador + Cómo funciona (gris) ───────────────── */
.calificador-sec { background: var(--surface-2); padding: var(--seccion) 0; }
.calificador-sec__grid { display: flex; flex-direction: column; gap: 48px; }
.calificador-sec__principal { display: flex; flex-direction: column; gap: 20px; }
.calificador__card {
  background: #FFFFFF; border: 2px solid var(--navy); border-radius: var(--r-tarjeta); padding: 20px;
  display: flex; flex-direction: column; gap: 20px;
}
.calificador__top { display: flex; justify-content: space-between; align-items: center; min-height: 28px; }
.calificador__paso { font-size: 12px; font-weight: 700; letter-spacing: 2pt; text-transform: uppercase; }
.calificador__atras {
  min-height: 44px; margin: -8px 0; padding: 0; border: 0; background: none; cursor: pointer;
  font-size: 14px; font-weight: 600; color: var(--navy);
}
.calificador__progreso { display: flex; gap: 6px; }
.calificador__progreso span { flex: 1; height: 4px; background: var(--line); }
.calificador__progreso span.is-hecho { background: var(--ink-muted); }
.calificador__progreso span.is-actual { background: var(--transporte); }
.calificador__pregunta { font-size: 24px; font-weight: 300; line-height: 1.2; }
.calificador__pregunta:focus { outline: none; }
.calificador__opciones { display: flex; flex-direction: column; gap: 8px; }
.calificador__opcion {
  min-height: 56px; padding: 10px 18px; border-radius: var(--r-boton);
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  border: 1px solid var(--line); background: #FFFFFF; color: var(--navy);
  font-size: 16px; font-weight: 500; text-align: left; cursor: pointer;
  transition: border-color 120ms, background-color 120ms;
}
.calificador__opcion:hover { border-color: var(--transporte); }
.calificador__opcion[aria-pressed="true"] { border-color: var(--transporte); background: var(--surface-2); }
.calificador__opcion-marca { color: var(--transporte); }
.calificador__listo { font-size: 12px; font-weight: 700; letter-spacing: 2pt; text-transform: uppercase; color: var(--transporte); }
.calificador__resumen { font-size: 24px; font-weight: 300; line-height: 1.25; }
.calificador__acciones { display: flex; flex-direction: column; gap: 12px; }
.calificador__acciones .btn--primario { box-shadow: var(--sombra-dura-clara); }
.calificador__reiniciar {
  align-self: flex-start; min-height: 44px; margin: -8px 0; padding: 0; border: 0; background: none;
  cursor: pointer; font-size: 14px; font-weight: 600; color: var(--navy); text-decoration: underline;
}
.como { display: flex; flex-direction: column; }
.como > .eyebrow {
  color: var(--navy); font-size: 12px; font-weight: 700; padding-bottom: 16px; border-bottom: 3px solid var(--navy);
}
.como__lista { margin: 0; padding: 0; list-style: none; }
.como__paso { display: grid; grid-template-columns: 72px 1fr; gap: 12px; padding: 20px 0; border-bottom: 1px solid var(--line); }
.como__n { font-size: 56px; font-weight: 100; line-height: .85; color: var(--navy); }
.como__paso h3 { font-size: 20px; font-weight: 600; }
.como__paso p { margin-top: 4px; font-size: 16px; color: var(--ink-muted); line-height: 1.5; }

/* ── 5 · Preguntas frecuentes (claro) ─────────────────────── */
.faq { background: #FFFFFF; padding: var(--seccion) 0; }
.faq__grid { display: flex; flex-direction: column; gap: 28px; }
.faq__cabeza { display: flex; flex-direction: column; gap: 20px; }
.faq__lista { border-bottom: 1px solid var(--line); }
.faq__item { border-top: 1px solid var(--line); }
.faq__item:has(.faq__pregunta[aria-expanded="true"]) { border-top: 3px solid var(--navy); }
.faq__item h3 { font-size: inherit; font-weight: inherit; }
.faq__pregunta {
  width: 100%; padding: 18px 0; border: 0; background: none; cursor: pointer;
  display: grid; grid-template-columns: 36px 1fr 24px; align-items: baseline;
  font-size: 18px; font-weight: 300; line-height: 1.35; color: var(--navy); text-align: left;
}
.faq__n { font-size: 13px; font-weight: 700; color: var(--transporte); }
.faq__signo { font-size: 24px; font-weight: 200; text-align: right; color: var(--navy); }
.faq__respuesta p { margin: 0; padding: 0 0 20px 36px; font-size: 16px; line-height: 1.65; color: var(--ink-muted); }
.faq__respuesta a { color: var(--transporte); text-decoration: underline; text-underline-offset: 3px; }

/* ── Pie (igual que pixxoae.com, app/components/Footer.tsx) ─ */
.pie { background: var(--navy-900); color: var(--on-dark); }
.pie__grid { display: flex; flex-direction: column; gap: 32px; padding-top: 48px; padding-bottom: 32px; }
.pie__marca { display: flex; flex-direction: column; gap: 20px; }
.pie__marca img { height: 26px; width: auto; }
.pie__marca p { font-size: 16px; line-height: 1.6; }
.pie__redes { display: flex; flex-wrap: wrap; gap: 20px; }
.pie__redes a {
  min-height: 44px; display: inline-flex; align-items: center;
  font-size: 12px; font-weight: 700; letter-spacing: 2pt; text-transform: uppercase; color: var(--transporte-tint);
}
.pie__redes a:hover { color: #FFFFFF; }
.pie__col { display: flex; flex-direction: column; gap: 12px; font-size: 15px; line-height: 1.5; }
.pie__col a { color: var(--on-dark); }
.pie__col a:hover { color: #FFFFFF; }
.pie__titulo { margin: 0; font-size: 11px; font-weight: 700; letter-spacing: 2pt; text-transform: uppercase; color: #FFFFFF; }
.pie__legal {
  border-top: 1px solid var(--navy-line); padding-top: 24px;
  display: flex; flex-direction: column; gap: 16px; font-size: 12px; line-height: 1.6;
}
.pie__legales { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.pie__legales a { color: var(--on-dark); min-height: 32px; display: inline-flex; align-items: center; }
.pie__legales a:hover { color: #FFFFFF; }
.pie__leyenda { font-size: 12px; line-height: 1.6; }

/* ── Barra fija del celular ───────────────────────────────── */
.barra-movil {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 900;
  padding: 10px 16px calc(22px + env(safe-area-inset-bottom));
  display: flex; gap: 8px;
  background: rgba(7, 12, 31, 0.86);
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
  border-top: 1px solid rgba(255, 255, 255, 0.16);
}
.barra-movil .btn { flex: 1; box-shadow: none; }
.barra-movil__wa {
  width: 48px; height: 48px; flex-shrink: 0; border-radius: var(--r-chico);
  display: flex; align-items: center; justify-content: center;
  border: 2px solid #FFFFFF; background: var(--navy);
}
.barra-movil__wa svg { width: 22px; height: 22px; fill: #FFFFFF; }

/* ═════════ Tablet (768–1199) ═════════ */
@media (min-width: 768px) {
  :root { --gutter: 40px; --seccion: 112px; --barra-movil: 0px; --r-boton: 15px; --r-tarjeta: 25px; }
  .barra-movil, .catalogo__cerrar, .catalogo-velo, .hero__btn-catalogo { display: none !important; }
  .eyebrow { font-size: 12px; letter-spacing: 3pt; }
  h2 { font-size: 56px; }
  .numeral { font-size: 160px; letter-spacing: -4px; }

  /* Portada: copy arriba y el formulario debajo. */
  .hero__velo {
    background:
      linear-gradient(90deg, rgba(7, 12, 31, 0.92) 0%, rgba(7, 12, 31, 0.35) 100%),
      rgba(7, 12, 31, 0.14);
  }
  .hero__grid { padding-top: calc(var(--menu) + 80px); padding-bottom: 112px; display: grid; gap: 48px; align-items: center; }
  .hero__copy { gap: 28px; }
  .hero h1 { font-size: 72px; font-weight: 100; letter-spacing: -1px; }
  .hero__lead { font-size: 20px; }
  .hero__nota { display: block; }

  /* Formulario en vidrio, dentro de la portada. */
  .catalogo {
    position: relative; left: auto; right: auto; bottom: auto; z-index: auto;
    max-height: none; overflow: visible; max-width: 600px;
    transform: none; visibility: visible; transition: none;
    padding: 32px; gap: 20px; border-radius: var(--r-tarjeta);
    background: rgba(13, 24, 62, 0.5);
    -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.22);
  }
  .catalogo__chevron { display: block; }
  .catalogo__titulo { font-size: 32px; }
  .catalogo__vista[data-catalogo-view="done"] .catalogo__titulo { font-size: 36px; }
  .solo-amplio { display: inline; }

  /* Familias: pestañas arriba y la tarjeta debajo. */
  .familias__cabeza {
    display: grid; grid-template-columns: 220px minmax(0, 1fr); column-gap: 24px; row-gap: 16px;
    align-items: end; margin-bottom: 64px;
  }
  .familias__cabeza .numeral { grid-row: 1 / span 2; }
  .familias__cabeza h2 { max-width: 1000px; }
  .familias__grid { border-top: 3px solid #FFFFFF; padding-top: 32px; gap: 24px; }
  .familias__tabs { margin: 0; padding: 0; flex-wrap: wrap; overflow: visible; }
  .familia-panel { min-height: 560px; }
  .familia-card { margin: 32px; width: 480px; max-width: calc(100% - 64px); padding: 28px; }
  .familia-card__nombre { font-size: 32px; }
  .familia-card__ayuda { font-size: 18px; }

  .caso__numero > span:first-child { font-size: 200px; }
  .caso__numero-txt { font-size: 28px; }
  .caso__dato { font-size: 48px; }
  .caso__marco { height: 420px; }

  .calificador-sec h2 { font-size: 56px; }
  .calificador__card { padding: 32px; }
  .calificador__pregunta, .calificador__resumen { font-size: 32px; }
  .calificador__opciones { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .calificador__acciones { flex-direction: row; flex-wrap: wrap; }

  .faq__pregunta { padding: 24px 0; grid-template-columns: 56px 1fr 32px; font-size: 24px; }
  .faq__respuesta p { padding: 0 32px 28px 56px; }

  .pie__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 16px; row-gap: 40px; padding-top: 64px; }
  .pie__marca { grid-column: 1 / span 6; }
  .pie__col--empresa { grid-column: 7 / span 6; }
  .pie__col--contacto { grid-column: 1 / span 6; }
  .pie__col--dudas { grid-column: 7 / span 6; }
  .pie__legal, .pie__leyenda { grid-column: 1 / -1; }
  .pie__legal { flex-direction: row; justify-content: space-between; flex-wrap: wrap; }
}

/* Menú de escritorio: 60 px. */
@media (min-width: 1280px) { :root { --menu: 60px; } }

/* ═════════ Escritorio (1200+) ═════════ */
@media (min-width: 1200px) {
  :root { --gutter: 64px; --seccion: 128px; }
  h2 { font-size: 72px; }
  .hero__grid { grid-template-columns: 7fr 5fr; gap: 16px; }
  .hero__copy { padding-right: 32px; }
  .hero h1 { font-size: clamp(72px, 6.67vw, 96px); }
  .catalogo { max-width: none; }

  .familias__grid {
    display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 16px; align-items: stretch;
  }
  .familias__tabs { grid-column: 1 / span 4; flex-direction: column; flex-wrap: nowrap; gap: 0; }
  .familia-panel { grid-column: 5 / span 8; }
  .familia-tab {
    min-height: 76px; padding: 0 20px; border: 0; border-bottom: 1px solid var(--navy-line);
    border-left: 6px solid transparent;
  }
  .familia-tab[aria-selected="true"] { border-left-color: var(--transporte); background: rgba(52, 80, 254, 0.18); }
  .familia-tab__marca { display: inline; }
  .familia-tab__nombre { font-size: 20px; font-weight: 300; }

  .caso__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 16px; align-items: center; }
  .caso__card { grid-column: 1 / span 5; gap: 20px; }
  .caso__numero > span:first-child { font-size: 240px; }
  .caso__marco { grid-column: 7 / span 6; height: 560px; }

  .calificador-sec__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 16px; }
  .calificador-sec__principal { grid-column: 1 / span 7; }
  .calificador-sec h2 { font-size: 72px; }
  .como { grid-column: 9 / span 4; align-self: end; }

  .faq__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 16px; }
  .faq__cabeza { grid-column: 1 / span 5; padding-right: 24px; }
  .faq__cabeza h2 { font-size: 64px; }
  .faq__lista { grid-column: 6 / span 7; }

  .pie__grid { padding-top: 80px; padding-bottom: 40px; row-gap: 56px; }
  .pie__marca { grid-column: 1 / span 4; }
  .pie__marca img { height: 32px; }
  .pie__col--empresa { grid-column: 6 / span 2; }
  .pie__col--contacto { grid-column: 8 / span 3; }
  .pie__col--dudas { grid-column: 11 / span 2; }
  .pie__leyenda { grid-column: 1 / span 9; }
}

/* Navegadores sin backdrop-filter: el vidrio se vuelve casi sólido. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .barra-movil { background: rgba(7, 12, 31, 0.97); }
  .familia-card { background: rgba(13, 24, 62, 0.92); }
  @media (min-width: 768px) {
    .catalogo { background: rgba(13, 24, 62, 0.92); }
  }
}

@media (prefers-reduced-motion: reduce) {
  .catalogo, .catalogo.is-abierto { transition: none; }
}

/* Aviso de cookies — la misma barra navy translúcida de app/components/CookieBanner.tsx.
   Mismo z-index que en el sitio: queda por encima de la barra móvil de conversión
   (.barra-movil, z-index 900) hasta que la persona elige. El botón de aceptar
   lleva texto navy (no blanco) para que se lea sobre el cyan. */
.cookie-banner { position: fixed; right: 0; bottom: 0; left: 0; z-index: 9999; padding: 16px 24px calc(16px + env(safe-area-inset-bottom)); background: rgba(13, 24, 62, 0.97); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); border-top: 1px solid rgba(255, 255, 255, 0.08); animation: cookie-banner-in 0.3s ease; }
.cookie-banner[hidden] { display: none; }
.cookie-banner__inner { max-width: 1180px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.cookie-banner__text { flex: 1; min-width: 240px; margin: 0; font-size: 14px; line-height: 1.6; color: rgba(255, 255, 255, 0.85); }
.cookie-banner__text a { color: #00d4ff; text-decoration: underline; }
.cookie-banner__actions { display: flex; flex-shrink: 0; flex-wrap: wrap; gap: 10px; }
.cookie-banner__btn { min-height: 44px; padding: 10px 22px; border-radius: 100px; font-size: 13px; font-weight: 700; white-space: nowrap; cursor: pointer; transition: background 0.2s, border-color 0.2s, color 0.2s; }
.cookie-banner__btn--ghost { background: transparent; border: 1.5px solid rgba(255, 255, 255, 0.35); color: rgba(255, 255, 255, 0.85); }
.cookie-banner__btn--ghost:hover { border-color: rgba(255, 255, 255, 0.5); color: #fff; }
.cookie-banner__btn--accept { background: #00d4ff; border: 1.5px solid #00d4ff; color: #0d183e; }
.cookie-banner__btn--accept:hover { background: #22ddff; border-color: #22ddff; }
@keyframes cookie-banner-in { from { transform: translateY(100%); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@media (max-width: 700px) {
  .cookie-banner { padding: 14px 16px calc(14px + env(safe-area-inset-bottom)); }
  .cookie-banner__inner { gap: 12px; }
  .cookie-banner__text { flex-basis: 100%; min-width: 0; }
  .cookie-banner__actions { width: 100%; }
  .cookie-banner__btn { flex: 1 1 0; min-width: 0; min-height: 44px; padding: 10px 12px; font-size: 13px; white-space: normal; }
}
@media (prefers-reduced-motion: reduce) { .cookie-banner { animation: none; } }