/* ── fonts.css ── */
/* Fuentes autoalojadas (tools/fuentes.py): Open Sans y Montserrat, SIL Open Font License; subconjuntos latin y
   latin-ext, pesos variables. Nada se pide a Google. */
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 400 800; font-display: swap; src: url(../fonts/montserrat-normal-400-800-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 400 800; font-display: swap; src: url(../fonts/montserrat-normal-400-800-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: 'Open Sans'; font-style: italic; font-weight: 400; font-stretch: 100%; font-display: swap; src: url(../fonts/open-sans-italic-400-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Open Sans'; font-style: italic; font-weight: 400; font-stretch: 100%; font-display: swap; src: url(../fonts/open-sans-italic-400-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: 'Open Sans'; font-style: normal; font-weight: 400 800; font-stretch: 100%; font-display: swap; src: url(../fonts/open-sans-normal-400-800-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 400 800; font-stretch: 100%; font-display: swap; src: url(../fonts/open-sans-normal-400-800-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; }

/* ── marca.css ── */
/* Tokens de marca para la landing: los del chat del alumno (referencia de marca desde el 14-10-2026) y el logotipo del
   21-10. Las versiones usan SOLO estas variables (más las --lx-* del marco). Nada de colores literales en versions/. */
:root {
  /* Marca */
  --b-maria: #44B5B9;        /* «MARIA» del logotipo */
  --b-chat: #1E7272;         /* «Chat» del logotipo; también el relleno de los botones principales */
  --b-teal: #24ABA7;         /* el teal del chat (acento, iconos grandes) */
  --b-ink: #1A6F6F;          /* teal como texto (5,95:1 sobre blanco) */
  --b-tint: rgba(68, 181, 185, .12);
  --b-tint-2: rgba(68, 181, 185, .2);
  --b-dark: #413F41;         /* la barra del chat (R2 gris): bloques oscuros */
  --b-dark-2: #2E2C2E;
  /* Neutros fríos (los --mc-n-* del chat) */
  --b-n-0: #FFFFFF; --b-n-50: #F7FAFA; --b-n-100: #F1F6F5; --b-n-200: #DCE6E5; --b-n-300: #B2C1C0;
  --b-n-400: #7F9493; --b-n-600: #556B6B; --b-n-700: #33494A; --b-n-900: #132423;
  /* Semánticos del producto (estados de la nube y del examen) */
  --b-ok: #0F5132; --b-ok-bg: #EDFAF7; --b-warn: #A35D00; --b-warn-bg: #FDF2DF; --b-ko: #B42318;
  --b-st-done: #0F5132; --b-st-prog: #1B3BAA; --b-st-review: #B05A00; --b-st-none: #7F9493;
  /* Tipografía: Open Sans (cuerpo, la del chat) y Montserrat 800 (titulares; la del logotipo) */
  --b-font: "Open Sans", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --b-display: "Montserrat", "Open Sans", "Segoe UI", sans-serif;
  /* Radios y sombras del chat */
  --b-r-card: 12px; --b-r-ctl: 8px;
  --b-shadow: 0 1px 2px rgba(28, 34, 48, .06), 0 10px 28px -12px rgba(28, 34, 48, .32);
  --b-shadow-lg: 0 1px 2px rgba(28, 34, 48, .06), 0 8px 20px -6px rgba(28, 34, 48, .16), 0 28px 60px -16px rgba(28, 34, 48, .34);
}

/* El logotipo, como en la cabecera del chat (Montserrat 800, dos teales) */
.b-logo { font-family: var(--b-display); font-weight: 800; letter-spacing: -.01em; line-height: 1; white-space: nowrap; }
.b-logo .a { color: var(--b-maria); } .b-logo .b { color: var(--b-chat); }
/* Un icono Lucide en línea (lo genera h.ic) */
.b-ic { display: inline-block; vertical-align: middle; flex-shrink: 0; }

/* ── site.css ── */
/* rd-landing · el sitio (no el banco de mockups): la página ocupa todo el ancho y el contenido se centra a 1280 px;
   por debajo de 700 px se usa la disposición de móvil de los mockups (.is-phone). Los estilos de la landing son los del
   kit (versions/base-v8.css + styles/teal.css) sin cambios; aquí solo lo que el banco ponía por su cuenta (lx.css) y
   los ajustes de anchos intermedios. */
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--b-n-0); }
.lx-page { width: 100%; min-height: 100vh; background: var(--b-n-0); font-family: var(--b-font); color: var(--b-n-900); font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
.lx-page, .lx-page * { box-sizing: border-box; }
.lx-page img { max-width: 100%; height: auto; display: block; }
.lx-page button { font-family: inherit; cursor: pointer; }
.lx-page :focus-visible { outline: 2px solid var(--b-ink); outline-offset: 2px; }
.lx-page [hidden] { display: none !important; }
/* El contenido, centrado a 1280 px; las bandas de color (cabecera, hero, escenario, CTA) llenan todo el ancho */
.v8-wrap { max-width: 1280px; margin-left: auto; margin-right: auto; }
/* Anchos intermedios (tableta, ventanas estrechas): una columna en beneficios y citas, título algo menor */
@media (max-width: 1000px) {
  .lx-page.is-desk .v8-ben-grid, .lx-page.is-desk .v8-qgrid { grid-template-columns: 1fr; }
  .lx-page.is-desk .v8-title { font-size: 32px; }
  .lx-page.is-desk .v8-wrap { padding-left: 24px; padding-right: 24px; }
}
/* Avisos cortos (el registro y el acceso no están en el prototipo) */
.toast { position: fixed; left: 50%; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); z-index: 50; transform: translate(-50%, 20px); opacity: 0; max-width: calc(100% - 32px); padding: 10px 16px; border-radius: 10px; background: var(--b-n-900); color: #fff; font: 500 14px/1.4 var(--b-font); box-shadow: 0 10px 30px rgba(0, 0, 0, .25); transition: opacity .2s, transform .2s; pointer-events: none; }
.toast.on { opacity: 1; transform: translate(-50%, 0); }
/* La marca de prototipo, discreta y descartable */
.proto { position: fixed; left: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); z-index: 40; display: inline-flex; align-items: center; gap: 8px; padding: 6px 8px 6px 12px; border: 1px solid var(--b-n-300); border-radius: 999px; background: rgba(255, 255, 255, .92); color: var(--b-n-700); font: 600 12px/1 var(--b-font); letter-spacing: .04em; text-transform: uppercase; backdrop-filter: blur(6px); }
.proto button { display: grid; place-items: center; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 50%; background: var(--b-n-100); color: var(--b-n-700); font: 700 13px/1 var(--b-font); }
.proto button:hover { background: var(--b-n-200); }
@media (prefers-reduced-motion: reduce) { .toast { transition: none; } }
/* Texto solo para lectores de pantalla (el h2 del escenario: la sección tenía nombre pero ningún encabezado) */
.v8-vh { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ── a11y.css ── */
/* Accesibilidad (10-11-2026). Lo que el WordPress actual ofrece con «One Click Accessibility» y declara en su
   Declaración de accesibilidad, hecho en casa: un botón flotante abajo a la derecha que abre un panel con tamaño del
   texto, escala de grises, alto contraste, contraste negativo, fondo claro, subrayar enlaces, fuente legible y reducir
   movimiento, más «Restablecer»; el enlace «Ir al contenido» al principio de cada página; las preferencias se guardan
   en localStorage («rm-a11y», el mismo nombre que declara la política de cookies). El panel vive fuera de #root (hijo
   de body), así los modos que filtran o recolorean el contenido no lo tocan y sigue legible en todos. Tokens --b-*. */

/* ── Ir al contenido: oculto hasta que recibe el foco ─────────────────────────────────────────────────────────────── */
.v8-skip { position: absolute; left: 16px; top: -100px; z-index: 2000; padding: 10px 16px; border-radius: 10px; background: var(--b-n-900); color: var(--b-n-0); font: 600 15px/1 var(--b-font); text-decoration: none; }
.v8-skip:focus { top: 10px; outline: 3px solid var(--b-maria); outline-offset: 2px; }

/* ── El botón y el panel ─────────────────────────────────────────────────────────────────────────────────────────── */
.a11y { position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 60; font-family: var(--b-font); color: var(--b-n-900); }
.a11y, .a11y * { box-sizing: border-box; }
.a11y-btn { display: grid; place-items: center; width: 52px; height: 52px; padding: 0; border: 0; border-radius: 50%; background: var(--b-chat); color: var(--b-n-0); box-shadow: 0 6px 20px rgba(19, 36, 35, .28); cursor: pointer; transition: background .15s, transform .15s; }
.a11y-btn:hover { background: var(--b-ink); }
.a11y-btn[aria-expanded="true"] { background: var(--b-ink); }
.a11y :focus-visible { outline: 3px solid var(--b-ink); outline-offset: 3px; }
.a11y-panel { position: absolute; right: 0; bottom: 64px; width: 300px; max-width: calc(100vw - 32px); max-height: calc(100vh - 110px); overflow: auto; padding: 14px 14px 12px; border: 1px solid var(--b-n-200); border-radius: 16px; background: var(--b-n-0); box-shadow: 0 18px 50px rgba(19, 36, 35, .3); }
.a11y-panel[hidden] { display: none; }
.a11y-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 10px; }
.a11y-head h2 { margin: 0; font: 800 17px/1.2 var(--b-display); letter-spacing: -.01em; color: var(--b-n-900); }
.a11y-x { display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%; background: var(--b-n-100); color: var(--b-n-900); cursor: pointer; }
.a11y-x:hover { background: var(--b-n-200); }
/* Tamaño del texto: − · 100 % · + */
.a11y-zoom { display: grid; grid-template-columns: 1fr auto auto auto; align-items: center; gap: 6px; margin: 0 0 8px; padding: 6px 6px 6px 10px; border: 1px solid var(--b-n-200); border-radius: 12px; font: 600 14px/1.2 var(--b-font); }
.a11y-zoom output { min-width: 50px; text-align: center; font-variant-numeric: tabular-nums; color: var(--b-n-700); }
.a11y-zb { display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 1px solid var(--b-n-300); border-radius: 10px; background: var(--b-n-0); color: var(--b-ink); cursor: pointer; }
.a11y-zb:hover { background: var(--b-tint); border-color: var(--b-ink); }
.a11y-zb[aria-disabled="true"] { opacity: .4; cursor: default; }
/* Los conmutadores: una lista de botones con aria-pressed; el pulsado se pinta en teal */
.a11y-list { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.a11y-t { display: grid; grid-template-columns: 22px 1fr auto; align-items: center; gap: 10px; width: 100%; min-height: 42px; padding: 8px 10px; border: 1px solid var(--b-n-200); border-radius: 12px; background: var(--b-n-0); color: var(--b-n-900); font: 600 14.5px/1.2 var(--b-font); text-align: left; cursor: pointer; transition: background .15s, border-color .15s; }
.a11y-t:hover { border-color: var(--b-ink); background: var(--b-tint); }
.a11y-t .b-ic { color: var(--b-ink); }
.a11y-t i { display: block; width: 32px; height: 18px; border-radius: 999px; background: var(--b-n-300); position: relative; transition: background .15s; }
.a11y-t i::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: var(--b-n-0); transition: left .15s; }
.a11y-t[aria-pressed="true"] { border-color: var(--b-chat); background: var(--b-tint); }
.a11y-t[aria-pressed="true"] i { background: var(--b-chat); }
.a11y-t[aria-pressed="true"] i::after { left: 16px; }
.a11y-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 10px 0 0; }
.a11y-reset { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 10px; border: 0; border-radius: 10px; background: transparent; color: var(--b-ink); font: 600 14px/1 var(--b-font); cursor: pointer; }
.a11y-reset:hover { background: var(--b-n-100); }
.a11y-more { font: 500 13px/1.3 var(--b-font); color: var(--b-n-700); text-decoration: underline; text-underline-offset: 3px; }
.a11y-more:hover { color: var(--b-ink); }
@media (max-width: 700px) { .a11y { right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); } .a11y-btn { width: 48px; height: 48px; } }

