/* ==========================================================================
   Despiertoo · landing
   Valores de marca: tokens.css (copia de marca/tokens.css). Decisiones de
   esta página: ../contexto/design.md. Aquí no se inventan colores ni radios.
   Sin líneas finas, sin sombras en reposo, sin degradados: las superficies
   se separan con espacio y escalones de tono.
   ========================================================================== */

/* --- Fuentes (alojadas aquí, sin Google Fonts) ---------------------------- */
@font-face{font-family:"Baloo 2";font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/baloo-2-latin-700.woff2) format("woff2")}
@font-face{font-family:"Baloo 2";font-style:normal;font-weight:800;font-display:swap;src:url(../fonts/baloo-2-latin-800.woff2) format("woff2")}
@font-face{font-family:"Nunito Sans";font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/nunito-sans-latin-400.woff2) format("woff2")}
@font-face{font-family:"Nunito Sans";font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/nunito-sans-latin-600.woff2) format("woff2")}
@font-face{font-family:"Nunito Sans";font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/nunito-sans-latin-700.woff2) format("woff2")}
@font-face{font-family:"Nunito Sans";font-style:normal;font-weight:800;font-display:swap;src:url(../fonts/nunito-sans-latin-800.woff2) format("woff2")}

/* --- Tema marino por bloque: valores de [data-theme="dark"] de tokens.css -- */
.tema-oscuro{
  --brand-blue-strong:#3d84ff;
  --ink:#ffffff;
  --ink-muted:#94a3b8;
  --surface-100:#00183c;
  --surface-200:#0b2158;
  --border:#1e3a5f;
  --success:#1fd08c;
}

:root{
  --ancho:1120px;
  --ancho-texto:680px;
  --gutter:var(--space-3);
  --hueco-seccion:80px;
  --rapido:150ms ease-out;
  --ease-out:cubic-bezier(.22,1,.36,1);
  --t-press:140ms;
  --t-hover:180ms;
}
@media(min-width:768px){:root{--gutter:var(--space-5);--hueco-seccion:136px}}

/* --- Base ----------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}
body{
  margin:0;background:var(--surface-100);color:var(--ink);
  font-family:var(--font-body);font-size:16px;line-height:24px;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-family:var(--font-display);margin:0;color:var(--ink);text-wrap:balance}
p{margin:0}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
:focus-visible{outline:3px solid var(--brand-blue);outline-offset:3px;border-radius:var(--radius-sm)}
.tema-oscuro :focus-visible{outline-color:#ffffff}

.contenedor{max-width:var(--ancho);margin:0 auto;padding:0 var(--gutter)}
.oculto{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.saltar{
  position:absolute;left:var(--space-3);top:-100px;z-index:100;
  background:var(--ink);color:var(--surface-100);
  font-weight:700;padding:12px 16px;border-radius:var(--radius-full);text-decoration:none;
}
.saltar:focus{top:var(--space-3)}

/* --- Tipografía ------------------------------------------------------------ */
.display-xl{font-size:44px;line-height:42px;font-weight:800;letter-spacing:-.01em}
@media(min-width:768px){.display-xl{font-size:64px;line-height:60px}}
.h1{font-size:30px;line-height:32px;font-weight:800;letter-spacing:-.01em}
@media(min-width:768px){.h1{font-size:44px;line-height:44px}}
.h2{font-size:24px;line-height:28px;font-weight:700}
@media(min-width:768px){.h2{font-size:26px;line-height:30px}}
.body-lg{font-size:18px;line-height:28px}
.acento{color:var(--brand-blue)}

