/*
  Capítulos del rediseño B: el lenguaje que comparten Inicio (#147) y el resto de páginas de
  lectura, Herramientas, Videotutoriales y Recursos (#149). Va después de /comun/taller.css (que
  pone los tramos, el efecto de color, el movimiento, la cabecera y el pie) y de /comun/gifs.css
  (las demostraciones), si la página las lleva.

    .capitulo        un tramo de color con su frase del manifiesto (.frase, renglones que se
                     deslizan), su ficha y su demostración (.capitulo-cuerpo).
    .ficha           como la de un plano técnico: número, nombre, texto y datos entre líneas finas.
    .cabeza          la cabeza de una página interior: un tramo con su número de sección, el título
                     en mayúsculas ligeras muy grandes, su bajada y una cifra hueca al fondo.
    .indice          casillas grandes para elegir: un dibujo que cobra color y el nombre, que se
                     rellena del tono de su destino (.relleno-tono; #160 y #167).
    .cierre          el remate en tinta: una frase que entra palabra a palabra y los destinos en
                     letra grande que se llenan del color de su sección (.cobra-barrido).

  Solo se animan transform y opacidad; con movimiento reducido, todo quieto y legible.
*/

/* El contenedor (y el del pie) es más ancho: el de la maqueta. */
:root { --ancho: 1360px; --curva-capitulo: cubic-bezier(.2, .7, .2, 1); }

.flecha { display: inline-block; }
.boton-grande { gap: 10px; padding: 15px 22px; font-size: 16px; }
.enlace { font-weight: 500; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.enlace:hover { text-decoration-thickness: 2px; }

/* ---------- Capítulos: cada herramienta, su tramo, su frase y su demostración ---------- */
.capitulo { padding: clamp(64px, 10vh, 132px) var(--margen); }
.frase {
  font-size: clamp(40px, 6.6vw, 116px); font-weight: 300; text-transform: uppercase;
  letter-spacing: -0.04em; line-height: .92; margin-bottom: clamp(32px, 6vh, 80px);
}
.frase[data-frase="recursos"], .frase[data-frase="teselador"] { font-size: clamp(36px, 5.6vw, 96px); }
.frase .desliza { white-space: nowrap; }
.capitulo-cuerpo {
  display: grid; grid-template-columns: minmax(300px, 5fr) 7fr; gap: clamp(32px, 5vw, 96px);
  align-items: center; max-width: 1360px; margin: 0 auto;
}
.capitulo-cuerpo-invertido { grid-template-columns: 7fr minmax(300px, 5fr); }
.capitulo-cuerpo-invertido > :not(.ficha) { order: -1; }
@media (max-width: 980px) {
  .capitulo-cuerpo, .capitulo-cuerpo-invertido { grid-template-columns: minmax(0, 1fr); }
  .capitulo-cuerpo-invertido > :not(.ficha) { order: 0; }
}
@media (max-width: 720px) {
  .frase, .frase[data-frase="recursos"], .frase[data-frase="teselador"] { font-size: 10.4vw; }
  .frase .desliza { white-space: normal; }
}

/* La ficha: como la de un plano técnico, con los datos separados por líneas finas. */
.ficha { display: grid; gap: 18px; align-content: start; min-width: 0; }
.ficha-num { display: flex; gap: 12px; align-items: baseline; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--secundario); }
.ficha-num span { color: var(--tinta); font-weight: 500; font-variant-numeric: tabular-nums; }
.ficha-titulo { font-size: clamp(36px, 3.8vw, 60px); font-weight: 300; letter-spacing: -0.03em; line-height: 1.05; }
.ficha-texto { font-size: clamp(17px, 1.3vw, 19px); line-height: 1.5; max-width: 32em; }
.ficha-datos { display: grid; margin: 0; border-top: 1px solid var(--linea); max-width: 34em; }
.ficha-datos div { display: grid; grid-template-columns: 9em 1fr; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--linea); font-size: 15px; }
.ficha-datos dt { padding-top: 2px; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--secundario); }
.ficha-datos dd { margin: 0; }
.ficha-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; margin-top: 6px; }
.ficha-acciones a:not(.boton) { color: var(--tinta); }
@media (max-width: 420px) {
  .ficha-datos div { grid-template-columns: 1fr; gap: 2px; }
  .boton-grande { width: 100%; justify-content: space-between; }
}

/* ---------- Cabeza de una página ----------
   Un tramo de lado a lado, en papel (#160: el color, en segundo plano). En las páginas de dentro
   (series, Lección, Glosario, Atajos): el número arriba, el título en mayúsculas ligeras muy grandes, que sube al
   cargar, la bajada y, al fondo, una cifra hueca gigante (decorativa). Las tres portadas de sección
   (Herramientas, Videotutoriales, Recursos): la frase y el índice para elegir. */
