/* ==========================================================================
   Tetraktia, numerología pitagórica
   Sistema de diseño: dos temas (Papel claro por defecto, Tinta oscuro),
   pareja tipográfica propia auto alojada (Fraunces + Public Sans),
   escala tipográfica cerrada, espaciado tetráctico y movimiento sin rebote.
   Regla de casa: ningún rgba() literal fuera de los bloques de tokens.
   ========================================================================== */

/* ------------------------------------------------------------------ fuentes */

/* Fraunces variable (opsz 9..144, wght 300..700), subconjunto latin */
@font-face {
  font-family: 'Fraunces';
  src: url('/fonts/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('/fonts/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('/fonts/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('/fonts/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;

  /* medida de línea */
  --medida-prosa: 66ch;
  --medida-tarjeta: 62ch;

  /* Retícula: un lienzo y tres carriles. Todo bloque del producto pertenece
     a uno de los tres, para que los bordes izquierdos siempre coincidan. */
  --lienzo: 1180px;              /* ancho máximo del contenedor */
  --carril-prosa: 68ch;          /* texto de lectura corrida */
  --carril-medio: 760px;         /* tarjetas, formularios, bloques de una idea */
  --carril-ancho: 100%;          /* rejillas, radares, tablas, cuadrículas */

  /* 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;

  /* 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 */
  --tinta-alta: #141A3C;
  --tinta-media: #3D456E;
  --tinta-baja: #666E96;

  /* 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;
  --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;
  --primario-fondo: var(--lapis-700);
  --primario-tinta: var(--lapis-contra);
  --foco: 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%);
  --grad-pan-de-oro: linear-gradient(102deg, #8A6220 0%, #C99A3F 28%, #F1DDAE 52%, #C99A3F 74%, #A8792B 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%);
  /* la cifra del regente se rellena con pan de oro solo en tramos que superan 3:1 */
  --grad-cifra: linear-gradient(102deg, #8A6220 0%, #A8792B 30%, #8A6220 62%, #A8792B 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 (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;
    --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;
    --primario-fondo: var(--oro-400);
    --primario-tinta: #1A1204;
    --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-aurora: linear-gradient(90deg, #45C2CE 0%, #7FD9E2 18%, #E0B860 72%, #C99A3F 100%);
    --grad-vitela: var(--grad-ultramar);
    --grad-cifra: var(--grad-pan-de-oro);
    --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;
  }
}

/* Conmutador manual: gana siempre sobre la preferencia del sistema */
:root[data-tema="tinta"] {
  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;
  --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;
  --primario-fondo: var(--oro-400);
  --primario-tinta: #1A1204;
  --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-aurora: linear-gradient(90deg, #45C2CE 0%, #7FD9E2 18%, #E0B860 72%, #C99A3F 100%);
  --grad-vitela: var(--grad-ultramar);
  --grad-cifra: var(--grad-pan-de-oro);
  --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;
}

/* ------------------------------------------------------------------ base */

* { margin: 0; padding: 0; box-sizing: border-box; }

/* El atributo hidden siempre gana, aunque la clase defina display propio */
[hidden] { display: none !important; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--sans);
  font-size: var(--t-cuerpo);
  font-weight: 400;
  background: var(--grad-vitela);
  background-attachment: fixed;
  color: var(--tinta-alta);
  line-height: 1.65;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

/* Retícula tetráctica: la marca de agua del papel, deriva de 56px en 60 s */
body::before {
  content: '';
  position: fixed;
  inset: -56px;
  z-index: -1;
  pointer-events: none;
  opacity: var(--textura-opacidad);
  background-image:
    radial-gradient(circle at 1px 1px, var(--textura-punto) 1px, transparent 2px),
    radial-gradient(circle at 1px 1px, var(--textura-punto) 1px, transparent 2px);
  background-size: 56px 56px, 56px 56px;
  background-position: 0 0, 28px 28px;
  animation: derivaReticula 60s var(--ease-lineal) infinite;
}
@keyframes derivaReticula {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(0, 56px, 0); }
}

.contenedor { max-width: var(--lienzo); margin: 0 auto; padding: 0 var(--e-6); }

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-optical-sizing: auto;
  font-weight: 600;
  line-height: 1.2;
  color: var(--titulo);
}

button { font: inherit; cursor: pointer; }

/* Foco visible global: no existía */
:focus-visible {
  outline: 2px solid var(--foco);
  outline-offset: 2px;
  border-radius: var(--r-1);
}

/* Todo dato numérico se compone con cifras tabulares de altura uniforme */
.chip b, .celda-natal .digitos, .celda-gato .digitos, .celda-natal .posicion,
.celda-gato .posicion, .tabla-ciclos, .tabla-letras, .num-ciclo, .num-pico,
.numero-gigante, .indice-cifra, .tarjeta-numero .glifo, .tarjeta-numero .veces,
.tarjeta-pico .edad-pico, .linea-nums, .bloque-plano-nums, .ficha-letra .v {
  font-variant-numeric: tabular-nums lining-nums;
}
/* En prosa larga las cifras conviven con el texto: elzevirianas */
.ensayo-360 p, .mapa-personal p { font-variant-numeric: oldstyle-nums; }

/* ------------------------------------------------------------------ cabecera */

.cabecera {
  position: sticky; top: 0; z-index: 40;
  background: var(--velo-cabecera);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--linea-sutil);
}
.cabecera-fila { display: flex; align-items: center; justify-content: space-between; height: var(--e-16); }
.logo { display: flex; align-items: center; gap: var(--e-3); text-decoration: none; color: var(--tinta-alta); }
.logo-simbolo { font-size: var(--t-h3); color: var(--oro-texto); }
.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); }
.logo-texto small { display: block; font-family: var(--sans); font-size: var(--t-micro); line-height: var(--lh-micro); letter-spacing: var(--ls-micro); text-transform: uppercase; color: var(--tinta-media); }
.nav { display: flex; align-items: center; gap: var(--e-2); }
.nav-enlace { background: none; border: none; color: var(--tinta-media); padding: var(--e-2) var(--e-3); border-radius: var(--r-2); min-height: 44px; transition: color var(--dur-1) var(--ease-revelar), background var(--dur-1) var(--ease-revelar); }
.nav-enlace:hover { color: var(--titulo); background: var(--oro-a12); }

/* ------------------------------------------------------------------ botones */

.boton {
  position: relative; overflow: hidden;
  border: none; border-radius: var(--r-2); padding: var(--e-3) var(--e-4);
  font-weight: 600; letter-spacing: .01em;
  min-height: 44px;
  transition: transform var(--dur-1) var(--ease-revelar),
              box-shadow var(--dur-1) var(--ease-revelar),
              background var(--dur-1) var(--ease-revelar),
              border-color var(--dur-1) var(--ease-revelar);
}
.boton:hover { transform: translateY(-1px); }
.boton-primario {
  background: var(--primario-fondo);
  color: var(--primario-tinta);
  box-shadow: var(--elev-primario);
}
.boton-primario:hover { box-shadow: var(--elev-primario-hover); }
/* Pan de oro: barrido de lámina batida en el filo del botón 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;
  transition: background-position var(--dur-3) var(--ease-lineal);
}
.boton-primario:hover::after { background-position: 0 0; }
.boton-borde {
  background: transparent; color: var(--tinta-alta);
  border: var(--b-control);
}
.boton-borde:hover { border-color: var(--oro-texto); background: var(--oro-a12); }
.boton-grande { width: 100%; padding: var(--e-3); font-size: var(--t-cuerpo); line-height: var(--lh-cuerpo); }
.boton-peligro { background: transparent; border: 1px solid var(--peligro-borde); color: var(--peligro); }

/* ------------------------------------------------------------------ portada */