/* --- Botones -------------------------------------------------------------- */
.boton{
  display:inline-flex;align-items:center;gap:12px;
  min-height:56px;padding:8px 28px 8px 8px;
  background:var(--ink);color:var(--surface-100);
  border:0;border-radius:var(--radius-full);
  font-family:var(--font-body);font-size:16px;font-weight:700;line-height:20px;
  text-decoration:none;cursor:pointer;
  transition:transform var(--t-press) var(--ease-out);
}
.boton:active{transform:scale(.97)}
.boton[disabled]{opacity:.6;cursor:progress;transform:none}
.boton__ojos{
  flex:none;display:grid;place-items:center;width:52px;height:40px;
  background:#ffffff;border-radius:var(--radius-full);
}
.boton__ojos img{width:40px;height:auto}
.boton__flecha{font-size:20px;line-height:1;transition:transform var(--t-hover) var(--ease-out)}
.boton--simple{padding:8px 24px}
.boton--compacto{min-height:44px;padding:4px 18px}
@media(hover:hover) and (pointer:fine){
  .boton:hover{transform:translateY(-2px)}
  .boton:hover .boton__flecha{transform:translateX(4px)}
  .boton:active{transform:scale(.97)}
}
.enlace{font-weight:700;text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:2px}
.enlace:hover{color:var(--brand-blue)}

/* --- Cabecera: barra plana ------------------------------------------------- */
.cabecera{position:sticky;top:0;z-index:50;background:var(--surface-100)}
.cabecera .contenedor{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);min-height:68px}
.logo{display:inline-flex;text-decoration:none}
.logo img{height:36px;width:auto}
.cabecera nav{display:flex;align-items:center;gap:var(--space-4)}
.cabecera nav a.nav-enlace{display:none;font-weight:600;font-size:16px;text-decoration:none;color:var(--ink);text-underline-offset:6px;text-decoration-thickness:2px}
.cabecera nav a.nav-enlace:hover{text-decoration:underline}
@media(min-width:900px){.cabecera nav a.nav-enlace{display:inline}}

/* --- Secciones ------------------------------------------------------------ */
[id]{scroll-margin-top:68px}
.seccion{position:relative;overflow:hidden;overflow:clip;padding:var(--hueco-seccion) 0;background:var(--surface-100);color:var(--ink)}
.seccion--alterna{background:var(--surface-200)}
.seccion__cabeza{max-width:var(--ancho-texto);margin-bottom:var(--space-6)}
@media(min-width:768px){.seccion__cabeza{margin-bottom:var(--space-7)}}
.seccion__cabeza .body-lg{margin-top:var(--space-4)}
.seccion > .contenedor{position:relative;z-index:1}

/* Arcos (marca §06): fragmentos de un círculo mayor, siempre a sangre. */
.arco{position:absolute;border-radius:50%;pointer-events:none;border:solid var(--brand-blue);z-index:0}
.disco{position:absolute;border-radius:50%;pointer-events:none;background:var(--surface-200)}

/* --- Hero ----------------------------------------------------------------- */
.hero{padding:var(--space-6) 0 0;display:flex;align-items:center}
.hero .contenedor{width:100%;padding-bottom:180px}
@media(min-width:768px){.hero{padding:var(--space-7) 0;min-height:calc(100svh - 68px)}.hero .contenedor{padding-bottom:var(--space-7)}}
.hero__texto{max-width:640px;container-type:inline-size}
.hero h1{margin-bottom:var(--space-4)}
/* El titular va en tres líneas fijas: el tamaño se ajusta al ancho del bloque para que ninguna se parta. */
.hero h1.display-xl{font-size:min(72px,11.8cqi);line-height:.92}
.hero h1 .linea{display:block;white-space:nowrap}
.hero .body-lg{max-width:540px;margin-bottom:var(--space-5)}
.hero__acciones{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-4)}
.hero__ojos{position:absolute;right:-90px;bottom:-60px;width:min(78vw,420px);z-index:0}
@media(min-width:768px){.hero__ojos{right:-120px;bottom:-110px;width:min(52vw,720px)}}
.hero .disco{width:220px;height:220px;right:-70px;top:-70px}
@media(min-width:768px){.hero .disco{width:360px;height:360px;right:-120px;top:-140px}}
.dato--frase{display:inline-block;margin-top:var(--space-5);font-size:16px;line-height:24px;color:var(--ink)}
.dato--frase strong{font-weight:800}