.cabeza { position: relative; overflow: clip; padding-block: clamp(44px, 8vh, 104px) clamp(40px, 7vh, 88px); }
.cabeza > .contenedor { position: relative; z-index: 1; display: grid; gap: clamp(14px, 2.2vh, 24px); }
.cabeza-num { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--secundario); }
.cabeza-num > span:first-child { margin-right: 12px; color: var(--tinta); font-weight: 500; font-variant-numeric: tabular-nums; }
.cabeza-num a { color: var(--tinta); text-underline-offset: 3px; }
.cabeza-titulo {
  max-width: 14em; overflow: hidden; padding-bottom: .04em; margin-bottom: -.04em;
  font-size: clamp(44px, 9vw, 148px); font-weight: 300; text-transform: uppercase;
  letter-spacing: -0.045em; line-height: .9; overflow-wrap: break-word;
}
.cabeza-titulo > span { display: inline-block; }
.cabeza-titulo-largo { font-size: clamp(38px, 6.2vw, 104px); max-width: 16em; }
.cabeza-bajada { max-width: 34em; font-size: clamp(17px, 1.4vw, 21px); line-height: 1.45; color: var(--secundario); }
.cabeza-bajada a, .cabeza-pie a { color: var(--tinta); }
.cabeza-pie { max-width: 46em; font-size: 15px; line-height: 1.6; color: var(--secundario); }
.cabeza-cifra {
  position: absolute; right: calc(var(--margen) - .05em); bottom: -.16em; z-index: 0;
  font-size: clamp(140px, 23vw, 360px); font-weight: 300; letter-spacing: -0.06em; line-height: .8;
  font-variant-numeric: tabular-nums; pointer-events: none; user-select: none;
}
/* La cifra es un fondo: hueca, con un hilo fino y suave en vez del contorno grueso de las frases. */
@supports (-webkit-text-stroke: 1px) and (paint-order: stroke) {
  .cabeza-cifra.hueca { -webkit-text-stroke: 1.5px color-mix(in srgb, var(--tinta) 38%, var(--fondo)); }
}
@media (forced-colors: active) { .cabeza-cifra { display: none; } }
@media (max-width: 720px) {
  .cabeza-titulo { font-size: clamp(40px, 13vw, 72px); }
  .cabeza-titulo-largo { font-size: clamp(34px, 10.4vw, 60px); }
  .cabeza-cifra { font-size: 46vw; bottom: -.12em; }
}

/* Portada de sección con frase (#160: Videotutoriales y Recursos, como Herramientas): el nombre
   de la sección, que es el h1, va en la línea del número; debajo, la frase del manifiesto en
   grande (se desliza con el desplazamiento) y las casillas para elegir. */
.cabeza-num h1 { display: inline; font: inherit; letter-spacing: inherit; color: var(--tinta); font-weight: 500; }
.cabeza-portada .frase { margin: 0; }


/* ---------- Índice: casillas grandes e ilustradas (#167) ----------
   Las de antes de #160, que el responsable prefería: una columna por destino, con un dibujo
   grande de línea (320 × 320) que cobra color (.cobra) y, debajo, el número con su antetítulo, el
   nombre en grande, una línea y «Abrir ›». Tres en Herramientas (.columnas-tres), dos en
   Videotutoriales y Recursos. Lo decidido en #160 sigue: la casilla no tiene fondo de color, ni en
   reposo ni activa (no lleva .cobra-casilla); al activarse, su nombre se rellena del tono de su
   capítulo (.relleno-tono) y su dibujo cobra color. Sin ratón, las dos cosas al aparecer en
   pantalla. Llegan a los bordes de la página con su propio margen. En la tableta, apiladas;
   en el móvil, en filas como las de la lista de Lecciones (tras #169). */
