/* seremos · opción C de la portada, «Seremos» (tesis del 05-10-2026), archivada en /opciones/seremos/ como recurso de interfaz y de marketing. Hoja propia de esta página: copia de la hoja del sitio de ese día sin lo que el cartel no usa, para que la versión no cambie cuando cambie el sitio. De fuera de la carpeta solo salen las fuentes y los scripts comunes. Marca del kit «Media naranja»: naranja pleno, crema y una banda berenjena; Gabarito declara y DM Sans lee. Orden: fuentes, tokens, base, componentes */

/* ===== Fuentes: dos variables, Gabarito (34.320 bytes) en títulos y DM Sans (62.556 bytes) en textos; licencias en fonts/OFL-*.txt ===== */
@font-face{font-family:"Gabarito";src:url("/fonts/gabarito-latin-wght.woff2") format("woff2");font-weight:400 900;font-style:normal;font-display:swap}
@font-face{font-family:"DM Sans";src:url("/fonts/dmsans-latin-wght.woff2") format("woff2");font-weight:100 1000;font-style:normal;font-display:swap}

/* ===== 1. Tokens ===== */
:root{
  /* color: del kit, naranja, mandarina, berenjena (tinta) y crema (fondo), más el durazno claro para leer sobre berenjena. Sobre naranja solo se lee berenjena: la tinta suave, el gris, la hoja, la mesa y la línea quedan para el campo del formulario y sus estados. El error es el único color de sistema */
  --tinta:#2A1730; --tinta-suave:#4A3550; --tinta-alta:#3A2242; --gris:#6F5E75; --naranja:#FF7A1A; --mandarina:#F2541B;
  --fondo:#FFF6EC; --sobre-oscuro:#FFE3CC; --acento-claro:#FFE3CC; --papel:#FFFDFA; --hoja:#FFFDFA; --mesa:#FFF6EC; --linea:#F3E3D3;
  --error:#A3401F; --color-foco:var(--tinta);
  --sombra-hundida:inset 0 1px 2px rgb(42 23 48/.12);

  /* tipografía: Gabarito en los títulos y en todo lo que el cartel declara (su eje de peso se anima entre 400 y 900), DM Sans en lo que se lee (400, 500 y 600), sin cursiva. Los tamaños del cartel son fluidos, van en cada regla y se miden contra el lienzo (cqi); aquí quedan los fijos */
  --fuente:"DM Sans",Arial,system-ui,sans-serif; --fuente-titulos:"Gabarito",Arial,system-ui,sans-serif;
  --t-meta:.875rem;     /* 14: rótulos, pies de figura, notas y pie de página */
  --t-cuerpo:1.0625rem; /* 17: texto de lectura */
  --t-1:var(--t-cuerpo);/* 17: campo y botón */
  --t-2:1.25rem;        /* 20: la confirmación del formulario */
  --lh-lectura:1.5; --lh-titular:1.25; --lh-control:1;
  --peso-normal:400; --peso-enfasis:600;

  /* espaciado: base 4 */
  --e1:4px; --e2:8px; --e3:12px; --e4:16px; --e5:24px;
  --e6:32px; --e7:48px; --e9:96px;
  --margen:var(--e4);   /* donde se posa el enlace de salto: 16 en teléfono, 24 desde 600 */

  /* forma: 6 px en el anillo de foco y en el campo de base, con su filete gris; lo demás del cartel es píldora o disco y va en cada regla */
  --r1:6px;
  --filete:1px solid var(--gris);

  /* movimiento: 80 ms la pulsación; 120, 200 y 320 lo demás. Dos curvas de base (aparecer y asentarse) y dos del cartel (salida y vaivén) */
  --dur-0:80ms; --dur-1:120ms; --dur-2:200ms; --dur-3:320ms;
  --ease:cubic-bezier(.2,0,.2,1); --ease-asentar:cubic-bezier(.16,1,.3,1); --salida:cubic-bezier(.16,1,.3,1); --vaiven:cubic-bezier(.65,0,.35,1);

  /* cartel: borde de página, raya sobre naranja y alto de la barra, que cede con el de la ventana */
  --borde:clamp(1rem,1.7vw,2rem); --raya:rgb(42 23 48/.24); --barra:clamp(52px,8.4svh,68px);

  color-scheme:light;
}
@media (min-width:600px){:root{--margen:var(--e5)}}

/* ===== 2. Base ===== */
/* Solo transiciona lo que figura en la tabla de movimiento */
*,*::before,*::after{box-sizing:border-box;transition-property:none}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
/* La página es naranja pleno con texto berenjena (6,4:1); sobre naranja nunca gris, tinta suave ni blanco. Cifras proporcionales; tabulares en los precios */
body{margin:0;background:var(--naranja);color:var(--tinta);font:var(--peso-normal) var(--t-cuerpo)/var(--lh-lectura) var(--fuente);font-variant-numeric:proportional-nums;overflow-wrap:break-word;-webkit-font-smoothing:antialiased}
::selection{background:var(--acento-claro);color:var(--tinta)}

h1,h2{font-family:var(--fuente-titulos);font-weight:700;line-height:var(--lh-titular);color:var(--tinta);margin:0;text-wrap:balance}
h1{letter-spacing:-.015em}
p{margin:0}
p+p{margin-top:var(--e4)}
p,dd,li,figcaption{text-wrap:pretty}
strong{font-weight:var(--peso-enfasis);color:var(--tinta)}

