/* ============================================================
   portada.css — el sistema visual de Cavesea

   Papel #f5f4ef, tinta #12120f, Inter, filete de 1 px. Sin
   sombras, sin esquinas redondeadas, titulares con tracking
   negativo y etiquetas en versalitas.

   Lo usan la portada y los dos vestíbulos (másteres y
   fundamentos). Los másteres por dentro llevan estilo.css, que
   es otro edificio: una aplicación con barra lateral.

   LA ESCALA MANDA. Todo el ritmo vertical sale de --paso y todo
   el aire de las secciones de --seccion. Si algo se ve apretado,
   se sube aquí y sube en las tres páginas a la vez; no se
   parchea abajo.
   ============================================================ */

:root{
  --ink:#12120f;
  --muted:#57564d;
  --soft:#66655c;
  --paper:#f5f4ef;
  --paper-alt:#ecebe4;
  --line:rgba(18,18,15,.14);
  --line-strong:rgba(18,18,15,.28);
  --dark:#11110f;
  --dim:#b9b9b2;
  --dim2:#9a998f;
  --ok:#1f6b3a;

  /* EL ACENTO. Un solo color fuera del blanco y negro, y marca una sola
     cosa: la evidencia. Cifras, etiquetas de sección y el subrayado del
     titular. Bermellón porque es lápiz rojo de corregir, no azul de
     software. 5,43:1 sobre papel y 5,98:1 con blanco encima, o sea AA
     por los dos lados; si alguien lo cambia, que rehaga esas dos cuentas.
     La regla que lo mantiene honesto: si el acento no señala un número
     comprobable, sobra. */
  --acento:#b8321d;
  --acento-flojo:rgba(184,50,29,.14);

  /* el ritmo */
  --paso:26px;
  --seccion:clamp(96px,11vw,164px);
  --ancho:min(1240px,calc(100% - 56px));
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;color:var(--ink);background:var(--paper);
  font-family:Inter,InterCaida,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:17px;line-height:1.62;overflow-x:hidden;-webkit-font-smoothing:antialiased;

  /* Que una palabra que no cabe se parta en vez de estirar la página.
     Lo pedía una URL con parámetros UTM de marketing/analitica.html: 585 px
     de ancho en un móvil de 390. Solo actúa cuando la palabra desbordaría,
     así que no toca la prosa normal. */
  overflow-wrap:break-word;}
a{color:inherit;text-decoration:none}
.wrap{width:var(--ancho);margin:auto}
.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:#fff;padding:12px 18px;z-index:99}
.skip:focus{left:8px;top:8px}
:focus-visible{outline:3px solid var(--ink);outline-offset:3px}

/* ---------- la banda del mapa, en la portada ----------
   A la izquierda qué es, a la derecha las tres cifras que lo hacen creíble.
   Va pegada al héroe y sin fondo propio, para no competir con las tres vías
   que vienen justo debajo. Las cifras están a mano en index.html y las
   comprueba pruebas/mapa.test.js contra mapa.js. */
.mapaBanda{
  display:grid;grid-template-columns:1.15fr .85fr;gap:64px;align-items:center;
  border-top:2px solid var(--ink);border-bottom:1px solid var(--line-strong);
  padding:calc(var(--paso) * 1.9) 0;margin-top:calc(var(--paso) * 2.2);
}
.mapaBanda h2{font-size:clamp(26px,3.4vw,40px);line-height:.98;letter-spacing:-.05em;margin:14px 0 16px}
.mapaBanda p{font-size:16.5px;line-height:1.6;color:var(--muted);margin:0 0 calc(var(--paso))}
.mapaCifras{list-style:none;padding:0;margin:0}
.mapaCifras li{display:flex;align-items:baseline;gap:18px;padding:15px 0;border-top:1px solid var(--line)}
.mapaCifras li:first-child{border-top:none}
.mapaCifras b{font-size:clamp(30px,3.6vw,42px);font-weight:800;letter-spacing:-.05em;line-height:1;min-width:78px}
.mapaCifras span{font-size:14.5px;line-height:1.4;color:var(--muted)}
@media(max-width:860px){
  .mapaBanda{grid-template-columns:1fr;gap:26px}
}

/* ---------- navegación ---------- */
nav{
  min-height:90px;padding:18px 0;border-bottom:1px solid var(--line);
  display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;
}
/* ---------- el logotipo ----------
   Tres piezas: el filete doble, la palabra partida por su costura y —solo
   donde hay sitio— la pregunta. CAVE macizo, SEA apagado: no son dos
   palabras, son dos pesos de una.

   Los dos números que no se tocan sin volver a medir:

   · Los filetes llevan SUELO EN PÍXELES. El fino, a 0,026 em de un cuerpo
     de 15 px, mide 0,4 px: el navegador lo pinta como un borrón y las dos
     rayas se ven como una. Con `max(1px, …)` no puede pasar.
   · SEA apagado es #55534c sobre papel (7,0:1) y #d3cab4 sobre tinta
     (11,5:1). No es decorativo: por debajo de 4,5:1 la palabra se lee
     partida en dos en vez de una con dos pesos. Quien lo cambie, que rehaga
     las dos cuentas.

   Y NO lleva contorno en ningún tamaño: `-webkit-text-stroke` a estos
   cuerpos cae por debajo de medio píxel y deja una mancha gris. Se probó. */