.indice { margin-top: clamp(28px, 5vh, 56px); }
.columnas-casillas {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0 calc(var(--margen) * -1); padding: 0; list-style: none;
  border-top: 1px solid var(--tinta); border-bottom: 1px solid var(--linea);
}
.columnas-casillas.columnas-tres { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.columnas-casillas > li { display: flex; min-width: 0; }
.columnas-casillas > li + li { border-left: 1px solid var(--linea); }
.columna-casilla {
  display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: 24px; width: 100%;
  min-height: clamp(460px, calc(100svh - var(--barra-alto) - 200px), 720px);
  padding: 28px var(--margen) 40px; text-decoration: none; color: var(--tinta);
}
.columnas-tres .columna-casilla { padding-inline: clamp(20px, 2.4vw, 40px); }
.columnas-tres > li:first-child .columna-casilla { padding-left: var(--margen); }
.columnas-tres > li:last-child .columna-casilla { padding-right: var(--margen); }
.columna-casilla:focus-visible { outline-offset: -4px; }
.columna-casilla .columna-dibujo { display: grid; place-items: center; min-height: 0; }
.columna-casilla .columna-dibujo svg { width: 100%; max-width: 420px; height: auto; max-height: 100%; overflow: visible; }
.columna-casilla .columna-texto { display: grid; gap: 12px; justify-items: start; }
.columna-num { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--secundario); font-variant-numeric: tabular-nums; }
.columna-nombre { font-size: clamp(32px, 3.8vw, 56px); font-weight: 300; letter-spacing: -0.03em; line-height: 1.02; }
.columnas-tres .columna-nombre { font-size: clamp(28px, 2.9vw, 44px); }
.columna-casilla p { max-width: 46ch; color: var(--secundario); }
.columna-casilla .columna-ir {
  margin-top: 4px; font-size: 15px; font-weight: 500;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px;
}
.columna-casilla:is(:hover, :focus-visible) .columna-ir { text-decoration-thickness: 2px; }
/* La Mesa de trabajo de un dibujo es papel blanco también en oscuro: lo de dentro, en tinta oscura. */
.columna-mesa { --tinta: #141414; --fondo: var(--hoja); --acento: var(--acento-claro); }
@media (max-width: 1100px) {
  .columnas-tres .columna-dibujo svg { max-width: 300px; }
}
@media (max-width: 820px) {
  .columnas-casillas, .columnas-casillas.columnas-tres { grid-template-columns: minmax(0, 1fr); }
  .columnas-casillas > li + li { border-left: 0; border-top: 1px solid var(--linea); }
  .columna-casilla,
  .columnas-tres .columna-casilla,
  .columnas-tres > li:first-child .columna-casilla,
  .columnas-tres > li:last-child .columna-casilla { min-height: 0; padding: 24px var(--margen) 32px; }
  .columna-casilla .columna-dibujo svg, .columnas-tres .columna-dibujo svg { max-width: 320px; }
  .columna-nombre, .columnas-tres .columna-nombre { font-size: clamp(30px, 8vw, 44px); }
}
/* En el móvil (tras #169), cada casilla es una fila como las de la lista de Lecciones de una serie
   (.vt-serie .vt-indice, videotutoriales/videotutoriales.css): el número (.columna-fila-num), el
   dibujo pequeño de 96 × 64 que cobra color (.columna-mini, del estilo de las Lecciones) y el
   nombre en letra ligera con, debajo, una bajada muy breve en versalitas (.columna-bajada). Entre
   filas, líneas finas; sin fondo de color. Al activarse (ratón, foco o, sin ratón, al aparecer),
   el nombre se rellena del tono de su capítulo en peso 500 y el dibujo cobra color; con movimiento
   reducido, sin animación. El dibujo grande, el antetítulo, el texto y «Abrir ›» no se ven; el
   texto sigue siendo la descripción del enlace (aria-describedby). En escritorio y tableta, nada
   de esto se ve. */
.columna-fila-num, .columna-mini, .columna-bajada { display: none; }
@media (max-width: 700px) {
  .columna-casilla,
  .columnas-tres .columna-casilla,
  .columnas-tres > li:first-child .columna-casilla,
  .columnas-tres > li:last-child .columna-casilla {
    grid-template-columns: 2.4em auto minmax(0, 1fr); grid-template-rows: auto;
    align-items: center; gap: 0 14px; padding: 14px var(--margen);
  }
  .columna-casilla .columna-dibujo,
  .columna-casilla .columna-num,
  .columna-casilla p,
  .columna-casilla .columna-ir { display: none; }
  .columna-fila-num { display: block; font-size: 13px; letter-spacing: .12em; color: var(--secundario); font-variant-numeric: tabular-nums; }
  .columna-mini { display: block; width: 60px; height: 40px; overflow: visible; }
  .columna-casilla .columna-texto { gap: 4px; }
  .columna-nombre, .columnas-tres .columna-nombre { font-size: 22px; letter-spacing: -0.025em; line-height: 1.1; }
  .columna-bajada { display: block; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--secundario); }
}

/* ---------- Relleno de tono (#160) ----------
   En Herramientas, Videotutoriales y Recursos el color va en segundo plano: nada se llena de
   fondo. Al pasar el ratón, con el foco o (sin ratón) al aparecer en pantalla, el nombre de la
   casilla o del destino (.relleno-tono, dentro de un .cobra con data-cobra-tramo) se rellena de
   izquierda a derecha del tono de texto de su capítulo (--cobra-tono, AA sobre el papel, de
   scripts/tramos.js) y pasa a seminegrita (500: el peso más alto de la Hanken Grotesk servida;
   600 salía sintetizado y demasiado grueso). Es el propio texto el que se pinta (background-clip:
   text), no una caja. Con movimiento reducido, de golpe; con colores forzados, texto normal. */
