/* seremos · estilos. Marca del kit «Media naranja»: crema de fondo, berenjena en el texto, durazno en las láminas y naranja solo en el botón; Gabarito Bold declara y DM Sans lee. Orden: fuentes, tokens, base, componentes, utilidades */

/* ===== 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: los cinco del kit (naranja, mandarina, berenjena, crema, durazno) y sus derivados para texto suave, gris y filetes; el gris da 4,5 o más sobre crema y hoja; sobre durazno, solo berenjena o berenjena suave; el error es el único color de sistema */
  --tinta:#2A1730; --tinta-suave:#4A3550; --gris:#6F5E75; --naranja:#FF7A1A; --mandarina:#F2541B;
  --linea:#F3E3D3; --fondo:#FFF6EC; --papel:#FFFDFA;
  --acento:#2A1730; --acento-texto:#2A1730; --acento-claro:#FFE3CC;
  --error:#A3401F; --error-sobre-oscuro:#FFB08A; --sobre-oscuro:#FFE3CC;
  /* tres alturas del papel: mesa (crema), hoja (1,11 sobre mesa) y hundida (1,16 bajo mesa), con su filete (1,26) */
  --mesa:#FFF6EC; --hoja:#FFFDFA; --hundida:#FFE3CC; --linea-hundida:#F2C7A6; --tinta-alta:#3A2242;
  /* una luz fija arriba a la izquierda: sombras en tinta con alfa de .16 o menos, nunca animadas */
  --sombra-1:0 1px 1px rgb(42 23 48/.10),1px 2px 4px rgb(42 23 48/.06);
  --sombra-2:0 1px 1px rgb(42 23 48/.08),2px 6px 12px rgb(42 23 48/.07),6px 24px 48px -12px rgb(42 23 48/.16);
  --sombra-hundida:inset 0 1px 2px rgb(42 23 48/.12);
  --sombra-escena:inset 0 1px 2px rgb(42 23 48/.12),inset 0 8px 8px -8px rgb(42 23 48/.16);
  /* el único degradado: la luz de la banda en tinta */
  --luz-banda:radial-gradient(120% 70% at 0 0,var(--tinta-alta) 0,var(--tinta) 45%);
  --color-fondo:var(--mesa); --color-texto:var(--tinta); --color-texto-suave:var(--tinta-suave);
  --color-acento:var(--acento-texto); --color-linea:var(--linea); --color-foco:var(--tinta);

  /* tipografía: Gabarito Bold en títulos, DM Sans en todo lo demás (400 y 600), sin cursiva; el rótulo se distingue por tamaño (14). Tres interlíneas */
  --fuente:"DM Sans",Arial,system-ui,sans-serif;
  --fuente-texto:var(--fuente); --fuente-titulos:"Gabarito",Arial,system-ui,sans-serif; --fuente-rotulo:var(--fuente);
  /* cinco tamaños fijos, el cuerpo de 17 como el más usado; 14 solo en rótulos, pies y controles; el titular es el único fluido */
  --t-menor:.75rem;    /* 12: solo en las filas de la lista en teléfono */
  --t-meta:.875rem;    /* 14: rótulos, pies, teclas, tabla, aviso */
  --t-cuerpo:1.0625rem;/* 17: todo texto de lectura */
  --t-1:var(--t-cuerpo);                               /* 17: cuenta, campo y botón */
  --t-2:1.25rem;                                       /* 20: pregunta, nombre de la ficha, bajada */
  --t-3:var(--t-2);
  --t-4:1.875rem;                                      /* 30: título de bloque */
  --t-5:1.625rem;                                      /* 26: sin uso; el nombre se conserva por C3 */
  --t-6:clamp(2.125rem,1.09rem + 4.44vw,4.25rem);      /* 34 a 68 (desde 1150 px): el titular de la portada */
  --lh-lectura:1.5; --lh-titular:1.25; --lh-declara:1.1; --lh-control:1;
  --peso-normal:400; --peso-enfasis:600;

  /* espaciado: base 4, sin cambio de valores */
  --e1:4px; --e2:8px; --e3:12px; --e4:16px; --e5:24px;
  --e6:32px; --e7:48px; --e8:64px; --e9:96px;
  --ancho-lectura:31rem;   /* 496 px: la caja de texto. Líneas llenas medidas: mediana 62, máximo 69 */
  --margen:var(--e4);      /* margen de página: 16 en teléfono, 24 desde 600 */
  --medianil:var(--e7);    /* entre la columna del margen y la caja de texto */
  --aire-seccion:var(--e7); --aire-banda:var(--e8); --aire-pausa:var(--e9);

  /* forma: 6 px en controles, campos y retratos; 12 en objetos (ficha, hojas, aviso); 0 en escenas a sangre */
  --r1:6px; --r2:12px; --rp:999px;
  --filete:1px solid var(--gris);        /* de asiento: estructura la hoja y el campo */
  --filete-item:1px solid var(--linea);  /* de ítem sobre hoja: ficha y panel */
  --filete-mesa:1px solid #EBD6C2;       /* de ítem sobre mesa: listas y escenas */

  /* movimiento: dos curvas, aparecer y asentarse; 80 ms solo la pulsación; 720 en pausas (480 × 1,5) */
  --dur-0:80ms; --dur-1:120ms; --dur-2:200ms; --dur-3:320ms; --dur-4:480ms;
  --ease:cubic-bezier(.2,0,.2,1); --ease-asentar:cubic-bezier(.16,1,.3,1);

  color-scheme:light;
}
@media (min-width:600px){:root{--margen:var(--e5);--aire-seccion:var(--e8);--aire-banda:var(--e9);--aire-pausa:calc(var(--e9) + var(--e8))}}