.portada { padding: var(--e-16) 0 var(--e-12); }
.portada .contenedor { display: grid; grid-template-columns: 1.15fr .85fr; gap: var(--e-12); align-items: center; }
.portada h1 { font-size: var(--t-h1); line-height: var(--lh-h1); letter-spacing: var(--ls-h1); font-weight: 400; font-variation-settings: 'SOFT' 30, 'WONK' 1; }
.portada h1 em { color: var(--oro-texto); font-style: italic; }
.portada-sub { margin-top: var(--e-4); font-size: var(--t-cuerpo); line-height: var(--lh-cuerpo); color: var(--tinta-media); max-width: var(--carril-prosa); }

/* ------------------------------------------------------------------ tarjetas y formularios */

.tarjeta {
  background: var(--grad-tarjeta);
  border: var(--b);
  border-radius: var(--r-3);
  box-shadow: var(--elev-2);
  padding: var(--e-6);
}
.formulario h2 { font-size: var(--t-h3); line-height: var(--lh-h3); letter-spacing: var(--ls-h3); margin-bottom: var(--e-4); color: var(--titulo); }
.campo { margin-bottom: var(--e-4); }
.campo label { display: block; font-size: var(--t-pie); line-height: var(--lh-pie); letter-spacing: .01em; margin-bottom: var(--e-2); color: var(--tinta-media); font-weight: 500; }
.ayuda-campo {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; margin-left: var(--e-2); vertical-align: middle;
  border-radius: var(--r-circulo); border: 1px solid var(--linea-fuerte);
  background: var(--oro-a12); color: var(--oro-texto);
  font-size: var(--t-pie); font-weight: 700; line-height: 1;
  transition: background var(--dur-1) var(--ease-revelar), transform var(--dur-1) var(--ease-revelar);
}
.ayuda-campo:hover { background: var(--oro-a25); transform: scale(1.03); }
.opcional { color: var(--tinta-media); font-weight: 400; }
.campo input, .campo select, .campo textarea {
  width: 100%; padding: var(--e-3);
  background: var(--sup-0);
  border: var(--b-control);
  border-radius: var(--r-2);
  color: var(--tinta-alta);
  font: inherit;
  color-scheme: inherit;
  min-height: 44px;
  transition: border-color var(--dur-1) var(--ease-revelar), box-shadow var(--dur-1) var(--ease-revelar);
}
.campo input:focus, .campo select:focus, .campo textarea:focus {
  outline: none; border-color: var(--foco);
  box-shadow: var(--halo-turq);
}
.nota-formulario { margin-top: var(--e-3); font-size: var(--t-pie); line-height: var(--lh-pie); color: var(--tinta-media); text-align: center; }
.formulario-compacto { max-width: var(--carril-medio); margin-bottom: var(--e-8); }

/* ------------------------------------------------------------------ secciones del informe */

.seccion { padding: var(--e-16) 0; }
.seccion-alterna { background: var(--sup-alterna); }
.titulo-seccion { font-size: var(--t-h2); line-height: var(--lh-h2); letter-spacing: var(--ls-h2); font-weight: 500; font-variation-settings: 'SOFT' 30, 'WONK' 1; margin-bottom: var(--e-3); display: flex; align-items: baseline; gap: var(--e-3); }
.numero-seccion {
  font-size: var(--t-cuerpo-s); line-height: 1; color: var(--oro-texto);
  border: 1px solid var(--oro-borde);
  border-radius: var(--r-circulo); min-width: 38px; height: 38px;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--serif); font-optical-sizing: auto;
  font-variant-numeric: lining-nums;
}
.intro-seccion { color: var(--tinta-media); max-width: var(--carril-prosa); margin-bottom: var(--e-8); }

.informe-para { font-family: var(--serif); font-optical-sizing: auto; font-size: var(--t-h3); line-height: var(--lh-h3); color: var(--titulo); margin-bottom: var(--e-4); }

.resumen-chips { display: flex; flex-wrap: wrap; gap: var(--e-3); margin-bottom: var(--e-6); }
.chip {
  background: var(--sup-1); border: var(--b);
  padding: var(--e-2) var(--e-4); border-radius: var(--r-circulo); font-size: var(--t-cuerpo-s); line-height: var(--lh-cuerpo-s);
  color: var(--tinta-media);
}
.chip b { color: var(--titulo); font-family: var(--serif); font-optical-sizing: auto; font-size: var(--t-cuerpo); margin-left: var(--e-2); }
.acciones-informe { display: flex; flex-wrap: wrap; gap: var(--e-3); }

/* ------------------------------------------------------------------ tabla natal */

.titulo-lectura { font-size: var(--t-h4); line-height: var(--lh-h4); letter-spacing: var(--ls-h4); color: var(--titulo); margin: var(--e-8) 0 var(--e-3); }
.titulo-lectura-vertical { color: var(--turq-texto); }
.tabla-natal-layout { display: grid; grid-template-columns: auto 1fr; gap: var(--e-12); align-items: start; margin-bottom: var(--e-6); --celda: 126px; }
.tabla-columnas-layout { display: grid; grid-template-columns: 1fr auto; gap: var(--e-12); align-items: start; margin-bottom: var(--e-8); --celda: 126px; }

