:root{--dominio:"testruta.com"}
/* Tipografías servidas desde este dominio. Generado por
   herramientas/descargar-fuentes.mjs — no editar a mano.
   Inter y Source Serif 4, SIL Open Font License 1.1. */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url(/fuentes/inter-latin-ext.woff2) format('woff2');
  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;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url(/fuentes/inter-latin.woff2) format('woff2');
  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+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fuentes/source-serif-4-latin-ext.woff2) format('woff2');
  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;
}
@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fuentes/source-serif-4-latin.woff2) format('woff2');
  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+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fuentes/source-serif-4-latin-ext.woff2) format('woff2');
  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;
}
@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fuentes/source-serif-4-latin.woff2) format('woff2');
  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+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ============================================================================
   TestRuta - sistema visual
   Basado en el prototipo aprobado: fondo claro, rojo de señal como acento,
   tarjetas con sombra suave y tipografía Inter. Modo claro únicamente.
   ========================================================================== */

:root {
  --red: #ee1f25;
  --red-dark: #cc141a;
  --red-soft: #fff0f0;
  --ink: #101216;
  --muted: #5d6679;
  --line: #e5e7eb;
  --surface: #ffffff;
  --canvas: #f8f8f7;
  --amber: #eda900;
  --amber-soft: #fff8e9;
  --green: #159c35;
  --green-soft: #edf9ef;
  --blue: #1769c2;
  --blue-soft: var(--blue-soft);

  /* Versiones oscurecidas para TEXTO sobre fondo claro. Los colores de
     marca de arriba valen para rellenos y para texto blanco encima, pero
     como tinta sobre claro no llegaban a 4,5:1. El ambar era el peor caso:
     1,93:1 en el titulo de las cajas "Para memorizar". */
  --amber-ink: #8a6200;   /* 5,19:1 sobre --amber-soft */
  --green-ink: #12802c;   /* 5,06:1 sobre blanco */
  --red-ink:   #cc141a;   /* 5,70:1 sobre blanco */

  /* Rellenos que llevan texto BLANCO encima. Van aparte de --red y --green
     porque en el tema oscuro el color que sirve como tinta sobre el fondo
     (claro, para que se lea) es demasiado claro para aguantar texto blanco.
     Separarlos es lo que permite que los dos temas cumplan contraste. */
  --red-fill: #d81c22;    /* blanco encima: 5,25:1 (el #ee1f25 de marca se queda en 4,32:1) */
  --green-fill: #13872f;  /* blanco encima: 5,17:1 */

  /* Neutros de estructura */
  --line-strong: #d8dce2; /* bordes de control: respuestas, botón secundario */
  --track: #eaebed;       /* fondo de barras y anillos de progreso */
  --canvas-2: #f1f2f4;    /* relleno tenue: chips, hover del secundario */
  --surface-veil: rgba(255, 255, 255, .94);  /* cabecera con blur */

  /* Estados de respuesta del test */
  --ok-border: #83ce94;
  --ok-bg: #f6fcf7;
  --ok-ink: #176b2a;
  --ko-border: #f0a5a7;
  --ko-bg: #fff6f6;
  --ko-ink: #8d1f22;
  --hover-border: #f08b8f;

  /* Bordes de las cajas de color (avisos del manual, chips, etiquetas) */
  --amber-border: #f0d28d;
  --blue-border: #bcd4ef;
  --red-border: #f3bfc0;

  --radius: 16px;
  --shadow: 0 10px 30px rgba(15, 23, 42, .07);
  --container: 1400px;
}

/* ============================================================================
   TEMA OSCURO
   Se aplica solo si el usuario lo pide (data-tema="oscuro") o si su sistema
   lo prefiere y no ha elegido lo contrario. El interruptor vive en app.js y
   recuerda la elección, porque el sitio se usa mucho de noche desde el móvil.

   No es el tema claro con los colores invertidos: los acentos se aclaran para
   que se lean sobre fondo oscuro, y los rellenos que cargan texto blanco se
   oscurecen. Los contrastes anotados están medidos sobre --canvas o sobre el
   fondo que indica cada línea.
   ========================================================================== */
:root[data-tema="oscuro"] {
  --ink: #e8ebf1;         /* 14,9:1 sobre --canvas */
  --muted: #98a1b2;       /* 6,2:1  sobre --canvas */
  --surface: #171a21;
  --canvas: #0e1015;
  --canvas-2: #1f232b;
  --line: #262b34;
  --line-strong: #39404c;
  --track: #2a303a;
  --surface-veil: rgba(23, 26, 33, .92);

  --red: #ff6a6e;         /* 6,4:1 sobre --canvas */
  --red-dark: #ff8286;
  --red-soft: #2b1417;
  --red-ink: #ff8286;
  --red-fill: #d81c22;    /* blanco encima: 5,3:1 */

  --green: #4ed07a;       /* 8,6:1 sobre --canvas */
  --green-soft: #12241a;
  --green-ink: #6fdc95;
  --green-fill: #14803a;  /* blanco encima: 4,6:1 */

  --amber: #f5bc45;       /* 10,4:1 sobre --canvas */
  --amber-soft: #2a2211;
  --amber-ink: #f0c368;

  --blue: #5aa6ec;        /* 7,3:1 sobre --canvas */
  --blue-soft: #14202e;

  --ok-border: #2f6b41;
  --ok-bg: #11231a;
  --ok-ink: #7fdb9a;      /* 9,9:1 sobre --ok-bg */
  --ko-border: #7a3033;
  --ko-bg: #2a1417;
  --ko-ink: #ff9a9d;      /* 7,4:1 sobre --ko-bg */
  --hover-border: #a8474b;
  --amber-border: #4a3a18;
  --blue-border: #23405e;
  --red-border: #5c2a2d;

  --shadow: 0 10px 30px rgba(0, 0, 0, .45);
  color-scheme: dark;
}

/* Quien tenga el sistema en oscuro lo recibe sin tocar nada. El atributo
   data-tema="claro" que escribe el interruptor gana a esta regla. */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    --ink: #e8ebf1;
    --muted: #98a1b2;
    --surface: #171a21;
    --canvas: #0e1015;
    --canvas-2: #1f232b;
    --line: #262b34;
    --line-strong: #39404c;
    --track: #2a303a;
    --surface-veil: rgba(23, 26, 33, .92);

    --red: #ff6a6e;
    --red-dark: #ff8286;
    --red-soft: #2b1417;
    --red-ink: #ff8286;
    --red-fill: #d81c22;

    --green: #4ed07a;
    --green-soft: #12241a;
    --green-ink: #6fdc95;
    --green-fill: #14803a;

    --amber: #f5bc45;
    --amber-soft: #2a2211;
    --amber-ink: #f0c368;

    --blue: #5aa6ec;
    --blue-soft: #14202e;

    --ok-border: #2f6b41;
    --ok-bg: #11231a;
    --ok-ink: #7fdb9a;
    --ko-border: #7a3033;
    --ko-bg: #2a1417;
    --ko-ink: #ff9a9d;
    --hover-border: #a8474b;
  --amber-border: #4a3a18;
  --blue-border: #23405e;
  --red-border: #5c2a2d;

    --shadow: 0 10px 30px rgba(0, 0, 0, .45);
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--canvas);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}
button, input { font: inherit; }
a { color: inherit; text-decoration: none; }
button, a { -webkit-tap-highlight-color: transparent; }
img, svg { display: block; max-width: 100%; }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; border-radius: 6px; }
/* Varias clases del sitio fijan display:flex o grid, y eso ganaba al atributo
   hidden del navegador. Sin esta regla se veian dos barras de botones a la vez. */
[hidden] { display: none !important; }