/* ===== 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 la mesa. Texto de 16 a 17, tinta suave (8,56:1). Cifras proporcionales; tabulares en numeración y tablas */
body{margin:0;background:var(--mesa);color:var(--tinta-suave);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,h3{font-family:var(--fuente-titulos);font-weight:700;line-height:var(--lh-titular);color:var(--tinta);margin:0;text-wrap:balance}
h1{font-size:var(--t-6);line-height:var(--lh-declara);letter-spacing:-.015em}
h2{font-size:var(--t-4);letter-spacing:-.01em}
h3{font-size:var(--t-2)}
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 ===== */

/* La hoja: contenedor de 1040 px con margen de 16 (24 desde 600). */
.contenedor{max-width:1040px;margin-inline:auto;padding-inline:var(--margen)}

/* La pauta: en teléfono, una columna de hasta 31 rem. Desde 900 px, columna del margen (títulos) y caja de 31 rem con 48 px de medianil. Flex con salto: al 200 % la caja baja sola */
.pauta>h1,.pauta>h2{max-width:var(--ancho-lectura);margin-bottom:var(--e5)}
.caja{max-width:var(--ancho-lectura);min-width:0}
.caja>:first-child{margin-top:0}
.caja>:last-child{margin-bottom:0}
@media (min-width:900px){
  .pauta{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--e5) var(--medianil)}
  .pauta>h1,.pauta>h2,.pauta>.al-margen{flex:1 1 12rem;max-width:none;min-width:0;margin-bottom:0}
  .pauta>.caja{flex:0 1 var(--ancho-lectura);margin-left:auto}
}

/* El asiento: formato único de sección; el aire es solo relleno; sin filetes entre secciones. El filete de asiento (gris, 5,36:1) va bajo la cabecera interior y sobre el pie */
.asiento>.contenedor{padding-block:var(--aire-seccion)}
.pie>.contenedor,.cabecera{position:relative}
.pie>.contenedor::before,.cabecera::after{content:"";position:absolute;left:var(--margen);right:var(--margen);border-top:var(--filete)}
.pie>.contenedor::before{top:0}
.cabecera::after{bottom:0}
.pie-seccion{margin-top:var(--e5);font:var(--peso-normal) var(--t-cuerpo)/var(--lh-lectura) var(--fuente);color:var(--tinta-suave)}

/* Marca: versión media en cabecera interior y firma del pie, a 38 px de alto (x de 24,3). El viewBox trae el área de respeto (una x por lado): el margen negativo la descuenta (86,6 − 2 × 24,3 = 38) y la aportan los 24 px de relleno más los 3 del área táctil de 44 */
.marca{display:inline-flex;vertical-align:top;align-items:center;min-height:44px;overflow:clip;text-decoration:none}
.marca img{display:block;height:30px;width:auto}