a,button,label{-webkit-tap-highlight-color:transparent}
a{color:var(--tinta);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;touch-action:manipulation;transition:text-decoration-thickness var(--dur-1) var(--ease)}
@media (hover:hover) and (pointer:fine){a:hover{text-decoration-thickness:2px;animation:engrosar var(--dur-1) var(--ease)}}
a:focus-visible,button:focus-visible,input:focus-visible{outline:2px solid var(--color-foco);outline-offset:2px;border-radius:var(--r1)}

.saltar{position:absolute;left:var(--margen);top:calc(-1 * var(--e9));z-index:10;background:var(--tinta);color:var(--papel);padding:var(--e3) var(--e4);border-radius:var(--r1);font:var(--peso-enfasis) var(--t-cuerpo)/var(--lh-lectura) var(--fuente);text-decoration:none}
.saltar:focus{top:var(--e3)}
main:focus{outline:none}

/* ===== 3. Componentes ===== */

/* Marca: el isotipo del kit para fondo naranja, a 32 px de alto dentro de un área táctil de 44; el clip deja el área de respeto del SVG fuera de la caja */
.marca{display:inline-flex;vertical-align:top;align-items:center;min-width:44px;min-height:44px;overflow:clip;text-decoration:none}
.marca img{display:block;height:32px;width:auto}

/* Los verbos se van por los lados con el scroll: lo que sale del ancho se recorta sin crear scroll lateral */
main{overflow-x:clip}
@supports not (overflow-x:clip){main{overflow-x:hidden}}

.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* Lista de espera: rótulo de 14; lo que tecleas, de 16 a 17. La línea del error va después de la nota. La columna no crece con el campo (200 %) */
.lista{margin-top:var(--e6);display:grid;grid-template-columns:minmax(0,1fr)}
.celda{display:grid;grid-template-columns:minmax(0,1fr)}
.campo,.listo{grid-area:1/1}
.campo label{display:block;margin-bottom:var(--e2);font:var(--peso-enfasis) var(--t-meta)/var(--lh-lectura) var(--fuente);color:var(--tinta)}
.fila{display:flex;flex-direction:column;gap:var(--e3)}
/* El campo es un control hundido en la hoja: radio 6, filete gris y sombra hundida */
.fila input{width:100%;min-width:0;height:52px;padding:0 var(--e4);font:var(--peso-normal) var(--t-1)/var(--lh-control) var(--fuente);color:var(--tinta);background:var(--hoja);border:var(--filete);border-radius:var(--r1);box-shadow:var(--sombra-hundida);transition:border-color var(--dur-2) var(--ease)}
.fila input,.fila button{scroll-margin-block:var(--e5)}
.fila input::placeholder{color:var(--gris);opacity:1}
@media (hover:hover) and (pointer:fine){.fila input:hover{border-color:var(--tinta-suave)}}
.fila input:focus{border-color:var(--tinta)}
/* El error cambia también de forma (2 px), de inmediato; el relleno compensa el píxel */
.fila input[aria-invalid="true"]{border-color:var(--error);border-width:2px;padding:0 calc(var(--e4) - 1px);transition:none}
.fila input:disabled{background:var(--mesa);border-color:var(--linea);color:var(--gris);box-shadow:none}

/* El botón es el único naranja del sitio, con texto berenjena (6,4:1, la combinación que el kit autoriza). Es un control apoyado: radio 6 y --sombra-1 en una capa propia (solo cambia su opacidad; la sombra nunca se anima) */
.fila button{position:relative;display:grid;flex:none;width:100%;height:52px;padding:0 var(--e5);font:var(--peso-enfasis) var(--t-1)/var(--lh-control) var(--fuente);color:var(--tinta);background:var(--naranja);border:0;border-radius:var(--r1);cursor:pointer;touch-action:manipulation;transition:background-color var(--dur-2) var(--ease),transform var(--dur-2) var(--ease-asentar)}
/* Pulsación: se hunde 1 px, escala .98 y pierde la sombra en 80 ms; vuelve en 200 con la curva de asentarse */
.fila button:active{transform:translateY(1px) scale(.98);transition-duration:var(--dur-0)}
.fila button:active::after{opacity:0;transition-duration:var(--dur-0)}
/* Hover (puntero fino): fondo a tinta suave y 1 px hacia la luz, en 120 ms; sin anillo */
@media (hover:hover) and (pointer:fine){.fila button:hover:not(:disabled,:active){background:var(--mandarina);transform:translateY(-1px);transition-duration:var(--dur-1)}}
.fila button:disabled{background:var(--mesa);color:var(--gris);border:1px solid var(--linea);padding:0 calc(var(--e5) - 1px);cursor:default;transform:none}
.fila button:disabled::after{opacity:0}
/* Las dos etiquetas comparten celda: el botón no cambia de ancho con «Guardando…» */
.boton-capa{grid-area:1/1;place-self:center;transition:opacity var(--dur-2) var(--ease)}
.boton-ocupado{opacity:0}
.enviando .boton-normal{opacity:0}
.enviando .boton-ocupado{opacity:1}
.enviando .fila button{cursor:progress}
@media (min-width:600px){
  .fila{flex-direction:row}
  .fila input{flex:1;width:auto}
  .fila button{width:auto}
}