.cuadricula-natal {
  display: grid;
  grid-template-columns: repeat(3, var(--celda, 108px));
  grid-template-rows: repeat(3, var(--celda, 108px));
  gap: var(--e-2);
  /* nunca estirarse dentro de su contenedor: el overlay de flechas escala en % */
  width: max-content;
  justify-self: start;
}
.columnas-etiquetas { display: grid; grid-template-columns: repeat(3, var(--celda, 108px)); gap: var(--e-2); margin-bottom: var(--e-2); }
.etiqueta-columna { font-size: var(--t-micro); line-height: var(--lh-micro); text-transform: uppercase; letter-spacing: var(--ls-micro); font-weight: 600; color: var(--turq-texto); text-align: center; }
.bandas-overlay { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.celda-natal {
  position: relative;
  background: var(--sup-celda);
  border: var(--b);
  border-radius: var(--r-1);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.celda-natal.ocupada { border-color: var(--oro-borde); background: var(--grad-celda-ocupada); }
.celda-natal .digitos { font-family: var(--serif); font-optical-sizing: auto; font-size: var(--t-h2); color: var(--titulo); letter-spacing: .12em; min-height: 38px; }
/* Casilla vacía: la ausencia se dice con la forma (borde discontinuo), no con la opacidad */
.celda-natal.vacia { background: var(--sup-celda-vacia); border-style: dashed; border-color: var(--linea-fuerte); }
.celda-natal.vacia .digitos { color: var(--tinta-baja); font-size: var(--t-h3); }
.celda-natal .posicion { position: absolute; top: var(--e-2); right: var(--e-3); font-size: var(--t-micro); line-height: var(--lh-micro); font-weight: 600; color: var(--tinta-media); }
.etiqueta-plano { font-size: var(--t-micro); line-height: var(--lh-micro); text-transform: uppercase; letter-spacing: var(--ls-micro); font-weight: 600; color: var(--tinta-media); text-align: right; padding-right: var(--e-3); display: flex; align-items: center; justify-content: flex-end; }

.cuadricula-envoltura { display: grid; grid-template-columns: min(120px, 30%) auto; gap: var(--e-2); align-items: stretch; }
.cuadricula-envoltura .filas-etiquetas { display: grid; grid-template-rows: repeat(3, var(--celda, 108px)); gap: var(--e-2); }

.cuadricula-natal { position: relative; }
.flechas-overlay {
  /* 38px de extensión sobre un lienzo de 342: en porcentaje escala igual en móvil */
  position: absolute;
  inset: -11.11%;
  width: 122.22%;
  height: 122.22%;
  pointer-events: none;
  overflow: visible;
}
.leyenda-flechas { margin-top: var(--e-8); display: flex; gap: var(--e-4); flex-wrap: wrap; font-size: var(--t-pie); line-height: var(--lh-pie); }
.leyenda-item.fuerza { color: var(--don); }
.leyenda-item.aprendizaje { color: var(--aprendizaje); }

.lista-numeros-profundo { display: grid; grid-template-columns: 1fr; gap: var(--e-4); max-width: var(--carril-medio); }
.tarjeta-numero.profunda { padding: var(--e-6); }
.tarjeta-numero.profunda .glifo { width: auto; min-width: 44px; padding: 0 var(--e-3); letter-spacing: .08em; }
.tarjeta-numero.profunda p { font-size: var(--t-cuerpo-s); line-height: var(--lh-cuerpo-s); }

.proposito-regente { font-size: var(--t-cuerpo); line-height: var(--lh-cuerpo); color: var(--titulo); }
.rejilla-regente-detalle { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: var(--e-4); margin-top: var(--e-4); }
.lista-practicas { margin: 0; padding-left: var(--e-1); }
.lista-practicas li { list-style: none; font-size: var(--t-cuerpo-s); line-height: var(--lh-cuerpo-s); color: var(--tinta-media); padding: var(--e-2) 0; border-bottom: 1px solid var(--linea-sutil); }
.lista-practicas li::before { content: '· '; color: var(--oro-texto); }
.lista-practicas li:last-child { border-bottom: none; }

.bloque-plano { margin-bottom: var(--e-8); border: var(--b); border-radius: var(--r-3); padding: var(--e-6); background: var(--sup-1); }
.bloque-plano-cabecera h3 { font-size: var(--t-h4); line-height: var(--lh-h4); letter-spacing: var(--ls-h4); color: var(--titulo); }
.bloque-plano-nums { font-family: var(--sans); font-size: var(--t-pie); line-height: var(--lh-pie); color: var(--turq-texto); letter-spacing: .05em; margin-left: var(--e-2); }
.bloque-plano-cabecera p { font-size: var(--t-pie); line-height: var(--lh-pie); color: var(--tinta-media); margin: var(--e-1) 0 var(--e-4); }
.plano-sin-numeros { font-size: var(--t-cuerpo-s); line-height: var(--lh-cuerpo-s); color: var(--tinta-media); }

.lectura-combinada { background: var(--sup-1); border: var(--b); border-radius: var(--r-3); padding: var(--e-6); margin: var(--e-1) 0 var(--e-6); }
.lectura-combinada h4 { color: var(--titulo); font-size: var(--t-h4); line-height: var(--lh-h4); margin-bottom: var(--e-2); }
.lectura-combinada p { color: var(--tinta-media); font-size: var(--t-cuerpo-s); line-height: var(--lh-cuerpo-s); margin-bottom: var(--e-3); }
.lectura-combinada ul { list-style: none; padding: 0; }
.lectura-combinada li { padding: var(--e-2) 0 var(--e-2) var(--e-4); border-bottom: 1px solid var(--linea-sutil); font-size: var(--t-cuerpo-s); line-height: var(--lh-cuerpo-s); color: var(--tinta-media); border-left: 3px solid transparent; margin-bottom: var(--e-1); }
.lectura-combinada li:last-child { border-bottom: none; }
.lectura-combinada li.gana { border-left-color: var(--don); }
.lectura-combinada li.intenso { border-left-color: var(--intenso); }
.lectura-combinada li.refuerza { border-left-color: var(--turq-texto); }
.lectura-combinada li.ausente { border-left-color: var(--aprendizaje); }
.lectura-combinada li b { color: var(--tinta-alta); }
.equilibrio-tabla { margin-top: var(--e-3); padding: var(--e-3); border: 1px solid var(--turq-borde); border-radius: var(--r-2); }
.equilibrio-tabla b { color: var(--titulo); }

.plano-item { border-left: 3px solid var(--oro-texto); padding: var(--e-3) var(--e-4); margin-bottom: var(--e-4); background: var(--sup-1); border-radius: 0 var(--r-2) var(--r-2) 0; }
.columna-item { border-left-color: var(--turq-texto); }
.zona-fuerte { background: var(--grad-zona-fuerte); box-shadow: var(--anillo-oro); }
.columna-item.zona-fuerte { background: var(--grad-zona-fuerte-col); box-shadow: var(--anillo-turq); }
.sello-fuerte { display: inline-block; font-size: var(--t-micro); line-height: var(--lh-micro); font-weight: 700; letter-spacing: var(--ls-micro); text-transform: uppercase; color: var(--oro-contra); background: var(--oro-fondo); padding: var(--e-1) var(--e-2); border-radius: var(--r-circulo); margin-left: var(--e-2); vertical-align: middle; }
.columna-item .sello-fuerte { background: var(--turq-texto); color: var(--sup-0); }
.nota-fuerza { font-size: var(--t-cuerpo-s); line-height: var(--lh-cuerpo-s); color: var(--tinta-media); margin-bottom: var(--e-4); padding: var(--e-3); border: 1px solid var(--oro-borde); border-radius: var(--r-2); max-width: var(--carril-medio); }
.nota-fuerza b { color: var(--titulo); }
.plano-item h4 .sello-fuerte { margin-left: var(--e-2); position: relative; top: -1px; }
.plano-item h4 { color: var(--titulo); margin-bottom: var(--e-1); font-size: var(--t-h4); line-height: var(--lh-h4); }
.plano-item .estado-plano { font-size: var(--t-mini); line-height: var(--lh-mini); letter-spacing: var(--ls-mini); text-transform: uppercase; font-weight: 600; color: var(--turq-texto); }
.plano-item p { font-size: var(--t-cuerpo-s); line-height: var(--lh-cuerpo-s); color: var(--tinta-media); }

.rejilla-numeros { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: var(--e-4); }
.tarjeta-numero { background: var(--sup-1); border: var(--b); border-radius: var(--r-3); padding: var(--e-4); }
.tarjeta-numero.ausente { border-style: dashed; }
.tarjeta-numero .encabezado-num { display: flex; align-items: center; gap: var(--e-3); margin-bottom: var(--e-2); }
.tarjeta-numero .glifo {
  font-family: var(--serif); font-optical-sizing: auto; font-size: var(--t-h3); color: var(--oro-texto);
  width: 44px; height: 44px; border: 1px solid var(--oro-borde); border-radius: var(--r-2);
  display: flex; align-items: center; justify-content: center; flex: none;
}
.tarjeta-numero.ausente .glifo { color: var(--tinta-media); border-color: var(--linea-fuerte); }
.tarjeta-numero h4 { font-size: var(--t-h4); line-height: var(--lh-h4); letter-spacing: var(--ls-h4); }
.tarjeta-numero .veces { font-size: var(--t-mini); line-height: var(--lh-mini); color: var(--turq-texto); letter-spacing: var(--ls-mini); }
.tarjeta-numero p { font-size: var(--t-cuerpo-s); line-height: var(--lh-cuerpo-s); color: var(--tinta-media); }

/* ------------------------------------------------------------------ flechas */

.rejilla-tarjetas { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr)); gap: var(--e-4); margin-bottom: var(--e-6); }
.tarjeta-flecha { background: var(--sup-1); border: var(--b); border-radius: var(--r-3); padding: var(--e-6); }
.tarjeta-flecha.completa { border-color: var(--don-borde); }
.tarjeta-flecha.vacia { border-color: var(--aprendizaje-borde); }
.tarjeta-flecha .tipo-flecha { font-size: var(--t-micro); line-height: var(--lh-micro); letter-spacing: var(--ls-micro); font-weight: 600; text-transform: uppercase; }
.tarjeta-flecha.completa .tipo-flecha { color: var(--don); }
.tarjeta-flecha.vacia .tipo-flecha { color: var(--aprendizaje); }
.tarjeta-flecha h4 { font-size: var(--t-h4); line-height: var(--lh-h4); letter-spacing: var(--ls-h4); margin: var(--e-1) 0 var(--e-2); color: var(--titulo); }
.tarjeta-flecha .linea-nums { font-family: var(--serif); font-optical-sizing: auto; color: var(--turq-texto); margin-bottom: var(--e-2); }
.tarjeta-flecha p { font-size: var(--t-cuerpo-s); line-height: var(--lh-cuerpo-s); color: var(--tinta-media); }
.consejo { margin-top: var(--e-3); padding: var(--e-3); background: var(--turq-a10); border-radius: var(--r-2); font-size: var(--t-cuerpo-s); line-height: var(--lh-cuerpo-s); }
.consejo b { color: var(--turq-texto); }