/* Selector de idioma: solo el código. Únicas mayúsculas del sistema, a 0,04 em. En la portada en teléfono va pegado al borde, fuera del respeto de la marca */
.idioma{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:0 var(--e2);font:var(--peso-enfasis) var(--t-meta)/var(--lh-control) var(--fuente);letter-spacing:.04em;color:var(--gris);text-decoration:none;touch-action:manipulation;transition:color var(--dur-1) var(--ease)}
@media (hover:hover) and (pointer:fine){.idioma:hover{color:var(--tinta)}}

/* Cabecera interior: marca, descriptor y código de idioma sobre un filete de asiento. Separaciones de 32 y 24 (respeto de la marca); vertical-align:top porque una imagen no tiene línea de base; el clip deja el área de respeto del SVG fuera de la caja */
.cabecera{display:flex;flex-wrap:wrap;align-items:center;column-gap:var(--e6);row-gap:var(--e5);padding-block:var(--e5)}
.descriptor{font:var(--peso-normal) var(--t-meta)/var(--lh-lectura) var(--fuente);color:var(--gris)}
.idioma-cabecera{order:1;margin-left:auto;margin-right:calc(-1 * var(--e2))}
.cabecera .descriptor{order:2;flex-basis:100%}
@media (min-width:600px){
  .idioma-cabecera{order:0}
  .cabecera .descriptor{order:0;flex-basis:auto}
}

/* Portada: la marca va en la barra a 38 px (como en las interiores) con el lema al lado; el h1 es la frase de valor */
main{overflow-x:clip}
@supports not (overflow-x:clip){main{overflow-x:hidden}}
.bajada{font-size:var(--t-3);color:var(--tinta);text-wrap:balance}
/* Barra de la portada: logotipo y código de idioma */
.barra{padding-block:var(--e3);row-gap:var(--e2)}
.portada{padding-block:var(--e6) var(--e7)}
.titular{margin-top:var(--e4);font-size:var(--t-6);max-width:14ch}
.titular+.bajada{margin-top:var(--e4);max-width:28rem}
.portada .avisame{margin-top:var(--e5);font-size:var(--t-meta)}

/* Rótulo de bloque: en berenjena suave, 14 con .12 em; cada bloque numerado lleva un filete de mesa arriba y 32 px de aire entre uno y otro */
.rotulo{margin:0 0 var(--e5);font:var(--peso-enfasis) var(--t-meta)/1 var(--fuente);color:var(--tinta-suave);letter-spacing:.12em}
.asiento{margin-top:var(--e6)}
.asiento>.contenedor{position:relative}
.asiento>.contenedor::before{content:"";position:absolute;top:0;left:var(--margen);right:var(--margen);border-top:var(--filete-mesa)}
.pauta>.rotulo{flex:0 0 100%}

@media (min-width:600px){
  .portada{padding-block:var(--e7) var(--e8)}
  .asiento{margin-top:var(--e7)}
}

.avisame{margin-top:var(--e3)}
.avisame a{color:var(--tinta);text-underline-offset:3px;text-decoration-thickness:1px}

.contenedor.ancho{max-width:1360px}

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

/* Figuras de documento: van en la caja de texto, a 32 px del texto */
.caja>figure{margin:var(--e6) 0 0}
figcaption{margin-top:var(--e3);font:var(--peso-normal) var(--t-cuerpo)/var(--lh-lectura) var(--fuente);color:var(--tinta-suave)}

.ficha{max-width:26rem;border:var(--filete-item);border-radius:var(--r2);background:var(--hoja);box-shadow:var(--sombra-2)}

@media (min-width:900px){
  .ficha{max-width:none}
}

/* Pozos: escenas de papel hundido a sangre, sin radio; hasta 899 px de borde a borde de la ventana, desde 900 del ancho de la caja. Sobre hundida, tinta o tinta suave */
.pozo{position:relative;margin-inline:calc(-1 * var(--margen));background:var(--hundida);border-block:1px solid var(--linea-hundida);box-shadow:var(--sombra-escena)}
@media (min-width:600px){.pozo{margin-right:calc(100% + var(--margen) - 100vw)}}
@media (min-width:900px){.pozo{margin-inline:0}}