.mensaje{order:1;min-height:calc(var(--t-meta) * var(--lh-lectura));margin-top:var(--e1);font:var(--peso-normal) var(--t-meta)/var(--lh-lectura) var(--fuente);color:var(--error)}
.mensaje:not(:empty){animation:aparecer var(--dur-2) var(--ease)}
.nota{margin-top:var(--e2);font:var(--peso-normal) var(--t-cuerpo)/var(--lh-lectura) var(--fuente);color:var(--tinta-suave)}
/* El enlace de la nota no se parte: si no cabe, baja entero */
.nota{text-wrap:wrap}
.nota a{display:inline-block}

/* Confirmación en la misma celda: el campo sale en 120 ms y ella entra después, por opacidad. No celebra */
.campo{transition:opacity var(--dur-1) var(--ease),visibility 0s linear 0s}
.lista.listo-activo .campo{opacity:0;visibility:hidden;transition:opacity var(--dur-1) var(--ease),visibility 0s linear var(--dur-1)}
.listo{align-self:center;opacity:0}
.lista.listo-activo .listo{opacity:1}
.lista.listo-activo .listo-titulo,.lista.listo-activo .listo-detalle,.lista.listo-activo .listo-correo{animation:entrar var(--dur-3) var(--ease) both}
.lista.listo-activo .listo-titulo{animation-delay:var(--dur-1)}
.lista.listo-activo .listo-detalle{animation-delay:calc(var(--dur-1) + 90ms)}
.lista.listo-activo .listo-correo{animation-delay:calc(var(--dur-1) + 180ms)}
.listo-correo{display:inline-block;max-width:100%}
.listo:focus{outline:none}
.listo-titulo{font:var(--peso-enfasis) var(--t-2)/var(--lh-titular) var(--fuente);color:var(--tinta)}
.listo-detalle{margin-top:var(--e1);font:var(--peso-normal) var(--t-cuerpo)/var(--lh-lectura) var(--fuente);color:var(--tinta-suave);overflow-wrap:anywhere}

.trampa{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* Enlaces en texto corto o legal: 44 px táctiles sin cambiar el alto de línea */
.nota a,.pie-datos a{padding-block:var(--e4);margin-block:calc(-1 * var(--e4))} /* 16: con 12, la caja de la letra (1,21 em) daba 41 px a 14 */

/* Transición entre páginas: 200 ms y marca compartida en 320 */
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:var(--dur-2);animation-timing-function:var(--ease)}
.cabecera .marca{view-transition-name:marca}
::view-transition-group(marca){animation-duration:var(--dur-3);animation-timing-function:var(--ease)}

/* La confirmación y el error aparecen por opacidad */
@keyframes entrar{from{opacity:0}to{opacity:1}}
@keyframes aparecer{from{opacity:0}to{opacity:1}}
/* Chrome no transiciona text-decoration-thickness pero sí lo anima */
@keyframes engrosar{from{text-decoration-thickness:1px}to{text-decoration-thickness:2px}}

/* Movimiento reducido: 1 ms, sin retrasos ni desplazamientos */
@media (prefers-reduced-motion:reduce){
  ::view-transition-group(marca){animation:none}
  ::view-transition-old(root),::view-transition-new(root){animation-duration:1ms}
  *,*::before,*::after{animation-duration:1ms!important;animation-delay:0s!important;transition-duration:1ms!important;transition-delay:0s!important}
  .fila button:active,.fila button:hover{transform:none!important}
}

/* Retratos: dibujos del kit, ficticios, escritos dentro de cada .cara por herramientas/armar-retratos.mjs en la portada de origen; aquí van copiados tal cual y no se editan a mano */
.cara{display:block;aspect-ratio:4/5;border-radius:var(--r1);overflow:hidden;background:var(--sobre-oscuro)}
.cara svg{display:block;width:100%;height:100%}