/* ── Los modos. Se aplican al contenido (#root en la landing, .lg-page en las páginas legales, la caja de los diálogos),
   no a html/body: un filtro en un antecesor convierte position: fixed en relativo a él y el panel se iría al fondo
   del documento. ──────────────────────────────────────────────────────────────────────────────────────────────────── */
/* Tamaño del texto: zoom en el contenido (Chrome, Edge, Safari y Firefox 126+) */
html.a11y-zoomed #root, html.a11y-zoomed .lg-page, html.a11y-zoomed .v8-modal-box { zoom: var(--a11y-zoom, 1); }
/* Escala de grises y contraste negativo: filtros; las imágenes y los vídeos se vuelven a invertir */
html.a11y-gray #root, html.a11y-gray .lg-page, html.a11y-gray .v8-modal-box { filter: grayscale(1); }
html.a11y-negative #root, html.a11y-negative .lg-page, html.a11y-negative .v8-modal-box { filter: invert(1) hue-rotate(180deg); }
html.a11y-negative.a11y-gray #root, html.a11y-negative.a11y-gray .lg-page, html.a11y-negative.a11y-gray .v8-modal-box { filter: grayscale(1) invert(1); }
html.a11y-negative #root img, html.a11y-negative #root video, html.a11y-negative .lg-page img, html.a11y-negative .v8-modal-box img, html.a11y-negative .v8-modal-box video { filter: invert(1) hue-rotate(180deg); }
/* Alto contraste: negro, blanco y enlaces amarillos; fondo claro: blanco, negro y enlaces azules (como el WordPress) */
html.a11y-contrast #root, html.a11y-contrast .lg-page, html.a11y-contrast .v8-modal-box,
html.a11y-contrast #root *:not(svg):not(path):not(circle):not(rect):not(line):not(polyline):not(img):not(video),
html.a11y-contrast .lg-page *:not(svg):not(path):not(circle):not(rect):not(line):not(polyline):not(img):not(video),
html.a11y-contrast .v8-modal-box *:not(svg):not(path):not(circle):not(rect):not(line):not(polyline):not(img):not(video) { background-color: #000 !important; background-image: none !important; color: #fff !important; border-color: #fff !important; box-shadow: none !important; text-shadow: none !important; }
html.a11y-contrast #root a, html.a11y-contrast .lg-page a, html.a11y-contrast .v8-modal-box a { color: #ff0 !important; }
html.a11y-contrast #root svg, html.a11y-contrast .lg-page svg, html.a11y-contrast .v8-modal-box svg { color: #fff !important; }
html.a11y-contrast #root a svg, html.a11y-contrast .lg-page a svg { color: #ff0 !important; }
html.a11y-contrast #root ::placeholder, html.a11y-contrast .v8-modal-box ::placeholder { color: #ccc !important; }
html.a11y-light #root, html.a11y-light .lg-page, html.a11y-light .v8-modal-box,
html.a11y-light #root *:not(svg):not(path):not(circle):not(rect):not(line):not(polyline):not(img):not(video),
html.a11y-light .lg-page *:not(svg):not(path):not(circle):not(rect):not(line):not(polyline):not(img):not(video),
html.a11y-light .v8-modal-box *:not(svg):not(path):not(circle):not(rect):not(line):not(polyline):not(img):not(video) { background-color: #fff !important; background-image: none !important; color: #000 !important; border-color: #000 !important; box-shadow: none !important; text-shadow: none !important; }
html.a11y-light #root a, html.a11y-light .lg-page a, html.a11y-light .v8-modal-box a { color: #00e !important; }
html.a11y-light #root svg, html.a11y-light .lg-page svg, html.a11y-light .v8-modal-box svg { color: #000 !important; }
/* En los dos modos de color, el foco tiene que verse: borde grueso del color de los enlaces */
html.a11y-contrast :focus-visible { outline: 3px solid #ff0 !important; outline-offset: 2px; }
html.a11y-light :focus-visible { outline: 3px solid #00e !important; outline-offset: 2px; }
/* Subrayar enlaces y fuente legible */
html.a11y-links a { text-decoration: underline !important; text-underline-offset: 3px; }
html.a11y-font body, html.a11y-font body *:not(svg):not(path) { font-family: Arial, Helvetica, sans-serif !important; letter-spacing: .01em; }
/* Reducir movimiento: lo mismo que prefers-reduced-motion, pero a petición; el JS lo consulta por window.LX_A11Y.reduced() */
html.a11y-motion *, html.a11y-motion *::before, html.a11y-motion *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; animation-delay: 0s !important; transition-duration: 0s !important; transition-delay: 0s !important; scroll-behavior: auto !important; }
@media (prefers-reduced-motion: reduce) { .a11y-btn, .a11y-t, .a11y-t i, .a11y-t i::after { transition: none; } }

/* ── versions/base-v8.css ── */
/* V8 · «Pruébalo en una pantalla». Solo tokens --b-* (marca.css). Escritorio: 1280 px, y la primera pantalla (800 px)
   contiene cabecera (60) + hero compacto + segmentado de 44 px + el escenario de 1180 × 560 px entero. Móvil: 390 px, el
   segmentado y el escenario a todo el ancho. El alto del simulador lo fija la versión (HEIGHT en v8.js). */

/* ── Marco común ─────────────────────────────────────────────────────────────────────────────────────────────── */
.v8-wrap { padding: 0 50px; }

.v8-head { height: 56px; display: flex; align-items: center; border-bottom: 1px solid var(--b-n-200); }
.v8-head .v8-wrap { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.v8-head-r { display: flex; align-items: center; gap: 6px; min-width: 0; }
.v8-lang, .v8-login { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px; border-radius: var(--b-r-ctl); border: 1px solid transparent; background: none; font: 600 15px/1 var(--b-font); color: var(--b-n-700); white-space: nowrap; transition: background .15s, border-color .15s; }
.v8-lang:hover { background: var(--b-n-100); }
.v8-lang-s { display: none; }
.v8-login { border-color: var(--b-n-300); color: var(--b-ink); }
.v8-login:hover { border-color: var(--b-ink); background: var(--b-n-50); }
.v8-login .b-ic { display: none; }

.v8-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 52px; padding: 0 26px; border-radius: var(--b-r-ctl); border: 1px solid transparent; font: 600 17px/1 var(--b-font); white-space: nowrap; transition: background .15s, color .15s, border-color .15s; }
.v8-btn--p { background: var(--b-chat); color: var(--b-n-0); }
.v8-btn--p:hover { background: var(--b-ink); }
.v8-btn--inv { background: var(--b-n-0); color: var(--b-chat); }
.v8-btn--inv:hover { background: var(--b-n-100); }
/* El CTA principal, en la cabecera (regla K): más bajo que el del bloque final */
.v8-btn.v8-head-cta { height: 40px; margin-left: 6px; padding: 0 18px; font-size: 15px; }

/* ── Hero compacto: título y una línea, sin botón (el CTA está en la cabecera). Cuentas de la 1.ª pantalla (800):
   cabecera 56 + hero 16+42+6+24 + segmentado 12+44 + escenario 10+560 = 770; la pista (8+21) acaba en 799 ──────── */
.v8-hero { padding: 16px 0 0; text-align: center; }
.v8-title { margin: 0 auto; max-width: 36ch; font: 800 38px/1.1 var(--b-display); letter-spacing: -.02em; color: var(--b-n-900); }
.v8-sub { margin: 6px auto 0; max-width: 64ch; font-size: 17px; line-height: 1.4; color: var(--b-n-700); }

/* ── El segmentado [Alumno | Profesor]: pastilla doble de 44 px, sin líneas de pista debajo ───────────────────── */
.v8-seg { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; width: 400px; max-width: 100%; height: 44px; margin: 12px auto 0; padding: 3px; border: 1px solid var(--b-n-200); border-radius: var(--b-r-card); background: var(--b-n-100); }
.v8-tab { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 36px; padding: 0 12px; border: 0; border-radius: var(--b-r-ctl); background: transparent; color: var(--b-n-700); font: 600 16px/1 var(--b-font); transition: background .2s, color .2s; }
.v8-tab:hover { background: var(--b-n-200); color: var(--b-n-900); }
.v8-tab[aria-selected="true"] { background: var(--b-chat); color: var(--b-n-0); box-shadow: var(--b-shadow); }
.v8-tab[aria-selected="true"]:hover { background: var(--b-chat); color: var(--b-n-0); }

/* ── El escenario: 1180 px centrado; en móvil, a todo el ancho. El alto lo fija la versión (560 px) ──────────── */
.v8-stage { width: 1180px; max-width: 100%; margin: 10px auto 0; }
.v8-missing { margin: 0; padding: 40px; text-align: center; color: var(--b-ko); }
.v8-hint { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 10px; margin: 8px 0 0; font-size: 14px; line-height: 1.5; color: var(--b-n-600); }
.v8-hint .b-ic { color: var(--b-teal); }
.v8-hint-uni { padding-left: 10px; border-left: 1px solid var(--b-n-300); }
.v8-replay { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 10px; margin-left: 4px; border: 0; border-radius: var(--b-r-ctl); background: transparent; font: 600 14px/1 var(--b-font); color: var(--b-ink); text-decoration: underline; text-underline-offset: 3px; }
.v8-replay:hover { background: var(--b-n-100); }
.v8-replay[hidden] { display: none; }

/* ── Centros: el slider compartido (sim/sim-logos.css); aquí solo el aire alrededor ─────────────────────────── */
.v8-clients { padding: 40px 0 0; }

/* ── Lo que dicen: tres huecos marcados, sin citas inventadas ────────────────────────────────────────────────── */
.v8-h2 { margin: 0 0 16px; font: 800 24px/1.2 var(--b-display); letter-spacing: -.01em; color: var(--b-n-900); }
.v8-quotes { padding: 36px 0 0; text-align: center; }
.v8-qgrid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.v8-qcard { display: grid; justify-items: center; gap: 4px; padding: 22px 20px 20px; border: 2px dashed var(--b-n-300); border-radius: var(--b-r-card); background: var(--b-n-50); }
.v8-qcard .b-ic { color: var(--b-teal); margin-bottom: 4px; }
.v8-q-big { margin: 0; font: 700 18px/1.3 var(--b-font); color: var(--b-n-700); }
.v8-q-sub { margin: 0; font-size: 14px; color: var(--b-n-600); }
.v8-note { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 12px 0 0; font-size: 14px; color: var(--b-n-600); }

/* ── CTA corto con los seis puntos de confianza como chips, y pie ────────────────────────────────────────────── */
.v8-cta { padding: 36px 0 40px; }
.v8-cta-box { padding: 36px 40px 30px; border-radius: var(--b-r-card); background: var(--b-dark); color: var(--b-n-0); text-align: center; }
.v8-cta-box h2 { margin: 0; font: 800 30px/1.2 var(--b-display); letter-spacing: -.01em; color: var(--b-n-0); }
.v8-cta-box .v8-btn { margin-top: 20px; }
.v8-cta-note { margin: 12px 0 0; font-size: 14px; color: var(--b-n-300); }
.v8-trust { list-style: none; margin: 22px 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.v8-chip { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border: 1px solid var(--b-n-600); border-radius: var(--b-r-ctl); font-size: 13px; font-weight: 600; color: var(--b-n-200); }
.v8-chip .b-ic { color: var(--b-maria); }

.v8-foot { padding: 22px 0 26px; border-top: 1px solid var(--b-n-200); font-size: 14px; color: var(--b-n-600); }
.v8-foot .v8-wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.v8-foot-l { display: flex; align-items: center; gap: 12px; }
.v8-foot-n { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.v8-foot-n a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 500; color: var(--b-n-700); text-decoration: none; }
.v8-foot-n a:hover { color: var(--b-ink); text-decoration: underline; }

/* ── Ej. 12 · El rótulo del arranque (versión narrada): una pastilla oscura sobre el borde inferior de la ventana del
   producto, fuera de él (no es del chat); la pinta la versión con los eventos `intro` del simulador ──────────────── */
.v8-stage { position: relative; }
.v8-cap { position: absolute; left: 50%; bottom: 14px; z-index: 5; display: inline-flex; align-items: center; gap: 10px; max-width: calc(100% - 32px); padding: 9px 16px 9px 10px; border-radius: 999px; background: var(--b-n-900); color: var(--b-n-0); font: 600 15px/1.3 var(--b-font); box-shadow: var(--b-shadow-lg); pointer-events: none; animation: v8-cap-in .3s ease both; transform: translateX(-50%); }
.v8-cap[hidden] { display: none; }
.v8-cap .n { display: grid; place-items: center; flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%; background: var(--b-maria); color: var(--b-n-900); font: 800 13px/1 var(--b-display); }
@keyframes v8-cap-in { from { opacity: 0; transform: translate(-50%, 8px); } to { opacity: 1; transform: translate(-50%, 0); } }

/* ── Ej. 12 · Qué gana cada uno: tres bloques (Alumno · Docente · Centro) tras el simulador, con las tres líneas ya
   aprobadas de cada uno (student.* / teacher.* / center.*) ─────────────────────────────────────────────────────── */
.v8-benefits { padding: 44px 0 0; }
.v8-benefits .v8-h2 { text-align: center; }
.v8-ben-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.v8-ben { display: grid; align-content: start; gap: 12px; padding: 24px 22px 22px; border: 1px solid var(--b-n-200); border-radius: var(--b-r-card); background: var(--b-n-0); }
.v8-ben-ic { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--b-tint); color: var(--b-ink); }
.v8-ben h3 { margin: 0; font: 800 20px/1.2 var(--b-display); letter-spacing: -.01em; color: var(--b-n-900); }
.v8-ben ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.v8-ben li { display: flex; gap: 8px; font-size: 15px; line-height: 1.45; color: var(--b-n-700); }
.v8-ben li .b-ic { flex-shrink: 0; margin-top: 3px; color: var(--b-ink); }

/* ── Sin movimiento ──────────────────────────────────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .v8-tab, .v8-btn, .v8-lang, .v8-login { transition: none !important; }
  .v8-cap { animation: none; }
}
@media (max-width: 700px) {
  .lx-page .v8-wrap { padding: 0 16px; }
  .lx-page .v8-head { height: 56px; }
  .lx-page .v8-head .v8-wrap { gap: 6px; }
  .lx-page .v8-head-r { gap: 0; }
  .lx-page .v8-lang, .lx-page .v8-login { height: 44px; min-width: 36px; gap: 4px; padding: 0 4px; justify-content: center; font-size: 13px; }
  .lx-page .v8-lang-l { display: none; }
  .lx-page .v8-lang-s { display: inline; }
  .lx-page .v8-login { border-color: transparent; }
  .lx-page .v8-login span { display: none; }
  .lx-page .v8-login .b-ic { display: block; }
  .lx-page .v8-btn.v8-head-cta { height: 44px; margin-left: 2px; padding: 0 10px; font-size: 14px; }
  .lx-page .v8-head-cta .b-ic { display: none; }
  .lx-page .v8-hero { padding: 18px 0 0; }
  .lx-page .v8-title { font-size: 30px; }
  .lx-page .v8-sub { font-size: 16px; margin-top: 8px; }
  .lx-page .v8-seg { width: 100%; height: 50px; margin-top: 16px; }
  .lx-page .v8-tab { height: 44px; gap: 8px; padding: 0 8px; font-size: 16px; }
  .lx-page .v8-stage { width: 100%; margin-top: 12px; }
  .lx-page .v8-hint { font-size: 14px; }
  .lx-page .v8-hint-uni { width: 100%; padding-left: 0; border: 0; text-align: center; }
  .lx-page .v8-clients { padding-top: 36px; }
  .lx-page .v8-quotes { padding-top: 36px; }
  .lx-page .v8-qgrid { grid-template-columns: 1fr; gap: 10px; }
  .lx-page .v8-qcard { padding: 16px; }
  .lx-page .v8-cta { padding: 32px 0 36px; }
  .lx-page .v8-cta-box { padding: 28px 18px 22px; }
  .lx-page .v8-cta-box h2 { font-size: 26px; }
  .lx-page .v8-cta-box .v8-btn { width: 100%; }
  .lx-page .v8-trust { gap: 6px; }
  .lx-page .v8-chip { height: 32px; padding: 0 10px; font-size: 12px; }
  .lx-page .v8-foot .v8-wrap { flex-direction: column; align-items: flex-start; gap: 6px; }
  .lx-page .v8-foot-n { gap: 4px 16px; }
  .lx-page .v8-cap { bottom: 10px; padding: 7px 12px 7px 8px; font-size: 14px; }
  .lx-page .v8-benefits { padding-top: 36px; }
  .lx-page .v8-ben-grid { grid-template-columns: 1fr; gap: 10px; }
  .lx-page .v8-ben { padding: 18px 16px; }
}

/* ── styles/teal.css ── */
/* La piel elegida el 05-11 (Ej. 11 · V3 · Teal profundo), aplicada a todas las versiones de este mockup (antes bajo «.lx-page.v-s3»). La misma landing V8 con la cabecera, el hero, el selector y el escenario sobre el «Chat» del
   logotipo (#1E7272) con texto claro; el producto, una ventana clara con sombra grande sobre lo oscuro; el CTA final en
   el mismo teal (el bloque oscuro ES el teal en esta piel); Centros, Lo que dicen y el pie, claros. Textura solo por CSS:
   un tono profundo del teal que baja de la cabecera, un foco suave tras el título, una viñeta en las esquinas y un ruido
   SVG muy tenue (data URI, sin imágenes). Todo bajo .lx-page; los hex solo aquí, en los tokens. Medido el 05-11:
   blanco sobre #1E7272 = 5,67:1 (no 6,4), «MARIA» #44B5B9 sobre #1E7272 = 2,3:1 (por eso la cabecera va en el tono
   profundo #175E5E: 3,1:1), el blanco al 92 % = 4,9:1, un borde blanco al 64 % = 3,3:1 con el teal. */
.lx-page {
  /* Tokens del chat que cambian: el bloque oscuro es el teal del logotipo y su tono profundo; la sombra grande, más honda
     (la ventana del producto tiene que despegarse del teal). Los neutros, el logotipo y las fuentes, como en el chat. */
  --b-dark: #1E7272;
  --b-dark-2: #175E5E;
  --b-shadow-lg: 0 1px 2px rgba(4, 22, 22, .28), 0 12px 28px -8px rgba(4, 22, 22, .38), 0 44px 96px -20px rgba(4, 22, 22, .58);
  /* Tokens propios de la piel: lo que va sobre el teal */
  --s3-on-teal: #FFFFFF;                      /* texto y títulos sobre teal: 5,67:1 sobre #1E7272, 7,5:1 sobre #175E5E */
  --s3-on-teal-2: rgba(255, 255, 255, .92);   /* subtítulo, pista y nota sobre teal: 5,0:1 (4,7:1 en el punto más claro del foco) */
  --s3-maria-light: #8FDADC;                  /* el acento «MARIA» aclarado para iconos sobre teal: 3,6:1 (no es texto) */
  --s3-line: rgba(255, 255, 255, .64);        /* bordes de controles y chips sobre teal: 3,3:1 */
  --s3-line-soft: rgba(255, 255, 255, .28);   /* separadores y el borde de la pista del segmentado (no es un control) */
  --s3-well: rgba(0, 0, 0, .16);              /* la pista del segmentado, hundida (nunca más clara: el blanco perdería contraste) */
  --s3-hover: rgba(255, 255, 255, .12);       /* hover de los botones sin relleno sobre teal */
  --s3-glow: rgba(46, 140, 138, .16);         /* el foco claro tras el título: aclara el teal hasta #217777 como mucho */
  --s3-shade: rgba(23, 94, 94, .6);           /* la viñeta de las esquinas: el tono profundo, translúcido */
  --s3-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.055'/%3E%3C/svg%3E");
  background: var(--b-n-0);
}

/* ── Cabecera: el tono profundo del teal, como una barra; el logotipo con «Chat» en blanco ─────────────────────── */
.lx-page .v8-head { background-color: var(--b-dark-2); background-image: var(--s3-noise); border-bottom-color: transparent; }
.lx-page .v8-head .b-logo .b { color: var(--s3-on-teal); }
.lx-page .v8-head .v8-lang, .lx-page .v8-head .v8-login { color: var(--s3-on-teal); }
.lx-page .v8-head .v8-lang:hover { background: var(--s3-hover); }
.lx-page .v8-head .v8-login { border-color: var(--s3-line); }
.lx-page .v8-head .v8-login:hover { border-color: var(--s3-on-teal); background: var(--s3-hover); }
/* El CTA de la cabecera, invertido: un botón teal sobre teal no se vería */
.lx-page .v8-head .v8-btn--p { background: var(--s3-on-teal); color: var(--b-chat); }
.lx-page .v8-head .v8-btn--p:hover { background: var(--b-n-100); color: var(--b-chat); }

/* ── Hero: el teal del logotipo; arriba, el tono profundo de la cabecera que se funde; abajo, el foco tras el título.
   El foco es una elipse en píxeles centrada 12 px bajo el borde del hero: .v8-try la continúa con la misma elipse
   centrada 12 px bajo su borde superior, así no hay costura entre los dos bloques. Radio vertical de 150 px: con 240
   llegaba a la parte alta del hero y la aclaraba frente a la cabecera (escalón visible) ───────────────────────── */
.lx-page .v8-hero {
  background-color: var(--b-dark);
  /* arriba, el tono profundo de la cabecera OPACO que se funde (si fuera translúcido habría un escalón en el borde) */
  background-image: var(--s3-noise),
    radial-gradient(640px 150px at 50% calc(100% + 12px), var(--s3-glow), transparent 70%),
    linear-gradient(to bottom, var(--b-dark-2), transparent 96px);
  background-repeat: repeat, no-repeat, no-repeat;
}
.lx-page .v8-title { color: var(--s3-on-teal); }
.lx-page .v8-sub { color: var(--s3-on-teal-2); }

/* ── Selector + escenario + pista, sobre el teal; aire bajo la pista antes de la franja clara. flow-root: el margen
   superior del segmentado (12 px) colapsaba a través de .v8-wrap y salía del bloque como una franja blanca; con un
   contexto de formato propio se queda dentro, sobre teal, y la altura no cambia ────────────────────────────────── */
.lx-page .v8-try {
  display: flow-root;
  padding-bottom: 28px;
  background-color: var(--b-dark);
  background-image: var(--s3-noise),
    radial-gradient(640px 150px at 50% 12px, var(--s3-glow), transparent 70%),
    radial-gradient(760px 420px at 0% 100%, var(--s3-shade), transparent 70%),
    radial-gradient(760px 420px at 100% 100%, var(--s3-shade), transparent 70%);
  background-repeat: repeat, no-repeat, no-repeat, no-repeat;
}
/* El segmentado: pista hundida y translúcida, pestaña activa en blanco con el texto en teal, inactiva en blanco */
.lx-page .v8-try .v8-seg { background: var(--s3-well); border-color: var(--s3-line-soft); }
.lx-page .v8-try .v8-tab { color: var(--s3-on-teal); }
.lx-page .v8-try .v8-tab:hover { background: var(--s3-hover); color: var(--s3-on-teal); }
.lx-page .v8-try .v8-tab[aria-selected="true"], .lx-page .v8-try .v8-tab[aria-selected="true"]:hover { background: var(--s3-on-teal); color: var(--b-chat); }
/* La ventana del producto: su piel intacta por dentro; desde fuera, el radio del chat y la sombra grande de la piel */
.lx-page .v8-stage { border-radius: var(--b-r-card); box-shadow: var(--b-shadow-lg); }
.lx-page .v8-hint { color: var(--s3-on-teal-2); }
.lx-page .v8-hint .b-ic { color: var(--s3-maria-light); }
.lx-page .v8-hint-uni { border-left-color: var(--s3-line-soft); }
.lx-page .v8-replay { color: var(--s3-on-teal); }
.lx-page .v8-replay:hover { background: var(--s3-hover); }
.lx-page .v8-missing { color: var(--s3-on-teal); }

/* ── Centros, Lo que dicen: la franja clara, como en el chat. El slider se queda en gris sobre claro: los 17 logos
   son marcas en escala de grises (algunas con relleno sólido), e invertirlas sobre teal las convertiría en manchas
   blancas y rompería el paso a color al pasar el ratón ─────────────────────────────────────────────────────────── */
.lx-page .v8-clients { padding-top: 80px; padding-bottom: 8px; }   /* 11-11: más aire entre secciones (antes 48 · 0) */

/* ── El CTA final: el mismo teal (ya lo es por --b-dark), con el foco y la viñeta; botón invertido y chips claros ── */
.lx-page .v8-cta-box {
  background-color: var(--b-dark);
  background-image: var(--s3-noise),
    radial-gradient(560px 220px at 50% 0%, var(--s3-glow), transparent 70%),
    radial-gradient(640px 360px at 0% 100%, var(--s3-shade), transparent 70%),
    radial-gradient(640px 360px at 100% 100%, var(--s3-shade), transparent 70%);
  background-repeat: repeat, no-repeat, no-repeat, no-repeat;
}
.lx-page .v8-cta-note { color: var(--s3-on-teal-2); }
.lx-page .v8-chip { border-color: var(--s3-line); color: var(--s3-on-teal); }
.lx-page .v8-chip .b-ic { color: var(--s3-maria-light); }

/* ── Foco visible sobre teal: anillo blanco (sobre claro sigue el --b-ink del banco). No entra en el producto ────── */
.lx-page .v8-head :focus-visible, .lx-page .v8-try > .v8-wrap :focus-visible, .lx-page .v8-cta-box :focus-visible { outline-color: var(--s3-on-teal); }

/* ── Sin movimiento: la piel no añade animaciones; apaga sus transiciones de hover ───────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .lx-page .v8-tab, .lx-page .v8-btn, .lx-page .v8-lang, .lx-page .v8-login { transition: none !important; }
}
@media (max-width: 700px) {
  .lx-page .v8-head .v8-login { border-color: transparent; }
  .lx-page .v8-try { padding-bottom: 24px; }
  .lx-page .v8-clients { padding-top: 60px; }
}

/* ── inst.css ── */
/* Banda institucional del pie (12-11-2026), en la portada, las legales, el blog y la 404: datos de contacto visibles y la
   publicidad obligatoria de las ayudas (proyecto de I+D: FEDER + Junta de Castilla y León/ICE; Kit Digital). Los logotipos
   son las imágenes oficiales tal cual, sobre blanco. Solo tokens --b-*. */
.v8-foot .v8-inst { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); align-items: start; gap: 28px 40px; margin-top: 18px; padding-top: 20px; border-top: 1px solid var(--b-n-200); }
.v8-inst-c { margin: 0; font-style: normal; font-size: 14px; line-height: 1.6; color: var(--b-n-700); }
.v8-inst-c strong { display: block; margin-bottom: 2px; font: 800 15px/1.3 var(--b-display); color: var(--b-n-900); }
.v8-inst-c a { display: inline-flex; align-items: center; min-height: 32px; font-weight: 600; color: var(--b-ink); text-decoration: none; }
.v8-inst-c a:hover { text-decoration: underline; }
.v8-inst-c .sep { margin: 0 8px; color: var(--b-n-300); }
.v8-inst-f { display: grid; gap: 16px; justify-items: start; }
.v8-inst-f a { display: grid; gap: 6px; font-size: 13.5px; font-weight: 600; color: var(--b-ink); text-decoration: none; }
.v8-inst-f a:hover span { text-decoration: underline; }
.v8-inst-f img { display: block; max-width: 100%; height: auto; background: #FFFFFF; border-radius: 6px; }
.v8-inst-f .feder { width: 420px; }
.v8-inst-f .kit { width: 620px; }
.v8-inst-k { display: grid; gap: 6px; }
.v8-inst-k p { margin: 0; font-size: 13.5px; font-weight: 600; color: var(--b-n-700); }
@media (max-width: 800px) { .v8-foot .v8-inst { grid-template-columns: 1fr; gap: 20px; } }
/* La página del proyecto (plantilla de las legales) */
.lg-doc .lg-cartel { display: block; width: 100%; max-width: 760px; height: auto; margin: 18px 0; border: 1px solid var(--b-n-200); border-radius: 10px; }
.lg-doc .lg-kit { display: block; width: 100%; max-width: 760px; height: auto; margin: 14px 0; }

/* ── blog.css ── */
/* El blog y los recursos (11-11-2026): V3 «Hub de recursos» del mockup del Ej. 17 (blog.css del mockup, partes comunes,
   V2 y V3) pasada a páginas estáticas. El mockup elegía móvil con .is-phone; aquí son media queries (≤ 700 px móvil,
   ≤ 1000 px una columna). Solo tokens --b-* (marca.css) y --s3-* (teal.css). Todo bajo .bl-page. build.py junta este
   fichero con fonts, marca, site, a11y, base-v8 y teal en dist/assets/blog/blog.css (las reglas .is-phone de base-v8 y
   teal pasan a la media query de móvil). */
.bl-page { position: relative; background: var(--b-n-0); }
.bl-page .v8-head { position: relative; z-index: 5; }
.bl main:focus { outline: none; }
.bl-vh { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
@media (max-width: 1000px) { .bl-page .v8-wrap { padding-left: 24px; padding-right: 24px; } }
@media (max-width: 700px) { .bl-page .v8-wrap { padding-left: 16px; padding-right: 16px; } }

/* ── Cabecera: logotipo como enlace, «Blog», idioma, Acceder (desplegable sin JS) y «Prueba MARIAChat» ─────────── */
.bl-home { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; }
.bl-home .b-logo { font-size: 24px; }
.bl-page .v8-head a.v8-lang, .bl-page .v8-head a.v8-btn { text-decoration: none; }
.bl-page .v8-head .bl-nav[aria-current="page"] { background: var(--s3-hover); }
.bl-login { position: relative; }
.bl-login > summary { list-style: none; cursor: pointer; }
.bl-login > summary::-webkit-details-marker { display: none; }
.bl-login-m { position: absolute; right: 0; top: calc(100% + 8px); z-index: 20; display: grid; gap: 4px; width: 300px; padding: 8px; border: 1px solid var(--b-n-200); border-radius: var(--b-r-card); background: var(--b-n-0); box-shadow: var(--b-shadow-lg); }
.bl-login-m a { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 2px 10px; align-items: center; padding: 10px 12px; border-radius: var(--b-r-ctl); color: var(--b-n-900); text-decoration: none; }
.bl-login-m a .b-ic { grid-row: span 2; color: var(--b-ink); }
.bl-login-m a b { font: 700 15px/1.25 var(--b-font); }
.bl-login-m a span { font-size: 13.5px; line-height: 1.35; color: var(--b-n-600); }
.bl-login-m a:hover { background: var(--b-n-50); }
.bl-login-m a:hover b { color: var(--b-ink); text-decoration: underline; text-underline-offset: 3px; }
.bl-page .v8-head .bl-login-m :focus-visible { outline-color: var(--b-ink); }
@media (max-width: 700px) {
  .bl-home .b-logo { font-size: 18px; }
  .bl-page .v8-head .bl-nav { display: none; }
  .bl-page .v8-head .v8-login span { display: block; position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .bl-login-m { position: fixed; left: 16px; right: 16px; top: 64px; width: auto; }
}

/* ── Miga de pan, títulos, metadatos y chips ───────────────────────────────────────────────────────────────────── */
.bl-crumb { padding: 14px 0 0; font-size: 14px; color: var(--b-n-600); }
.bl-crumb ol { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; list-style: none; margin: 0; padding: 0; }
.bl-crumb li { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.bl-crumb a { color: var(--b-ink); text-decoration: none; display: inline-flex; align-items: center; min-height: 32px; }
.bl-crumb a:hover { text-decoration: underline; }
.bl-crumb .b-ic { color: var(--b-n-400); }
.bl-crumb [aria-current] { color: var(--b-n-700); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 60ch; }
.bl-main { padding-bottom: 56px; }
.bl-h1 { margin: 10px 0 0; font: 800 38px/1.1 var(--b-display); letter-spacing: -.02em; color: var(--b-n-900); text-wrap: balance; }
.bl-sub { margin: 10px 0 0; max-width: 64ch; font-size: 17px; line-height: 1.5; color: var(--b-n-700); }
.bl-head { padding: 10px 0 28px; }
.bl-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; font-size: 14px; color: var(--b-n-600); }
.bl-meta > span { display: inline-flex; align-items: center; }
.bl-meta .b-ic { color: var(--b-n-400); margin-right: 4px; }
.bl-meta time { font-variant-numeric: tabular-nums; }
.bl-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 0 10px; border-radius: 999px; background: var(--b-tint); color: var(--b-ink); font: 600 12.5px/1 var(--b-font); text-decoration: none; white-space: nowrap; }
.bl-chip:hover { background: var(--b-tint-2); text-decoration: underline; text-underline-offset: 3px; }
.bl-chips { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 18px 0 0; padding: 0; }
.bl-chips a { display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border: 1px solid var(--b-n-200); border-radius: 999px; background: var(--b-n-0); color: var(--b-n-700); font: 600 14px/1 var(--b-font); text-decoration: none; white-space: nowrap; transition: background .15s, color .15s, border-color .15s; }
.bl-chips a:hover { background: var(--b-n-100); border-color: var(--b-n-300); }
.bl-chips a[aria-current="page"] { background: var(--b-chat); border-color: var(--b-chat); color: var(--b-n-0); }
.bl-chips .n { color: var(--b-n-600); font-weight: 500; margin-left: 4px; }
.bl-chips a[aria-current="page"] .n { color: var(--b-n-0); }
@media (max-width: 700px) {
  .bl-h1 { font-size: 30px; }
  .bl-sub { font-size: 16px; }
  .bl-crumb [aria-current] { max-width: 28ch; }
  .bl-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-left: -16px; margin-right: -16px; padding: 0 16px 6px; }
  .bl-chips::-webkit-scrollbar { display: none; }
}

/* ── Paginación ────────────────────────────────────────────────────────────────────────────────────────────────── */
.bl-pag { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px; margin: 36px 0 0; }
.bl-pag a, .bl-pag span { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0 10px; border-radius: var(--b-r-ctl); border: 1px solid var(--b-n-200); background: var(--b-n-0); color: var(--b-n-700); font: 600 14px/1 var(--b-font); text-decoration: none; }
.bl-pag a:hover { border-color: var(--b-ink); color: var(--b-ink); }
.bl-pag [aria-current="page"] { background: var(--b-chat); border-color: var(--b-chat); color: var(--b-n-0); }
.bl-pag .gap { border: 0; color: var(--b-n-600); min-width: 20px; }
.bl-pag-note { text-align: center; margin: 10px 0 0; font-size: 13px; color: var(--b-n-600); }

/* ── El hub: buscador, pestañas (enlaces), panel y columna lateral ─────────────────────────────────────────────── */
.bl-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 18px; }
.bl-count { margin: 18px 0 0; font-size: 14px; color: var(--b-n-600); }
.bl-search { position: relative; flex: 1 1 320px; max-width: 460px; }
.bl-search input { width: 100%; height: 44px; padding: 0 14px 0 42px; border: 1px solid var(--b-n-400); border-radius: var(--b-r-ctl); background: var(--b-n-0); color: var(--b-n-900); font: 400 15px/1 var(--b-font); -webkit-appearance: none; appearance: none; }
.bl-search input::placeholder { color: var(--b-n-600); }
.bl-search input:focus { border-color: var(--b-ink); outline: 2px solid var(--b-ink); outline-offset: 1px; }
.bl-search .b-ic { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--b-n-600); pointer-events: none; }
.bl-tabs { display: flex; gap: 4px; margin-top: 4px; border-bottom: 1px solid var(--b-n-200); overflow-x: auto; scrollbar-width: none; }
.bl-tabs::-webkit-scrollbar { display: none; }
.bl-tab { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 16px; border-bottom: 3px solid transparent; margin-bottom: -1px; color: var(--b-n-700); font: 600 15px/1 var(--b-font); white-space: nowrap; text-decoration: none; }
.bl-tab .b-ic { color: var(--b-n-400); }
.bl-tab .n { color: var(--b-n-600); font-weight: 500; }
.bl-tab:hover { color: var(--b-n-900); background: var(--b-n-50); }
.bl-tab[aria-current="page"] { color: var(--b-ink); border-bottom-color: var(--b-chat); }
.bl-tab[aria-current="page"] .b-ic { color: var(--b-teal); }
.bl-hub { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 48px; align-items: start; margin-top: 8px; }
.bl-hub > section { min-width: 0; }
.bl-side { display: grid; gap: 26px; position: sticky; top: 16px; padding-top: 18px; }
.bl-side h2, .bl-aside h2 { margin: 0 0 10px; font: 700 12px/1 var(--b-font); letter-spacing: .08em; text-transform: uppercase; color: var(--b-ink); }
.bl-tags { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0; padding: 0; }
.bl-tags a { display: inline-flex; align-items: center; min-height: 32px; padding: 0 10px; border: 1px solid var(--b-n-200); border-radius: 999px; color: var(--b-n-700); font: 500 13px/1 var(--b-font); text-decoration: none; }
.bl-tags a:hover { border-color: var(--b-ink); color: var(--b-ink); }
.bl-tags a[aria-current] { border-color: var(--b-chat); color: var(--b-ink); background: var(--b-tint); }
.bl-tags .n { color: var(--b-n-600); margin-left: 4px; }
.bl-pf { display: grid; gap: 4px; list-style: none; margin: 0; padding: 0; }
.bl-pf a, .bl-feedl { display: flex; align-items: center; gap: 8px; min-height: 36px; color: var(--b-ink); font: 600 14px/1 var(--b-font); text-decoration: none; }
.bl-pf a:hover, .bl-feedl:hover { text-decoration: underline; text-underline-offset: 3px; }
.bl-sec-sub { margin: 18px 0 0; font-size: 15px; color: var(--b-n-700); }
.bl-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin: 18px 0 0; font-size: 15px; color: var(--b-n-700); }
.bl-filter strong { color: var(--b-n-900); }
.bl-filter a, .bl-linkbtn { color: var(--b-ink); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; background: none; border: 0; padding: 0; font: inherit; font-weight: 600; cursor: pointer; min-height: 32px; }
.bl-empty { margin: 24px 0 0; padding: 20px; border-radius: var(--b-r-card); background: var(--b-n-50); color: var(--b-n-700); font-size: 15px; }
@media (max-width: 1000px) {
  .bl-hub { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .bl-side { position: static; padding-top: 0; }
}
@media (max-width: 700px) { .bl-search { max-width: none; } .bl-tab { padding: 0 12px; } }

/* ── Tarjetas ──────────────────────────────────────────────────────────────────────────────────────────────────── */
.bl-grid { list-style: none; margin: 22px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 20px; }
.bl-rel .bl-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 0; }
.bl-card { display: grid; gap: 10px; align-content: start; min-width: 0; }
.bl-card img { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; border-radius: var(--b-r-card); background: var(--b-n-100); }
.bl-card .top { display: flex; align-items: center; gap: 10px; }
.bl-card h2, .bl-card h3 { margin: 0; font: 700 19px/1.25 var(--b-display); letter-spacing: -.01em; }
.bl-card h2 a, .bl-card h3 a { color: var(--b-n-900); text-decoration: none; }
.bl-card h2 a:hover, .bl-card h3 a:hover { color: var(--b-ink); text-decoration: underline; text-underline-offset: 3px; }
.bl-card p { margin: 0; font-size: 15px; line-height: 1.5; color: var(--b-n-700); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.bl-card .bl-meta { font-size: 13.5px; }
@media (max-width: 1000px) { .bl-rel .bl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) { .bl-grid, .bl-rel .bl-grid { grid-template-columns: minmax(0, 1fr); gap: 26px; } }

/* ── Podcast, informes y webinars ──────────────────────────────────────────────────────────────────────────────── */
.bl-eps { list-style: none; margin: 18px 0 0; padding: 0; display: grid; }
.bl-ep { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 16px 0; border-top: 1px solid var(--b-n-200); scroll-margin-top: 24px; }
.bl-ep:last-child { border-bottom: 1px solid var(--b-n-200); }
.bl-ep .num { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 12px; background: var(--b-tint); color: var(--b-ink); font: 800 18px/1 var(--b-display); font-variant-numeric: tabular-nums; }
.bl-ep h2, .bl-rep h2, .bl-web h2 { margin: 0; font: 700 17px/1.3 var(--b-display); color: var(--b-n-900); }
.bl-ep p { margin: 2px 0 0; font-size: 14px; color: var(--b-n-700); }
.bl-ep:target, .bl-rep:target { background: var(--b-tint); box-shadow: 0 0 0 8px var(--b-tint); border-radius: 4px; }
.bl-sbtn { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 12px; border: 1px solid var(--b-n-200); border-radius: var(--b-r-ctl); background: var(--b-n-0); color: var(--b-n-700); font: 600 13px/1 var(--b-font); text-decoration: none; white-space: nowrap; cursor: pointer; }
.bl-sbtn:hover { border-color: var(--b-ink); color: var(--b-ink); }
.bl-reps { list-style: none; margin: 18px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.bl-rep { display: grid; gap: 6px; align-content: start; padding: 16px 18px; border: 1px solid var(--b-n-200); border-radius: var(--b-r-card); min-width: 0; scroll-margin-top: 24px; }
.bl-rep .src { font: 700 11.5px/1.3 var(--b-font); letter-spacing: .07em; text-transform: uppercase; color: var(--b-ink); }
.bl-rep a, .bl-web a.go { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; min-height: 36px; color: var(--b-ink); font: 600 14px/1 var(--b-font); text-decoration: none; justify-self: start; }
.bl-rep a:hover, .bl-web a.go:hover { text-decoration: underline; text-underline-offset: 3px; }
.bl-webs { list-style: none; margin: 18px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.bl-web { display: grid; gap: 8px; align-content: start; min-width: 0; scroll-margin-top: 24px; }
.bl-web .ph { display: grid; place-items: center; aspect-ratio: 16 / 9; border-radius: var(--b-r-card); background: var(--b-dark-2); background-image: var(--s3-noise); color: var(--b-n-0); }
.bl-web .ph:hover { background-color: var(--b-dark); }
.bl-web .org { font: 700 11.5px/1.3 var(--b-font); letter-spacing: .07em; text-transform: uppercase; color: var(--b-ink); }
.bl-web p { margin: 0; font-size: 14.5px; line-height: 1.45; color: var(--b-n-700); }
@media (max-width: 700px) {
  .bl-reps, .bl-webs { grid-template-columns: minmax(0, 1fr); }
  .bl-ep { grid-template-columns: 44px minmax(0, 1fr); }
  .bl-ep .num { width: 44px; height: 44px; font-size: 15px; }
  .bl-ep .bl-sbtn { grid-column: 2; justify-self: start; }
}

/* ── El artículo: cuerpo a 720 + columna de 280 (índice pegajoso, «También te puede interesar», temas, compartir) ── */
.bl-art2 { display: grid; grid-template-columns: minmax(0, 720px) 280px; gap: 56px; justify-content: space-between; align-items: start; }
.bl-art { max-width: 720px; min-width: 0; }
.bl-art .bl-h1 { margin-top: 14px; font-size: 40px; }
.bl-art .bl-meta { margin-top: 14px; }
.bl-onlyes { display: flex; align-items: flex-start; gap: 10px; margin: 18px 0 0; padding: 12px 14px; border-radius: var(--b-r-ctl); background: var(--b-warn-bg); color: var(--b-warn); font-size: 14px; line-height: 1.45; }
.bl-onlyes .b-ic { flex-shrink: 0; margin-top: 2px; }
.bl-figure { margin: 26px 0 0; }
.bl-figure img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--b-r-card); background: var(--b-n-100); }
.bl-body { margin-top: 26px; font-size: 18px; line-height: 1.65; color: var(--b-n-900); overflow-wrap: break-word; }
.bl-body p { margin: 0 0 1.1em; }
.bl-body h2 { margin: 1.6em 0 .5em; font: 800 26px/1.2 var(--b-display); letter-spacing: -.015em; color: var(--b-n-900); scroll-margin-top: 16px; }
.bl-body h2:focus { outline: none; }
.bl-body ul, .bl-body ol { margin: 0 0 1.1em; padding-left: 1.4em; }
.bl-body li { margin: 0 0 .4em; }
.bl-body a { color: var(--b-ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.bl-body a:hover { color: var(--b-chat); }
.bl-body strong { font-weight: 700; }
.bl-body .bl-bfig { margin: 1.6em 0; }
.bl-body .bl-bfig img { margin: 0 auto; border-radius: var(--b-r-card); background: var(--b-n-100); }
.bl-share { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.bl-share .lbl { font-size: 13px; font-weight: 600; color: var(--b-n-600); margin-right: 4px; }
.bl-share-m { display: none; margin-top: 20px; }
.bl-author { display: flex; gap: 14px; align-items: center; margin-top: 28px; padding: 18px; border-radius: var(--b-r-card); background: var(--b-n-50); }
.bl-author .av { display: grid; place-items: center; flex-shrink: 0; width: 48px; height: 48px; border-radius: 50%; background: var(--b-chat); color: var(--b-n-0); font: 800 14px/1 var(--b-display); }
.bl-author b { display: block; font-size: 15px; color: var(--b-n-900); }
.bl-author span { font-size: 14px; color: var(--b-n-700); }
.bl-pn { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 24px; }
.bl-pn a { display: grid; gap: 4px; align-content: start; padding: 14px 16px; border: 1px solid var(--b-n-200); border-radius: var(--b-r-card); color: var(--b-n-900); text-decoration: none; min-width: 0; }
.bl-pn a:hover { border-color: var(--b-ink); }
.bl-pn a.next { text-align: right; grid-column: 2; }
.bl-pn small { display: flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--b-ink); }
.bl-pn a.next small { justify-content: flex-end; }
.bl-pn span { font: 600 15px/1.3 var(--b-display); }
.bl-back { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 4px; color: var(--b-ink); font: 600 15px/1 var(--b-font); text-decoration: none; }
.bl-back:hover { text-decoration: underline; }
.bl-end { margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--b-n-200); }
.bl-aside { position: sticky; top: 16px; display: grid; gap: 24px; min-width: 0; }
.bl-toc { padding: 16px 18px; border: 1px solid var(--b-n-200); border-radius: var(--b-r-card); max-height: calc(100vh - 220px); overflow-y: auto; }
.bl-toc ol, .bl-mtoc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.bl-toc a, .bl-mtoc a { display: block; padding: 7px 10px; border-left: 2px solid var(--b-n-200); color: var(--b-n-700); font-size: 14px; line-height: 1.35; text-decoration: none; }
.bl-toc a:hover, .bl-mtoc a:hover { color: var(--b-ink); border-left-color: var(--b-maria); background: var(--b-n-50); }
.bl-toc a.is-on { color: var(--b-ink); border-left-color: var(--b-chat); font-weight: 600; }
.bl-mtoc { display: none; margin: 22px 0 0; border: 1px solid var(--b-n-200); border-radius: var(--b-r-card); }
.bl-mtoc summary { display: flex; align-items: center; justify-content: space-between; min-height: 44px; padding: 12px 16px; font: 700 14px/1 var(--b-font); color: var(--b-ink); cursor: pointer; list-style: none; }
.bl-mtoc summary::-webkit-details-marker { display: none; }
.bl-mtoc[open] summary .b-ic { transform: rotate(180deg); }
.bl-mtoc ol { padding: 0 10px 10px; }
.bl-also { padding: 16px 18px; border: 1px solid var(--b-n-200); border-radius: var(--b-r-card); background: var(--b-n-50); }
.bl-also ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.bl-also li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 10px; font-size: 14px; line-height: 1.4; }
.bl-also li .b-ic { color: var(--b-teal); margin-top: 2px; }
.bl-also a { color: var(--b-n-900); text-decoration: none; font-weight: 600; }
.bl-also a:hover { color: var(--b-ink); text-decoration: underline; }
.bl-also small { display: block; color: var(--b-n-600); font-size: 12.5px; }
.bl-rel { margin-top: 44px; }
.bl-rel h2.sec { margin: 0 0 16px; font: 800 22px/1.2 var(--b-display); letter-spacing: -.01em; color: var(--b-n-900); }
@media (max-width: 1000px) {
  .bl-art2 { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .bl-art { max-width: 760px; }
  .bl-aside { position: static; }
  .bl-aside .bl-toc, .bl-aside .bl-share-a { display: none; }
  .bl-mtoc { display: block; }
  .bl-share-m { display: flex; }
}
@media (max-width: 700px) {
  .bl-art .bl-h1 { font-size: 30px; }
  .bl-body { font-size: 17px; }
  .bl-body h2 { font-size: 23px; }
  .bl-pn { grid-template-columns: minmax(0, 1fr); }
  .bl-pn a.next { grid-column: 1; }
}

/* ── 404 ───────────────────────────────────────────────────────────────────────────────────────────────────────── */
.bl-nf { padding: 56px 0 72px; max-width: 720px; }
.bl-nf p { margin: 14px 0 0; font-size: 17px; line-height: 1.55; color: var(--b-n-700); }
.bl-nf ul { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; margin: 26px 0 0; padding: 0; }
.bl-nf .v8-btn { text-decoration: none; }
.bl-nf .bl-sbtn { min-height: 52px; padding: 0 18px; font-size: 15px; }

@media (prefers-reduced-motion: reduce) { .bl-chips a, .bl-sbtn { transition: none; } }
@media print { .bl-page .v8-head, .bl-aside, .bl-rel, .bl-pn, .bl-share-m, .bl-end, .v8-foot, .a11y, .v8-skip { display: none !important; } }