/* 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,.aviso-cookies button:active{transform:translateY(1px) scale(.98);transition-duration:var(--dur-0)}
.fila button:active::after,.aviso-cookies 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}

/* Pie: la firma. Línea legal, descriptor y, al final, la marca (media, 38 px) a 24 del descriptor; relleno de 48. Desde 900 px la línea legal va al margen */
.pie>.contenedor{padding-block:var(--e7)}
.pie-datos{font:var(--peso-normal) var(--t-meta)/var(--lh-lectura) var(--fuente);color:var(--tinta-suave)}
.pie-firma{margin-top:var(--e6)}
.pie-firma .pie-datos{color:var(--gris)}
.pie-firma .marca{margin-top:var(--e5)}
@media (min-width:900px){
  .pie>.contenedor{padding-block:var(--e8) var(--e9)}
  .pie-firma{margin-top:0}
}
/* Enlaces en texto corto o legal: 44 px táctiles sin cambiar el alto de línea */
.nota a,.pie-datos a,.legal .caja 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 */
/* Enlace de acción solo en su línea: voz de rótulo, 44 px táctiles */
.accion{font:var(--peso-normal) var(--t-meta)/var(--lh-lectura) var(--fuente)}
.accion a{display:inline-flex;align-items:center;min-height:44px}

/* Páginas simples y legal: mismo asiento; su h1 va en la escala de título de sección (28 a 44). El cuerpo ocupa una pantalla: marca y firma no se ven a la vez */
.simple h1,.legal h1{font-size:var(--t-4);line-height:var(--lh-titular)}
.simple{min-height:100vh;min-height:100svh}
.simple .bajada+p{margin-top:var(--e4)}
.legal .vigencia{font:var(--peso-normal) var(--t-meta)/var(--lh-lectura) var(--fuente);color:var(--tinta-suave);margin-bottom:var(--e5)}
.legal .contenedor{container-type:inline-size}
.legal h2{font-size:var(--t-2)}
.legal .pauta>h2{margin-bottom:var(--e4)}
.legal h3{font-size:var(--t-1);line-height:var(--lh-lectura);margin:var(--e6) 0 var(--e2)}
.legal ul{margin:var(--e4) 0 0;padding-left:1.2em}
.legal ul+p,.legal .tabla+p{margin-top:var(--e4)}
.legal li+li{margin-top:var(--e2)}
.legal li::marker{color:var(--gris)}
/* La lista del responsable: filas de rótulo y dato con filete de mesa */
.legal dl{margin:0}
.legal dl>div,.legal dt,.legal dd{margin:0}
.legal dt{padding-top:var(--e3);border-top:var(--filete-mesa);font:var(--peso-normal) var(--t-meta)/var(--lh-lectura) var(--fuente);color:var(--gris)}
.legal dt:first-child{padding-top:0;border-top:0}
.legal dd{padding-bottom:var(--e3)}
.legal dd:last-child{padding-bottom:0}
@media (min-width:600px){
  .legal dl{display:grid;grid-template-columns:8rem minmax(0,1fr)}
  .legal dt{padding-right:var(--e4)}
  .legal dt,.legal dd{padding-block:var(--e3);border-top:var(--filete-mesa)}
  .legal dt:first-child,.legal dt:first-child+dd{padding-top:0;border-top:0}
  .legal dt:nth-last-child(2),.legal dd:last-child{padding-bottom:0}
  .legal dt{padding-top:calc(var(--e3) + 3px)}
  .legal dt:first-child{padding-top:3px}
}
/* Tablas en voz de rótulo, tabulares: fichas apiladas en teléfono; desde 600 px, a lo ancho del contenedor */
.tabla{margin-top:var(--e6);overflow-x:auto}
.legal .tabla+p{margin-top:var(--e6)}
.legal table{display:block;border-collapse:collapse;width:100%;font:var(--peso-normal) var(--t-meta)/var(--lh-lectura) var(--fuente);font-variant-numeric:tabular-nums}
.legal thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.legal tbody,.legal tr,.legal td{display:block}
.legal tr{padding-block:var(--e3);border-bottom:var(--filete-mesa)}
.legal tr:first-child{border-top:var(--filete)}
.legal th,.legal td{text-align:left;vertical-align:top;padding:2px 0;font-weight:var(--peso-normal)}
.legal td::before{content:attr(data-label);display:block;color:var(--gris)}
@media (min-width:600px){
  .legal .tabla{width:100cqw}
  .legal table{display:table}
  .legal thead{position:static;display:table-header-group;width:auto;height:auto;overflow:visible;clip-path:none}
  .legal tbody{display:table-row-group}
  .legal tr{display:table-row;padding:0;border:0}
  .legal tr:first-child{border-top:0}
  .legal th,.legal td{display:table-cell;padding:var(--e3) var(--e4) var(--e3) 0;border-bottom:var(--filete-mesa)}
  .legal thead th{color:var(--tinta);font-weight:var(--peso-enfasis);border-bottom:var(--filete)}
  .legal td::before{content:none}
}
@media (min-width:900px){
  .legal .tabla{margin-left:calc(100% - 100cqw)}
}

