/* Generado por servidor-app/herramientas/generar-paginas.js. No editar a mano.
   La marca de siempre (herramientas/marca.css), Papel claro y Tinta oscuro
   según el teléfono. */

/* La marca de Tetraktia en las páginas de app.tetraktia.com: las cuatro
   tipografías (con sus woff2 en /fuentes/), los tokens que no dependen del
   tema, el tema Papel y el tema Tinta, que sigue al del teléfono. Es una copia
   propia, valor por valor, de la marca de siempre: el servidor de la app no lee
   nada de la web, y la marca no cambia. La lee
   servidor-app/herramientas/generar-paginas.js. */

/* Fraunces variable (opsz 9..144, wght 300..700), subconjunto latin */
@font-face {
  font-family: 'Fraunces';
  src: url('/fuentes/fraunces-latin.woff2') format('woff2');
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Fraunces variable, subconjunto latin-ext */
@font-face {
  font-family: 'Fraunces';
  src: url('/fuentes/fraunces-latinext.woff2') format('woff2');
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Public Sans variable (wght 300..700), subconjunto latin */
@font-face {
  font-family: 'Public Sans';
  src: url('/fuentes/publicsans-latin.woff2') format('woff2');
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Public Sans variable, subconjunto latin-ext */
@font-face {
  font-family: 'Public Sans';
  src: url('/fuentes/publicsans-latinext.woff2') format('woff2');
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Reservas con métrica ajustada: el intercambio por font-display: swap no salta */
@font-face {
  font-family: 'Fraunces Reserva';
  src: local('Georgia'), local('Times New Roman'), local('Noto Serif'), local('serif');
  size-adjust: 97%;
  ascent-override: 96%;
  descent-override: 24%;
  line-gap-override: 0%;
  font-display: swap;
}
@font-face {
  font-family: 'Public Sans Reserva';
  src: local('Helvetica Neue'), local('Arial'), local('Roboto'), local('sans-serif');
  size-adjust: 100%;
  ascent-override: 95%;
  descent-override: 24%;
  line-gap-override: 0%;
  font-display: swap;
}

/* ------------------------------------------------------------------ tokens que no dependen del tema */

:root {
  /* familias */
  --serif: 'Fraunces', 'Fraunces Reserva', Georgia, 'Times New Roman', serif;
  --sans: 'Public Sans', 'Public Sans Reserva', -apple-system, BlinkMacSystemFont,
    'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  /* escala tipográfica cerrada: base 16, sin decimales, sin valores fuera de esta lista */
  --t-micro: 11px;      --lh-micro: 16px;      --ls-micro: .10em;
  --t-mini: 12px;       --lh-mini: 18px;       --ls-mini: .02em;
  --t-pie: 13px;        --lh-pie: 20px;
  --t-cuerpo-s: 15px;   --lh-cuerpo-s: 25px;
  --t-cuerpo: 17px;     --lh-cuerpo: 29px;
  --t-guia: 19px;       --lh-guia: 31px;
  --t-h4: 20px;         --lh-h4: 26px;         --ls-h4: -.005em;
  --t-h3: 24px;         --lh-h3: 30px;         --ls-h3: -.01em;
  --t-h2: 32px;         --lh-h2: 38px;         --ls-h2: -.015em;
  --t-h1: 44px;         --lh-h1: 48px;         --ls-h1: -.02em;
  --t-h1-movil: 34px;   --lh-h1-movil: 38px;
  --t-display: 72px;    --lh-display: 72px;    --ls-display: -.03em;
  --t-cifra: 128px;     --lh-cifra: 112px;     --ls-cifra: -.04em;

  /* ------------------------------------------------------------ EL PLIEGO
     Un eje, dos bordes. En el informe hay exactamente dos anchos: el carril de
     texto y el carril de figura. Las figuras sangran hacia los dos lados una
     cantidad fija e idéntica, de modo que hay dos bordes izquierdos y no cinco.
     Antes convivían cinco medidas (--carril-prosa, --carril-medio,
     --carril-ancho, --lienzo-lectura, --medida-prosa, --medida-tarjeta) y cada
     bloque elegía la suya: eso es lo que se leía como desorden.

     Segunda ley: sólo un hijo directo de .hoja elige carril. Lo que vive dentro
     de una caja mide el 100 por ciento de esa caja. El carril se pide con
     grid-column, y grid-column no significa nada fuera de la retícula de su
     propio padre: por construcción, nada anidado puede reclamar el carril ancho
     ni salirse de su tarjeta. No hacen falta negadores ni listas de excepción.

     Tercera ley: la forma la decide el contenedor (minmax y auto-fit), la
     postura la decide el dispositivo (un único punto de corte de ventana). */
  --lectura: 760px;              /* carril de texto: unos 77 caracteres a 17px */
  --sangria: var(--e-36);        /* 144: lo que sangra la figura a cada lado */
  --figura: 1048px;              /* = 760 + 144*2. Calculado, no elegido. */
  --margen: var(--e-6);          /* aire lateral del pliego; sube a --e-12 desde 1280 */

  /* Las tres recetas de rejilla del informe. auto-fit siempre, auto-fill nunca:
     auto-fill reserva pistas fantasma y con una sola tarjeta dejaba 800px de
     vacío a su derecha. El min() contra el 100 por ciento es lo que garantiza
     que ninguna rejilla desborde su caja por estrecha que sea la pantalla. */
  --rejilla-ficha: repeat(auto-fit, minmax(min(20rem, 100%), 1fr));   /* tarjeta que se lee */
  --rejilla-dato:  repeat(auto-fit, minmax(min(8.5rem, 100%), 1fr));  /* dato suelto */
  --rejilla-par:   repeat(auto-fit, minmax(min(25rem, 100%), 1fr));   /* figura + lectura */

  /* Alto de lo que queda pegado arriba: cabecera (--e-16) más la barra de
     sección del informe, de 48 (antes 69: el botón compacto con 12 de relleno
     arriba y abajo). Se usa a la vez en top: y en el scroll-padding-top del
     html para que no puedan discrepar. Mientras se baja por el mapa la
     cabecera se aparta y queda solo la barra (componentes.css, «informe en
     dos capas»). */
  --alto-barra: var(--e-12);
  --alto-fijo: calc(env(safe-area-inset-top, 0px) + var(--e-16) + var(--alto-barra));

  /* La cuadrícula 3x3, el objeto central del producto, tiene UNA geometría:
     tres pistas iguales, separación --e-2 y proporción cuadrada. 400 = 3
     casillas de 128 más 2 separaciones de 8. */
  --cuadricula-max: 400px;

  /* Sangrado de las tiras deslizables: cero por defecto, de modo que una tira
     dentro de una tarjeta jamás rompe el borde de su tarjeta. Sólo el pliego
     se lo concede a sus hijos directos. */
  --sangrado: 0px;

  /* Fuera del informe: la portada, la cabecera, el listado de personas y las
     25 guías publicadas siguen usando el lienzo ancho y la medida de prosa. */
  --lienzo: 1180px;
  --carril-prosa: 68ch;

  /* espaciado tetráctico, base 4 */
  --e-1: 4px;
  --e-2: 8px;
  --e-3: 12px;
  --e-4: 16px;
  --e-6: 24px;
  --e-8: 32px;
  --e-12: 48px;
  --e-16: 64px;
  --e-24: 96px;
  --e-36: 144px;

  /* alturas de control: una sola cifra para botón, campo, pestaña y select.
     --toque-min es el área mínima de dedo; --alto-control es el alto visual.
     Todo control interactivo usa min-height: var(--alto-control), de modo que
     tenga o no borde el resultado sea idéntico (antes: 52px sin borde, 54px con). */
  --toque-min: 44px;
  --alto-control: 52px;
  --alto-control-compacto: 44px;   /* cabecera y barras densas */

  /* radios: pequeños, para que se lea impreso y no aplicación */
  --r-0: 0;
  --r-1: 3px;
  --r-2: 6px;
  --r-3: 10px;
  --r-4: 16px;
  --r-circulo: 999px;
  --radio: var(--r-3);

  /* movimiento: nada rebota, todo se revela */
  --dur-1: 120ms;
  --dur-2: 220ms;
  --dur-3: 420ms;
  --dur-4: 900ms;
  --ease-revelar: cubic-bezier(.2, .7, .3, 1);
  --ease-salir: cubic-bezier(.4, 0, 1, 1);
  --ease-lineal: linear;
}

/* ------------------------------------------------------------------ tema Papel (predeterminado) */

:root,
:root[data-tema="papel"] {
  color-scheme: light;

  /* superficies */
  --sup-0: #FAF7F0;
  --sup-1: #F2ECE0;
  --sup-2: #E7DECB;
  --sup-3: #FFFFFF;

  /* líneas */
  --linea-sutil: #E2D8C4;
  --linea: #D3C6AC;
  --linea-fuerte: #8F7F5C;

  /* tintas
     La tinta baja se oscureció de #666E96 a #565D7E: sobre la superficie 2
     (#E7DECB, la más oscura del tema Papel) el valor anterior daba 3.71:1 y no
     llegaba al 4.5:1 que pide el texto normal. Ahora da 4.81:1 y pasa en las
     cuatro superficies del tema. */
  --tinta-alta: #141A3C;
  --tinta-media: #3D456E;
  --tinta-baja: #565D7E;

  /* primario de acción y acentos */
  --lapis-700: #1D2E75;
  --lapis-contra: #FAF7F0;
  --oro-700: #8A6220;
  --oro-500: #C99A3F;
  --oro-400: #E0B860;
  --oro-200: #F1DDAE;
  --turq-700: #106C7A;
  --turq-500: #2A9FB0;
  --turq-400: #45C2CE;
  --turq-300: #7FD9E2;

  /* semánticos */
  --don: #1F7A52;
  --aprendizaje: #A34A28;
  --intenso: #8A6220;
  --extension: #5B45B8;
  --decidir: var(--lapis-700);        /* azul de marca: criterio, decision */
  --peligro: #B3261E;

  /* papeles de texto y superficie */
  --oro-texto: var(--oro-700);
  --turq-texto: var(--turq-700);
  --titulo: var(--tinta-alta);
  --oro-fondo: var(--oro-700);
  --oro-contra: #FAF7F0;
  --grad-lapis-superficie: linear-gradient(102deg, #182A6B 0%, #22357F 34%, #2C4293 52%, #22357F 72%, #1D2E75 100%);
  --primario-fondo: var(--grad-lapis-superficie);
  --primario-tinta: #F6F2E8;
  --foco: var(--turq-700);
  --serie-a: var(--oro-700);
  --serie-b: var(--turq-700);
  --sup-alterna: var(--sup-1);
  --sup-celda: var(--sup-1);
  --sup-celda-vacia: var(--sup-0);

  /* alfas y bordes de color */
  --oro-a12: rgba(138, 98, 32, .10);
  --oro-a25: rgba(138, 98, 32, .20);
  --oro-borde: var(--oro-700);
  --turq-a10: rgba(16, 108, 122, .08);
  --turq-a25: rgba(16, 108, 122, .10);
  /* Los bordes que comunican estado van a color pleno: deben superar 3:1 */
  --turq-borde: var(--turq-700);
  --don-borde: var(--don);
  --aprendizaje-borde: var(--aprendizaje);
  --peligro-borde: var(--peligro);
  --extension-a12: rgba(91, 69, 184, .09);
  --extension-borde: var(--extension);
  --anillo-oro: inset 0 0 0 1px rgba(138, 98, 32, .30);
  --anillo-turq: inset 0 0 0 1px rgba(16, 108, 122, .30);

  /* velos */
  --velo-cabecera: rgba(250, 247, 240, .88);
  --velo-modal: rgba(20, 26, 60, .55);

  /* elevación: superficie y línea, casi nada de desenfoque */
  --elev-1: 0 1px 2px rgba(20, 26, 60, .06);
  --elev-2: 0 2px 8px rgba(20, 26, 60, .08), 0 16px 32px rgba(20, 26, 60, .06);
  --elev-3: 0 24px 64px rgba(20, 26, 60, .16);
  --elev-primario: 0 1px 2px rgba(20, 26, 60, .10);
  --elev-primario-hover: 0 2px 8px rgba(20, 26, 60, .16);
  --sombra: var(--elev-2);
  --halo-oro: 0 0 0 3px rgba(138, 98, 32, .22);
  --halo-turq: 0 0 0 3px rgba(16, 108, 122, .25);

  /* bordes */
  --b: 1px solid var(--linea);
  --b-control: 1px solid var(--linea-fuerte);

  /* gradientes firmados */
  --grad-ultramar: linear-gradient(168deg, #FFFFFF 0%, #FAF7F0 52%, #F2ECE0 100%);
  /* Pan de oro batido: dos versiones con el mismo dibujo y distinto oficio.
     La de filete va en los cantos decorativos (3px del botón, 2px del sello),
     donde no se apoya ningún texto y puede bajar hasta el oro más oscuro.
     La de superficie es la que lleva la palabra encima: su parada más oscura
     sube de #8A6220 a #B8862F para que el texto del botón primario pase de
     3.07:1 a 5.17:1 en el peor tramo. */
  --grad-pan-de-oro: linear-gradient(102deg, #8A6220 0%, #C99A3F 28%, #F1DDAE 52%, #C99A3F 74%, #A8792B 100%);
  --grad-pan-de-oro-superficie: linear-gradient(102deg, #B8862F 0%, #D2A54B 28%, #F1DDAE 52%, #D2A54B 74%, #C08A30 100%);
  --grad-aurora: linear-gradient(90deg, #45C2CE 0%, #7FD9E2 18%, #E0B860 72%, #C99A3F 100%);
  --grad-vitela: radial-gradient(1200px 700px at 50% -10%, #FFFDF8 0%, #FAF7F0 55%, #F2ECE0 100%);
  --grad-filete: linear-gradient(90deg, transparent, var(--oro-borde) 42%, transparent 46%, transparent 54%, var(--oro-borde) 58%, transparent);

  /* superficies compuestas */
  --grad-tarjeta: linear-gradient(160deg, var(--sup-3), var(--sup-0));
  --grad-modal-fondo: var(--sup-0);
  --grad-modal: linear-gradient(160deg, var(--sup-3), var(--grad-modal-fondo));
  --grad-sintesis: radial-gradient(800px 400px at 50% 0%, rgba(138, 98, 32, .06), transparent 60%), var(--sup-1);
  --grad-celda-ocupada: linear-gradient(160deg, rgba(138, 98, 32, .10), rgba(138, 98, 32, 0)), var(--sup-1);
  --grad-celda-aporta: linear-gradient(160deg, rgba(31, 122, 82, .10), rgba(31, 122, 82, 0)), var(--sup-0);
  --grad-celda-refuerza: linear-gradient(160deg, rgba(138, 98, 32, .10), rgba(138, 98, 32, 0)), var(--sup-0);
  --grad-zona-fuerte: linear-gradient(160deg, rgba(138, 98, 32, .09), rgba(138, 98, 32, 0)), var(--sup-1);
  --grad-zona-fuerte-col: linear-gradient(160deg, rgba(16, 108, 122, .08), rgba(16, 108, 122, 0)), var(--sup-1);
  --grad-vinculo: linear-gradient(160deg, rgba(138, 98, 32, .08), rgba(16, 108, 122, .05)), var(--sup-1);
  --grad-nicho-cifra: radial-gradient(circle at 50% 20%, rgba(138, 98, 32, .10), transparent 70%), var(--sup-0);
  --nicho-cifra: inset 0 0 0 200px var(--sup-0), inset 0 -40px 48px -24px rgba(138, 98, 32, .18);
  --grad-nicho-astro: radial-gradient(circle at 50% 30%, rgba(16, 108, 122, .12), transparent 70%), var(--sup-0);

  /* retícula tetráctica de fondo */
  --textura-punto: #141A3C;
  --textura-opacidad: .04;
}

/* ------------------------------------------------------------------ tema Tinta (oscuro) */

@media screen and (prefers-color-scheme: dark) {
  :root:not([data-tema="papel"]) {
    color-scheme: dark;
  
    /* superficies */
    --sup-0: #0B0E1C;
    --sup-1: #121734;
    --sup-2: #1A2145;
    --sup-3: #232B57;
  
    /* líneas */
    --linea-sutil: #232B57;
    --linea: #2E3A70;
    --linea-fuerte: #5C68B0;
  
    /* tintas cálidas sobre fondo frío: efecto manuscrito */
    --tinta-alta: #F4F0E6;
    --tinta-media: #BDC2DC;
    --tinta-baja: #8E95B6;
  
    /* primario de acción y acentos */
    --lapis-700: #1D2E75;
    --lapis-contra: #FAF7F0;
    --oro-700: #8A6220;
    --oro-500: #C99A3F;
    --oro-400: #E0B860;
    --oro-200: #F1DDAE;
    --turq-700: #106C7A;
    --turq-500: #2A9FB0;
    --turq-400: #45C2CE;
    --turq-300: #7FD9E2;
  
    /* semánticos */
    --don: #63C795;
    --aprendizaje: #E09070;
    --intenso: #E0B860;
    --extension: #A99BEA;
    --decidir: #9BB0F0;
    --peligro: #E86A6A;
  
    /* papeles de texto y superficie */
    --oro-texto: var(--oro-400);
    --turq-texto: var(--turq-400);
    --titulo: var(--oro-200);
    --oro-fondo: var(--oro-400);
    --oro-contra: #1A1204;
    --grad-lapis-superficie: linear-gradient(102deg, #182A6B 0%, #22357F 34%, #2C4293 52%, #22357F 72%, #1D2E75 100%);
    --primario-fondo: var(--grad-lapis-superficie);
    --serie-a: var(--oro-400);
    --serie-b: var(--turq-400);
    --primario-tinta: #F6F2E8;
    --foco: var(--turq-400);
    --sup-alterna: var(--sup-1);
    --sup-celda: var(--sup-2);
    --sup-celda-vacia: var(--sup-0);
  
    /* alfas y bordes de color */
    --oro-a12: rgba(224, 184, 96, .12);
    --oro-a25: rgba(224, 184, 96, .25);
    --oro-borde: var(--oro-400);
    --turq-a10: rgba(69, 194, 206, .10);
    --turq-a25: rgba(69, 194, 206, .25);
    /* Los bordes que comunican estado van a color pleno: deben superar 3:1 */
    --turq-borde: var(--turq-400);
    --don-borde: var(--don);
    --aprendizaje-borde: var(--aprendizaje);
    --peligro-borde: var(--peligro);
    --extension-a12: rgba(169, 155, 234, .12);
    --extension-borde: var(--extension);
    --anillo-oro: inset 0 0 0 1px rgba(224, 184, 96, .25);
    --anillo-turq: inset 0 0 0 1px rgba(69, 194, 206, .30);
  
    /* velos */
    --velo-cabecera: rgba(11, 14, 28, .88);
    --velo-modal: rgba(4, 6, 14, .78);
  
    /* elevación */
    --elev-1: inset 0 1px 0 rgba(255, 255, 255, .04), 0 1px 2px rgba(4, 6, 14, .5);
    --elev-2: 0 2px 6px rgba(4, 6, 14, .45), 0 12px 28px rgba(4, 6, 14, .35);
    --elev-3: 0 24px 64px rgba(4, 6, 14, .6);
    --elev-primario: 0 2px 6px rgba(4, 6, 14, .45);
    --elev-primario-hover: 0 12px 28px rgba(4, 6, 14, .35);
    --sombra: var(--elev-2);
    --halo-oro: 0 0 0 3px rgba(224, 184, 96, .22);
    --halo-turq: 0 0 0 3px rgba(69, 194, 206, .25);
  
    /* bordes */
    --b: 1px solid var(--linea);
    --b-control: 1px solid var(--linea-fuerte);
  
    /* gradientes firmados */
    --grad-ultramar: linear-gradient(168deg, #1A2145 0%, #121734 46%, #0B0E1C 100%);
    --grad-pan-de-oro: linear-gradient(102deg, #8A6220 0%, #C99A3F 28%, #F1DDAE 52%, #C99A3F 74%, #A8792B 100%);
    --grad-pan-de-oro-superficie: linear-gradient(102deg, #B8862F 0%, #D2A54B 28%, #F1DDAE 52%, #D2A54B 74%, #C08A30 100%);
    --grad-aurora: linear-gradient(90deg, #45C2CE 0%, #7FD9E2 18%, #E0B860 72%, #C99A3F 100%);
    --grad-vitela: var(--grad-ultramar);
    --grad-filete: linear-gradient(90deg, transparent, var(--oro-borde) 42%, transparent 46%, transparent 54%, var(--oro-borde) 58%, transparent);
  
    /* superficies compuestas */
    --grad-tarjeta: linear-gradient(160deg, var(--sup-3), var(--sup-1));
    --grad-modal-fondo: var(--sup-2);
    --grad-modal: linear-gradient(160deg, var(--grad-modal-fondo), var(--sup-1));
    --grad-sintesis: radial-gradient(800px 400px at 50% 0%, rgba(224, 184, 96, .08), transparent 60%), var(--sup-1);
    --grad-celda-ocupada: linear-gradient(160deg, rgba(224, 184, 96, .12), rgba(224, 184, 96, 0)), var(--sup-2);
    --grad-celda-aporta: linear-gradient(160deg, rgba(99, 199, 149, .16), rgba(99, 199, 149, 0)), var(--sup-2);
    --grad-celda-refuerza: linear-gradient(160deg, rgba(224, 184, 96, .14), rgba(224, 184, 96, 0)), var(--sup-2);
    --grad-zona-fuerte: linear-gradient(160deg, rgba(224, 184, 96, .10), rgba(224, 184, 96, 0)), var(--sup-1);
    --grad-zona-fuerte-col: linear-gradient(160deg, rgba(69, 194, 206, .10), rgba(69, 194, 206, 0)), var(--sup-1);
    --grad-vinculo: linear-gradient(160deg, rgba(224, 184, 96, .09), rgba(69, 194, 206, .05)), var(--sup-1);
    --grad-nicho-cifra: radial-gradient(circle at 50% 20%, rgba(224, 184, 96, .12), transparent 70%), var(--sup-0);
    --nicho-cifra: inset 0 0 0 200px var(--sup-0), inset 0 -40px 48px -24px rgba(224, 184, 96, .20);
    --grad-nicho-astro: radial-gradient(circle at 50% 30%, rgba(69, 194, 206, .16), transparent 70%), var(--sup-0);
  
    /* retícula tetráctica de fondo */
    --textura-punto: #F4F0E6;
    --textura-opacidad: .05;
  }
}

/* ------------------------------------------------------------------ las páginas de la app */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; overflow-x: clip; }
body {
  margin: 0;
  font-family: var(--sans);
  font-size: var(--t-cuerpo);
  line-height: 1.65;
  background: var(--sup-0);
  color: var(--tinta-alta);
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--turq-texto); text-underline-offset: 3px; }
a:focus-visible, .boton:focus-visible { outline: 2px solid var(--foco); outline-offset: 3px; }

.cabecera {
  border-bottom: 1px solid var(--linea-sutil);
  padding: env(safe-area-inset-top) var(--e-6) 0;
}
.cabecera-fila { max-width: var(--lectura); margin: 0 auto; min-height: var(--e-16); display: flex; align-items: center; }
.logo { display: inline-flex; align-items: center; gap: var(--e-3); text-decoration: none; color: var(--tinta-alta); min-height: var(--toque-min); }
.logo-marca { display: block; }
.logo-marca .monada { fill: var(--turq-400); }
.logo-marca .punto { fill: var(--oro-500); }
.logo-texto { font-family: var(--serif); font-optical-sizing: auto; font-size: var(--t-h4); line-height: var(--lh-h4); letter-spacing: var(--ls-h4); }

.hoja { flex: 1; width: 100%; max-width: var(--lectura); margin: 0 auto; padding: var(--e-12) var(--e-6) var(--e-16); }
.lema { font-size: var(--t-micro); line-height: var(--lh-micro); letter-spacing: var(--ls-micro); text-transform: uppercase; font-weight: 600; color: var(--turq-texto); margin: 0 0 var(--e-3); }
h1 { font-family: var(--serif); font-optical-sizing: auto; font-weight: 500; font-size: var(--t-h1-movil); line-height: var(--lh-h1-movil); color: var(--titulo); margin: 0 0 var(--e-6); }
h2 { font-family: var(--serif); font-optical-sizing: auto; font-weight: 500; font-size: var(--t-h3); line-height: var(--lh-h3); letter-spacing: var(--ls-h3); color: var(--titulo); margin: var(--e-12) 0 var(--e-4); }
h3 { font-family: var(--sans); font-size: var(--t-cuerpo); line-height: var(--lh-cuerpo); font-weight: 600; color: var(--tinta-alta); margin: var(--e-8) 0 var(--e-2); }
p, li { color: var(--tinta-media); }
p { margin: 0 0 var(--e-4); }
ul { margin: 0 0 var(--e-4); padding-left: var(--e-6); }
li { margin: 0 0 var(--e-2); }
strong { color: var(--tinta-alta); font-weight: 600; }

.portada { text-align: center; padding-top: var(--e-16); }
.portada .marca-grande { display: block; margin: 0 auto var(--e-8); }
.portada .marca-grande .monada { fill: var(--turq-400); }
.portada .marca-grande .punto { fill: var(--oro-500); }
.portada h1 { font-size: var(--t-h1); line-height: var(--lh-h1); letter-spacing: var(--ls-h1); margin-bottom: var(--e-2); }
.portada .subtitulo { font-family: var(--serif); font-optical-sizing: auto; font-size: var(--t-h3); line-height: var(--lh-h3); color: var(--oro-texto); margin: 0 0 var(--e-6); }
.portada .entrada { font-size: var(--t-guia); line-height: var(--lh-guia); max-width: 34rem; margin: 0 auto var(--e-8); }

.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--e-2);
  min-height: var(--alto-control); padding: var(--e-2) var(--e-6);
  border-radius: var(--r-2); font-weight: 600; letter-spacing: .01em; line-height: 24px; text-decoration: none;
}
.boton-primario { position: relative; overflow: hidden; background: var(--primario-fondo); color: var(--primario-tinta); box-shadow: var(--elev-primario); }
.boton-primario::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  background-image: var(--grad-pan-de-oro); background-size: 200% 100%; background-position: 100% 0;
}
.boton-primario:hover { box-shadow: var(--elev-primario-hover); }
@media (forced-colors: active) { .boton-primario { border: 1px solid ButtonText; } }

.respaldo { text-align: center; padding-top: var(--e-16); }
.respaldo .nota { font-size: var(--t-cuerpo-s); line-height: var(--lh-cuerpo-s); color: var(--tinta-baja); max-width: 30rem; margin: var(--e-8) auto 0; }
.respaldo .entrada { max-width: 32rem; margin: 0 auto var(--e-8); }

.preguntas h2 { font-size: var(--t-h4); line-height: var(--lh-h4); letter-spacing: var(--ls-h4); margin-top: var(--e-8); }
.tienda-pie { margin-top: var(--e-12); }

.legal-actualizado { font-size: var(--t-pie); line-height: var(--lh-pie); color: var(--tinta-baja); }
.legal-destacado { background: var(--sup-1); border: var(--b); border-radius: var(--r-3); padding: var(--e-4) var(--e-6); margin: 0 0 var(--e-6); }
.legal-destacado p:last-child { margin-bottom: 0; }

.pie { border-top: 1px solid var(--linea-sutil); padding: var(--e-6) var(--e-6) calc(var(--e-6) + env(safe-area-inset-bottom)); }
.pie-fila { max-width: var(--lectura); margin: 0 auto; display: flex; flex-wrap: wrap; gap: var(--e-2) var(--e-6); font-size: var(--t-pie); line-height: var(--lh-pie); }
.pie a { color: var(--tinta-media); }

@media (min-width: 760px) {
  h1 { font-size: var(--t-h1); line-height: var(--lh-h1); letter-spacing: var(--ls-h1); }
}