/* ------------------------------------------------------------------ regente y día */

.tarjeta-regente { display: grid; grid-template-columns: auto 1fr; gap: var(--e-8); align-items: start; }
.numero-gigante {
  font-family: var(--serif); font-optical-sizing: auto;
  font-size: var(--t-cifra); line-height: var(--lh-cifra); letter-spacing: var(--ls-cifra);
  font-weight: 300; font-variation-settings: 'opsz' 144, 'SOFT' 30;
  color: var(--oro-texto);
  padding: var(--e-6) var(--e-8);
  border: 1px solid var(--oro-borde);
  border-radius: var(--r-4);
  background: var(--grad-nicho-cifra);
}
/* La cifra del regente va en oro sólido: es el dato más importante del mapa y
   no puede depender de que el navegador sepa recortar un gradiente a texto. */
.bloque-texto h3 { font-size: var(--t-h3); line-height: var(--lh-h3); letter-spacing: var(--ls-h3); color: var(--titulo); margin-bottom: var(--e-3); }
.bloque-texto p { margin-bottom: var(--e-3); color: var(--tinta-media); }
.bloque-texto .lista-etiquetada { margin: var(--e-3) 0; }
.lista-etiquetada li { list-style: none; padding: var(--e-2) 0; border-bottom: 1px solid var(--linea-sutil); font-size: var(--t-cuerpo-s); line-height: var(--lh-cuerpo-s); color: var(--tinta-media); }
.lista-etiquetada li b { color: var(--titulo); }

/* ------------------------------------------------------------------ ciclos */

.tabla-ciclos { width: 100%; border-collapse: collapse; margin: var(--e-4) 0; }
.tabla-ciclos th, .tabla-ciclos td { padding: var(--e-3); text-align: left; border-bottom: var(--b); font-size: var(--t-cuerpo-s); line-height: var(--lh-cuerpo-s); color: var(--tinta-media); }
.tabla-ciclos th { color: var(--titulo); font-family: var(--serif); font-optical-sizing: auto; letter-spacing: .01em; }
.tabla-ciclos tr.actual { background: var(--oro-a12); }
.tabla-ciclos tr.actual td:first-child { border-left: 3px solid var(--oro-texto); }
.tabla-ciclos .num-ciclo { font-family: var(--serif); font-optical-sizing: auto; font-size: var(--t-cuerpo); color: var(--oro-texto); }

/* ------------------------------------------------------------------ pirámide */

.piramide-svg { display: block; margin: 0 auto var(--e-6); max-width: var(--carril-medio); width: 100%; }
.piramide-svg text { font-family: var(--serif); }
.rejilla-picos { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr)); gap: var(--e-4); }
.tarjeta-pico { background: var(--sup-1); border: var(--b); border-radius: var(--r-3); padding: var(--e-4); }
.tarjeta-pico.activo { border-color: var(--oro-texto); }
.tarjeta-pico .edad-pico { font-size: var(--t-mini); line-height: var(--lh-mini); letter-spacing: var(--ls-mini); text-transform: uppercase; font-weight: 600; color: var(--turq-texto); }
.tarjeta-pico .num-pico { font-family: var(--serif); font-optical-sizing: auto; font-size: var(--t-h2); line-height: var(--lh-h2); color: var(--oro-texto); }
.tarjeta-pico p { font-size: var(--t-cuerpo-s); line-height: var(--lh-cuerpo-s); color: var(--tinta-media); }

/* ------------------------------------------------------------------ astro */

.astro-cabecera { display: flex; align-items: center; gap: var(--e-6); margin-bottom: var(--e-6); flex-wrap: wrap; }
.astro-simbolo {
  font-size: var(--t-h1); width: var(--e-24); height: var(--e-24); flex: none;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--oro-borde); border-radius: var(--r-circulo);
  background: var(--grad-nicho-astro);
  color: var(--oro-texto);
}
.astro-datos { display: flex; gap: var(--e-6); flex-wrap: wrap; }
.dato-astro { font-size: var(--t-cuerpo-s); line-height: var(--lh-cuerpo-s); color: var(--tinta-media); }
.dato-astro b { display: block; font-family: var(--serif); font-optical-sizing: auto; font-size: var(--t-cuerpo); color: var(--titulo); }
.aviso-cuspide { background: var(--turq-a10); border: 1px solid var(--turq-borde); border-radius: var(--r-2); padding: var(--e-3) var(--e-4); margin-bottom: var(--e-4); font-size: var(--t-cuerpo-s); line-height: var(--lh-cuerpo-s); color: var(--tinta-media); }
.rejilla-astro { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: var(--e-4); }
.tarjeta-astro { background: var(--sup-1); border: var(--b); border-radius: var(--r-3); padding: var(--e-4); }
.tarjeta-astro h4 { color: var(--titulo); margin-bottom: var(--e-2); font-size: var(--t-h4); line-height: var(--lh-h4); letter-spacing: var(--ls-h4); }
.tarjeta-astro p { font-size: var(--t-cuerpo-s); line-height: var(--lh-cuerpo-s); color: var(--tinta-media); }

/* ------------------------------------------------------------------ nombre */