.skip-link { position: fixed; left: 16px; top: -80px; z-index: 100; padding: 12px 18px; background: var(--ink); color: var(--canvas); border-radius: 8px; }
.skip-link:focus { top: 16px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.container { width: min(calc(100% - 40px), var(--container)); margin-inline: auto; }
.narrow { max-width: 900px; }
.page { min-height: calc(100vh - 76px); padding: 38px 0 56px; }
.section { padding: 28px 0; }
.hidden { display: none !important; }

.eyebrow { display: inline-flex; align-items: center; gap: 9px; padding: 10px 14px; color: var(--amber-ink); background: var(--amber-soft); border: 1px solid var(--amber-border); border-radius: 11px; font-size: .78rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.eyebrow::before { content: "◆"; color: var(--amber); font-size: .72rem; }
.muted { color: var(--muted); }
.red { color: var(--red-ink); }
.green { color: var(--green); }
.kicker { color: var(--red-ink); font-size: .82rem; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.page-title { max-width: 820px; margin: 18px 0 10px; font-size: clamp(2.25rem, 4vw, 4.2rem); line-height: .99; letter-spacing: -.055em; }
.section-title { margin: 0 0 8px; font-size: clamp(1.55rem, 2.4vw, 2.35rem); letter-spacing: -.035em; }
.section-copy { margin: 0; color: var(--muted); font-size: 1.05rem; line-height: 1.7; }
.underline { position: relative; display: inline-block; }
.underline::after { content: ""; position: absolute; left: 2%; right: 2%; bottom: -.09em; height: 4px; background: var(--red); border-radius: 999px; transform: rotate(-1deg); }

/* ---------------------------------------------------------------- Cabecera */
.site-header { position: sticky; top: 0; z-index: 40; height: 76px; background: var(--surface-veil); border-bottom: 1px solid var(--line); backdrop-filter: blur(14px); }
.nav-wrap { height: 100%; display: flex; align-items: center; justify-content: space-between; }
.brand { display: inline-flex; align-items: center; gap: 12px; font-size: 1.65rem; font-weight: 900; letter-spacing: -.04em; }
.brand-sign { width: 44px; height: 44px; display: grid; place-items: center; border: 5px solid #df3036; background: var(--surface); border-radius: 50%; font-size: .9rem; font-weight: 950; }
.nav-group { display: flex; align-items: stretch; height: 100%; gap: 32px; }
.nav-links { display: flex; align-items: stretch; gap: 30px; }
.nav-link { position: relative; display: grid; place-items: center; color: var(--ink); font-weight: 750; }
.nav-link::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--red); transform: scaleX(0); transition: transform .2s ease; }
.nav-link:hover, .nav-link.active { color: var(--red-ink); }
.nav-link.active::after, .nav-link:hover::after { transform: scaleX(1); }
.profile-link { position: relative; align-self: center; width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 12px; font-weight: 850; background: var(--surface); }
.profile-link.active { color: var(--red-dark); background: var(--red-soft); border-color: var(--red-border); }
.profile-link .dot { position: absolute; top: -5px; right: -5px; min-width: 20px; height: 20px; padding: 0 5px; display: none; place-items: center; color: #fff; background: var(--red); border-radius: 999px; font-size: .68rem; font-weight: 850; }
.profile-link .dot.on { display: grid; }
/* Interruptor de tema: mismo tamaño y caja que el acceso al perfil, para que
   los dos controles de la derecha de la cabecera formen un par y no parezca
   que uno se ha colado. Lo inyecta app.js. */
.tema-btn { align-self: center; width: 44px; height: 44px; flex: 0 0 auto; display: grid; place-items: center; margin-right: 10px; color: inherit; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; cursor: pointer; transition: background .15s ease, border-color .15s ease, color .15s ease; }
.tema-btn:hover { color: var(--red-ink); border-color: var(--line-strong); background: var(--canvas-2); }
.tema-btn .ico { width: 21px; height: 21px; }
.mobile-toggle { display: none; width: 44px; height: 44px; border: 1px solid var(--line); background: var(--surface); border-radius: 11px; cursor: pointer; }

/* ------------------------------------------------------------ Componentes */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.btn { min-height: 52px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 0 22px; border: 1px solid transparent; border-radius: 10px; font-weight: 850; cursor: pointer; transition: transform .18s ease, box-shadow .18s ease, background .18s ease; }
.btn:hover { transform: translateY(-2px); }
.btn-primary { color: #fff; background: var(--red-fill); box-shadow: 0 9px 20px rgba(238,31,37,.22); }
.btn-primary:hover { background: var(--red-dark); }
.btn-secondary { background: var(--surface); border-color: var(--line-strong); }
.btn-secondary:hover { background: var(--canvas-2); }
.btn-small { min-height: 40px; padding: 0 16px; border-radius: 8px; font-size: .92rem; }
.btn:disabled { opacity: .5; cursor: default; transform: none; }
.button-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.icon-bubble { flex: 0 0 auto; width: 52px; height: 52px; display: grid; place-items: center; border-radius: 50%; background: var(--red-soft); color: var(--red-ink); font-size: 1.45rem; font-weight: 900; }
.icon-bubble.amber { background: var(--amber-soft); color: var(--amber); }
.icon-bubble.green { background: var(--green-soft); color: var(--green); }
.icon-bubble.blue { background: var(--blue-soft); color: var(--blue); }
.icon-bubble.small { width: 40px; height: 40px; font-size: 1.05rem; }
.tag { display: inline-flex; align-items: center; gap: 5px; padding: 5px 9px; color: var(--amber-ink); background: var(--amber-soft); border: 1px solid var(--amber-border); border-radius: 999px; font-size: .72rem; font-weight: 800; }
.status { display: inline-flex; padding: 5px 12px; border-radius: 999px; font-size: .76rem; font-weight: 850; }
.status.success { color: var(--green-ink); background: var(--green-soft); }
.status.review { color: var(--amber-ink); background: var(--amber-soft); }
.progress { height: 8px; overflow: hidden; background: var(--line); border-radius: 999px; }
.progress > span { display: block; height: 100%; width: 0; background: var(--green); border-radius: inherit; transition: width .3s ease; }
.ring { --value: 0; position: relative; width: 128px; aspect-ratio: 1; display: grid; place-items: center; border-radius: 50%; background: conic-gradient(var(--green) calc(var(--value) * 1%), var(--track) 0); }
.ring::before { content: ""; position: absolute; width: 94px; aspect-ratio: 1; background: var(--surface); border-radius: 50%; }
.ring strong { position: relative; z-index: 1; color: var(--green); font-size: 1.7rem; }

/* -------------------------------------------------------------------- Home */
.home-page { padding-top: 0; }
/* La portada se mantiene algo más estrecha que el resto del sitio para que el
   hero no se estire en pantallas muy anchas. */
.home-page .container { max-width: 1320px; }
.home-hero { position: relative; overflow: hidden; padding: 34px 0 40px; background: var(--canvas); }
/* Formas de fondo muy suaves, solo geometría: ni una imagen. */
.home-hero::before { content: ""; position: absolute; top: -170px; right: -90px; width: 460px; height: 460px;
  background: radial-gradient(circle, rgba(238,31,37,.07), rgba(238,31,37,0) 68%); border-radius: 50%; }
.home-hero::after { content: ""; position: absolute; right: -6%; bottom: -190px; width: 52%; height: 420px;
  border: 74px solid rgba(93,102,121,.07); border-left-color: transparent; border-radius: 50%; transform: rotate(-10deg); }
/* La tarjeta de demo es bastante mas alta que la columna de texto. Centrando la
   fila, el sobrante se reparte arriba y abajo en vez de dejar un hueco al pie. */
.hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 46fr 54fr;
  align-items: center; gap: 52px; }
.hero-texto { padding-top: 6px; }
.home-title { max-width: 14ch; margin: 20px 0 20px; font-size: clamp(2.4rem, 4.4vw, 4.4rem);
  line-height: 1.02; letter-spacing: -.055em; text-wrap: balance; }
/* Subrayado corto y decorativo bajo el remate rojo del titular. */
.subrayado { position: relative; display: inline-block; }
.subrayado::after { content: ""; position: absolute; left: 3px; bottom: -.18em; width: 22%; min-width: 92px;
  height: 7px; background: var(--red); border-radius: 999px; }
.home-copy { max-width: 46ch; margin-bottom: 0; color: var(--muted); font-size: 1.1rem; line-height: 1.7; }
.home-copy strong { color: var(--ink); font-weight: 600; }
.ventajas { display: flex; flex-wrap: wrap; gap: 10px; margin: 26px 0 0; padding: 0; list-style: none; }
.ventajas li { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 8px 15px;
  color: var(--muted); background: var(--surface); border: 1px solid var(--line); border-radius: 999px;
  font-size: .9rem; font-weight: 600; }
.ventajas .ico { width: 17px; height: 17px; color: var(--green); }
/* Cifras del banco al pie del titular: rellenan la columna y son prueba social. */
.hero-cifras { display: flex; flex-wrap: wrap; gap: 34px; margin: 34px 0 0; padding: 26px 0 0;
  border-top: 1px solid var(--line); }
.hero-cifras dt { color: var(--ink); font-size: 1.65rem; font-weight: 800; letter-spacing: -.03em;
  line-height: 1.1; }
.hero-cifras dd { margin: 3px 0 0; color: var(--muted); font-size: .86rem; font-weight: 600; }
.stats-strip { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(5, 1fr); margin-top: 34px; padding: 22px; }
.stat { display: flex; align-items: center; gap: 14px; padding: 0 18px; border-right: 1px solid var(--line); }
.stat:last-child { border-right: 0; }
.stat strong { display: block; font-size: 1.55rem; }
.stat small { color: var(--muted); }
.benefit-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 24px; }
.benefit-card { padding: 24px; }
.benefit-card h3 { margin: 18px 0 8px; }
.benefit-card p { margin: 0; }

/* ------------------------------------------------- Tarjeta de pregunta ---- */
.question-card { padding: 30px 32px; border-radius: 18px; }
.question-head { display: flex; align-items: center; gap: 20px; padding-bottom: 24px; border-bottom: 1px solid var(--line); font-size: .95rem; }
.question-head .progress { flex: 1; }
.question-head #num-pregunta { padding: 10px 14px; color: var(--red-dark); background: var(--red-soft); border-radius: 10px; }
.question-head #contador { white-space: nowrap; }
.question-card .progress { height: 8px; }
.question-card .progress > span { background: var(--red); }
.question-body { padding-top: 26px; }
.question-grid { min-width: 0; }
.question-body.has-photo .question-grid { display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1fr); gap: 38px; align-items: start; }
.question-body.has-photo .question-foto { height: 100%; min-height: 330px; max-height: 410px; margin: 0; aspect-ratio: auto; }
.question-copy { min-width: 0; }
.question-title { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; margin: 0 0 18px; font-size: 1.45rem; line-height: 1.3; letter-spacing: -.02em; }
.answer { width: 100%; min-height: 72px; display: flex; align-items: center; gap: 14px; margin: 12px 0; padding: 18px 20px; text-align: left; background: var(--surface); border: 1px solid var(--line-strong); border-radius: 12px; cursor: pointer; transition: border-color .15s ease, background .15s ease, box-shadow .15s ease, transform .15s ease; }
.answer::before { content: ""; flex: 0 0 auto; width: 20px; height: 20px; border: 2px solid var(--line-strong); border-radius: 50%; }
.answer:hover:not(:disabled) { border-color: var(--hover-border); transform: translateY(-1px); }
/* Al corregir una pregunta, las tres opciones se deshabilitan para que no se
   pueda cambiar la respuesta. El estilo propio del navegador para un <button>
   deshabilitado pinta el texto al 30 % de opacidad; con color-scheme: dark eso
   deja el enunciado de las opciones prácticamente invisible justo en el momento
   en que hay que leerlas para entender el fallo. Se devuelve el color a mano. */
.answer:disabled { cursor: default; color: var(--ink); opacity: 1; -webkit-text-fill-color: var(--ink); }
.answer.selected { border-color: var(--red-ink); background: var(--red-soft); box-shadow: 0 0 0 3px rgba(238,31,37,.08); }
/* El punto del radio marcado se dibuja con un anillo interior blanco: el nucleo
   rojo ocupa casi todo el circulo y se distingue de un vistazo, tambien de lejos. */
.answer.selected::before { content: ""; background: var(--red); border-color: var(--red-ink); box-shadow: inset 0 0 0 2.5px #fff; }
.answer.correct { border-color: var(--ok-border); background: var(--ok-bg); }
.answer.correct::before { content: "✓"; display: grid; place-items: center; color: #fff; background: var(--green-fill); border-color: var(--green-fill); font-size: .72rem; font-weight: 900; }
.answer.wrong { border-color: var(--ko-border); background: var(--ko-bg); }
.answer.wrong::before { content: "✕"; display: grid; place-items: center; color: #fff; background: var(--red-fill); border-color: var(--red-fill); font-size: .72rem; font-weight: 900; }
.explanation { display: none; margin-top: 12px; padding: 15px; color: var(--ok-ink); background: var(--green-soft); border-radius: 10px; line-height: 1.55; }
.explanation.show { display: block; }
.explanation.ko { color: var(--ko-ink); background: var(--red-soft); }
.explanation strong { display: block; margin-bottom: 4px; }

/* ------------------------------------------------------- Ejecución de test */
.pantalla { display: none; }
.pantalla.activa { display: block; }
.runner { padding: 38px 0 52px; }
.runner-wrap { width: min(calc(100% - 48px), 1180px); margin-inline: auto; }
.runner-top { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 16px; flex-wrap: wrap; }
.runner-label { display: inline-flex; align-items: center; gap: 9px; font-weight: 850; }
.crono { display: inline-flex; align-items: center; gap: 8px; padding: 9px 15px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; font-variant-numeric: tabular-nums; font-weight: 850; }
.crono.apurando { color: var(--red-ink); border-color: var(--red-border); background: var(--red-soft); }
.runner-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 20px; flex-wrap: wrap; }
.keys { margin-top: 16px; text-align: center; color: var(--muted); font-size: .84rem; }
.keys kbd { display: inline-block; padding: 2px 7px; background: var(--surface); border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 5px; font: inherit; font-size: .9em; }
@media (max-width: 700px) { .keys { display: none; } }

/* ------------------------------------------- Modo concentración en el test --
   Antes de esto, en un móvil de 812 px la primera opción de respuesta caía en
   y=671: la tercera quedaba fuera de pantalla y había que hacer scroll en cada
   una de las 30 preguntas del examen. La causa no era una sola, eran seis
   capas de adorno apiladas sobre la pregunta (migas, nombre del test,
   cronómetro suelto, chapa "Pregunta 1 de 10", padding de tarjeta y foto).

   Mientras se responde no hace falta nada de eso: quien está en la pregunta 7
   no va a navegar el sitio. Se recorta todo y las tres opciones entran. */
body.en-test .migas,
body.en-test .site-footer { display: none; }

/* La chapa "Pregunta 1 de 10" y el contador "1 / 10" decían lo mismo, uno al
   lado del otro. Se queda el contador, que ocupa una cuarta parte. */
.question-head #num-pregunta { display: none; }
.question-head #contador { font-variant-numeric: tabular-nums; }

@media (max-width: 760px) {
  body.en-test .runner { padding: 10px 0 40px; }

  /* Nombre del test y cronómetro en una sola fila pegada bajo la cabecera:
     el tiempo tiene que verse sin scroll durante todo el examen. */
  .runner-top { position: sticky; top: 76px; z-index: 30; gap: 10px; margin-bottom: 12px; padding: 10px 0; flex-wrap: nowrap; background: var(--canvas); }
  .runner-label { min-width: 0; font-size: .88rem; }
  .runner-label #etiqueta-tema { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  .crono { flex: 0 0 auto; padding: 7px 12px; }

  /* El padding de la tarjeta, el cuerpo de la pregunta y la altura de la foto
     se ajustan más abajo, en el bloque responsive general, que es el que
     manda por orden de aparición. Aquí solo lo que es propio del test. */
  .question-head { gap: 12px; padding-bottom: 13px; }
  .question-body { padding-top: 14px; }
  .answer { min-height: 58px; margin: 8px 0; padding: 13px 15px; }
}

/* --------------------------------------------------------------- Resultado */
.result-card { padding: 34px; text-align: center; }
.result-ring { --value: 0; width: 178px; margin: 0 auto 22px; background: conic-gradient(var(--green) calc(var(--value) * 1%), var(--track) 0); }
.result-ring::before { width: 138px; }
.result-ring strong { color: var(--ink); font-size: 2.6rem; letter-spacing: -.04em; line-height: 1; }
.result-ring small { position: relative; z-index: 1; color: var(--muted); font-size: .95rem; }
.result-ring.ko { background: conic-gradient(var(--red) calc(var(--value) * 1%), var(--track) 0); }
.result-title { margin: 0 0 8px; font-size: clamp(1.7rem, 3vw, 2.4rem); letter-spacing: -.04em; }
.result-meta { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 18px 0 6px; }
.result-meta span { padding: 8px 14px; background: var(--canvas); border: 1px solid var(--line); border-radius: 999px; font-size: .88rem; font-weight: 700; }
.review { margin-top: 34px; text-align: left; }
.review h3 { margin: 0 0 14px; }
.review-item { padding: 18px; margin-bottom: 12px; background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--red); border-radius: 12px; }
.review-item .q { margin: 0 0 10px; font-weight: 750; }
.review-item p { margin: 0 0 6px; font-size: .92rem; }
.review-item .exp { margin: 8px 0 0; color: var(--muted); }

/* ------------------------------------------------------------------- Tests */
.tests-hero { display: grid; grid-template-columns: 1.1fr .9fr; gap: 28px; align-items: center; }
.progress-card { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 26px; }
.progress-card h3 { margin: 0 0 8px; }
.progress-card .meta { min-width: 0; flex: 1; }
.progress-card .meta p { margin: 0 0 4px; }
.progress-card .progress { margin-top: 22px; }
.tabs { display: flex; gap: 8px; margin: 30px 0 20px; padding: 7px; overflow-x: auto; }
.tab { padding: 12px 18px; white-space: nowrap; color: var(--muted); background: transparent; border: 0; border-radius: 9px; font-weight: 780; cursor: pointer; }
.tab.active { color: #fff; background: var(--red-fill); }
.test-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.test-card { display: flex; flex-direction: column; gap: 18px; padding: 22px; }
.test-card[hidden] { display: none; }
.test-card-top { display: flex; gap: 14px; align-items: flex-start; }
.test-card h3 { margin: 2px 0 6px; font-size: 1.04rem; }
.test-card .card-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; }
.test-card .progress { flex: 1; }
.exam-callout { display: flex; align-items: center; gap: 20px; margin-top: 26px; padding: 24px; background: var(--amber-soft); border-color: var(--amber-border); }
.exam-callout h2 { margin: 0 0 4px; }
.exam-callout .btn { margin-left: auto; }

/* ------------------------------------------------------------------- Guías */
.guides-hero { display: grid; grid-template-columns: .9fr 1.1fr; gap: 28px; align-items: stretch; }
.search { position: relative; display: block; margin-top: 22px; }
.search input { width: 100%; min-height: 56px; padding: 0 18px 0 48px; background: var(--surface); border: 1px solid var(--line-strong); border-radius: 12px; outline: none; }
.search input:focus { border-color: var(--red-ink); box-shadow: 0 0 0 4px var(--red-soft); }
.search::before { content: ""; position: absolute; left: 17px; top: 17px; width: 22px; height: 22px; background: currentColor; color: var(--muted);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='M16 16l4 4'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='M16 16l4 4'/%3E%3C/svg%3E") center/contain no-repeat; }
.featured-guide { display: grid; grid-template-columns: 1fr .7fr; gap: 22px; padding: 28px; }
.featured-art { display: grid; place-items: center; min-height: 230px; color: var(--red-ink); background: radial-gradient(circle, #fff 20%, #e8f4fb); border-radius: 14px; font-size: 4.7rem; }
.featured-guide h2 { margin: 14px 0 10px; font-size: 2rem; line-height: 1.05; letter-spacing: -.03em; }
.categories { display: flex; flex-wrap: wrap; gap: 9px; margin: 28px 0 20px; }
.category { padding: 11px 16px; color: #373d4b; background: var(--surface); border: 1px solid var(--line); border-radius: 999px; font-weight: 750; cursor: pointer; }
.category.active { color: #fff; background: var(--red-fill); border-color: var(--red-fill); }
.article-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.article-card { display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: center; padding: 20px; }
.article-card h3 { margin: 0 0 10px; font-size: 1rem; line-height: 1.35; }
.article-card .article-footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.article-card[hidden] { display: none; }
.sin-resultados { padding: 30px; text-align: center; color: var(--muted); }

/* ------------------------------------------------------------------ Examen */
.exam-hero { display: grid; grid-template-columns: 1fr .95fr; gap: 30px; align-items: center; }
.summary-card { padding: 28px; }
.summary-card h2 { margin: 0 0 18px; }
.summary-content { display: grid; grid-template-columns: 180px 1fr; align-items: center; gap: 20px; }
.exam-ring { --value: 90; width: 166px; }
.exam-ring::before { width: 122px; }
.exam-ring strong { color: var(--ink); font-size: 2.2rem; text-align: center; line-height: .85; }
.summary-list { display: grid; gap: 8px; }
.summary-item { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 9px; }
.steps { display: grid; grid-template-columns: repeat(3, 1fr); margin: 28px 0 16px; overflow: hidden; }
.step { position: relative; display: flex; gap: 16px; align-items: center; padding: 25px; }
.step:not(:last-child)::after { content: ""; position: absolute; right: -1px; top: 50%; width: 40px; height: 5px; background: var(--red); transform: translate(50%, -50%); z-index: 2; }
.step-number { flex: 0 0 auto; width: 52px; height: 52px; display: grid; place-items: center; border: 2px solid var(--red); border-radius: 50%; font-size: 1.25rem; font-weight: 900; }
.step h3 { margin: 0 0 5px; }
.step p { margin: 0; color: var(--muted); line-height: 1.45; }
.exam-info-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.info-card { padding: 24px; }
.info-card h3 { margin-top: 0; }
.check-list { display: grid; gap: 14px; padding: 0; margin: 0; list-style: none; }
.check-list li { display: flex; gap: 10px; align-items: center; }
.check-list li::before { content: "✓"; flex: 0 0 auto; width: 28px; height: 28px; display: grid; place-items: center; color: var(--green); background: var(--green-soft); border-radius: 50%; font-weight: 900; }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item:last-child { border-bottom: 0; }
.faq-question { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 15px 0; text-align: left; background: transparent; border: 0; font-weight: 750; cursor: pointer; }
.faq-question span { transition: transform .2s ease; }
.faq-answer { display: none; padding: 0 0 16px; color: var(--muted); line-height: 1.6; }
.faq-item.open .faq-answer { display: block; }
.faq-item.open .faq-question span { transform: rotate(45deg); }

/* ------------------------------------------------------------------ Perfil */
.profile-heading { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 22px; flex-wrap: wrap; }
.profile-heading h1 { margin: 0 0 8px; font-size: clamp(2rem, 3.3vw, 3.25rem); letter-spacing: -.045em; }
.dashboard { display: grid; grid-template-columns: 250px 1fr 310px; gap: 20px; align-items: start; }
.profile-card { padding: 28px 20px; text-align: center; }
.avatar { width: 90px; height: 90px; display: grid; place-items: center; margin: 0 auto 16px; background: var(--red-soft); border-radius: 50%; font-size: 2rem; font-weight: 900; }
.profile-card h2 { margin: 0 0 7px; font-size: 1.2rem; }
.profile-card .btn { width: 100%; margin-top: 10px; }
.dashboard-main { display: grid; gap: 20px; }
.dashboard-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.metric-card { padding: 19px; }
.metric-card strong { display: block; margin-bottom: 3px; font-size: 1.65rem; letter-spacing: -.03em; }
.dashboard-panels { display: grid; grid-template-columns: 1.05fr .95fr; gap: 16px; }
.chart-card, .topic-card, .history-card, .next-card, .goal-card { padding: 22px; }
.chart-card h3, .topic-card h3, .history-card h3, .next-card h3, .goal-card h3 { margin-top: 0; }
.bars { height: 190px; display: flex; align-items: flex-end; justify-content: space-around; gap: 10px; padding-top: 18px; border-bottom: 1px solid var(--line); }
.day { flex: 1; display: grid; justify-items: center; align-content: end; gap: 8px; color: var(--muted); font-size: .78rem; height: 100%; }
.bar { width: min(32px, 70%); height: var(--h, 2%); min-height: 3px; background: var(--green); border-radius: 6px 6px 0 0; transform-origin: bottom; animation: grow .7s ease both; }
.bar.vacio { background: var(--line); }
@keyframes grow { from { transform: scaleY(0); } }
.topic-row { margin: 16px 0; }
.topic-label { display: flex; justify-content: space-between; margin-bottom: 6px; font-size: .9rem; }
.history-card table { width: 100%; border-collapse: collapse; }
.history-card th, .history-card td { padding: 13px 9px; text-align: left; border-bottom: 1px solid var(--line); font-size: .88rem; }
.history-card th { color: var(--muted); font-weight: 700; }
.dashboard-side { display: grid; gap: 20px; }
.next-card .btn, .goal-card .btn { width: 100%; margin-top: 15px; }
.empty-state { padding: 40px 24px; text-align: center; }
.empty-state h2 { margin: 14px 0 8px; }
.empty-state p { max-width: 46ch; margin: 0 auto 22px; color: var(--muted); }

/* ------------------------------------------------------------------- Prosa */
.prose { max-width: 74ch; }
.prose h2 { margin: 1.9em 0 .5em; font-size: clamp(1.4rem, 2.1vw, 1.85rem); letter-spacing: -.03em; }
.prose h3 { margin: 1.6em 0 .4em; font-size: 1.15rem; }
.prose p { margin: 0 0 1.05em; line-height: 1.75; }
.prose ul, .prose ol { margin: 0 0 1.2em; padding-left: 1.3em; }
.prose li { margin-bottom: .45em; line-height: 1.65; }
.prose a { color: var(--red-ink); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.prose > *:first-child { margin-top: 0; }
.prose-card { padding: 30px 34px; }
.tabla { width: 100%; border-collapse: collapse; margin: 1.3em 0; font-size: .95rem; }
.tabla th, .tabla td { padding: 12px 14px; text-align: left; border-bottom: 1px solid var(--line); }
.tabla th { color: var(--muted); font-weight: 800; font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; }
.tabla tr:last-child td { border-bottom: 0; }
.envuelve-tabla { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.aviso-caja { margin: 1.5em 0; padding: 18px 20px; background: var(--amber-soft); border: 1px solid var(--amber-border); border-radius: 12px; }
.aviso-caja p:last-child { margin-bottom: 0; }
.migas { display: flex; flex-wrap: wrap; gap: 6px; padding: 20px 0 0; color: var(--muted); font-size: .85rem; }
.migas a:hover { color: var(--red-ink); }

/* --------------------------------------------------------------- Anuncios */
.anuncio { margin: 32px 0; text-align: center; }
.anuncio:empty { display: none; }
/* Ya no se pintan huecos vacíos: si no hay anuncio, no hay caja. */

/* -------------------------------------------------------- Pie y utilidades */
/* Pie a cuatro columnas: marca, practicar, aprender y legal. Antes era una
   sola tira con los doce enlaces seguidos, en la que la privacidad pesaba lo
   mismo que el simulacro y el parrafo legal quedaba huerfano debajo. */
.site-footer { margin-top: 56px; padding: 52px 0 26px; color: var(--muted); background: var(--surface);
  border-top: 1px solid var(--line); }
.pie-grid { display: grid; grid-template-columns: minmax(240px, 1.6fr) repeat(3, minmax(150px, 1fr));
  gap: 40px; }
.pie-marca .brand { font-size: 1.35rem; }
.pie-marca .brand-sign { width: 36px; height: 36px; border-width: 4px; font-size: .74rem; }
.pie-marca p { margin: 16px 0 0; max-width: 34ch; font-size: .89rem; line-height: 1.65; }
.pie-datos { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 0; padding: 0; list-style: none; }
.pie-datos li { padding: 6px 12px; background: var(--canvas); border: 1px solid var(--line);
  border-radius: 999px; font-size: .78rem; }
.pie-datos strong { color: var(--ink); font-variant-numeric: tabular-nums; }

.pie-col { display: flex; flex-direction: column; align-items: flex-start; gap: 11px; }
.pie-col h2 { margin: 0 0 3px; color: var(--ink); font-size: .78rem; font-weight: 800;
  letter-spacing: .09em; text-transform: uppercase; }
.pie-col a, .pie-col .enlace-pie { font-size: .89rem; line-height: 1.35; text-align: left; }
.pie-col a:hover, .pie-col .enlace-pie:hover { color: var(--red-ink); }

.pie-legal { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: 16px 40px; margin-top: 44px; padding-top: 22px; border-top: 1px solid var(--line); }
.pie-legal p { max-width: 88ch; margin: 0; font-size: .8rem; line-height: 1.65; }
.pie-legal span { flex: 0 0 auto; font-size: .8rem; }
/* El acceso a la configuracion de privacidad es un boton, porque abre el
   mensaje de la CMP, pero en el pie tiene que leerse como un enlace mas. */
.enlace-pie { padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; }
.enlace-pie:hover { color: var(--red-ink); }

.toast { position: fixed; right: 22px; bottom: 22px; z-index: 80; max-width: 360px; padding: 15px 18px; color: #fff; background: #15171b; border-radius: 11px; box-shadow: var(--shadow); transform: translateY(130%); opacity: 0; transition: .25s ease; }
.toast.show { transform: translateY(0); opacity: 1; }
.sin-js { margin: 0; padding: 14px 20px; color: #fff; background: var(--red); text-align: center; font-size: .92rem; }


/* -------------------------------------------------- Iconos y señalización */
/* Todos los iconos son SVG de trazo, heredan el color del texto y escalan
   con la tipografía. Las señales son dibujos exactos, no fotografías. */
.ico { width: 1.15em; height: 1.15em; flex: 0 0 auto; }
.btn .ico { width: 20px; height: 20px; }
.btn-small .ico { width: 17px; height: 17px; }
/* Dentro de la burbuja el icono ocupaba la mitad del circulo y con trazo de 2 se
   quedaba en un garabato fino. Mas tamano y algo mas de trazo para que pese. */
.icon-bubble .ico { width: 29px; height: 29px; stroke-width: 1.9; }
.icon-bubble.small .ico { width: 23px; height: 23px; stroke-width: 2; }
.mobile-toggle .ico { width: 22px; height: 22px; margin: 0 auto; }
.profile-link .ico { width: 22px; height: 22px; }
.crono .ico { width: 18px; height: 18px; }
.kicker .ico, .muted .ico { width: 15px; height: 15px; vertical-align: -2px; }
.metric-card .ico { width: 24px; height: 24px; vertical-align: -3px; }
.result-meta .ico { width: 16px; height: 16px; vertical-align: -3px; }
.runner-label .ico { color: var(--red-ink); }
.summary-item .ico { width: 22px; height: 22px; }
.check-list .ico { width: 18px; height: 18px; }

/* Las señales oficiales vienen en proporciones distintas: cuadradas, triangulares
   (512x453), verticales (512x768) y apaisadas (512x341). Por eso se fija la
   altura de referencia y el ancho queda libre; object-fit: contain garantiza
   que ninguna se estire, sea cual sea el archivo que se ponga en la carpeta. */
.senal { flex: 0 0 auto; height: 112px; width: auto; max-width: 100%; object-fit: contain; }
svg.senal { width: 112px; }
.senal-pregunta { height: clamp(84px, 12vw, 118px); width: auto; max-width: 42%;
  filter: drop-shadow(0 8px 18px rgba(15, 23, 42, .18)); }
svg.senal-pregunta { width: clamp(84px, 12vw, 118px); }
.senal-mini { height: 46px; width: auto; }
svg.senal-mini { width: 46px; }
.senal-catalogo { height: 100%; width: 100%; max-height: 108px; }

.senal-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(228px, 1fr)); gap: 16px; margin-top: 22px; }
.senal-card { display: flex; flex-direction: column; padding: 22px 20px; text-align: center; }
.senal-caja { display: grid; place-items: center; height: 140px; margin-bottom: 15px; padding: 14px;
  background: linear-gradient(180deg, #fff, var(--canvas-2)); border: 1px solid var(--line); border-radius: 12px; }
.senal-card h3 { margin: 0 0 8px; font-size: 1rem; line-height: 1.3; }
.senal-card p { margin: 0; font-size: .87rem; line-height: 1.55; }
.featured-art .senal { height: 150px; width: auto; }
.featured-art svg.senal { width: 150px; }
.summary-item .senal-mini { height: 40px; width: auto; }
.summary-item svg.senal-mini { width: 40px; }
.review-item.con-senal { display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: start; }

.senales-teaser { display: grid; grid-template-columns: 1fr 1.05fr; gap: 34px; align-items: center; padding: 34px 38px; }
.senales-muestra { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; place-items: center; }
.senales-muestra { align-items: center; }
.senal-muestra { height: 92px; width: auto; max-width: 100%; object-fit: contain; transition: transform .2s ease; }
svg.senal-muestra { width: 92px; }
.senales-muestra .senal-muestra:hover { transform: translateY(-4px) scale(1.06); }

/* ------------------------------------------------------- Fotografías ---- */
/* Opcionales: si el archivo no está, el build no emite la etiqueta y el hueco
   desaparece sin dejar rastro. */
.question-foto { margin: 0 0 20px; border-radius: 12px; overflow: hidden; background: var(--canvas-2); aspect-ratio: 3 / 2; max-height: 250px; }
.question-foto img { width: 100%; height: 100%; object-fit: cover; }
.pagina-foto { margin: 8px 0 4px; border-radius: var(--radius); overflow: hidden; background: var(--canvas-2); aspect-ratio: 16 / 6; max-height: 320px; box-shadow: var(--shadow); }
.pagina-foto img { width: 100%; height: 100%; object-fit: cover; }
.question-card .question-foto + .question-title { margin-top: 0; }


/* ------------------------------------------------- Examen: rejilla y nav --
   La prueba real deja moverse por las 30 preguntas y marcar las dudosas.
   Esta rejilla es el mapa de estado que se ve en la Jefatura. */
.paleta { display: grid; grid-template-columns: repeat(auto-fit, minmax(34px, 1fr)); gap: 6px; margin-bottom: 18px; padding: 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.celda { min-width: 34px; height: 34px; padding: 0; display: grid; place-items: center; color: var(--muted); background: var(--canvas-2); border: 2px solid transparent; border-radius: 8px; font-size: .82rem; font-weight: 800; cursor: pointer; transition: transform .12s ease; }
.celda:hover { transform: translateY(-2px); }
.celda.respondida { color: #fff; background: var(--green); }
.celda.marcada { border-color: var(--amber); background: var(--amber-soft); color: var(--amber-ink); }
.celda.marcada.respondida { background: var(--amber); color: #fff; }
.celda.actual { border-color: var(--ink); box-shadow: 0 0 0 3px rgba(16,18,22,.12); }
.runner-foot.examen { display: flex; flex-wrap: wrap; gap: 18px; justify-content: space-between; align-items: center; margin-top: 30px; padding-top: 28px; border-top: 1px solid var(--line); }
.nav-examen { display: flex; gap: 8px; flex-wrap: wrap; }
.acciones-examen { display: flex; align-items: stretch; gap: 12px; }
.acciones-examen #btn-siguiente-examen { min-width: 190px; }
.btn-finalizar { min-height: 52px; padding: 0 20px; color: var(--red-dark); background: var(--surface); border: 1px solid var(--hover-border); border-radius: 10px; font-weight: 850; cursor: pointer; transition: transform .18s ease, background .18s ease; }
.btn-finalizar:hover { background: var(--red-soft); transform: translateY(-2px); }
#btn-marcar.activo { color: var(--red-dark); background: var(--red-soft); border-color: var(--ko-border); }
.review-cabecera { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.review-cabecera h3 { margin: 0; }
.filtros-repaso { margin: 0; padding: 4px; background: var(--canvas-2); border-radius: 10px; }
.filtros-repaso .tab { padding: 8px 14px; font-size: .88rem; }
.review-item.acierto { border-left-color: var(--green); }
.review-num { display: inline-grid; place-items: center; width: 24px; height: 24px; margin-right: 8px; color: var(--muted); background: var(--canvas-2); border-radius: 6px; font-size: .78rem; font-weight: 800; vertical-align: 1px; }


/* --------------------------------------------------- Tests numerados ---- */
.rejilla-tests { display: grid; grid-template-columns: repeat(auto-fill, minmax(74px, 1fr)); gap: 10px; margin-top: 20px; }
.celda-test { display: grid; place-items: center; gap: 2px; min-height: 66px; padding: 8px 4px; color: var(--muted); background: var(--surface); border: 1px solid var(--line); border-radius: 12px; cursor: pointer; transition: transform .12s ease, border-color .12s ease; }
.celda-test:hover { transform: translateY(-3px); border-color: var(--red-ink); color: var(--red-ink); }
.celda-test b { font-size: 1.02rem; font-weight: 850; }
.celda-test small { font-size: .7rem; font-weight: 700; }
.celda-test.apto { color: var(--green-ink); background: var(--green-soft); border-color: #a9dfb6; }
.celda-test.suspenso { color: var(--amber-ink); background: var(--amber-soft); border-color: var(--amber-border); }
.cabecera-rejilla { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: space-between; }
.cabecera-rejilla h2 { margin: 0; }
.paginacion { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: .9rem; }
.ir-a-test { display: flex; gap: 8px; }
.ir-a-test input { width: 150px; min-height: 52px; padding: 0 14px; background: var(--surface); border: 1px solid var(--line-strong); border-radius: 10px; }
.ir-a-test input:focus { outline: none; border-color: var(--red-ink); box-shadow: 0 0 0 4px var(--red-soft); }
.interruptor { display: inline-flex; align-items: center; gap: 10px; margin-top: 18px; color: var(--muted); font-size: .92rem; cursor: pointer; }
.interruptor input { width: 18px; height: 18px; accent-color: var(--red-ink); cursor: pointer; }


/* --------------------------------------------- Loguitos con imagen ------ */
/* Los círculos de 52 px admiten fotografía o la señal real. Los iconos
   pequeños (18-24 px) siguen siendo vectoriales: a ese tamaño una foto no
   se distingue de una mancha de color. */
.icon-bubble.con-imagen { padding: 7px; background: var(--surface); border: 1px solid var(--line); }
.icon-bubble .senal-burbuja { height: 100%; width: 100%; max-height: 38px; object-fit: contain; }
.icon-bubble svg.senal-burbuja { width: 38px; height: 38px; }
.ico-foto { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.icon-bubble:has(.ico-foto) { padding: 0; overflow: hidden; }


/* ------------------------------------------------- Loguitos de las guías -- */
/* Ilustraciones propias, sin el círculo de color: ya traen su propio fondo
   y su forma. Si falta el archivo se usa el icono vectorial en su burbuja. */
.ico-guia { flex: 0 0 auto; width: 72px; height: 72px; object-fit: contain; }
.ico-guia.grande { width: 100%; max-width: 190px; height: auto; }
.featured-art .ico-guia.grande { max-width: 220px; }
.cabecera-guia { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.cabecera-guia > div { flex: 1 1 320px; }
.cabecera-guia .ico-guia.grande { max-width: 150px; }


/* ------------------------------------------- Tarjeta de prueba (portada) -- */
.demo-card { padding: 26px; border-radius: 18px; }
.demo-card .question-head { padding-bottom: 14px; }
.demo-card .question-body { padding-top: 18px; }
.demo-card .question-foto { aspect-ratio: 16 / 7; max-height: 210px; margin-bottom: 18px; border-radius: 14px; }
.demo-fila { display: flex; align-items: flex-start; gap: 12px; }
.demo-fila .question-title { flex: 1; margin: 0 0 16px; font-size: 1.16rem; line-height: 1.42; }
/* El botón de pista acompaña, no compite: gris hasta que se pasa por encima. */
.btn-pista { flex: 0 0 auto; width: 44px; height: 44px; display: grid; place-items: center; margin-top: -2px;
  color: var(--muted); background: var(--surface); border: 1px solid var(--line); border-radius: 50%; cursor: pointer;
  transition: color .15s ease, border-color .15s ease, background .15s ease; }
.btn-pista:hover { color: var(--amber); border-color: var(--amber-border); background: var(--amber-soft); }
.btn-pista[aria-expanded="true"] { color: var(--amber-ink); border-color: var(--amber-border); background: var(--amber-soft); }
.btn-pista .ico { width: 19px; height: 19px; }
.pista { margin: -4px 0 14px; padding: 11px 14px; color: var(--amber-ink); background: var(--amber-soft);
  border: 1px solid var(--amber-border); border-radius: 10px; font-size: .89rem; line-height: 1.5; }
.btn-ancho { width: 100%; margin-top: 18px; }

/* Respuestas: el radio es un input de verdad, no un adorno. El círculo se
   dibuja con ::before pero quien manda es el control nativo. */
.answer > input[type="radio"] { position: absolute; width: 1px; height: 1px; margin: 0; padding: 0;
  opacity: 0; pointer-events: none; }
.answer:focus-within { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(23, 105, 194, .18); }
.demo-card .answer { min-height: 62px; padding: 17px 18px; border-radius: 12px; margin: 10px 0; }
.demo-card .answer::before { width: 22px; height: 22px; }
.answer { min-height: 52px; }


/* ------------------------------------------------ Radiografía del fallo -- */
.lista-tipos { display: grid; gap: 10px; margin: 14px 0 0; padding: 0; list-style: none; }
.lista-tipos li { display: flex; align-items: center; gap: 10px; font-size: .92rem; }
.lista-tipos small { margin-left: auto; }
.trampa-punto { flex: 0 0 auto; width: 12px; height: 12px; border-radius: 50%; }
.diagnostico { padding: 30px 34px; border-left: 5px solid var(--red); }
.diagnostico .section-title { margin: 8px 0 10px; }
.consejo { margin: 20px 0 0; padding: 16px 18px; background: var(--amber-soft);
  border: 1px solid var(--amber-border); border-radius: 12px; }
.consejo p { margin: 0; color: var(--amber-ink); line-height: 1.6; }
.trampas-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 16px; margin-top: 20px; }
.trampa-fila { padding: 20px; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow); }
.trampa-fila.sin-datos { opacity: .62; }
.trampa-cab { display: flex; align-items: center; gap: 9px; margin-bottom: 10px; font-size: .95rem; }
.trampa-cab span:last-child { margin-left: auto; color: var(--muted); font-size: .82rem; }
.trampa-fila p { margin: 12px 0 14px; font-size: .88rem; line-height: 1.55; }

/* ------------------------------------------------------------- Responsive */
@media (max-width: 1100px) {
  .hero-grid { grid-template-columns: 1fr; gap: 34px; }
  .home-title { max-width: none; }
  .tests-hero, .guides-hero, .exam-hero { grid-template-columns: 1fr; }
  .stats-strip { grid-template-columns: repeat(3, 1fr); }
  .stat { border-right: 0; padding: 10px; }
  .test-grid, .article-grid { grid-template-columns: repeat(2, 1fr); }
  .dashboard { grid-template-columns: 220px 1fr; }
  .dashboard-side { grid-column: 1 / -1; grid-template-columns: 1fr 1fr; }
  .dashboard-stats { grid-template-columns: repeat(2, 1fr); }
  .question-body.has-photo .question-grid { grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: 26px; }
}

@media (max-width: 900px) {
  .question-body.has-photo .question-grid { display: block; }
  .question-body.has-photo .question-foto { min-height: 0; max-height: 300px; margin: 0 0 24px; aspect-ratio: 16 / 8; }
}

@media (max-width: 760px) {
  .container { width: min(calc(100% - 28px), var(--container)); }
  .runner-wrap { width: calc(100% - 28px); }
  .page { padding-top: 26px; }
  .mobile-toggle { display: block; }
  .nav-group { position: fixed; inset: 76px 0 auto; height: auto; display: none; padding: 14px; background: var(--surface); border-bottom: 1px solid var(--line); box-shadow: var(--shadow); }
  .nav-group.open { display: block; }
  .nav-links { display: grid; gap: 0; }
  .nav-link { min-height: 50px; justify-content: start; }
  .nav-link::after { display: none; }
  .profile-link { margin-top: 8px; width: auto; padding: 0 14px; justify-items: start; }
  .hero-grid { gap: 26px; }
  .home-hero { padding: 24px 0 30px; }
  .home-title { font-size: clamp(2.1rem, 8.4vw, 3rem); margin: 16px 0 16px; }
  .home-copy { font-size: 1.02rem; }
  .question-card { padding: 14px; }
  .demo-card { padding: 16px; }
  .demo-card .question-foto { aspect-ratio: 16 / 9; max-height: 180px; }
  /* En móvil los botones ocupan todo el ancho y las ventajas se reparten. */
  .home-hero .button-row .btn { width: 100%; }
  .ventajas { gap: 8px; }
  .ventajas li { flex: 1 1 auto; justify-content: center; padding: 8px 12px; font-size: .84rem; }
  .question-title { flex-direction: column-reverse; align-items: flex-start; font-size: 1.12rem; }
  .senal-pregunta { height: 78px; max-width: 46%; }
  svg.senal-pregunta { width: 78px; }
  .question-foto { max-height: 150px; margin-bottom: 14px; }
  .paleta { grid-template-columns: repeat(auto-fit, minmax(30px, 1fr)); gap: 5px; padding: 10px; }
  .rejilla-tests { grid-template-columns: repeat(auto-fill, minmax(62px, 1fr)); gap: 8px; }
  .celda-test { min-height: 56px; }
  .ir-a-test { flex: 1; }
  .ir-a-test input { width: 100%; }
  .celda { min-width: 30px; height: 30px; font-size: .75rem; }
  .runner-foot.examen { flex-direction: column; align-items: stretch; }
  .runner-foot.examen .btn { width: 100%; }
  .nav-examen, .acciones-examen { display: grid; grid-template-columns: 1fr; }
  .acciones-examen #btn-siguiente-examen { min-width: 0; }
  .pagina-foto { aspect-ratio: 16 / 9; }
  .senal-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .senal-caja { height: 112px; padding: 10px; }
  .senal-catalogo { max-height: 88px; }
  .senal-muestra { height: 68px; }
  .stats-strip, .benefit-grid, .test-grid, .article-grid, .exam-info-grid, .steps, .dashboard-panels { grid-template-columns: 1fr; }
  .stats-strip { padding: 12px; }
  .stat { padding: 12px; }
  .featured-guide { grid-template-columns: 1fr; }
  .senales-teaser { grid-template-columns: 1fr; padding: 24px; }
  .senales-muestra { grid-template-columns: repeat(4, 1fr); gap: 12px; }
  .featured-art { min-height: 160px; }
  .ico-guia { width: 58px; height: 58px; }
  .cabecera-guia { gap: 14px; }
  .cabecera-guia .ico-guia.grande { max-width: 96px; }
  .exam-callout, .profile-heading { align-items: stretch; flex-direction: column; }
  .exam-callout .btn { margin-left: 0; }
  .summary-content { grid-template-columns: 1fr; justify-items: center; }
  .step:not(:last-child)::after { display: none; }
  .dashboard { grid-template-columns: 1fr; }
  .dashboard-side { grid-column: auto; grid-template-columns: 1fr; }
  .dashboard-stats { grid-template-columns: repeat(2, 1fr); }
  .history-card { overflow-x: auto; }
  .prose-card { padding: 22px; }
  .diagnostico { padding: 22px; }
  .trampas-grid { grid-template-columns: 1fr; }
  .toast { left: 16px; right: 16px; max-width: none; }
}

@media (max-width: 480px) {
  .home-title { letter-spacing: -.04em; }
  .ventajas li { flex: 1 1 100%; justify-content: flex-start; }
  .hero-cifras { gap: 22px; margin-top: 26px; padding-top: 22px; }
  .hero-cifras dt { font-size: 1.4rem; }
  .demo-fila { gap: 8px; }
  .brand { font-size: 1.35rem; }
  .brand-sign { width: 40px; height: 40px; }
  .home-title { font-size: 2.6rem; }
  .button-row .btn { width: 100%; }
  .dashboard-stats { grid-template-columns: 1fr; }
  .result-card { padding: 24px 18px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

@media print {
  .site-header, .site-footer, .anuncio, .button-row, .toast { display: none !important; }
  body { background: var(--surface); }
}

/* ================================================================= MANUAL ==
   Lectura larga a dos columnas: indice de temas fijo a la izquierda y el texto
   a la derecha con una medida comoda. Por debajo de 1080 px el indice pasa a
   ser un desplegable y el texto ocupa todo el ancho. */
.manual-layout { display: grid; grid-template-columns: 268px minmax(0, 1fr); gap: 46px;
  align-items: start; padding-top: 10px; }
.manual-lateral { position: sticky; top: 84px; max-height: calc(100vh - 104px); overflow-y: auto;
  padding-right: 6px; }
.volver-manual { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 16px;
  color: var(--muted); font-size: .88rem; font-weight: 600; text-decoration: none; }
.volver-manual:hover { color: var(--red-ink); }
.volver-manual .ico { width: 16px; height: 16px; transform: rotate(180deg); }
.lista-temas { margin: 0; padding: 0; list-style: none; border-left: 2px solid var(--line); }
.lista-temas a { display: flex; gap: 11px; padding: 9px 12px; margin-left: -2px;
  border-left: 2px solid transparent; color: var(--muted); font-size: .87rem; line-height: 1.4;
  text-decoration: none; }
.lista-temas a:hover { color: var(--ink); background: var(--surface); }
.lista-temas .num { flex: 0 0 20px; color: var(--muted); font-variant-numeric: tabular-nums;
  font-weight: 700; }
.lista-temas .aqui a { color: var(--ink); font-weight: 700; border-left-color: var(--red-ink); }
.lista-temas .aqui .num { color: var(--red-ink); }
.lista-temas a.leido .num::after { content: "✓"; margin-left: 3px; color: var(--green-ink); }

.manual-cuerpo { min-width: 0; }
.manual-cabecera { padding-bottom: 22px; border-bottom: 1px solid var(--line); }
.manual-cabecera .page-title { margin: 12px 0 14px; }
.manual-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0;
  color: var(--muted); font-size: .9rem; }
.manual-meta .ico { width: 16px; height: 16px; vertical-align: -3px; }
.marca-leido { display: inline-flex; align-items: center; gap: 10px; margin-top: 18px;
  padding: 10px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: 999px;
  color: var(--muted); font-size: .89rem; font-weight: 600; cursor: pointer; }
.marca-leido input { width: 17px; height: 17px; accent-color: var(--green); cursor: pointer; }
.marca-leido.hecho { color: var(--green); border-color: var(--ok-border); background: var(--green-soft); }

/* Sumario del propio tema. En pantalla ancha se saca al margen para que no
   corte la lectura; en movil se queda como una caja normal antes del texto. */
.sumario { margin: 26px 0 6px; padding: 18px 22px; background: var(--surface); border: 1px solid var(--line);
  border-radius: 12px; }
.sumario-tit { margin: 0 0 10px; color: var(--muted); font-size: .76rem; font-weight: 800;
  letter-spacing: .09em; text-transform: uppercase; }
.sumario ol { margin: 0; padding-left: 20px; color: var(--muted); font-size: .92rem; line-height: 1.9; }
.sumario a { color: inherit; text-decoration: none; }
.sumario a:hover { color: var(--red-ink); }
.sumario li.activo > a { color: var(--red-ink); font-weight: 700; }

.manual-prosa { max-width: none; }
.manual-prosa .apartado { scroll-margin-top: 90px; padding-top: 12px; }
.manual-prosa .apartado h2 { margin-top: 42px; }

/* Cajas de aviso. Tres tonos y tres funciones distintas: lo que cae, la
   trampa concreta y la cifra que hay que llevarse memorizada. */
.aviso { margin: 26px 0; padding: 18px 22px; border-radius: 12px; border: 1px solid;
  border-left-width: 4px; }
.aviso p:last-child { margin-bottom: 0; }
.aviso-tit { display: flex; align-items: center; gap: 9px; margin: 0 0 8px;
  font-size: .78rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.aviso-tit .ico { width: 17px; height: 17px; }
.aviso.examen { background: var(--blue-soft); border-color: var(--blue-border); }
.aviso.examen .aviso-tit { color: var(--blue); }
.aviso.trampa { background: var(--red-soft); border-color: var(--red-border); }
.aviso.trampa .aviso-tit { color: var(--red-ink); }
.aviso.clave { background: var(--amber-soft); border-color: var(--amber-border); }
.aviso.clave .aviso-tit { color: var(--amber-ink); }

/* Señales dentro del texto */
.senal-linea { width: 46px; height: 46px; vertical-align: -14px; margin: 0 4px; }
.tira-senales { display: flex; flex-wrap: wrap; gap: 20px; margin: 26px 0; padding: 20px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px; }
.tira-senales figure { width: 108px; margin: 0; text-align: center; }
.senal-manual { width: 72px; height: 72px; }
.tira-senales figcaption { margin-top: 8px; color: var(--muted); font-size: .78rem; line-height: 1.35; }

.glosario { margin: 22px 0 0; }
.glosario > div { padding: 14px 0; border-top: 1px solid var(--line); }
.glosario dt { color: var(--ink); font-weight: 800; }
.glosario dd { margin: 4px 0 0; color: var(--muted); line-height: 1.65; }

.lanza-test { margin: 26px 0; }
.cierre-tema { margin-top: 34px; padding: 28px; }
.cierre-tema h2 { margin: 0 0 8px; font-size: 1.3rem; }
.materias-tema { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }

.paso-tema { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 34px 0 10px; }
.paso { display: block; padding: 18px 22px; background: var(--surface); border: 1px solid var(--line);
  border-radius: 12px; text-decoration: none; transition: border-color .15s ease, transform .15s ease; }
.paso:hover { border-color: var(--red-ink); transform: translateY(-1px); }
.paso small { display: block; margin-bottom: 5px; color: var(--muted); font-size: .78rem;
  font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.paso strong { color: var(--ink); font-size: 1rem; line-height: 1.35; }
.paso.siguiente { text-align: right; }

/* Indice del manual */
.rejilla-manual { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px;
  margin-top: 18px; }
.tarjeta-tema { position: relative; display: flex; gap: 16px; padding: 22px; text-decoration: none;
  transition: border-color .15s ease, transform .15s ease; }
.tarjeta-tema:hover { border-color: var(--red-ink); transform: translateY(-2px); }
.num-tema { flex: 0 0 38px; height: 38px; display: grid; place-items: center; border-radius: 10px;
  background: var(--red-soft); color: var(--red-ink); font-size: 1rem; font-weight: 900;
  font-variant-numeric: tabular-nums; }
.tarjeta-tema h3 { margin: 0 0 6px; font-size: 1.03rem; line-height: 1.3; }
.tarjeta-tema p { margin: 0 0 10px; font-size: .89rem; line-height: 1.55; }
.tarjeta-tema small .ico { width: 14px; height: 14px; vertical-align: -2px; }
.tarjeta-tema .visto { position: absolute; top: 16px; right: 16px; width: 20px; height: 20px;
  border-radius: 50%; opacity: 0; }
.tarjeta-tema.leido .visto { opacity: 1; background: var(--green); }
.tarjeta-tema.leido .visto::after { content: "✓"; display: block; color: #fff; font-size: .72rem;
  font-weight: 900; line-height: 20px; text-align: center; }
.tarjeta-tema.leido .num-tema { background: var(--green-soft); color: var(--green); }

@media (max-width: 1080px) {
  .manual-layout { grid-template-columns: 1fr; gap: 24px; }
  .manual-lateral { position: static; max-height: none; overflow: visible;
    padding: 16px 18px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; }
  .lista-temas { max-height: 214px; overflow-y: auto; }
  .manual-prosa { max-width: none; }
}
@media (max-width: 680px) {
  .paso-tema { grid-template-columns: 1fr; }
  .paso.siguiente { text-align: left; }
  .rejilla-manual { grid-template-columns: 1fr; }
  .senal-linea { width: 38px; height: 38px; vertical-align: -11px; }
  .tira-senales { gap: 14px; padding: 16px; }
  .tira-senales figure { width: calc(50% - 7px); }
}

/* Bloque del manual en la portada */
.manual-teaser { display: grid; grid-template-columns: 1.15fr .85fr; gap: 44px; padding: 40px; align-items: center; }
.manual-muestra { margin: 0; padding: 0; list-style: none; counter-reset: none; }
.manual-muestra li + li { border-top: 1px solid var(--line); }
.manual-muestra a { display: flex; align-items: center; gap: 14px; padding: 13px 4px; color: var(--ink);
  font-weight: 700; font-size: .96rem; }
.manual-muestra a:hover { color: var(--red-ink); }
.manual-muestra span { flex: 0 0 30px; height: 30px; display: grid; place-items: center; border-radius: 8px;
  background: var(--red-soft); color: var(--red-ink); font-size: .84rem; font-weight: 900;
  font-variant-numeric: tabular-nums; }
.manual-muestra .mas a { justify-content: flex-end; color: var(--muted); font-size: .88rem; font-weight: 700; }
.manual-muestra .mas a:hover { color: var(--red-ink); }
@media (max-width: 900px) {
  .manual-teaser { grid-template-columns: 1fr; gap: 26px; padding: 26px; }
}

/* ============================================= Indice del manual (pagina pilar) */
.atajos-manual { display: flex; flex-wrap: wrap; gap: 10px; margin: 8px 0 6px; padding: 16px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px; }
.atajos-manual a { display: inline-flex; align-items: center; gap: 8px; padding: 9px 15px;
  color: var(--muted); background: var(--canvas); border: 1px solid var(--line); border-radius: 999px;
  font-size: .87rem; font-weight: 700; }
.atajos-manual a:hover { color: var(--red-ink); border-color: var(--red-border); background: var(--red-soft); }
.atajos-manual .ico { width: 16px; height: 16px; }

/* Progreso por bloque, dentro de la tarjeta de lectura */
.progreso-bloques { margin: 18px 0 0; padding: 0; list-style: none; }
.progreso-bloques li { display: grid; grid-template-columns: 84px 1fr 34px; align-items: center; gap: 10px;
  margin-bottom: 7px; font-size: .8rem; color: var(--muted); }
.progreso-bloques .etiqueta { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; }
.progreso-bloques .barra { height: 6px; background: var(--line); border-radius: 999px; overflow: hidden; }
.progreso-bloques .barra i { display: block; height: 100%; width: 0; background: var(--green);
  border-radius: inherit; transition: width .3s ease; }
.progreso-bloques .cuenta { text-align: right; font-variant-numeric: tabular-nums; }

/* Controles de la rejilla de temas */
.controles-manual { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 22px 0 6px; }
.controles-manual .search { flex: 1 1 260px; margin: 0; }
.controles-manual .tabs { margin: 0; }
.orden-manual select { min-height: 46px; padding: 0 14px; background: var(--surface); border: 1px solid var(--line);
  border-radius: 10px; color: var(--muted); font-weight: 700; cursor: pointer; }

/* Plan de estudio */
.plan-nota { margin: 18px 0 0; }
.jornadas { margin: 16px 0 0; padding: 0; list-style: none; counter-reset: none; }
.jornadas li { display: grid; grid-template-columns: 76px 1fr 62px; align-items: baseline; gap: 14px;
  padding: 13px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; margin-bottom: 8px; }
.jornadas .dia { color: var(--red-ink); font-size: .78rem; font-weight: 850; letter-spacing: .05em;
  text-transform: uppercase; }
.jornadas .temas-dia { display: flex; flex-direction: column; gap: 4px; }
.jornadas .temas-dia a { color: var(--ink); font-weight: 700; font-size: .93rem; }
.jornadas .temas-dia a:hover { color: var(--red-ink); }
.jornadas .min-dia { color: var(--muted); font-size: .82rem; text-align: right;
  font-variant-numeric: tabular-nums; }

/* Indice completo de apartados */
.indice-completo { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 12px;
  margin-top: 20px; }
.tema-indice { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.tema-indice summary { display: flex; align-items: center; gap: 12px; padding: 15px 18px; cursor: pointer;
  font-weight: 800; font-size: .96rem; list-style: none; }
.tema-indice summary::-webkit-details-marker { display: none; }
.tema-indice summary::after { content: "＋"; margin-left: auto; color: var(--muted); font-weight: 400; }
.tema-indice[open] summary::after { content: "－"; }
.tema-indice summary .num { flex: 0 0 26px; height: 26px; display: grid; place-items: center;
  border-radius: 7px; background: var(--red-soft); color: var(--red-ink); font-size: .78rem; font-weight: 900; }
.tema-indice summary em { margin-left: 8px; color: var(--muted); font-size: .78rem; font-style: normal;
  font-weight: 600; }
.tema-indice ol { margin: 0; padding: 0 20px 16px 46px; color: var(--muted); font-size: .89rem;
  line-height: 1.9; }
.tema-indice ol a { color: inherit; }
.tema-indice ol a:hover { color: var(--red-ink); }

/* Chuleta de cifras */
.cifras-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 16px;
  margin-top: 20px; align-items: start; }
.grupo-cifras { padding: 22px 24px; }
.grupo-cifras h3 { margin: 0 0 12px; font-size: 1rem; color: var(--red-ink); }
.grupo-cifras dl { margin: 0; }
.grupo-cifras dl > div { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: baseline;
  padding: 9px 0; border-top: 1px solid var(--line); }
.grupo-cifras dl > div:first-child { border-top: 0; padding-top: 0; }
.grupo-cifras dt { color: var(--muted); font-size: .88rem; line-height: 1.4; }
.grupo-cifras dt a { color: inherit; }
.grupo-cifras dt a:hover { color: var(--red-ink); text-decoration: underline; }
.grupo-cifras dd { margin: 0; text-align: right; }
.grupo-cifras dd strong { display: block; color: var(--ink); font-size: 1rem; white-space: nowrap;
  font-variant-numeric: tabular-nums; }
.grupo-cifras dd small { display: block; margin-top: 2px; max-width: 190px; color: var(--muted);
  font-size: .74rem; line-height: 1.35; }

/* Glosario global */
.glosario-global { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 0 26px;
  margin-top: 20px; }
.glosario-global > div { padding: 14px 0; border-top: 1px solid var(--line); }
.glosario-global dt { color: var(--ink); font-weight: 800; font-size: .96rem; }
.glosario-global dd { margin: 5px 0 0; color: var(--muted); font-size: .9rem; line-height: 1.6; }
.ver-tema { color: var(--red-ink); font-size: .82rem; font-weight: 700; white-space: nowrap; }

@media (max-width: 680px) {
  .atajos-manual { padding: 12px; gap: 8px; }
  .atajos-manual a { padding: 8px 12px; font-size: .82rem; }
  /* En columna, los hijos flex conservan su ancho de contenido y desbordan:
     la tira de pestanas mide mas de 600 px con seis bloques. */
  .controles-manual { flex-direction: column; align-items: stretch; }
  .controles-manual > * { min-width: 0; max-width: 100%; }
  .controles-manual .search { flex: 0 0 auto; }
  .controles-manual .tabs { width: 100%; }
  .jornadas li { grid-template-columns: 1fr auto; gap: 4px 10px; }
  .jornadas .dia { grid-column: 1; }
  .jornadas .min-dia { grid-column: 2; grid-row: 1; }
  .jornadas .temas-dia { grid-column: 1 / -1; }
  .indice-completo, .cifras-grid, .glosario-global { grid-template-columns: 1fr; }
  .grupo-cifras dd small { max-width: 150px; }
}

/* Impresion: el manual en papel, sin menus ni botones. Los competidores venden
   el PDF; aqui basta con Ctrl+P y sale legible. */
@media print {
  .site-header, .site-footer, .migas, .anuncio, .atajos-manual, .controles-manual,
  .manual-lateral, .marca-leido, .cierre-tema, .paso-tema, .exam-callout, .lanza-test,
  .progress-card, .skip-link, .runner, #pantalla-test, #pantalla-resultado { display: none !important; }
  body { background: var(--surface); color: #000; }
  .manual-layout { display: block; }
  .manual-prosa, .prose { max-width: none; }
  .card { box-shadow: none; border: 1px solid #ccc; }
  .aviso { border: 1px solid #999; break-inside: avoid; }
  .apartado, .tira-senales, .envuelve-tabla, .grupo-cifras { break-inside: avoid; }
  .tema-indice[open] ol, .tema-indice ol { display: block; }
  /* El dominio lo inyecta el build desde config.mjs (--dominio). Estaba
     escrito a mano y se quedaba obsoleto al cambiar de dominio: en papel
     aparecian URLs de un sitio que ya no era el nuestro. */
  a[href^="/"]::after { content: " (" var(--dominio, "") attr(href) ")"; font-size: .75em; color: #555; }
  .page-title { font-size: 2rem; }
}

/* ================================================ Pagina de tema, piezas de libro */
/* Barra de avance de lectura, pegada bajo la cabecera fija */

.acciones-tema { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 18px; }
.acciones-tema .marca-leido { margin-top: 0; }
.chapa-reforma { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px;
  color: var(--amber-ink); background: var(--amber-soft); border: 1px solid var(--amber-border); border-radius: 999px;
  font-size: .8rem; font-weight: 800; }
.chapa-reforma .ico { width: 14px; height: 14px; }

/* Resumen de apertura */
.esencial { margin: 26px 0 6px; padding: 22px 26px; background: var(--blue-soft);
  border: 1px solid var(--blue-border); border-left: 4px solid var(--blue); border-radius: 12px; }
.esencial .aviso-tit { color: var(--blue); }
.esencial ol { margin: 0; padding-left: 22px; color: #1c3350; line-height: 1.75; }
.esencial li { margin-bottom: 7px; }
.esencial li:last-child { margin-bottom: 0; }

/* Cambios de la reforma */
.reforma { margin: 34px 0 10px; padding: 24px 28px; background: var(--amber-soft);
  border: 1px solid var(--amber-border); border-left: 4px solid var(--amber); border-radius: 12px;
  scroll-margin-top: 96px; }
.reforma .aviso-tit { color: var(--amber-ink); }
.reforma-intro { margin: 0 0 12px; color: var(--amber-ink); line-height: 1.65; }
.reforma ul { margin: 0; padding-left: 22px; color: var(--amber-ink); line-height: 1.72; }
.reforma li { margin-bottom: 9px; }
.reforma-fuente { margin: 14px 0 0; color: var(--amber-ink); font-size: .84rem; }
.reforma-fuente a { color: var(--amber-ink); text-decoration: underline; }

/* Base normativa */
.normativa { margin: 16px 0 0; padding: 0; list-style: none; }
.normativa li { padding: 11px 0; border-top: 1px solid var(--line); }
.normativa li:first-child { border-top: 0; }
.normativa a { color: var(--ink); font-weight: 700; text-decoration: underline;
  text-decoration-color: var(--line); text-underline-offset: 3px; }
.normativa a:hover { color: var(--red-ink); text-decoration-color: currentColor; }
.normativa small { display: block; margin-top: 2px; color: var(--muted); font-size: .85rem; }

.revision-tema { margin: 30px 0 0; padding: 16px 20px; color: var(--muted); background: var(--canvas);
  border: 1px dashed var(--line); border-radius: 10px; font-size: .85rem; line-height: 1.6; }
.revision-tema a { color: var(--red-ink); font-weight: 700; }

@media (max-width: 680px) {

  .esencial, .reforma { padding: 18px 20px; }
  .acciones-tema { flex-direction: column; align-items: stretch; }
}

@media print {
  .acciones-tema, .chapa-reforma { display: none !important; }
  .esencial, .reforma { break-inside: avoid; }
  .revision-tema { border: 1px solid #999; }
}

.aviso-reforma { margin: 18px 0 6px; }
.temas-reforma { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 0; padding: 0; list-style: none; }
.temas-reforma a { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; color: var(--amber-ink);
  background: var(--surface); border: 1px solid var(--amber-border); border-radius: 999px; font-size: .86rem; font-weight: 700; }
.temas-reforma a:hover { border-color: var(--amber); color: var(--amber-ink); }
.temas-reforma em { min-width: 20px; height: 20px; display: grid; place-items: center; border-radius: 999px;
  background: var(--amber-soft); font-style: normal; font-size: .74rem; font-weight: 900; }

/* Cuatro columnas piden unos 1.000 px: 240 + 150x3 + tres huecos de 40 se van
   a 810 y el contenedor de una tablet no llega. Se baja a dos y luego a una. */
@media (max-width: 1000px) {
  .pie-grid { grid-template-columns: 1fr 1fr; gap: 34px 40px; }
  .pie-marca { grid-column: 1 / -1; }
}
/* En movil, apilar las cuatro cajas dejaba un pie de casi mil pixeles: mas alto
   que la propia pantalla. Las tres columnas de enlaces son listas cortas, asi
   que caben de dos en dos. */
@media (max-width: 560px) {
  .site-footer { margin-top: 40px; padding: 34px 0 20px; }
  .pie-grid { grid-template-columns: 1fr 1fr; gap: 26px 20px; }
  .pie-marca { grid-column: 1 / -1; }
  .pie-marca p { max-width: none; font-size: .87rem; }
  .pie-datos { gap: 6px; }
  .pie-col { gap: 9px; }
  .pie-col a, .pie-col .enlace-pie { font-size: .87rem; }
  .pie-legal { margin-top: 28px; padding-top: 18px; }
  .pie-legal p { font-size: .77rem; }
}

/* Cabecera: con «Manual» en el menú son siete enlaces y la barra necesita unos
   846 px. El plegado estaba en 760, así que entre 760 y 846 la navegación se
   salía del contenedor. Se adelanta a 900 y, justo por encima, se aprietan los
   huecos para no plegar antes de lo necesario. */
@media (max-width: 1080px) and (min-width: 901px) {
  .nav-group { gap: 22px; }
  .nav-links { gap: 20px; }
}
@media (max-width: 900px) {
  .mobile-toggle { display: block; }
  .nav-group { position: fixed; inset: 76px 0 auto; height: auto; display: none; padding: 14px;
    background: var(--surface); border-bottom: 1px solid var(--line); box-shadow: var(--shadow); }
  .nav-group.open { display: block; }
  .nav-links { display: grid; gap: 0; }
  .nav-link { min-height: 50px; justify-content: start; }
  .nav-link::after { display: none; }
  .profile-link { margin-top: 8px; width: auto; padding: 0 14px; justify-items: start; }
}

/* ============================================ La línea de la vía, y las fotos

   El elemento que sostiene el manual es la marca vial: es la señal más
   característica del asunto y no la usa nadie como pieza de interfaz. La barra
   de avance no es una barra: es la calzada. Por delante, discontinua; por
   detrás, la línea ya pintada de rojo. Se lee el tema como se recorre un tramo.
   -------------------------------------------------------------------------- */
.via-lectura { position: sticky; top: 76px; z-index: 20; height: 10px; margin: 0 0 2px;
  background: #23272e; border-radius: 3px; overflow: hidden; }
.via-lectura::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 2px;
  transform: translateY(-50%);
  background: repeating-linear-gradient(90deg, rgba(255,255,255,.42) 0 18px, transparent 18px 34px); }
.via-lectura > span { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: var(--red); }
.via-lectura > span::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 2px;
  transform: translateY(-50%); background: var(--surface); }

/* Portada del tema, al modo de un arranque de capítulo impreso */
.portada-tema { position: relative; margin: 14px 0 0; aspect-ratio: 21 / 8; overflow: hidden;
  border-radius: 14px; background: #23272e; }
.portada-tema img { width: 100%; height: 100%; object-fit: cover; }
.portada-tema figcaption { position: absolute; inset: auto 0 0 0; padding: 30px 32px 26px; color: #fff;
  background: linear-gradient(to top, rgba(12,14,18,.92) 12%, rgba(12,14,18,.55) 55%, rgba(12,14,18,0)); }
.portada-tema .tomo { display: block; margin-bottom: 8px; font-size: .78rem; font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase; }
.portada-tema .tomo i { font-style: normal; opacity: .6; }
.portada-tema h1 { max-width: 22ch; margin: 0; color: #fff; font-size: clamp(1.7rem, 3.4vw, 3rem);
  line-height: 1.02; letter-spacing: -.045em; }
.manual-cabecera.con-portada { padding-top: 22px; }

/* Foto dentro del tema */
.figura-tema { margin: 34px 0; }
.figura-tema img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 12px; }
.figura-tema figcaption { margin-top: 10px; padding-left: 15px; color: var(--muted); font-size: .85rem;
  line-height: 1.55; border-left: 2px solid var(--red); }

/* Miniatura en las tarjetas del índice */
.tarjeta-tema.con-foto { flex-direction: column; gap: 0; padding: 0; overflow: hidden; }
.tarjeta-tema .miniatura { display: block; aspect-ratio: 16 / 7; background: var(--line); }
.tarjeta-tema .miniatura img { width: 100%; height: 100%; object-fit: cover;
  transition: transform .4s ease; }
.tarjeta-tema.con-foto:hover .miniatura img { transform: scale(1.04); }
.tarjeta-tema.con-foto .num-tema { position: absolute; top: 12px; left: 12px; background: rgba(12,14,18,.72);
  color: #fff; backdrop-filter: blur(4px); }
.tarjeta-tema.con-foto > div { padding: 20px 22px 22px; }
.tarjeta-tema.con-foto.leido .num-tema { background: var(--green); color: #fff; }

@media (max-width: 680px) {
  .via-lectura { top: 68px; height: 8px; }
  .portada-tema { aspect-ratio: 16 / 10; border-radius: 12px; }
  .portada-tema figcaption { padding: 22px 20px 20px; }
  .figura-tema img { aspect-ratio: 4 / 3; }
}

@media (prefers-reduced-motion: reduce) {
  .tarjeta-tema.con-foto:hover .miniatura img { transform: none; }
}

@media print {
  .via-lectura { display: none !important; }
  .portada-tema { aspect-ratio: auto; height: 220px; break-inside: avoid; }
  .figura-tema { break-inside: avoid; }
  .tarjeta-tema .miniatura { display: none; }
}

/* ================================================ Fondo de señales de la portada

   Doce señales del propio catálogo, muy tenues y en distintos tamaños, flotando
   detrás del titular. Ninguna es decoración abstracta: son las señales que el
   visitante va a estudiar. Se mueven muy poco y muy despacio, lo justo para que
   la portada respire; con `prefers-reduced-motion` se quedan quietas.
   -------------------------------------------------------------------------- */
.senales-fondo { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.senales-fondo span { position: absolute; opacity: .07; filter: saturate(.6);
  animation: flotar 18s ease-in-out infinite; animation-delay: calc(var(--i) * -1.4s); }
.senales-fondo .senal { width: 100%; height: auto; }

/* Posiciones a mano: se reparten por los bordes para no pisar el titular ni la
   tarjeta de demostración, que es donde está el contenido que importa. */
.senales-fondo span:nth-child(1)  { top: 4%;  left: 2%;   width: 108px; }
.senales-fondo span:nth-child(2)  { top: 62%; left: -1%;  width: 84px; }
.senales-fondo span:nth-child(3)  { top: 30%; left: 30%;  width: 66px; }
.senales-fondo span:nth-child(4)  { top: 80%; left: 22%;  width: 92px; }
.senales-fondo span:nth-child(5)  { top: 8%;  left: 40%;  width: 72px; }
.senales-fondo span:nth-child(6)  { top: 88%; left: 44%;  width: 64px; }
.senales-fondo span:nth-child(7)  { top: 2%;  right: 4%;  width: 96px; }
.senales-fondo span:nth-child(8)  { top: 72%; right: 2%;  width: 110px; }
.senales-fondo span:nth-child(9)  { top: 40%; right: -2%; width: 78px; }
.senales-fondo span:nth-child(10) { top: 16%; left: 16%;  width: 60px; }
.senales-fondo span:nth-child(11) { top: 54%; left: 8%;   width: 70px; }
.senales-fondo span:nth-child(12) { top: 92%; right: 16%; width: 68px; }

@keyframes flotar {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
  50%      { transform: translate3d(0, -14px, 0) rotate(2.5deg); }
}

/* El titular y la tarjeta van por encima del fondo y sobre un velo del color del
   lienzo, para que el texto no compita con las señales. */
.hero-grid { position: relative; z-index: 1; }
.home-hero .hero-texto { position: relative; }
.home-hero .hero-texto::before { content: ""; position: absolute; inset: -30px -40px;
  background: radial-gradient(ellipse at 30% 45%, var(--canvas) 42%, rgba(248,248,247,0) 78%); z-index: -1; }

@media (max-width: 900px) {
  /* En pantalla estrecha el titular ocupa casi todo: se dejan solo las de las
     esquinas para que el fondo no se convierta en ruido detrás del texto. */
  .senales-fondo span:nth-child(3),
  .senales-fondo span:nth-child(5),
  .senales-fondo span:nth-child(6),
  .senales-fondo span:nth-child(10),
  .senales-fondo span:nth-child(11) { display: none; }
  .senales-fondo span { opacity: .05; }
}

@media (prefers-reduced-motion: reduce) {
  .senales-fondo span { animation: none; }
}
@media print { .senales-fondo { display: none !important; } }

/* Señales nuevas del catálogo de 2025, marcadas en el catálogo */
.senal-card { position: relative; }
.senal-card.nueva { border-color: var(--amber-border); }
.chapa-nueva { position: absolute; top: 12px; right: 12px; padding: 4px 10px; color: var(--amber-ink);
  background: var(--amber-soft); border: 1px solid var(--amber-border); border-radius: 999px;
  font-size: .7rem; font-weight: 800; letter-spacing: .02em; }
.senal-card .btn-small { margin-top: 14px; }

/* ============================================================ LECTURA FÁCIL

   En lectura fácil el diseño es parte de la norma, no decoración. La UNE 153101
   pide tipografía grande y sin serifa, texto alineado a la izquierda y nunca
   justificado, interlineado amplio, medida corta y palabras sin partir. Cada
   frase va en su propio renglón, así que el texto se maqueta línea a línea.
   -------------------------------------------------------------------------- */
.facil-page { padding: 34px 0 72px; background: var(--canvas-2); }
.facil { max-width: 1060px; }
.facil-indice { max-width: 54rem; }

.facil-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 18px; }
.volver-facil { margin: 0; font-size: 1rem; font-weight: 750; }
.volver-facil a { display: inline-flex; align-items: center; gap: 9px; color: var(--muted); }
.volver-facil a:hover { color: var(--red-ink); }
.volver-facil .ico { width: 19px; height: 19px; transform: rotate(180deg); }

.facil-progreso { width: min(100%, 300px); }
.facil-progreso span { display: block; margin-bottom: 8px; color: var(--muted); font-size: .9rem; font-weight: 750; text-align: right; }
.facil-progreso i { display: block; height: 7px; overflow: hidden; background: var(--line); border-radius: 999px; }
.facil-progreso b { display: block; min-width: 18px; height: 100%; background: var(--red); border-radius: inherit; }

.cabecera-facil { position: relative; overflow: hidden; padding: 34px 40px 36px; background: var(--surface);
  border: 1px solid var(--line); border-radius: 20px; box-shadow: 0 12px 34px rgba(15,23,42,.055); }
.cabecera-facil::after { content: ""; position: absolute; top: -80px; right: -45px; width: 240px; height: 240px;
  border: 42px solid rgba(238,31,37,.06); border-radius: 50%; }
.tema-facil { position: relative; z-index: 1; margin: 0 0 12px; color: var(--red-ink); font-size: .9rem;
  font-weight: 850; letter-spacing: .05em; text-transform: none; }
.facil h1 { position: relative; z-index: 1; max-width: 18ch; margin: 0 0 20px;
  font-size: clamp(2.35rem, 4.2vw, 3.45rem); line-height: 1.03; letter-spacing: -.045em; }
.entrada-facil { position: relative; z-index: 1; max-width: 58ch; margin: 0; color: #384152;
  font-size: 1.25rem; line-height: 1.85; }

.facil-puntos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 18px; }
.facil-tema .punto-facil { display: grid; grid-template-columns: 142px minmax(0, 1fr); gap: 22px;
  align-items: start; margin: 0; padding: 24px 25px; background: var(--surface); border: 1px solid var(--line);
  border-radius: 16px; box-shadow: 0 7px 24px rgba(15,23,42,.035); }
.punto-facil-aside { min-width: 0; }
.punto-facil-num { width: 34px; height: 34px; display: grid; place-items: center; margin-bottom: 16px;
  color: #fff; background: var(--red); border-radius: 10px; font-size: .9rem; font-weight: 900; }
.punto-facil h2 { margin: 0; font-size: 1.45rem; line-height: 1.3; letter-spacing: -.02em; }
.punto-facil p { max-width: 62ch; margin: 0; color: #263042; font-size: 1.08rem; line-height: 1.82;
  text-align: left; text-wrap: pretty; hyphens: none; }

.senal-facil { width: 118px; min-height: 118px; display: grid; place-items: center; margin: 18px 0 0;
  background: var(--canvas-2); border: 1px solid var(--line); border-radius: 14px; }
.senal-facil .senal { width: 88px; height: 88px; }
.facil-tema .punto-facil.con-senal { border-left: 4px solid var(--red); }

.palabras-facil { grid-column: 1 / -1; grid-template-columns: 210px minmax(0, 1fr) !important;
  background: var(--amber-soft) !important; border-color: var(--amber-border) !important; }
.facil-puntos > .punto-facil:last-child:nth-child(odd):not(.palabras-facil) {
  grid-column: 1 / -1;
  grid-template-columns: 210px minmax(0, 1fr);
}
.palabras-facil h2 { margin-top: 0; }
.palabras-facil dl { margin: 0; }
.palabras-facil > dl > div + div { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--amber-border); }
.palabras-facil dt { font-size: 1.2rem; font-weight: 800; }
.palabras-facil dd { margin: 6px 0 0; font-size: 1.15rem; line-height: 1.8; }

.lista-facil { margin: 0; padding: 0; list-style: none; counter-reset: none; }
.lista-facil li + li { margin-top: 10px; }
.lista-facil a { display: flex; align-items: center; gap: 16px; padding: 16px 20px;
  background: var(--canvas); border: 2px solid var(--line); border-radius: 12px;
  font-size: 1.2rem; font-weight: 700; line-height: 1.35; }
.lista-facil a:hover, .lista-facil a:focus-visible { border-color: var(--red-ink); color: var(--red-ink); }
.lista-facil .num { flex: 0 0 40px; height: 40px; display: grid; place-items: center;
  border-radius: 10px; background: var(--red); color: #fff; font-size: 1.05rem; font-weight: 900; }

.paso-facil { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 24px; }
.paso-facil a { min-height: 72px; display: inline-flex; align-items: center; gap: 12px; padding: 16px 24px;
  background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: 14px;
  font-size: 1.08rem; font-weight: 800; }
.paso-facil a.sig { justify-content: flex-end; color: #fff; background: var(--red-fill); border-color: var(--red-fill); }
.paso-facil a:hover { border-color: var(--red-ink); transform: translateY(-1px); }
.paso-facil a.sig:hover { background: var(--red-dark); }
.paso-facil .ico { width: 20px; height: 20px; }
.paso-facil a:not(.sig) .ico { transform: rotate(180deg); }

.otra-version { margin: 18px 0 0; padding: 20px 24px; background: var(--blue-soft); border: 1px solid #c2d8ef;
  border-radius: 14px; font-size: 1.08rem; line-height: 1.75; }
.otra-version a { color: var(--red-ink); font-weight: 800; text-decoration: underline;
  text-underline-offset: 3px; }
.nota-facil { color: var(--muted); font-size: 1rem !important; line-height: 1.75 !important; }

/* Enlace a la versión fácil desde cada tema del manual largo */
.enlace-facil { display: inline-flex; align-items: center; gap: 9px; padding: 10px 16px;
  background: var(--blue-soft); border: 1px solid var(--blue-border); border-radius: 999px;
  color: var(--blue); font-size: .89rem; font-weight: 700; }
.enlace-facil:hover { background: var(--blue-border); }
.enlace-facil .ico { width: 17px; height: 17px; }

@media (max-width: 680px) {
  .facil-page { padding-top: 20px; }
  .facil-toolbar { align-items: flex-start; flex-direction: column; gap: 14px; }
  .facil-progreso { width: 100%; }
  .facil-progreso span { text-align: left; }
  .cabecera-facil { padding: 30px 24px; border-radius: 16px; }
  .facil h1 { font-size: 2.4rem; }
  .entrada-facil, .punto-facil p { font-size: 1.12rem; line-height: 1.85; }
  .facil-tema .punto-facil { grid-template-columns: 1fr; gap: 18px; padding: 24px 22px; }
  .punto-facil h2 { font-size: 1.3rem; }
  .senal-facil { width: 124px; min-height: 124px; }
  .senal-facil .senal { width: 92px; height: 92px; }
  .paso-facil { flex-direction: column; }
  .paso-facil { grid-template-columns: 1fr; }
  .paso-facil a { justify-content: center; }
}

@media (max-width: 900px) {
  .facil-puntos { grid-template-columns: 1fr; }
  .facil-puntos > .punto-facil,
  .facil-puntos > .punto-facil:last-child:nth-child(odd):not(.palabras-facil),
  .palabras-facil { grid-column: auto; grid-template-columns: 180px minmax(0, 1fr) !important; }
}

@media (max-width: 680px) {
  .facil-puntos > .punto-facil,
  .facil-puntos > .punto-facil:last-child:nth-child(odd):not(.palabras-facil),
  .palabras-facil { grid-template-columns: 1fr !important; }
}

/* La UNE 153101 no admite palabras enteras en mayúsculas salvo siglas, y los
   títulos de columna del pie van en versalitas por CSS. En estas páginas se
   desactivan: la norma manda sobre la coherencia visual del resto del sitio. */
body:has(.facil-page) .pie-col h2 { text-transform: none; letter-spacing: .01em; font-size: .95rem; }

.descarga-facil a { display: inline-flex; align-items: center; padding: 16px 26px;
  background: var(--red); color: #fff; border-radius: 12px;
  font-size: 1.15rem; font-weight: 800; text-decoration: none; }
.descarga-facil a:hover { background: var(--red-dark); color: #fff; }

/* Descargas del manual */
.descargas { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 16px;
  margin-top: 22px; }
.descarga { display: flex; align-items: flex-start; gap: 18px; padding: 24px; text-decoration: none;
  transition: border-color .15s ease, transform .15s ease; }
.descarga:hover { border-color: var(--red-ink); transform: translateY(-2px); }
.icono-pdf { flex: 0 0 52px; height: 62px; display: grid; place-items: center; border-radius: 8px;
  background: var(--red-soft); color: var(--red-ink); font-size: .78rem; font-weight: 900;
  letter-spacing: .06em; border: 2px solid var(--red-border); }
.descarga .cuerpo { flex: 1; min-width: 0; }
.descarga strong { display: block; margin-bottom: 6px; font-size: 1.06rem; }
.descarga .cuerpo > span { display: block; font-size: .9rem; line-height: 1.55; }
.descarga .cuerpo > small { display: block; margin-top: 6px; font-size: .82rem; }
.descarga .peso { flex: 0 0 auto; color: var(--muted); font-size: .8rem; text-align: right;
  line-height: 1.5; white-space: nowrap; }
.descarga .peso em { font-style: normal; font-variant-numeric: tabular-nums; }
@media (max-width: 560px) {
  .descargas { grid-template-columns: 1fr; }
  .descarga { padding: 20px; gap: 14px; }
  .descarga .peso { display: none; }
}

/* ============================================== Aviso al salir de un test ==
   Un test a medias no se guarda, así que salir por error cuesta empezar de
   cero. El diálogo es propio y no un confirm() del navegador porque en móvil
   ese cuadro sale sin estilo, sin contexto y con los botones al revés según el
   sistema, que es justo cuando más fácil es pulsar el que no era. */
.aviso-salir { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center;
  padding: 20px; background: rgba(12, 14, 18, .55); backdrop-filter: blur(3px); }
.aviso-salir-caja { width: min(100%, 470px); padding: 30px 32px; background: var(--surface);
  border-radius: 16px; box-shadow: 0 24px 60px rgba(15, 23, 42, .28); }
.aviso-salir-caja h2 { margin: 0 0 12px; font-size: 1.45rem; letter-spacing: -.02em; }
.aviso-salir-caja p { margin: 0; color: var(--muted); font-size: 1rem; line-height: 1.65; }
.aviso-salir-botones { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
/* El botón seguro va primero y en primario: si alguien pulsa por inercia, se
   queda en el test en vez de perderlo. */
.aviso-salir-botones .btn { flex: 1 1 auto; }

@media (max-width: 480px) {
  .aviso-salir-caja { padding: 24px 22px; }
  .aviso-salir-botones { flex-direction: column; }
  .aviso-salir-botones .btn { width: 100%; }
}
@media print { .aviso-salir { display: none !important; } }

/* ------------------------------------------------- ficha de una senal ----
   Pagina individual de cada senal del catalogo. Reaprovecha .tests-hero y
   .senal-grid; solo hace falta la caja grande de la senal y el formato de
   las preguntas resueltas, que aqui se leen sin JavaScript. */
.senal-ficha-caja { display: grid; gap: 18px; }
.senal-caja-grande { height: 220px; margin-bottom: 0; padding: 22px; }
.senal-ficha-grande { max-height: 176px; max-width: 100%; height: auto; width: auto; }
.senal-ficha-caja .tabla { margin: 0; font-size: .9rem; }
.senal-ficha-caja .tabla td:first-child { width: 42%; color: var(--muted); }
.senal-card h3 a { color: inherit; text-decoration: none; }
.senal-card h3 a:hover { color: var(--red-ink); text-decoration: underline; }

.fichas-pregunta { display: grid; gap: 16px; margin-top: 22px; }
.ficha-pregunta { padding: 24px 26px; }
.ficha-pregunta h3 { margin: 0 0 16px; font-size: 1.06rem; line-height: 1.45; }
.opciones-ficha { margin: 0; padding: 0; list-style: none; counter-reset: opcion; }
.opciones-ficha li { position: relative; margin-bottom: 8px; padding: 12px 42px 12px 44px;
  border: 1px solid var(--line); border-radius: 10px; line-height: 1.5; counter-increment: opcion; }
.opciones-ficha li::before { position: absolute; top: 12px; left: 14px; width: 20px; height: 20px;
  content: counter(opcion, upper-alpha); display: grid; place-items: center; border-radius: 5px;
  background: var(--line); font-size: .75rem; font-weight: 850; }
.opciones-ficha li.acierta { border-color: #9ed6ae; background: var(--green-soft); font-weight: 700; }
.opciones-ficha li.acierta::before { background: var(--ok-ink); color: #fff; }
.marca-acierto { position: absolute; top: 50%; right: 14px; transform: translateY(-50%);
  color: var(--ok-ink); font-weight: 900; }
.porque { margin: 14px 0 0; padding: 14px 16px; border-radius: 10px; background: var(--green-soft);
  color: var(--ok-ink); line-height: 1.55; }
.porque strong { display: block; margin-bottom: 3px; }

@media (max-width: 860px) {
  .senal-hero { grid-template-columns: 1fr; }
  .senal-caja-grande { height: 180px; }
  .senal-ficha-grande { max-height: 140px; }
  .ficha-pregunta { padding: 20px 18px; }
}

/* --------------------------------------- foto que ES el enunciado --------
   Cuando la pregunta va atada a una fotografia concreta (campo `f` del
   banco), la imagen es la pregunta. Recortarla no es un ajuste estetico:
   puede quitar de encuadre justo la senal o el detalle por el que se
   pregunta, y dejar el enunciado sin respuesta posible. Por eso aqui se ve
   entera aunque sobre fondo a los lados. */
.question-foto.es-enunciado { aspect-ratio: 3 / 2; background: var(--line); }
.question-foto.es-enunciado img { object-fit: contain; }
.question-body.has-photo .question-foto.es-enunciado { aspect-ratio: 3 / 2; min-height: 0; }

@media (max-width: 860px) {
  .question-body.has-photo .question-foto.es-enunciado { aspect-ratio: 3 / 2; max-height: none; }
  .question-foto.es-enunciado { max-height: none; }
}

/* ================================================= Manual: lectura editorial
   La orientación, el resumen y el índice forman una única secuencia de estudio.
   Estas reglas sustituyen visualmente la antigua portada con texto sobre foto. */
body:has(.manual-cuerpo) { background: var(--canvas-2); }

.manual-layout {
  grid-template-columns: 264px minmax(0, 1fr);
  gap: 34px;
  padding-top: 22px;
}

.manual-lateral {
  top: 96px;
  max-height: calc(100vh - 116px);
  padding: 4px 16px 26px 0;
}

.manual-lateral-progreso {
  margin-bottom: 20px;
  padding: 0 8px;
}

.manual-lateral-progreso strong {
  display: block;
  margin-bottom: 10px;
  font-size: .92rem;
  letter-spacing: -.01em;
}

.manual-lateral-barra {
  display: block;
  height: 5px;
  overflow: hidden;
  background: var(--line);
  border-radius: 999px;
}

.manual-lateral-barra i {
  display: block;
  min-width: 18px;
  height: 100%;
  background: var(--red);
  border-radius: inherit;
}

.volver-manual {
  margin: 0 8px 12px;
  font-size: .84rem;
  font-weight: 700;
}

.lista-temas {
  position: relative;
  border-left: 0;
}

.lista-temas::before {
  content: "";
  position: absolute;
  top: 22px;
  bottom: 22px;
  left: 25px;
  width: 1px;
  background: var(--line-strong);
}

.lista-temas a {
  position: relative;
  z-index: 1;
  align-items: center;
  gap: 10px;
  min-height: 42px;
  margin: 0;
  padding: 5px 10px;
  border: 0;
  border-radius: 10px;
  font-size: .78rem;
  line-height: 1.28;
}

.lista-temas a:hover { background: var(--canvas-2); }
.lista-temas .aqui a { background: var(--red-soft); border: 0; }

.lista-temas .num {
  flex: 0 0 31px;
  width: 31px;
  height: 31px;
  display: grid;
  place-items: center;
  color: #667085;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  font-size: .72rem;
}

.lista-temas .aqui .num {
  color: #fff;
  background: var(--red);
  border-color: var(--red-ink);
  box-shadow: 0 5px 12px rgba(238,31,37,.18);
}

.manual-cuerpo { max-width: 1090px; }

.via-lectura {
  top: 76px;
  height: 7px;
  margin: 0 0 14px;
  border-radius: 999px;
}

.portada-tema {
  display: grid;
  grid-template-columns: minmax(0, 58%) minmax(330px, 42%);
  aspect-ratio: auto;
  min-height: 260px;
  margin: 0;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: 0 10px 30px rgba(15,23,42,.05);
}

.portada-copy {
  align-self: center;
  padding: 38px 42px;
}

.portada-tema .tomo {
  display: block;
  margin-bottom: 14px;
  color: var(--red-ink);
  font-size: .76rem;
  font-weight: 850;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.portada-tema .tomo i { color: #8c95a3; font-style: normal; }

.portada-tema h1 {
  max-width: 16ch;
  margin: 0;
  color: var(--ink);
  font-size: clamp(2.3rem, 4vw, 3.45rem);
  line-height: 1.02;
  letter-spacing: -.055em;
  text-wrap: balance;
}

.portada-tema .portada-copy p {
  max-width: 50ch;
  margin: 20px 0 0;
  color: var(--muted);
  font-size: 1.02rem;
  line-height: 1.65;
}

.portada-imagen {
  position: relative;
  min-height: 260px;
  margin: 0;
  overflow: hidden;
}

.portada-imagen::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0 auto 0 0;
  width: 28%;
  background: linear-gradient(90deg, var(--surface), transparent);
}

.portada-imagen img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.manual-cabecera.con-portada {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-top: 18px;
  padding: 14px 18px 14px 22px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
}

.manual-cabecera.con-portada .manual-meta {
  flex: 1 1 auto;
  gap: 8px 0;
  margin: 0;
  font-size: .82rem;
}

.manual-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 13px;
  border-right: 1px solid var(--line);
}

.manual-meta-item:first-child { padding-left: 0; }
.manual-meta-item:last-of-type { border-right: 0; }

.manual-cabecera.con-portada .acciones-tema {
  flex: 0 0 auto;
  flex-wrap: nowrap;
  margin: 0;
  gap: 8px;
}

.manual-cabecera.con-portada .marca-leido {
  min-height: 42px;
  margin: 0;
  padding: 0 16px;
  color: #fff;
  background: var(--red);
  border-color: var(--red-ink);
  border-radius: 10px;
  box-shadow: 0 7px 18px rgba(238,31,37,.16);
}

.manual-cabecera.con-portada .marca-leido input { accent-color: #fff; }
.manual-cabecera.con-portada .marca-leido.hecho {
  color: #0e6828;
  background: var(--green-soft);
  border-color: var(--ok-border);
  box-shadow: none;
}

.manual-cabecera.con-portada .btn-small,
.manual-cabecera.con-portada .enlace-facil {
  min-height: 42px;
  margin: 0;
  padding: 0 15px;
  border-radius: 10px;
  white-space: nowrap;
}

.esencial {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  gap: 22px;
  margin: 22px 0 0;
  padding: 28px 34px;
  background: var(--blue-soft);
  border: 1px solid #8fb8f5;
  border-left-width: 1px;
  border-radius: 14px;
}

.esencial-icono {
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  color: var(--blue);
  background: rgba(255,255,255,.55);
  border: 1px solid #a9c8f5;
  border-radius: 16px;
}

.esencial-icono .ico { width: 30px; height: 30px; }
.esencial .aviso-tit { margin: 0 0 12px; color: #1659b3; }
.esencial ol { columns: 1; margin: 0; padding-left: 22px; line-height: 1.65; }
.esencial li { padding-left: 5px; margin-bottom: 6px; }
.esencial li::marker { color: var(--blue); font-weight: 850; }

.sumario {
  margin: 22px 0 14px;
  padding: 20px 26px 22px;
  border-radius: 14px;
}

.sumario ol {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 52px;
  margin: 0;
  padding: 0;
  list-style-position: inside;
  line-height: 1.4;
}

.sumario li {
  min-width: 0;
  padding: 11px 4px;
  border-bottom: 1px solid var(--line);
}

.sumario li:nth-last-child(-n + 2) { border-bottom-color: transparent; }
.sumario a { display: inline; font-weight: 600; }

@media (max-width: 1180px) {
  .manual-cabecera.con-portada { align-items: flex-start; flex-direction: column; }
  .manual-cabecera.con-portada .acciones-tema { width: 100%; flex-wrap: wrap; }
}

@media (max-width: 1080px) {
  .manual-layout { grid-template-columns: 1fr; gap: 20px; }
  .manual-lateral { position: static; max-height: none; padding: 16px 18px; }
  .manual-lateral-progreso { margin-bottom: 14px; padding: 0; }
  .lista-temas::before { display: none; }
  .lista-temas a { min-height: 40px; }
  .manual-cuerpo { max-width: none; }
}

@media (max-width: 760px) {
  .manual-layout { padding-top: 14px; }
  .portada-tema { grid-template-columns: 1fr; }
  .portada-copy { padding: 30px 24px 26px; }
  .portada-tema h1 { font-size: 2.45rem; }
  .portada-tema .portada-copy p { font-size: .96rem; }
  .portada-imagen { min-height: 190px; }
  .portada-imagen::before { display: none; }
  .manual-cabecera.con-portada { padding: 18px; }
  .manual-cabecera.con-portada .acciones-tema { flex-direction: column; }
  .manual-cabecera.con-portada .acciones-tema > * { width: 100%; justify-content: center; }
  .esencial { grid-template-columns: 1fr; padding: 24px 22px; }
  .esencial-icono { width: 52px; height: 52px; }
  .sumario ol { grid-template-columns: 1fr; }
  .sumario li:nth-last-child(-n + 2) { border-bottom-color: var(--line); }
  .sumario li:last-child { border-bottom-color: transparent; }
}

@media print {
  .manual-lateral-progreso { display: none !important; }
  .portada-tema { display: block; min-height: 0; border: 0; box-shadow: none; }
  .portada-copy { padding: 0 0 20px; }
  .portada-imagen { display: none; }
  .manual-cabecera.con-portada { display: none; }
  .esencial { display: block; }
}

/* --------------------------------------- columna de lectura del manual ----
   El manual son 3,3 horas de texto seguido, y ahi una serif con buen ojo
   aguanta bastante mejor que Inter. Se aplica SOLO a la prosa del temario:
   titulares, interfaz, cajas y tablas siguen en Inter, que es lo que da
   coherencia con el resto del sitio. Si no convence, se quita esta regla y
   todo vuelve a como estaba. */
.manual-prosa p,
.manual-prosa li {
  font-family: "Source Serif 4", Georgia, "Times New Roman", serif;
  font-size: 1.09rem;
  line-height: 1.72;
}
.manual-prosa strong { font-weight: 600; }
/* La medida de 70ch del contenedor esta calculada en Inter. Al cambiar la
   fuente de los parrafos, la linea se iba a 81 caracteres, muy por encima de
   los 65-75 comodos. Se fija aqui, donde `ch` ya resuelve en la serif. */
.manual-prosa p, .manual-prosa li { max-width: none; }
.manual-prosa .aviso p { max-width: none; }
.manual-prosa .aviso p,
.manual-prosa .lanza-test,
.manual-prosa figcaption,
.manual-prosa .tabla { font-family: inherit; font-size: inherit; }

@media (max-width: 720px) {
  .manual-prosa p, .manual-prosa li { font-size: 1.04rem; }
}

/* ------------------------- ficha de pregunta con senal al lado -----------
   En las paginas de test la muestra puede llevar la senal de la que habla el
   enunciado. En las fichas de senal no hace falta: la senal es la pagina. */
.ficha-pregunta.con-senal { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 22px; align-items: start; }
.ficha-pregunta-senal { display: grid; place-items: center; padding: 12px;
  background: var(--canvas); border: 1px solid var(--line); border-radius: 12px; }
.ficha-pregunta-senal .senal { width: 100%; height: auto; max-height: 72px; }

@media (max-width: 640px) {
  .ficha-pregunta.con-senal { grid-template-columns: 68px minmax(0, 1fr); gap: 14px; }
  .ficha-pregunta-senal { padding: 8px; }
  .ficha-pregunta-senal .senal { max-height: 52px; }
}

/* ---------------------- ficha de pregunta con fotografia -----------------
   Cuando el enunciado dice «en la fotografia», la foto es la pregunta. Va a
   un ancho de verdad, no a la miniatura de 96 px que se usa para la senal, y
   entera: recortarla podria quitar de encuadre el detalle por el que se
   pregunta, igual que pasaba en el motor del test. */
.ficha-pregunta.con-foto { display: grid; grid-template-columns: minmax(0, 260px) minmax(0, 1fr); gap: 24px; align-items: start; }
.ficha-pregunta-foto { margin: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: var(--canvas); }
.ficha-pregunta-foto img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: contain; display: block; }

@media (max-width: 720px) {
  .ficha-pregunta.con-foto { grid-template-columns: 1fr; gap: 16px; }
}

/* Las tarjetas de la cabecera («Tu progreso», «Tu recorrido») son secciones de
   primer nivel de su pagina, asi que su titulo es un h2. Se mantiene el tamano
   que tenian como h3: el nivel es semantica, no tamano de letra. */
.titulo-tarjeta { margin: 0 0 10px; font-size: 1.05rem; font-weight: 800; letter-spacing: -.02em; }

/* Encabezado de fila. En las tablas de ficha la primera celda no es un dato,
   es lo que nombra la fila: marcarlo con <th scope="row"> es lo que permite a
   un lector de pantalla decir «Codigo oficial: R-2» en vez de leer dos celdas
   sueltas. Visualmente se queda como estaba: la mayuscula y el espaciado de
   .tabla th son para las cabeceras de columna, no para estas. */
.tabla th[scope="row"] {
  color: var(--muted); font-weight: 600; font-size: .95rem;
  text-transform: none; letter-spacing: normal;
}

/* ---------------------------------------------------------- autoescuelas -- */
.cabecera-seccion { padding: 46px 0 26px; max-width: 62ch; }
.cabecera-seccion .eyebrow a { color: inherit; }

/* Rejilla de provincias: se pide un ancho minimo y el navegador decide cuantas
   caben. Asi funciona igual en un movil estrecho que en un monitor ancho sin
   una sola consulta de medios. */
.rejilla-provincias { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; margin: 0 0 40px; }
.provincia { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 13px 16px; background: var(--surface); border: 1px solid var(--line);
  border-radius: 10px; font-weight: 700; text-decoration: none; color: var(--ink);
  transition: border-color .18s ease, transform .18s ease; }
.provincia:hover { border-color: var(--red-ink); transform: translateY(-2px); }
.provincia .cuenta { flex: 0 0 auto; padding: 2px 9px; border-radius: 999px;
  background: var(--red-soft); color: var(--red-ink); font-size: .82rem;
  font-variant-numeric: tabular-nums; }

/* El mapa reserva su alto desde el principio aunque este oculto: si apareciera
   de golpe empujaria la lista hacia abajo bajo los dedos de quien esta
   leyendo, que es justo lo que mide Google como CLS. */
.mapa-caja { margin: 0 0 34px; }
.mapa { height: 460px; border-radius: var(--radius); border: 1px solid var(--line); }
.mapa[hidden] { display: none; }
@media (max-width: 640px) { .mapa { height: 340px; } }

.lista-autoescuelas { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px; margin: 0 0 40px; padding: 0; list-style: none; counter-reset: none; }
.autoescuela { background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 16px 18px; }
.autoescuela h3 { margin: 0 0 6px; font-size: 1.04rem; line-height: 1.3; }
.autoescuela .direccion { margin: 0 0 8px; color: var(--muted); font-size: .93rem; }
.autoescuela .contacto { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 0; font-size: .93rem; }
.autoescuela .horario { margin: 8px 0 0; color: var(--muted); font-size: .86rem; }

.prosa-corta { max-width: 66ch; margin: 0 0 34px; }
.prosa-corta h2 { margin: 0 0 12px; }
.prosa-corta ol { padding-left: 1.25em; }
.prosa-corta li { margin-bottom: 10px; }

.provincias-vecinas { margin: 34px 0 10px; }
.provincias-vecinas h2 { font-size: 1.05rem; margin: 0 0 8px; }
.provincias-vecinas p { color: var(--muted); line-height: 2; }
.titulo-lista { margin: 0 0 14px; font-size: 1.18rem; }


/* ============================================================================
   CAPA PREMIUM (19-10-2026)
   Inspirada en el lenguaje de horizonx.so: cabecera en capsula de cristal que
   flota al hacer scroll, portada centrada con un abanico de cartas en 3D,
   botones pildora, tarjetas mas redondas que se elevan al pasar el raton y
   contenido que aparece al entrar en pantalla. Va al final de estilo.css
   (la concatena herramientas/publicar.mjs) para ganar por orden.
   ========================================================================== */
:root {
  --radius: 20px;
  --ease-suave: cubic-bezier(.2, .8, .2, 1);
  --shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 12px 32px -12px rgba(15, 23, 42, .12);
  --shadow-alta: 0 2px 4px rgba(15, 23, 42, .05), 0 28px 60px -18px rgba(15, 23, 42, .28);
}
:root[data-tema="oscuro"] { --shadow-alta: 0 28px 60px -18px rgba(0, 0, 0, .7); }
@media (prefers-color-scheme: dark) { :root:not([data-tema="claro"]) { --shadow-alta: 0 28px 60px -18px rgba(0, 0, 0, .7); } }

/* ------------------------------------------------- Cabecera en capsula */
.site-header { height: auto; padding: 10px 0; background: transparent; border-bottom: 0;
  -webkit-backdrop-filter: none; backdrop-filter: none; pointer-events: none; }
.site-header .nav-wrap { pointer-events: auto; height: 64px; padding: 0 10px 0 16px;
  border: 1px solid transparent; border-radius: 999px;
  transition: background .35s ease, border-color .35s ease, box-shadow .35s ease, width .5s var(--ease-suave); }
.site-header.flotando .nav-wrap, body.en-test .site-header .nav-wrap {
  width: min(calc(100% - 24px), 1240px); background: var(--surface-veil);
  -webkit-backdrop-filter: blur(18px) saturate(1.6); backdrop-filter: blur(18px) saturate(1.6);
  border-color: var(--line); box-shadow: 0 10px 40px -12px rgba(15, 23, 42, .22); }
.brand { font-size: 1.4rem; }
.brand-sign { width: 40px; height: 40px; border-width: 4.5px; transition: transform .6s var(--ease-suave); }
.brand:hover .brand-sign { transform: rotate(-12deg) scale(1.06); }
.nav-group { gap: 10px; align-items: center; }
.nav-links { gap: 2px; align-items: center; }
.nav-link { height: 40px; padding: 0 13px; border-radius: 999px; white-space: nowrap; font-weight: 650; font-size: .95rem;
  transition: background .2s ease, color .2s ease; }
.nav-link::after { display: none; }
.nav-link:hover { color: var(--ink); background: var(--canvas-2); }
.nav-link.active { color: var(--red-ink); background: var(--red-soft); }
.tema-btn, .profile-link, .mobile-toggle { border-radius: 999px; }
.tema-btn { margin-right: 0; }

/* Con 8 enlaces, por debajo de 1180 px no caben en una fila: hamburguesa.
   Antes el corte estaba en 760 px y entre medias el menu se partia en dos lineas. */
@media (max-width: 1180px) {
  .mobile-toggle { display: grid; place-items: center; }
  .nav-group { position: fixed; inset: 82px 12px auto; height: auto; display: none; padding: 10px;
    background: var(--surface); border: 1px solid var(--line); border-radius: 22px; box-shadow: var(--shadow-alta); }
  .nav-group.open { display: block; animation: desplegar .32s var(--ease-suave); }
  .nav-links { display: grid; gap: 2px; }
  .nav-link { height: 48px; justify-content: start; padding: 0 16px; font-size: 1rem; }
  .profile-link { margin-top: 8px; width: auto; padding: 0 16px; justify-items: start; }
  .site-header .nav-wrap { width: min(calc(100% - 24px), 1240px); }
}
@keyframes desplegar { from { opacity: 0; transform: translateY(-8px) scale(.98); } }

/* ------------------------------------------------- Botones y tarjetas */
.btn { border-radius: 999px; transition: transform .35s var(--ease-suave), box-shadow .35s var(--ease-suave), background .2s ease; }
.btn-small { border-radius: 999px; }
.btn-primary { box-shadow: 0 1px 0 rgba(255,255,255,.25) inset, 0 10px 24px -8px rgba(216, 28, 34, .55); }
.btn-primary:hover { box-shadow: 0 1px 0 rgba(255,255,255,.25) inset, 0 16px 32px -10px rgba(216, 28, 34, .6); }
.btn-secondary { color: var(--canvas); background: var(--ink); border-color: var(--ink); }
.btn-secondary:hover { background: var(--ink); opacity: .9; }
.card { border-radius: var(--radius); }
.test-card, .article-card, .guide-card, .senal-card, .featured-guide {
  transition: transform .5s var(--ease-suave), box-shadow .5s var(--ease-suave), border-color .3s ease; }
.test-card:hover, .article-card:hover, .guide-card:hover, .senal-card:hover {
  transform: translateY(-6px); box-shadow: var(--shadow-alta); border-color: var(--line-strong); }
.icon-bubble { border-radius: 16px; }
.eyebrow { border-radius: 999px; padding: 8px 14px; }
/* Las tarjetas de formato no tienen progreso propio: la barra vacia parecia
   un fallo. Se oculta salvo donde app.js la rellena por tema. */
.card-actions .progress:not(:has([data-progreso-tema])) { visibility: hidden; }

/* ------------------------------------------------- Portada: hero centrado */
.home-hero { padding: 40px 0 30px; }
.home-hero::before { top: -260px; left: 50%; right: auto; width: 900px; height: 600px; transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(238, 31, 37, .16), transparent 70%); border-radius: 50%; filter: blur(10px); }
.home-hero::after { display: none; }
.hero-v2 { display: block; text-align: center; }
.hero-centro { max-width: 860px; margin: 0 auto; }
.hero-centro .home-title { max-width: none; margin: 22px auto 18px; font-size: clamp(2.6rem, 6.4vw, 5.4rem);
  line-height: .98; letter-spacing: -.055em; }
.hero-centro .home-copy { max-width: 600px; margin-inline: auto; font-size: 1.12rem; }
.hero-centro .subrayado::after { left: 50%; transform: translateX(-50%) rotate(-1.5deg); }
.hero-centro .button-row, .hero-centro .ventajas, .hero-centro .hero-cifras { justify-content: center; }
.hero-centro .hero-cifras { border-top: 0; padding-top: 0; }
.hero-centro .btn { min-height: 54px; padding: 0 26px; }

/* Abanico de cartas: aparece al cargar, se separa al pasar el raton y gira
   un poco siguiendo al puntero (--rx/--ry los pone app.js). */
.abanico { --rx: 0deg; --ry: 0deg; position: relative; height: clamp(320px, 36vw, 460px); max-width: 1080px;
  margin: 46px auto 8px; perspective: 1600px; }
.abanico-escena { position: absolute; inset: 0; transform-style: preserve-3d;
  transform: rotateX(var(--rx)) rotateY(var(--ry)); }
.carta { --x: 0%; --y: 0px; --r: 0deg; --z: 0px; --subida: 0px; --escala: 1;
  position: absolute; left: 50%; top: 10px; z-index: 1;
  width: clamp(150px, 19vw, 236px); aspect-ratio: 4 / 5; margin: 0; overflow: hidden;
  background: var(--surface); border: 1px solid var(--line); border-radius: 26px; box-shadow: var(--shadow-alta);
  transform: translateX(-50%) translateX(var(--x)) translateY(calc(var(--y) + var(--subida)))
    translateZ(var(--z)) rotate(var(--r)) scale(var(--escala));
  transition: transform .7s var(--ease-suave);
  /* La entrada solo controla opacity; nunca retiene el transform del hover. */
  animation: abrir-carta .7s var(--ease-suave) backwards; animation-delay: calc(.08s * var(--orden, 0)); }
.carta:nth-child(1) { --x: -132%; --y: 46px; --r: -14deg; --orden: 4; }
.carta:nth-child(2) { --x: -68%;  --y: 14px; --r: -7deg;  --orden: 2; --z: 1px; z-index: 2; }
.carta:nth-child(3) { --x: 0%;    --y: 0px;  --r: 0deg;   --orden: 0; --z: 2px; z-index: 3; }
.carta:nth-child(4) { --x: 68%;   --y: 14px; --r: 7deg;   --orden: 2; --z: 1px; z-index: 2; }
.carta:nth-child(5) { --x: 132%;  --y: 46px; --r: 14deg;  --orden: 4; }
@media (min-width: 761px) and (hover: hover) and (pointer: fine) {
  /* La profundidad se interpola con el movimiento: no se cambia z-index. */
  .abanico .carta:hover { --z: 48px; }
}
@media (min-width: 761px) and (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .abanico:hover .carta:nth-child(1) { --x: -162%; --r: -16deg; }
  .abanico:hover .carta:nth-child(2) { --x: -84%;  --r: -8deg; }
  .abanico:hover .carta:nth-child(4) { --x: 84%;   --r: 8deg; }
  .abanico:hover .carta:nth-child(5) { --x: 162%;  --r: 16deg; }
  .abanico .carta:hover { --subida: -18px; --escala: 1.04; }
}
@keyframes abrir-carta { from { opacity: 0; } to { opacity: 1; } }
.carta img { width: 100%; height: 100%; object-fit: cover; }
.carta figcaption { position: absolute; left: 0; right: 0; bottom: 0; display: grid; gap: 3px; padding: 16px 16px 15px;
  text-align: left; font-size: .8rem; line-height: 1.35; }
.carta figcaption b { font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; }
.carta-foto figcaption { color: #fff; background: linear-gradient(to top, rgba(8, 10, 14, .82), rgba(8, 10, 14, 0)); padding-top: 50px; }
.carta-senal { background: #fff; border-color: #e7e8ec; }
.carta-senal img { position: absolute; top: 15%; left: 50%; width: 58%; height: auto; transform: translateX(-50%);
  filter: drop-shadow(0 10px 16px rgba(15, 23, 42, .18)); }
.carta-senal figcaption { color: #101216; }
.carta-senal figcaption b { color: #cc141a; }
.carta-examen { display: grid; place-items: center; color: #fff; border: 0;
  background: radial-gradient(120% 90% at 30% 10%, #ff5a5f 0%, #d81c22 45%, #8e0d12 100%); }
.carta-disco { display: grid; place-items: center; width: 54%; aspect-ratio: 1; margin-top: -26%;
  color: #101216; background: #fff; border: 10px solid #ee1f25; border-radius: 50%;
  font-size: clamp(2rem, 3.6vw, 3rem); font-weight: 950; letter-spacing: -.04em;
  box-shadow: 0 0 0 6px rgba(255, 255, 255, .25), 0 20px 40px -10px rgba(0, 0, 0, .5); }
.carta-examen figcaption { color: #fff; }
.carta-examen figcaption b { color: #ffd9da; }

/* El coche rotulado: foto de estudio en una carta ancha. El fondo de la
   carta imita el gris del estudio para que la foto no tenga bordes, y el
   coche entra rodando cuando la carta aparece en pantalla. */
.coche-marca { position: relative; max-width: 1080px; margin: 34px auto 0; overflow: hidden;
  background: linear-gradient(#ececee, #e4e4e7); border: 1px solid var(--line); border-radius: 32px;
  box-shadow: var(--shadow-alta); }
.coche-marca img { width: 100%; height: auto; }
.coche-marca figcaption { position: absolute; top: 26px; left: 30px; display: grid; gap: 4px; max-width: 46%;
  color: #101216; text-align: left; font-size: .98rem; line-height: 1.45; }
.coche-marca figcaption b { color: #cc141a; font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .coche-marca img { animation: llegar-coche linear both; animation-timeline: view(); animation-range: entry 10% cover 40%; }
  }
}
@keyframes llegar-coche { from { transform: translateX(-38%); } }

/* La pregunta de prueba, en su propio bloque centrado bajo el hero. */
.demo-envoltorio { max-width: 820px; margin: 44px auto 0; text-align: center; }
.demo-envoltorio .demo-card { margin-top: 12px; text-align: left; }

@media (max-width: 760px) {
  .abanico { height: 320px; margin-top: 30px; }
  .carta { width: 150px; border-radius: 20px; }
  .carta:nth-child(1), .carta:nth-child(5) { display: none; }
  .carta:nth-child(2) { --x: -62%; --y: 18px; --r: -8deg; }
  .carta:nth-child(4) { --x: 62%;  --y: 18px; --r: 8deg; }
  .carta figcaption { padding: 12px; font-size: .72rem; }
  .coche-marca { border-radius: 22px; }
  .coche-marca figcaption { position: static; max-width: none; padding: 18px 18px 0; font-size: .9rem; }
  .hero-centro .home-copy { font-size: 1.02rem; }
}

/* ------------------------------------------------- Aparicion al hacer scroll
   Con animation-timeline (Chrome/Edge/Safari recientes) no hace falta JS y,
   si el navegador no lo soporta, el contenido simplemente esta ahi. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    body:not(.en-test) .section .section-title,
    body:not(.en-test) .section .section-copy,
    body:not(.en-test) .section .card,
    body:not(.en-test) .stats-strip {
      animation: aparecer linear both; animation-timeline: view(); animation-range: entry 0% entry 35%;
    }
  }
}
@keyframes aparecer { from { opacity: 0; transform: translateY(32px) scale(.985); } }
.section { padding: 44px 0; }

/* ------------------------------------------------- Test en movil
   La paleta de 30 casillas ocupaba cuatro filas y empujaba la tercera
   respuesta fuera de la pantalla. En movil pasa a una tira con scroll
   lateral; app.js centra la pregunta actual. */
@media (max-width: 760px) {
  .paleta { display: flex; gap: 6px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none;
    padding: 8px; margin-bottom: 12px; scroll-behavior: smooth; }
  .paleta::-webkit-scrollbar { display: none; }
  .paleta .celda { flex: 0 0 34px; height: 34px; scroll-snap-align: center; }
}

/* Respuestas: transicion al marcar y explicacion que se despliega. */
.answer { transition: border-color .2s ease, background .2s ease, transform .25s var(--ease-suave); }
.answer:not(:disabled):hover { transform: translateX(3px); }
.explanation:not(:empty) { animation: desplegar .4s var(--ease-suave); }

@media (prefers-reduced-motion: reduce) {
  .abanico { perspective: none; }
  .abanico-escena { transform: none; }
  .carta, .nav-group.open, .explanation:not(:empty) { animation: none !important; }
  .abanico-escena, .carta, .btn, .test-card { transition: none !important; }
}

/* Ajustes de movil tras revisar en 375 px */
@media (max-width: 760px) {
  .abanico { height: 250px; }
  .hero-centro .ventajas li { flex: 0 1 auto; }
  .hero-centro .eyebrow { font-size: .7rem; }
}

/* ============================================================================
   SEGUNDA PASADA (19-10-2026), tras medir la portada con el inspector:
   texto mas grande y en tinta plena, sin brillos en reposo, sin degradados,
   secciones compuestas en lugar de filas de tarjetas identicas.
   ========================================================================== */
body { font-size: 17px; }
.section-copy { color: var(--ink); opacity: .78; font-size: 1.12rem; max-width: 60ch; }
.section-title { font-size: clamp(1.9rem, 3.4vw, 3rem); letter-spacing: -.045em; line-height: 1.04; margin-bottom: 14px; }
.home-copy { color: var(--ink); }
.nav-link { font-size: 1rem; }
.senales-fondo { display: none !important; }
.tag::first-letter { color: inherit; }

/* Botones planos: la sombra roja brillante parecia de plantilla */
.btn-primary, .btn-primary:hover { box-shadow: none; }
.btn-primary:hover { background: var(--red-dark); }
.btn:active { transform: translateY(0) scale(.97); }

/* Carta del simulacro y carta del coche: color plano */
.carta-examen { background: #d81c22; }
.coche-marca { background: #e7e7ea; }

/* La portada respira mas entre secciones */
.home-page .section { padding: clamp(56px, 8vw, 110px) 0; }

/* ---- Formatos: lista en tipografia grande, una fila por formato */
.formatos-lista { list-style: none; margin: 34px 0 0; padding: 0; display: grid; gap: 10px; }
.formato a { display: grid; grid-template-columns: minmax(200px, 1.1fr) 2fr auto auto; align-items: center; gap: 28px;
  padding: 26px 30px; background: var(--surface); border-radius: 24px;
  transition: background .3s ease, transform .45s var(--ease-suave); }
.formato a:hover { transform: translateX(6px); background: var(--canvas-2); }
.formato-nombre { font-size: clamp(1.35rem, 2.2vw, 1.9rem); font-weight: 800; letter-spacing: -.035em; line-height: 1.1; }
.formato-texto { font-size: 1.02rem; line-height: 1.5; opacity: .8; }
.formato-dato { font-weight: 750; white-space: nowrap; font-variant-numeric: tabular-nums; }
.formato-ir { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%;
  background: var(--canvas-2); font-size: 1.2rem; transition: transform .45s var(--ease-suave), background .2s ease; }
.formato a:hover .formato-ir { transform: translateX(4px); background: var(--red-fill); color: #fff; }
.formato.destacado a { background: var(--red-fill); color: #fff; }
.formato.destacado a:hover { background: #c0151b; }
.formato.destacado .formato-texto { opacity: .92; }
.formato.destacado .formato-ir { background: #fff; color: #c0151b; }

/* ---- Metodo: foto grande + tres parrafos */
.metodo-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(28px, 5vw, 72px); align-items: center; }
.metodo-foto { margin: 0; overflow: hidden; border-radius: 28px; aspect-ratio: 4 / 3; }
.metodo-foto img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-suave); }
.metodo-grid:hover .metodo-foto img { transform: scale(1.04); }
.metodo-texto p { margin: 0 0 18px; font-size: 1.08rem; line-height: 1.6; max-width: 56ch; }
.metodo-texto strong { color: var(--red-ink); }

/* ---- Bloques: filas en lugar de rejilla */
.lista-bloques { grid-template-columns: 1fr 1fr !important; gap: 10px !important; margin-top: 30px; }
.lista-bloques .test-card { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 18px;
  padding: 18px 22px; border: 0; box-shadow: none; border-radius: 22px; }
.lista-bloques .test-card:hover { transform: translateX(4px); box-shadow: none; background: var(--canvas-2); }
.lista-bloques .card-actions { margin: 0; display: flex; align-items: center; gap: 16px; }
.lista-bloques .card-actions .progress { width: 90px; }
.lista-bloques h3 { font-size: 1.12rem; margin: 0 0 2px; }

/* ---- Examen: texto y ficha en dos columnas */
.examen-portada { display: block; }
.examen-portada > .prose { display: grid; grid-template-columns: 1fr 1fr; column-gap: clamp(28px, 5vw, 72px); max-width: none; }
.examen-portada > .prose > h2 { grid-column: 1 / -1; font-size: clamp(1.9rem, 3.4vw, 3rem); letter-spacing: -.045em; line-height: 1.04; margin-top: 0; }
.examen-portada > .prose > p:first-of-type { grid-column: 1; font-size: 1.12rem; }
.examen-portada > .prose > .envuelve-tabla { grid-column: 2; grid-row: 2 / span 5; align-self: start;
  padding: 10px 22px; background: var(--surface); border-radius: 24px; }
.examen-portada > .prose > h3, .examen-portada > .prose > p { grid-column: 1; }
.examen-portada .tabla td:last-child { font-weight: 800; text-align: right; font-variant-numeric: tabular-nums; }
.examen-portada .tabla thead { display: none; }

/* ---- Preguntas frecuentes: titulo fijo a la izquierda */
.dudas-portada { display: grid; grid-template-columns: minmax(220px, 1fr) 2fr; gap: clamp(28px, 5vw, 72px); align-items: start; }
.dudas-portada > h2 { position: sticky; top: 110px; }
.dudas-portada .info-card { background: transparent; border: 0; box-shadow: none; padding: 0; }
.dudas-portada .faq-item { background: var(--surface); border: 0; border-radius: 18px; margin-bottom: 8px; padding: 0 22px; }
.dudas-portada .faq-question { font-size: 1.06rem; min-height: 64px; }

/* ---- Pregunta de ejemplo y cifras */
.demo-card .question-head { gap: 12px; justify-content: space-between; }
.stats-strip { border: 0; box-shadow: none; }

@media (max-width: 900px) {
  .formato a { grid-template-columns: 1fr auto; gap: 8px 16px; padding: 22px; }
  .formato-texto { grid-column: 1 / -1; grid-row: 2; }
  .formato-dato { grid-row: 1; grid-column: 2; }
  .formato-ir { display: none; }
  .metodo-grid, .dudas-portada, .examen-portada > .prose { grid-template-columns: 1fr; }
  .examen-portada > .prose > .envuelve-tabla { grid-column: 1; grid-row: auto; margin: 10px 0 24px; }
  .dudas-portada > h2 { position: static; }
  .lista-bloques { grid-template-columns: 1fr !important; }
}
@media (max-width: 560px) {
  .lista-bloques .card-actions .progress { display: none; }
  body { font-size: 16px; }
}

/* Tamanos minimos legibles (nada por debajo de 13 px) y superficies por
   tono, no por contorno. */
.carta figcaption { font-size: .9rem; }
.carta figcaption b { font-size: .84rem; letter-spacing: 0; text-transform: none; }
.coche-marca figcaption b { font-size: .95rem; letter-spacing: 0; text-transform: none; }
.site-footer h2 { font-size: .9rem; letter-spacing: .02em; text-transform: none; }
.site-footer p, .site-footer span, .site-footer li, .site-footer strong { font-size: max(.82rem, 13px); }
.hero-centro .ventajas li { border: 0; background: var(--surface); }
.btn-primary, .btn-secondary { border-color: transparent; }
.manual-teaser, .senales-teaser, .demo-card { border-color: transparent; box-shadow: none; }
.demo-card .question-head { border-bottom: 0; }
.manual-teaser li, .indice-teaser li { border-bottom-color: transparent; }
.demo-card .answer { border-color: transparent; background: var(--canvas-2); }
.demo-card .answer:hover { background: var(--canvas); }

/* Test: la foto llena su hueco (quedaba una franja gris debajo) y menos
   aire entre la cabecera y la barra del test. */
.question-foto { overflow: hidden; }
.question-foto img { width: 100%; height: 100%; object-fit: cover; }
body.en-test #pantalla-test { padding-top: 6px; }
.question-card { border-color: transparent; }
.answer { border-color: var(--line); }
/* height:100% no resuelve contra un min-height: se posiciona la imagen. */
.question-body.has-photo .question-foto { position: relative; }
.question-body.has-photo .question-foto img { position: absolute; inset: 0; }

/* Pantalla de resultado: jerarquia en los botones, cifras alineadas y el
   repaso de fallos por tono en vez de cajas con contorno. */
.result-card { border-color: transparent; }
#detalle-resultado { margin: 6px auto 0; text-align: center; }
.result-meta { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.result-meta > * { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 16px;
  border: 0; border-radius: 999px; background: var(--canvas-2); font-weight: 750; }
.result-meta > * .ico, .result-meta > * svg { width: 16px; height: 16px; }
#btn-compartir, #btn-volver-inicio { color: var(--ink); background: var(--canvas-2); border-color: transparent; }
#btn-compartir:hover, #btn-volver-inicio:hover { background: var(--line); opacity: 1; }
.review-item { border: 0; border-left: 4px solid var(--red); background: var(--canvas); border-radius: 16px; padding: 20px 22px; }
.review-item p { font-size: 1rem; }
.review-item .exp { color: var(--ink); opacity: .78; }

/* Movil: con mas preguntas con foto, la foto no puede empujar la tercera
   respuesta fuera de la pantalla (812 px de alto). */
@media (max-width: 760px) {
  .question-body.has-photo .question-foto { aspect-ratio: auto; height: 158px; max-height: 158px; margin-bottom: 14px; }
  .question-title { font-size: 1.06rem; }
}
@media (max-width: 760px) {
  body.en-test .site-header { padding: 4px 0; }
  body.en-test .site-header .nav-wrap { height: 54px; }
  .question-body.has-photo .question-foto { height: 136px; max-height: 136px; margin-bottom: 10px; }
  #pantalla-test .answer { min-height: 0; padding-top: 11px; padding-bottom: 11px; margin: 7px 0; }
  #pantalla-test .question-card { padding: 12px; }
}
@media (max-width: 760px) { .question-body.has-photo .question-foto { width: 100%; } }
/* ============================================================================
   Propuestas aprobadas: portada y motor. Reglas acotadas a estas superficies.
   Se añade al final para conservar los estilos de manual, guías y señales.
   ========================================================================== */
.home-page .portada-hero { padding: 32px 0 16px; }
.home-page .portada-hero::before { display: none; }
.portada-hero-grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: 40px; align-items: center; }
.portada-mensaje { min-width: 0; }
.portada-kicker { margin: 0 0 16px; font-size: .78rem; line-height: 1.5; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.portada-mensaje .home-title { margin: 0 0 20px; max-width: none; font-size: clamp(2.5rem, 4.4vw, 4.25rem); line-height: 1.04; letter-spacing: -.055em; }
.portada-mensaje .home-copy { margin: 0 0 24px; max-width: 34ch; font-size: 1.2rem; line-height: 1.5; }
.portada-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; }
.home-page .btn, .runner-propuesta .btn { border-radius: 12px; min-height: 48px; }
.home-page .btn-primary, .runner-propuesta .btn-primary { color: #fff; background: var(--red-fill); border-color: var(--red-fill); box-shadow: 0 10px 22px -15px #d81c22; }
.home-page .btn-primary:hover, .runner-propuesta .btn-primary:hover { background: #b8171d; border-color: #b8171d; }
.portada-acciones .btn { min-height: 56px; padding-inline: 24px; }
.portada-enlace { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 8px 0; color: var(--ink); background: transparent; border: 0; font-weight: 700; font-size: .94rem; line-height: 1.4; cursor: pointer; text-decoration: none; }
.portada-enlace:hover { color: var(--red-ink); text-decoration: underline; text-underline-offset: 4px; }
.portada-ventajas { display: flex; flex-wrap: wrap; gap: 10px 18px; list-style: none; padding: 0; margin: 24px 0 0; font-size: .8rem; color: var(--muted); }
.portada-ventajas li::before { content: '✓'; color: var(--red-ink); margin-right: 6px; font-weight: 800; }
.portada-visual { align-self: stretch; display: flex; flex-direction: column; justify-content: center; min-width: 0; }
.portada-coche { display: block; width: 100%; height: auto; border: 1px solid var(--line); border-radius: 26px; box-shadow: var(--shadow); }
.portada-funciones { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: -24px 16px 0; }
.portada-funciones a { display: flex; align-items: center; gap: 10px; padding: 16px 12px; border-radius: 16px; border: 1px solid var(--line); background: var(--surface); box-shadow: var(--shadow); }
.portada-funciones strong { display: block; font-size: .84rem; line-height: 1.35; }
.portada-funciones small { display: block; margin-top: 4px; color: var(--muted); font-size: .76rem; line-height: 1.4; }
.portada-funciones a > span:last-child { margin-left: auto; }
.portada-icono { display: inline-grid; place-items: center; flex: 0 0 auto; width: 52px; height: 52px; border-radius: 50%; background: var(--red-soft); color: var(--red-ink); font-size: 1.3rem; font-weight: 850; }
.portada-funciones .portada-icono { width: 34px; height: 34px; font-size: 1.15rem; }
.home-page .portada-demo { display: grid; grid-template-columns: 1.05fr 150px 1.2fr; gap: 24px; align-items: center; margin-top: 36px; padding: 24px; scroll-margin-top: 105px; }
.portada-demo #demo-titulo { display: block; color: var(--muted); font-size: .85rem; font-weight: 500; margin-bottom: 16px; }
.portada-demo #demo-enunciado { font-size: 1.22rem; line-height: 1.4; margin: 0; }
.portada-demo .demo-fila { align-items: start; gap: 8px; }
.portada-demo #demo-foto { display: grid; place-items: center; }
.portada-demo #demo-foto .senal { width: 140px; height: 140px; max-width: 100%; }
.portada-demo #demo-foto img { object-fit: contain; }
.portada-demo .answer { min-height: 48px; margin: 8px 0; padding: 10px 12px; font-size: .87rem; line-height: 1.4; border-radius: 10px; }
.portada-demo .answer::before { width: 18px; height: 18px; border-color: var(--muted); }
.portada-demo .btn-pista { width: 48px; height: 48px; flex: 0 0 48px; font-weight: 800; }
.portada-demo .explanation { font-size: .9rem; }
.portada-independencia { margin: 20px 0; text-align: center; color: var(--muted); font-size: .82rem; }
.portada-cifras { display: flex; justify-content: center; gap: 48px; margin: 24px 0 0; text-align: center; }
.portada-cifras dt { font-size: 1.5rem; font-weight: 800; letter-spacing: -.04em; }
.portada-cifras dd { margin: 4px 0 0; font-size: .8rem; color: var(--muted); }
.home-page .section { padding: 36px 0; }
.home-page .section-title { font-size: clamp(1.8rem, 3vw, 2.7rem); line-height: 1.12; }
.home-page .section-copy { opacity: 1; color: var(--muted); }
body:has(.home-page) #chapa-fallos { background: var(--red-fill); }
.home-page .section .section-title, .home-page .section .section-copy, .home-page .section .card { animation: none; }
.portada-formatos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin-top: 28px; }
.portada-formato { display: flex; flex-direction: column; align-items: center; padding: 24px 18px 18px; text-align: center; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow); }
.portada-formato h3 { margin: 18px 0 10px; font-size: 1.17rem; letter-spacing: -.03em; }
.portada-formato p { margin: 0 0 6px; font-size: .92rem; }
.portada-formato .btn { width: 100%; margin-top: auto; font-size: .85rem; padding: 12px 10px; }
.portada-formato p:last-of-type { padding-bottom: 24px; }
.portada-metodo { margin-top: 28px; padding: 28px; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow); }
.portada-metodo .section-title { font-size: clamp(1.7rem, 2.7vw, 2.4rem); }
.portada-metodo ol { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; margin: 28px 0 0; padding: 0; list-style: none; }
.portada-metodo li { display: flex; gap: 16px; }
.portada-metodo h3 { margin: 0 0 7px; font-size: 1.05rem; }
.portada-metodo p { margin: 0; font-size: .92rem; color: var(--muted); line-height: 1.6; }
.portada-recursos { display: grid; grid-template-columns: 1.35fr 1fr; gap: 22px; }
.portada-manual, .portada-senales { position: relative; overflow: hidden; padding: 30px; background: var(--surface); border: 1px solid var(--line); border-radius: 20px; box-shadow: var(--shadow); }
.portada-manual { background: linear-gradient(130deg, var(--surface), var(--canvas-2)); }
.portada-manual-texto { position: relative; z-index: 1; max-width: 62%; }
.portada-manual-texto > p:not(.portada-kicker), .portada-senales > p:not(.portada-kicker) { color: var(--muted); line-height: 1.6; font-size: .95rem; }
.portada-manual ul { list-style: none; margin: 22px 0; padding: 0; font-size: .9rem; }
.portada-manual li { margin: 12px 0; }
.portada-manual li::before { content: '✓'; color: var(--red-ink); font-weight: 800; margin-right: 8px; }
.portada-manual-texto .portada-enlace { display: flex; justify-content: start; color: var(--red-ink); margin-top: 8px; }
.portada-libro { position: absolute; width: 250px; height: 300px; right: -68px; top: 90px; display: grid; grid-template-columns: 1fr 1fr; transform: rotate(12deg); filter: drop-shadow(0 20px 14px #0002); border-bottom: 7px solid #d81c22; border-radius: 5px; }
.portada-hoja { padding: 18px 12px; color: #171923; background: #fff; border-radius: 5px 15px 0 0; }
.portada-hoja + .portada-hoja { background: linear-gradient(90deg, #e4e5e7, #fff 20%); }
.portada-hoja span { color: #b8171d; font-weight: 750; font-size: .68rem; }
.portada-hoja b { display: block; margin: 26px 0; font-size: 1.15rem; line-height: 1.15; }
.portada-hoja i { display: block; height: 3px; margin: 12px 0; background: #d8dce2; }
.portada-hoja img { width: 100%; height: 110px; object-fit: cover; margin-top: 28px; border-radius: 3px; }
.portada-senales { display: flex; flex-direction: column; }
.portada-senales-muestra { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 26px 0 32px; }
.portada-senales-muestra img { width: 28%; height: 110px; padding: 10px; background: #fff; border: 1px solid #e5e7eb; border-radius: 14px; object-fit: contain; box-shadow: var(--shadow); }
.portada-senales-muestra img:first-child { transform: rotate(-9deg); }
.portada-senales-muestra img:last-child { transform: rotate(9deg); }
.portada-senales .btn { margin-top: auto; align-self: start; }
.portada-panel-examen { padding: 34px; border-radius: 22px; color: #fff; background: radial-gradient(ellipse at 100% 0, #374151, #171c24 65%); box-shadow: var(--shadow); }
.portada-panel-examen .portada-kicker, .portada-panel-examen > p { color: #d8dce2; }
.portada-panel-examen h2 { margin: 0 0 12px; font-size: clamp(1.8rem, 3.4vw, 3rem); letter-spacing: -.04em; line-height: 1.15; }
.portada-panel-fila { display: flex; justify-content: space-between; align-items: end; flex-wrap: wrap; gap: 24px; margin-top: 30px; }
.portada-panel-fila dl { display: flex; flex-wrap: wrap; gap: 42px; margin: 0; }
.portada-panel-fila dt { font-size: 3rem; line-height: 1.15; letter-spacing: -.045em; font-weight: 850; }
.portada-panel-fila dt small { font-size: 1.5rem; }
.portada-panel-fila dd { margin: 8px 0 0; font-size: .9rem; }
.portada-faq { margin-top: 24px; padding: 6px 24px; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; }
.portada-faq .faq-question { min-height: 64px; }
.portada-confianza { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px 20px; margin-top: 24px; font-size: .82rem; color: var(--muted); }
.portada-confianza nav { display: flex; flex-wrap: wrap; gap: 20px; }
.portada-confianza a { display: inline-flex; align-items: center; min-height: 48px; text-decoration: underline; text-underline-offset: 3px; }
.portada-cta-reserva, .portada-cta-fija { display: none; }
/* El motor tiene cabecera propia; el resultado conserva la navegación habitual. */
body.en-test:has(.runner-propuesta) .site-header { display: none; }
body.en-test:has(.runner-propuesta) main { padding-top: 0; padding-bottom: 0; }
#pantalla-test.runner-propuesta { padding: 0 0 32px; }
.runner-propuesta .runner-wrap { width: min(calc(100% - 48px), 1320px); }
.runner-propuesta .runner-top { position: static; min-height: 90px; margin: 0 0 22px; padding: 12px 4px; border-bottom: 1px solid var(--line); flex-wrap: nowrap; }
.runner-propuesta .runner-label { font-size: 1.1rem; text-align: center; }
.runner-propuesta .runner-estado { display: flex; padding: 12px 20px; gap: 24px; margin-bottom: 22px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); box-shadow: var(--shadow); }
.runner-propuesta .runner-estado #num-pregunta { display: block; padding: 0; color: var(--ink); background: none; }
.runner-propuesta .runner-estado #contador { display: none; }
.runner-propuesta .runner-estado .progress { max-width: 220px; margin-left: auto; }
.runner-propuesta .runner-estado .progress > span { background: var(--red-fill); }
.runner-propuesta .crono { background: var(--canvas-2); border: 0; }
.runner-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; align-items: start; }
.runner-propuesta.modo-examen .runner-layout { grid-template-columns: minmax(0, 1fr) 320px; }
#pantalla-test.runner-propuesta .question-card { padding: 26px; }
.runner-propuesta .question-body { padding: 0; }
.runner-propuesta .question-title { font-size: clamp(1.35rem, 2.1vw, 1.9rem); line-height: 1.3; letter-spacing: -.03em; margin-bottom: 24px; }
.runner-propuesta .question-title .senal { display: none; }
.runner-propuesta .question-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; }
.runner-propuesta .question-body.has-photo .question-grid { grid-template-columns: minmax(0, .65fr) minmax(0, 1fr); gap: 24px; }
.runner-propuesta .question-media:empty { display: none; }
.runner-propuesta .question-media { display: grid; place-items: center; min-width: 0; padding: 10px; background: var(--canvas-2); border-radius: 12px; }
.runner-propuesta .question-media > .senal { width: 100%; height: auto; max-height: 265px; max-width: 250px; object-fit: contain; }
.runner-propuesta .question-body.has-photo .question-foto { width: 100%; height: 250px; min-height: 0; max-height: 250px; margin: 0; aspect-ratio: auto; box-shadow: none; border: 0; }
.runner-propuesta .question-foto img { object-fit: contain; }
#pantalla-test.runner-propuesta .answer { min-height: 72px; margin: 0 0 12px; padding: 14px 16px; line-height: 1.45; font-size: 1rem; border-color: var(--muted); }
#pantalla-test.runner-propuesta .answer:last-child { margin-bottom: 0; }
.runner-propuesta .answer::before { border-color: var(--muted); }
.runner-propuesta .answer:hover { transform: none; }
.runner-propuesta .answer.selected { color: var(--ink); background: var(--canvas-2); border-color: var(--ink); box-shadow: none; }
.runner-propuesta .answer.selected::before { background: var(--ink); border-color: var(--ink); box-shadow: inset 0 0 0 3px var(--canvas-2); }
.runner-propuesta .answer.correct { border-color: var(--ok-ink) !important; }
.runner-propuesta .answer.wrong { border-color: var(--ko-ink) !important; }
.runner-propuesta .runner-foot { justify-content: end; }
.runner-propuesta .runner-foot.examen { flex-direction: row; flex-wrap: wrap; margin-top: 24px; padding-top: 20px; gap: 12px; }
.runner-propuesta .nav-examen { display: flex; flex-wrap: wrap; gap: 8px; }
.runner-propuesta .acciones-examen { display: flex; margin-left: auto; }
.runner-propuesta .acciones-examen #btn-siguiente-examen { min-width: 140px; }
.runner-propuesta .btn-secondary { color: var(--ink); background: var(--surface); border-color: var(--muted); }
.runner-propuesta .btn-secondary:disabled { opacity: .45; }
.runner-propuesta .btn:hover, .runner-propuesta .btn:active { transform: none; }
.runner-propuesta #btn-marcar { border-color: transparent; }
.runner-propuesta #btn-marcar.activo { color: var(--amber-ink); background: var(--amber-soft); border-color: var(--amber-ink); }
.runner-navegador { padding: 20px; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow); }
.runner-navegador summary { display: flex; align-items: center; justify-content: space-between; min-height: 48px; font-size: 1.05rem; font-weight: 800; cursor: pointer; list-style: none; }
.runner-navegador summary::after { content: '+'; font-size: 1.3rem; }
.runner-navegador details[open] > summary::after { content: '−'; }
.runner-propuesta .paleta { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 7px; overflow: visible; margin: 12px 0 18px; padding: 0; background: none; border: 0; border-radius: 0; box-shadow: none; }
.runner-propuesta .celda { min-width: 0; height: 48px; font-size: .9rem; color: var(--ink); background: var(--surface); border: 1px solid var(--muted); }
.runner-propuesta .celda.respondida { background: var(--ink); color: var(--surface); }
.runner-propuesta .celda.actual { outline: 2px solid var(--red-ink); outline-offset: 2px; box-shadow: none; }
.runner-propuesta .celda.marcada { position: relative; }
.runner-propuesta .celda.marcada::after { content: ''; position: absolute; right: 4px; top: 4px; width: 7px; height: 7px; background: var(--amber-ink); border: 1px solid var(--surface); border-radius: 50%; }
#respondidas-examen { margin: 16px 0; color: var(--muted); font-size: .9rem; }
.paleta-leyenda { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; list-style: none; padding: 18px 0 0; margin: 0; border-top: 1px solid var(--line); font-size: .72rem; }
.paleta-leyenda li { display: flex; align-items: center; gap: 7px; }
.paleta-leyenda i { display: inline-block; width: 14px; height: 14px; border-radius: 50%; border: 1px solid var(--muted); }
.paleta-leyenda .estado-respondida { background: var(--ink); }
.paleta-leyenda .estado-actual { border: 2px solid var(--red-ink); }
.paleta-leyenda .estado-marcada { background: var(--amber-ink); }
.runner-propuesta .btn-finalizar { width: 100%; margin-top: 22px; font-size: .9rem; color: var(--ink); background: var(--surface); border-color: var(--muted); }
.runner-propuesta .btn-finalizar:hover { background: var(--canvas-2); }
.runner-ayuda { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-top: 22px; padding: 16px 20px; border: 1px solid var(--line); border-radius: 12px; color: var(--muted); background: var(--surface); font-size: .83rem; }
.runner-ayuda p { margin: 0; }
.home-page :is(a, button, summary):focus-visible, .runner-propuesta :is(a, button, summary):focus-visible { outline: 3px solid var(--blue); outline-offset: 4px; }
.home-page .answer:focus-within { outline: 3px solid var(--blue); outline-offset: 3px; }
@media (max-width: 1100px) {
  .portada-hero-grid { gap: 24px; }
  .portada-funciones { grid-template-columns: 1fr; margin: -10px 12px 0; }
  .portada-demo { grid-template-columns: 1fr 100px 1.2fr !important; gap: 16px !important; }
  .portada-demo #demo-foto .senal { width: 100px; height: 100px; }
  .portada-formatos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .runner-propuesta.modo-examen .runner-layout { grid-template-columns: minmax(0, 1fr) 290px; }
  .runner-propuesta .question-body.has-photo .question-grid { grid-template-columns: 1fr; gap: 16px; }
  .runner-propuesta .question-body.has-photo .question-foto { height: 180px; }
  .runner-propuesta .question-media > .senal { max-height: 150px; }
}
@media (max-width: 760px) {
  body:has(.home-page) .container { width: calc(100% - 40px); }
  body:has(.home-page) :is(.tema-btn, .mobile-toggle, .profile-link) { min-width: 48px; min-height: 48px; }
  .home-page .portada-hero { padding-top: 20px; }
  .portada-hero-grid { display: flex; flex-direction: column; gap: 24px; }
  .portada-kicker { font-size: .7rem; margin-bottom: 12px; }
  .portada-mensaje .home-title { font-size: clamp(2.15rem, 9.4vw, 3.5rem); line-height: 1.06; margin-bottom: 18px; }
  .portada-mensaje .home-copy { font-size: 1.06rem; margin-bottom: 20px; }
  .portada-acciones { flex-direction: column; gap: 4px; align-items: stretch; }
  .portada-acciones .btn { width: 100%; font-size: 1rem; }
  .portada-ventajas { margin-top: 12px; font-size: .75rem; gap: 8px 12px; }
  .portada-coche { border-radius: 18px; }
  .portada-funciones { margin: -8px 10px 0; gap: 8px; }
  .portada-funciones a { padding: 12px; }
  .home-page .portada-demo { grid-template-columns: minmax(0, 1fr) 80px !important; gap: 12px !important; padding: 18px; margin-top: 28px; }
  .portada-demo #demo-titulo { font-size: .78rem; margin-bottom: 12px; }
  .portada-demo #demo-enunciado { font-size: 1rem; line-height: 1.45; }
  .portada-demo .demo-fila { flex-direction: column; }
  .portada-demo #demo-foto .senal { width: 80px; height: 80px; }
  .portada-demo-respuestas { grid-column: 1 / -1; }
  .portada-demo .answer { font-size: .94rem; }
  .portada-demo .btn-pista { align-self: start; }
  .portada-cifras { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
  .home-page .section { padding: 26px 0; }
  .home-page .lista-bloques .test-card { grid-template-columns: minmax(0, 1fr); }
  .home-page .lista-bloques .card-actions { justify-content: space-between; flex-wrap: wrap; }
  .home-page .lista-bloques .test-card-top { min-width: 0; }
  .home-page .lista-bloques h3 { overflow-wrap: anywhere; }
  .portada-formatos { grid-template-columns: 1fr; gap: 14px; margin-top: 22px; }
  .portada-formato { display: grid; grid-template-columns: 52px minmax(0, 1fr); text-align: left; align-items: start; gap: 0 16px; padding: 22px; }
  .portada-formato > .portada-icono { grid-column: 1; grid-row: 1 / span 3; }
  .portada-formato h3 { margin: 0 0 8px; font-size: 1.15rem; }
  .portada-formato p { grid-column: 2; }
  .portada-formato p:last-of-type { padding-bottom: 14px; }
  .portada-formato .btn { grid-column: 1 / -1; font-size: .94rem; margin-top: 4px; }
  .portada-metodo { padding: 22px; }
  .portada-metodo ol { grid-template-columns: 1fr; gap: 24px; }
  .portada-recursos { grid-template-columns: 1fr; }
  .portada-manual, .portada-senales { padding: 24px; }
  .portada-manual-texto { max-width: 100%; }
  .portada-manual-texto .section-title { max-width: 13ch; }
  .portada-libro { position: relative; display: grid; width: 200px; height: 230px; right: auto; top: auto; margin: 24px auto 10px; transform: rotate(7deg); }
  .portada-libro .portada-hoja b { margin: 14px 0; }
  .portada-libro .portada-hoja img { height: 80px; margin-top: 16px; }
  .portada-senales-muestra { margin: 18px 0 26px; }
  .portada-senales-muestra img { height: 90px; padding: 6px; }
  .portada-panel-examen { padding: 24px; }
  .portada-panel-fila { align-items: stretch; }
  .portada-panel-fila dl { gap: 20px; }
  .portada-panel-fila dt { font-size: 2.4rem; }
  .portada-panel-fila dd { font-size: .75rem; max-width: 9ch; }
  .portada-panel-fila .btn { width: 100%; }
  .portada-faq { padding: 4px 18px; }
  .portada-faq .faq-question { font-size: 1rem; }
  .portada-cta-reserva { display: block; }
  body:has(.home-page #pantalla-inicio.activa) { padding-bottom: calc(88px + env(safe-area-inset-bottom, 0px)); }
  .portada-cta-fija:not([hidden]) { display: block; position: fixed; z-index: 45; inset: auto 0 0; padding: 14px 20px calc(14px + env(safe-area-inset-bottom, 0px)); background: var(--surface-veil); border-top: 1px solid var(--line); box-shadow: 0 -8px 24px #0001; }
  .portada-cta-fija .btn { width: 100%; min-height: 56px; }
  body:has(.home-page) { scroll-padding-bottom: 100px; }
  .runner-propuesta .runner-wrap { width: calc(100% - 32px); }
  .runner-propuesta .runner-top { display: grid; grid-template-columns: 1fr auto; min-height: 0; gap: 4px 10px; margin-bottom: 10px; padding: 8px 0; }
  .runner-propuesta .brand { font-size: 1.15rem; min-height: 48px; }
  .runner-propuesta .brand-sign { width: 32px; height: 32px; font-size: 1rem; border-width: 4px; }
  .runner-propuesta .runner-label { grid-row: 2; grid-column: 1 / -1; text-align: left; font-size: .8rem; white-space: normal; }
  .runner-propuesta #btn-salir { grid-row: 1; grid-column: 2; font-size: .85rem; }
  .runner-propuesta .runner-estado { margin-bottom: 12px; padding: 8px 12px; gap: 8px; font-size: .85rem; }
  .runner-propuesta .runner-estado .progress { display: none; }
  .runner-propuesta .crono { margin-left: auto; padding: 6px 8px; font-size: .85rem; }
  .runner-propuesta.modo-examen .runner-layout { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  #pantalla-test.runner-propuesta .question-card { padding: 16px; }
  .runner-propuesta .question-title { font-size: 1.06rem; line-height: 1.4; margin-bottom: 12px; }
  .runner-propuesta .question-body.has-photo .question-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .runner-propuesta .question-media { padding: 4px; }
  .runner-propuesta .question-body.has-photo .question-foto { height: 128px; max-height: 128px; min-height: 0; margin: 0; }
  .runner-propuesta .question-media > .senal { height: 112px; max-height: 112px; width: 100%; }
  #pantalla-test.runner-propuesta .answer { min-height: 48px; padding: 10px; margin: 0 0 8px; gap: 10px; font-size: .94rem; line-height: 1.4; }
  .runner-propuesta .answer::before { width: 18px; height: 18px; }
  .runner-propuesta .runner-foot.examen { margin-top: 16px; padding-top: 12px; gap: 10px; }
  .runner-propuesta .nav-examen { display: grid; grid-template-columns: auto 1fr; width: 100%; gap: 4px; }
  .runner-propuesta .nav-examen .btn { min-height: 48px; padding-inline: 10px; font-size: .82rem; }
  .runner-propuesta .acciones-examen { width: 100%; }
  .runner-propuesta .acciones-examen .btn { width: 100%; }
  .runner-navegador { padding: 12px 16px; }
  .runner-navegador summary { font-size: 1rem; }
  .runner-propuesta .paleta { gap: 8px; }
  .runner-propuesta .btn-finalizar { margin-top: 12px; }
  .runner-ayuda { padding: 14px; line-height: 1.5; }
  #pantalla-resultado .result-card { padding: 22px 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .home-page *, .runner-propuesta *, body:has(.home-page) .site-header * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* ========================================================================
   Movimiento TestRuta · profundidad corta, entradas finitas y respuesta clara.
   No hay estados de contenido oculto. Gradientes y sombras se pintan estáticos;
   únicamente se desplazan sus capas con transform/translate y opacity.
   ======================================================================== */
:root { --fx-ease: cubic-bezier(.16, 1, .3, 1); }
/* Sustituye las entradas antiguas ligadas al scroll: dejaban secciones
   transparentes fuera del viewport y competían con la nueva coreografía. */
body:not(.en-test) .section .section-title,
body:not(.en-test) .section .section-copy,
body:not(.en-test) .section .card,
body:not(.en-test) .stats-strip { animation: none; }
.fx-titular { display: inline-block; }
.portada-hero { isolation: isolate; }
.fx-luz {
  position: absolute; z-index: -1; pointer-events: none;
  width: min(720px, 100%); height: 560px; top: -90px; right: -90px;
  border-radius: 50%; opacity: .7;
  background: radial-gradient(ellipse, var(--red-soft), transparent 68%);
}
.home-page .portada-hero::after { pointer-events: none; z-index: -1; }
.fx-tarjeta { position: relative; isolation: isolate; }
.fx-tarjeta::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  border-radius: inherit; pointer-events: none; opacity: 0;
  background: radial-gradient(ellipse at 50% 0, var(--red-soft), transparent 68%);
}
.fx-acierto {
  position: absolute; pointer-events: none; right: 22px; top: 16px;
  width: 5px; height: 5px; border-radius: 2px; background: var(--ok-ink);
  opacity: 0;
}
#opciones .answer, #demo-opciones .answer { position: relative; }
#avance.fx-progreso {
  width: 100% !important; transform-origin: left center;
  transform: scaleX(var(--fx-progreso, 0));
  transition: transform .5s cubic-bezier(.2, .9, .25, 1.08);
}

@media (prefers-reduced-motion: no-preference) {
  /* Navegación nativa entre documentos: sin interceptar enlaces ni historial. */
  @view-transition { navigation: auto; }
  ::view-transition-old(root) { animation: fx-pagina-sale .14s ease both; }
  ::view-transition-new(root) { animation: fx-pagina-entra .22s var(--fx-ease) both; }
  .btn { transition: transform .3s var(--fx-ease); }
  .btn:active:not(:disabled), .runner-propuesta .btn:active:not(:disabled) { transform: scale(.975); }
  .explanation.show { animation: fx-explicacion .28s var(--fx-ease); }
  /* Evita animar width, box-shadow y fondos heredados de la capa anterior. */
  .site-header .nav-wrap { transition: none; }
  .portada-formato, .portada-funciones a, .home-page .test-card { transition: transform .4s var(--fx-ease); }
  #demo-opciones .answer, #opciones .answer { transition: transform .25s var(--fx-ease); }
}
@media (min-width: 761px) and (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .fx-tarjeta { transform: perspective(900px) rotateX(var(--fx-rx, 0deg)) rotateY(var(--fx-ry, 0deg)); }
  .fx-tarjeta:hover { transform: perspective(900px) rotateX(var(--fx-rx, 0deg)) rotateY(var(--fx-ry, 0deg)) translateY(-3px); }
  .fx-tarjeta::after { transform: translateX(var(--fx-brillo, 0%)); transition: transform .4s var(--fx-ease), opacity .3s ease; }
  .fx-tarjeta.fx-sobre::after { opacity: .8; }
  .portada-formato { overflow: hidden; }
  .portada-funciones a { overflow: hidden; }
  .portada-acciones .btn-primary > span { display: inline-block; transition: transform .3s var(--fx-ease); }
  .portada-acciones .btn-primary:hover > span { transform: translateX(4px); }
  #demo-opciones .answer:not(:has(input:disabled)):hover { transform: translateX(3px); }
}
@keyframes fx-pagina-sale { to { opacity: 0; } }
@keyframes fx-pagina-entra { from { opacity: 0; } to { opacity: 1; } }
@keyframes fx-explicacion { from { opacity: .6; transform: translateY(5px); } to { opacity: 1; transform: none; } }
@media (max-width: 760px), (hover: none), (pointer: coarse) {
  .fx-luz { display: none; }
  .fx-tarjeta, .fx-tarjeta:hover { transform: none; }
  .fx-tarjeta::after { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .fx-luz, .fx-tarjeta::after, .fx-acierto { display: none; }
  .fx-titular, .fx-tarjeta, .fx-tarjeta:hover, .portada-coche { transform: none !important; translate: none !important; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none !important; }
}

/* Producto flotante: dimensiones reservadas antes de descargar WebGL. */
.escena3d { position: relative; width: 100%; aspect-ratio: 6 / 5; isolation: isolate; border-radius: 30px;
  background: radial-gradient(ellipse at 48% 40%, var(--surface) 12%, var(--red-soft) 65%, transparent 79%); }
.escena3d::before { content: ''; position: absolute; inset: 13% 4% 17%; border: 1px solid var(--line);
  border-radius: 50%; transform: rotate(-18deg); pointer-events: none; z-index: -1; opacity: .6; }
.escena3d-lienzo { position: absolute; inset: 0; }
.escena3d-lienzo canvas, .escena3d-reserva { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: contain; }
.escena3d-lienzo canvas { opacity: 0; transition: opacity .4s ease; }
.escena3d-lista canvas { opacity: 1; }
.escena3d-lista .escena3d-reserva { visibility: hidden; }
.escena3d-etiqueta { position: absolute; bottom: 8px; left: 12px; color: var(--muted); font-size: .68rem; letter-spacing: .015em; pointer-events: none; }
.escena3d-etiqueta > span { display: inline-block; width: 5px; height: 5px; background: var(--red); border-radius: 50%; margin-right: 5px; vertical-align: middle; }
.escena3d-pausa { position: absolute; bottom: 0; right: 4px; min-height: 36px; padding: 7px 10px; border-radius: 99px;
  border: 1px solid var(--line); background: var(--surface); color: var(--muted); font: inherit; font-size: .65rem; cursor: pointer; }
.escena3d-pausa[hidden] { display: none; }
.escena3d-pausa:hover { color: var(--ink); border-color: var(--line-strong); }
.escena3d-pausa:focus-visible { outline: 3px solid var(--red-ink); outline-offset: 3px; }
.portada-visual:has(.escena3d) .portada-funciones { margin-top: 16px; }
@media (max-width: 760px) {
  .portada-visual:has(.escena3d) { width: 100%; }
  .escena3d { margin-top: -12px; }
  .escena3d-etiqueta { bottom: 14px; left: 0; font-size: .6rem; }
  .escena3d-pausa { min-height: 44px; right: 0; padding-inline: 8px; font-size: .6rem; }
  .portada-visual:has(.escena3d) .portada-funciones { margin-top: 12px; }
}

/* Capa exclusiva del directorio. Los colores siguen el tema de TestRuta. */
.ae-directorio [hidden] { display: none !important; }
/* Reserva idéntica antes de que JS active los controles: no desplaza el mapa. */
.ae-directorio .ae-filtros[hidden] { display: grid !important; visibility: hidden; }
.ae-directorio .ae-privacidad[hidden] { display: block !important; visibility: hidden; }
.ae-directorio .cabecera-seccion { margin-bottom: 32px; }
.ae-explorador { margin: 0 0 28px; padding: 26px; background: var(--surface); border: 1px solid var(--line); border-radius: 26px; box-shadow: var(--shadow); }
.ae-encabezado { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-bottom: 22px; }
.ae-encabezado h2 { font-size: clamp(1.3rem, 2.6vw, 1.85rem); letter-spacing: -.04em; margin: 6px 0 0; line-height: 1.2; }
.ae-encabezado > a { white-space: nowrap; font-size: .85rem; color: var(--muted); }
.ae-filtros { display: grid; grid-template-columns: minmax(180px,1fr) 175px auto auto; gap: 12px; align-items: end; min-height: 78px; }
.ae-filtros label { display: block; font-size: .8rem; font-weight: 650; margin-bottom: 7px; }
.ae-filtros input, .ae-filtros select { width: 100%; height: 48px; border: 1px solid var(--line-strong); border-radius: 12px; padding: 0 13px; background: var(--canvas); color: var(--ink); font: inherit; font-size: .9rem; }
.ae-filtros input::placeholder { color: var(--muted); opacity: 1; }
.ae-filtros .btn { min-height: 48px; font-size: .85rem; padding: 10px 17px; }
.ae-limpiar, .ae-mapa-pie button { color: var(--red-ink); background: transparent; border: 0; font: inherit; font-size: .82rem; text-decoration: underline; cursor: pointer; min-height: 44px; padding: 6px; }
.ae-directorio :is(input,select,button,a):focus-visible { outline: 3px solid var(--red-ink); outline-offset: 4px; }
.ae-privacidad, .ae-geo-estado, .ae-nota { font-size: .78rem; line-height: 1.5; color: var(--muted); }
.ae-privacidad { margin: 12px 0 0; }
.ae-geo-estado { min-height: 24px; margin: 4px 0 8px; }
.ae-mapa-marco { position: relative; isolation: isolate; border: 1px solid var(--line); border-radius: 18px; overflow: hidden; background: var(--canvas-2); }
.ae-directorio .mapa { height: 420px; width: 100%; border: 0; border-radius: 0; font-family: inherit; }
.ae-mapa-reserva { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 28px; text-align: center; background: radial-gradient(ellipse at 25% 25%,var(--red-soft),transparent 65%), var(--canvas); }
.ae-mapa-reserva strong { font-size: 1.2rem; letter-spacing: -.02em; }
.ae-mapa-reserva p { max-width: 380px; margin: 0; font-size: .9rem; color: var(--muted); }
.ae-mapa-reserva > a { font-size: .85rem; }
.ae-mapa-reserva .btn { width: 220px; max-width: 100%; }
.ae-directorio .ae-mapa-reserva .btn[hidden], .ae-directorio .ae-mapa-pie button[hidden] { display: block !important; visibility: hidden; }
.ae-reserva-icono { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; background: var(--red-fill); color: white; font-size: 1.8rem; box-shadow: 0 0 0 12px var(--red-soft); margin-bottom: 8px; }
.ae-mapa-pie { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 46px; }
.ae-mapa-pie p { font-size: .79rem; margin: 10px 0; color: var(--muted); }
.ae-leyenda { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: #ee1f25; margin-right: 4px; }
.ae-atribucion { font-size: .69rem; color: var(--muted); margin: 0; line-height: 1.5; }
.ae-atribucion a { color: inherit; text-decoration: underline; }
.ae-mapa-estado { margin: 0; color: var(--muted); font-size: .82rem; }
.ae-mapa-estado:not(:empty) { margin-bottom: 10px; }
.ae-warning { font-size: .79rem; line-height: 1.5; color: var(--amber-ink); background: var(--amber-soft); border-radius: 10px; padding: 10px 12px; }
.ae-directorio .maplibregl-popup-content { background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: 16px; padding: 22px 24px 18px 18px; box-shadow: var(--shadow-alta); }
.ae-directorio .maplibregl-popup-tip { border-top-color: var(--surface); border-bottom-color: var(--surface); }
.ae-directorio .maplibregl-popup-close-button { font-size: 23px; color: var(--ink); width: 32px; height: 32px; border-radius: 10px; }
.ae-popup h3 { font: 700 1rem/1.3 Inter,sans-serif; margin: 0 0 8px; overflow-wrap: anywhere; }
.ae-popup p { font: 400 .82rem/1.5 Inter,sans-serif; margin: 8px 0; color: var(--muted); }
.ae-popup-links { display: grid; gap: 9px; margin-top: 12px; font: 600 .85rem/1.4 Inter,sans-serif; }
.ae-popup-links a { color: var(--red-ink); overflow-wrap: anywhere; }
.ae-coincidentes { max-height: 220px; overflow: auto; display: grid; gap: 8px; }
.ae-coincidentes button { background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: 6px; padding: 10px; cursor: pointer; }
.ae-directorio .maplibregl-ctrl-group { border-radius: 12px; overflow: hidden; }
.ae-directorio .maplibregl-ctrl-group button { width: 40px; height: 40px; }
.ae-resultados { font-size: .87rem; color: var(--muted); margin: 12px 0 18px; min-height: 24px; }
.ae-directorio .lista-autoescuelas { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; content-visibility: auto; contain-intrinsic-size: auto 900px; }
.ae-directorio .autoescuela { border-radius: 18px; padding: 20px; min-width: 0; overflow-wrap: anywhere; box-shadow: none; }
.ae-directorio .autoescuela:target { border-color: var(--red-ink); box-shadow: 0 0 0 2px var(--red-soft); }
.ae-directorio .autoescuela .direccion { font-size: .86rem; line-height: 1.5; }
.ae-directorio .autoescuela .contacto { font-size: .84rem; }
.ae-distancia { font-size: .78rem; font-weight: 600; color: var(--red-ink); margin: 12px 0 0; }
.ae-mas { display: block; margin: 22px auto 40px; }
.ae-directorio .prosa-corta.ae-guia { max-width: none; margin: 56px 0; padding: 32px; border: 1px solid var(--line); border-radius: 24px; background: var(--surface); }
.ae-guia h2 { letter-spacing: -.035em; margin-top: 8px; }
.ae-consejos { display: grid; grid-template-columns: 1.3fr 1fr; gap: 30px; align-items: start; margin: 26px 0; }
.ae-consejos h3 { margin-top: 0; }
.ae-guia li { margin-bottom: 14px; }
.ae-tasa { background: var(--canvas); border: 1px solid var(--line); border-radius: 18px; padding: 22px; }
.ae-tasa p { font-size: .9rem; }
.ae-tasa .ae-precio { font-size: 2.8rem; font-weight: 750; line-height: 1.1; letter-spacing: -.06em; margin: 10px 0 20px; color: var(--ink); }
.ae-tasa .ae-nota { font-size: .75rem; margin-bottom: 0; }
.ae-tasa > a { font-size: .85rem; }
.ae-pasos { padding-left: 22px; }
.ae-manual { display: inline-block; margin: 12px; font-size: .9rem; }
@media(max-width:900px) {
  .ae-filtros { grid-template-columns: minmax(0,1fr) 165px; }
  .ae-filtros .btn { justify-self: start; }
  .ae-limpiar { justify-self: end; }
  .ae-directorio .lista-autoescuelas { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media(max-width:600px) {
  .ae-explorador { padding: 16px; border-radius: 22px; }
  .ae-encabezado { gap: 12px; align-items: start; }
  .ae-encabezado .eyebrow { font-size: .62rem; }
  .ae-encabezado > a { font-size: .72rem; padding-top: 3px; }
  .ae-filtros { grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 12px 8px; }
  .ae-buscar { grid-column: 1 / -1; }
  .ae-filtros input, .ae-filtros select { font-size: 16px; }
  .ae-filtros .btn { width: 100%; padding: 8px; font-size: .78rem; }
  .ae-limpiar { grid-column: 1 / -1; justify-self: start; min-height: 32px; }
  .ae-privacidad { font-size: .73rem; }
  .ae-directorio .mapa { height: 340px; }
  .ae-mapa-reserva { padding: 20px; gap: 12px; }
  .ae-mapa-reserva strong { font-size: 1rem; }
  .ae-mapa-pie { align-items: start; }
  .ae-mapa-pie p { font-size: .72rem; }
  .ae-mapa-pie button { font-size: .72rem; max-width: 110px; flex-shrink: 0; }
  .ae-directorio .lista-autoescuelas { grid-template-columns: minmax(0,1fr); }
  .ae-directorio .prosa-corta.ae-guia { padding: 22px; }
  .ae-consejos { grid-template-columns: minmax(0,1fr); gap: 18px; }
  .ae-guia .btn { white-space: normal; text-align: center; }
}

/* Medallas TestRuta. Capa aislada, con los colores semánticos de ambos temas. */
.medallas-vitrina { margin: 32px 0 44px; padding: clamp(18px, 3vw, 36px); border: 1px solid var(--line); border-radius: 28px; background: var(--surface); scroll-margin-top: 100px; }
.medallas-cabecera { display: flex; justify-content: space-between; align-items: center; gap: 20px; }
.medallas-antetitulo { margin: 0 0 8px; color: var(--red-ink); font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.medallas-vitrina h2 { margin: 0; font-size: clamp(28px, 4vw, 40px); letter-spacing: -.045em; }
#medallas-resumen { margin: 8px 0 0; color: var(--ink); font-weight: 650; }
.medallas-intro { max-width: 70ch; margin: 20px 0 12px; color: var(--muted); line-height: 1.65; }
.medallas-ayuda { color: var(--muted); font-size: 13px; margin-bottom: 24px; max-width: 82ch; }
.medallas-ayuda summary { cursor: pointer; padding: 8px 0; color: var(--ink); font-weight: 650; }
.medallas-ayuda p { margin: 10px 0; line-height: 1.65; }
.medallas-boton, .medalla-compartir { border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--ink); font: inherit; font-size: 12px; font-weight: 650; padding: 12px 14px; cursor: pointer; min-height: 44px; }
.medallas-boton:hover, .medalla-compartir:hover { background: var(--canvas); border-color: var(--muted); }
.medallas-vitrina :focus-visible, .medallas-recompensa a:focus-visible { outline: 3px solid var(--red-ink); outline-offset: 4px; }
.medallas-lista { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; list-style: none; padding: 0; margin: 0; }
.medalla { --metal: #ca966f; --borde-metal: #865734; --luz-metal: #ffe4c4; --cinta: #ee1f25; --tinta-medalla: #613b21; min-width: 0; position: relative; display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 20px; padding: 20px; background: var(--canvas); }
.medalla-plata { --metal: #c5d1de; --borde-metal: #718297; --luz-metal: #f6fbff; --cinta: #ee1f25; --tinta-medalla: #34485f; }
.medalla-oro { --metal: #ecc366; --borde-metal: #a67922; --luz-metal: #fff4c5; --cinta: #ee1f25; --tinta-medalla: #624810; }
.medalla-bronce { --metal: #ca966f; --borde-metal: #865734; --luz-metal: #ffe4c4; --cinta: #ee1f25; --tinta-medalla: #613b21; }
.medalla.bloqueada { --metal: #d8dce1; --borde-metal: #949ca7; --luz-metal: #f8fafc; --cinta: #a8afb8; --tinta-medalla: #626c78; }
.medalla-arte { display: grid; place-items: center; padding: 2px 0 12px; }
.medalla-svg { display: block; width: 112px; height: 120px; overflow: visible; filter: drop-shadow(0 6px 5px rgb(0 0 0 / .1)); }
.medalla-metal { fill: var(--metal); stroke: var(--borde-metal); stroke-width: 2; }
.medalla-centro { fill: var(--luz-metal); stroke: var(--borde-metal); stroke-width: 1; }
.medalla-cinta { fill: var(--cinta); }
.medalla-reflejo { fill: none; stroke: white; stroke-opacity: .7; stroke-width: 3; stroke-linecap: round; }
.medalla-trazo { fill: none; stroke: var(--tinta-medalla); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.medalla-treinta { fill: var(--tinta-medalla); stroke: none; font: 800 24px Inter, sans-serif; text-anchor: middle; }
.medalla-placa { fill: var(--tinta-medalla); stroke: var(--luz-metal); stroke-width: 1; }
.medalla-marca { fill: white; font: 800 12px Inter, sans-serif; text-anchor: middle; }
.medalla-texto { display: flex; flex-direction: column; flex: 1; align-items: flex-start; }
.medalla-nivel { color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: .1em; font-weight: 800; margin: 0 0 8px; }
.conseguida .medalla-nivel { color: var(--red-ink); }
.medalla h3 { margin: 0 0 10px; color: var(--ink); font-size: 16px; line-height: 1.3; letter-spacing: -.025em; }
.medalla-requisito { font-size: 12px; line-height: 1.65; margin: 0 0 16px; color: var(--muted); flex: 1; }
.medalla progress { display: block; appearance: none; border: 0; border-radius: 4px; background: var(--line); width: 100%; height: 5px; overflow: hidden; accent-color: var(--red); }
.medalla progress::-webkit-progress-bar { background: var(--line); }
.medalla progress::-webkit-progress-value { background: var(--red); border-radius: 4px; }
.medalla progress::-moz-progress-bar { background: var(--red); border-radius: 4px; }
.medalla-estado { color: var(--muted); font-size: 11px; line-height: 1.5; margin: 8px 0 0; }
.medalla-compartir { margin-top: 12px; width: 100%; text-align: left; display: flex; justify-content: space-between; }
.medallas-vitrina [hidden], .medallas-contador[hidden] { display: none; }
.medallas-alerta, .medallas-aviso:not(:empty) { border-left: 3px solid var(--red); padding: 12px; background: var(--canvas); font-size: 14px; }
.medallas-aviso:empty { display: none; }
.medallas-copia { margin: 12px 0; }
.medallas-copia label { display: block; font-size: 13px; margin-bottom: 6px; }
.medallas-copia textarea { width: 100%; padding: 12px; color: var(--ink); background: var(--canvas); border: 1px solid var(--line); border-radius: 12px; font: inherit; resize: vertical; }
.profile-link .medallas-contador { position: absolute; left: -6px; bottom: -5px; display: grid; place-items: center; min-width: 21px; height: 21px; padding: 0 4px; border: 2px solid var(--surface); border-radius: 12px; background: #ee1f25; color: white; font-size: 10px; font-weight: 800; }
.medallas-recompensa { position: relative; display: flex; align-items: center; gap: 22px; padding: 20px 24px; margin: 24px 0; border: 1px solid var(--line); border-radius: 20px; background: var(--canvas); text-align: left; }
.medallas-recompensa h3 { margin: 0 0 8px; font-size: 21px; color: var(--ink); }
.medallas-recompensa p[role="status"] { margin: 0 0 12px; font-size: 14px; color: var(--muted); line-height: 1.6; }
.medallas-recompensa a { color: var(--red-ink); font-size: 13px; font-weight: 750; text-decoration: underline; text-underline-offset: 4px; display: inline-flex; align-items: center; min-height: 44px; }
.medalla-destello { position: relative; flex: 0 0 112px; isolation: isolate; }
.medalla-destello::before { content: ''; position: absolute; inset: -12px; z-index: -1; background: radial-gradient(ellipse, var(--metal), transparent 65%); opacity: 0; }
.medalla-destello i { position: absolute; left: 50%; top: 40%; width: 4px; height: 8px; background: var(--red); opacity: 0; pointer-events: none; }
.medalla-destello i:nth-of-type(2) { left: 20%; top: 10%; background: var(--metal); }
.medalla-destello i:nth-of-type(3) { left: 80%; top: 15%; }
.medalla-destello i:nth-of-type(4) { left: 95%; top: 60%; background: var(--metal); }
.medalla-destello i:nth-of-type(5) { left: 10%; top: 65%; }
.medalla-destello i:nth-of-type(6) { left: 70%; top: 80%; background: var(--metal); }
@media (prefers-reduced-motion: no-preference) {
  .medalla-destello .medalla-svg { animation: medalla-entrada 650ms cubic-bezier(.16, 1, .3, 1) both; }
  .medalla-destello::before { animation: medalla-brillo 1100ms ease-out both; }
  .medalla-destello i { animation: medalla-confeti 900ms 150ms ease-out both; }
}
@keyframes medalla-entrada { from { opacity: .1; transform: translateY(14px) scale(.8) rotate(-8deg); } to { opacity: 1; transform: none; } }
@keyframes medalla-brillo { 20% { opacity: .7; transform: scale(.8); } 100% { opacity: 0; transform: scale(1.3); } }
@keyframes medalla-confeti { 10% { opacity: .8; } 100% { opacity: 0; transform: translateY(-30px) rotate(140deg); } }
@media (max-width: 1050px) { .medallas-lista { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .medallas-lista { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .medallas-vitrina { padding: 18px 14px; border-radius: 20px; }
  .medallas-cabecera { align-items: flex-start; flex-direction: column; gap: 12px; }
  .medalla { padding: 14px 12px; border-radius: 15px; }
  .medalla-svg { width: 90px; height: 97px; }
  .medalla h3 { font-size: 14px; }
  .medallas-recompensa { padding: 16px; gap: 12px; }
  .medalla-destello { flex-basis: 90px; }
  .medallas-recompensa h3 { font-size: 18px; }
}
@media (max-width: 360px) { .medallas-lista { grid-template-columns: 1fr; } }