: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: #eef5fc;

  /* 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 */
  --radius: 16px;
  --shadow: 0 10px 30px rgba(15, 23, 42, .07);
  --container: 1400px;
}

* { 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: #fff; 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: #905f00; background: var(--amber-soft); border: 1px solid #f5d891; 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); }
.green { color: var(--green); }
.kicker { color: var(--red); 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: rgba(255,255,255,.94); 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: #fff; 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: #303543; 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); }
.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: #fff; }
.profile-link.active { color: var(--red-dark); background: var(--red-soft); border-color: #ffd1d2; }
.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; }
.mobile-toggle { display: none; width: 44px; height: 44px; border: 1px solid var(--line); background: #fff; 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); box-shadow: 0 9px 20px rgba(238,31,37,.2); }
.btn-primary:hover { background: var(--red-dark); }
.btn-secondary { background: #fff; border-color: #d5d8df; }
.btn-secondary:hover { background: #f4f5f7; }
.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); 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: #976000; background: var(--amber-soft); border: 1px solid #f0d28d; 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: #087527; background: var(--green-soft); }
.status.review { color: #a66300; background: var(--amber-soft); }
.progress { height: 8px; overflow: hidden; background: #e7e9ed; 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%), #eaebed 0); }
.ring::before { content: ""; position: absolute; width: 94px; aspect-ratio: 1; background: #fff; 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: #fff; 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: #fff; border: 1px solid #d8dce2; 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 #c4c8d0; border-radius: 50%; }
.answer:hover:not(:disabled) { border-color: #f08b8f; transform: translateY(-1px); }
.answer:disabled { cursor: default; }
.answer.selected { border-color: var(--red); 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); box-shadow: inset 0 0 0 2.5px #fff; }
.answer.correct { border-color: #83ce94; background: #f6fcf7; }
.answer.correct::before { content: "✓"; display: grid; place-items: center; color: #fff; background: var(--green); border-color: var(--green); font-size: .72rem; font-weight: 900; }
.answer.wrong { border-color: #f0a5a7; background: #fff6f6; }
.answer.wrong::before { content: "✕"; display: grid; place-items: center; color: #fff; background: var(--red); border-color: var(--red); font-size: .72rem; font-weight: 900; }
.explanation { display: none; margin-top: 12px; padding: 15px; color: #176b2a; background: var(--green-soft); border-radius: 10px; line-height: 1.55; }
.explanation.show { display: block; }
.explanation.ko { color: #8d1f22; 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: #fff; border: 1px solid var(--line); border-radius: 10px; font-variant-numeric: tabular-nums; font-weight: 850; }
.crono.apurando { color: var(--red); border-color: #f5b9bb; 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: #fff; border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 5px; font: inherit; font-size: .9em; }
@media (max-width: 700px) { .keys { display: none; } }

/* --------------------------------------------------------------- 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%), #eaebed 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%), #eaebed 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: #fff; 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); }
.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: #f2d487; }
.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: #fff; border: 1px solid #d7dbe2; border-radius: 12px; outline: none; }
.search input:focus { border-color: var(--red); 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); 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: #fff; border: 1px solid var(--line); border-radius: 999px; font-weight: 750; cursor: pointer; }
.category.active { color: #fff; background: var(--red); border-color: var(--red); }
.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: #e7e9ed; }
@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 #f2d487; 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); }

/* --------------------------------------------------------------- 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: #fff;
  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); }

.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); }

.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); }
.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, #f2f4f7); 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: #eceef1; 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: #eceef1; 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: #fff; 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: #f1f2f4; 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: #8a5b00; }
.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: #fff; border: 1px solid #f08b8f; 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: #f0a5a7; }
.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: #f1f2f4; 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: #f1f2f4; 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: #fff; 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); color: var(--red); }
.celda-test b { font-size: 1.02rem; font-weight: 850; }
.celda-test small { font-size: .7rem; font-weight: 700; }
.celda-test.apto { color: #087527; background: var(--green-soft); border-color: #a9dfb6; }
.celda-test.suspenso { color: #a66300; background: var(--amber-soft); border-color: #f0d28d; }
.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: #fff; border: 1px solid #d5d8df; border-radius: 10px; }
.ir-a-test input:focus { outline: none; border-color: var(--red); 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); 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: #fff; 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: #fff; 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: #f0d28d; background: var(--amber-soft); }
.btn-pista[aria-expanded="true"] { color: #8a5b00; border-color: #f0d28d; background: var(--amber-soft); }
.btn-pista .ico { width: 19px; height: 19px; }
.pista { margin: -4px 0 14px; padding: 11px 14px; color: #8a5b00; background: var(--amber-soft);
  border: 1px solid #f5d891; 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 #f5d891; border-radius: 12px; }
.consejo p { margin: 0; color: #8a5b00; 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: #fff; 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: #fff; 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: 18px; }
  .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.2rem; }
  .senal-pregunta { height: 78px; max-width: 46%; }
  svg.senal-pregunta { width: 78px; }
  .question-foto { max-height: 190px; }
  .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: #fff; }
}

/* ================================================================= 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); }
.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: #fff; }
.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); }
.lista-temas .aqui .num { color: var(--red); }
.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: #fff; 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: #a8dcb8; 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: #fff; 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); }
.sumario li.activo > a { color: var(--red); 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: #bcd4ef; }
.aviso.examen .aviso-tit { color: var(--blue); }
.aviso.trampa { background: var(--red-soft); border-color: #f3bfc0; }
.aviso.trampa .aviso-tit { color: var(--red); }
.aviso.clave { background: var(--amber-soft); border-color: #f0d9a6; }
.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: #fff; 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: #fff; 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); 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); 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); 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: #fff; 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); }
.manual-muestra span { flex: 0 0 30px; height: 30px; display: grid; place-items: center; border-radius: 8px;
  background: var(--red-soft); color: var(--red); 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); }
@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: #fff; 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); border-color: #f3bfc0; 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: #e7e9ed; 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: #fff; 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: #fff; border: 1px solid var(--line); border-radius: 10px; margin-bottom: 8px; }
.jornadas .dia { color: var(--red); 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); }
.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: #fff; 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); 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); }

/* 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); }
.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); 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); 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: #fff; 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: #905f00; background: var(--amber-soft); border: 1px solid #f0d28d; 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 #bcd4ef; 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 #f0d9a6; border-left: 4px solid var(--amber); border-radius: 12px;
  scroll-margin-top: 96px; }
.reforma .aviso-tit { color: var(--amber); }
.reforma-intro { margin: 0 0 12px; color: #5d4300; line-height: 1.65; }
.reforma ul { margin: 0; padding-left: 22px; color: #5d4300; line-height: 1.72; }
.reforma li { margin-bottom: 9px; }
.reforma-fuente { margin: 14px 0 0; color: #7a6120; font-size: .84rem; }
.reforma-fuente a { color: #7a6120; 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); 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); 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: #5d4300;
  background: #fff; border: 1px solid #f0d9a6; border-radius: 999px; font-size: .86rem; font-weight: 700; }
.temas-reforma a:hover { border-color: var(--amber); color: #3f2e00; }
.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: #fff; 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: #fff; }

/* 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: #e7e9ed; }
.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: #f0d9a6; }
.chapa-nueva { position: absolute; top: 12px; right: 12px; padding: 4px 10px; color: #905f00;
  background: var(--amber-soft); border: 1px solid #f0d28d; 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: #f7f7f5; }
.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); }
.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: #dfe2e6; 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: #fff;
  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); 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: #fff; 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: #fbfbfa; 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: #efd89f !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 #f0d9a6; }
.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); color: var(--red); }
.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: #fff; 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); border-color: var(--red); }
.paso-facil a:hover { border-color: var(--red); 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: #eef5fc; border: 1px solid #c2d8ef;
  border-radius: 14px; font-size: 1.08rem; line-height: 1.75; }
.otra-version a { color: var(--red); 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 #bcd4ef; border-radius: 999px;
  color: var(--blue); font-size: .89rem; font-weight: 700; }
.enlace-facil:hover { background: #dfeaf8; }
.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); 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); font-size: .78rem; font-weight: 900;
  letter-spacing: .06em; border: 2px solid #f7c9ca; }
.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: #fff;
  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); 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: #176b2a; color: #fff; }
.marca-acierto { position: absolute; top: 50%; right: 14px; transform: translateY(-50%);
  color: #176b2a; font-weight: 900; }
.porque { margin: 14px 0 0; padding: 14px 16px; border-radius: 10px; background: var(--green-soft);
  color: #176b2a; 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: #dfe3e8; }
.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: #f7f7f5; }

.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: #e2e4e8;
  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: #dfe2e7;
}

.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: #f0f1f2; }
.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: #fff;
  border: 1px solid #dfe2e7;
  border-radius: 50%;
  font-size: .72rem;
}

.lista-temas .aqui .num {
  color: #fff;
  background: var(--red);
  border-color: var(--red);
  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: #fff;
  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);
  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, #fff, rgba(255,255,255,0));
}

.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: #fff;
  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);
  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: #a8dcb8;
  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: #eef5ff;
  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); 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; }