.logo{font-size:15px;font-weight:900;letter-spacing:-.045em;text-transform:uppercase;line-height:1;text-align:center;display:inline-block;
      /* El bloque mide 18 px de alto y es un enlace: WCAG 2.2 pide 24 en el
         objetivo táctil, así que el aire lo pone el padding. Lo cazó
         `node herramientas/acceso.mjs` a 390 px; a ojo no se ve. */
      padding-block:4px}
.logo .fil{margin:0 auto .34em;width:34%}
.logo .fil i{display:block;background:currentColor}
.logo .fil i.g{height:max(2px,.058em)}
.logo .fil i.p{height:max(1px,.026em);margin-top:max(2px,.05em)}
.logo .pal{display:block;white-space:nowrap}
.logo .pal b{font-weight:900}
.logo .pal em{font-style:normal;color:#55534c}
.tinta .logo .pal em,.oscuro .logo .pal em{color:#d3cab4}
.links{display:flex;gap:30px;color:#55544c;font-size:14.5px}
.links a{padding-bottom:3px;border-bottom:1px solid transparent}
.links a:hover{color:var(--ink);border-bottom-color:var(--line-strong)}
.links a[aria-current]{color:var(--ink);border-bottom-color:var(--ink);font-weight:700}
.btn{
  display:inline-block;border:1px solid var(--ink);padding:14px 20px;
  font-size:14.5px;font-weight:700;white-space:nowrap;
  transition:background .2s ease,color .2s ease;
}
.primary{background:var(--ink);color:#fff}
.primary:hover{background:#000}
.btn:not(.primary):hover{background:var(--ink);color:#fff}

/* ---------- cabeceras de página ---------- */
.hero{padding:clamp(52px,6.4vw,86px) 0 clamp(52px,6vw,78px);border-bottom:1px solid var(--line)}
.eyebrow{text-transform:uppercase;letter-spacing:.16em;font-size:11px;font-weight:800;color:var(--acento);margin:0 0 26px}
/* Sobre fondo oscuro el bermellón se apaga y deja de leerse, así que ahí
   la etiqueta vuelve al gris claro de siempre. */
.dark .eyebrow,.way.alt .eyebrow{color:var(--dim2)}
/* El tope baja de 96 a 80 px por una razón concreta y no estética: a 96 el
   titular se comía tres líneas y empujaba la tira de cifras fuera de la
   primera pantalla, que es justo lo que había que enseñar. */
.hero h1{font-size:clamp(36px,6.2vw,80px);line-height:.92;letter-spacing:-.06em;margin:0;max-width:1000px}
@media(min-width:820px){.hero h1{letter-spacing:-.075em}}
/* El salto del titular está puesto para partir en dos líneas anchas; en
   móvil sobra, porque el propio ancho ya parte y deja una línea huérfana. */
@media(max-width:700px){.hero h1 br{display:none}}
.heroLead{font-size:clamp(17px,2.1vw,20px);line-height:1.55;color:var(--muted);max-width:660px;margin:calc(var(--paso) * 1.1) 0 0}
.buttons{display:flex;gap:12px;flex-wrap:wrap;margin-top:calc(var(--paso) * 1.4)}
.heroNote{margin-top:var(--paso);font-size:13.5px;color:var(--soft)}

/* ---------- secciones ---------- */
.section{padding:var(--seccion) 0}
.section.alt{background:var(--paper-alt);border-top:1px solid var(--line-strong);border-bottom:1px solid var(--line-strong)}
.head{display:grid;grid-template-columns:1.05fr .95fr;gap:64px;align-items:end}
.head h1,.head h2{font-size:clamp(32px,4.6vw,60px);line-height:.92;letter-spacing:-.055em;margin:0}
.head .lead{font-size:clamp(16px,1.9vw,18.5px);line-height:1.6;color:var(--muted);margin:0}
.tag{
  display:inline-block;font-size:10px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  color:var(--soft);border:1px solid var(--line-strong);padding:6px 10px;margin-bottom:22px;
}
.note{
  margin-top:calc(var(--paso) * 1.6);font-size:15.5px;line-height:1.6;color:var(--muted);
  max-width:760px;border-left:2px solid var(--line-strong);padding-left:20px;
}

/* ---------- filas editoriales ---------- */
.rows{margin-top:calc(var(--paso) * 2);border-top:1px solid var(--ink)}
.row{
  display:grid;grid-template-columns:60px 1fr 160px;gap:30px;align-items:center;
  padding:calc(var(--paso) * 1.3) 0;border-bottom:1px solid var(--line);
  transition:padding .3s ease,background .3s ease;
}
.row:hover{padding-left:16px;padding-right:16px;background:rgba(255,255,255,.6)}
.rowN{font-size:12px;font-weight:700;color:var(--soft)}
.rowQ{font-size:clamp(20px,2.4vw,27px);line-height:1.16;letter-spacing:-.035em}
.rowM{display:block;font-size:15px;line-height:1.5;color:var(--muted);letter-spacing:0;margin-top:12px;font-weight:400}
.rowGo{font-size:13.5px;font-weight:700;text-align:right;white-space:nowrap}
.rowGo span{border-bottom:1px solid var(--line-strong);padding-bottom:2px}
.row:hover .rowGo span{border-bottom-color:var(--ink)}

/* ---------- tarjetas ---------- */
.ways{margin-top:calc(var(--paso) * 2);display:grid;grid-template-columns:1fr 1fr;gap:16px}
.way{background:#fff;border:1px solid var(--line);padding:44px;display:flex;flex-direction:column}
.way.alt{background:var(--ink);color:#fff;border-color:var(--ink)}
.wayNum{font-size:10px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--soft)}
.way.alt .wayNum{color:var(--dim2)}
.way h3{font-size:clamp(28px,3.4vw,42px);line-height:1;letter-spacing:-.055em;margin:22px 0 8px}
.wayClaim{font-size:16.5px;color:var(--muted);margin:0 0 var(--paso);font-weight:600}
.way.alt .wayClaim{color:var(--dim)}
.way>p{font-size:15.5px;line-height:1.6;color:var(--muted);margin:0 0 calc(var(--paso) * 1.1)}
.way.alt>p{color:var(--dim)}
.wayMeta{list-style:none;padding:0;margin:0 0 calc(var(--paso) * 1.2);font-size:14.5px;color:var(--muted)}
.wayMeta li{padding:13px 0;border-top:1px solid var(--line)}
.way.alt .wayMeta{color:var(--dim)}
.way.alt .wayMeta li{border-top-color:rgba(255,255,255,.16)}
.wayGo{margin:auto 0 0}
.way.alt .wayGo .btn{background:#fff;color:var(--ink);border-color:#fff}
.way.alt .wayGo .btn:hover{background:#e8e7e0}

.badge{
  display:inline-block;align-self:flex-start;font-size:10px;font-weight:800;
  letter-spacing:.14em;text-transform:uppercase;padding:7px 10px;
  border:1px solid var(--line-strong);color:var(--soft);
}

/* ---------- bloque oscuro ---------- */
.dark{background:var(--dark);color:#fff}
.dark .eyebrow{color:var(--dim2)}
.dark h2{font-size:clamp(30px,4.2vw,54px);line-height:.94;letter-spacing:-.055em;margin:0 0 calc(var(--paso) * 1.4)}
.howGrid{display:grid;grid-template-columns:.5fr 1.5fr;gap:64px}
.howGrid p{font-size:clamp(15.5px,1.8vw,17.5px);line-height:1.65;color:var(--dim);margin:0 0 var(--paso);max-width:780px}
.howGrid p strong{color:#fff}

footer{
  border-top:1px solid var(--line);padding:32px 0;color:var(--soft);font-size:13.5px;
  display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;
}

/* ---------- responsive ---------- */
@media(max-width:960px){
  .head{grid-template-columns:1fr;gap:28px;align-items:start}
  .ways{grid-template-columns:1fr}
  .howGrid{grid-template-columns:1fr;gap:28px}
}
@media(max-width:700px){
  :root{--paso:20px;--ancho:calc(100% - 36px)}
  /* El menú se envuelve, no se esconde. Estuvo en display:none por debajo
     de 700px y en un móvil no había forma de llegar al mapa ni al programa
     salvo por el pie: los dos botones del héroe eran la navegación entera. */
  nav{flex-wrap:wrap;row-gap:14px}
  .links{width:100%;order:3;gap:0 22px;flex-wrap:wrap;font-size:14px;
         border-top:1px solid var(--line);padding-top:13px}
  .row{grid-template-columns:44px 1fr;gap:18px}
  .rowGo{grid-column:2;text-align:left;margin-top:12px}
  .way{padding:32px}
}
@media(max-width:560px){
  :root{--ancho:calc(100% - 28px)}
  nav{min-height:0;padding:18px 0;gap:12px}
  .logo{font-size:13px}
  nav .btn{padding:11px 14px;font-size:13px}
  .row{grid-template-columns:32px 1fr}
}

/* ---------- rejilla de másteres (portada) ---------- */
/* Tres columnas, y la tarjeta negra ocupa dos. Con cinco másteres es lo
   único que llena la rejilla exacta: 2+1 arriba y 3 abajo. Con la reparto
   vieja (1,35fr 1fr 1fr) el quinto se quedaba solo en una fila con dos
   huecos. Quien añada el sexto máster vuelve aquí. */
.courses{margin-top:calc(var(--paso) * 2);display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.course{background:#fff;border:1px solid var(--line);padding:38px;display:flex;flex-direction:column}
.course.main{background:var(--ink);color:#fff;border-color:var(--ink);grid-column:span 2}
.course.main .badge{background:#fff;color:var(--ink);border-color:#fff}
.course h3{font-size:clamp(21px,2.3vw,27px);line-height:1.08;letter-spacing:-.045em;margin:calc(var(--paso) * 1.2) 0 14px}
.course p{font-size:14.5px;line-height:1.58;color:var(--muted);margin:0 0 calc(var(--paso) * .9)}
.course.main p{color:#c9c8c0}
/* La lista, en los colores de la tarjeta que le toca. Estos dos selectores
   llevaban los colores de la tarjeta NEGRA para todas, y las blancas los
   corregían con un style= inline en cada <li>. Al generar las tarjetas
   desde el dato, esos inline desaparecieron y las cuatro listas claras se
   quedaron en gris casi invisible sobre blanco. La cascada, en la hoja. */
.course ul{list-style:none;padding:0;margin:0 0 calc(var(--paso) * 1.2);font-size:13.5px;color:var(--muted)}
.course ul li{padding:10px 0;border-top:1px solid var(--line)}
.course.main ul{color:#c9c8c0}
.course.main ul li{border-top-color:rgba(255,255,255,.16)}
.course .cta{margin-top:auto}
.course.main .cta .btn{background:#fff;color:var(--ink);border-color:#fff;width:100%;text-align:center}
.course.main .cta .btn:hover{background:#e8e7e0}
.course .soon{margin-top:auto;font-size:14px;color:var(--soft)}
@media(max-width:960px){
  .courses{grid-template-columns:1fr 1fr}
  .course.main{grid-column:1 / -1}
}
@media(max-width:560px){.courses{grid-template-columns:1fr}}

/* ============================================================
   Inter, servida desde aquí

   Antes venía de fonts.googleapis.com, y eso tenía dos costes: la
   hoja del <head> bloquea el pintado hasta que Google responde, y
   el navegador de cada visitante le comunicaba su IP a Google —
   justo lo contrario de lo que promete la página legal.

   Faltan los pesos 600 y 800: no había forma de descargarlos en la
   sesión donde se hizo esto. El navegador los sintetiza desde 700 y
   900, que se nota poco. Cuando puedas, baja los dos ficheros de
   fontsource, déjalos en esta carpeta y añade sus @font-face.
   ============================================================ */
@font-face{font-family:Inter;src:url('fuentes/inter-latin-400-normal.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Inter;src:url('fuentes/inter-latin-700-normal.woff2') format('woff2');font-weight:600 700;font-style:normal;font-display:swap}
@font-face{font-family:Inter;src:url('fuentes/inter-latin-900-normal.woff2') format('woff2');font-weight:800 900;font-style:normal;font-display:swap}

/* ---------- LA FUENTE DE RESPALDO, CON LAS MEDIDAS DE INTER ----------
   Mientras las Inter se descargan, el navegador pinta con la fuente del
   sistema. Arial es un 7,2% más estrecha que Inter al mismo tamaño, así que
   el texto ocupaba menos, la miga de pan de los módulos cabía en dos líneas
   y al llegar la fuente buena pasaba a una: veintitrés píxeles de salto y
   todo lo de debajo subiendo de golpe. Medido: **CLS 0,284** en las páginas
   de módulo, cuando por encima de 0,25 Google lo llama «pobre».

   Esto declara la fuente del sistema con las medidas de Inter corregidas,
   así que el respaldo ocupa lo mismo que la definitiva y no hay salto. Los
   números no son de catálogo: `size-adjust` sale de medir la misma frase en
   las dos (4.678 px contra 4.363 a 100 px = 107,2%), y los `override`
   verticales de las métricas de Inter divididas por ese ajuste — ascendente
   2728/2816 = 96,88%, entre 1,072 = 90,4%; descendente 680/2816 = 24,15%,
   entre 1,072 = 22,5%.

   Va DESPUÉS de Inter en la pila y antes que nada del sistema. */
@font-face{
  font-family:InterCaida;
  src:local('Arial'),local('Helvetica Neue'),local('Liberation Sans');
  size-adjust:107.2%;
  ascent-override:90.4%;
  descent-override:22.5%;
  line-gap-override:0%;
}


/* ============================================================
   LAS PIEZAS DE FUNDAMENTOS  (body class="pieza")
   ============================================================
   Un fundamento es un artículo: una columna, tipografía de
   lectura y su calculadora. Es el mismo sistema —papel, tinta,
   Inter, filete de 1 px— con otra métrica, más apretada que la
   de la portada.

   TODO VA DENTRO DE .pieza, y no es manía: aquí se estilan
   etiquetas desnudas (p, h2, table, details) y sin el prefijo
   se comerían la portada y los dos vestíbulos.

   La cabecera de la pieza se llama .masthead, no .head: .head
   ya existe arriba y es otra cosa —la rejilla de titular y
   entradilla de las secciones—. Dos nombres iguales en una
   misma hoja son una trampa esperando.

   Y .primary va aquí dentro aunque sea idéntica a la de
   arriba: fuera de .pieza perdería contra .pieza .btn por
   especificidad y el botón negro se quedaría en contorno.
   ============================================================ */

.pieza{margin:0;color:var(--ink);background:var(--paper);font-family:Inter,InterCaida,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;line-height:1.55;overflow-x:hidden;-webkit-font-smoothing:antialiased;font-size:16px}
.pieza .wrap{width:min(1160px,calc(100% - 40px));margin:auto}
.pieza .col{width:min(720px,100%);margin:auto}
.pieza nav{min-height:76px;padding:14px 0;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.pieza .logo{font-size:15px;font-weight:900;letter-spacing:-.07em;text-transform:uppercase;line-height:.86;display:inline-block;max-width:none}
.pieza .btn{display:inline-block;border:1px solid var(--ink);padding:12px 17px;font-size:14px;font-weight:700;white-space:nowrap;text-decoration:none;transition:background .2s ease,color .2s ease;cursor:pointer;background:transparent;font-family:inherit;color:var(--ink)}
.pieza .primary{background:var(--ink);color:#fff}
.pieza .primary:hover{background:#000}
.pieza .btn:not(.primary):hover{background:var(--ink);color:#fff}
.pieza .masthead{padding:clamp(50px,7vw,86px) 0 clamp(36px,5vw,56px);border-bottom:1px solid var(--line)}
.pieza .crumb{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--soft);margin:0 0 22px}
.pieza .crumb a{text-decoration:none;border-bottom:1px solid var(--line-strong)}
.pieza h1{font-size:clamp(33px,5.6vw,68px);line-height:.94;letter-spacing:-.055em;margin:0;max-width:16ch}
.pieza .standfirst{font-size:clamp(18px,2.2vw,22px);color:var(--muted);margin:28px 0 0;max-width:60ch}
.pieza .meta{margin-top:30px;display:flex;gap:10px;flex-wrap:wrap;font-size:11px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:var(--soft)}
.pieza .meta span{border:1px solid var(--line-strong);padding:6px 10px}
.pieza article{padding:clamp(46px,6vw,72px) 0}
.pieza h2{font-size:clamp(26px,3.4vw,40px);line-height:1.02;letter-spacing:-.05em;margin:56px 0 20px}
.pieza h2:first-of-type{margin-top:0}
.pieza h3{font-size:clamp(19px,2.2vw,23px);letter-spacing:-.035em;margin:34px 0 12px}
.pieza p{font-size:17.5px;color:var(--muted);margin:0 0 20px}
.pieza p strong, .pieza li strong{color:var(--ink)}
.pieza ul, .pieza ol{font-size:17.5px;color:var(--muted);padding-left:22px;margin:0 0 20px}
.pieza li{margin-bottom:9px}
.pieza .lede{font-size:20px;color:var(--ink);font-weight:600;border-left:3px solid var(--ink);padding-left:20px;margin:0 0 34px}
.pieza table{width:100%;border-collapse:collapse;margin:0 0 26px;font-size:16px}
.pieza th, .pieza td{text-align:left;padding:13px 12px;border-bottom:1px solid var(--line)}
/* La esquina vacía de una tabla de doble entrada es `<td>`, no `<th>`:
   un encabezado sin texto no encabeza nada y un lector de pantalla lo
   anuncia como columna sin nombre. Se estila igual para que no se note. */
.pieza thead th,.pieza thead td{border-bottom:1px solid var(--ink);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--soft)}
.pieza td.num, .pieza th.num{text-align:right;font-variant-numeric:tabular-nums}
.pieza tbody tr:last-child td{border-bottom:1px solid var(--ink)}
.pieza tr.total td{font-weight:800;color:var(--ink)}
.pieza .calc{background:var(--ink);color:#fff;padding:clamp(26px,4vw,38px);margin:38px 0}
.pieza .calc h3{margin:0 0 8px;color:#fff;font-size:clamp(21px,2.5vw,27px)}
.pieza .calc .hint{color:var(--dim);font-size:14.5px;margin:0 0 26px}
.pieza .calcRow{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap}
.pieza .calcRow label{display:block;font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--dim2);margin-bottom:9px}
.pieza .calcRow .field{flex:1 1 230px;min-width:0}
.pieza .calc input[type=number]{width:100%;background:transparent;border:1px solid #45443e;color:#fff;padding:14px 15px;font-size:19px;font-family:inherit;font-variant-numeric:tabular-nums}
.pieza .calc input[type=number]:focus{border-color:#fff;outline:none}
.pieza .calc button{border:1px solid #fff;background:#fff;color:var(--ink);padding:14px 22px;font-size:14px;font-weight:700;font-family:inherit;cursor:pointer}
.pieza .calc button:hover{background:#e8e7e0}
.pieza .out{margin-top:28px;border-top:1px solid rgba(255,255,255,.2);padding-top:24px;display:none}
.pieza .out.show{display:block}
.pieza .outGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:rgba(255,255,255,.18);margin-bottom:22px}
.pieza .outGrid div{background:var(--ink);padding:18px}
.pieza .outGrid span{display:block;font-size:10.5px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:var(--dim2);margin-bottom:8px}
.pieza .outGrid b{font-size:clamp(22px,3vw,30px);letter-spacing:-.045em;font-variant-numeric:tabular-nums}
/* Cifras de seis dígitos (una hipoteca) no caben a tamaño de titular en
   un tercio de la rejilla: parten el € a la línea siguiente. Esta variante
   baja la escala y prohíbe el corte. Se pone en el div, no en la página. */
.pieza .outGrid.largas b{font-size:clamp(18px,2.3vw,25px);white-space:nowrap}
.pieza .breakdown{font-size:14px;color:var(--dim);font-variant-numeric:tabular-nums}
.pieza .breakdown div{padding:8px 0;border-top:1px solid rgba(255,255,255,.13);display:flex;justify-content:space-between;gap:16px}
.pieza .breakdown div:first-child{border-top:0}
.pieza .nextEuro{margin-top:20px;padding:15px 17px;background:rgba(255,255,255,.08);font-size:15px;color:#fff}
.pieza .calcErr{margin-top:16px;font-size:14.5px;color:#f3c9c9;display:none}
.pieza .calcErr.show{display:block}
.pieza details{border-top:1px solid var(--ink);border-bottom:1px solid var(--ink);margin:34px 0;padding:0}
.pieza details+details{margin-top:-34px;border-top:0}
.pieza summary{cursor:pointer;padding:20px 0;font-weight:700;font-size:17.5px;list-style:none;display:flex;justify-content:space-between;gap:16px;align-items:center}
.pieza summary::-webkit-details-marker{display:none}
.pieza summary::after{content:"+";font-size:22px;font-weight:400;color:var(--soft)}
.pieza details[open] summary::after{content:"−"}
.pieza .answer{padding:0 0 24px}
.pieza .aside{background:#ecebe4;border-top:1px solid var(--line-strong);border-bottom:1px solid var(--line-strong);padding:26px;margin:38px 0}
.pieza .aside p:last-child{margin-bottom:0}
.pieza .aside .k{font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--soft);margin:0 0 12px}
.pieza .bridge{background:var(--dark);color:#fff;padding:clamp(56px,8vw,96px) 0;margin-top:clamp(46px,6vw,72px)}
.pieza .bridge .k{font-size:11px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--dim2);margin:0 0 20px}
.pieza .bridge h2{font-size:clamp(28px,4.2vw,52px);line-height:.98;letter-spacing:-.055em;margin:0 0 22px;color:#fff}
.pieza .bridge p{color:var(--dim);max-width:60ch}
.pieza .bridge .btn{background:#fff;color:var(--ink);border-color:#fff;margin-top:14px}
.pieza .bridge .btn:hover{background:#e8e7e0}
.pieza .more{padding:clamp(46px,6vw,72px) 0}
.pieza .more .k{font-size:11px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--soft);margin:0 0 26px}
.pieza .moreRows{border-top:1px solid var(--ink)}
.pieza .moreRow{display:grid;grid-template-columns:48px 1fr 110px;gap:20px;align-items:center;padding:20px 0;border-bottom:1px solid var(--line);text-decoration:none;transition:padding .3s ease,background .3s ease}
.pieza .moreRow:hover{padding-left:12px;padding-right:12px;background:rgba(255,255,255,.6)}
.pieza .moreRow .n{font-size:12px;font-weight:700;color:var(--soft)}
.pieza .moreRow .q{font-size:clamp(17px,2vw,21px);line-height:1.15;letter-spacing:-.03em}
.pieza .moreRow .g{font-size:13px;font-weight:700;text-align:right}
.pieza .verTodos{margin:24px 0 0}
.pieza .verTodos a{font-size:13px;font-weight:700;text-decoration:none;border-bottom:1px solid var(--line-strong)}
.pieza .verTodos a:hover{border-bottom-color:var(--ink)}
.pieza footer{border-top:1px solid var(--line);padding:26px 0;color:var(--soft);font-size:13px;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}
.pieza footer a{text-decoration:none;border-bottom:1px solid var(--line-strong)}
@media(max-width:620px){
  .pieza .wrap{width:calc(100% - 28px)}
  .pieza .btn{white-space:normal}
  .pieza .bridge .btn{display:block;text-align:center}
  .pieza nav{min-height:0;padding:16px 0;gap:12px}
  .pieza .logo{font-size:13px;max-width:150px}
  .pieza nav .btn{padding:10px 13px;font-size:13px}
  .pieza .outGrid{grid-template-columns:1fr}
  .pieza .moreRow{grid-template-columns:34px 1fr}
  .pieza .moreRow .g{grid-column:2;text-align:left;margin-top:6px}
  .pieza th, .pieza td{padding:11px 8px;font-size:15px}
  /* Igual que las de los módulos: que se desplace la tabla y no la página.
     Lo pedían dilucion.html y nadie-entra-en-mi-web.html. */
  .pieza table{display:block;overflow-x:auto;max-width:100%}
}

/* Accesibilidad, para todo el sitio. */
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition-duration:.01ms!important}}


/* ---------- LA TIRA DE PRUEBAS ----------
   Va pegada al héroe y es lo único que había que enseñar y no se enseñaba:
   lo que ya está construido. Las cifras salen de `node web/comprobar.js`,
   que las imprime al final de cada pasada; si cambian, se cambian aquí.
   Deliberadamente NO lleva las del mapa (9 troncos, 45 disciplinas, 110
   niveles): esas son la hoja de ruta y de los 61 niveles hay uno escrito.
   Prometer el plan en la primera pantalla y entregar el producto en la
   quinta era justo lo que no se entendía. */
.pruebas{
  list-style:none;padding:0;margin:calc(var(--paso) * 1.6) 0 0;
  display:grid;grid-template-columns:repeat(4,1fr);gap:0;
  border-top:1px solid var(--ink);
}
.pruebas li{padding:18px 22px 0 0}
.pruebas b{
  display:block;font-size:clamp(30px,4.2vw,52px);font-weight:900;
  letter-spacing:-.055em;line-height:.95;color:var(--acento);
}
.pruebas span{display:block;font-size:14px;line-height:1.35;color:var(--muted);margin-top:7px}

/* ---------- LOS SIMULADORES, A LA VISTA ----------
   Capturas de cuatro canvas reales, uno por máster, hechas con Playwright
   sobre las páginas de módulo. Se rehacen con el guión del README cuando
   cambie un simulador. El canvas pinta sobre blanco y el sitio es papel,
   así que el filete de 1 px es lo que evita que parezcan recortes pegados. */
.sims{margin-top:calc(var(--paso) * 2.4)}
/* Cinco columnas desde que hay cinco másteres: con cuatro fijas, el quinto
   simulador se caía solo a una segunda fila y parecía un añadido. La regla
   es que haya tantas columnas como másteres, así que quien añada el sexto
   toca aquí. */
.simsGrid{
  display:grid;grid-template-columns:repeat(5,1fr);gap:16px;
  margin-top:calc(var(--paso) * .9);
}
.sim{margin:0}
.sim img{
  display:block;width:100%;height:auto;aspect-ratio:622/250;object-fit:cover;
  object-position:left top;background:#fff;border:1px solid var(--line-strong);
}
.sim figcaption{
  display:flex;gap:9px;align-items:baseline;
  font-size:13px;line-height:1.35;color:var(--muted);margin-top:10px;
}
.sim figcaption b{color:var(--ink);font-weight:700;white-space:nowrap}

/* La tira de pruebas pasa a dos columnas donde siempre. La rejilla de
   simuladores no: con cinco columnas necesita más sitio, y por debajo de
   1120 los pies de foto salían a cinco líneas. Son dos cosas distintas y
   por eso son dos consultas distintas. */
@media(max-width:960px){
  .pruebas{grid-template-columns:repeat(2,1fr)}
  .pruebas li{padding-bottom:16px}
}
@media(max-width:1120px){
  .simsGrid{grid-template-columns:repeat(2,1fr);gap:20px}
}
@media(max-width:560px){
  .simsGrid{grid-template-columns:1fr;gap:16px}
  .sim img{aspect-ratio:622/210}
}

/* ---------- ÍNDICE DE LOS MÁSTERES ----------
   Solo en masteres.html. Todas las puertas visibles sin bajar, que es lo
   que faltaba: el primer máster empezaba casi una pantalla más abajo. */
.indiceMasteres{
  list-style:none;padding:0;margin:calc(var(--paso) * 1.5) 0 0;
  display:grid;grid-template-columns:repeat(4,1fr);gap:0;
  border-top:1px solid var(--ink);
}
.indiceMasteres a{display:block;padding:16px 20px 16px 0;border-bottom:1px solid transparent}
.indiceMasteres b{
  display:block;font-size:19px;font-weight:800;letter-spacing:-.03em;
  color:var(--ink);
}
.indiceMasteres span{display:block;font-size:13.5px;line-height:1.4;color:var(--muted);margin-top:4px}
.indiceMasteres a:hover b{color:var(--acento)}
.indiceMasteres a:hover span{color:var(--ink)}
@media(max-width:820px){
  .indiceMasteres{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:460px){
  .indiceMasteres{grid-template-columns:1fr}
  .indiceMasteres a{padding:13px 0;border-bottom:1px solid var(--line)}
}


/* ---------- LA CUENTA, Y LAS TARJETAS DE DOS COLUMNAS ----------
   Todo lleva `<body class="pieza">` y por eso va prefijado con `.pieza`:
   aquí se estilan clases propias, pero la hoja es la misma que pinta la
   portada y una regla suelta se le colaría.

   Por qué existe: la portada hacía a la vez de escaparate, de folleto de
   venta y de puerta del producto, y la cuenta no tenía página ninguna.
   Ahora cada página hace un solo trabajo, y de la capa de venta ya no
   queda nada en el sitio (ver `encargos/venta-en-pausa/`). */

/* La caja de entrar de /cuenta.html. Es papel sobre papel: un filete y
   nada más, porque el negro está reservado al paso siguiente. */
.pieza .panelCuenta{margin-bottom:calc(var(--seccion) * .5)}
.pieza .cargandoCuenta{color:var(--soft)}
.pieza .cajaEntrar{border:1px solid var(--ink);padding:clamp(26px,4vw,38px);margin:0 0 46px;background:#fff}
.pieza .cajaEntrar .k{font-size:11px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--soft);margin:0 0 14px}
.pieza .tituloCaja{font-size:clamp(23px,3vw,32px);line-height:1.02;letter-spacing:-.045em;margin:0 0 12px;overflow-wrap:anywhere}
.pieza .pistaCaja{font-size:15.5px;margin:0 0 26px}
.pieza .cajaEntrar label{display:block;font-size:11px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:var(--soft);margin:0 0 8px}
.pieza .cajaEntrar input{width:100%;padding:13px 14px;font:inherit;font-size:16px;border:1px solid var(--line-strong);background:var(--paper);color:var(--ink);margin-bottom:18px;border-radius:0}
.pieza .cajaEntrar input:focus{outline:2px solid var(--ink);outline-offset:1px;border-color:var(--ink)}
.pieza .errorCaja{font-size:14.5px;color:#8f2222;margin:0 0 14px;min-height:0}
.pieza .errorCaja:empty{margin:0}
.pieza .cajaEntrar .btn{cursor:pointer}
.pieza .pieCaja{margin:16px 0 0}
.pieza .enlaceBoton{border:0;background:none;font:inherit;font-size:14.5px;color:var(--muted);cursor:pointer;border-bottom:1px solid var(--line-strong);padding:0 0 2px}
.pieza .enlaceBoton:hover{color:var(--ink);border-bottom-color:var(--ink)}
.pieza .accionesCuenta{display:flex;gap:10px;flex-wrap:wrap;margin:0}
.pieza .btn.peligro{border-color:#8f2222;color:#8f2222}
.pieza .btn.peligro:hover{background:#8f2222;color:#fff}

/* La tabla de avance. La barra es la única cifra que se ve de un vistazo,
   así que va en tinta y no en acento: no es una evidencia comprobable,
   es el estado de una persona. */
.pieza .tablaAvance{margin-bottom:20px}
.pieza .tablaAvance td.num{white-space:nowrap;font-variant-numeric:tabular-nums}
.pieza .tablaAvance .barra{display:block;height:4px;background:var(--line);margin-top:8px;min-width:88px}
.pieza .tablaAvance .barra i{display:block;height:100%;background:var(--ink)}
.pieza .tablaAvance .ok{color:var(--ok)}
.pieza .notaTabla{font-size:14.5px;color:var(--soft)}
.pieza .aviso{border:1px solid var(--line-strong);background:var(--paper-alt);padding:26px;margin:0 0 40px}
.pieza .aviso p:last-child{margin-bottom:0}

/* Dos columnas de tarjetas, «esto sí» y «esto no». Sin sombra y sin
   redondeo, como todo lo demás. Las usa el diario de decisiones para el
   pre-mortem y el post-mortem. */
.pieza .dos{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:34px 0}
.pieza .tarjeta{background:#fff;border:1px solid var(--line);padding:28px}
.pieza .tarjeta.tinta{background:var(--ink);color:#fff;border-color:var(--ink)}
.pieza .tarjeta h3{margin:0 0 14px;font-size:20px}
.pieza .tarjeta.tinta h3{color:#fff}
.pieza .tarjeta ul{list-style:none;padding:0;margin:0;font-size:15.5px}
.pieza .tarjeta li{padding:11px 0;border-top:1px solid var(--line);margin:0}
.pieza .tarjeta li:first-child{border-top:0;padding-top:0}
.pieza .tarjeta.tinta ul{color:var(--dim)}
.pieza .tarjeta.tinta li{border-top-color:rgba(255,255,255,.16)}
.pieza .tarjeta.tinta li strong{color:#fff}
.pieza .tarjeta p{font-size:15.5px;margin:0}
.pieza .tarjeta.tinta p{color:var(--dim)}

@media(max-width:700px){
  .pieza .dos{grid-template-columns:1fr}
}

/* ---------- OBJETIVOS TÁCTILES (WCAG 2.2, criterio 2.5.8) ----------
   Nada que se toque baja de 24 px. La excepción del criterio cubre los
   enlaces dentro de una frase —los limita el interlineado del texto que los
   rodea—, pero un enlace suelto del pie es un elemento de bloque: en el pie
   flex de este sitio medía 23 px de alto, uno menos, y en un móvil eso es
   un dedo fallando. Se le da altura mínima y se centra: no cambia nada de
   lo que se ve y sí lo que se acierta. */
footer.wrap > a, .pieza footer > a, .pieza footer span > a{
  display:inline-flex;align-items:center;min-height:24px;
}

/* ---------- LOS PASOS DE UN NIVEL DE TRONCO ----------
   Un módulo de máster sabe dónde está: tiene la barra lateral con los once y
   el «módulo siguiente» al final. Un nivel de tronco no sabía nada, y su
   página decía a mano que el siguiente estaba sin escribir. Esto es lo
   mismo que hace la barra lateral, en horizontal y generado desde el mapa.

   El estado lo pone `troncos.js`: `.superado` cuando ya se aprobó ese
   nivel. Aquí solo están las tres formas —el que estás leyendo, uno escrito
   al que puedes ir, y uno que todavía no existe— porque cada una tiene que
   decirse sola, sin leer la etiqueta. */
.nivelesK{
  font-size:11px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  color:var(--soft);margin:0 0 14px;
}
.nivelesLista{list-style:none;padding:0;margin:0 0 calc(var(--paso) * 1.6);border-top:1px solid var(--ink)}
.nivelesLista li{margin:0}
.nivel{
  display:grid;grid-template-columns:44px 1fr auto;gap:16px;align-items:baseline;
  padding:15px 0;border-bottom:1px solid var(--line);text-decoration:none;color:inherit;
}
a.nivel{transition:padding .25s ease,background .25s ease}
a.nivel:hover{padding-left:10px;padding-right:10px;background:rgba(255,255,255,.6)}
.nivelN{font-size:12px;font-weight:800;color:var(--soft);font-variant-numeric:tabular-nums}
.nivelT{font-size:17px;line-height:1.2;letter-spacing:-.025em;color:var(--ink)}
.nivelR{display:block;font-size:14px;line-height:1.4;letter-spacing:0;color:var(--muted);margin-top:5px}
.nivelE{
  font-size:10.5px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;
  color:var(--soft);white-space:nowrap;
}
/* El que estás leyendo: filete grueso a la izquierda, como la entradilla. */
.nivel.actual{background:var(--paper-alt);box-shadow:inset 3px 0 0 var(--ink);padding-left:14px;padding-right:14px}
.nivel.actual .nivelE{color:var(--ink)}
/* Sin página todavía: se ve que está y que no se puede abrir. */
.nivel.pendiente .nivelT,.nivel.pendiente .nivelN{color:var(--soft)}
.nivel.pendiente .nivelR{color:var(--soft)}
/* Superado. Lo marca troncos.js leyendo su propio almacén. */
.nivel.superado .nivelE{color:var(--ok)}
.nivel.superado .nivelE::before{content:"✓ "}

.abreLista{list-style:none;padding:0;margin:0 0 calc(var(--paso) * 1.6);font-size:16px;color:var(--muted)}
.abreLista li{padding:11px 0;border-top:1px solid var(--line)}
.abreLista li:last-child{border-bottom:1px solid var(--line)}
.abreLista a{border-bottom:1px solid var(--line-strong)}
.abreLista i{color:var(--soft);font-style:normal}

/* El paso anterior y el siguiente, igual que en un módulo de máster. */
.paso{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:calc(var(--paso) * .6)}
.paso-a{
  display:block;border:1px solid var(--line-strong);padding:18px 20px;
  text-decoration:none;color:inherit;transition:background .2s ease,border-color .2s ease;
}
a.paso-a:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
a.paso-a:hover span,a.paso-a:hover i{color:var(--dim)}
.paso-a span{
  display:block;font-size:10.5px;font-weight:800;letter-spacing:.13em;
  text-transform:uppercase;color:var(--soft);margin-bottom:7px;
}
.paso-a b{display:block;font-size:17px;line-height:1.2;letter-spacing:-.03em}
.paso-a i{display:block;font-style:normal;font-size:13px;color:var(--soft);margin-top:6px}
.paso-a.sig{text-align:right}
.paso-a.pendiente{border-style:dashed;color:var(--soft)}
.paso-a.pendiente b{color:var(--soft)}
.paso-a.vacio{border:0}
.nivelesPie{font-size:14px;color:var(--soft);margin:calc(var(--paso) * 1.2) 0 0}
.nivelesPie a{border-bottom:1px solid var(--line-strong)}

@media(max-width:620px){
  .nivel{grid-template-columns:34px 1fr;gap:12px}
  .nivelE{grid-column:2;margin-top:6px}
  .paso{grid-template-columns:1fr}
  .paso-a.sig{text-align:left}
  .paso-a.vacio{display:none}
}