/* Transición entre páginas: 200 ms y logotipo compartido 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}
.idioma{view-transition-name:idioma}
::view-transition-group(marca),::view-transition-group(idioma){animation-duration:var(--dur-3);animation-timing-function:var(--ease)}

/* Entradas: la tinta aparece por opacidad. Portada en el orden del teléfono: marca 0, bajada del lockup 110, rótulo y ficha 220 (la ficha se posa en 480),
   bajada 250, párrafo 285 y formulario 320 en 480: cierra a los 800 ms */
@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}}
/* Las figuras se posan: opacidad y 12 px, una vez, en 480 ms, con la curva de asentarse */
@keyframes posar{from{opacity:0;transform:translateY(var(--caida,12px))}to{opacity:1;transform:none}}
.entrada{animation:entrar var(--dur-entrada,var(--dur-3)) var(--ease) var(--retraso,0ms) both}
.entrada.posar{animation-name:posar;animation-timing-function:var(--ease-asentar)}

/* Revelado: interacciones.js pone .en-espera al texto de cada asiento y lo suelta una vez: secciones 480 ms, pausas 720. Todo bajo html.js: sin JavaScript nada queda oculto */
html.js .revelar{--dur-entrada:var(--dur-4)}
/* Las láminas de las escenas (.objeto) se posan en vez de aparecer */
html.js .revelar.objeto{--caida:12px;animation-name:posar;animation-timing-function:var(--ease-asentar)}
html.js .revelar:has(>.objeto){--caida:12px;animation-name:posar;animation-timing-function:var(--ease-asentar)}
html.js .revelar.lento{--dur-entrada:calc(var(--dur-4) * 1.5)}
html.js .en-espera{animation-play-state:paused}
@media print{.entrada{animation:none!important}}

/* Movimiento reducido: 1 ms, sin retrasos ni desplazamientos */
@media (prefers-reduced-motion:reduce){
  ::view-transition-group(marca),::view-transition-group(idioma){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}
  .en-espera{animation-play-state:running!important}
  .entrada.posar,html.js .revelar.objeto,html.js .revelar:has(>.objeto){animation-name:entrar}
  .fila button:active,.aviso-cookies button:active,.fila button:hover{transform:none!important}
}

