/*
  Escaparate público de baremo.
  Misma paleta que el reproductor de la app (apps/app/public/reproductor.html): tinta petróleo
  sobre hueso, ocre como único acento accionable, salvia para "esto ya lo tienes". Mobile first,
  referencia 390px, pero aquí además hay que sostenerse bien en escritorio porque a esta página
  también se llega desde un buscador en un portátil de biblioteca.
*/
@import "./tokens.generado.css";

/*
 * `--tinta`/`--ocre`/`--salvia`... eran una SEGUNDA copia a mano de la misma paleta que ya vive en
 * packages/design-tokens/tokens.json (fuente única, ver su cabecera para el porqué: ya derivó una
 * vez sin que nadie lo notara — `nAlerta` valía un hex en Flutter y otro en la web). Aquí pasa lo
 * mismo si nadie mira las dos copias a la vez el día que se retoque un color. Los nombres LEGADO
 * se conservan (los usa el resto de este fichero, ~150 veces) pero ahora son ALIAS de las
 * variables por papel que importa `tokens.generado.css` de arriba, nunca hex sueltos: solo pueden
 * dejar de coincidir si alguien los reescribe a mano otra vez.
 *
 * `--tenue` y `--salvia-oscuro` NO tienen equivalente en el modelo de tres papeles de
 * `tokens.json` (que solo define "tenue" para escribir sobre TINTA oscura; aquí hace falta el
 * papel inverso, texto oscuro sobre HUESO claro) — como `--ocre-sordo`/`--ocre-hover` en el
 * reproductor (ver `generar.mjs`), se quedan como constantes propias de esta hoja, ya medidas
 * contra sus dos fondos reales (`--hueso` 4,91:1, `--hueso-2` 4,15:1). NO tocar su valor sin
 * volver a medir: esta hoja no tiene una prueba de contraste automática que lo cace.
 */
:root {
  --tinta: var(--color-superficie-base);
  --tinta-2: var(--color-superficie-elevada);
  --tinta-3: var(--color-superficie-borde);
  --hueso: var(--color-papel-claro);
  --hueso-2: var(--color-papel-apagado);
  --ocre: var(--color-acento-decoracion);
  --ocre-sordo: var(--color-acento-relleno);
  --salvia: var(--color-semantico-normal-decoracion);
  /* Ya se usaba como fallback de un var() nunca declarado en .tarjeta .rama-etiqueta (y en
     estiloBaremos.mjs, fuera de esta carpeta): el mismo valor de siempre, ahora real. */
  --salvia-oscuro: #3E6656;
  --tenue: #5C6F73;
  /* Dos radios, no uno: `--r` (superficie — tarjetas, paneles) ya era la mitad de la disciplina
     del reproductor; faltaba `--r-control` (campos, botones pequeños) para dejar de repartir 11,
     12, 13, 15, 16, 20px sueltos por cada componente nuevo, la misma incoherencia que ya se
     corrigió una vez en apps/web/src/estilos/index.css (ver su bloque RADIOS). */
  --r: var(--radius-panel);
  --r-control: var(--radius-control);
  --ancho-lectura: 68ch;
  /* El marco crece con la pantalla; la prosa (`--ancho-lectura`, arriba) NO — 68ch son 68
     caracteres en un móvil y en un monitor de 27", y esa es la diferencia entre una pantalla
     amplia y una pantalla desperdiciada. Mismo criterio que `--container-lienzo` de la app
     (apps/web/src/estilos/index.css): el sobrante en escritorio se gasta en la REJILLA (más
     columnas de tarjeta en paralelo), nunca estirando un párrafo. */
  --ancho-pagina: min(94vw, 1440px);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--hueso);
  color: var(--tinta);
  /* Misma pila que apps/web/src/estilos/index.css (`--font-sans`): la que había antes no nombra
     NINGUNA cara real de un Linux de escritorio y caía al `sans-serif` genérico (casi siempre
     DejaVu Sans, ancha y de formas de 1998) — ya se midió y corrigió una vez en el reproductor;
     esta hoja se había quedado con la versión vieja del mismo bug. */
  font: 400 17px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI Variable Text", "Segoe UI",
    Roboto, "Noto Sans", Cantarell, Ubuntu, "Helvetica Neue", "Liberation Sans", Arial, sans-serif;
  font-synthesis-weight: none;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