/* --- Resumen: tira de fichas con scroll-snap ------------------------------- */
.resumen{background:var(--surface-200)}
.tira{
  list-style:none;margin:var(--space-6) calc(-1 * var(--gutter)) 0;padding:0 var(--gutter) var(--space-3);
  display:grid;grid-auto-flow:column;grid-auto-columns:80%;gap:var(--space-3);
  overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gutter);
  overscroll-behavior-x:contain;scrollbar-width:none;
}
.tira::-webkit-scrollbar{display:none}
@media(min-width:768px){.tira{grid-auto-columns:calc((100% - 2 * var(--gutter) - 2 * var(--space-4)) / 2.35);gap:var(--space-4)}}
@media(min-width:1100px){.tira{grid-auto-columns:calc((100% - 2 * var(--gutter) - 3 * var(--space-4)) / 3.25)}}
@media(hover:hover) and (pointer:fine){.tira{scrollbar-width:thin;scrollbar-color:var(--brand-blue) transparent}.tira::-webkit-scrollbar{display:block;height:8px}.tira::-webkit-scrollbar-thumb{background:var(--brand-blue);border-radius:8px}}
.tira li{display:flex;scroll-snap-align:start}
.ficha{
  display:flex;flex-direction:column;gap:var(--space-3);width:100%;min-height:236px;
  padding:var(--space-4);background:var(--surface-100);border-radius:var(--radius-lg);
  color:var(--ink);text-decoration:none;
  transition:transform var(--t-hover) var(--ease-out);
}
.ficha__nombre{font-family:var(--font-display);font-weight:800;font-size:24px;line-height:28px}
@media(min-width:768px){.ficha__nombre{font-size:26px;line-height:30px}}
.ficha__frase{font-size:18px;line-height:28px}
.ficha__ver{margin-top:auto;font-weight:800}
.ficha__ver span{display:inline-block;transition:transform var(--t-hover) var(--ease-out)}
.ficha:active{transform:scale(.98)}
@media(hover:hover) and (pointer:fine){
  .ficha:hover{transform:translateY(-4px)}
  .ficha:hover .ficha__ver span{transform:translateX(6px)}
  .ficha:active{transform:scale(.98)}
}
.ficha:focus-visible{outline-offset:-3px}