/* Cartel: la opción C de la portada (tesis «Seremos», 05-10-2026). La promesa está en el nombre, un verbo en futuro y en plural, y la página lo conjuga: soy, eres, somos, seremos. Naranja pleno con berenjena (6,4:1); sobre naranja nunca gris, tinta suave ni blanco. Todo el movimiento es CSS: Gabarito anima su eje de peso y las palabras se parten con clip-path; lo ligado al scroll va con animation-timeline y, donde no existe o se pide menos movimiento, queda el estado final, quieto. */
/* El lienzo es el contenedor de consulta: cqi mide el ancho útil sin la barra de scroll, cosa que vw no hace. Todos los tamaños del cartel salen de ahí con clamp, sin un solo corte entre 320 y 1920 px */
.lienzo{max-width:1920px;margin-inline:auto;padding-inline:var(--borde);container-type:inline-size}
/* Barra: el isotipo (el logotipo ya va a tamaño de cartel en el h1) y el botón de aviso; sin filete, en berenjena. Va por encima del cartel porque la caja de «soy» sube más que su tinta y, sin esto, le quitaba el clic al isotipo. Su alto cede con el de la ventana (--barra) y el cartel lo descuenta para llenar justo la primera pantalla */
.cabecera{position:relative;z-index:1;display:flex;flex-wrap:wrap;align-items:center;gap:var(--e2);height:var(--barra)}
/* Botón de aviso: píldora berenjena con texto crema (15:1), 44 px o más. Vive en la barra y no al pie del cartel porque ahí, en la ventana real de un teléfono, quedaba bajo el pliegue. La flecha baja 3 px al pasar el puntero y al pulsar encoge a .97 */
.boton{display:inline-flex;align-items:center;gap:.6em;min-height:clamp(44px,2.5rem + .5cqi,52px);margin-left:auto;padding:0 1.25em;border-radius:999px;background:var(--tinta);color:var(--fondo);font:var(--peso-enfasis) clamp(.9375rem,.88rem + .25cqi,1.0625rem)/1 var(--fuente);text-decoration:none;white-space:nowrap;transition:background-color var(--dur-2) var(--ease),transform var(--dur-2) var(--salida)}
.boton svg{flex:none;transition:transform var(--dur-2) var(--salida)}
.boton:active{transform:scale(.97);transition-duration:var(--dur-0)}
a.boton:focus-visible{border-radius:999px}
@media (hover:hover) and (pointer:fine){.boton:hover{background:var(--tinta-alta)}.boton:hover svg{transform:translateY(3px)}}
/* En teléfono la barra no da para la frase entera: «el día que abra» se recoge a ancho cero bajo 30 rem de lienzo (el lector de pantalla la lee igual). El recorte es solo horizontal para no comerse la «q», y con clip (no hidden) la palabra no pierde su línea de base */
.largo{display:inline-block;max-width:clamp(0px,(100cqi - 30rem)*999,12em);white-space:pre;overflow-x:clip}

/* Corte: la palabra partida como la naranja del logotipo, la mitad izquierda arriba y la derecha abajo. El texto real queda transparente (lo leen el lector de pantalla y el buscador) y las mitades son dos copias recortadas con clip-path en --x, que se pisan medio píxel para que en reposo no se vea la costura; el texto alternativo vacío evita que se lea tres veces */
.corte{position:relative;display:inline-block;color:transparent;white-space:nowrap}
.corte::before,.corte::after{content:attr(data-t);content:attr(data-t) / "";position:absolute;left:0;top:0;color:var(--tono,var(--tinta))}
.corte::before{clip-path:inset(-1em calc(100% - var(--x,50%) - .5px) -1em -1em)}
.corte::after{clip-path:inset(-1em -1em -1em var(--x,50%))}
/* Con colores forzados el navegador repinta el texto real: las copias sobran */
@media (forced-colors:active){.corte{color:CanvasText}.corte::before,.corte::after{content:none}}

/* Primera pantalla. Arriba, para qué es; después, tres líneas: «soy», «eres» y el logotipo del kit (la palabra de marca nunca se tipea); abajo, el resumen y que todavía no abrimos. El aire que sobra se reparte por igual sobre el bloque y bajo él */
.cartel{display:grid;grid-template-rows:auto minmax(.75rem,1fr) auto minmax(.75rem,1fr) auto;min-height:calc(100vh - var(--barra));min-height:calc(100svh - var(--barra));padding-block:clamp(.25rem,.6svh,.75rem) clamp(.75rem,2svh,1.5rem)}
.promesa{grid-row:1;font:700 clamp(min(1.625rem,13cqi),8.4cqi,2.75rem)/1.1 var(--fuente-titulos);letter-spacing:-.015em;text-wrap:initial}
/* «media naranja» en dos mitades de una píldora, una arriba y otra abajo. Berenjena y crema, no el blanco y durazno del isotipo: es una palabra partida, no la marca */
.mitades{display:inline-flex;gap:.08em;white-space:nowrap}
.mitades span{padding:.05em .36em .11em;line-height:1}
.mitades span:first-child{padding-left:.5em;border-radius:99em 0 0 99em;background:var(--tinta);color:var(--fondo);translate:0 -.09em}
.mitades span:last-child{padding-right:.5em;border-radius:0 99em 99em 0;background:var(--fondo);translate:0 .09em}
/* Los verbos. Cada caja mide lo que mide la tinta de su palabra en peso 900 (1,519 y 1,81 em, medido en Gabarito) y la palabra entra corrida lo que le sobra a la izquierda: así «soy» toca el borde izquierdo, «eres» el derecho y los dos calzan con el logotipo al píxel. Dos composiciones y un paso continuo entre ellas, gobernado por --u (alto contra ancho de la ventana): en vertical, una palabra por línea, cada una a todo el ancho del bloque; en apaisado, las dos en una línea al cuerpo del logotipo, «eres» un escalón más abajo, como las mitades. Cuando el alto no alcanza, lo que cede es el ancho del bloque entero, centrado (en apaisado 213,9svh − 27rem, con piso de 40 rem; en vertical 85,5svh − 13,6rem: lo que queda después de la barra, la frase y el pie, que en apaisado cabe en una línea y en teléfono ocupa tres, dividido por la proporción del bloque), de modo que las tres líneas siguen justificadas entre sí y el logotipo no cae bajo el pliegue */
.conjuga{display:grid;width:min(100%,max(40rem,213.9svh - 27rem),85.5svh - 13.6rem + max(0px,100vw - 105svh)*20);grid-row:3;justify-self:center;container-type:inline-size;font:900 1rem/.8 var(--fuente-titulos);text-wrap:initial}
.verso{grid-area:1/1;display:block;letter-spacing:-.02em;--u:calc(105svh - 100vw);--a:max(27.4cqi,min(65.8cqi,27.4cqi + var(--u)*1.5));--b:max(27.4cqi,min(55.25cqi,27.4cqi + var(--u)*1.5))}
.verso.soy{justify-self:start;width:1.519em;font-size:var(--a)}
.verso.eres{justify-self:end;width:1.81em;font-size:var(--b);margin-top:max(var(--a)*.17,min(var(--a)*.8,var(--a)*.8 + var(--u)*2))}
/* --ls es lo que hay que abrir las letras en peso 400 para que la palabra mida lo mismo que en 900: el peso cambia y los dos bordes no se mueven */
.cartel .soy .corte{--x:52%;--ls:.0465em;margin-left:-.019em}
.cartel .eres .corte{--x:49%;--ls:.0213em;margin-left:-.015em}
/* El aire sobre el logotipo crece hasta una x (13,3 % de su ancho, el área de respeto del kit) cuando el alto lo permite; donde no, se queda en 3,2 % y el cartel se declara como excepción */
.conjuga .logo{grid-row:2;display:block;width:100%;height:auto;margin-top:clamp(3.2cqi,100svh - 15.9rem - 117cqi,13.3cqi)}
.cartel-pie{grid-row:5;display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:var(--e1) var(--e7)}
.resumen{font:var(--peso-enfasis) clamp(1.0625rem,.98rem + .35cqi,1.375rem)/1.35 var(--fuente)}
.aun{margin-top:0;font-size:var(--t-meta)}