ul { list-style: none; }
button, input, select { font: inherit; }
:focus-visible { outline: 3px solid var(--ocre); outline-offset: 3px; }

h1, h2, h3 { line-height: 1.15; letter-spacing: -0.01em; }
h1 { font-size: clamp(2rem, 5vw + 1rem, 3.4rem); }
h2 { font-size: clamp(1.5rem, 2.5vw + 1rem, 2.2rem); }
h3 { font-size: 1.2rem; }
p { max-width: var(--ancho-lectura); }

.contenedor { max-width: var(--ancho-pagina); margin: 0 auto; padding: 0 20px; }

/* ---------- botones ---------- */
/*
 * EL MISMO BOTÓN QUE LA APP: no una imitación con otro mecanismo. `.boton-primario`/
 * `.boton-secundario` (apps/web/src/estilos/index.css) llevan borde de `--cuerpo-borde` en las
 * CUATRO caras, `--radius-boton` (18px) y un canto aparte por `box-shadow` que se encoge a 2px y
 * el botón baja `--cuerpo-hundido` al pulsar. Esta hoja es CSS plano sin Tailwind y no puede
 * `@apply` esa clase, así que es la MISMA geometría, con los MISMOS tokens `--cuerpo-*`, escrita a
 * mano una sola vez aquí — antes tenía SU PROPIO mecanismo (`border-bottom` más grueso, `scale(.98)`
 * al pulsar): un botón de la portada y uno de la app eran, literalmente, dos objetos distintos.
 *
 * El canto es del MISMO color que el borde de cada variante (`--boton-canto`, que cada una
 * redeclara): no se inventa un tercer tono. `.boton` fija la mecánica; `.boton-ocre`/`.boton-borde`
 * fijan solo el color — la misma separación que ya documenta `.con-cuerpo` en el aula.
 */
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px 22px; border-radius: var(--radius-boton); font-weight: 700; font-size: 0.98rem;
  text-decoration: none; cursor: pointer;
  border-style: solid; border-width: var(--cuerpo-borde); border-color: var(--boton-canto, transparent);
  box-shadow: 0 var(--cuerpo-canto) 0 0 var(--boton-canto, transparent);
  transition: transform var(--duration-instante) var(--ease-paso),
    box-shadow var(--duration-instante) var(--ease-paso);
}
.boton:active:not(:disabled) {
  transform: translateY(var(--cuerpo-hundido));
  box-shadow: 0 2px 0 0 var(--boton-canto, transparent);
}
/*
 * Medido con la fórmula de contraste de WCAG 2.1 (no a ojo): texto hueso (#F7F1E7) sobre --ocre
 * (#E4632B) da 3,05:1, por debajo del 4,5:1 que exige un botón de acción — el CTA principal del
 * sitio ("Calcular mis puntos") no cumplía. --ocre-sordo es, de hecho, el mismo valor que ya usa
 * el resto del producto para "superficie sobre la que se escribe en blanco" (acento.relleno en
 * packages/design-tokens/tokens.json): blanco puro sobre --ocre-sordo da 5,03:1. --ocre se
 * conserva para usos decorativos (halos, iconos) donde no hay texto encima.
 */
.boton-ocre {
  background: var(--ocre-sordo); color: #fff;
  --boton-canto: var(--ocre-sordo);
}
.boton-ocre:hover { filter: brightness(.92); }
.boton-borde { background: transparent; color: var(--tinta); --boton-canto: var(--tinta-3); }
.boton-borde:hover { background: var(--hueso-2); }
.boton:disabled { opacity: .6; cursor: wait; }

