/* ==========================================================================
   sisex.app — landing final
   Un solo fichero. Cero recursos externos. SVG en línea. Claro y oscuro.

   Arquitectura de color: la paleta de marca (bloque 1) es inmutable; encima
   van tokens de rol, y el modo oscuro redefine SOLO roles. Ningún color se
   declara únicamente dentro del media query oscuro. Sin color-mix(): todos
   los tintes son rgba() literal, así que no hay nada que rescatar con un
   @supports a medias.
   El bloque :root es idéntico al de tokens.css (fichero hermano).
   ========================================================================== */

:root{
  /* ---- 1 · MARCA (hex exactos del manual, no se tocan nunca) ---- */
  --teal:#00ACAC; --teal-deep:#009BA3; --teal-dark:#007E85;
  --purple:#7A6CC0; --purple-dark:#6455A8;
  --coral:#FC7570; --coral-dark:#E85F5A;
  --navy:#0F4A61; --cream:#FAF9F5; --white:#FFFFFF;

  /* ---- 2 · superficies ---- */
  --bg:#FAF9F5; --bg-warm:#F3EFE6; --surface:#FFFFFF; --surface-2:#F7F4EC;
  /* el pie es el final del degradado de cierre, no un cuarto tono crema: si
     rebota a claro, el descenso de la página termina con un escalón */
  --footer-bg:#0C3B4C; --notice-bg:#FDF0EF;

  /* ---- 3 · tinta (ratio real anotado) ---- */
  --ink:#0F4A61;          /* 9,2:1 sobre --bg                              */
  --ink-soft:#3D6B7C;     /* 5,6:1                                         */
  --teal-ink:#007E85;     /* 4,6:1 sobre --bg · 4,9:1 sobre blanco         */
  --teal-strong:#006B72;  /* 6,0:1 — teal sobre tintes teal (5,2:1)        */
  --purple-ink:#6455A8;   /* 5,9:1                                         */
  --coral-ink:#E05C56;    /* 3,4:1 — SOLO texto grande                     */
  --coral-strong:#B8433D; /* 5,1:1 — coral en texto pequeño                */

  /* ---- 4 · color de interfaz (se aclara en oscuro; la marca no) ---- */
  --ui-teal:#00ACAC; --ui-purple:#7A6CC0; --ui-coral:#FC7570;

  /* ---- 5 · trazos, tintes, retícula ---- */
  --line:rgba(15,74,97,.13); --line-soft:rgba(15,74,97,.08); --line-strong:rgba(15,74,97,.22);
  --dot:rgba(0,172,172,.30);
  --tint-teal:rgba(0,172,172,.14); --tint-teal-2:rgba(0,172,172,.20);
  --tint-purple:rgba(122,108,192,.15); --tint-coral:rgba(252,117,112,.16);
  --notice-line:rgba(252,117,112,.34);

  /* ---- 6 · botones ----
     UN SOLO ACENTO. El botón secundario era morado y el principal verde
     azulado, así que en cualquier pantalla con dos botones había dos colores
     compitiendo por ser «el importante» y ninguno lo parecía. Ahora el
     secundario es neutro —tinta sobre nada, con su borde— y el color se reserva
     para la acción principal; el coral sigue siendo sólo para lo que no tiene
     vuelta atrás.

     Van por `var()` y no repetidos en hexadecimal: así el modo oscuro sale del
     mismo sitio que el resto de la tinta y no hay un segundo juego que
     mantener. El borde es `--ink-soft` y no `--line-strong` por lo de siempre:
     `--line-strong` es un hairline de 1,5:1 y el límite visual de un control
     tiene que llegar a 3:1 (WCAG 1.4.11). */
  --btn-fill:#007E85; --btn-fill-hi:#006B72; --btn-ink:#FFFFFF;
  --btn-2-ink:var(--ink); --btn-2-line:var(--ink-soft); --btn-2-bg-hi:var(--tint-teal);

  /* ---- 7 · panel oscuro de compromisos (navy exacto de marca) ---- */
  --panel:#0F4A61; --panel-2:#12586F; --panel-ink:#FFFFFF;
  --panel-soft:rgba(255,255,255,.80); --panel-line:rgba(255,255,255,.20);
  --panel-teal:#5FE0DB; --panel-purple:#BEB2F2; --panel-coral:#FFA39D;
  --panel-dot:rgba(95,224,219,.26);

  /* ---- 8 · pasos numerados ---- */
  --step-1:#007E85; --step-2:#6455A8; --step-3:#E05C56; --step-ink:#FFFFFF;

  /* ---- 9 · marca aplicada ---- */
  --logo-inner:#FFFFFF; --logo-dot:#0F4A61; --focus:#6455A8;
  /* .94 y no .88: la cabecera se pega y ahora pasa por encima de dos bandas
     navy a sangre, y a .88 el navy se colaba por debajo dejando un velo sucio
     detrás del logotipo. Sigue siendo translúcida, pero ya no tiñe. */
  --head-bg:rgba(250,249,245,.94);

  /* ---- 10 · mockup de móvil ---- */
  --bezel:linear-gradient(160deg,#1B5468,#0F4A61 45%,#0A3546);
  --scr-bg:#FFFFFF; --scr-row:#F4F8F8; --scr-line:rgba(15,74,97,.12);
  --scr-ink:#0F4A61; --scr-soft:#45707F;
  --scr-tint-teal:rgba(0,172,172,.16); --scr-tint-coral:rgba(252,117,112,.20);

  /* ---- 11 · decoración orgánica ---- */
  --blob-soft:.16; --blob-mid:.34; --blob-strong:.55;

  /* ---- 12 · sombras ---- */
  --sh-s:0 2px 6px rgba(15,74,97,.05), 0 8px 22px rgba(15,74,97,.06);
  --sh-m:0 4px 12px rgba(15,74,97,.06), 0 18px 42px rgba(15,74,97,.09);
  --sh-l:0 10px 24px rgba(15,74,97,.09), 0 34px 76px rgba(15,74,97,.16);

  /* ---- 13 · tipografía ---- */
  --font:ui-rounded,"SF Pro Rounded","Segoe UI Variable","Nunito","Quicksand",
         system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --fs-h1:clamp(2.15rem,6.6vw,4.05rem);
  --fs-h2:clamp(1.72rem,4.2vw,2.6rem);
  --fs-h3:clamp(1.1rem,2.4vw,1.24rem);
  --fs-lead:clamp(1.06rem,2vw,1.22rem);
  --fs-body:1rem; --fs-small:.94rem; --fs-micro:.82rem;
  /* SUELO DE LOS CAMPOS DE TEXTO. No es una talla de estilo, es una barrera:
     por debajo de 16px Safari en iOS AMPLÍA la página al enfocar un campo, y
     no la devuelve. Es el gesto que más delata que debajo hay una web y no una
     aplicación. Va en px y no en rem a propósito: `1rem` depende del tamaño
     base del navegador, y con el de alguien puesto en 14px volveríamos a estar
     por debajo del umbral sin haber cambiado una línea. */
  --fs-input:16px;
  --lh-tight:1.12; --lh-head:1.22; --lh-body:1.62;
  --track-tight:-.035em; --track-wide:.14em;
  --fw-bold:700; --fw-black:800;

  /* ---- 14 · espaciado y medida ---- */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px;
  --sp-6:32px; --sp-7:48px; --sp-8:64px; --sp-9:96px;
  --wrap:1180px; --pad:clamp(20px,5vw,64px); --sec-y:clamp(64px,9vw,124px);
  --head-h:96px;

  /* ---- 15 · radios ---- */
  --r-1:10px; --r-2:14px; --r-3:20px; --r-4:26px; --r-5:34px; --r-pill:999px;

  /* ---- 16 · BANDAS DE SECCIÓN (ritmo vertical) ----
     Tokens nuevos, no re-tintes: `--bg`, `--surface` y `--notice-bg` los
     comparte app-ui.css y moverlos repintaría /nuevo, /cuenta y /acuerdo.
     Suelo de luminancia: `--ink-soft` en texto pequeño obliga a L >= 0,758.
     --band-1 L=0,805 · --band-2 L=0,823, los dos por encima. */
  --band-1:#EFE7D8;   /* arena cálida — ink 7,9:1 · ink-soft 4,8:1 · teal-strong 5,1:1 */
  --band-2:#DFEDEC;   /* verde agua frío — ink 8,0:1 · ink-soft 4,9:1 · teal-strong 5,2:1 */

  /* ---- 17 · DEGRADADO DE CIERRE (marca, tres paradas) ----
     Las tres paradas son oscuras a propósito: el texto del cierre pasa a
     `--panel-ink` y el peor punto del degradado da 7,9:1 en blanco y 4,9:1
     con `--panel-teal`. Cambiar cualquiera obliga a volver a medir. */
  --cierre-1:#0F4A61;  /* navy de marca — blanco 9,7:1 */
  --cierre-2:#4E3F8A;  /* morado profundo — blanco 8,7:1 */
  --cierre-3:#005B61;  /* teal profundo — blanco 7,9:1 */

  /* ---- 18 · AURORA (decoración animada, solo sobre bandas oscuras) ----
     rgba() literal, sin color-mix(), como el resto de tintes. Alfas topadas:
     con estos valores el punto más iluminado de una banda deja `--panel-soft`
     en 4,7:1 y `--panel-ink` en 6,5:1. Subirlas rompe el texto pequeño. */
  --aurora-1:rgba(0,172,172,.20);
  --aurora-2:rgba(122,108,192,.22);
  --aurora-3:rgba(252,117,112,.16);

  /* ---- 19 · TARJETAS DE BANDA OSCURA Y BRILLO ----
     El «vidrio» es un velo OSCURO, no claro: recorta la aurora por debajo de
     la tarjeta y sube el contraste del texto a 6,0:1 en el peor caso. Al pasar
     por encima se aclara, que es lo que hace que la tarjeta parezca subir. */
  --sx-vidrio:rgba(7,36,47,.34);
  --sx-vidrio-hi:rgba(7,36,47,.20);
  --sx-sheen:rgba(0,172,172,.10);   /* brillo diagonal sobre superficie clara */

  /* ---- 20 · TITULARES EN DEGRADADO ----
     Sin hexadecimal propio: apuntan a tokens de tinta que el bloque oscuro ya
     redefine, así que cambian de modo solos y ningún color queda declarado
     únicamente dentro del media query. Es el mismo precedente documentado más
     abajo para `--btn-2-*`. SOLO h2 (texto grande). */
  --grad-a:var(--ink);
  --grad-b:var(--teal-strong);
}

@media (prefers-color-scheme: dark){
  :root{
    --bg:#0A2F3D; --bg-warm:#0C3846; --surface:#12404F; --surface-2:#10404F;
    --footer-bg:#07242F; --notice-bg:#14313E;

    --ink:#E9F3F4; --ink-soft:#A6C4CD;
    --teal-ink:#57D3CE; --teal-strong:#7DE3DE; --purple-ink:#B3A7EA;
    --coral-ink:#FF9B94; --coral-strong:#FFB0AA;

    --ui-teal:#3CCECA; --ui-purple:#A79AE4; --ui-coral:#FF9089;

    --line:rgba(233,243,244,.15); --line-soft:rgba(233,243,244,.09);
    --line-strong:rgba(233,243,244,.26); --dot:rgba(87,211,206,.24);
    --tint-teal:rgba(60,206,202,.16); --tint-teal-2:rgba(60,206,202,.22);
    --tint-purple:rgba(167,154,228,.18); --tint-coral:rgba(255,144,137,.18);
    --notice-line:rgba(255,144,137,.34);

    /* `--btn-2-*` NO se repiten aquí: apuntan a `--ink`, `--ink-soft` y
       `--tint-teal`, que este bloque ya redefine, así que el botón secundario
       cambia de modo solo. */
    --btn-fill:#3FCBC6; --btn-fill-hi:#5FDBD6; --btn-ink:#05222C;

    --panel:#0A2E3C; --panel-2:#0F3E4F; --panel-ink:#EAF6F8;
    --panel-soft:rgba(234,246,248,.80); --panel-line:rgba(95,224,219,.22);

    --step-1:#3FCBC6; --step-2:#B3A7EA; --step-3:#FF9B94; --step-ink:#05222C;

    --logo-inner:#123F4F; --logo-dot:#D6E8ED; --focus:#B3A7EA;
    --head-bg:rgba(10,47,61,.94);   /* mismo motivo que en claro */

    --bezel:linear-gradient(160deg,#0E3D4C,#061F28 60%,#04161D);
    --scr-bg:#0B3441; --scr-row:#10404F; --scr-line:rgba(233,243,244,.13);
    --scr-ink:#E9F3F4; --scr-soft:#9BBDC7;
    --scr-tint-teal:rgba(60,206,202,.18); --scr-tint-coral:rgba(255,144,137,.20);

    --blob-soft:.20; --blob-mid:.30; --blob-strong:.42;

    --sh-s:0 2px 6px rgba(0,0,0,.28), 0 8px 22px rgba(0,0,0,.22);
    --sh-m:0 4px 12px rgba(0,0,0,.30), 0 18px 42px rgba(0,0,0,.30);
    --sh-l:0 10px 24px rgba(0,0,0,.34), 0 34px 76px rgba(0,0,0,.44);

    /* ---- 16 a 19 · las mismas bandas, en oscuro ----
       Techo de luminancia en oscuro: `--ink-soft` #A6C4CD exige L <= 0,0767.
       --band-1 L=0,031 · --band-2 L=0,031: sobra margen (7,1:1). */
    --band-1:#12363E; --band-2:#0A3644;

    --cierre-1:#0A2E3C; --cierre-2:#3E3372; --cierre-3:#004A50;

    --aurora-1:rgba(60,206,202,.18);
    --aurora-2:rgba(167,154,228,.20);
    --aurora-3:rgba(255,144,137,.15);

    --sx-vidrio:rgba(4,22,29,.38);
    --sx-vidrio-hi:rgba(4,22,29,.24);
    --sx-sheen:rgba(60,206,202,.12);

    /* `--grad-a` y `--grad-b` NO se repiten aquí: apuntan a `--ink` y
       `--teal-strong`, que este bloque ya redefine. Mismo motivo que
       `--btn-2-*` unas líneas más arriba. */
  }
}

/* ==========================================================================
   BASE
   ========================================================================== */
*,*::before,*::after{box-sizing:border-box}

html{
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;          /* la versión sin prefijo ya la entienden
                                     Chrome y Firefox; con sólo la prefijada,
                                     Android acababa reescalando la tipografía
                                     de los bloques largos por su cuenta */
  /* Los controles que siguen siendo nativos —casillas, radios, el medidor—
     salen en el color de la marca y no en el azul del sistema. Un formulario
     con checkboxes azul Windows dentro de una interfaz teal canta a web. */
  accent-color:var(--ui-teal);
  /* la cabecera se pega a partir de 820px: los anclajes tienen que aterrizar
     por debajo de ella, no detrás (ver el @media de la cabecera) */
  scroll-padding-top:16px;
}

body{
  margin:0;
  background:var(--bg);              /* fondo explícito, siempre */
  color:var(--ink);
  font-family:var(--font);
  font-size:17px;                    /* la redondeada necesita cuerpo */
  line-height:var(--lh-body);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  /* Recorte horizontal SOLO en body. html se deja intacto para que el valor
     se propague al viewport: si lo pusiéramos también en html, body pasaría a
     ser contenedor de scroll y la cabecera sticky dejaría de pegarse. */
  overflow-x:hidden;
}
@supports (overflow:clip){ body{overflow-x:clip} }

img,svg{max-width:100%}
h1,h2,h3,p,ul,ol,figure,dl{margin:0}
ul,ol{padding:0;list-style:none}
a{color:inherit}
h1,h2,h3{font-weight:var(--fw-black);letter-spacing:var(--track-tight);text-wrap:balance}
p{text-wrap:pretty}

:focus-visible{outline:3px solid var(--focus);outline-offset:3px;border-radius:6px}

/* La selección, en el color de la marca. El azul del sistema dentro de una
   pantalla teal es de las cosas que se ven sin saber qué se está viendo. */
::selection{background:var(--tint-teal-2);color:var(--ink)}

/* `--pad` a los lados MÁS la zona segura. Sin los `env()` el texto se mete
   debajo del notch en cuanto el teléfono se pone horizontal —y en la cáscara
   instalada, también de pie en los que tienen isla—, porque el documento
   declara `viewport-fit=cover`. En un teléfono sin recorte los dos `env()`
   valen 0 y esta regla es exactamente la de antes. */
.wrap{
  width:100%;max-width:var(--wrap);margin-inline:auto;
  padding-inline:
    calc(var(--pad) + env(safe-area-inset-left))
    calc(var(--pad) + env(safe-area-inset-right));
}

.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;
}

.skip{
  position:absolute;left:12px;top:-72px;z-index:80;
  background:var(--surface);color:var(--ink);
  padding:10px 16px;border-radius:var(--r-2);font-weight:var(--fw-bold);
  text-decoration:none;box-shadow:var(--sh-m);transition:top .18s ease;
}
.skip:focus{top:12px}

.defs{position:absolute;width:0;height:0;overflow:hidden}

/* ==========================================================================
   TACTO DE APLICACIÓN
   --------------------------------------------------------------------------
   Ninguna de estas reglas es cosmética: cada una tapa un comportamiento que el
   navegador trae de fábrica y que ninguna aplicación nativa tiene. Están aquí
   y no en la cáscara porque la web de venta se toca con el mismo dedo.

   LA LÍNEA QUE NO SE CRUZA: todo esto se aplica al CROMO —botones, pestañas,
   navegación, resúmenes desplegables— y jamás al contenido. El texto de un
   acuerdo tiene que poder marcarse y copiarse; quitarle la selección sería
   quitarle al usuario la única forma que tiene de llevárselo.
   ========================================================================== */

/* 1 · La espera de 300ms y el recuadro gris del toque.
   El navegador retrasa el clic por si el toque era el primero de un doble
   toque para ampliar. `touch-action:manipulation` renuncia a ese gesto SOLO
   en estos elementos, y con ello a la espera: el botón responde al levantar
   el dedo. `-webkit-tap-highlight-color` es el rectángulo gris que Android y
   iOS pintan encima de lo que se pulsa, y que ninguna aplicación dibuja. */
.btn,
.nav a,
.nav-cuenta,
.nav-salir,
.foot-nav a,
.skip,
summary,
label,
[role="tab"],
[role="button"]{
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
}

/* 2 · Pulsar un botón no selecciona su rótulo.
   Mantener el dedo sobre un botón deja la palabra marcada en azul y, en iOS,
   abre además el menú de copiar/definir. En una aplicación un botón es un
   botón. `-webkit-touch-callout` es lo que apaga ese menú al mantener. */
.btn,
.nav a,
.nav-cuenta,
.nav-salir,
.skip,
[role="tab"],
[role="button"]{
  -webkit-user-select:none;
  user-select:none;
  -webkit-touch-callout:none;
}

/* 3 · El cursor de escritura, en el color de la marca. */
input,textarea,select{caret-color:var(--ui-teal)}

/* 4 · SUELO DE 16px EN TODO LO QUE SE ESCRIBE.
   Red de seguridad para cualquier campo que no pase por `.campo`: los que sí
   pasan lo declaran ellos y ganan por especificidad. `1em` resuelve contra el
   tamaño del padre, así que un campo que ya fuera más grande no se encoge. */
input,textarea,select{font-size:max(var(--fs-input), 1em)}

/* ==========================================================================
   DECORACIÓN — blobs orgánicos y retículas de puntos
   La capa .dcl recorta la decoración dentro de cada sección SIN poner
   overflow:hidden en la propia sección (así la tira puede salirse del borde
   superior y montarse sobre la costura del hero).
   ========================================================================== */
.dcl{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.blob{position:absolute;height:auto;fill:var(--teal);opacity:var(--blob-soft)}
.blob.p{fill:var(--purple)}
.blob.c{fill:var(--coral)}
.blob.mid{opacity:var(--blob-mid)}
.blob.strong{opacity:var(--blob-strong)}

.dots{
  position:absolute;pointer-events:none;color:var(--dot);
  background-image:radial-gradient(currentColor 1.7px,transparent 1.8px);
  background-size:14px 14px;
  -webkit-mask-image:radial-gradient(ellipse at center,#000 38%,transparent 74%);
          mask-image:radial-gradient(ellipse at center,#000 38%,transparent 74%);
}

/* ==========================================================================
   CABECERA
   ========================================================================== */
.site-head{
  position:relative;z-index:40;
  background:var(--head-bg);
  backdrop-filter:saturate(1.4) blur(10px);
  -webkit-backdrop-filter:saturate(1.4) blur(10px);
  border-bottom:1px solid var(--line-soft);
}
.head-in{display:flex;align-items:center;justify-content:space-between;gap:14px;
         padding:12px 0;flex-wrap:wrap}

.brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none;flex:none}
.brand svg{display:block;flex:none}

/* align-items:flex-start es obligatorio, no cosmético: el valor por defecto de
   un flex en columna es `stretch`, y estiraba el logotipo hasta el ancho del
   bloque —que lo marca el texto del descriptor, más largo— manteniendo la
   altura fija. La imagen salía ensanchada y aplastada. */
.brand .stack{display:flex;flex-direction:column;align-items:flex-start}
/* El logotipo es el PNG original de marca, no un isotipo redibujado más un
   wordmark compuesto con la fuente del sistema: la tipografía de sisex es
   redondeada geométrica y ninguna pila del sistema la reproduce. Es logotipo
   (dentro de un enlace con aria-label), así que está exento de 1.4.3. */
.brand .tag{display:none;font-size:.72rem;font-weight:600;color:var(--ink-soft);
            line-height:1.15;margin-top:2px}
@media (min-width:1040px){ .brand .tag{display:block} }

/* Navegación: nunca desaparece. Por debajo de 820px pasa a una segunda fila
   bajo una hairline; cero JavaScript, cero hamburguesa. */
.nav{
  order:3;width:100%;
  display:flex;gap:6px;justify-content:center;flex-wrap:wrap;
  padding-top:8px;margin-top:2px;border-top:1px solid var(--line-soft);
}
.nav a{
  text-decoration:none;font-weight:var(--fw-bold);font-size:.92rem;color:var(--ink-soft);
  padding:7px 12px;border-radius:var(--r-pill);
  transition:color .16s ease,background-color .16s ease;
}
.nav a:hover{color:var(--teal-ink);background:var(--tint-teal)}

@media (min-width:820px){
  .site-head{position:sticky;top:0}
  .head-in{padding:14px 0}
  .nav{order:0;width:auto;border-top:0;padding-top:0;margin:0 6px 0 auto}
  html{scroll-padding-top:var(--head-h)}
}

/* ==========================================================================
   BOTONES
   ========================================================================== */
/* Borde de 1px y no de 2, y relleno más corto: con 2px y `.82em` un botón medía
   59px de alto y una pantalla de ajustes con seis se iba de largo sin decir
   nada más. A 17px de cuerpo esto deja 49px, por encima de los 44 que pide una
   zona táctil, así que lo que se pierde es aire y no alcance. */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55em;
  font:inherit;font-weight:var(--fw-black);letter-spacing:-.01em;
  text-decoration:none;cursor:pointer;
  border:1px solid transparent;padding:.58em 1.2em;border-radius:var(--r-pill);
  transition:transform .16s cubic-bezier(.2,.8,.3,1),box-shadow .16s ease,
             background-color .16s ease,border-color .16s ease;
}
.btn svg{flex:none}
.btn-1{background:var(--btn-fill);border-color:var(--btn-fill);color:var(--btn-ink);box-shadow:var(--sh-s)}
.btn-1:hover{background:var(--btn-fill-hi);border-color:var(--btn-fill-hi);
             transform:translateY(-2px);box-shadow:var(--sh-m)}
.btn-1 .arw{transition:transform .18s ease}
.btn-1:hover .arw{transform:translateX(3px)}
/* borde real (no box-shadow): sobrevive al modo de alto contraste de Windows.
   Neutro en reposo y con el acento sólo al pasar por encima: el color aparece
   cuando hay intención, que es cuando informa de algo. */
.btn-2{background:transparent;color:var(--btn-2-ink);border-color:var(--btn-2-line)}
.btn-2:hover{background:var(--btn-2-bg-hi);border-color:var(--ui-teal);transform:translateY(-2px)}
.btn-sm{padding:.55em 1.05em;font-size:.94rem}
.btn-lg{font-size:1.06rem;padding:.72em 1.45em}

/* PULSADO. En un dedo `:hover` no existe, así que sin esto el botón se queda
   muerto entre que se toca y que la página contesta: medio segundo en el que
   no hay forma de saber si se ha pulsado o no. Se hunde en vez de subir —al
   revés que el hover— porque es lo que hace un botón de verdad, y con una
   transición mucho más corta: la respuesta a un dedo tiene que ser inmediata
   o deja de leerse como respuesta.

   VA AL FINAL DEL BLOQUE Y NO JUNTO A CADA VARIANTE, y eso es la mitad del
   arreglo: `.btn-1:active` y `.btn-1:hover` empatan en especificidad, así que
   decide el orden de escritura. Escrito antes del `:hover` —que es donde
   estaba— el hover ganaba mientras el dedo seguía apoyado y el botón subía en
   vez de hundirse. */
.btn-1:active,
.btn-2:active,
.btn:active{transform:scale(.97);transition-duration:.06s}

/* El `:hover` pegajoso del táctil se apaga al final del fichero, no aquí: hay
   hovers declarados más abajo —`.card`, las fichas de las bandas oscuras— y
   una consulta de medios no suma especificidad, así que puesto aquí perdería
   contra ellos. Ver el bloque «PUNTERO QUE NO SE POSA». */

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{
  position:relative;overflow:hidden;
  padding:clamp(30px,6vw,64px) 0 clamp(112px,14vw,178px);

  /* Posición del puntero dentro del hero, normalizada a −1…1 en cada eje. La
     pone `ui/hero3d.js`; en 0 la escena queda EXACTAMENTE en su pose de
     reposo, así que sin JavaScript —o con movimiento reducido— no falta
     nada. Se declaran aquí, en el ancestro común, porque de esto beben las
     dos capas: los blobs de fondo (.dcl) y la ilustración (.hero-art). */
  --mx:0; --my:0;
}
/* Los blobs de opacidad media/alta viven en el lado de la ilustración o
   sangrando por abajo: nunca debajo de texto. */
.hero .b1{top:-24%;left:-13%;width:min(46%,500px)}
.hero .b2{top:34%;right:-14%;width:min(38%,420px);transform:rotate(38deg)}
.hero .b3{bottom:-22%;right:2%;width:min(26%,270px);transform:rotate(-120deg)}
.hero .d1{left:-24px;bottom:16%;width:clamp(150px,20vw,230px);height:clamp(120px,16vw,180px)}

.hero-grid{position:relative;z-index:1;display:grid;gap:clamp(34px,5vw,54px);align-items:center}
@media (min-width:960px){ .hero-grid{grid-template-columns:1.05fr .95fr;gap:44px} }

.eyebrow{
  display:inline-flex;align-items:center;gap:.55em;
  background:var(--surface);border:1px solid var(--line);
  color:var(--teal-ink);font-weight:var(--fw-black);font-size:.84rem;
  letter-spacing:.01em;line-height:1.25;
  padding:.48em 1em .48em .72em;border-radius:var(--r-pill);
  box-shadow:var(--sh-s);margin-bottom:18px;
}
.eyebrow .pip{width:.55em;height:.55em;border-radius:50%;background:var(--ui-coral);flex:none}

h1{
  font-size:var(--fs-h1);line-height:var(--lh-tight);letter-spacing:-.04em;
  margin:0 0 18px;
}
.hl{position:relative;display:inline-block;color:var(--coral-ink);white-space:nowrap}
.hl .u{position:absolute;left:-2%;width:104%;bottom:-.13em;height:.26em;
       overflow:visible;color:var(--ui-teal)}
.hl .u path{stroke:currentColor;fill:none;stroke-linecap:round}
.hl .u .s1{stroke-width:4.4}
.hl .u .s2{stroke-width:2.4;opacity:.42}

.lead{font-size:var(--fs-lead);line-height:1.66;color:var(--ink-soft);
      max-width:36ch;margin-bottom:26px}

.cta-row{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:20px}
.cta-row .btn{flex:1 1 auto;min-width:min(100%,214px)}
@media (min-width:520px){ .cta-row .btn{flex:0 0 auto} }

.hero-note{display:flex;align-items:flex-start;gap:.6em;
           font-size:var(--fs-small);color:var(--ink-soft);max-width:44ch}
.hero-note svg{flex:none;margin-top:.2em}

/* ---- ilustración: blobs sólidos + pegatinas + móviles ---- */
.hero-art{position:relative;display:flex;justify-content:center;align-items:center;
          min-height:clamp(360px,60vw,560px)}
.art-blob{position:absolute;z-index:0;width:min(112%,560px);height:auto;top:48%;left:50%;
          transform:translate(-50%,-50%) rotate(-8deg)}
.art-blob .a{fill:var(--teal);opacity:var(--blob-mid)}
.art-blob .b{fill:var(--purple);opacity:var(--blob-soft)}
.art-blob .c{fill:var(--coral);opacity:var(--blob-strong)}

.art-bubbles{position:absolute;z-index:3;width:clamp(92px,21vw,128px);
             top:-4px;left:-2%;transform:rotate(-9deg);
             filter:drop-shadow(0 8px 18px rgba(15,74,97,.16))}
.art-heart{position:absolute;z-index:3;width:clamp(44px,10vw,60px);
           right:1%;bottom:8%;transform:rotate(11deg);
           filter:drop-shadow(0 6px 14px rgba(15,74,97,.16))}
.art-spark{position:absolute;z-index:1;width:clamp(38px,8vw,54px);right:7%;top:5%;opacity:.9}

/* SIN `preserve-3d`, y es la decisión importante de todo el bloque de
   profundidad. Con un contexto 3D compartido el orden de pintado lo decide la
   geometría, así que en cuanto los ángulos crecen los dos móviles se cruzan
   por el canto y el de atrás asoma por delante: medio móvil delante y medio
   detrás, que es exactamente el aspecto roto que hay que evitar.

   Aplanando aquí, cada móvil lleva su propia `perspective()` dentro de su
   `transform` y el apilado vuelve a decidirlo el z-index. El de delante está
   delante SIEMPRE, con cualquier ángulo y en cualquier posición del puntero.
   El precio es que cada móvil tiene su punto de fuga en vez de compartir uno:
   a estas distancias no se nota, y a cambio el efecto no se puede romper. */
.phones{position:relative;z-index:2;display:flex;justify-content:center;
        align-items:flex-end;padding:14px 0 6px}
@media (max-width:599px){
  /* en móvil la ilustración sangra a los bordes para que quepan los dos
     móviles sin encoger la tipografía de la interfaz */
  .hero-art{margin-inline:calc(var(--pad) * -1);min-height:clamp(340px,88vw,440px)}
  .art-bubbles{left:3%}
}

/* ==========================================================================
   MOCKUPS — HTML + CSS puro. Sin imágenes.
   El tamaño base lleva SUELO en px: nada se renderiza por debajo de ~8,8px
   y ningún multiplicador baja de .8em.
   ========================================================================== */
.phone{
  --pw:clamp(214px,58vw,262px);
  width:var(--pw);
  font-size:max(11px, calc(var(--pw) / 19.6));
  background:var(--bezel);
  padding:.60em;border-radius:2.9em;
  box-shadow:var(--sh-l), inset 0 0 0 1px rgba(255,255,255,.13);
  position:relative;flex:none;
}
.phone::after{ /* brillo suave del bisel */
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(150deg,rgba(255,255,255,.20),rgba(255,255,255,0) 42%);
}
.phone-front{transform:rotate(-3.5deg);z-index:2;margin-right:clamp(-64px,-14vw,-28px)}
.phone-back{
  --pw:clamp(164px,44vw,208px);
  font-size:max(11px, calc(var(--pw) / 17));
  transform:rotate(7deg) translate(10%,-8%);z-index:1;
}

/* ==========================================================================
   PROFUNDIDAD — la ilustración es una escena con cámara, no un collage plano

   La escena se mueve SOLA y en bucle. No depende del ratón, porque en un
   móvil no hay ratón y la mitad de las visitas llegan desde uno: el puntero,
   cuando existe, es un extra encima. De ahí el reparto de propiedades, que es
   la regla que no conviene romper al retocar nada de aquí:

       `transform`            → la animación continua (rota y flota)
       `translate` / `scale`  → el desvío por puntero, que suma encima

   Son propiedades DISTINTAS y se componen solas —el orden real es translate,
   scale y luego transform—, así que ninguna de las dos capas pisa a la otra y
   no hay que duplicar keyframes para combinarlas.

   Los periodos son primos entre sí (13, 17, 19, 23, 29, 31 s) a propósito: si
   coincidieran, la escena entera latiría al unísono y se leería como una sola
   lámina meneándose. Al desincronizarse, cada plano va a su aire y ESE desfase
   es lo que se lee como distancia. El ciclo completo no se repite en horas.

   La `perspective()` va DENTRO del transform de cada móvil, no en un ancestro
   (ver el comentario de `.phones`): es lo que garantiza que el móvil de atrás
   no pueda adelantarse por mucho que se abra el ángulo.

   TECHO DEL EFECTO: el texto de los móviles es texto del DOM, no una textura,
   y un plano en rotación continua se rasteriza una vez y se estira. Pasados
   unos 12° —o con cualquier translateZ que agrande el plano— las letras de
   11px se convierten en puré. Por eso los móviles se mueven poco y despacio,
   y lo que se exagera de verdad son las capas donde no hay ni una letra:
   blobs y pegatinas. Ahí el margen es libre.
   ========================================================================== */
.hero-art{--persp:1100px}

/* Pose de reposo. Es lo que se ve con `prefers-reduced-motion: reduce`, sin
   JavaScript o antes de que arranque nada: una escena quieta pero ya en 3D,
   no un hueco ni una versión plana distinta. */
.phone-front{transform:perspective(var(--persp)) rotateY(-7deg) rotateX(2deg) rotate(-3.5deg)}
.phone-back {transform:perspective(var(--persp)) rotateY(-10deg) rotateX(1.5deg)
                       rotate(7deg) translate(10%,-8%)}

/* Desvío por puntero: secundario, y por eso flojo. La escena ya se mueve; esto
   solo añade una respuesta al gesto en los escritorios que la tienen. El fondo
   va AL REVÉS que el puntero y las pegatinas de delante van MUCHO más que él:
   sin esa diferencia de sentido y de recorrido no hay profundidad, solo
   desplazamiento. */
.phone-front{translate:calc(var(--mx) * 14px) calc(var(--my) *  8px)}
.phone-back {translate:calc(var(--mx) *  7px) calc(var(--my) *  4px)}

.art-blob   {translate:calc(var(--mx) * -30px) calc(var(--my) * -19px)}
.art-bubbles{translate:calc(var(--mx) *  48px) calc(var(--my) *  31px)}
.art-heart  {translate:calc(var(--mx) *  39px) calc(var(--my) *  26px)}
.art-spark  {translate:calc(var(--mx) *  62px) calc(var(--my) *  41px)}

.hero .b1{translate:calc(var(--mx) * -42px) calc(var(--my) * -27px)}
.hero .b2{translate:calc(var(--mx) * -27px) calc(var(--my) * -18px)}
.hero .b3{translate:calc(var(--mx) *  34px) calc(var(--my) *  22px)}
.hero .d1{translate:calc(var(--mx) *  52px) calc(var(--my) *  34px)}

.scr{
  position:relative;background:var(--scr-bg);color:var(--scr-ink);
  border-radius:2.35em;overflow:hidden;
  padding:.55em .9em 1em;
  display:flex;flex-direction:column;gap:.6em;
}
.notch{
  position:absolute;top:.42em;left:50%;transform:translateX(-50%);
  width:3.1em;height:.42em;border-radius:var(--r-pill);
  background:var(--scr-line);
}
.status{display:flex;justify-content:space-between;align-items:center;
        font-size:.8em;font-weight:var(--fw-black);color:var(--scr-soft);
        padding:.1em .2em .2em}
.status.full{width:100%}
.status .bars{display:inline-flex;gap:.22em;align-items:flex-end}
.status .bars i{display:block;width:.2em;background:currentColor;border-radius:.1em}
.status .bars i:nth-child(1){height:.3em}
.status .bars i:nth-child(2){height:.45em}
.status .bars i:nth-child(3){height:.62em}

.scr-kicker{font-size:.8em;font-weight:var(--fw-black);letter-spacing:.08em;
            text-transform:uppercase;color:var(--teal-strong)}
.scr-title{font-size:1.2em;font-weight:var(--fw-black);letter-spacing:-.02em;
           line-height:1.15;margin:.05em 0 .1em}
.scr-sub{font-size:.84em;color:var(--scr-soft);line-height:1.35}

.bar{height:.42em;border-radius:var(--r-pill);background:var(--scr-tint-teal);
     overflow:hidden;margin:.2em 0 .1em}
.bar span{display:block;height:100%;width:66%;border-radius:var(--r-pill);
          background:linear-gradient(90deg,var(--ui-teal),var(--ui-purple))}

.opts{display:flex;flex-direction:column;gap:.4em}
.opt{display:flex;align-items:center;gap:.6em;
     padding:.55em .62em;border-radius:1em;
     background:var(--scr-row);border:1px solid var(--scr-line)}
.opt .lbl{font-size:.86em;font-weight:var(--fw-bold);line-height:1.25;flex:1}
.opt .chip{font-size:.8em;font-weight:var(--fw-black);padding:.22em .6em;
           border-radius:var(--r-pill);background:var(--scr-tint-coral);
           color:var(--scr-ink);box-shadow:inset 0 0 0 1px var(--notice-line);flex:none}
.tick{width:1.4em;height:1.4em;border-radius:.5em;flex:none;position:relative;
      background:var(--ui-teal);box-shadow:0 1px 3px rgba(0,0,0,.16)}
.tick::after{
  content:"";position:absolute;left:.4em;top:.34em;
  width:.42em;height:.24em;border-left:.15em solid #fff;border-bottom:.15em solid #fff;
  transform:rotate(-45deg);
}
.opt.off .tick{background:transparent;box-shadow:inset 0 0 0 .13em var(--scr-soft)}
.opt.off .tick::after{display:none}
.opt.off .lbl{color:var(--scr-soft);font-weight:600}

.scr-btn{margin-top:.2em;text-align:center;font-size:.9em;font-weight:var(--fw-black);
         padding:.7em;border-radius:1em;background:var(--teal-dark);color:#fff}
.scr-btn.ghost{background:transparent;color:var(--purple-ink);
               box-shadow:inset 0 0 0 .14em currentColor}
.scr-foot{display:flex;align-items:center;justify-content:center;gap:.35em;
          font-size:.8em;font-weight:var(--fw-bold);color:var(--scr-soft)}

.scr.center{align-items:center;text-align:center;padding-top:.55em}
.scr.center .iso{margin:.3em 0 .1em}
/* el isotipo dentro de la pantalla del mockup */
.iso{display:block;margin-inline:auto;width:46px;height:auto}
.pill{display:inline-flex;align-items:center;gap:.35em;font-size:.8em;
      font-weight:var(--fw-black);padding:.3em .7em;border-radius:var(--r-pill);
      background:var(--scr-tint-teal);color:var(--teal-strong)}
.mini{display:flex;flex-direction:column;gap:.3em;width:100%}
.mini div{display:flex;align-items:center;gap:.45em;font-size:.84em;
          font-weight:var(--fw-bold);background:var(--scr-row);
          border:1px solid var(--scr-line);border-radius:.8em;padding:.4em .55em;
          text-align:left}
.mini .dot{width:.5em;height:.5em;border-radius:50%;background:var(--ui-teal);flex:none}

/* ==========================================================================
   TIRA DE 4 CARACTERÍSTICAS — montada a caballo de la costura hero/sección
   ========================================================================== */
.why{
  display:flow-root;position:relative;   /* flow-root: el margen negativo de
                                            la tira no colapsa hacia fuera */
  background:var(--band-1);
  padding:0 0 var(--sec-y);
}
.strip{
  position:relative;z-index:10;
  margin-top:clamp(-92px,-9.5vw,-58px);
  margin-bottom:clamp(48px,7vw,84px);
}
.strip ul{
  display:grid;gap:14px;
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-5);padding:clamp(18px,3vw,28px);
  box-shadow:var(--sh-l);
}
@media (min-width:600px){ .strip ul{grid-template-columns:1fr 1fr;gap:20px 24px} }
@media (min-width:1000px){ .strip ul{grid-template-columns:repeat(4,1fr);gap:22px} }
.strip li{display:flex;align-items:flex-start;gap:13px}
.strip li + li{border-top:1px solid var(--line-soft);padding-top:14px}
@media (min-width:600px){ .strip li + li{border-top:0;padding-top:0} }
.strip svg{flex:none;width:44px;height:44px}
.strip h3{font-size:1.02rem;line-height:var(--lh-head);letter-spacing:-.02em}
.strip p{font-size:var(--fs-small);color:var(--ink-soft);line-height:1.45;margin-top:2px}

/* ==========================================================================
   SECCIONES
   ========================================================================== */
section{position:relative}
.sec{padding:var(--sec-y) 0}
.sec-head{position:relative;z-index:1;max-width:56ch;margin:0 0 clamp(30px,4.5vw,52px)}
.sec-head.center{margin-inline:auto;text-align:center}
/* el kicker es texto pequeño y puede caer sobre --bg-warm o sobre un blob:
   por eso usa el teal profundo (5,5:1 en el peor caso), no --teal-ink */
.kicker{display:inline-block;font-size:.8rem;font-weight:var(--fw-black);
        letter-spacing:var(--track-wide);text-transform:uppercase;
        color:var(--teal-strong);margin-bottom:12px}
h2{font-size:var(--fs-h2);line-height:var(--lh-tight);letter-spacing:-.032em}
.sec-head p{margin-top:14px;font-size:clamp(1rem,1.9vw,1.1rem);
            color:var(--ink-soft);line-height:var(--lh-body)}

/* ---- por qué sisex ---- */
.cards{position:relative;z-index:1;display:grid;gap:18px}
@media (min-width:700px){ .cards{grid-template-columns:repeat(3,1fr);gap:22px} }
.card{
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-4);padding:clamp(22px,3vw,30px);box-shadow:var(--sh-s);
  transition:transform .2s cubic-bezier(.2,.8,.3,1),box-shadow .2s ease;
}
.card:hover{transform:translateY(-4px);box-shadow:var(--sh-m)}
/* el manual pide badge CIRCULAR de icono: teal, morado y coral */
.badge{width:62px;height:62px;border-radius:50%;display:grid;place-items:center;
       margin-bottom:18px}
.badge.t{background:var(--tint-teal)}
.badge.p{background:var(--tint-purple)}
.badge.c{background:var(--tint-coral)}
.card h3{font-size:var(--fs-h3);line-height:var(--lh-head);letter-spacing:-.025em;
         margin-bottom:9px}
.card p{color:var(--ink-soft);line-height:var(--lh-body)}

.why .b1{top:-14%;right:-12%;width:min(38%,400px);transform:rotate(18deg)}
.why .b2{bottom:-20%;left:-12%;width:min(32%,340px);transform:rotate(-70deg)}
.why .d1{right:4%;top:6%;width:clamp(120px,14vw,190px);height:clamp(100px,12vw,150px)}

/* ---- cómo funciona ---- */
.how .b1{top:8%;left:-16%;width:min(34%,380px);transform:rotate(120deg)}
.how .d1{right:2%;bottom:8%;width:clamp(140px,16vw,210px);height:clamp(110px,13vw,165px)}

.steps{position:relative;z-index:1;display:grid;gap:26px}
@media (min-width:860px){ .steps{grid-template-columns:repeat(3,1fr);gap:28px} }
.step{position:relative}
.step-n{
  width:60px;height:60px;border-radius:50%;display:grid;place-items:center;
  font-size:1.65rem;font-weight:var(--fw-black);line-height:1;
  color:var(--step-ink);margin-bottom:16px;
  box-shadow:var(--sh-s);position:relative;z-index:2;
}
.step:nth-child(1) .step-n{background:var(--step-1)}
.step:nth-child(2) .step-n{background:var(--step-2)}
.step:nth-child(3) .step-n{background:var(--step-3)}
.step h3{font-size:var(--fs-h3);line-height:var(--lh-head);letter-spacing:-.025em;
         margin-bottom:8px}
.step p{color:var(--ink-soft);line-height:var(--lh-body);max-width:34ch}
@media (min-width:860px){
  /* conector punteado: la retícula de marca usada como elemento funcional */
  .step:not(:last-child)::after{
    content:"";position:absolute;top:30px;left:70px;right:-28px;height:3px;z-index:1;
    background-image:radial-gradient(var(--dot) 1.6px,transparent 1.7px);
    background-size:11px 11px;
  }
}

/* ==========================================================================
   PANEL OSCURO DE COMPROMISOS — el único momento invertido de la página
   ========================================================================== */
.pledge-sec{padding:var(--sec-y) 0;background:var(--band-2)}
.pledge-sec .b1{top:-18%;right:-14%;width:min(34%,380px);transform:rotate(-40deg)}
.pledge{
  position:relative;overflow:hidden;z-index:1;
  background:linear-gradient(150deg,var(--panel-2),var(--panel) 58%);
  border:1px solid var(--panel-line);
  border-radius:clamp(24px,3.4vw,var(--r-5));
  padding:clamp(28px,4.6vw,56px);
  color:var(--panel-ink);box-shadow:var(--sh-l);
}
.pledge .pdots{
  position:absolute;right:-3%;top:-14%;width:min(260px,44%);height:min(260px,44%);
  color:var(--panel-dot);
  background-image:radial-gradient(currentColor 1.7px,transparent 1.8px);
  background-size:14px 14px;
  -webkit-mask-image:radial-gradient(ellipse at center,#000 40%,transparent 74%);
          mask-image:radial-gradient(ellipse at center,#000 40%,transparent 74%);
}
.pledge-head{position:relative;z-index:1;max-width:52ch;margin-bottom:clamp(26px,3.6vw,40px)}
.pledge-head .kicker{color:var(--panel-teal)}
.pledge-head h2{color:var(--panel-ink)}
.pledge-head p{margin-top:14px;color:var(--panel-soft);
               font-size:clamp(1rem,2vw,1.08rem);line-height:var(--lh-body)}
.pledge-link{
  display:inline-flex;align-items:center;gap:.4em;margin-top:14px;
  color:var(--panel-teal);font-weight:var(--fw-black);font-size:var(--fs-small);
  text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:2px;
}
.pledge-link:hover{color:var(--panel-ink)}
.pledge-list{position:relative;z-index:1;display:grid;gap:20px}
@media (min-width:620px){ .pledge-list{grid-template-columns:1fr 1fr;gap:22px 28px} }
@media (min-width:1020px){ .pledge-list{grid-template-columns:repeat(4,1fr)} }
.pledge-list li{display:flex;gap:12px;align-items:flex-start;
                border-top:1px solid var(--panel-line);padding-top:16px}
.pledge-list svg{flex:none;margin-top:2px}
.pledge-list h3{font-size:1.02rem;line-height:var(--lh-head);letter-spacing:-.02em;
                color:var(--panel-ink)}
.pledge-list p{font-size:var(--fs-small);color:var(--panel-soft);line-height:1.5;margin-top:3px}

/* ==========================================================================
   PREGUNTAS FRECUENTES — <details>, cero JavaScript
   ========================================================================== */
.faq-sec .b1{bottom:-16%;left:-14%;width:min(32%,360px);transform:rotate(-24deg)}
.faq{position:relative;z-index:1;display:grid;gap:12px;max-width:74ch;margin-inline:auto}
.faq details{background:var(--surface);border:1px solid var(--line);
             border-radius:var(--r-3);box-shadow:var(--sh-s);overflow:hidden}
.faq summary{
  list-style:none;cursor:pointer;display:flex;align-items:center;gap:14px;
  padding:17px 20px;font-weight:var(--fw-black);letter-spacing:-.02em;
  font-size:1.02rem;line-height:1.35;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";width:10px;height:10px;flex:none;margin-left:auto;
  border-right:2.6px solid var(--teal-ink);border-bottom:2.6px solid var(--teal-ink);
  transform:rotate(45deg) translate(-2px,-2px);transition:transform .2s ease;
}
.faq details[open] summary::after{transform:rotate(225deg) translate(-2px,-2px)}
.faq summary:focus-visible{outline:3px solid var(--focus);outline-offset:-4px;
                           border-radius:var(--r-3)}
.faq details p{padding:0 20px 20px;color:var(--ink-soft);line-height:var(--lh-body)}

/* ==========================================================================
   AVISO HONESTO — sección propia, con su encabezado en el esquema
   ========================================================================== */
.notice-sec{padding:0 0 var(--sec-y);background:var(--band-1)}
.notice-sec .b1{top:-30%;right:-12%;width:min(26%,300px);transform:rotate(-120deg)}
.notice{
  position:relative;z-index:1;display:flex;gap:18px;align-items:flex-start;
  background:var(--notice-bg);border:1px solid var(--notice-line);
  border-left:6px solid var(--ui-coral);
  border-radius:var(--r-3);padding:clamp(22px,3.2vw,32px);
  max-width:74ch;margin-inline:auto;box-shadow:var(--sh-s);
}
.notice svg{flex:none}
.notice h2{font-size:clamp(1.18rem,2.6vw,1.5rem);letter-spacing:-.025em;margin-bottom:10px}
.notice p{color:var(--ink);line-height:var(--lh-body)}
.notice .small{margin-top:10px;font-size:var(--fs-small);color:var(--ink-soft)}
@media (max-width:479px){ .notice{flex-direction:column;gap:12px} }

/* ==========================================================================
   CIERRE — degradado de marca a sangre, texto en blanco

   Era una cuarta banda crema y quedaba como una repetición de la portada justo
   donde hace falta rematar. Ahora es el único degradado de tres paradas de la
   página y desemboca en el navy del pie sin rebotar a claro. La inversión de
   tinta la hace el bloque de ámbito del apéndice, no reglas de color aquí:
   los blobs se quedan donde estaban y solo bajan de opacidad por token.
   ========================================================================== */
.closing{text-align:center;padding:var(--sec-y) 0;
         background:linear-gradient(152deg,var(--cierre-3) 0%,var(--cierre-2) 48%,var(--cierre-1) 100%)}
.closing .b1{top:-34%;right:-10%;width:min(40%,440px);transform:rotate(200deg)}
.closing .b2{bottom:-30%;left:-12%;width:min(34%,380px);transform:rotate(-50deg)}
.closing .b3{bottom:-46%;right:-14%;width:min(28%,300px);transform:rotate(96deg)}
.closing .d1{left:6%;top:12%;width:clamp(120px,14vw,190px);height:clamp(100px,12vw,150px)}
.closing .inner{position:relative;z-index:1;max-width:46ch;margin-inline:auto}
.closing h2{margin-bottom:14px}
.closing p{color:var(--ink);margin-bottom:26px;font-size:clamp(1.02rem,2vw,1.14rem);
           line-height:var(--lh-body)}
.closing .cta-row{justify-content:center;margin-bottom:0}

/* ==========================================================================
   PIE
   ========================================================================== */
.site-foot{background:var(--footer-bg);border-top:1px solid var(--line-soft);
           padding:clamp(44px,6vw,64px) 0 30px}
.foot-top{display:grid;gap:30px}
@media (min-width:760px){ .foot-top{grid-template-columns:1.25fr 1fr;align-items:start;gap:44px} }
.foot-brand p{margin-top:12px;color:var(--ink-soft);font-size:var(--fs-small);
              max-width:42ch;line-height:1.55}
.foot-nav h3{font-size:.78rem;font-weight:var(--fw-black);letter-spacing:var(--track-wide);
             text-transform:uppercase;color:var(--ink-soft);margin-bottom:14px}
.foot-nav ul{display:grid;gap:10px}
@media (min-width:520px){ .foot-nav ul{grid-template-columns:1fr 1fr;gap:10px 20px} }
.foot-nav a{text-decoration:none;font-weight:var(--fw-bold);color:var(--ink);
            border-bottom:2px solid transparent;transition:color .16s,border-color .16s}
.foot-nav a:hover{color:var(--teal-ink);border-bottom-color:var(--ui-teal)}
.foot-bot{
  margin-top:34px;padding-top:20px;border-top:1px solid var(--line-soft);
  display:flex;flex-wrap:wrap;gap:8px 20px;justify-content:space-between;
  font-size:.88rem;color:var(--ink-soft);
}

/* ==========================================================================
   MOVIMIENTO — se activa solo si el usuario no ha pedido reducirlo
   ========================================================================== */
@media (prefers-reduced-motion: no-preference){
  html{scroll-behavior:smooth}
  @keyframes draw{to{stroke-dashoffset:0}}
  .hl .u path{stroke-dasharray:1;stroke-dashoffset:1;animation:draw .85s ease-out .35s forwards}
  .hl .u .s2{animation-delay:.6s}

  /* ---- la escena 3D del hero, en bucle ----
     Ver el bloque PROFUNDIDAD para el reparto de propiedades y el porqué de
     los periodos primos. Cada keyframe REPITE la pose de reposo de su
     elemento —la perspectiva, el `rotate` de colocación, el `translate` del
     móvil de atrás— porque `transform` es una sola propiedad y una animación
     la sustituye entera: lo que no se repita aquí, desaparece.

     Tres tiempos por vuelta y no dos. Un bucle de ida y vuelta con un único
     punto medio se lee como un péndulo, que es justo lo que delata que hay
     una animación; con un tercer punto asimétrico el recorrido no tiene
     centro evidente y parece que la escena flota. */

  /* Los móviles: recorrido corto y ciclo largo. No es timidez, es que aquí
     dentro hay texto de 11px y el plano se rasteriza una vez por capa. */
  @keyframes orbita-frente{
      0%{transform:perspective(var(--persp)) rotateY(-10deg) rotateX( 3.5deg) rotate(-3.5deg) translateY(  0px)}
     34%{transform:perspective(var(--persp)) rotateY( -2deg) rotateX(  -1deg) rotate(-3.5deg) translateY(-10px)}
     67%{transform:perspective(var(--persp)) rotateY( -8deg) rotateX(   4deg) rotate(-3.5deg) translateY(  4px)}
    100%{transform:perspective(var(--persp)) rotateY(-10deg) rotateX( 3.5deg) rotate(-3.5deg) translateY(  0px)}
  }
  @keyframes orbita-fondo{
      0%{transform:perspective(var(--persp)) rotateY( -5deg) rotateX(  -2deg) rotate(7deg) translate(10%,-8%) translateY(  0px)}
     41%{transform:perspective(var(--persp)) rotateY(-13deg) rotateX(   3deg) rotate(7deg) translate(10%,-8%) translateY(  8px)}
     73%{transform:perspective(var(--persp)) rotateY( -8deg) rotateX(-3.5deg) rotate(7deg) translate(10%,-8%) translateY( -6px)}
    100%{transform:perspective(var(--persp)) rotateY( -5deg) rotateX(  -2deg) rotate(7deg) translate(10%,-8%) translateY(  0px)}
  }
  .phone-front{animation:orbita-frente 19s ease-in-out infinite}
  .phone-back {animation:orbita-fondo  23s ease-in-out infinite}

  /* Las pegatinas: aquí no hay ni una letra, así que giran de verdad. Son las
     que llevan el peso del efecto y las que hacen que la escena se lea como
     un espacio y no como una lámina. */
  @keyframes gira-bocadillos{
      0%{transform:perspective(600px) rotate(-9deg) rotateY(-22deg) rotateX( 6deg) translateY(  0px)}
     38%{transform:perspective(600px) rotate(-9deg) rotateY( 20deg) rotateX(-7deg) translateY(-15px)}
     71%{transform:perspective(600px) rotate(-9deg) rotateY( -6deg) rotateX(10deg) translateY(  7px)}
    100%{transform:perspective(600px) rotate(-9deg) rotateY(-22deg) rotateX( 6deg) translateY(  0px)}
  }
  @keyframes gira-corazon{
      0%{transform:perspective(500px) rotate(11deg) rotateY( 18deg) scale(1)    translateY(  0px)}
     36%{transform:perspective(500px) rotate(11deg) rotateY(-20deg) scale(1.07) translateY( 11px)}
     69%{transform:perspective(500px) rotate(11deg) rotateY(  7deg) scale(.96)  translateY( -6px)}
    100%{transform:perspective(500px) rotate(11deg) rotateY( 18deg) scale(1)    translateY(  0px)}
  }
  @keyframes gira-chispa{
      0%{transform:perspective(500px) rotate(  0deg) rotateY(-26deg) translateY(  0px);opacity:.9}
     33%{transform:perspective(500px) rotate( 22deg) rotateY( 24deg) translateY(-14px);opacity:.55}
     66%{transform:perspective(500px) rotate(-14deg) rotateY( -8deg) translateY(  8px);opacity:1}
    100%{transform:perspective(500px) rotate(  0deg) rotateY(-26deg) translateY(  0px);opacity:.9}
  }
  .art-bubbles{animation:gira-bocadillos 13s ease-in-out infinite}
  .art-heart  {animation:gira-corazon    17s ease-in-out -4s infinite}
  .art-spark  {animation:gira-chispa     11s ease-in-out -2s infinite}

  /* Los blobs: lo más lento y lo más amplio. Detrás de todo, deformándose
     despacio, es lo que da la sensación de que hay aire entre las capas. */
  @keyframes late-blob{
      0%{transform:translate(-50%,-50%) rotate( -8deg) scale(1)}
     40%{transform:translate(-48%,-53%) rotate( -2deg) scale(1.06)}
     72%{transform:translate(-53%,-48%) rotate(-12deg) scale(.97)}
    100%{transform:translate(-50%,-50%) rotate( -8deg) scale(1)}
  }
  @keyframes vaga-1{0%,100%{transform:translate3d(0,0,0) scale(1)}
                    50%    {transform:translate3d(26px,-20px,0) scale(1.05)}}
  @keyframes vaga-2{0%,100%{transform:rotate(38deg) translate3d(0,0,0)}
                    50%    {transform:rotate(44deg) translate3d(-22px,18px,0)}}
  @keyframes vaga-3{0%,100%{transform:rotate(-120deg) translate3d(0,0,0) scale(1)}
                    50%    {transform:rotate(-112deg) translate3d(18px,-14px,0) scale(1.08)}}
  @keyframes vaga-4{0%,100%{transform:translate3d(0,0,0)}
                    50%    {transform:translate3d(-18px,12px,0)}}
  .art-blob{animation:late-blob 29s ease-in-out infinite}
  .hero .b1{animation:vaga-1 31s ease-in-out infinite}
  .hero .b2{animation:vaga-2 23s ease-in-out -7s infinite}
  .hero .b3{animation:vaga-3 19s ease-in-out -3s infinite}
  .hero .d1{animation:vaga-4 17s ease-in-out infinite}

  /* ---- el extra del puntero ----
     `.hero-3d` la pone `ui/hero3d.js`, y solo mientras el hero está a la vista
     y hay puntero fino. Las transiciones viven AQUÍ y no en la regla base para
     que el seguimiento no sea un salto por fotograma. Cada plano frena a un
     ritmo distinto a propósito: el fondo llega tarde, las pegatinas van casi
     pegadas al puntero.

     Sin `will-change`: estos elementos ya están animados y compuestos en su
     propia capa, así que no aporta nada, y en los móviles —que llevan texto
     diminuto— fija el rasterizado y es justo lo que emborrona las letras. */
  .hero-3d .phone{transition:translate .45s cubic-bezier(.22,.61,.36,1)}
  .hero-3d .art-bubbles,
  .hero-3d .art-heart,
  .hero-3d .art-spark{transition:translate .5s cubic-bezier(.22,.61,.36,1)}
  .hero-3d .art-blob{transition:translate .8s cubic-bezier(.22,.61,.36,1)}
  .hero-3d .blob,
  .hero-3d .dots{transition:translate .9s cubic-bezier(.22,.61,.36,1)}
}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;scroll-behavior:auto !important;
  }
  /* al anular el dibujado hay que restituir el estado FINAL del trazo:
     sin esta línea el subrayado quedaría invisible justo para quien pide
     menos movimiento */
  .hl .u path{stroke-dasharray:none;stroke-dashoffset:0}
  .card:hover,.btn:hover{transform:none}
}

/* ==========================================================================
   ALTO CONTRASTE (Windows) e IMPRESIÓN
   ========================================================================== */
@media (forced-colors: active){
  .btn{border:2px solid ButtonText}
  .card,.faq details,.notice,.strip ul,.pledge{border:1px solid CanvasText}
  .tick,.step-n{forced-color-adjust:none}
}
@media print{
  .dcl,.hero-art,.skip{display:none}
  body{background:#fff;color:#000}
  .pledge{background:none;color:#000;border:1px solid #000}
}

/* --------------------------------------------------------------------------
   Logotipo de marca en imagen.

   Se usa el PNG original del cliente en lugar de redibujar el isotipo y
   componer el wordmark con la fuente del sistema: la tipografía de marca es
   redondeada geométrica y ninguna pila del sistema la reproduce.
   -------------------------------------------------------------------------- */

/* aspect-ratio y flex:none son el cinturón además de los tirantes: aunque un
   contenedor futuro intente estirarlo o encogerlo, la proporción del logotipo
   no se deforma. 640/161 es la del PNG original. */
.brand-logo{
  display:block;
  height:2rem;
  width:auto;
  aspect-ratio:640/161;
  flex:none;
  align-self:flex-start;
  object-fit:contain;
}
.brand-logo-foot{height:2.15rem}

@media (max-width:640px){
  .brand-logo{height:1.75rem}
}

/* En oscuro el logotipo mantiene sus colores de marca: los trazos teal, morado
   y coral tienen contraste suficiente sobre el fondo profundo. */

/* ==========================================================================
   PÁGINAS DE TEXTO (legales, ayuda)

   El reset de arriba quita márgenes a los bloques y viñetas a las listas,
   que es lo que quiere la portada. Aquí se restauran, acotados a .prose para
   no reintroducirlos en el resto del sitio.
   ========================================================================== */

.prose{max-width:38rem}

.prose h1{font-size:var(--fs-h2);margin-bottom:var(--sp-5)}

.prose h2{
  font-size:var(--fs-h3);
  margin-top:var(--sp-8);
  margin-bottom:var(--sp-3);
  color:var(--ink);
}

.prose p{margin-bottom:var(--sp-4);color:var(--ink-soft)}
.prose .lead{font-size:var(--fs-lead);color:var(--ink);margin-bottom:var(--sp-6)}

.prose a{color:var(--teal-strong);text-underline-offset:3px}
.prose a:hover{text-decoration-thickness:2px}

.prose ul{
  list-style:disc;
  padding-left:1.35em;
  margin-bottom:var(--sp-5);
  color:var(--ink-soft);
}
.prose li{margin-bottom:var(--sp-2)}
.prose li::marker{color:var(--ui-teal)}

.prose .notice{margin-block:var(--sp-6)}

/* Lista de definiciones: se usa para pares «qué guardamos / por qué». */
.dl{margin:0}
.dl dt{font-weight:var(--fw-bold);color:var(--ink);margin-top:var(--sp-5)}
.dl dd{margin:var(--sp-1) 0 0;color:var(--ink-soft)}

/* ==========================================================================
   Cabecera cuando hay sesión
   --------------------------------------------------------------------------
   Va AQUÍ y no en app-ui.css: la cabecera se pinta en todas las páginas y
   app-ui.css solo se carga en las pantallas de la aplicación. Estando allí,
   «Salir» salía como un botón gris del navegador en la portada.
   ========================================================================== */

.head-sesion{display:flex;align-items:center;gap:6px;flex:none}

/* `display:contents` hace que el <form> no cuente como caja: el botón se coloca
   como si fuera hijo directo de la fila, alineado con los demás. */
.head-sesion form{display:contents}

.nav-cuenta,
.nav-salir{
  display:inline-flex;align-items:center;
  font:inherit;font-size:.94rem;font-weight:var(--fw-bold);line-height:1;
  color:var(--ink-soft);text-decoration:none;
  background:none;border:0;border-radius:var(--r-pill);
  padding:.62em .85em;cursor:pointer;white-space:nowrap;
  transition:color .16s ease, background-color .16s ease;
}
.nav-cuenta:hover,
.nav-salir:hover{color:var(--teal-ink);background:var(--tint-teal)}
.nav-cuenta:focus-visible,
.nav-salir:focus-visible{outline:3px solid var(--focus);outline-offset:2px}

/* Por debajo de 820px la barra ya oculta la navegación: aquí manda el botón de
   acción. «Mi cuenta» y «Salir» siguen estando dentro de la propia pantalla de
   cuenta, así que no se pierde ninguna salida. */
@media (max-width:819px){
  .head-sesion .nav-cuenta,
  .head-sesion .nav-salir{display:none}
}

/* ==========================================================================
   TABLAS DE LAS PÁGINAS LEGALES

   La política de cookies necesita una tabla de verdad —cookie, para qué,
   duración— y el reset de arriba deja las tablas desnudas. Se acota a `.tabla`
   para no vestir ninguna otra que aparezca luego por accidente.

   El envoltorio `.tabla-scroll` no es adorno: sin él, tres columnas de texto en
   un móvil de 360px desbordan el `body` y toda la página se puede arrastrar en
   horizontal.
   ========================================================================== */

.tabla-scroll{overflow-x:auto;margin-bottom:var(--sp-5);-webkit-overflow-scrolling:touch}

.tabla{
  width:100%;min-width:30rem;
  border-collapse:collapse;
  font-size:var(--fs-small);color:var(--ink-soft);
  text-align:left;
}
.tabla th,
.tabla td{padding:var(--sp-3);border-bottom:1px solid var(--line);vertical-align:top}
.tabla thead th{
  color:var(--ink);font-weight:var(--fw-black);
  font-size:var(--fs-micro);letter-spacing:var(--track-wide);text-transform:uppercase;
  border-bottom:2px solid var(--line-strong);
}
.tabla tbody th{color:var(--ink);font-weight:var(--fw-bold);white-space:nowrap}
.tabla code{font-size:.95em;word-break:break-word}

/* ==========================================================================
   BANNER DE COOKIES

   NO ES UN MODAL Y NO DEBE PARECERLO. Ni `position:fixed` con `inset:0`, ni
   fondo oscurecido, ni `overflow:hidden` en el `body`, ni `inert` en el resto
   de la página: los muros de cookies son justo lo que la AEPD veta. Es una
   barra abajo, se puede ignorar, y el sitio sigue funcionando entero por
   detrás.

   El hueco reservado abajo es la parte que hace que «no tapa contenido» sea
   cierto y no una forma de hablar: sin él, la barra se come el pie de página.
   Se reserva alargando el PIE y no metiendo `padding-bottom` en el `body`,
   porque el pie tiene su propio fondo: con el relleno en el `body` quedaría
   una franja del color de la página por debajo del pie, que se ve como un
   corte. `:has()` lo aplica solo cuando el banner está en el documento.
   ========================================================================== */

.cookies{
  position:fixed;left:0;right:0;bottom:0;z-index:70;
  background:var(--surface);
  border-top:1px solid var(--line-strong);
  box-shadow:var(--sh-l);
  padding-block:var(--sp-4);
  padding-bottom:max(var(--sp-4), env(safe-area-inset-bottom));
}

body:has(.cookies) .site-foot{padding-bottom:12rem}
@media (min-width:820px){ body:has(.cookies) .site-foot{padding-bottom:8rem} }

.cookies-in{
  display:flex;flex-wrap:wrap;align-items:center;
  gap:var(--sp-4) var(--sp-5);
}

.cookies-txt{flex:1 1 22rem;min-width:0}
.cookies-txt h2{
  font-size:var(--fs-micro);font-weight:var(--fw-black);
  letter-spacing:var(--track-wide);text-transform:uppercase;
  color:var(--teal-ink);margin-bottom:var(--sp-1);
}
.cookies-txt p{font-size:var(--fs-small);color:var(--ink-soft);line-height:var(--lh-body)}
.cookies-txt a{color:var(--teal-strong);font-weight:var(--fw-bold)}

/* Los dos botones son EL MISMO botón: misma clase en el HTML y, aquí, el mismo
   ancho mínimo para que ninguno de los dos parezca el principal. Que aceptar
   destaque sobre rechazar es lo que vicia el consentimiento; que sea una
   regla de dos líneas no lo hace menos obligatorio. */
.cookies-btns{display:flex;flex-wrap:wrap;gap:var(--sp-3);flex:0 0 auto}
.cookies-btns .btn{min-width:9.5rem;flex:1 1 auto}

/* En la página de cookies el mismo formulario no va en una barra, sino en el
   texto: ahí necesita aire por debajo. */
.cookies-btns-pagina{margin-bottom:var(--sp-6)}

@media (max-width:639px){
  .cookies-in{gap:var(--sp-3)}
  .cookies-btns{width:100%}
}

@media (forced-colors: active){
  .cookies{border-top:2px solid CanvasText}
  .tabla th,.tabla td{border-bottom:1px solid CanvasText}
}

/* La barra no se imprime: en papel no hay nada que consentir. */
@media print{
  .cookies{display:none}
  body:has(.cookies) .site-foot{padding-bottom:30px}
}

/* ==========================================================================
   PIE CON DOS BLOQUES DE ENLACES

   El pie pasó de una columna de enlaces a dos —«Información» y «Legal»,
   porque los cuatro textos legales tienen que estar enlazados desde todas las
   páginas—, y la retícula seguía declarada a dos columnas: el tercer bloque se
   caía a una fila nueva y el pie quedaba descuadrado.

   Y las listas vuelven a una sola columna en cuanto el pie se reparte en tres:
   dos columnas dentro de un tercio del ancho parten «Conservación de datos».
   ========================================================================== */
@media (min-width:760px){
  .foot-top{grid-template-columns:1.25fr 1fr 1fr}
  .foot-nav ul{grid-template-columns:1fr}
}

/* ==========================================================================
   RITMO VERTICAL, BANDAS OSCURAS Y EFECTOS DE PORTADA
   Reparto de propiedades, que aquí es carga estructural y no estilo:
     `opacity` / `translate`  -> revelado por scroll (con fill)
     `transform`              -> hover, active, colocación estática y aurora
   Nada se oculta fuera de la guarda `@supports` + `no-preference`: sin soporte
   o con movimiento reducido, todo está visible en su estado final.
   ========================================================================== */

/* ---- banda clara que faltaba ----
   Las preguntas nunca tuvieron regla de fondo: heredaban `--bg` y las tarjetas
   blancas se despegaban del fondo con un 1,05:1 que no se ve. Sobre la arena
   suben a 1,23:1, y de paso las preguntas y el aviso honesto quedan fundidos en
   una sola banda porque `.notice-sec` no tiene relleno superior. */
.faq-sec{background:var(--band-1)}

/* ---- bandas oscuras a sangre ----
   Sin `overflow` en la sección: crearía contenedor de scroll y mataría todas
   las líneas de tiempo `view()` de sus hijos. El recorte de la decoración ya
   lo hace `.dcl`, que para eso lleva su propio `overflow:hidden`. */
.sx-banda-oscura{
  position:relative;
  background:linear-gradient(168deg,var(--panel-2),var(--panel) 62%);
  color:var(--panel-ink);
}
/* la segunda banda invierte el ángulo y el orden de las paradas: son dos
   momentos oscuros separados por siete pantallas de luz y no deben leerse
   como la misma lámina repetida */
.sx-no{background-image:linear-gradient(348deg,var(--panel),var(--panel-2) 78%)}

/* ---- inversión de roles por ámbito ----
   Es el mecanismo que hace que TODO lo que ya existe —kickers, botones,
   entradillas, blobs, puntos— funcione sobre navy sin duplicar un solo
   componente: se reasignan los tokens de rol dentro del ámbito y las reglas de
   siempre siguen siendo las de siempre. Ningún color nuevo entra aquí: todos
   los valores apuntan a `--panel-*`, que están definidos en los dos modos. */
.sx-banda-oscura,
.closing{
  --ink:var(--panel-ink);
  --ink-soft:var(--panel-soft);
  --teal-strong:var(--panel-ink);   /* el kicker es texto pequeño: sobre la aurora, --panel-teal cae a 3,97:1. En blanco no baja de 6,3:1 */
  --teal-ink:var(--panel-teal);
  --line:var(--panel-line);
  --line-soft:var(--panel-line);
  --line-strong:var(--panel-soft);
  --dot:var(--panel-dot);
  --focus:var(--panel-teal);
  --grad-a:var(--panel-ink);
  --grad-b:var(--panel-teal);       /* 3,9:1 en el peor punto: SOLO h2 */
  --sx-sheen:var(--panel-line);
  --btn-fill:var(--panel-ink); --btn-fill-hi:var(--panel-teal); --btn-ink:var(--panel);
  --btn-2-ink:var(--panel-ink); --btn-2-line:var(--panel-soft); --btn-2-bg-hi:var(--panel-line);
  --blob-soft:.10; --blob-mid:.14; --blob-strong:.18;   /* .55 sobre navy es barro */
}
/* `--grad-b` hay que redeclararlo sí o sí: el valor de `:root` es
   `var(--teal-strong)`, y como aquí arriba `--teal-strong` pasa a ser
   `--panel-ink`, las dos paradas del degradado saldrían blancas y el titular
   se quedaría plano. */
.pledge{--grad-a:var(--panel-ink);--grad-b:var(--panel-teal)}   /* el h2 del panel también va en degradado */
/* el pie ya no es crema: hereda el final del degradado de cierre y necesita la
   misma inversión, pero solo de tinta y trazos (no hay botones dentro) */
.site-foot{
  --ink:var(--panel-ink);
  --ink-soft:var(--panel-soft);
  --teal-ink:var(--panel-teal);
  --ui-teal:var(--panel-teal);
  --line-soft:var(--panel-line);
  --line:var(--panel-line);
}

/* ---- aurora ----
   Decoración pura: vive siempre dentro de un `.dcl`, que es quien la recorta y
   quien ya lleva el `aria-hidden`. Sin `filter:blur()`: los degradados
   radiales llegan suaves de fábrica y desenfocar tres cajas de este tamaño
   sería, de largo, el peor coste de la página. */
.sx-aurora{position:absolute;inset:-25%;pointer-events:none}
.sx-aurora span{position:absolute;border-radius:50%}
.sx-aurora-1{left:-6%;top:-10%;width:62%;height:78%;
  background:radial-gradient(closest-side circle,var(--aurora-1),transparent 72%)}
.sx-aurora-2{right:-10%;top:6%;width:58%;height:72%;
  background:radial-gradient(closest-side circle,var(--aurora-2),transparent 70%)}
.sx-aurora-3{left:28%;bottom:-24%;width:54%;height:66%;
  background:radial-gradient(closest-side circle,var(--aurora-3),transparent 74%)}

/* ---- barra de progreso de lectura ----
   Fuera de la guarda no existe. No es un indicador de estado ni información:
   si el navegador no sabe animar por scroll, una barra fija y vacía en lo alto
   de la página sería ruido puro. */
.sx-progreso{display:none}

/* ---- titulares en degradado ----
   `color:transparent` y NUNCA `-webkit-text-fill-color`: en el modo de alto
   contraste de Windows el sistema fuerza `color` y el titular reaparece; con
   `-webkit-text-fill-color` se quedaría invisible, que es el fallo clásico de
   este efecto. El color plano de la regla base es el que se ve si el recorte
   al texto no está soportado. */
.sx-titular{color:var(--ink)}
@supports ((background-clip:text) or (-webkit-background-clip:text)){
  .sx-titular{
    background-image:linear-gradient(96deg,var(--grad-a),var(--grad-b));
    -webkit-background-clip:text;background-clip:text;color:transparent;
  }
  /* el h2 del panel de compromisos lleva `color` propio desde su regla
     (0,1,1), que gana a `.sx-titular` (0,1,0) y repintaría el texto encima del
     recorte. Este selector sube a (0,2,0) sin tocar la regla original. */
  .pledge-head .sx-titular{color:transparent}
  /* al seleccionar, el recorte deja el texto ilegible: se devuelve la tinta */
  .sx-titular::selection{color:var(--ink);background:var(--tint-teal)}
}

/* ---- brillo al pasar por encima ----
   La opacidad va aquí y el desplazamiento en el bloque de movimiento: así, con
   movimiento reducido, el brillo aparece y desaparece sin recorrer nada.
   NO se declara `transform` en el hover: `.card:hover` ya lo hace y uno de los
   dos se quedaría sin efecto. */
.sx-brillo{position:relative;overflow:hidden}
.sx-brillo::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(115deg,transparent 30%,var(--sx-sheen) 50%,transparent 70%);
  opacity:0;transition:opacity .34s ease;
}
.sx-brillo:hover::after,
.sx-brillo:focus-within::after{opacity:1}

/* ==========================================================================
   QUÉ SE ACUERDA — banda oscura nº 1
   ========================================================================== */
.sx-acuerdo .b1{top:-16%;left:-12%;width:min(36%,400px);transform:rotate(24deg)}

.sx-campos{position:relative;z-index:1;display:grid;gap:16px}
@media (min-width:700px){ .sx-campos{grid-template-columns:1fr 1fr;gap:18px} }
@media (min-width:1020px){ .sx-campos{grid-template-columns:repeat(3,1fr);gap:20px} }

/* El «vidrio» de las fichas es un velo OSCURO y no claro: aclarar sobre navy
   subiría la aurora por debajo del texto y lo dejaría en 3 y pico. Oscureciendo
   se recorta la decoración justo bajo la tarjeta y el texto sube a 6,0:1. */
.sx-ficha{
  background:var(--sx-vidrio);border:1px solid var(--line);
  border-radius:var(--r-3);padding:clamp(20px,2.6vw,26px);
  transition:background-color .24s ease,box-shadow .24s ease;
}
.sx-ficha:hover{background:var(--sx-vidrio-hi);box-shadow:var(--sh-l)}
.sx-ficha-n{
  display:inline-grid;place-items:center;width:34px;height:34px;border-radius:50%;
  background:var(--panel-line);color:var(--panel-ink);
  font-size:.92rem;font-weight:var(--fw-black);line-height:1;margin-bottom:14px;
}
.sx-ficha h3{font-size:var(--fs-h3);line-height:var(--lh-head);letter-spacing:-.025em;margin-bottom:8px}
.sx-ficha p{color:var(--panel-soft);font-size:var(--fs-small);line-height:var(--lh-body)}

/* `.sx-nota` es el sexto hijo de `.sx-campos`: con tres columnas cierra la
   rejilla en 3x2 exacto. Sin relleno de fondo y con el filo teal a la
   izquierda para que se lea como apostilla y no como una sexta ficha. */
.sx-nota{
  border:1px solid var(--panel-line);border-left:3px solid var(--panel-teal);
  border-radius:var(--r-3);padding:clamp(20px,2.6vw,26px);
}
.sx-nota h3{font-size:1.02rem;line-height:var(--lh-head);letter-spacing:-.02em;
            color:var(--panel-teal);margin-bottom:10px}
.sx-nota p{color:var(--panel-soft);font-size:var(--fs-small);line-height:var(--lh-body)}
.sx-nota p + p{margin-top:10px}

/* ==========================================================================
   EL ENLACE ES LA LLAVE — banda clara, primera mitad del bloque de confianza
   ========================================================================== */
.sx-llave{background:var(--band-2)}
.sx-llave .b1{bottom:-18%;right:-12%;width:min(32%,360px);transform:rotate(-64deg)}
.sx-llave .d1{left:3%;top:8%;width:clamp(120px,14vw,190px);height:clamp(100px,12vw,150px)}

.sx-datos{position:relative;z-index:1;display:grid;gap:18px}
@media (min-width:760px){ .sx-datos{grid-template-columns:repeat(3,1fr);gap:22px} }
.sx-dato{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-4);
  padding:clamp(22px,3vw,28px);box-shadow:var(--sh-s);
  transition:box-shadow .24s ease;
}
.sx-dato:hover{box-shadow:var(--sh-m)}
.sx-dato-n{
  display:inline-block;background:var(--tint-teal-2);color:var(--teal-strong);
  font-size:clamp(1.5rem,3.4vw,2rem);font-weight:var(--fw-black);line-height:1.1;
  letter-spacing:var(--track-tight);
  padding:.22em .6em;border-radius:var(--r-pill);margin-bottom:14px;
}
  /* `--tint-teal-2` estaba declarado en los dos modos y sin un solo uso en todo
     el repositorio. Se reclama aquí sin tocar su valor: `--teal-strong` sobre
     tinte teal da 5,2:1. */
.sx-dato h3{font-size:var(--fs-h3);line-height:var(--lh-head);letter-spacing:-.025em;margin-bottom:8px}
.sx-dato p{color:var(--ink-soft);line-height:var(--lh-body)}
.sx-llave-pie{position:relative;z-index:1;max-width:70ch;margin:clamp(26px,3.6vw,38px) auto 0;
              color:var(--ink-soft);line-height:var(--lh-body)}
.sx-llave-pie p + p{margin-top:12px}

/* ==========================================================================
   LO QUE SISEX NO ES — banda oscura nº 2
   ========================================================================== */
.sx-no-lista{position:relative;z-index:1;display:grid;gap:16px}
@media (min-width:760px){
  .sx-no-lista{grid-template-columns:1fr 1fr;gap:18px 22px}
  /* son cinco: el quinto ocupa las dos columnas para no dejar un hueco */
  .sx-no-lista li:nth-child(5){grid-column:1/-1}
}
.sx-no-item{
  display:flex;gap:14px;align-items:flex-start;
  background:var(--sx-vidrio);border:1px solid var(--line);
  border-radius:var(--r-3);padding:clamp(18px,2.4vw,24px);
  transition:background-color .24s ease,box-shadow .24s ease;
}
.sx-no-item:hover{background:var(--sx-vidrio-hi);box-shadow:var(--sh-l)}
.sx-no-marca{flex:none;width:26px;height:26px;margin-top:2px}
.sx-no-item h3{font-size:1.06rem;line-height:var(--lh-head);letter-spacing:-.02em;margin-bottom:6px}
.sx-no-item p{color:var(--panel-soft);font-size:var(--fs-small);line-height:var(--lh-body)}

/* ==========================================================================
   MOVIMIENTO DE LA PORTADA — bloque propio, aparte del de la escena del hero

   `@media screen` es obligatorio y no una precaución: sin él, al imprimir no
   hay scrollport, las animaciones de línea de tiempo se resuelven al 0% y
   salen secciones enteras en blanco sobre el papel.

   Longhands en vez de la abreviatura `animation`: la abreviatura reinicia
   `animation-timeline` a `auto` y el revelado volvería a ser una animación por
   tiempo que se dispara antes de que la sección esté a la vista.
   ========================================================================== */
@media screen and (prefers-reduced-motion: no-preference){

  /* -- aurora: periodos largos y primos entre sí, como la escena del hero, para
        que las tres manchas no vuelvan nunca a la misma posición a la vez -- */
  @keyframes sx-aurora-a{0%,100%{transform:translate3d(0,0,0) scale(1)}
                         50%    {transform:translate3d(7%,-5%,0) scale(1.14)}}
  @keyframes sx-aurora-b{0%,100%{transform:translate3d(0,0,0) scale(1.06)}
                         50%    {transform:translate3d(-6%,6%,0) scale(.94)}}
  @keyframes sx-aurora-c{0%,100%{transform:translate3d(0,0,0) scale(.98)}
                         50%    {transform:translate3d(5%,-7%,0) scale(1.12)}}
  .sx-aurora-1{animation:sx-aurora-a  67s ease-in-out infinite}
  .sx-aurora-2{animation:sx-aurora-b  89s ease-in-out -13s infinite}
  .sx-aurora-3{animation:sx-aurora-c 107s ease-in-out -31s infinite}

  /* -- brillo: el desplazamiento va aquí; la opacidad, en la regla base -- */
  .sx-brillo::after{transform:translateX(-26%);transition:opacity .34s ease,transform .55s cubic-bezier(.2,.8,.3,1)}
  .sx-brillo:hover::after,.sx-brillo:focus-within::after{transform:translateX(26%)}
  .sx-ficha:hover,.sx-dato:hover,.sx-no-item:hover{transform:translateY(-5px)}
  .sx-ficha,.sx-dato,.sx-no-item{transition:transform .22s cubic-bezier(.2,.8,.3,1),background-color .24s ease,box-shadow .24s ease}
    /* el hover de las piezas nuevas vive DENTRO de esta guarda: así no hace
       falta añadir nada al bloque `reduce`, que no se toca. */

  @supports (animation-timeline: view()){
    @keyframes sx-revela{from{opacity:0;translate:0 22px}to{opacity:1;translate:0 0}}
    .sx-revela{
      animation-name:sx-revela;
      animation-duration:auto;
      animation-timing-function:cubic-bezier(.2,.8,.3,1);
      animation-fill-mode:both;
      animation-timeline:view();
      animation-range:entry 14% cover 36%;
    }
    /* escalonado por rango y no por delay: la CSP prohíbe `style=""` en el
       marcado, así que no hay `--i` por elemento. Retrasar el tramo de entrada
       de cada hermano da el mismo efecto de cascada y además lo ata al scroll,
       no al reloj. */
    .cards .card:nth-child(2),
    .sx-campos > :nth-child(2),
    .sx-datos .sx-dato:nth-child(2),
    .sx-no-lista li:nth-child(2),
    .steps .step:nth-child(2),
    .faq details:nth-child(2){animation-range:entry 19% cover 41%}
    .cards .card:nth-child(3),
    .sx-campos > :nth-child(3),
    .sx-datos .sx-dato:nth-child(3),
    .sx-no-lista li:nth-child(3),
    .steps .step:nth-child(3),
    .faq details:nth-child(3){animation-range:entry 24% cover 46%}
    .sx-campos > :nth-child(4),
    .sx-no-lista li:nth-child(4),
    .faq details:nth-child(4){animation-range:entry 29% cover 51%}
    .sx-campos > :nth-child(5),
    .sx-no-lista li:nth-child(5),
    .faq details:nth-child(5){animation-range:entry 34% cover 56%}
    .sx-campos > :nth-child(6),
    .faq details:nth-child(6){animation-range:entry 39% cover 61%}
  }

  @supports (animation-timeline: scroll(root block)){
    @keyframes sx-progreso{from{transform:scaleX(0)}to{transform:scaleX(1)}}
    .sx-progreso{
      display:block;position:fixed;top:0;left:0;right:0;height:3px;
      z-index:60;pointer-events:none;   /* por encima de la cabecera (40), por debajo de la barra de cookies (70) */
    }
    .sx-progreso-barra{
      display:block;height:100%;transform:scaleX(0);transform-origin:left center;
      background:linear-gradient(90deg,var(--teal),var(--purple) 55%,var(--coral));
      animation-name:sx-progreso;animation-duration:auto;animation-timing-function:linear;
      animation-fill-mode:both;animation-timeline:scroll(root block);
    }
  }
}

/* ==========================================================================
   ALTO CONTRASTE E IMPRESIÓN DE LAS PIEZAS NUEVAS
   ========================================================================== */
@media (forced-colors: active){
  /* los fondos translúcidos desaparecen: el límite tiene que ser un borde real */
  .sx-ficha,.sx-dato,.sx-no-item{border:1px solid CanvasText}
  /* el sistema fuerza `color`, así que el recorte al texto sobra */
  .sx-titular{background-image:none}
  .sx-aurora,.sx-progreso{display:none}
}
@media print{
  .sx-aurora,.sx-progreso{display:none}
  /* en papel no hay bandas: todo vuelve a tinta negra sobre blanco, y los
     tokens se reasignan por ámbito en vez de repetir reglas de color */
  .sx-banda-oscura,.closing,.site-foot{
    background:none;
    --ink:#000;--ink-soft:#333;--panel-ink:#000;--panel-soft:#333;
    --grad-a:#000;--grad-b:#000;--line:#999;--line-soft:#999;--sx-vidrio:transparent;
  }
  .why,.faq-sec,.notice-sec,.pledge-sec,.sx-llave{background:none}
  .sx-titular{background-image:none;color:#000}
  .sx-ficha,.sx-dato,.sx-no-item{border:1px solid #000}
}

/* ==========================================================================
   PUNTERO QUE NO SE POSA — el `:hover` pegajoso del táctil

   En iOS el estado `:hover` NO se suelta al levantar el dedo: se queda hasta
   que se toca otra cosa. Así que la tarjeta que acabas de pulsar se queda
   levantada, con la sombra grande, mientras la página siguiente carga por
   debajo. Es de los efectos que más gritan «esto es una web», porque no hay
   ninguna aplicación en la que algo se quede a medio camino de un gesto.

   `hover:none` casa sólo donde el puntero principal no puede posarse. En un
   escritorio con ratón esta consulta no existe y todo sigue igual.

   Va AL FINAL del fichero a propósito: una consulta de medios no suma
   especificidad, así que este bloque tiene que ganar por orden de cascada a
   todos los `:hover` declarados más arriba —`.card`, `.sx-ficha`, `.sx-dato`,
   `.sx-no-item`— incluidos los que viven dentro de la guarda de movimiento.
   Los `:hover` que sólo cambian color se dejan: quedarse teñido no descoloca
   nada, y quitarlos dejaría sin estado visible a quien navega con teclado.
   ========================================================================== */
@media (hover:none){
  .btn-1:hover,.btn-2:hover{transform:none}
  .btn-1:hover{box-shadow:var(--sh-s)}
  .card:hover{transform:none;box-shadow:var(--sh-s)}
  .sx-ficha:hover,.sx-dato:hover,.sx-no-item:hover{transform:none;box-shadow:none}
  .sx-dato:hover{box-shadow:var(--sh-s)}
}

/* ==========================================================================
   TRANSICIONES DE VISTA — el destello blanco entre páginas

   Este sitio se sirve entero desde el servidor: cada toque en la barra es una
   navegación completa, y una navegación completa pinta un fotograma en blanco
   entre la página que se va y la que llega. Ese parpadeo es, él solo, lo que
   hace que moverse por la aplicación se sienta como moverse por una web.

   `@view-transition` lo quita sin una línea de JavaScript ni un router: el
   navegador funde la página vieja con la nueva. Donde no está soportado, la
   regla entera se ignora y la navegación es exactamente la de hoy — no hay
   nada que degradar a mano.

   DENTRO DE LA GUARDA DE MOVIMIENTO, y no es un formalismo: es la única
   animación del proyecto que ocurre sin que nadie la pida, en cada toque, y a
   pantalla completa. Quien haya pedido menos movimiento no la ve nunca.

   Los nombres de los elementos que PERSISTEN entre páginas —la cabecera y la
   barra inferior— se declaran en `cascara.css`, que es donde viven esos dos
   elementos. Sin nombre, el cromo se fundiría junto con el contenido y la
   barra parpadearía en cada toque; con nombre, se queda quieta y sólo cambia
   el destino marcado, que es lo que hace una aplicación.
   ========================================================================== */
@media (prefers-reduced-motion: no-preference){

  @view-transition{ navigation:auto }

  /* 250ms es el defecto y se nota como una transición; a 180 se lee como que
     la pantalla ya estaba ahí, que es justo lo que se busca. */
  ::view-transition-old(root),
  ::view-transition-new(root){animation-duration:.18s}

  /* El cromo no se mueve: los dos elementos ocupan el mismo sitio en las dos
     páginas, así que el grupo no tiene recorrido y lo único que cambia es el
     destino marcado, que se funde en su sitio. */
  ::view-transition-group(cascara-cabecera),
  ::view-transition-group(cascara-barra){animation-duration:.18s}
}