/* Aviso de cookies (texto y botones de la R5, consentimiento.js intacto; aquí solo su forma): hoja levantada de radio 12 con --sombra-2, botones de radio 6, voz de rótulo, por opacidad. En teléfono: márgenes de 8, relleno de 8 y 12, texto a todo el ancho a interlínea 1,25 y los dos botones lado a lado */
.aviso-cookies[hidden]{display:none}
.aviso-cookies{position:fixed;left:var(--e2);right:var(--e2);bottom:calc(var(--e2) + env(safe-area-inset-bottom));z-index:30;max-width:640px;margin:0 auto;padding:var(--e2) var(--e3);background:var(--hoja);color:var(--tinta-suave);border:var(--filete-item);border-radius:var(--r2);box-shadow:var(--sombra-2);font:var(--peso-normal) var(--t-meta)/var(--lh-titular) var(--fuente);opacity:0;transition:opacity var(--dur-3) var(--ease)}
.aviso-cookies.visible{opacity:1}
.aviso-cookies p{margin:0 0 var(--e2)}
.aviso-cookies a{color:var(--tinta);text-decoration:underline;text-underline-offset:3px}
.aviso-cookies-acciones{display:flex;gap:var(--e2)}
.aviso-cookies button{position:relative;flex:1 1 0;min-width:0;min-height:44px;padding:0 var(--e2);border:1px solid var(--tinta);border-radius:var(--r1);background:var(--hoja);color:var(--tinta);font:var(--peso-enfasis) var(--t-meta)/var(--lh-control) var(--fuente);cursor:pointer;touch-action:manipulation;transition:background-color var(--dur-1) var(--ease),color var(--dur-1) var(--ease),transform var(--dur-2) var(--ease-asentar)}
.aviso-cookies button:focus-visible,.aviso-cookies a:focus-visible{outline:2px solid var(--color-foco);outline-offset:2px}
@media (hover:hover) and (pointer:fine){.aviso-cookies button:hover{background:var(--tinta);color:var(--papel)}}
/* Desde 600 px vuelve a su forma: relleno de 16 y 24, interlínea 1,5, texto hasta 56ch */
@media (min-width:600px){
  .aviso-cookies{left:var(--e4);right:var(--e4);bottom:var(--e4);padding:var(--e4) var(--e5);line-height:var(--lh-lectura)}
  .aviso-cookies p{margin-bottom:var(--e3);max-width:56ch}
  .aviso-cookies-acciones{flex-wrap:wrap;gap:var(--e3)}
  .aviso-cookies button{flex:0 0 auto;padding:0 var(--e5)}
}
/* Desde 900 px va al pie de la columna de texto, del ancho de la caja de lectura */
@media (min-width:900px){.aviso-cookies{left:max(var(--e5),calc(50% - 496px));right:auto;width:var(--ancho-lectura);max-width:calc(100% - 2 * var(--e5));margin:0}}
@media (prefers-reduced-motion:reduce){.aviso-cookies{transition:opacity var(--dur-2) var(--ease)}}
@media print{.aviso-cookies{display:none}}