/* ---------- cabecera ---------- */
.cabecera {
  background: rgba(250, 251, 248, .94); color: var(--tinta); position: sticky; top: 0; z-index: 10;
  /* Misma junta que `CabeceraApp` (apps/web/src/estilos/index.css): `--cuerpo-borde-fino`, no un
     hairline de 1px casi invisible — la cabecera es lo primero que se ve y lo último que debía
     seguir pareciendo «otra piel». */
  border-bottom: var(--cuerpo-borde-fino) solid var(--tinta-3);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
}
.cabecera-fila {
  min-height: 70px; max-width: var(--ancho-pagina); margin: 0 auto; padding: 10px 20px;
  display: flex; align-items: center; gap: 16px;
}
.marca {
  display: inline-flex; align-items: center; gap: 9px; margin-right: auto;
  white-space: nowrap; color: var(--tinta); font-size: 1.25rem; font-weight: 850;
  letter-spacing: -.03em; text-decoration: none;
}
.marca img { flex: 0 0 36px; width: 36px; height: 36px; border-radius: 10px; }
.menu-boton {
  min-height: 42px; color: var(--tinta); background: #fff; font-size: .85rem; font-weight: 700;
  padding: 8px 14px; border: var(--cuerpo-borde-fino) solid var(--tinta-3); border-radius: 999px; cursor: pointer;
}
.nav-principal { display: none; }
.nav-principal ul { display: flex; gap: 22px; flex-wrap: nowrap; align-items: center; font-size: .92rem; }
.nav-principal a { text-decoration: none; opacity: .72; font-weight: 650; }
/*
 * --ocre como texto sobre la cabecera da 3,29:1 (falla el 4,5:1 de un enlace) y además el color
 * era la ÚNICA pista del ítem activo. Ahora el color vuelve a tinta (opacidad 1, 14,2:1) y el
 * subrayado en --ocre marca el estado sin depender del color — no reflowa el layout.
 */
.nav-principal a[aria-current="page"] {
  opacity: 1; color: var(--tinta); font-weight: 700;
  text-decoration: underline; text-decoration-color: var(--ocre);
  text-decoration-thickness: 2px; text-underline-offset: 4px;
}
.cabecera-cta { display: none; }

.nav-principal.nav-principal-abierta {
  display: block; position: absolute; top: 100%; left: 0; right: 0;
  background: #fff; padding: 18px 20px; border-top: var(--cuerpo-borde-fino) solid var(--tinta-3);
  box-shadow: 0 18px 35px rgba(15, 43, 51, .12);
}
.nav-principal.nav-principal-abierta ul { flex-direction: column; gap: 14px; }

@media (min-width: 800px) {
  .menu-boton { display: none; }
  .nav-principal { display: block; }
  .cabecera-cta { display: inline-flex; }
}

