/*
Theme Name: Ticos
Theme URI: https://costarricenses.cr/
Description: Tema propio de costarricenses.cr — «Donde aprenden los Ticos». Escrito para dos cosas y nada mas: que Google entienda lo que hay aqui y que un estudiante pueda estudiarlo. Sin framework, sin jQuery, sin librerias de terceros. Rumbo grafico «Siete Estrellas»: las siete estrellas del escudo son las siete provincias.
Author: iNTELIGENCIA VIVA
Author URI: https://inteligenciaviva.com/
Version: 1.0.0
Requires at least: 6.5
Tested up to: 7.1
Requires PHP: 8.0
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: ticos
Tags: education, blog, custom-menu, featured-images, translation-ready, accessibility-ready
*/

/* ==========================================================================
   00 · TOKENS
   Los de color y tipografia los sirve theme.json como variables
   --wp--preset--*; aqui solo viven los que theme.json no modela.
   ========================================================================== */
:root{
  --tinta:var(--wp--preset--color--tinta,#211711);
  --tierra:var(--wp--preset--color--tierra,#6B4526);
  --oro:var(--wp--preset--color--oro,#C08A2E);
  --crema:var(--wp--preset--color--crema,#FAF5EA);
  --papel:var(--wp--preset--color--papel,#FFFFFF);
  --suave:var(--wp--preset--color--suave,#F3EADA);
  --linea:var(--wp--preset--color--linea,#E3D8C6);
  --apagado:var(--wp--preset--color--apagado,#6E5C4E);
  --azul:var(--wp--preset--color--azul,#002B7F);
  --rojo:var(--wp--preset--color--rojo,#CE1126);

  --display:var(--wp--preset--font-family--display,Georgia,serif);
  --texto:var(--wp--preset--font-family--texto,system-ui,sans-serif);
  --mono:var(--wp--preset--font-family--mono,monospace);

  --ancho:1180px;
  --canal:24px;
  --radio:2px;
  --sombra:0 1px 2px rgba(33,23,17,.04), 0 20px 44px -32px rgba(33,23,17,.5);

  /* La bandera tica es 1:1:2:1:1. Vive aqui una sola vez: cada sitio que la
     usa la toma de esta variable, asi no hay dos versiones que diverjan. */
  --bandera:linear-gradient(90deg,
    var(--azul) 0 16.667%, #fff 16.667% 33.333%,
    var(--rojo) 33.333% 66.667%, #fff 66.667% 83.333%,
    var(--azul) 83.333%);
  /* 🔴 Sobre crema las dos bandas BLANCAS desaparecen y la franja se lee como
     tres rayas sueltas. El filete no es adorno: es lo que la hace bandera. */
  --filete:0 0 0 1px rgba(33,23,17,.22);
}

/* ==========================================================================
   01 · BASE
   ========================================================================== */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:90px}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}
body{margin:0;background:var(--crema);color:var(--tinta);
  font-family:var(--texto);line-height:1.7;-webkit-font-smoothing:antialiased}
img,svg,video{max-width:100%;height:auto}
a{color:var(--tierra)}
a:hover{color:var(--rojo)}
:focus-visible{outline:2px solid var(--azul);outline-offset:3px;border-radius:2px}
h1,h2,h3,h4,h5,h6{font-family:var(--display);font-weight:600;line-height:1.15;
  letter-spacing:-.015em;margin:0;text-wrap:balance}

/* 🔴 theme.json pinta TODOS los encabezados con `--tinta`, que es el cafe
   oscuro del texto. Sobre las tres zonas oscuras del tema eso deja el titulo
   del mismo color que el fondo: INVISIBLE, sin error y sin que nada falle.
   Paso en produccion el 31-ago: el `<h1>` de la portada estaba en el HTML y no
   se veia. La regla de theme.json es `:root :where(h1,...)`, de especificidad
   (0,1,0); esta es (0,2,0) y gana en las dos direcciones. */
:is(.portada,.encabezado-archivo,.pie) :is(h1,h2,h3,h4,h5,h6){color:inherit}

.env{max-width:var(--ancho);margin-inline:auto;padding-inline:var(--canal)}
.env--angosto{max-width:820px}

/* solo para lectores de pantalla */
.solo-lectores{position:absolute!important;width:1px;height:1px;overflow:hidden;
  clip:rect(1px,1px,1px,1px);white-space:nowrap}
.saltar{position:absolute;left:-9999px}
.saltar:focus{position:fixed;left:12px;top:12px;z-index:99;background:var(--tinta);
  color:var(--crema);padding:12px 20px;border-radius:2px;text-decoration:none}

/* La bandera, siempre contenida. 🔴 A ancho completo NO se lee como bandera:
   a 1440px cada banda mide 240px y el ojo ve lineas, no un objeto. */
.bandera{display:block;width:104px;height:8px;background:var(--bandera);box-shadow:var(--filete)}
.bandera--linea{width:92px;margin-top:16px}
.bandera--menuda{width:52px;height:6px;display:inline-block;vertical-align:middle}

.estrella{display:inline-block;width:1em;height:1em;background:currentColor;
  clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%)}

/* ==========================================================================
   02 · CABECERA
   ========================================================================== */
.cabecera{background:var(--tinta);color:#F6EEE0;position:relative;z-index:20}
.cabecera__fila{display:flex;align-items:center;gap:28px;padding-block:18px}
.marca{text-decoration:none;color:inherit;display:flex;flex-direction:column;gap:2px;flex:0 0 auto}
.marca:hover{color:inherit}
.marca__nombre{font-family:var(--display);font-weight:600;font-size:22px;letter-spacing:.03em}
.marca__cr{color:var(--rojo)}
.marca__lema{font-size:11px;letter-spacing:.16em;text-transform:uppercase;opacity:.68}
.marca .bandera{margin-top:9px}

.navegacion{margin-left:auto}
.navegacion ul{list-style:none;display:flex;gap:4px;margin:0;padding:0;flex-wrap:wrap}
.navegacion li{position:relative}
.navegacion a{display:block;text-decoration:none;color:inherit;font-size:14.5px;font-weight:600;
  padding:9px 13px;border-radius:99px;opacity:.9}
.navegacion a:hover,.navegacion a:focus-visible{background:rgba(255,255,255,.1);opacity:1;color:inherit}
.navegacion .current-menu-item>a,.navegacion .current-menu-ancestor>a{background:rgba(255,255,255,.14);opacity:1}
/* submenus: se abren al pasar y tambien al enfocar con teclado */
.navegacion .sub-menu{display:none;position:absolute;left:0;top:100%;min-width:230px;
  background:var(--papel);border:1px solid var(--linea);border-radius:2px;
  box-shadow:0 18px 44px -22px rgba(33,23,17,.55);padding:8px;flex-direction:column;gap:0;z-index:30}
.navegacion li:hover>.sub-menu,.navegacion li:focus-within>.sub-menu{display:flex}
.navegacion .sub-menu a{color:var(--tinta);border-radius:2px;font-weight:500;padding:8px 12px}
.navegacion .sub-menu a:hover{background:var(--suave);color:var(--tierra)}
.navegacion .sub-menu .sub-menu{position:static;border:0;box-shadow:none;padding:0 0 0 12px;
  border-left:1px solid var(--linea);margin:2px 0 6px}
.menu-item-has-children>a::after{content:"";display:inline-block;width:.42em;height:.42em;
  margin-left:.5em;border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:translateY(-2px) rotate(45deg)}
.sub-menu .menu-item-has-children>a::after{display:none}

.buscador{display:flex}
.buscador input[type=search]{border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.07);
  color:inherit;font:inherit;font-size:14px;padding:9px 14px;width:180px;border-radius:2px 0 0 2px;outline:0}
.buscador input::placeholder{color:currentColor;opacity:.55}
.buscador button{border:0;background:var(--tierra);color:#FBF6EC;font:inherit;font-weight:700;
  font-size:14px;padding:9px 16px;border-radius:0 2px 2px 0;cursor:pointer}
.buscador button:hover{background:var(--rojo)}

.abrir-menu{display:none;background:transparent;border:1px solid rgba(255,255,255,.28);
  color:inherit;border-radius:2px;padding:8px 14px;font:inherit;font-size:14px;font-weight:600;cursor:pointer}

/* ==========================================================================
   03 · PORTADA
   ========================================================================== */
.portada{background:var(--tinta);color:#F8F2E6;text-align:center;
  padding-block:200px 96px;position:relative;overflow:hidden}
.portada__estrellas{position:absolute;left:50%;top:44px;transform:translateX(-50%);
  width:min(460px,80vw);color:#E5C173;opacity:.55;pointer-events:none}
.portada__cuerpo{position:relative;z-index:2;max-width:820px;margin-inline:auto}
.portada__ante{margin:0 0 16px;font-size:12.5px;letter-spacing:.18em;text-transform:uppercase;
  font-weight:700;color:#D8A96A}
.portada__titulo{font-size:clamp(44px,6.6vw,76px);margin-bottom:18px}
.portada__bajada{font-size:19px;opacity:.88;margin:0 auto 30px;max-width:60ch}
.portada__acciones{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
.portada__cifras{list-style:none;display:flex;gap:46px;justify-content:center;flex-wrap:wrap;
  padding:0;margin:40px 0 0}
.portada__cifras b{display:block;font-family:var(--display);font-size:34px;line-height:1;
  color:#E5C173;font-variant-numeric:tabular-nums}
.portada__cifras span{font-size:12px;letter-spacing:.12em;text-transform:uppercase;opacity:.7}

.boton{display:inline-block;text-decoration:none;font-weight:700;font-size:15.5px;
  padding:13px 26px;border-radius:var(--radio)}
.boton--principal{background:var(--tierra);color:#FBF6EC}
.boton--principal:hover{background:var(--rojo);color:#FBF6EC}
.boton--secundario{background:transparent;color:inherit;box-shadow:inset 0 0 0 2px currentColor}
.boton--secundario:hover{color:inherit;background:rgba(255,255,255,.08)}

/* ==========================================================================
   04 · SECCIONES Y REJILLA DE FICHAS
   ========================================================================== */
.seccion{padding-block:92px}
.seccion--suave{background:var(--suave)}
.seccion__cabeza{display:flex;align-items:flex-end;justify-content:space-between;gap:22px;
  margin-bottom:32px;flex-wrap:wrap}
.seccion__titulo{font-size:clamp(30px,3.6vw,44px)}
.seccion__enlace{text-decoration:none;font-weight:700;font-size:14.5px;white-space:nowrap}

.rejilla{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px;
  list-style:none;margin:0;padding:0}
.rejilla--dos{grid-template-columns:repeat(2,minmax(0,1fr))}

.ficha{background:var(--papel);border:1px solid var(--linea);border-radius:var(--radio);
  box-shadow:var(--sombra);display:flex;flex-direction:column;overflow:hidden}
.ficha__imagen{display:block;aspect-ratio:16/10;overflow:hidden;background:var(--suave)}
.ficha__imagen img{width:100%;height:100%;object-fit:cover;display:block}
.ficha__cuerpo{padding:24px;display:flex;flex-direction:column;gap:11px;flex:1}
.ficha__meta{display:flex;align-items:center;justify-content:space-between;gap:12px}
.marbete{font-size:10.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  padding:5px 12px;border-radius:99px;background:var(--suave);color:var(--tierra);text-decoration:none}
a.marbete:hover{background:var(--tierra);color:#FBF6EC}
.vistas{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;font-weight:600;
  color:var(--apagado);font-variant-numeric:tabular-nums}
.vistas svg{width:15px;height:15px}
.ficha__titulo{font-size:26px}
.ficha__titulo a{text-decoration:none;color:inherit}
.ficha__titulo a:hover{color:var(--tierra)}
.ficha__resumen{margin:0;font-size:15.5px;color:var(--apagado);flex:1}
.ficha__mas{text-decoration:none;font-weight:700;font-size:14.5px;align-self:flex-start}

/* ==========================================================================
   05 · LISTA DE TEMARIOS
   ========================================================================== */
.temarios{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.temario{display:grid;grid-template-columns:18px 200px 1fr;gap:20px;align-items:center;
  background:var(--papel);border:1px solid var(--linea);border-radius:var(--radio);padding:20px 24px}
.temario__estrella{color:var(--azul);width:15px;height:15px}
.temario__nivel{font-family:var(--display);font-size:25px;font-weight:600}
.temario__nivel a{text-decoration:none;color:inherit}
.temario__nivel a:hover{color:var(--tierra)}
.temario__ciclo{display:block;font-family:var(--texto);font-size:12px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--apagado);margin-top:3px}
.temario__materias{margin:0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:6px 10px;font-size:15px}
.temario__materias a{text-decoration:none}

/* ==========================================================================
   06 · LECCION
   ========================================================================== */
.leccion{display:grid;grid-template-columns:230px minmax(0,1fr) 200px;gap:40px;align-items:start;
  padding-block:56px}
.leccion--sin-lados{grid-template-columns:minmax(0,1fr);max-width:820px;margin-inline:auto}
.leccion--sin-patrocinio{grid-template-columns:230px minmax(0,1fr);max-width:1000px;margin-inline:auto}
.leccion--sin-indice{grid-template-columns:minmax(0,1fr) 200px}

.migas{font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;font-weight:700;
  color:var(--apagado);margin:0 0 16px}
.migas ol{list-style:none;margin:0;padding:0;display:inline}
.migas li{display:inline}
.migas a{text-decoration:none}
.migas .bandera--menuda{margin-left:12px;box-shadow:var(--filete)}

.entrada{background:var(--papel);border:1px solid var(--linea);border-radius:var(--radio);
  padding:52px;box-shadow:var(--sombra)}
.entrada__titulo{font-size:clamp(38px,4.6vw,56px);margin-bottom:14px}
.entrada__firma{font-size:13.5px;color:var(--apagado);margin:0 0 26px;padding-bottom:20px;
  border-bottom:1px solid var(--linea);display:flex;flex-wrap:wrap;gap:6px 16px;align-items:center}
.entrada__contenido>*:first-child{margin-top:0}
.entrada__contenido h2{font-size:clamp(28px,3.2vw,38px);margin:44px 0 14px;scroll-margin-top:96px}
.entrada__contenido h3{font-size:clamp(23px,2.4vw,28px);margin:34px 0 12px;scroll-margin-top:96px}
.entrada__contenido p{margin:0 0 18px}
.entrada__contenido ul,.entrada__contenido ol{margin:0 0 22px;padding-left:26px}
.entrada__contenido li{margin-bottom:9px}
.entrada__contenido figure{margin:32px 0}
.entrada__contenido figcaption{font-size:14px;color:var(--apagado);text-align:center;margin-top:10px}
.entrada__contenido table{width:100%;border-collapse:collapse;font-size:15.5px}
.entrada__contenido th,.entrada__contenido td{border:1px solid var(--linea);padding:10px 12px;text-align:left}
.entrada__contenido th{background:var(--suave)}
.tabla-envuelta{overflow-x:auto;margin:0 0 24px}

/* enlace de ancla junto a cada encabezado, para compartir una seccion */
.ancla{text-decoration:none;color:var(--linea);margin-left:.35em;font-size:.6em;
  opacity:0;transition:opacity .15s}
h2:hover>.ancla,h3:hover>.ancla,.ancla:focus-visible{opacity:1}

.etiquetas{margin-top:36px;padding-top:24px;border-top:1px solid var(--linea);
  display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.etiquetas__rot{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;
  font-weight:800;color:var(--apagado);margin-right:4px}

/* paso anterior / siguiente DENTRO del temario, no por fecha */
.recorrido{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:32px}
.recorrido__paso{border:1px solid var(--linea);border-radius:var(--radio);padding:18px 22px;
  text-decoration:none;background:var(--papel);display:block}
.recorrido__paso:hover{border-color:var(--tierra)}
.recorrido__paso--sig{text-align:right;grid-column:2}
.recorrido__rot{display:block;font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  font-weight:800;color:var(--apagado);margin-bottom:6px}
.recorrido__tit{font-family:var(--display);font-size:20px;font-weight:600;color:var(--tinta);display:block}

/* ==========================================================================
   07 · TABLA DE CONTENIDOS Y PATROCINIO
   ========================================================================== */
.contenidos{position:sticky;top:24px;font-size:14.5px}
.contenidos__titulo{font-family:var(--texto);font-size:11.5px;letter-spacing:.14em;
  text-transform:uppercase;font-weight:800;color:var(--apagado);margin:0 0 12px}
.contenidos ol{list-style:none;margin:0;padding:0;display:grid;gap:2px;counter-reset:c}
.contenidos li.nivel-3{padding-left:14px;font-size:13.5px}
.contenidos a{display:block;text-decoration:none;color:var(--apagado);padding:7px 12px;
  border-left:3px solid transparent;border-radius:0 2px 2px 0}
.contenidos a:hover{background:var(--suave);color:var(--tinta)}
.contenidos a[aria-current=true]{border-left-color:var(--tierra);color:var(--tierra);
  font-weight:700;background:var(--suave)}
.progreso{height:8px;background:var(--linea);margin-top:18px;box-shadow:var(--filete);overflow:hidden}
.progreso__barra{display:block;height:100%;width:0;background:var(--bandera)}
.progreso__pie{font-size:12px;color:var(--apagado);margin:8px 0 0;font-variant-numeric:tabular-nums}

.patrocinio{position:sticky;top:24px}
.patrocinio__titulo{font-size:11.5px;line-height:1.45;font-weight:700;color:var(--apagado);margin:0 0 14px}

/* ==========================================================================
   08 · CAJAS DE ESTUDIO (patrones del tema)
   ========================================================================== */
.caja{border-radius:var(--radio);padding:20px 24px;margin:0 0 24px;
  border-left:5px solid var(--tierra);background:var(--suave)}
.caja>*:last-child{margin-bottom:0}
.caja__rotulo{font-size:11.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--tierra);margin:0 0 10px}
.caja--def{border-left-color:var(--verde,#2E6B4F);background:#EEF4F0}
.caja--def .caja__rotulo{color:var(--verde,#2E6B4F)}
.caja__nota{font-size:14.5px;color:var(--apagado);margin-top:10px}
.caja--formula{border-left-color:var(--oro);background:#FBF3E1}
.caja--formula .caja__rotulo{color:#7C5410}
.caja--formula p{font-family:var(--mono);font-size:21px}
.caja--prueba{border-left-color:var(--azul);background:#EDF0F7}
.caja--prueba .caja__rotulo{color:var(--azul)}
.caja--prueba summary{cursor:pointer;font-weight:700;color:var(--azul);margin-top:8px}
.caja--prueba summary:hover{color:var(--rojo)}

/* ==========================================================================
   09 · ARCHIVO, BUSQUEDA, PAGINACION, 404
   ========================================================================== */
.encabezado-archivo{background:var(--tinta);color:#F8F2E6;padding-block:64px 56px;text-align:center}
.encabezado-archivo h1{font-size:clamp(36px,4.6vw,56px);margin-bottom:12px}
.encabezado-archivo .bandera{margin:18px auto 0}
.encabezado-archivo__descripcion{max-width:60ch;margin:14px auto 0;opacity:.86}
.encabezado-archivo__cuenta{font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;
  color:#D8A96A;font-weight:700;margin:0 0 14px}

.paginacion{margin-top:52px;display:flex;justify-content:center}
.paginacion .nav-links{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.paginacion .page-numbers{display:grid;place-items:center;min-width:44px;height:44px;padding:0 12px;
  border:1px solid var(--linea);background:var(--papel);text-decoration:none;
  border-radius:var(--radio);font-weight:600;font-variant-numeric:tabular-nums}
.paginacion .page-numbers:hover{border-color:var(--tierra)}
.paginacion .page-numbers.current{background:var(--tinta);color:var(--crema);border-color:var(--tinta)}
.paginacion .dots{border:0;background:transparent}

.vacio{text-align:center;padding-block:80px}
.vacio h1{font-size:clamp(34px,4.4vw,52px);margin-bottom:14px}
.vacio p{color:var(--apagado);max-width:56ch;margin:0 auto 28px}
.vacio .buscador{justify-content:center;max-width:420px;margin:0 auto 40px}
.vacio .buscador input[type=search]{border-color:var(--linea);background:var(--papel);
  color:var(--tinta);width:100%}
.vacio .buscador input::placeholder{color:var(--apagado);opacity:1}

/* ==========================================================================
   10 · PIE
   ========================================================================== */

/* ==========================================================================
   11 · ADAPTACION
   ========================================================================== */
@media(max-width:1080px){
  .leccion{grid-template-columns:minmax(0,1fr)}
  .contenidos,.patrocinio{position:static}
  .contenidos{background:var(--papel);border:1px solid var(--linea);padding:20px 18px;
    border-radius:var(--radio)}
  .rejilla{grid-template-columns:repeat(2,minmax(0,1fr))}
  .temario{grid-template-columns:18px 1fr}
  .temario__materias{grid-column:2}
}
@media(max-width:760px){
  :root{--canal:18px}
  .rejilla,.rejilla--dos{grid-template-columns:minmax(0,1fr)}
  .recorrido{grid-template-columns:1fr}
  .recorrido__paso--sig{grid-column:1;text-align:left}
  .entrada{padding:28px 22px}
  .portada{padding-block:150px 66px}
  .portada__cifras{gap:28px}
  .seccion{padding-block:56px}
  .abrir-menu{display:block;margin-left:auto}
  .cabecera__fila{flex-wrap:wrap}
  .navegacion{flex-basis:100%;margin-left:0;display:none}
  .navegacion.abierta{display:block}
  .navegacion ul{flex-direction:column;gap:0}
  .navegacion .sub-menu{display:flex;position:static;background:transparent;border:0;
    box-shadow:none;padding:0 0 0 14px;border-left:1px solid rgba(255,255,255,.18);margin:0 0 6px}
  .navegacion .sub-menu a{color:inherit}
  .navegacion .sub-menu a:hover{background:rgba(255,255,255,.1);color:inherit}
  .menu-item-has-children>a::after{float:right;margin-top:.45em}
  .buscador{flex-basis:100%}
  .buscador input[type=search]{flex:1;width:auto}
}

/* ==========================================================================
   13 · PIE, ENLACES INTERNOS Y FIRMA
   El pie ya no es un cierre: es la segunda puerta del sitio. Ver footer.php.
   ========================================================================== */

/* ── Vuelta al temario, desde una leccion ───────────────────────────────── */
.vuelta-temario{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px;
  text-decoration:none;background:var(--suave);border-left:4px solid var(--tierra);
  border-radius:0 var(--radio) var(--radio) 0;padding:14px 20px;margin:0 0 24px}
.vuelta-temario:hover{background:#EFE4D2;color:inherit}
.vuelta-temario__rot{font-size:11px;font-weight:800;letter-spacing:.14em;
  text-transform:uppercase;color:var(--apagado)}
.vuelta-temario__tit{font-family:var(--display);font-size:20px;font-weight:600;color:var(--tierra)}
.vuelta-temario__pos{font-size:12.5px;color:var(--apagado);font-variant-numeric:tabular-nums;
  margin-left:auto;white-space:nowrap}

/* ── Indice de lecciones de un temario ──────────────────────────────────── */
.indice-temario__lista{list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;
  background:var(--linea);border:1px solid var(--linea);border-radius:var(--radio);overflow:hidden}
.indice-temario__paso{display:flex;align-items:baseline;gap:14px;
  background:var(--papel);padding:14px 20px}
.indice-temario__paso:hover{background:var(--suave)}
.indice-temario__n{font-family:var(--mono);font-size:12px;color:var(--apagado);
  font-variant-numeric:tabular-nums;min-width:2.4ch;text-align:right;flex:0 0 auto}
.indice-temario__enlace{flex:1;text-decoration:none;color:var(--tinta);font-size:16px;line-height:1.4}
.indice-temario__enlace:hover{color:var(--tierra)}
.indice-temario__paso .vistas{flex:0 0 auto;font-size:12px}

/* ── Lecciones relacionadas ─────────────────────────────────────────────── */
.relacionadas{padding-top:8px}

/* ── El pie ─────────────────────────────────────────────────────────────── */
.pie{background:var(--tinta);color:#F0E6D6;padding-block:64px 40px;margin-top:0}
.pie__rejilla{display:grid;grid-template-columns:1fr 2.05fr 1.5fr .85fr;gap:38px}
.pie__marca .marca__nombre{font-family:var(--display);font-weight:600;font-size:22px;
  letter-spacing:.03em;margin:0}
.pie__nota{margin:16px 0 0;font-size:14px;line-height:1.6;opacity:.6;max-width:34ch}

.pie__titulo{font-family:var(--texto);font-size:11.5px;font-weight:800;letter-spacing:.15em;
  text-transform:uppercase;color:#D8A96A;margin:0 0 16px}
.pie__bloque ul,.pie__bloque ol{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.pie__bloque a{color:inherit;text-decoration:none;font-size:14.5px;line-height:1.45;opacity:.86}
.pie__bloque a:hover{opacity:1;color:#E5C173}
.pie__nivel{display:block;font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  opacity:.5;margin-top:1px}

.pie__nivelgrupo{margin-bottom:16px}
.pie__nivelgrupo:last-child{margin-bottom:0}
.pie__nivelnom{margin:0 0 5px;font-size:11px;font-weight:800;letter-spacing:.14em;
  text-transform:uppercase;opacity:.45}
.pie__nivelnom span{font-weight:400;letter-spacing:.06em;opacity:.7}
.pie__nivelnom span::before{content:" · "}
.pie__materias{display:flex!important;flex-wrap:wrap;gap:4px 0;margin:0;padding:0;list-style:none}
/* El separador va DETRAS del elemento, no delante: si va delante y la lista
   salta de linea, la linea nueva empieza con un punto suelto. */
.pie__materias li:not(:last-child)::after{content:"·";opacity:.35;margin:0 9px}
.pie__materias li{display:inline-flex;align-items:baseline}

.pie__tops{counter-reset:t}
.pie__tops li{counter-increment:t;display:grid;grid-template-columns:1.6ch 1fr auto;
  gap:10px;align-items:baseline}
.pie__tops li::before{content:counter(t);font-family:var(--mono);font-size:11px;
  color:#D8A96A;opacity:.7}
.pie__vistas{font-size:11.5px;opacity:.45;font-variant-numeric:tabular-nums;white-space:nowrap}

.pie__extra{list-style:none;margin:18px 0 0;padding:18px 0 0;display:grid;gap:9px;
  border-top:1px solid rgba(255,255,255,.12)}
.pie__extra a{color:inherit;text-decoration:none;font-size:14.5px;opacity:.86}
.pie__extra a:hover{opacity:1;color:#E5C173}

.pie__cierre{margin-top:48px;padding-top:24px;border-top:1px solid rgba(255,255,255,.12);
  display:flex;justify-content:space-between;align-items:center;gap:20px 32px;flex-wrap:wrap}
.pie__legal{margin:0;font-size:13px;opacity:.5}

/* ── La firma: la academia y el dogma ───────────────────────────────────── */
.dogma{margin:0;display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;
  font-size:13.5px;color:rgba(240,230,214,.55)}
.dogma__frase{font-family:var(--display);font-size:16px;font-style:italic}
.dogma__marca{display:inline-flex;align-items:baseline;text-decoration:none;
  font-family:var(--texto);font-weight:800;font-size:13px;letter-spacing:.04em;
  color:#F0E6D6;padding:5px 12px;border:1px solid rgba(240,230,214,.3);border-radius:99px;
  transition:border-color .18s,color .18s}
.dogma__marca:hover{color:#E5C173;border-color:#E5C173}
.dogma__i{color:var(--rojo);font-size:1.15em;line-height:1;margin-right:.5px}

@media(max-width:1080px){
  .pie__rejilla{grid-template-columns:1fr 1fr;gap:36px}
  .pie__bloque--ancho{grid-column:span 2}
    .indice-temario__lista{grid-template-columns:minmax(0,1fr)}
}
@media(max-width:760px){
  .pie__rejilla{grid-template-columns:minmax(0,1fr);gap:32px}
  .pie__bloque--ancho{grid-column:span 1}
  .pie__cierre{flex-direction:column;align-items:flex-start}
  .dogma{font-size:12.5px}
  .vuelta-temario__pos{margin-left:0;flex-basis:100%}
}

@media print{
  .vuelta-temario,.relacionadas,.indice-temario{display:none!important}
}

/* ==========================================================================
   12 · IMPRESION — un temario se imprime para estudiarlo
   ========================================================================== */
@media print{
  .cabecera,.pie,.patrocinio,.contenidos,.recorrido,.paginacion,.saltar{display:none!important}
  body{background:#fff;font-size:11pt}
  .leccion{display:block;padding:0}
  .entrada{border:0;box-shadow:none;padding:0}
  .entrada__contenido a::after{content:" (" attr(href) ")";font-size:9pt;color:#555}
}