.tabla-letras { border-collapse: collapse; margin: var(--e-3) 0 var(--e-6); max-width: 100%; }
.tabla-letras td, .tabla-letras th { border: var(--b); padding: var(--e-2) var(--e-3); text-align: center; font-size: var(--t-cuerpo-s); line-height: var(--lh-cuerpo-s); color: var(--tinta-media); }
.tabla-letras th { background: var(--sup-1); color: var(--titulo); font-family: var(--serif); font-optical-sizing: auto; }
.letras-nombre { display: flex; flex-wrap: wrap; gap: var(--e-2); margin: var(--e-3) 0 var(--e-6); }
.ficha-letra {
  display: inline-flex; flex-direction: column; align-items: center;
  min-width: 34px; padding: var(--e-2); border-radius: var(--r-1);
  background: var(--sup-1); border: var(--b);
}
.ficha-letra.vocal { border-color: var(--oro-borde); }
.ficha-letra .l { font-family: var(--serif); font-optical-sizing: auto; font-size: var(--t-cuerpo); text-transform: uppercase; color: var(--tinta-alta); }
.ficha-letra.vocal .l { color: var(--titulo); }
.ficha-letra .v { font-size: var(--t-micro); line-height: var(--lh-micro); min-height: var(--lh-micro); font-weight: 600; }
.ficha-letra .v.arriba { color: var(--oro-texto); }
.ficha-letra .v.abajo { color: var(--turq-texto); }
.ficha-letra.separador { background: none; border: none; min-width: var(--e-3); }
.leyenda-letras { font-size: var(--t-pie); line-height: var(--lh-pie); color: var(--tinta-media); margin-bottom: var(--e-4); }

/* ------------------------------------------------------------------ síntesis */

.seccion-sintesis {
  background: var(--grad-sintesis);
  border-top: 1px solid var(--oro-borde);
  border-bottom: 1px solid var(--oro-borde);
}
.mapa-personal { background: var(--sup-1); border: var(--b); border-radius: var(--r-3); padding: var(--e-6); margin-bottom: var(--e-8); }
.mapa-personal p { color: var(--tinta-media); margin-bottom: var(--e-3); max-width: var(--carril-prosa); }
.mapa-personal p:last-child { margin-bottom: 0; }
.ensayo-360 .ensayo-titulo { font-family: var(--serif); font-optical-sizing: auto; font-size: var(--t-guia); line-height: var(--lh-guia); font-style: italic; font-variation-settings: 'SOFT' 30; color: var(--titulo); margin: var(--e-6) 0 var(--e-2); }
.ensayo-360 .ensayo-titulo:first-child { margin-top: 0; }

.foda-rejilla { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-4); margin-bottom: var(--e-8); }
.foda-cuadro { border-radius: var(--r-3); padding: var(--e-6); background: var(--sup-1); border-top: 3px solid; }
.foda-cuadro.fortalezas { border-color: var(--don); }
.foda-cuadro.oportunidades { border-color: var(--turq-texto); }
.foda-cuadro.debilidades { border-color: var(--intenso); }
.foda-cuadro.amenazas { border-color: var(--peligro); }
.foda-cuadro h4 { font-size: var(--t-cuerpo-s); line-height: var(--lh-cuerpo-s); letter-spacing: var(--ls-micro); text-transform: uppercase; }
.foda-cuadro.fortalezas h4 { color: var(--don); }
.foda-cuadro.oportunidades h4 { color: var(--turq-texto); }
.foda-cuadro.debilidades h4 { color: var(--oro-texto); }
.foda-cuadro.amenazas h4 { color: var(--peligro); }
.foda-lema { display: block; font-size: var(--t-mini); line-height: var(--lh-mini); color: var(--tinta-media); margin: var(--e-1) 0 var(--e-3); font-style: italic; }
.foda-cuadro ul { list-style: none; }
.foda-cuadro li { font-size: var(--t-cuerpo-s); line-height: var(--lh-cuerpo-s); color: var(--tinta-media); padding: var(--e-2) 0; border-bottom: 1px solid var(--linea-sutil); }
.foda-cuadro li:last-child { border-bottom: none; }

/* Sello de procedencia: color y forma exclusivos de la extensión propia */
/* La procedencia se declara sin gritar: componentes.css la define como nota al pie */

.rejilla-recomendaciones { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-4); }
.col-recomendacion { border-radius: var(--r-3); padding: var(--e-6); background: var(--sup-1); border-top: 3px solid; }
.col-recomendacion.agregar { border-color: var(--don); }
.col-recomendacion.aumentar { border-color: var(--turq-texto); }
.col-recomendacion.reducir { border-color: var(--intenso); }
.col-recomendacion.eliminar { border-color: var(--peligro); }
.col-recomendacion h4 { font-size: var(--t-cuerpo-s); line-height: var(--lh-cuerpo-s); letter-spacing: var(--ls-micro); text-transform: uppercase; margin-bottom: var(--e-3); }
.col-recomendacion.agregar h4 { color: var(--don); }
.col-recomendacion.aumentar h4 { color: var(--turq-texto); }
.col-recomendacion.reducir h4 { color: var(--oro-texto); }
.col-recomendacion.eliminar h4 { color: var(--peligro); }
.col-recomendacion li { list-style: none; font-size: var(--t-cuerpo-s); line-height: var(--lh-cuerpo-s); color: var(--tinta-media); padding: var(--e-2) 0; border-bottom: 1px solid var(--linea-sutil); }
.col-recomendacion li:last-child { border-bottom: none; }

/* ------------------------------------------------------------------ compatibilidad */

.indices-vinculo { display: grid; gap: var(--e-3); max-width: var(--carril-medio); margin: var(--e-2) 0 var(--e-4); }
.indice-cabecera { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: var(--e-2); font-size: var(--t-cuerpo-s); line-height: var(--lh-cuerpo-s); color: var(--tinta-media); }
/* Aurora de la mónada: solo en trazos de 2 a 6 px y solo en lo que mide */
.indice-caja {
  position: relative; background: var(--sup-1); border: var(--b);
  border-radius: var(--r-3); padding: var(--e-4) var(--e-4) var(--e-4) var(--e-6);
  overflow: hidden;
}
.indice-caja::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background-image: var(--grad-aurora);
}
.indice-cifra { font-family: var(--serif); font-optical-sizing: auto; font-size: var(--t-h2); line-height: var(--lh-h2); color: var(--titulo); margin-right: var(--e-2); }
.indice-nombre { font-size: var(--t-micro); line-height: var(--lh-micro); letter-spacing: var(--ls-micro); text-transform: uppercase; font-weight: 600; color: var(--tinta-media); }
.indice-nombre b { color: var(--turq-texto); }
.indice-caja p { font-size: var(--t-cuerpo-s); line-height: var(--lh-cuerpo-s); color: var(--tinta-media); margin-top: var(--e-2); }
.indices-nota { font-size: var(--t-pie); line-height: var(--lh-pie); color: var(--tinta-media); }
.caracter-vinculo {
  margin: var(--e-4) 0 var(--e-6); padding: var(--e-4) var(--e-6);
  background: var(--grad-vinculo);
  border: 1px solid var(--oro-borde); border-radius: var(--r-3);
}
.caracter-vinculo h4 { font-family: var(--serif); font-optical-sizing: auto; font-size: var(--t-h4); line-height: var(--lh-h4); color: var(--titulo); margin-bottom: var(--e-2); }
.caracter-vinculo p { font-size: var(--t-cuerpo-s); line-height: var(--lh-cuerpo-s); color: var(--tinta-media); }