/* ---------- héroe de portada ---------- */
.heroe { background: var(--tinta); color: var(--hueso); padding: 42px 0 38px; }
.heroe-grid { display: grid; gap: 28px; }
.heroe .eyebrow { color: var(--salvia); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; font-size: .8rem; margin-bottom: 14px; }
.heroe p.lead { color: var(--tenue-hueso, #C9D6D3); font-size: 1.12rem; max-width: 56ch; margin: 18px 0 28px; }
.heroe-acciones { display: flex; flex-wrap: wrap; gap: 12px; }
.heroe .boton-borde { color: var(--hueso); }
.heroe .boton-borde:hover { background: var(--tinta-2); }
.heroe-cifras { display: none; gap: 28px; flex-wrap: wrap; margin-top: 40px; }
.heroe-cifras strong { display: block; font-size: 1.8rem; color: var(--ocre); }
.heroe-cifras span { font-size: .85rem; color: #C9D6D3; }

.heroe-portada {
  position: relative; overflow: hidden; padding: 52px 0 44px; background: #f4f7f3; color: var(--tinta);
}
.heroe-orbe { position: absolute; border-radius: 50%; pointer-events: none; filter: blur(.2px); }
.heroe-orbe-uno { width: 540px; height: 540px; right: -280px; top: -240px; border: 76px solid rgba(228, 99, 43, .09); }
.heroe-orbe-dos { width: 300px; height: 300px; left: -180px; bottom: -190px; background: rgba(121, 168, 149, .13); }
.heroe-contenido { position: relative; }
.heroe-grid-portada { display: grid; gap: 40px; align-items: center; }
.heroe-copy { min-width: 0; }
.heroe-portada .eyebrow { color: var(--ocre-sordo); margin-bottom: 12px; }
.heroe-gratis {
  display: inline-flex; align-items: center; gap: 8px; margin-bottom: 18px; padding: 7px 11px 7px 8px;
  border: 1px solid rgba(62, 102, 86, .2); border-radius: 999px; background: rgba(121, 168, 149, .16);
  color: #365f4f; font-size: .78rem; font-weight: 800;
}
.heroe-gratis span { display: grid; width: 22px; height: 22px; place-items: center; border-radius: 50%; background: var(--salvia); color: var(--tinta); }
.heroe-contenido h1 { max-width: 760px; font-size: clamp(2.45rem, 6vw, 4.6rem); letter-spacing: -.045em; line-height: .98; text-wrap: balance; }
.heroe-portada p.lead { max-width: 590px; margin: 23px 0 28px; color: #53676b; font-size: clamp(1.05rem, 1.8vw, 1.22rem); line-height: 1.55; }
/* Antes: borde traslúcido (`rgba(15,43,51,.22)`), disonante con el borde OPACO de `--cuerpo-borde`
   del resto de botones Macizo — un borde de 4px que se ve a medias no lee como un objeto físico.
   Sólido, mismo tono que el resto (`--tinta-3`, heredado de `.boton-borde`). */
.heroe-portada .boton-borde { color: var(--tinta); background: rgba(255,255,255,.6); }
.heroe-portada .boton-borde:hover { background: #fff; }
/* El halo ambiental (`box-shadow` difuso) competía con el canto físico —solo puede pintarse UNA
   sombra por elemento— y un botón no necesita las dos: el canto YA dice «esto es pulsable». */
.boton-principal-portada { min-height: 54px; padding-inline: 25px; }
/* #617579 suelto daba 4,49:1 sobre este fondo (falla el 4,5:1 por menos de una centésima). --tenue,
   el token ya pensado para texto secundario, da 4,89:1 sobre el mismo fondo. */
.heroe-microcopy { margin-top: 14px; color: var(--tenue); font-size: .76rem; }

.producto-portada {
  position: relative; min-width: 0; overflow: visible; border: var(--cuerpo-borde) solid var(--tinta);
  border-radius: 24px; background: #fff; box-shadow: 0 30px 80px rgba(15, 43, 51, .16), 0 5px 18px rgba(15,43,51,.08);
  transform: rotate(1deg);
}
.producto-barra { height: 38px; padding: 0 14px; display: flex; align-items: center; gap: 6px; border-bottom: 1px solid rgba(15,43,51,.08); }
.producto-barra span { display: block; width: 8px; height: 8px; border-radius: 50%; background: #d8ddd9; }
.producto-barra span:first-child { background: var(--ocre); }
.producto-barra span:nth-child(2) { background: #e5b753; }
.producto-barra span:nth-child(3) { background: var(--salvia); }
.producto-barra b { margin-left: auto; color: #68797c; font-size: .66rem; font-weight: 750; }
.producto-portada picture { display: block; overflow: hidden; }
.producto-portada img { width: 100%; height: 330px; object-fit: cover; object-position: top center; background: #f4f7f3; }
.producto-portada figcaption { display: grid; gap: 2px; padding: 15px 18px 18px; }
.producto-portada figcaption strong { font-size: .9rem; }
.producto-portada figcaption span { color: var(--tenue); font-size: .74rem; }
.producto-flotante {
  position: absolute; display: grid; place-items: center; width: 82px; height: 82px; border-radius: 50%;
  text-align: center; font-size: 1.18rem; line-height: .9; font-weight: 850; box-shadow: 0 12px 28px rgba(15,43,51,.2);
}
.producto-flotante small { font-size: .58rem; line-height: 1; font-weight: 700; }
/* Mismo motivo que .boton-ocre: blanco sobre --ocre no llega a 4,5:1 (el "al día" pequeño da 3,43:1). */
.producto-flotante-tiempo { top: 66px; left: -18px; background: var(--ocre-sordo); color: #fff; transform: rotate(-7deg); }
.producto-flotante-gratis { right: -14px; bottom: 64px; background: var(--tinta); color: var(--hueso); transform: rotate(5deg); }
.heroe-transparencia {
  display: grid; gap: 12px; margin-top: 42px;
}
.transparencia-item {
  display: flex; gap: 13px; align-items: flex-start; padding: 17px; color: #51676b;
  border: var(--cuerpo-borde-fino) solid var(--tinta-3); border-radius: var(--r); background: rgba(255,255,255,.72);
}
.transparencia-item strong, .transparencia-item span { display: block; }
.transparencia-item strong { margin-bottom: 3px; color: var(--tinta); font-size: .9rem; }
.transparencia-item span { font-size: .77rem; line-height: 1.45; }
.transparencia-item .transparencia-icono {
  display: grid; flex: 0 0 24px; height: 24px; place-items: center; border-radius: 50%;
  background: var(--salvia); color: var(--tinta); font-size: .75rem; font-weight: 900;
}
.transparencia-item .transparencia-icono-certificado { background: transparent; color: var(--ocre); border: var(--cuerpo-borde-fino) solid var(--ocre); }
.transparencia-modalidades { margin-top: 8px; }
.transparencia-modalidades .certificado-opcion { display: flex; flex-direction: row; align-items: baseline; gap: 8px; padding: 5px 0 0; border: 0; }
.transparencia-modalidades .precio { color: var(--tinta); font-size: .86rem; font-weight: 850; }
.transparencia-modalidades .modalidad { color: var(--tenue); font-size: .7rem; }
/* #718387 daba 3,85:1 sobre este panel (falla 4,5:1); --tenue da 5,13:1. Sube también de .66rem a
   .72rem: es un mensaje que cambia solo (aria-live, precio en consulta), no una nota al pie fija. */
.transparencia-estado { margin-top: 7px; color: var(--tenue); font-size: .72rem !important; }

/*
 * --ocre-sordo como texto aquí fallaba en sus tres fondos reales: 4,48:1 sobre hueso, 3,81:1 sobre
 * hueso-2 y 2,95:1 sobre tinta (los tres por debajo del 4,5:1 exigido). No hay ningún tono de la
 * familia ocre en el sistema que cumpla en los tres a la vez (ver comentario de generar.mjs sobre
 * por qué acento/decoración no sirve como texto). --tenue cumple sobre hueso; hace falta una
 * excepción por fondo para hueso-2 y tinta, donde --tenue tampoco llega.
 */
.eyebrow-seccion { margin-bottom: 9px; color: var(--tenue); font-size: .76rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.franja-hueso-2 .eyebrow-seccion { color: var(--tinta); }
.confianza-portada .eyebrow-seccion { color: var(--salvia); }
.como-funciona-portada h2 { max-width: 22ch; }
.pasos-portada { display: grid; gap: 12px; margin-top: 28px; }
.paso-portada { padding: 20px; border: var(--cuerpo-borde-fino) solid var(--tinta-3); border-radius: var(--r); background: var(--hueso); }
.paso-portada > span { color: var(--ocre-sordo); font: 700 .75rem/1.2 "SFMono-Regular", Consolas, monospace; }
.paso-portada h3 { margin: 10px 0 7px; }
.paso-portada p { color: var(--tenue); font-size: .9rem; }
.confianza-portada { background: var(--tinta); color: var(--hueso); }
.confianza-contenido { display: grid; gap: 22px; }
.confianza-contenido h2 { max-width: 20ch; }
.confianza-contenido > div:last-child > p { color: #C9D6D3; }
.confianza-contenido .confianza-nota { margin: 12px 0 22px; color: #9FB4B0; font-size: .82rem; }

@media (min-width: 700px) {
  .heroe { padding: 56px 0 64px; }
  .heroe-cifras { display: flex; }
  .heroe-transparencia { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
  .pasos-portada { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .confianza-contenido { grid-template-columns: minmax(0, .9fr) minmax(0, 1fr); gap: 48px; align-items: start; }
}

@media (min-width: 900px) {
  .heroe-portada { padding: 74px 0 52px; }
  .heroe-grid-portada { grid-template-columns: minmax(0, .9fr) minmax(430px, 1.1fr); gap: 58px; }
  .producto-portada img { height: 390px; }
  .heroe-transparencia { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 430px) {
  .heroe-portada { padding-top: 38px; }
  .heroe-contenido h1 { font-size: clamp(2.35rem, 12vw, 3.1rem); }
  .heroe-acciones { display: grid; }
  .heroe-acciones .boton { width: 100%; }
  .producto-portada { margin: 2px 4px 0; transform: none; border-radius: 19px; }
  .producto-portada img { height: 360px; object-position: top center; }
  .producto-flotante { width: 68px; height: 68px; font-size: 1rem; }
  .producto-flotante-tiempo { left: -8px; top: 54px; }
  .producto-flotante-gratis { right: -7px; bottom: 66px; }
}

/* ---------- secciones generales ---------- */
.franja { padding: 56px 0; }
.franja-hueso-2 { background: var(--hueso-2); }
.franja h2 { margin-bottom: 12px; }
.franja > .contenedor > p.lead { color: var(--tenue); font-size: 1.05rem; margin-bottom: 32px; }

/* ---------- rejilla de tarjetas ---------- */
.rejilla { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 620px) { .rejilla { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .rejilla { grid-template-columns: repeat(3, 1fr); } }
/* El marco de página creció con `--ancho-pagina` (arriba): a partir de aquí tres columnas de
   tarjeta empiezan a sobrar de aire a los lados. Cuarta columna, nunca un párrafo más ancho —
   mismo criterio que `.rejilla-tarjetas` de la app en su salto a `xl` (apps/web/src/estilos/
   index.css): el sobrante de escritorio se gasta en MÁS COSAS EN PARALELO. */
@media (min-width: 1300px) { .rejilla { grid-template-columns: repeat(4, 1fr); } }

/*
 * LA MISMA TARJETA QUE `TarjetaCurso` DE LA APP (apps/web/src/App.jsx): superficie papel, borde de
 * `--cuerpo-borde` en las cuatro caras, canto por `box-shadow` que se hunde al pulsar. Antes era un
 * borde de 1px que solo se coloreaba de ocre al pasar el ratón — la afordancia vivía en un cambio
 * de color que un lector de pantalla o alguien sin ratón no percibe nunca; ahora es la MISMA física
 * que el resto del producto, visible sin necesitar hover.
 */
.tarjeta {
  background: var(--hueso); border: var(--cuerpo-borde) solid var(--tinta); border-radius: var(--r);
  padding: 20px; text-decoration: none; color: var(--tinta); display: flex; flex-direction: column; gap: 10px;
  box-shadow: 0 var(--cuerpo-canto) 0 0 var(--tinta);
  transition: transform var(--duration-instante) var(--ease-paso), box-shadow var(--duration-instante) var(--ease-paso);
}
.tarjeta:hover { transform: translateY(-2px); }
.tarjeta:active { transform: translateY(var(--cuerpo-hundido)); box-shadow: 0 2px 0 0 var(--tinta); }
.tarjeta .rama-etiqueta { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--salvia-oscuro); }
/* /oposiciones/ y /oposiciones/<rama>/ no tienen un h2 entre el h1 y estas tarjetas: iban de h1 a
   h3 (nivel saltado). El título de tarjeta pasa a h2 en esas dos páginas (portada.mjs ya tiene su
   propio h2 de sección y sigue en h3). El tamaño se fija aquí para no heredar el h2 general. */
.tarjeta h2, .tarjeta h3 { flex: 1; font-size: 1.2rem; }
.tarjeta .meta { font-size: .85rem; color: var(--tenue); display: flex; gap: 10px; flex-wrap: wrap; }

.rama-tarjeta { background: var(--tinta); color: var(--hueso); }
.rama-tarjeta .meta, .rama-tarjeta p { color: #C9D6D3; }
/* --salvia-oscuro es texto oscuro pensado para tarjetas CLARAS (5,77:1 sobre hueso): sobre el
   fondo oscuro de .rama-tarjeta caía a 2,29:1. --salvia (el mismo verde, más claro) da 5,55:1. */
.rama-tarjeta .rama-etiqueta { color: var(--salvia); }

/* ---------- ficha de curso ---------- */
.curso-cabecera { background: var(--tinta); color: var(--hueso); padding: 40px 0 32px; }
.curso-cabecera .migas { font-size: .8rem; color: var(--tenue-hueso, #9FB4B0); margin-bottom: 18px; }
.curso-cabecera .migas a { text-decoration: none; }
.curso-resumen { max-width: 62ch; color: var(--tenue-hueso, #C9D6D3); font-size: .98rem; line-height: 1.55; margin-top: -8px; }
.curso-datos { display: flex; gap: 22px; flex-wrap: wrap; margin: 20px 0 26px; font-size: .95rem; }
.curso-datos b { color: var(--ocre); }

.temario-modulo { border-top: 1px solid var(--hueso-2); padding: 22px 0; }
.temario-modulo h3 { margin-bottom: 12px; }
.temario-modulo-resumen { color: var(--tenue); font-size: .92rem; margin: -6px 0 14px; max-width: 62ch; }
.temario-lista li { padding: 8px 0 8px 26px; position: relative; border-bottom: 1px dashed var(--hueso-2); }
.temario-lista li:last-child { border-bottom: none; }
.temario-lista li::before { content: "—"; position: absolute; left: 0; color: var(--salvia); }

.compra-panel {
  background: var(--hueso); border: var(--cuerpo-borde) solid var(--tinta); border-radius: var(--r);
  padding: 22px; display: flex; flex-direction: column; gap: 14px; position: sticky; top: 90px;
}
.compra-panel .precio { font-size: 1.6rem; font-weight: 700; }
.compra-panel .modalidad { font-size: .85rem; color: var(--tenue); }
.compra-panel hr { width: 100%; border: 0; border-top: 1px solid var(--hueso-2); margin: 4px 0; }
.certificado-opcion { display: flex; flex-direction: column; gap: 9px; padding-top: 4px; }
.certificado-opcion + .certificado-opcion { border-top: 1px solid var(--hueso-2); padding-top: 14px; }

.curso-layout { display: grid; gap: 28px; }
@media (min-width: 860px) {
  .curso-layout { grid-template-columns: 1fr 300px; align-items: start; }
}

/* ---------- por qué puntúa / legal ---------- */
.articulo { max-width: var(--ancho-lectura); }
.articulo h2 { margin: 32px 0 12px; }
.articulo p, .articulo li { margin-bottom: 14px; color: var(--tinta); }
.articulo li { margin-left: 22px; list-style: disc; }
.nota-legal {
  border-left: var(--cuerpo-borde) solid var(--ocre); background: var(--hueso-2); padding: 16px 18px; border-radius: 0 var(--r) var(--r) 0;
  font-size: .92rem; margin: 20px 0;
}
/* Marca los huecos de las páginas legales, así que se lee de verdad y sobre su propio fondo claro:
   `--ocre-sordo` sobre #FCEFE7 da 4,47:1, tres centésimas por debajo del mínimo de WCAG para texto.
   No es una sutileza: quien no lo lee no se entera de que ese dato legal falta. */
.pendiente { background: #FCEFE7; color: #B04A1E; padding: 1px 6px; border-radius: 4px; font-weight: 600; }
/* Un hueco pendiente NO puede partirse a mitad entre dos líneas: leído como "[PENDIENTE:" arriba y
   "razón social]" abajo deja de verse como una sola marca. A 390 px pasa constantemente. */
.pendiente { display: inline-block; }

/* Encabeza una página legal a la que le faltan datos del titular. Es el hermano ruidoso de
   `.nota-legal`: borde en las cuatro caras y `--cuerpo-borde`, porque no avisa de un matiz del
   contenido sino de que la página todavía no está completa. Desaparece solo (ver `lib/titular.mjs`). */
.aviso-incompleto {
  margin: 24px 0 32px; padding: 18px 20px; background: #FCEFE7;
  border: var(--cuerpo-borde) solid var(--ocre-sordo); border-radius: var(--r);
}
.aviso-incompleto-titulo { font-size: 1.05rem; margin-bottom: 8px; color: #8F3A15; }
.aviso-incompleto p { font-size: .92rem; margin-bottom: 10px; }
.aviso-incompleto p:last-child { margin-bottom: 0; }

/* ---------- tablas de las páginas legales ---------- */
/*
 * LA PÁGINA NO SE DESPLAZA EN HORIZONTAL; LA TABLA SÍ, DENTRO DE SU CAJA. Cinco columnas no caben
 * en 390 px y estrujarlas hasta que quepan deja columnas de 70 px donde no se lee nada. La caja
 * es además `focusable` desde el marcado (`tabindex="0"` + `role="region"` en `lib/tablaLegal.mjs`),
 * porque un contenedor que solo se desplaza con el dedo o con la rueda del ratón deja fuera a
 * quien navega con teclado (WCAG 2.1.1).
 *
 * `--ancho-lectura` (68ch) manda sobre la prosa y NO sobre las tablas: 68ch es la medida de una
 * línea de texto cómoda, no la de una tabla de cinco columnas. Por eso se sale de `.articulo`
 * hasta el ancho disponible en cuanto hay sitio.
 */
.tabla-scroll {
  overflow-x: auto; margin: 20px 0 28px;
  border: var(--cuerpo-borde-fino) solid var(--tinta-3); border-radius: var(--r); background: #fff;
  /* Sin esto el borde de foco del envoltorio queda pegado al borde de la caja y no se distingue. */
  outline-offset: 2px;
}
@media (min-width: 900px) {
  .tabla-scroll { width: min(100%, 980px); max-width: none; }
}
.tabla-legal { width: 100%; border-collapse: collapse; font-size: .88rem; min-width: 560px; }
.tabla-legal caption {
  text-align: left; padding: 14px 16px; font-weight: 800; font-size: .95rem; color: var(--tinta);
  border-bottom: var(--cuerpo-borde-fino) solid var(--tinta-3); background: var(--hueso-2);
}
.tabla-legal th, .tabla-legal td {
  padding: 11px 14px; text-align: left; vertical-align: top; line-height: 1.45;
  border-bottom: 1px solid var(--hueso-2);
}
.tabla-legal thead th { font-weight: 800; font-size: .78rem; letter-spacing: .04em; text-transform: uppercase; color: var(--tinta); }
/* La columna clave (nombre de la cookie) va en monoespaciada: son literales que alguien va a
   comparar carácter a carácter con lo que ve en su navegador. */
/*
 * LA COLUMNA DEL NOMBRE SE QUEDA QUIETA al desplazar la tabla. Sin esto, en un móvil llegas a la
 * columna «Cuánto dura» y ya no ves de qué cookie estabas leyendo: la fila se convierte en cuatro
 * datos huérfanos. Necesita fondo propio y opaco, porque lo que pasa por debajo se vería.
 */
.tabla-legal tbody th {
  font-weight: 800; font-size: .84rem;
  white-space: normal; overflow-wrap: anywhere; min-width: 140px;
  position: sticky; left: 0; z-index: 1; background: #fff;
  box-shadow: inset -1px 0 0 var(--hueso-2);
}
/* Solo donde la primera columna son literales exactos (`baremo_at`), no donde es prosa. */
.tabla-legal-literal tbody th {
  font: 700 .82rem/1.4 "SFMono-Regular", Consolas, "Liberation Mono", monospace;
}
.tabla-legal tbody tr:last-child th, .tabla-legal tbody tr:last-child td { border-bottom: 0; }
.tabla-legal tbody tr:nth-child(even) { background: #FCFAF6; }
.tabla-legal tbody tr:nth-child(even) th { background: #FCFAF6; }
/* `#fff`, el mismo fondo de `.tabla-scroll`: la cabecera no tiene color propio y una celda fija
   con otro tono se leería como una columna aparte. */
.tabla-legal thead th:first-child {
  position: sticky; left: 0; z-index: 2; background: #fff;
  box-shadow: inset -1px 0 0 var(--hueso-2);
}
/* Ni `.articulo li` ni su viñeta tienen nada que hacer dentro de una celda. */
.tabla-legal li { margin-left: 0; margin-bottom: 0; list-style: none; }

.dato-tecnico { font: 600 .92em/1.4 "SFMono-Regular", Consolas, "Liberation Mono", monospace; overflow-wrap: anywhere; }

/* ---------- verificación de certificado ---------- */
#form-verificar-certificado {
  display: flex; flex-wrap: wrap; gap: 12px; align-items: end; margin: 24px 0; max-width: var(--ancho-lectura);
}
#form-verificar-certificado label { display: block; font-weight: 600; font-size: .9rem; margin-bottom: 6px; }
#form-verificar-certificado input {
  flex: 1 1 260px; padding: 12px 14px; border-radius: var(--r); border: 1px solid var(--tinta-3);
  font-size: 1rem; background: #fff; color: var(--tinta);
}
#form-verificar-certificado input:focus { outline: 2px solid var(--ocre); outline-offset: 1px; }
.verificacion-resultado { max-width: var(--ancho-lectura); margin-top: 8px; padding: 16px 18px; border-radius: var(--r); }
.verificacion-resultado ul { margin-top: 8px; }
.verificacion-resultado li { margin-left: 20px; list-style: disc; }
.verificacion-ok { background: #EAF3EF; border-left: var(--cuerpo-borde) solid var(--salvia); }
.verificacion-error { background: #FCEFE7; border-left: var(--cuerpo-borde) solid var(--ocre-sordo); }

/* ---------- pie ---------- */
.pie { border-top: var(--cuerpo-borde-fino) solid var(--tinta-3); padding: 28px 0 40px; margin-top: 24px; }
.pie-fila { display: flex; flex-direction: column; gap: 14px; font-size: .85rem; color: var(--tenue); }
.pie nav ul { display: flex; gap: 16px; flex-wrap: wrap; }
.pie nav a { text-decoration: none; }
.pie nav a:hover { color: var(--ocre); }
@media (min-width: 700px) {
  .pie-fila { flex-direction: row; justify-content: space-between; align-items: center; }
}

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