.relleno-tono {
  background: linear-gradient(90deg, var(--cobra-tono, var(--tinta)) 0 50%, var(--tinta) 50% 100%) 100% 0 / 200% 100% no-repeat;
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}
.cobra:is(:hover, :focus-visible, [data-en-vista]) .relleno-tono { background-position: 0 0; font-weight: 500; }
@media (prefers-reduced-motion: no-preference) {
  .relleno-tono { transition: background-position .6s var(--curva-capitulo); }
}
/* El número de un capítulo sin fondo de color lleva su tono; los tramos de papel seguidos se
   separan con una línea fina (los picos del corte no se verían). */
.capitulo-tono .ficha-num span { color: var(--cobra-tono); }
main > [data-tramo="papel"] + [data-tramo="papel"] { border-top: 1px solid var(--linea); }
main > [data-tramo="papel"] + [data-tramo="papel"]::before { display: none; }
@media (forced-colors: active) {
  .relleno-tono { background: none; color: CanvasText; -webkit-text-fill-color: CanvasText; }
}
@media print {
  .relleno-tono { background: none; color: inherit; -webkit-text-fill-color: currentColor; }
}

/* ---------- Cierre: cada destino se llena del color de su capítulo (.cobra-barrido) ---------- */
/* Va en el contenedor de la página, alineado con el pie, que va cosido debajo. */
.cierre { padding-block: clamp(64px, 11vh, 140px) clamp(48px, 8vh, 96px); }
.cierre-frase { max-width: 15em; margin-bottom: clamp(32px, 6vh, 80px); font-size: clamp(36px, 5.4vw, 92px); font-weight: 300; letter-spacing: -0.035em; line-height: 1.02; }
.destinos { max-width: 1360px; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--linea); }
.destinos a {
  --cobra-desborde: var(--margen);
  display: grid; grid-template-columns: 3em 1fr auto; align-items: baseline; gap: 16px;
  padding: 14px 12px 14px 0; border-bottom: 1px solid var(--linea); text-decoration: none;
}
.destinos a:focus-visible { outline-offset: -3px; }
.destino-num { font-size: 13px; letter-spacing: .12em; color: var(--secundario); font-variant-numeric: tabular-nums; }
.destino-nombre { font-size: clamp(28px, 4.4vw, 68px); font-weight: 300; letter-spacing: -0.035em; line-height: 1.05; text-transform: uppercase; }
.destinos small { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--secundario); white-space: nowrap; }
@media (max-width: 560px) { .destinos a { grid-template-columns: 2.2em 1fr; } .destinos small { display: none; } }

/* El pie va cosido al cierre, sin hueco de papel entre los dos. */
main:has(> .cierre:last-child) + .etiqueta { margin-top: 0; }
/* Y al último tramo de una página interior (su contenido ya deja su aire). */
main:has(> [data-tramo]:last-child) + .etiqueta { margin-top: 0; }

/* ---------- Movimiento (solo si se puede) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .flecha { transition: transform .35s var(--curva-capitulo); }
  a:is(:hover, :focus-visible) .flecha { transform: translateX(6px); }
  /* El título de la cabeza sube al cargar; lo demás llega después. */
  .cabeza-titulo > span { animation: capitulo-sube 1s var(--curva-capitulo) both; }
  .cabeza-cifra { animation: capitulo-llega 1.2s var(--curva-capitulo) .2s both; }
  .cabeza-bajada, .cabeza-pie, .indice { animation: capitulo-llega .8s var(--curva-capitulo) .35s both; }
}
/* Las frases del manifiesto se deslizan con fuerza al bajar (data-v de 12 a 18 vw, en sentidos
   alternos). El reposo (desplazamiento 0) llega cuando la frase está en la zona de lectura (el
   primer tercio del recorrido de su tramo), no a mitad del capítulo, para que se lean enteras. En
   pantallas táctiles estrechas el recorrido se amplía: en 390 px unos vw apenas se notan. */
@media (prefers-reduced-motion: no-preference) {
  .frase .desliza[data-v] { transform: translate3d(calc((var(--p, .35) - .35) * var(--v, 0) * 1vw), 0, 0); }
}
@media (prefers-reduced-motion: no-preference) and (max-width: 720px) {
  .frase .desliza[data-v] { transform: translate3d(calc((var(--p, .35) - .35) * var(--v, 0) * 1.5vw), 0, 0); }
}
@keyframes capitulo-sube { from { transform: translateY(102%); } }
@keyframes capitulo-llega { from { opacity: 0; transform: translateY(12px); } }

@media print {
  .cabeza-cifra { display: none; }
}