.listas-vinculo { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e-4); margin-bottom: var(--e-2); }
.lista-vinculo { background: var(--sup-1); border: var(--b); border-radius: var(--r-3); padding: var(--e-4); }
.lista-vinculo h4 { font-size: var(--t-cuerpo-s); line-height: var(--lh-cuerpo-s); margin-bottom: var(--e-3); }
.lista-vinculo.parecen h4 { color: var(--titulo); }
.lista-vinculo.completan h4 { color: var(--turq-texto); }
.lista-vinculo ul { list-style: none; display: grid; gap: var(--e-2); }
.lista-vinculo li { font-size: var(--t-cuerpo-s); line-height: var(--lh-cuerpo-s); color: var(--tinta-media); padding-left: var(--e-4); position: relative; }
/* Viñeta llena: lo que está en el libro */
.lista-vinculo li::before { content: ''; position: absolute; left: 0; top: 9px; width: var(--e-1); height: var(--e-1); border-radius: var(--r-circulo); background: var(--oro-texto); }
.lista-vinculo.completan li::before { background: var(--turq-texto); }
.lista-vacia { font-size: var(--t-cuerpo-s); line-height: var(--lh-cuerpo-s); color: var(--tinta-media); font-style: italic; }
@media (max-width: 640px) { .listas-vinculo { grid-template-columns: 1fr; } }

.desglose-compat { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); gap: var(--e-4); margin-top: var(--e-4); }

/* ------------------------------------------------------------------ personas */

.tarjeta-persona { background: var(--sup-1); border: var(--b); border-radius: var(--r-3); padding: var(--e-6); }
.tarjeta-persona h4 { font-size: var(--t-h4); line-height: var(--lh-h4); letter-spacing: var(--ls-h4); color: var(--titulo); }
.tarjeta-persona .relacion-persona { font-size: var(--t-mini); line-height: var(--lh-mini); letter-spacing: var(--ls-mini); text-transform: uppercase; font-weight: 600; color: var(--turq-texto); }
.tarjeta-persona .datos-persona { font-size: var(--t-cuerpo-s); line-height: var(--lh-cuerpo-s); color: var(--tinta-media); margin: var(--e-2) 0 var(--e-3); }
.tarjeta-persona .acciones-persona { display: flex; gap: var(--e-2); flex-wrap: wrap; }
.tarjeta-persona .acciones-persona .boton { padding: var(--e-2) var(--e-3); font-size: var(--t-pie); }

/* ------------------------------------------------------------------ modales */

.modal { border: none; background: transparent; padding: 0; }
.modal::backdrop { background: var(--velo-modal); backdrop-filter: blur(4px); }
.modal-caja {
  position: relative;
  width: min(420px, 92vw);
  background: var(--grad-modal);
  border: var(--b); border-radius: var(--r-4);
  padding: var(--e-8); color: var(--tinta-alta);
  box-shadow: var(--elev-3);
}
.modal-caja h3 { font-size: var(--t-h3); line-height: var(--lh-h3); letter-spacing: var(--ls-h3); color: var(--titulo); margin-bottom: var(--e-4); }
.modal-cerrar { position: absolute; top: var(--e-2); right: var(--e-2); background: none; border: none; font-size: var(--t-h3); line-height: 1; color: var(--tinta-media); min-width: 44px; min-height: 44px; border-radius: var(--r-2); display: inline-flex; align-items: center; justify-content: center; }
.modal-cerrar:hover { color: var(--tinta-alta); background: var(--oro-a12); }
.pestanas { display: flex; gap: var(--e-2); margin-bottom: var(--e-4); }
.pestana { flex: 1; padding: var(--e-3); background: var(--sup-1); border: var(--b-control); border-radius: var(--r-2); color: var(--tinta-media); min-height: 44px; }
.pestana.activa { background: var(--oro-a12); border-color: var(--oro-texto); color: var(--titulo); }
.error-auth { color: var(--peligro); font-size: var(--t-cuerpo-s); line-height: var(--lh-cuerpo-s); margin-bottom: var(--e-3); }

/* ------------------------------------------------------------------ antesala y metodología */

.portada-lema {
  font-size: var(--t-mini); line-height: var(--lh-mini); letter-spacing: var(--ls-micro); text-transform: uppercase; font-weight: 600;
  color: var(--turq-texto); margin-bottom: var(--e-3);
}

.logo-marca { flex: none; }

.antesala { text-align: center; width: min(520px, 92vw); max-height: 88dvh; overflow-y: auto; }
.antesala h3 { margin-top: var(--e-3); font-size: var(--t-h3); line-height: var(--lh-h3); }
.antesala p { text-align: left; font-size: var(--t-cuerpo-s); line-height: var(--lh-cuerpo-s); color: var(--tinta-media); margin-bottom: var(--e-3); }
.antesala p em { color: var(--titulo); font-style: italic; }
.antesala .boton { margin-top: var(--e-2); }
.antesala .boton:disabled { opacity: .55; cursor: wait; transform: none; }
@media (max-width: 600px) {
  .antesala { padding: var(--e-6) var(--e-4); }
  .antesala h3 { font-size: var(--t-h4); line-height: var(--lh-h4); margin-top: var(--e-2); }
  .antesala p { font-size: var(--t-pie); line-height: var(--lh-pie); margin-bottom: var(--e-2); }
  .antesala .tetraktys-anim { width: 78px; margin: 0 auto var(--e-1); }
  .antesala .boton { width: 100%; }
}

.tetraktys-anim { width: 110px; margin: var(--e-1) auto var(--e-2); display: block; }
.tetraktys-anim circle { opacity: 0; animation: aparecerPunto var(--dur-3) var(--ease-revelar) forwards; }
/* Escalonado tetráctico: el retardo es por FILA, no por punto suelto */
.tetraktys-anim circle:nth-child(1) { animation-delay: 0ms; }
.tetraktys-anim circle:nth-child(2) { animation-delay: 120ms; }
.tetraktys-anim circle:nth-child(3) { animation-delay: 120ms; }
.tetraktys-anim circle:nth-child(4) { animation-delay: 240ms; }
.tetraktys-anim circle:nth-child(5) { animation-delay: 240ms; }
.tetraktys-anim circle:nth-child(6) { animation-delay: 240ms; }
.tetraktys-anim circle:nth-child(7) { animation-delay: 360ms; }
.tetraktys-anim circle:nth-child(8) { animation-delay: 360ms; }
.tetraktys-anim circle:nth-child(9) { animation-delay: 360ms; }
.tetraktys-anim circle:nth-child(10) { animation-delay: 360ms; }
@keyframes aparecerPunto {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

.metodologia {
  width: min(720px, 94vw);
  max-height: 86vh;
  overflow-y: auto;
}
.metodologia h4 {
  color: var(--titulo); font-size: var(--t-h4); line-height: var(--lh-h4);
  margin: var(--e-6) 0 var(--e-2); padding-top: var(--e-4);
  border-top: 1px solid var(--linea-sutil);
}
.metodologia h4:first-of-type { border-top: none; padding-top: 0; }
.metodologia p { font-size: var(--t-cuerpo-s); line-height: var(--lh-cuerpo-s); color: var(--tinta-media); margin-bottom: var(--e-3); }
.metodologia p em { color: var(--titulo); }
.metodologia-lema { font-size: var(--t-pie); line-height: var(--lh-pie); letter-spacing: var(--ls-mini); color: var(--turq-texto); margin-bottom: var(--e-2); }

.boton-metodologia { margin: var(--e-3) 0; }

/* ------------------------------------------------------------------ sello y desafío */

.sello-metodo { text-align: center; margin-top: var(--e-3); }
.sello-boton {
  position: relative; overflow: hidden;
  background: var(--turq-a10);
  border: 1px solid var(--turq-borde);
  color: var(--turq-texto);
  border-radius: var(--r-circulo);
  padding: var(--e-2) var(--e-4);
  font-size: var(--t-mini);
  line-height: var(--lh-mini);
  letter-spacing: var(--ls-mini);
  min-height: 44px;
  transition: background var(--dur-1) var(--ease-revelar);
}
.sello-boton:hover { background: var(--turq-a25); }
/* Pan de oro en el filo del sello de método */
.sello-boton::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background-image: var(--grad-pan-de-oro);
  background-size: 200% 100%;
  background-position: 100% 0;
  transition: background-position var(--dur-3) var(--ease-lineal);
}
.sello-boton:hover::after { background-position: 0 0; }