/* --- Problema: tres frentes en columnas de contraste ----------------------- */
/* Un escalón de tono por frente: marino alterno, azul de marca y blanco. */
.frentes{list-style:none;margin:0;padding:0;display:grid;gap:var(--space-3)}
@media(min-width:960px){.frentes{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-4)}}
.frente{
  display:flex;flex-direction:column;gap:var(--space-5);
  padding:var(--space-5) var(--space-4);border-radius:var(--radius-lg);color:var(--ink);
}
@media(min-width:768px){.frente{padding:var(--space-6) var(--space-5)}}
.frente--captar{--n:var(--brand-blue-strong);background:var(--surface-200)}
.frente--convertir{--n:#ffffff;background:var(--brand-blue)}
.frente--retener{--ink:#00183c;--n:var(--brand-blue);background:#ffffff}
.frente__cabeza{display:flex;align-items:baseline;gap:var(--space-3);font-size:24px;line-height:28px;font-weight:800}
.frente__n{font-size:56px;line-height:48px;font-weight:800;letter-spacing:-.02em;color:var(--n);font-variant-numeric:tabular-nums}
.frente h4{margin-bottom:var(--space-3)}
.frente p{font-size:18px;line-height:28px;max-width:60ch}
.giro{
  position:relative;z-index:1;margin-top:var(--hueco-seccion);
  display:grid;gap:var(--space-5);align-items:center;
}
@media(min-width:768px){.giro{grid-template-columns:1fr auto;gap:var(--space-6)}}
.giro__frase{font-family:var(--font-display);font-weight:800;font-size:24px;line-height:28px;max-width:820px;text-wrap:balance}
@media(min-width:768px){.giro__frase{font-size:32px;line-height:36px}}
@media(min-width:1100px){.giro__frase{font-size:36px;line-height:40px}}
.giro img{width:200px}
@media(min-width:768px){.giro img{width:260px}}
.problema .arco{width:280px;height:280px;border-width:40px;left:-140px;bottom:-140px}

/* --- Cómo trabaja: diferenciales y simulador ------------------------------- */
.diferenciales{list-style:none;margin:0;padding:0;display:grid;gap:var(--space-6)}
@media(min-width:960px){.diferenciales{grid-template-columns:repeat(3,1fr);gap:var(--space-6)}}
.diferenciales h3{margin-bottom:var(--space-3)}
.diferenciales p{font-size:18px;line-height:28px;max-width:60ch}

/* Simulador del embudo (pieza viva). Sin JS se ve la tabla de ejemplo. */
.sim{margin-top:var(--hueco-seccion);padding:var(--space-5) var(--space-4);background:var(--surface-100);border-radius:var(--radius-lg)}
@media(min-width:768px){.sim{padding:var(--space-6)}}
.sim__cabeza{margin-bottom:var(--space-5)}
.sim__cabeza h3{margin-bottom:var(--space-2)}
.sim__aviso{font-weight:700}
.sim__ejemplo{width:100%;max-width:560px;border-collapse:collapse;font-size:16px;line-height:24px}
.sim__ejemplo caption{text-align:left;color:var(--ink-muted);font-size:14px;padding-bottom:var(--space-2)}
.sim__ejemplo th,.sim__ejemplo td{padding:10px 0;border-bottom:1px solid var(--border);text-align:left;font-weight:400}
.sim__ejemplo td{text-align:right;font-weight:800;font-variant-numeric:tabular-nums}
.sim__cuerpo{display:grid;gap:var(--space-5)}
@media(min-width:960px){.sim__cuerpo{grid-template-columns:5fr 7fr;gap:var(--space-7);align-items:start}}
.sim__resultado{
  position:sticky;top:76px;z-index:2;
  padding:var(--space-3) var(--space-4);margin:0 calc(-1 * var(--space-3));background:var(--ink);color:var(--surface-100);border-radius:var(--radius-md);
}
@media(min-width:960px){.sim__resultado{top:100px;padding:var(--space-5);margin:0}}
/* Una fila por resultado: el título a la izquierda y su número al lado. */
.sim__filas{margin:0;display:grid}
.sim__filas > div{display:flex;justify-content:space-between;align-items:baseline;gap:var(--space-3);padding:6px 0}
@media(min-width:960px){.sim__filas > div{padding:10px 0}}
.sim__filas dt{font-size:15px;line-height:20px}
.sim__filas dd{margin:0;font-family:var(--font-display);font-weight:800;font-size:20px;line-height:26px;font-variant-numeric:tabular-nums;white-space:nowrap}
@media(min-width:960px){.sim__filas dt{font-size:16px;line-height:24px}.sim__filas dd{font-size:28px;line-height:32px}}
/* El margen cierra la cuenta: separado del resto y más grande. */
.sim__filas .sim__total{margin-top:var(--space-2);padding-top:var(--space-3)}
.sim__filas .sim__total dt{font-weight:800}
.sim__filas .sim__total dd{font-size:26px;line-height:30px;color:var(--brand-blue)}
@media(min-width:960px){.sim__filas .sim__total dd{font-size:40px;line-height:44px}}
.sim__cadena{display:none;margin-top:var(--space-3);font-size:16px;line-height:24px}
@media(min-width:960px){.sim__cadena{display:block}}
.sim__mandos{display:grid;gap:var(--space-4) var(--space-5)}
@media(min-width:600px){.sim__mandos{grid-template-columns:1fr 1fr}}
.sim__control{display:grid;grid-template-columns:1fr auto;align-items:baseline;gap:0 var(--space-3)}
.sim__control label{font-weight:700}
.sim__control output{font-family:var(--font-display);font-weight:800;font-size:20px;line-height:24px;font-variant-numeric:tabular-nums}
.sim__control input[type=range]{
  grid-column:1/-1;width:100%;height:44px;margin:0;background:transparent;cursor:pointer;
  -webkit-appearance:none;appearance:none;
}
.sim__control input[type=range]::-webkit-slider-runnable-track{height:10px;border-radius:var(--radius-full);background:#d9e4fb}
.sim__control input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:30px;height:30px;margin-top:-10px;border-radius:50%;background:var(--brand-blue);border:5px solid var(--ink);transition:transform var(--t-press) var(--ease-out)}
.sim__control input[type=range]:active::-webkit-slider-thumb{transform:scale(1.15)}
.sim__control input[type=range]::-moz-range-track{height:10px;border-radius:var(--radius-full);background:#d9e4fb}
.sim__control input[type=range]::-moz-range-progress{height:10px;border-radius:var(--radius-full);background:var(--brand-blue)}
.sim__control input[type=range]::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:var(--brand-blue);border:5px solid var(--ink)}

/* --- Sistema: siete piezas en tres fases ------------------------------------ */
.fases{display:grid;gap:var(--space-7)}
@media(min-width:768px){.fases{gap:112px}}
.fase{display:grid;gap:var(--space-5)}
@media(min-width:900px){.fase{grid-template-columns:5fr 7fr;gap:var(--space-7);align-items:start}}
.fase__nombre{font-size:44px;line-height:44px;font-weight:800;letter-spacing:-.02em}
@media(min-width:768px){.fase__nombre{font-size:72px;line-height:68px}}
.piezas{list-style:none;margin:0;padding:0;display:grid;gap:var(--space-3)}
.pieza{background:var(--surface-200);border-radius:var(--radius-lg)}
.pieza summary{
  list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:var(--space-3);
  padding:var(--space-4);font-family:var(--font-display);font-weight:800;font-size:20px;line-height:26px;
  transition:transform var(--t-press) var(--ease-out);
}
.pieza summary:active{transform:scale(.99)}
.pieza summary::-webkit-details-marker{display:none}
.pieza summary::after{content:"+";flex:none;font-size:30px;line-height:1;color:var(--brand-blue);transition:transform var(--t-hover) var(--ease-out)}
.pieza[open] summary::after{transform:rotate(45deg)}
.pieza h4{margin:0 var(--space-4) var(--space-2);font-family:var(--font-body);font-size:18px;line-height:26px;font-weight:800}
.pieza p{padding:0 var(--space-4) var(--space-4);font-size:16px;line-height:26px;max-width:60ch}
@media(min-width:768px){.pieza p{font-size:18px;line-height:28px}}
.sistema .arco{width:240px;height:240px;border-width:36px;right:-120px;top:-120px}

/* --- Para quién ----------------------------------------------------------- */
.encaje{display:grid;gap:var(--space-4)}
@media(min-width:900px){.encaje{grid-template-columns:1fr 1fr}}
.encaje__col{background:var(--surface-100);color:var(--ink);border-radius:var(--radius-lg);padding:var(--space-5) var(--space-4)}
@media(min-width:768px){.encaje__col{padding:var(--space-6)}}
.encaje__col h3{margin-bottom:var(--space-5)}
.lista{list-style:none;margin:0;padding:0;display:grid;gap:var(--space-4)}
.lista li{font-size:18px;line-height:28px}

/* --- Auditoría ------------------------------------------------------------ */
.auditoria__rejilla{display:grid;gap:var(--space-6);align-items:start}
@media(min-width:960px){.auditoria__rejilla{grid-template-columns:5fr 6fr;gap:var(--space-7)}}
.cupo{
  display:flex;align-items:center;gap:var(--space-3);margin-top:var(--space-5);
  padding:var(--space-3) var(--space-4);background:var(--surface-200);border-radius:var(--radius-lg);
}
.cupo strong{font-family:var(--font-display);font-size:44px;line-height:42px;font-weight:800;color:var(--ink)}
.cupo span{font-size:16px;line-height:24px}
.proceso{list-style:none;margin:var(--space-5) 0 0;padding:0;display:grid;gap:var(--space-4)}
.proceso li{display:grid;grid-template-columns:32px 1fr;gap:var(--space-3)}
.proceso li strong{display:block}
.proceso__n{
  display:grid;place-items:center;width:32px;height:32px;border-radius:var(--radius-full);
  background:var(--surface-200);color:var(--ink);font-weight:800;font-size:14px;
}
.auditoria__ojos{position:absolute;left:-60px;bottom:-70px;width:280px;z-index:0}
@media(max-width:959px){.auditoria__ojos{display:none}}

/* --- Formularios (siempre en tarjeta clara) ------------------------------- */
.tarjeta-form{
  --ink:#00183c;--ink-muted:#64748b;--surface-100:#ffffff;--surface-200:#f5f8ff;--border:#e2e8f0;
  background:var(--surface-100);color:var(--ink);border-radius:var(--radius-lg);
  padding:var(--space-5) var(--space-4);
}
@media(min-width:768px){.tarjeta-form{padding:var(--space-6) var(--space-5)}}
.tarjeta-form h3{margin-bottom:var(--space-2)}
.tarjeta-form form > p{margin-bottom:var(--space-4)}
.campos{display:grid;gap:var(--space-3)}
@media(min-width:600px){.campo--ancho{grid-column:1/-1}}
@media(min-width:600px){.campos--2{grid-template-columns:1fr 1fr}}
.campo{display:flex;flex-direction:column;gap:6px;min-width:0}
.campo label{font-size:14px;line-height:20px;font-weight:700}
.campo label .opcional{font-weight:400;color:var(--ink-muted)}
.campo input,.campo textarea{
  width:100%;min-height:52px;padding:12px 18px;
  font:inherit;font-size:16px;color:var(--ink);
  background:var(--surface-200);border:2px solid transparent;border-radius:var(--radius-full);
  transition:border-color var(--rapido),background var(--rapido);
}
.campo textarea{border-radius:var(--radius-md);min-height:132px;resize:vertical}
.campo input::placeholder,.campo textarea::placeholder{color:#8a97ab}
.campo input:focus,.campo textarea:focus{outline:none;border-color:var(--brand-blue);background:var(--surface-100)}
.campo--error input,.campo--error textarea{border-color:var(--danger)}
.campo__error{display:none;font-size:13px;line-height:16px;color:#c81e3a;font-weight:600}
.campo--error .campo__error{display:block}
.casillas{display:grid;gap:var(--space-3);margin-top:var(--space-4)}
.casilla{display:grid;grid-template-columns:24px 1fr;gap:var(--space-2);align-items:start;font-size:14px;line-height:20px}
.casilla input{width:20px;height:20px;margin:0;accent-color:var(--ink)}
.casilla a{color:var(--ink);font-weight:700}
.casilla--error{color:#c81e3a}
.form-pie{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-3);margin-top:var(--space-4)}
.form-estado{font-size:14px;line-height:20px;font-weight:600}
.form-estado--error{color:#c81e3a}
/* Trampa para bots: fuera de la vista, sin ocupar sitio. */
.trampa{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}

/* --- Formulario en dos pasos (desplegables, grupos de opciones, paso) ------ */
[hidden]{display:none!important}
.campo select{
  width:100%;min-height:52px;padding:12px 44px 12px 18px;
  font:inherit;font-size:16px;color:var(--ink);
  background-color:var(--surface-200);border:2px solid transparent;border-radius:var(--radius-full);
  appearance:none;-webkit-appearance:none;cursor:pointer;
  /* Flecha: SVG en data URI (la CSP admite img-src data:). */
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-position:right 18px center;background-size:12px 8px;background-repeat:no-repeat;
  transition:border-color var(--rapido),background-color var(--rapido);
}
.campo select:focus{outline:none;border-color:var(--brand-blue);background-color:var(--surface-100)}
.campo--error select{border-color:var(--danger)}
.grupo{border:0;margin:0;padding:0}
.grupo legend{padding:0;margin-bottom:6px;font-size:14px;line-height:20px;font-weight:700}
.opciones{display:flex;flex-wrap:wrap;gap:var(--space-2)}
.opcion{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:8px 16px;
  background:var(--surface-200);border:2px solid var(--ink-muted);border-radius:var(--radius-full);
  font-size:16px;line-height:20px;cursor:pointer;transition:border-color var(--rapido),background var(--rapido),transform var(--t-press) var(--ease-out)}
.opcion:active{transform:scale(.97)}
.opcion input{width:18px;height:18px;margin:0;accent-color:var(--ink)}
.opcion:has(input:checked){border-color:var(--ink);background:var(--surface-100)}
.opcion:focus-within{border-color:var(--brand-blue)}
.campo--error .opcion{border-color:var(--danger)}
/* La tarjeta del formulario es blanca dentro de la sección marina: foco azul, no blanco. */
.tema-oscuro .tarjeta-form :focus-visible{outline-color:var(--brand-blue)}
.casilla .campo__error{grid-column:2}
.casilla--error .campo__error{display:block}
.form-paso{margin:0 0 var(--space-3);font-size:14px;line-height:20px;font-weight:800;color:var(--ink-muted)}

/* CTA fijo: lo único que flota de verdad, por eso lleva sombra. */
.cta-fija{position:fixed;left:0;right:0;bottom:16px;z-index:50;display:flex;justify-content:center;padding:0 16px;pointer-events:none}
.cta-fija .boton{pointer-events:auto;max-width:640px;box-shadow:0 10px 30px rgba(0,24,60,.28)} /* taste-skill-ignore: barra fija que flota sobre el contenido */
.cta-fija__texto{text-align:left}
@media(max-width:599px){.cta-fija .boton{width:100%;font-size:14px;padding-right:18px}}
/* En escritorio, a la derecha: tapa menos los titulares, que van a la izquierda. */
@media(min-width:1100px){.cta-fija{justify-content:flex-end;padding:0 24px}}

/* --- Banner de cookies (js/medicion.js) ------------------------------------
   Flota sobre el contenido, por eso lleva sombra. Aceptar, Rechazar y
   Configurar con el mismo peso visual (Guía de cookies de la AEPD). Mientras
   está abierto se oculta el CTA fijo, que ocupa el mismo sitio. */
.cookies{
  --ink:#00183c;--ink-muted:#475569;--surface-200:#f5f8ff;
  position:fixed;left:16px;right:16px;bottom:16px;z-index:60;
  max-width:560px;max-height:calc(100svh - 32px);overflow-y:auto;
  padding:var(--space-4);background:#ffffff;color:var(--ink);border-radius:var(--radius-lg);
  box-shadow:0 10px 30px rgba(0,24,60,.28); /* taste-skill-ignore: panel que flota sobre el contenido */
}
@media(min-width:768px){.cookies{left:24px;right:auto;bottom:24px;padding:var(--space-5)}}
.cookies :focus-visible{outline-color:var(--brand-blue)}
.cookies__titulo{font-size:20px;line-height:26px;font-weight:800;margin-bottom:var(--space-2)}
.cookies__titulo:focus{outline:none}
.cookies__intro{font-size:15px;line-height:22px}
.cookies__intro a{font-weight:700}
.cookies__panel{display:grid;gap:var(--space-2);margin-top:var(--space-4)}
.cookies__categoria{padding:var(--space-3);background:var(--surface-200);border-radius:var(--radius-md)}
.cookies__interruptor{display:flex;align-items:center;gap:var(--space-2);cursor:pointer}
.cookies__interruptor input{width:20px;height:20px;margin:0;accent-color:var(--ink)}
.cookies__interruptor input:disabled{cursor:default}
.cookies__nombre{font-weight:800}
.cookies__fija{margin-left:auto;font-size:13px;line-height:18px;font-weight:700;color:var(--ink-muted)}
.cookies__texto{margin-top:4px;padding-left:28px;font-size:14px;line-height:20px;color:var(--ink-muted)}
.cookies__acciones{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-2);margin-top:var(--space-4)}
.cookies--panel .cookies__acciones{grid-template-columns:1fr 1fr}
.cookies--panel [data-accion="guardar"]{grid-column:1/-1}
.cookies__boton{justify-content:center;min-height:44px;padding:8px 12px;font-size:15px}
.cookies-abierto .cta-fija{display:none}
.pie__boton{padding:0;border:0;background:none;font:inherit;color:var(--ink);cursor:pointer}
.pie__boton:hover{text-decoration:underline}

/* --- FAQ y cierre --------------------------------------------------------- */
.faq{display:grid;gap:var(--space-3);max-width:820px}
.faq details{background:var(--surface-200);border-radius:var(--radius-lg)}
.faq summary{
  list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:var(--space-3);
  padding:var(--space-4);font-family:var(--font-display);font-weight:700;font-size:20px;line-height:26px;
  transition:transform var(--t-press) var(--ease-out);
}
.faq summary:active{transform:scale(.99)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";flex:none;font-size:28px;line-height:1;color:var(--brand-blue);transition:transform var(--t-hover) var(--ease-out)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding:0 var(--space-4) var(--space-4);max-width:62ch}

.cierre__banda{display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--space-5)}
.cierre__banda h2{max-width:760px}
@media(max-width:599px){.cierre__banda h2{font-size:24px;line-height:28px}}
.cierre__ojos{width:180px}
.cierre .arco{width:320px;height:320px;border-width:44px;right:-160px;bottom:-160px}

/* --- Pie ------------------------------------------------------------------ */
.pie{padding:var(--space-6) 0}
.pie .contenedor{display:grid;gap:var(--space-4)}
@media(min-width:768px){.pie .contenedor{grid-template-columns:auto 1fr;align-items:end}}
.pie .logo img{height:40px}
.pie__datos{display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-4);font-size:14px;line-height:20px;color:var(--ink-muted)}
@media(min-width:768px){.pie__datos{justify-content:flex-end}}
.pie__datos a{color:var(--ink);text-decoration:none}
.pie__datos a:hover{text-decoration:underline}

/* --- Página de gracias ---------------------------------------------------- */
.gracias{min-height:calc(100svh - 68px);display:flex;align-items:center}
.gracias .contenedor{position:relative;z-index:1;width:100%;padding-bottom:200px}
@media(min-width:768px){.gracias .contenedor{padding-bottom:0}}
.gracias__texto{max-width:600px}
.gracias .body-lg{margin:var(--space-4) 0 var(--space-5)}
.gracias .disco{width:260px;height:260px;right:-90px;top:-90px}
.gracias__ojos{position:absolute;right:-80px;bottom:-60px;width:min(70vw,520px)}
.gracias--agenda{align-items:flex-start}
.gracias--agenda .contenedor{padding-bottom:0}
.calendario{position:relative;margin-top:var(--space-5);min-height:720px;background:var(--surface-200);border-radius:var(--radius-lg);overflow:hidden}
.calendario iframe{display:block;width:100%;height:720px;border:0}
@media(max-width:599px){.calendario,.calendario iframe{min-height:900px;height:900px}}
.calendario__aviso{position:absolute;inset:0;display:grid;place-items:center;margin:0;padding:var(--space-5);text-align:center;color:var(--ink-muted)}
.calendario__pie{display:flex;flex-wrap:wrap;gap:var(--space-4);margin-top:var(--space-4)}

/* --- Movimiento: solo transform y opacity ---------------------------------
   Lo oculto solo se oculta bajo html.js (js/arranque.js); si landing.js no
   llega a marcar las entradas, arranque.js quita la clase y todo se ve. */
@media(prefers-reduced-motion:no-preference){
  .js [data-entra]{opacity:0;transform:translateY(24px);transition:opacity 700ms var(--ease-out),transform 800ms var(--ease-out)}
  .js [data-entra="1"]{transition-delay:80ms}
  .js [data-entra="2"]{transition-delay:160ms}
  .js [data-entra="3"]{transition-delay:240ms}
  .js [data-entra].en-vista{opacity:1;transform:none}
  .hero__ojos{animation:mirar 6s var(--ease-out) infinite alternate}
}
@keyframes mirar{from{transform:translate(0,0)}to{transform:translate(-14px,-10px)}}

/* Reserva sitio bajo el pie para que el CTA fijo no tape los enlaces legales. */
.pie{padding-bottom:104px}