/* Capítulos: un verbo gigante, una frase y una pieza. El verbo es decoración (aria-hidden) y el h2 lo repite para quien no ve; juntos se leen como una frase. Lado a lado cuando caben el verbo, el medianil y 24 rem de texto; si no, apilados. El verbo se queda pegado solo cuando van lado a lado: el clamp de top lo manda fuera de alcance en la otra composición, sin media query, en el mismo punto en que flex-wrap parte la fila */
.capitulo{padding-block:clamp(4.5rem,13svh,9rem);view-timeline:--cap block}
.capitulo.crema{background:var(--fondo)}
.capitulo-caja{display:flex;flex-wrap:wrap;align-items:flex-start;gap:clamp(1.25rem,4svh,2.5rem) clamp(2rem,5cqi,6rem)}
.verbo{--w:min(100cqi,24rem + 14cqi);flex:none;width:var(--w);font:900 1rem/.8 var(--fuente-titulos);font-size:min(calc(var(--w)/var(--em)),46svh);letter-spacing:-.02em;--tono:var(--mandarina);padding-bottom:.15em;position:sticky;top:clamp(-200vh,(var(--w) + clamp(2rem,5cqi,6rem) + 24rem - 100cqi)*-9999,16svh);view-timeline:--verbo block}
/* Mandarina sobre crema da 3,2:1 (texto grande); sobre naranja el verbo va en berenjena */
.naranja .verbo{--tono:var(--tinta)}
.v-soy{--em:1.55}
.v-eres{--em:1.845}
.v-somos{--em:2.8}
.v-soy .corte{--x:52%}
.dicho{flex:1 1 24rem;min-width:0}
/* La etiqueta gramatical cuenta la historia: de la primera persona del singular al plural en futuro. Es una ficha con borde, como las de una interfaz, y no un dibujo: nada aquí imita al isotipo */
.gramatica{display:inline-block;padding:.5em 1em;border:1.5px solid;border-radius:999px;font:var(--peso-enfasis) clamp(.875rem,.82rem + .22cqi,1rem)/1.2 var(--fuente);letter-spacing:.01em}
.dicho h2,.banda h2,.final h2{margin-top:var(--e5);font-size:clamp(2.75rem,1.1rem + 8cqi,6rem);line-height:.96;letter-spacing:-.025em}
.dicho h2{max-width:12ch}
/* Una sola línea de apoyo por capítulo; lo demás lo cuenta la pieza o va en su pie */
.apoyo{max-width:31rem;margin-top:clamp(1rem,3svh,1.75rem);font:500 clamp(1.125rem,1.03rem + .42cqi,1.375rem)/1.4 var(--fuente)}
/* Una cita corta no se parte entre dos líneas */
.junto{white-space:nowrap}