.desafio-caja { max-width: var(--carril-medio); margin-bottom: var(--e-8); }
.desafio-caja h3 { color: var(--titulo); font-size: var(--t-h4); line-height: var(--lh-h4); margin-bottom: var(--e-2); }
.desafio-caja p { color: var(--tinta-media); font-size: var(--t-cuerpo-s); line-height: var(--lh-cuerpo-s); margin-bottom: var(--e-3); }
.confirmacion-desafio { display: inline-block; margin-left: var(--e-3); color: var(--don); font-size: var(--t-pie); line-height: var(--lh-pie); }

.titulo-reto { font-size: var(--t-h1); line-height: var(--lh-h1); letter-spacing: var(--ls-h1); font-weight: 400; margin-bottom: var(--e-3); }
#panelReto .formulario-compacto { margin-bottom: var(--e-8); }

/* ------------------------------------------------------------------ pie */

.pie { padding: var(--e-12) 0 var(--e-16); border-top: var(--b); margin-top: var(--e-12); }
.pie p { font-size: var(--t-cuerpo-s); line-height: var(--lh-cuerpo-s); color: var(--tinta-media); }
.pie-nota { margin-top: var(--e-2); font-size: var(--t-mini); line-height: var(--lh-mini); }
.pie-guias { margin: var(--e-6) 0 var(--e-2); }
.pie-guias h4 { font-size: var(--t-pie); line-height: var(--lh-pie); letter-spacing: var(--ls-micro); text-transform: uppercase; color: var(--titulo); margin-bottom: var(--e-3); }
.pie-guias ul { display: flex; flex-wrap: wrap; gap: var(--e-2) var(--e-4); list-style: none; padding: 0; margin: 0 0 var(--e-3); }
.pie-guias a { color: var(--tinta-media); text-decoration: none; font-size: var(--t-pie); line-height: var(--lh-pie); }
.pie-guias a:hover { color: var(--titulo); text-decoration: underline; }
.pie-numeros { font-size: var(--t-pie); line-height: var(--lh-pie); }
.pie-numeros a { color: var(--turq-texto); text-decoration: none; padding: 0 var(--e-1); }

/* ------------------------------------------------------------------ vista informe y divisores */

/* Barra de volver, fija arriba del informe */
.barra-volver {
  position: sticky; top: var(--e-16); z-index: 30;
  background: var(--velo-cabecera);
  backdrop-filter: blur(10px);
  border-bottom: var(--b);
}
.barra-volver-fila { display: flex; align-items: center; justify-content: space-between; padding: var(--e-3) var(--e-6); max-width: var(--lienzo); margin: 0 auto; gap: var(--e-4); }
.barra-volver .boton { padding: var(--e-2) var(--e-4); font-size: var(--t-cuerpo-s); }
.barra-volver-nombre { font-family: var(--serif); font-optical-sizing: auto; font-size: var(--t-cuerpo); color: var(--titulo); }

/* Primera sección del informe con aire */
.seccion-portada-informe { padding-top: var(--e-12); }

/* Divisores entre secciones del informe: filete con hueco central y una fila de
   puntos de la tetraktys apoyada encima, sin caja de fondo, así funciona sobre
   cualquier color de sección. */
#informe .seccion { position: relative; }
#informe .seccion + .seccion::before {
  content: '';
  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: min(760px, 86%); height: 1px;
  background: var(--grad-filete);
}
#informe .seccion + .seccion::after {
  content: '';
  position: absolute; top: -1px; left: 50%; transform: translateX(-50%);
  width: 42px; height: 3px;
  background-image: radial-gradient(circle at 1.5px 1.5px, var(--oro-texto) 1.5px, transparent 2px);
  background-size: 12px 3px;
  background-repeat: repeat-x;
}
#informe .seccion:nth-child(even) + .seccion::after { width: 54px; }
#informe .seccion-alterna { background: var(--sup-alterna); }

/* ------------------------------------------------------------------ gato con flechas (sección Flechas) */

.gato-flechas { margin-bottom: var(--e-8); }
.flechas-layout { display: grid; grid-template-columns: auto 1fr; gap: var(--e-12); align-items: start; }
.rejilla-flechas { grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); margin-bottom: 0; }
.cuadricula-envoltura.sin-etiquetas { grid-template-columns: auto; justify-content: start; }
.cuadricula-envoltura.sin-etiquetas .filas-etiquetas { display: none; }

/* ------------------------------------------------------------------ dos gatos (nombre) */

.subtitulo-nombre { font-size: var(--t-h3); line-height: var(--lh-h3); letter-spacing: var(--ls-h3); color: var(--titulo); margin: var(--e-8) 0 var(--e-3); }

.dos-gatos { display: flex; align-items: center; gap: var(--e-6); flex-wrap: wrap; margin: var(--e-4) 0; }
.gato-comparativo { text-align: center; }
.gato-titulo { font-family: var(--serif); font-optical-sizing: auto; color: var(--titulo); font-size: var(--t-cuerpo-s); line-height: var(--lh-cuerpo-s); margin-bottom: var(--e-3); }
.gato-subtitulo { font-size: var(--t-mini); line-height: var(--lh-mini); color: var(--tinta-media); margin-top: var(--e-3); }
.gato-subtitulo b { color: var(--turq-texto); font-weight: 600; }
.gato-vs { font-size: var(--t-h2); line-height: var(--lh-h2); color: var(--oro-texto); flex: none; }

.cuadricula-gato { display: grid; grid-template-columns: repeat(3, 72px); grid-template-rows: repeat(3, 72px); gap: var(--e-1); }
.celda-gato {
  position: relative; background: var(--sup-celda);
  border: var(--b); border-radius: var(--r-1);
  display: flex; align-items: center; justify-content: center;
}
.celda-gato .posicion { position: absolute; top: var(--e-1); right: var(--e-2); font-size: var(--t-micro); line-height: var(--lh-micro); font-weight: 600; color: var(--tinta-media); }
.celda-gato .digitos { font-family: var(--serif); font-optical-sizing: auto; font-size: var(--t-h4); color: var(--titulo); letter-spacing: .08em; }
.celda-gato.vacia { background: var(--sup-celda-vacia); border-style: dashed; border-color: var(--linea-fuerte); }
.celda-gato.vacia .digitos { color: var(--tinta-baja); }
.celda-gato.ocupada { border-color: var(--oro-borde); }
.celda-gato.aporta { border-color: var(--don-borde); background: var(--grad-celda-aporta); }
.celda-gato.aporta .digitos { color: var(--don); }
.celda-gato.refuerza { border-color: var(--oro-borde); background: var(--grad-celda-refuerza); }