/* Historia: la portada presenta a Catalina (titular a la izquierda, retrato a la derecha) y cinco escenas cuentan su recorrido. Cada escena es texto corto y una lámina; desde 900 px van lado a lado y alternan. El numeral va en berenjena suave; el título de escena es fluido, de 30 a 44 */
.portada{display:grid;gap:var(--e6)}
.protagonista{margin:0;max-width:22rem}
.protagonista figcaption,.lamina figcaption{margin-top:var(--e3);font:var(--peso-normal) var(--t-meta)/var(--lh-lectura) var(--fuente);color:var(--tinta-suave)}
.escena{display:grid;gap:var(--e5);padding-block:var(--aire-seccion);position:relative}
.escena::before{content:"";position:absolute;top:0;left:var(--margen);right:var(--margen);border-top:var(--filete-mesa)}
.escena-texto{max-width:var(--ancho-lectura)}
.escena-num{font:var(--peso-enfasis) var(--t-meta)/1 var(--fuente);color:var(--tinta-suave);letter-spacing:.12em}
.escena h2{margin-top:var(--e4);font-size:clamp(1.875rem,1.45rem + 1.8vw,2.75rem);line-height:var(--lh-declara);text-wrap:balance}
.escena h2+p{margin-top:var(--e4);color:var(--tinta-suave)}
.lamina{margin:0;min-width:0}
.lamina .pozo{padding:var(--e5) var(--margen)}
.hoja{margin:0;max-width:26rem;padding:var(--e4);border:var(--filete-item);border-radius:var(--r2);background:var(--hoja);box-shadow:var(--sombra-2)}
/* Retratos: los escribe herramientas/armar-retratos.mjs dentro de cada .cara; 4:5, radio de control. Velada es la cara que todavía no se puede ver */
.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%}
.cara.velada svg{filter:blur(7px)}
.cara.grande{border-radius:var(--r2);box-shadow:var(--sombra-2)}
.cara.chica{flex:none;width:36px}
.respuestas{display:grid;gap:var(--e3)}
.respuestas dt{font:var(--peso-normal) var(--t-meta)/var(--lh-titular) var(--fuente);color:var(--gris)}
.respuestas dd{margin:0;font-weight:var(--peso-enfasis);color:var(--tinta)}
.caras{display:grid;grid-template-columns:repeat(2,minmax(0,9rem));gap:var(--e4)}
.cara-par{margin:0}
.cara-par+.cara-par{margin-top:0}
.cara-rotulo{display:block;margin-top:var(--e2);font:var(--peso-normal) var(--t-meta)/var(--lh-titular) var(--fuente);color:var(--tinta-suave)}
.tramo-rotulo{font:var(--peso-normal) var(--t-meta)/var(--lh-titular) var(--fuente);color:var(--gris)}
.personas{margin:var(--e2) 0 0;padding:0;list-style:none}
.persona{display:grid;grid-template-columns:36px minmax(0,1fr);column-gap:var(--e3);align-items:center;padding:var(--e2) 0;border-top:var(--filete-item)}
.persona .cara{grid-row:1/span 2}
.persona-nombre,.persona-datos{margin:0;color:var(--tinta-suave)}
.persona-nombre+.persona-datos{margin-top:0}
.persona-datos{font:var(--peso-normal) var(--t-meta)/var(--lh-titular) var(--fuente)}
.carta-de{display:flex;align-items:center;gap:var(--e3);color:var(--tinta-suave)}
.carta-ancla{margin-top:var(--e3);padding:var(--e3);border-radius:var(--r1);background:var(--mesa);font-weight:var(--peso-enfasis);color:var(--tinta)}
.carta-ancla span,.globo-ancla{display:block;font:var(--peso-normal) var(--t-meta)/var(--lh-titular) var(--fuente);color:var(--gris)}
.carta-texto{margin-top:var(--e3);color:var(--tinta)}
.opciones{display:flex;flex-wrap:wrap;gap:var(--e2);margin-top:var(--e4);padding-top:var(--e3);border-top:var(--filete-item)}
.chip{padding:var(--e2) var(--e3);border:var(--filete);border-radius:var(--r1);font:var(--peso-normal) var(--t-meta)/var(--lh-titular) var(--fuente);color:var(--tinta-suave)}
.hilo{display:grid;gap:var(--e3);max-width:26rem;margin:0;padding:0;list-style:none}
.globo{justify-self:start;max-width:85%;padding:var(--e3) var(--e4);border:var(--filete-item);border-radius:var(--r2);background:var(--hoja);box-shadow:var(--sombra-1);color:var(--tinta)}
.globo.ella{justify-self:end;background:var(--tinta);border-color:var(--tinta);color:var(--papel)}
.globo.ella .globo-ancla{color:var(--sobre-oscuro)}
/* Lo que costó: los tres planes en una lista de definiciones, sin tabla ni tarjetas */
.planes{display:grid;gap:0;margin:var(--e5) 0 0}
.planes>div{display:grid;grid-template-columns:7rem minmax(0,1fr);column-gap:var(--e3);padding:var(--e3) 0;border-top:var(--filete-mesa)}
.planes dt{font-weight:var(--peso-enfasis);color:var(--tinta)}
.planes dd{margin:0;color:var(--tinta-suave)}
.planes dd strong{display:block;font-variant-numeric:tabular-nums}
.planes+.pie-seccion{margin-top:var(--e4)}
@media (min-width:600px){.lamina .pozo{margin-inline:0;padding:var(--e6);border:1px solid var(--linea-hundida);border-radius:var(--r2)}}
@media (min-width:900px){
  .portada{grid-template-columns:minmax(0,7fr) minmax(0,4fr);column-gap:var(--e8);align-items:end}
  .protagonista{justify-self:end;width:100%}
  .escena{grid-template-columns:minmax(0,5fr) minmax(0,6fr);column-gap:var(--e8);align-items:center}
  .escena:nth-of-type(odd) .escena-texto{order:2}
  .escena:nth-of-type(odd){grid-template-columns:minmax(0,6fr) minmax(0,5fr)}
  .lamina .pozo{display:grid;justify-items:center}
  .lamina .pozo>*{width:100%}
  .caras{justify-content:center}
}

/* ===== 4. Utilidades ===== */
/* Botón con aspecto de enlace, para «Preferencias de cookies» */
.enlace{background:none;border:0;padding:var(--e3) 0;margin:calc(-1 * var(--e3)) 0;font:inherit;color:var(--tinta);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;cursor:pointer;touch-action:manipulation;transition:text-decoration-thickness var(--dur-1) var(--ease)}
@media (hover:hover) and (pointer:fine){.enlace:hover{text-decoration-thickness:2px;animation:engrosar var(--dur-1) var(--ease)}}
.enlace:focus-visible{outline:2px solid var(--color-foco);outline-offset:2px;border-radius:var(--r1)}

/* Bajo 360 px el titular baja para que quepa sin partir palabras */
@media (max-width: 359px) { .titular { font-size: 1.75rem; } }