/* Piezas: interfaz mínima de ejemplo, nunca una demo ni un control que parezca responder. Objetos en berenjena puestos sobre el color de la página, sin tarjeta blanca ni sombra; cada figura declara en su pie que es un ejemplo */
.pieza{max-width:34rem;margin:clamp(2rem,6svh,3.5rem) 0 0}
.pieza figcaption{max-width:31rem;margin-top:var(--e5);font:var(--peso-normal) var(--t-meta)/1.45 var(--fuente)}
.pieza-de{display:flex;align-items:center;gap:var(--e3)}
.cara.redonda{flex:none;width:3rem;aspect-ratio:1;border-radius:50%}
.cara.redonda svg{height:125%}
/* Las tres respuestas ya elegidas: píldora llena con su marca, no un desplegable */
.elegidas{display:grid;justify-items:start;gap:var(--e4);margin:var(--e5) 0 0}
.elegidas dt{margin-bottom:var(--e2);font:var(--peso-enfasis) var(--t-meta)/1.3 var(--fuente)}
.elegidas dd{display:flex;align-items:center;gap:.6em;width:fit-content;margin:0;padding:.5em 1.15em .56em .56em;border-radius:1.7em;background:var(--tinta);color:var(--fondo);font:600 clamp(1.1875rem,1.02rem + .8cqi,1.75rem)/1.12 var(--fuente-titulos)}
.elegidas dd::before{content:"";flex:none;width:1.3em;height:1.3em;border-radius:50%;background:var(--naranja) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.6 10.4l3 3 5.8-6.6' fill='none' stroke='%232A1730' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat}
/* El disco: un mismo rostro en dos mitades, la selfie y la foto del perfil, que se comparan. Corte recto, sin desfase vertical y casi juntas: es un retrato, no el isotipo (que va desfasado y no se cierra). La selfie lleva el aro punteado de la prueba de vida */
.doble{display:flex;flex-wrap:wrap;align-items:center;gap:var(--e5) clamp(1.5rem,4cqi,3.5rem);max-width:46rem}
.doble figcaption{flex-basis:100%;margin-top:0}
.disco{flex:none;display:flex;gap:3%;width:clamp(14rem,70cqi,23rem);max-width:100%;view-timeline:--disco block}
.mitad{flex:1;min-width:0}
.mitad+.mitad{margin-top:0}
.mitad .cara{position:relative;aspect-ratio:1/2;border-radius:0;clip-path:ellipse(100% 50% at 100% 50%)}
.mitad.b .cara{clip-path:ellipse(100% 50% at 0 50%)}
.mitad .cara svg{width:200%;height:125%;translate:0 -10%}
.mitad.b .cara svg{translate:-50% -10%}
.mitad.a .cara::after{content:"";position:absolute;inset:0;border:3px dashed var(--tinta);border-right:0;border-radius:100% 0 0 100%/50% 0 0 50%}
.mitad-rotulo{display:block;margin-top:var(--e3);font:var(--peso-enfasis) var(--t-meta)/1.3 var(--fuente);text-align:center;text-wrap:balance}
/* La lista que se abre después: berenjena con crema (15:1) y el rótulo en naranja (6,4:1) */
.activos{flex:1 1 17rem;max-width:22rem;padding:var(--e4) var(--e5) var(--e3);border-radius:24px;background:var(--tinta);color:var(--sobre-oscuro)}
.activos-rotulo{font:var(--peso-enfasis) var(--t-meta)/1.3 var(--fuente);color:var(--naranja)}
.gente{margin:var(--e2) 0 0;padding:0;list-style:none}
.gente li{display:flex;align-items:center;gap:var(--e3);padding-block:var(--e2);font-size:.9375rem;line-height:1.3}
.gente li+li{border-top:1px solid rgb(255 246 236/.18)}
.gente strong{color:var(--fondo)}
.gente .cara{width:2.5rem}
/* El mensaje: una burbuja a la izquierda con lo que lo motiva arriba y, a la derecha, las dos salidas de quien lo recibe */
.burbuja{width:fit-content;max-width:min(100%,27rem);margin-top:var(--e4);padding:var(--e4);border-radius:28px 28px 28px 8px;background:var(--tinta);color:var(--fondo)}
.ancla{padding:var(--e3) var(--e4);border-radius:16px;background:rgb(255 246 236/.1);font-weight:var(--peso-enfasis);line-height:1.3}
.ancla span{display:block;margin-bottom:2px;font:var(--peso-normal) var(--t-meta)/1.3 var(--fuente);color:var(--sobre-oscuro)}
.recado{margin:var(--e4) var(--e2) var(--e2);font:600 clamp(1.5rem,1.25rem + 1.2cqi,2.25rem)/1.1 var(--fuente-titulos);text-wrap:balance}
.salidas{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:var(--e2);margin-top:var(--e3)}
.salidas span{padding:.75em 1.3em;border:1.5px solid var(--tinta);border-radius:999px;font:var(--peso-enfasis) var(--t-cuerpo)/1 var(--fuente)}
.salidas span:first-child{border-color:var(--naranja);background:var(--naranja)}

/* Banda berenjena: lo que cuesta. Crema y durazno para leer (15:1 y 13:1) y naranja en las cifras (6,4:1). El peso del nombre sube con el plan (400, 650, 900): el eje variable hace de escala. Nombre y precio comparten línea de base; si no caben, el precio baja */
.banda{padding-block:clamp(4.5rem,13svh,9rem);background:var(--tinta);color:var(--sobre-oscuro);--color-foco:var(--fondo);--raya:rgb(255 246 236/.26)}
.banda .gramatica,.banda h2{color:var(--fondo)}
.banda h2{max-width:17ch}
.banda .apoyo{color:var(--naranja)}
.tarifas{margin:clamp(2.5rem,7svh,4.5rem) 0 0;border-bottom:1px solid var(--raya)}
.tarifa{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:var(--e2) var(--e6);padding-block:clamp(1.25rem,3.4svh,2.25rem);border-top:1px solid var(--raya)}
.tarifa dt{font:400 clamp(3.25rem,1.9rem + 7cqi,9rem)/.9 var(--fuente-titulos);letter-spacing:-.03em;color:var(--fondo)}
.tarifa:nth-child(2) dt{font-weight:650}
.tarifa:nth-child(3) dt{font-weight:900}
.tarifa dd{margin:0}
.precio{white-space:nowrap;font:700 clamp(1.75rem,1.15rem + 3cqi,4.5rem)/1 var(--fuente-titulos);font-variant-numeric:tabular-nums;color:var(--naranja)}
.precio small{font:var(--peso-normal) var(--t-meta)/1 var(--fuente);color:var(--sobre-oscuro)}
.detalle{flex:0 0 100%;padding-right:max(0px,100% - 36rem);font-size:clamp(1.0625rem,1rem + .3cqi,1.25rem)}
.banda-nota{max-width:46rem;margin-top:var(--e5);font-size:var(--t-meta)}

/* Cierre: el cuarto verbo es la marca, así que va el logotipo del kit a todo el ancho, solo y con su área de respeto arriba y abajo (una x, 13,3 % de su ancho). La línea grande es la invitación, no la disculpa. El formulario es el de siempre (formulario.js intacto); sobre naranja cambia de piel: campo blanco con borde berenjena, botón berenjena, y nota, error y confirmación en berenjena porque ni la tinta suave ni el rojo de error alcanzan 4,5:1 */
.final{padding-block:clamp(4.5rem,13svh,9rem) clamp(2.5rem,7svh,4.5rem)}
.firma{margin-block:13.3cqi;scroll-margin-top:clamp(1.5rem,6svh,4rem)}
.firma img{display:block;width:100%;height:auto}
.final-caja{display:flex;flex-wrap:wrap;align-items:flex-start;gap:var(--e5) clamp(2rem,5cqi,6rem)}
.final h2{flex:1 1 9em;max-width:11ch;margin-top:0}
.final-aviso{flex:1 1 22rem;max-width:36rem}
.final-aviso>p{font:500 clamp(1.125rem,1.03rem + .42cqi,1.375rem)/1.4 var(--fuente)}
.final .lista{margin-top:var(--e5)}
.final .fila input{height:64px;padding:0 var(--e5);border:2px solid var(--tinta);border-radius:999px;background:#fff;box-shadow:none}
/* El error se marca por dentro: el rojo contra el naranja de fuera da 2,4:1, así que el borde sigue en berenjena y el anillo interior lleva el color (6,3:1 contra el blanco) */
.final .fila input[aria-invalid="true"]{padding:0 var(--e5);border-color:var(--tinta);box-shadow:inset 0 0 0 2px var(--error)}
.final .fila button{height:64px;border-radius:999px}
.final .fila button:not(:disabled){background:var(--tinta);color:var(--fondo)}
@media (hover:hover) and (pointer:fine){.final .fila button:hover:not(:disabled,:active){background:var(--tinta-alta)}}
.final .fila input:focus-visible,.final .fila button:focus-visible{border-radius:999px}
.final .nota,.final .listo-detalle{color:var(--tinta)}
.final .mensaje{font-weight:var(--peso-enfasis);color:var(--tinta)}
/* Pie: la línea legal y, aparte, la que dice que esta es una versión de archivo, con sus dos salidas (la portada actual y la otra opción) a 44 px de alto. Todo a 14 y en berenjena, lo único que se lee sobre naranja; desde que caben, las dos líneas van en una fila */
.pie-cartel{padding-bottom:var(--e7)}
.pie-fila{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--e4) var(--e6);padding-top:var(--e5);border-top:1px solid var(--raya)}
.pie-datos,.versiones{font:var(--peso-normal) var(--t-meta)/var(--lh-lectura) var(--fuente)}
.versiones{display:flex;flex-wrap:wrap;align-items:center;gap:0 var(--e5)}
.versiones a{display:inline-flex;align-items:center;min-height:44px}

/* Movimiento del cartel. Entrada (una vez): los dos verbos llegan desde sus lados, sin fundido (con opacidad 0 de partida el navegador dejaba de contarlos en la primera pintura y el LCP se iba a 200 ms o más), sus mitades calzan y, medio segundo después, calza la píldora. Turnos (tres vueltas y reposo en 900): primero «soy» y después «eres» adelgazan hasta 400 y vuelven, como quien conversa; parten sin retraso porque con retraso el navegador contaba ese arranque como la pintura más grande de la página, y son finitos porque animar el peso recalcula la composición en cada cuadro. Con scroll: al irse la primera pantalla los verbos se separan y se vuelven a partir; la página cambia de piel entre naranja y crema en vez de cortar en bandas; en cada capítulo el verbo calza al entrar y engorda de 400 a 900 mientras se lee; frase y pieza asoman; las respuestas se llenan; las mitades del retrato se juntan; el nombre de cada plan engorda hasta su peso. Con el puntero: el verbo se parte y adelgaza. Solo transform, opacidad, clip-path, color de fondo y peso dentro de cajas fijas: nada empuja nada */
@keyframes llegar-izq{from{translate:-7cqi 0}}
@keyframes llegar-der{from{translate:7cqi 0}}
@keyframes calzar-a{from{translate:0 -.17em}}
@keyframes calzar-b{from{translate:0 .17em}}
@keyframes encajar-a{from{translate:0 -.5em}}
@keyframes encajar-b{from{translate:0 .5em}}
@keyframes turno-a{20%{font-weight:900;letter-spacing:-.02em;text-indent:0}38%{font-weight:400;letter-spacing:var(--ls);text-indent:-.019em}56%{font-weight:900;letter-spacing:-.02em;text-indent:0}}
@keyframes turno-b{56%{font-weight:900;letter-spacing:-.02em;text-indent:0}74%{font-weight:400;letter-spacing:var(--ls);text-indent:-.019em}92%{font-weight:900;letter-spacing:-.02em;text-indent:0}}
@keyframes irse-izq{to{transform:translateX(-9cqi)}}
@keyframes irse-der{to{transform:translateX(9cqi)}}
@keyframes partir-a{to{transform:translateY(-.2em)}}
@keyframes partir-b{to{transform:translateY(.2em)}}
@keyframes engordar{from{font-weight:400}}
@keyframes asomar{from{opacity:.15;translate:0 1.5rem}}
@keyframes posarse{from{opacity:.2;translate:0 3rem;rotate:-2deg}}
@keyframes llenar{from{clip-path:inset(0 100% 0 0 round 1.7em)}to{clip-path:inset(0 0 0 0 round 1.7em)}}
@keyframes juntar-a{from{translate:-18% 0}}
@keyframes juntar-b{from{translate:18% 0}}
@keyframes piel{entry 0%{background-color:var(--naranja)}entry 55%{background-color:var(--fondo)}exit 45%{background-color:var(--fondo)}exit 100%{background-color:var(--naranja)}}
@keyframes piel-entra{entry 0%{background-color:var(--naranja)}entry 55%{background-color:var(--fondo)}}
@media (prefers-reduced-motion:no-preference){
  .cartel .verso.soy{animation:llegar-izq .9s var(--salida) both}
  .cartel .verso.eres{animation:llegar-der .9s var(--salida) 80ms both}
  .mitades span:first-child{animation:encajar-a .9s var(--salida) .5s both}
  .mitades span:last-child{animation:encajar-b .9s var(--salida) .5s both}
  /* La entrada corre también cuando se llega por transición entre páginas (en la tesis se saltaba, para no repetirla al volver a la portada): a esta versión se entra desde el pie de la portada actual, justo para verla moverse */
  .cartel .soy .corte{animation:turno-a 8s var(--vaiven) 3}
  .cartel .eres .corte{animation:turno-b 8s var(--vaiven) 3}
  .cartel .corte::before{animation:calzar-a 1.1s var(--salida) .15s both}
  .cartel .corte::after{animation:calzar-b 1.1s var(--salida) .15s both}
  /* Algo responde a quien mira: bajo el puntero el verbo se parte y adelgaza. Solo con puntero fino; en pantalla táctil el gesto es el scroll */
  .corte{transition:font-weight var(--dur-3) var(--salida)}
  .corte::before,.corte::after{transition:translate var(--dur-3) var(--salida)}
  @media (hover:hover) and (pointer:fine){
    .corte:hover{font-weight:500}
    .corte:hover::before{translate:0 -.045em}
    .corte:hover::after{translate:0 .045em}
  }
  /* Sin animation-timeline (Firefox hoy) queda todo lo de arriba y la página compuesta en su estado final */
  @supports (animation-timeline:view()){
    .cartel .soy .corte{animation:turno-a 8s var(--vaiven) 3,irse-izq linear both;animation-timeline:auto,scroll(root);animation-range:normal,0px 85svh}
    .cartel .eres .corte{animation:turno-b 8s var(--vaiven) 3,irse-der linear both;animation-timeline:auto,scroll(root);animation-range:normal,0px 85svh}
    .cartel .corte::before{animation:calzar-a 1.1s var(--salida) .15s both,partir-a linear both;animation-timeline:auto,scroll(root);animation-range:normal,0px 85svh}
    .cartel .corte::after{animation:calzar-b 1.1s var(--salida) .15s both,partir-b linear both;animation-timeline:auto,scroll(root);animation-range:normal,0px 85svh}
    /* La piel: el capítulo crema nace naranja y vuelve a naranja al irse; el último solo entra, porque después viene la banda berenjena con corte seco. La berenjena del texto da 6,4:1 o más en toda la mezcla */
    .capitulo.crema{animation:piel linear both;animation-timeline:--cap}
    .capitulo.crema:has(+.banda){animation-name:piel-entra}
    .verbo .corte{animation:engordar linear both;animation-timeline:--cap;animation-range:cover 12% cover 60%}
    .verbo .corte::before{animation:calzar-a linear both;animation-timeline:--verbo;animation-range:entry 0% cover 42%}
    .verbo .corte::after{animation:calzar-b linear both;animation-timeline:--verbo;animation-range:entry 0% cover 42%}
    .dicho h2,.apoyo{animation:asomar linear both;animation-timeline:view();animation-range:entry 0% entry 100%}
    .pieza{animation:posarse linear both;animation-timeline:view();animation-range:entry 0% entry 55%}
    .elegidas dd{animation:llenar linear both;animation-timeline:view();animation-range:entry 100% cover 20%}
    .mitad.a{animation:juntar-a linear both;animation-timeline:--disco;animation-range:entry 0% cover 48%}
    .mitad.b{animation:juntar-b linear both;animation-timeline:--disco;animation-range:entry 0% cover 48%}
    .tarifa dt{animation:engordar linear both;animation-timeline:view();animation-range:entry 0% cover 38%}
  }
}