.celda-gato.con-letras .digitos { font-size: var(--t-cuerpo-s); letter-spacing: .08em; font-family: var(--sans); font-weight: 600; }
.nota-gatos { font-size: var(--t-pie); line-height: var(--lh-pie); color: var(--tinta-media); max-width: var(--carril-prosa); margin: var(--e-1) 0 var(--e-4); }
.indice-cabecera i { font-style: normal; color: var(--turq-texto); font-size: var(--t-mini); text-transform: uppercase; letter-spacing: var(--ls-mini); font-weight: 600; }
.indice-cabecera small { font-size: var(--t-pie); color: var(--tinta-media); font-family: var(--sans); }

.veredicto-complemento { border-radius: var(--r-3); padding: var(--e-4); margin-bottom: var(--e-2); background: var(--sup-1); border: var(--b); }
.veredicto-complemento.aporta { border-left: 3px solid var(--don); }
.veredicto-complemento.refuerza { border-left: 3px solid var(--intenso); }
.veredicto-complemento.parcial { border-left: 3px solid var(--turq-texto); }
.veredicto-complemento p { color: var(--tinta-media); font-size: var(--t-cuerpo-s); line-height: var(--lh-cuerpo-s); }
.leyenda-gato { display: flex; gap: var(--e-4); flex-wrap: wrap; margin-bottom: var(--e-3); font-size: var(--t-pie); line-height: var(--lh-pie); }
.leyenda-gato .leyenda-item.aporta { color: var(--don); }
.leyenda-gato .leyenda-item.refuerza { color: var(--oro-texto); }

.guia-uso-nombre { background: var(--sup-1); border: var(--b); border-radius: var(--r-3); padding: var(--e-6); margin: var(--e-6) 0; }
.guia-uso-nombre h4 { color: var(--titulo); font-size: var(--t-h4); line-height: var(--lh-h4); margin-bottom: var(--e-3); }
.guia-uso-nombre p { color: var(--tinta-media); font-size: var(--t-cuerpo-s); line-height: var(--lh-cuerpo-s); margin-bottom: var(--e-3); }
.guia-uso-nombre .lista-etiquetada { margin: var(--e-2) 0 var(--e-3); }

/* ------------------------------------------------------------------ compatibilidad ampliada */

.etiqueta-vinculo { font-family: var(--sans); font-size: var(--t-mini); line-height: var(--lh-mini); letter-spacing: var(--ls-mini); text-transform: uppercase; font-weight: 600; color: var(--turq-texto); background: var(--turq-a10); padding: var(--e-1) var(--e-2); border-radius: var(--r-circulo); margin-left: var(--e-2); vertical-align: middle; }
.rejilla-insights { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: var(--e-4); }
.tarjeta-insight { border-radius: var(--r-3); padding: var(--e-6); background: var(--sup-1); border: var(--b); border-top: 3px solid; }
.tarjeta-insight.subir { border-top-color: var(--don); }
.tarjeta-insight.alerta { border-top-color: var(--peligro); }
.tarjeta-insight.clave { border-top-color: var(--intenso); }
.tarjeta-insight .insight-etiqueta { display: block; font-size: var(--t-pie); line-height: var(--lh-pie); letter-spacing: var(--ls-mini); margin-bottom: var(--e-2); font-weight: 600; }
.tarjeta-insight.subir .insight-etiqueta { color: var(--don); }
.tarjeta-insight.alerta .insight-etiqueta { color: var(--peligro); }
.tarjeta-insight.clave .insight-etiqueta { color: var(--titulo); }
.tarjeta-insight p { font-size: var(--t-cuerpo-s); line-height: var(--lh-cuerpo-s); color: var(--tinta-media); }

/* ------------------------------------------------------------------ responsive */

@media (max-width: 900px) {
  .seccion { padding: var(--e-8) 0; }
  .flechas-layout { grid-template-columns: 1fr; gap: var(--e-6); }
  .dos-gatos { justify-content: center; flex-direction: column; }
  .gato-vs { transform: rotate(90deg); }
  /* Cabecera compacta que no desborda en móvil */
  .cabecera-fila { height: auto; min-height: 56px; padding: var(--e-2) 0; flex-wrap: wrap; gap: var(--e-2) var(--e-3); }
  .logo-texto small { display: none; }
  .logo-texto { font-size: var(--t-h4); }
  .logo-simbolo { font-size: var(--t-h3); }
  .nav { gap: var(--e-1); }
  .nav-enlace { padding: var(--e-2); font-size: var(--t-pie); }
  .cabecera .boton { padding: var(--e-2) var(--e-3); font-size: var(--t-pie); }
  /* En móvil la barra de volver fluye normal (la cabecera cambia de alto) */
  .barra-volver { position: static; }
  .portada .contenedor { grid-template-columns: 1fr; gap: var(--e-8); }
  .portada h1 { font-size: var(--t-h1-movil); line-height: var(--lh-h1-movil); }
  .tabla-natal-layout { grid-template-columns: 1fr; --celda: 84px; }
  .tabla-columnas-layout { grid-template-columns: 1fr; --celda: 84px; }
  #tablaColumnasVisual { grid-row: 1; }
  .rejilla-recomendaciones { grid-template-columns: 1fr; }
  .foda-rejilla { grid-template-columns: 1fr; }
  .tarjeta-regente { grid-template-columns: 1fr; }
  .numero-gigante { font-size: var(--t-display); line-height: var(--lh-display); letter-spacing: var(--ls-display); text-align: center; }
  .cuadricula-natal { grid-template-columns: repeat(3, var(--celda, 84px)); grid-template-rows: repeat(3, var(--celda, 84px)); }
  .columnas-etiquetas { grid-template-columns: repeat(3, var(--celda, 84px)); }
  .cuadricula-envoltura { grid-template-columns: auto; justify-content: start; }
  .cuadricula-envoltura .filas-etiquetas { display: none; }
  .titulo-seccion { font-size: var(--t-h3); line-height: var(--lh-h3); letter-spacing: var(--ls-h3); }
}

/* Reflow a 320px (WCAG 1.4.10): con celda de 70px el overlay de flechas,
   que mide 122.22% de la cuadrícula, cabe entero dentro del viewport. */
@media (max-width: 400px) {
  .contenedor { padding: 0 var(--e-4); }
  .tabla-natal-layout { --celda: 70px; }
  .tabla-columnas-layout { --celda: 70px; }
  .cuadricula-natal { grid-template-columns: repeat(3, var(--celda, 70px)); grid-template-rows: repeat(3, var(--celda, 70px)); }
  .columnas-etiquetas { grid-template-columns: repeat(3, var(--celda, 70px)); }
  .cuadricula-gato { grid-template-columns: repeat(3, 62px); grid-template-rows: repeat(3, 62px); }
  .tabla-letras { display: block; overflow-x: auto; }
  .celda-natal .digitos { font-size: var(--t-h3); }
  .celda-natal.vacia .digitos { font-size: var(--t-h4); }
}

/* ------------------------------------------------------------------ movimiento reducido */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
  html { scroll-behavior: auto !important; }
  body::before { animation: none !important; }
  .boton:hover { transform: none; }
  .ayuda-campo:hover { transform: none; }
  .antesala .boton:disabled { opacity: 1; cursor: pointer; }
}

/* ------------------------------------------------------------------ impresión */

@media print {
  body { background: #fff; color: #111; }
  body::before { display: none; }
  .cabecera, .pie, .acciones-informe, #secCompatibilidad form, .portada { display: none; }
}