/*
  Inicio del rediseño B (#147): un recorrido de manifiesto con las cinco herramientas a mano desde
  el primer pantallazo. Se apoya en lo común: tramos de «Piedra y tinta» (data-tramo, #143),
  movimiento (#142: data-progreso, .desliza, .entra, .destacada), demostraciones (#145, /comun/gifs.css),
  efecto de color (#146: .cobra-casilla, .cobra-barrido), cabecera (#144) y pie (#148).
  Las frases salen del manifiesto (comun/manifiesto.json, npm run barra).

  Orden de tramos (#158, un color por capítulo; cartas en scripts/tramos.js): portada en papel ·
  01 Estudio de diseño · banda del tejido en papel · 02 Cuaderno de bocetos · 03 Videotutoriales ·
  04 Recursos · 05 Teselador, cada uno con el color de su capítulo · cierre en tinta.
  Solo se animan transform y opacidad; con movimiento reducido, todo quieto y legible.
  Lo que Inicio comparte con Herramientas, Videotutoriales y Recursos (el contenedor ancho, los
  capítulos, la ficha, la frase, el cierre y los destinos) está en /comun/capitulos.css (#149).
*/

:root {
  --curva-inicio: cubic-bezier(.2, .7, .2, 1); --papel-foto: #efece6;
  /* La casilla del Estudio de diseño, en tinta llena; en oscuro, en negativo (papel sobre tinta). */
  --principal-fondo: #141414; --principal-tinta: #ededeb; --principal-secundario: #a2a29e; --principal-linea: #373736; --principal-acento: var(--acento-oscuro);
}
@media (prefers-color-scheme: dark) {
  :root { --principal-fondo: #ededeb; --principal-tinta: #141414; --principal-secundario: #55534f; --principal-linea: #cfcfcb; --principal-acento: var(--acento-claro); }
}

/* ---------- Portada ----------
   El titular y los accesos a la izquierda; a la derecha, a sangre y de la cabecera al final de la
   portada, el desfile sobre papel con grano (es «la foto»: igual en claro y en oscuro). En el
   móvil, el desfile es una banda recortada arriba; en la tableta vertical, una banda alta con la
   pasarela entera. */
.portada {
  display: grid; grid-template-columns: minmax(0, 1fr);
  padding: 0 var(--margen);
}
.portada-texto { display: grid; gap: clamp(14px, 2.4vh, 28px); padding: 24px 0 26px; min-width: 0; }
.titular {
  font-size: max(46px, 13.2vw); font-weight: 300; text-transform: uppercase;
  letter-spacing: -0.045em; line-height: .9;
}
.renglon { display: block; overflow: hidden; padding-bottom: .03em; margin-bottom: -.03em; }
.renglon > span { display: inline-block; }
.portada-bajada { max-width: 25em; font-size: clamp(16px, 1.3vw, 19px); color: var(--secundario); }

.portada-figura {
  /* Dentro de la foto, los colores del papel, sea cual sea el modo. */
  --fondo: var(--papel-foto); --tinta: #141414; --secundario: #55524a; --linea: #c9c5bb; --foco: #141414;
  order: -1; position: relative; margin: 0 calc(var(--margen) * -1); overflow: hidden;
  height: 36svh; min-height: 230px;
  background: var(--papel-foto) url("/comun/gifs/grano.png");
  color: var(--tinta);
}
.portada-escena { position: absolute; inset: 0; }
/* En el móvil la escena va a lo ancho y se recorta por arriba y por abajo, centrada en el vestido. */
.portada-svg { position: absolute; left: 0; top: 50%; display: block; width: 100%; height: auto; aspect-ratio: 600 / 900; translate: 0 -44%; }
.portada-pausa { position: absolute; right: var(--margen); bottom: 12px; z-index: 2; background: var(--fondo); }
.portada-figura:is([data-gif-estado="pausada"], [data-gif-estado="quieta"]) .gif-pausa-icono {
  width: 0; height: 0; border: 0; border-left: 8px solid currentColor; border-block: 5px solid transparent;
}

/* Accesos directos: cinco casillas que toman el color del tramo de su capítulo (.cobra-casilla);
   la del Estudio de diseño, la herramienta principal, en tinta llena. */
.accesos { margin: 0 calc(var(--margen) * -1); }
.accesos ul { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--tinta); }
.acceso + .acceso { border-top: 1px solid var(--linea); }
.acceso > a {
  display: grid; grid-template-columns: 2.2em minmax(0, 1fr) auto; align-items: baseline; gap: 2px 12px;
  padding: 13px var(--margen); text-decoration: none;
}
.acceso > a:focus-visible { outline-offset: -4px; }
.acceso-principal > a {
  --fondo: var(--principal-fondo); --tinta: var(--principal-tinta); --secundario: var(--principal-secundario);
  --linea: var(--principal-linea); --acento: var(--principal-acento); --foco: var(--principal-tinta);
}
.acceso-num { font-size: 12px; letter-spacing: .14em; color: var(--secundario); font-variant-numeric: tabular-nums; }
.acceso-nombre { font-size: 19px; font-weight: 400; letter-spacing: -0.01em; line-height: 1.15; }
.acceso-texto { display: none; font-size: 13px; line-height: 1.35; color: var(--secundario); }
.acceso-dibujo { display: none; width: 84px; height: 30px; overflow: visible; color: var(--tinta); }
.acceso-ir { font-size: 12px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; }
.acceso-principal .acceso-texto { display: block; grid-column: 2 / 4; }
.acceso-principal .acceso-ir { grid-column: 3; grid-row: 1; }
.cobra:is(:hover, :focus-visible, [data-en-vista]) .acc-tecla-p { fill: #ffffff; }
.cobra:is(:hover, :focus-visible, [data-en-vista]) .acc-tecla-z { fill: #141414; }
/* Sin ratón, las casillas no se encienden todas a la vez al aparecer: una regla de cinco colores
   seguidos en el primer pantallazo del móvil taparía el titular. Allí cobran color al tocarlas. */
@media (hover: none) {
  .accesos .cobra-casilla[data-en-vista]:not(:focus-visible):not(:active) {
    --fondo: inherit; --tinta: inherit; --secundario: inherit; --linea: inherit; --acento: inherit; --foco: inherit;
  }
  .accesos .acceso-principal > .cobra-casilla[data-en-vista]:not(:focus-visible):not(:active) {
    --fondo: var(--principal-fondo); --tinta: var(--principal-tinta); --secundario: var(--principal-secundario);
    --linea: var(--principal-linea); --acento: var(--principal-acento); --foco: var(--principal-tinta);
  }
}

/* Tableta vertical: banda alta con la pasarela entera (los looks entran y salen por el borde de la
   banda); debajo, el titular y las casillas en dos columnas, la del Estudio de diseño a lo ancho,
   para que el titular y los cinco accesos quepan en la primera vista. */
@media (min-width: 600px) {
  .portada-figura { height: 50svh; }
  .portada-svg { top: 0; height: 100%; translate: none; }
  .portada-texto { padding: 22px 0; }
  .titular { font-size: clamp(46px, 8.6vw, 120px); }
  .accesos ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .acceso-principal { grid-column: 1 / -1; }
  .acceso:nth-child(odd):not(.acceso-principal) { border-left: 1px solid var(--linea); }
  .acceso > a { height: 100%; grid-template-columns: 2.4em minmax(0, 1fr) auto auto; align-items: center; padding-block: 12px; }
  .acceso-num { grid-row: 1 / span 2; }
  .acceso-texto { display: block; grid-column: 2; grid-row: 2; }
  .acceso-principal .acceso-texto { grid-column: 2; }
  .acceso-principal .acceso-ir { grid-column: 4; grid-row: 1 / span 2; }
  .acceso-dibujo { display: block; grid-column: 3; grid-row: 1 / span 2; width: 64px; }
  .acceso-ir { grid-column: 4; grid-row: 1 / span 2; }
}
@media (min-width: 600px) and (max-width: 900px) {
  .portada-bajada { display: none; }
  .acceso:not(.acceso-principal) .acceso-texto { display: none; }
}

/* Escritorio y tableta horizontal: media pantalla cada uno. */
@media (min-width: 1024px), (min-width: 761px) and (min-aspect-ratio: 1 / 1) {
  .portada {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: 1fr auto;
    column-gap: clamp(24px, 3vw, 56px);
    min-height: calc(100svh - var(--cabecera-alto));
  }
  .portada-texto { grid-column: 1; grid-row: 1; align-self: end; padding: 32px 0 28px; }
  .titular { font-size: clamp(48px, 7.4vw, 136px); }
  .portada-figura { grid-column: 2; grid-row: 1 / span 2; height: auto; min-height: 0; margin: 0 calc(var(--margen) * -1) 0 0; }
  .portada-pausa { bottom: 16px; right: 16px; }
  .accesos { grid-column: 1; grid-row: 2; margin: 0 0 0 calc(var(--margen) * -1); }
  .accesos ul { display: block; }
  .acceso:nth-child(odd):not(.acceso-principal) { border-left: 0; }
  .acceso-dibujo { width: 84px; }
}
/* Pantallas bajas (1024 × 768, 1366 × 768): el titular y las cinco casillas caben en la primera vista. */
@media (min-width: 761px) and (min-aspect-ratio: 1 / 1) and (max-height: 820px) {
  .portada-texto { padding-top: 20px; gap: 12px; }
  .titular { font-size: clamp(48px, min(7.4vw, 14vh), 136px); }
  .acceso > a { padding-block: 8px; }
  .acceso > a { gap: 2px 16px; padding: 10px 16px 10px var(--margen); }
  .acceso-nombre { font-size: clamp(17px, 1.45vw, 22px); }
}
@media (min-width: 761px) and (max-width: 1100px) and (min-aspect-ratio: 1 / 1) {
  .acceso-texto, .acceso-dibujo { display: none; }
  .acceso-principal .acceso-texto { display: block; }
}
@media (max-width: 560px) { .portada-bajada { display: none; } }

/* ---------- Capítulos (lo común: /comun/capitulos.css) ---------- */
.capitulo-cuerpo.inicio-dibujo { justify-items: stretch; }
.gif-columna { display: grid; justify-items: center; gap: 16px; min-width: 0; }
.gif-columna > [data-ilustracion] { width: 100%; }

/* ---------- Banda del tejido: la frase al lado de una muestra de vichy que crece al bajar ----------
   El texto nunca pisa el tejido: va sobre el hueso liso (AA sin cajas ni tiras de fondo) y la
   muestra, en su propia columna, a sangre por la derecha. En pantallas estrechas, la muestra
   arriba a la derecha y la frase debajo. Crece de la mitad a su tamaño en el primer tramo del
   recorrido de la banda por la pantalla (--p), desde su borde exterior, lejos del texto. */
.banda-tejido {
  display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; gap: 28px 0;
  padding: clamp(56px, 9vh, 96px) var(--margen); overflow: clip;
}
.muestra-vichy {
  order: -1; justify-self: end; width: 62vw; max-width: 420px; aspect-ratio: 1;
  margin-right: calc(var(--margen) * -1 - 12vw);
  border-radius: 50%; overflow: hidden; transform-origin: 100% 50%;
}
.muestra-vichy svg { display: block; width: 100%; height: 100%; }
.banda-tejido .frase[data-frase="tejido"] { margin: 0; font-size: 10.4vw; }
.banda-tejido .frase .desliza { white-space: normal; }
.enlace-sobre-tela { justify-self: start; font-size: 18px; }
@media (min-width: 600px) and (max-width: 899px) {
  .muestra-vichy { width: 44vw; margin-right: calc(var(--margen) * -1 - 6vw); }
  .banda-tejido .frase[data-frase="tejido"] { font-size: 8.6vw; }
  .banda-tejido { gap: 20px 0; }
}
@media (min-width: 900px) {
  .banda-tejido { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: clamp(32px, 4vw, 72px); }
  .banda-tejido .frase[data-frase="tejido"] { grid-column: 1; grid-row: 1; align-self: end; font-size: clamp(40px, 6vw, 110px); }
  .enlace-sobre-tela { grid-column: 1; grid-row: 2; align-self: start; }
  .muestra-vichy {
    grid-column: 2; grid-row: 1 / span 2; order: 0; width: auto; max-width: none;
    height: clamp(320px, 34vw, 560px); margin-right: calc(var(--margen) * -1 - 4vw);
  }
}

/* ---------- Movimiento (solo si se puede) ---------- */
@media (prefers-reduced-motion: no-preference) {
  /* El titular sube renglón a renglón al cargar; la bajada y los accesos llegan después. */
  .renglon > span { animation: inicio-sube 1.1s var(--curva-inicio) both; }
  .renglon:nth-child(2) > span { animation-delay: .08s; }
  .renglon:nth-child(3) > span { animation-delay: .16s; }
  .renglon:nth-child(4) > span { animation-delay: .24s; }
  .portada-bajada, .accesos { animation: inicio-llega .8s var(--curva-inicio) .45s both; }
  .accesos { animation-delay: .6s; }
  [data-progreso] .muestra-vichy { transform: scale(calc(.5 + min(var(--p, .5), .6) / .6 * .5)); will-change: transform; }
}
/* La frase de la banda llega a su sitio a mitad del recorrido (las demás, en /comun/capitulos.css). */
@media (prefers-reduced-motion: no-preference) {
  .banda-tejido .frase .desliza[data-v] { transform: translate3d(calc((var(--p, .5) - .5) * var(--v, 0) * 1vw), 0, 0); }
}
@media (prefers-reduced-motion: no-preference) and (max-width: 720px) {
  .banda-tejido .frase .desliza[data-v] { transform: translate3d(calc((var(--p, .5) - .5) * var(--v, 0) * 1.5vw), 0, 0); }
}
@keyframes inicio-sube { from { transform: translateY(102%); } }

/* La hoja «Iniciar lienzo» lleva los colores de la página (papel), sea cual sea el color del
   capítulo del Cuaderno de bocetos: el estuche y la tinta se ven como siempre. */
#cuaderno .hoja-dibujo, #cuaderno .hoja-dialogo {
  --fondo: var(--tramo-papel-fondo); --superficie: var(--tramo-papel-superficie); --tinta: var(--tramo-papel-tinta);
  --secundario: var(--tramo-papel-secundario); --linea: var(--tramo-papel-linea); --acento: var(--tramo-papel-acento);
  --boton: var(--tramo-papel-boton); --boton-texto: var(--tramo-papel-boton-texto); --foco: var(--tramo-papel-foco);
  background: var(--fondo); color: var(--tinta);
}
#cuaderno .hoja-dibujo { padding: 14px; border-radius: var(--radio); }
@keyframes inicio-llega { from { opacity: 0; transform: translateY(12px); } }

@media (forced-colors: active) {
  .portada-figura { border: 1px solid CanvasText; }
  .acceso > a { border-left: 0; }
}