/*
  Hoja común «Taller» (dirección visual C).
  Blanco y negro, como una ficha técnica de patronaje: blanco roto, tinta, líneas finas y
  esquinas de 2 px. El verde petróleo es la única nota de color, escasa e intencionada,
  como el abrigo rojo de «La lista de Schindler»: uno o dos detalles por pantalla
  (en Inicio, el tejido del vestido y la sección activa de la barra). El foco es de tinta.
  Dentro del Estudio de diseño y el Teselador el acento sigue marcando la selección y el foco.
  Prohibido: serif, crema, rosa, degradados y emojis.
*/

/* ---------- Letras ----------
  Servidas desde la propia web (subconjunto latino, el de Google Fonts): sin conexión a terceros
  y sin enviar la IP del alumnado a Google. Hanken Grotesk es variable (300-500 en un archivo)
  y es la única familia: nada de monoespaciada. Medidas, cifras y atajos van con cifras tabulares
  (`font-variant-numeric: tabular-nums`) para que las columnas de números sigan alineadas. */
@font-face {
  font-family: "Hanken Grotesk";
  font-style: normal;
  font-weight: 300 500;
  font-display: swap;
  src: url("/comun/fuentes/hanken-grotesk.woff2") format("woff2");
}

/* ---------- Tokens ---------- */
:root {
  --fondo: #fcfcfb;
  --superficie: #f2f2f0;
  --tinta: #141414;
  --secundario: #6d6d6a;
  --linea: #e2e2df;
  --mesa: #e9e9e6;          /* gris neutro alrededor de la Mesa de trabajo */
  --hoja: #ffffff;          /* la propia Mesa de trabajo */
  --acento: var(--acento-claro); /* la nota de color (#161: su valor, en comun/acento.js): pocos detalles, siempre intencionados */
  --foco: var(--tinta);     /* contorno del foco del teclado en la web */
  --boton: #141414;
  --boton-texto: #fcfcfb;

  --letra: "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;

  --radio: 2px;
  --barra-alto: 52px;
  --margen: 40px;
  --ancho: 1200px;

  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --fondo: #121212;
    --superficie: #1b1b1a;
    --tinta: #ededeb;
    --secundario: #a2a29e;
    --linea: #2e2e2c;
    --mesa: #2a2a28;
    --hoja: #ffffff;
    --acento: var(--acento-oscuro);
    --boton: #ededeb;
    --boton-texto: #121212;
  }
}

@media (max-width: 720px) {
  :root { --margen: 16px; }
}

/* ===== Tramos (#143): generado por scripts/tramos.js (npm run tramos); no editar a mano ===== */
/*
  Paleta «Piedra y tinta» (rediseño B). Cada tramo de una página lleva data-tramo="<nombre>":
  papel, hueso y piedra (de papel) se alternan con grafito, tinta y petroleo (de tinta, el
  verde petróleo es la única nota de color). Dentro de un tramo se redeclaran los tokens de
  siempre, así que lo que vive dentro usa var(--tinta), var(--acento)… sin más.
  Lo que está fuera de los tramos (la cabecera, la barra de progreso) lee el tramo que queda
  bajo la cabecera: comun/tramos.js pone data-tramo-actual en <html>, la cabecera con la clase
  .cabecera-tramo toma todos sus tokens y en :root quedan --fondo-tramo, --tinta-tramo,
  --secundario-tramo y --acento-tramo.
  El acento (#161) vive en --acento-claro y --acento-oscuro (comun/acento.js); los tokens que son
  el acento los leen de ahí. Con data-acento en <html> se prueba otro acento.
*/
:root {
  --tramo-papel-fondo: #fcfcfb; --tramo-papel-superficie: #f2f2f0; --tramo-papel-tinta: #141414; --tramo-papel-secundario: #6d6d6a; --tramo-papel-linea: #e2e2df; --tramo-papel-acento: var(--acento-claro); --tramo-papel-boton: #141414; --tramo-papel-boton-texto: #fcfcfb; --tramo-papel-foco: #141414; --tramo-papel-tono: #737357;
  --tramo-hueso-fondo: #f0ede6; --tramo-hueso-superficie: #e3e0d9; --tramo-hueso-tinta: #141414; --tramo-hueso-secundario: #6a6966; --tramo-hueso-linea: #d3d1cb; --tramo-hueso-acento: var(--acento-claro); --tramo-hueso-boton: #141414; --tramo-hueso-boton-texto: #f0ede6; --tramo-hueso-foco: #141414; --tramo-hueso-tono: #80714d;
  --tramo-piedra-fondo: #d8d4ca; --tramo-piedra-superficie: #ccc8bf; --tramo-piedra-tinta: #141414; --tramo-piedra-secundario: #5b5956; --tramo-piedra-linea: #bfbbb2; --tramo-piedra-acento: var(--acento-claro); --tramo-piedra-boton: #141414; --tramo-piedra-boton-texto: #d8d4ca; --tramo-piedra-foco: #141414; --tramo-piedra-tono: #7b725b;
  --tramo-grafito-fondo: #2a2a27; --tramo-grafito-superficie: #363633; --tramo-grafito-tinta: #ededeb; --tramo-grafito-secundario: #939391; --tramo-grafito-linea: #494946; --tramo-grafito-acento: var(--acento-oscuro); --tramo-grafito-boton: #ededeb; --tramo-grafito-boton-texto: #2a2a27; --tramo-grafito-foco: #ededeb; --tramo-grafito-tono: #2a2a27;
  --tramo-tinta-fondo: #141414; --tramo-tinta-superficie: #212121; --tramo-tinta-tinta: #ededeb; --tramo-tinta-secundario: #818180; --tramo-tinta-linea: #373736; --tramo-tinta-acento: var(--acento-oscuro); --tramo-tinta-boton: #ededeb; --tramo-tinta-boton-texto: #141414; --tramo-tinta-foco: #ededeb; --tramo-tinta-tono: #141414;
  --tramo-petroleo-fondo: var(--acento-claro); --tramo-petroleo-superficie: #36685b; --tramo-petroleo-tinta: #ededeb; --tramo-petroleo-secundario: #c6d1cc; --tramo-petroleo-linea: #49766a; --tramo-petroleo-acento: #ededeb; --tramo-petroleo-boton: #ededeb; --tramo-petroleo-boton-texto: var(--acento-claro); --tramo-petroleo-foco: #ededeb; --tramo-petroleo-tono: var(--acento-claro);
  --tramo-eucalipto-estudio-fondo: #4b675b; --tramo-eucalipto-estudio-superficie: #556f64; --tramo-eucalipto-estudio-tinta: #ededeb; --tramo-eucalipto-estudio-secundario: #dde0dd; --tramo-eucalipto-estudio-linea: #657c72; --tramo-eucalipto-estudio-acento: var(--acento-oscuro); --tramo-eucalipto-estudio-boton: #ededeb; --tramo-eucalipto-estudio-boton-texto: #4b675b; --tramo-eucalipto-estudio-foco: #ededeb; --tramo-eucalipto-estudio-tono: #4b675b;
  --tramo-eucalipto-cuaderno-fondo: #1b2a23; --tramo-eucalipto-cuaderno-superficie: #28362f; --tramo-eucalipto-cuaderno-tinta: #ededeb; --tramo-eucalipto-cuaderno-secundario: #8a918d; --tramo-eucalipto-cuaderno-linea: #3d4943; --tramo-eucalipto-cuaderno-acento: var(--acento-oscuro); --tramo-eucalipto-cuaderno-boton: #ededeb; --tramo-eucalipto-cuaderno-boton-texto: #1b2a23; --tramo-eucalipto-cuaderno-foco: #ededeb; --tramo-eucalipto-cuaderno-tono: #1b2a23;
  --tramo-eucalipto-videotutoriales-fondo: #93ad9f; --tramo-eucalipto-videotutoriales-superficie: #8ba497; --tramo-eucalipto-videotutoriales-tinta: #141414; --tramo-eucalipto-videotutoriales-secundario: #363d3a; --tramo-eucalipto-videotutoriales-linea: #82998d; --tramo-eucalipto-videotutoriales-acento: var(--acento-claro); --tramo-eucalipto-videotutoriales-boton: #141414; --tramo-eucalipto-videotutoriales-boton-texto: #93ad9f; --tramo-eucalipto-videotutoriales-foco: #141414; --tramo-eucalipto-videotutoriales-tono: #5c7969;
  --tramo-eucalipto-recursos-fondo: #324a40; --tramo-eucalipto-recursos-superficie: #3d544a; --tramo-eucalipto-recursos-tinta: #ededeb; --tramo-eucalipto-recursos-secundario: #adb6b1; --tramo-eucalipto-recursos-linea: #50645b; --tramo-eucalipto-recursos-acento: var(--acento-oscuro); --tramo-eucalipto-recursos-boton: #ededeb; --tramo-eucalipto-recursos-boton-texto: #324a40; --tramo-eucalipto-recursos-foco: #ededeb; --tramo-eucalipto-recursos-tono: #324a40;
  --tramo-eucalipto-teselador-fondo: #c9d6cd; --tramo-eucalipto-teselador-superficie: #becac2; --tramo-eucalipto-teselador-tinta: #141414; --tramo-eucalipto-teselador-secundario: #555a57; --tramo-eucalipto-teselador-linea: #b1bdb5; --tramo-eucalipto-teselador-acento: var(--acento-claro); --tramo-eucalipto-teselador-boton: #141414; --tramo-eucalipto-teselador-boton-texto: #c9d6cd; --tramo-eucalipto-teselador-foco: #141414; --tramo-eucalipto-teselador-tono: #5b7864;
}
@media (prefers-color-scheme: dark) {
  :root {
    --tramo-papel-fondo: #121212; --tramo-papel-superficie: #1b1b1a; --tramo-papel-tinta: #ededeb; --tramo-papel-secundario: #a2a29e; --tramo-papel-linea: #2e2e2c; --tramo-papel-acento: var(--acento-oscuro); --tramo-papel-boton: #ededeb; --tramo-papel-boton-texto: #121212; --tramo-papel-foco: #ededeb; --tramo-papel-tono: #fcfcfb;
    --tramo-hueso-fondo: #0e0e0c; --tramo-hueso-superficie: #1b1b19; --tramo-hueso-tinta: #ededeb; --tramo-hueso-secundario: #7e7e7c; --tramo-hueso-linea: #323230; --tramo-hueso-acento: var(--acento-oscuro); --tramo-hueso-boton: #ededeb; --tramo-hueso-boton-texto: #0e0e0c; --tramo-hueso-foco: #ededeb; --tramo-hueso-tono: #f0ede6;
    --tramo-piedra-fondo: #181715; --tramo-piedra-superficie: #252422; --tramo-piedra-tinta: #ededeb; --tramo-piedra-secundario: #838280; --tramo-piedra-linea: #3a3937; --tramo-piedra-acento: var(--acento-oscuro); --tramo-piedra-boton: #ededeb; --tramo-piedra-boton-texto: #181715; --tramo-piedra-foco: #ededeb; --tramo-piedra-tono: #d8d4ca;
    --tramo-grafito-fondo: #3a3936; --tramo-grafito-superficie: #454441; --tramo-grafito-tinta: #ededeb; --tramo-grafito-secundario: #a5a5a3; --tramo-grafito-linea: #575653; --tramo-grafito-acento: var(--acento-oscuro); --tramo-grafito-boton: #ededeb; --tramo-grafito-boton-texto: #3a3936; --tramo-grafito-foco: #ededeb; --tramo-grafito-tono: #7f7f76;
    --tramo-tinta-fondo: #43423e; --tramo-tinta-superficie: #4d4c48; --tramo-tinta-tinta: #ededeb; --tramo-tinta-secundario: #b2b1ae; --tramo-tinta-linea: #5e5d5a; --tramo-tinta-acento: var(--acento-oscuro); --tramo-tinta-boton: #ededeb; --tramo-tinta-boton-texto: #43423e; --tramo-tinta-foco: #ededeb; --tramo-tinta-tono: #7f7f7f;
    --tramo-petroleo-fondo: #224c42; --tramo-petroleo-superficie: #2e564c; --tramo-petroleo-tinta: #ededeb; --tramo-petroleo-secundario: #aab8b3; --tramo-petroleo-linea: #42665d; --tramo-petroleo-acento: #ededeb; --tramo-petroleo-boton: #ededeb; --tramo-petroleo-boton-texto: #224c42; --tramo-petroleo-foco: #ededeb; --tramo-petroleo-tono: #3e8d7a;
    --tramo-eucalipto-estudio-fondo: #4c695c; --tramo-eucalipto-estudio-superficie: #567165; --tramo-eucalipto-estudio-tinta: #ededeb; --tramo-eucalipto-estudio-secundario: #e0e2e0; --tramo-eucalipto-estudio-linea: #667e73; --tramo-eucalipto-estudio-acento: var(--acento-oscuro); --tramo-eucalipto-estudio-boton: #ededeb; --tramo-eucalipto-estudio-boton-texto: #4c695c; --tramo-eucalipto-estudio-foco: #ededeb; --tramo-eucalipto-estudio-tono: #638778;
    --tramo-eucalipto-cuaderno-fondo: #2c4138; --tramo-eucalipto-cuaderno-superficie: #384b43; --tramo-eucalipto-cuaderno-tinta: #ededeb; --tramo-eucalipto-cuaderno-secundario: #a4aca7; --tramo-eucalipto-cuaderno-linea: #4b5d55; --tramo-eucalipto-cuaderno-acento: var(--acento-oscuro); --tramo-eucalipto-cuaderno-boton: #ededeb; --tramo-eucalipto-cuaderno-boton-texto: #2c4138; --tramo-eucalipto-cuaderno-foco: #ededeb; --tramo-eucalipto-cuaderno-tono: #598a73;
    --tramo-eucalipto-videotutoriales-fondo: #15211b; --tramo-eucalipto-videotutoriales-superficie: #222d27; --tramo-eucalipto-videotutoriales-tinta: #ededeb; --tramo-eucalipto-videotutoriales-secundario: #838985; --tramo-eucalipto-videotutoriales-linea: #38423c; --tramo-eucalipto-videotutoriales-acento: var(--acento-oscuro); --tramo-eucalipto-videotutoriales-boton: #ededeb; --tramo-eucalipto-videotutoriales-boton-texto: #15211b; --tramo-eucalipto-videotutoriales-foco: #ededeb; --tramo-eucalipto-videotutoriales-tono: #93ad9f;
    --tramo-eucalipto-recursos-fondo: #3c574b; --tramo-eucalipto-recursos-superficie: #476055; --tramo-eucalipto-recursos-tinta: #ededeb; --tramo-eucalipto-recursos-secundario: #c1c8c3; --tramo-eucalipto-recursos-linea: #586f65; --tramo-eucalipto-recursos-acento: var(--acento-oscuro); --tramo-eucalipto-recursos-boton: #ededeb; --tramo-eucalipto-recursos-boton-texto: #3c574b; --tramo-eucalipto-recursos-foco: #ededeb; --tramo-eucalipto-recursos-tono: #5b8775;
    --tramo-eucalipto-teselador-fondo: #101914; --tramo-eucalipto-teselador-superficie: #1d2621; --tramo-eucalipto-teselador-tinta: #ededeb; --tramo-eucalipto-teselador-secundario: #7f8380; --tramo-eucalipto-teselador-linea: #333b36; --tramo-eucalipto-teselador-acento: var(--acento-oscuro); --tramo-eucalipto-teselador-boton: #ededeb; --tramo-eucalipto-teselador-boton-texto: #101914; --tramo-eucalipto-teselador-foco: #ededeb; --tramo-eucalipto-teselador-tono: #c9d6cd;
  }
}
:root { --acento-claro: #2a5f52; --acento-oscuro: #8ed4b6; }
/* Prueba del acento «petroleo» (?acento=petroleo, comun/acento.js): solo para revisar. */
:root[data-acento="petroleo"] {
  --acento-claro: #1f6f66; --acento-oscuro: #5fb8ac;
  --tramo-petroleo-fondo: var(--acento-claro); --tramo-petroleo-superficie: #2b776e; --tramo-petroleo-secundario: #dfe4e2; --tramo-petroleo-linea: #40837b; --tramo-petroleo-boton-texto: var(--acento-claro); --tramo-petroleo-tono: var(--acento-claro);
  --tramo-eucalipto-estudio-acento: #ededeb;
  --tramo-eucalipto-videotutoriales-acento: #141414;
}
@media (prefers-color-scheme: dark) {
  :root[data-acento="petroleo"] {
    --tramo-petroleo-fondo: #1d5a53; --tramo-petroleo-superficie: #29635c; --tramo-petroleo-secundario: #bbcac7; --tramo-petroleo-linea: #3e726b; --tramo-petroleo-boton-texto: #1d5a53; --tramo-petroleo-tono: #288f83;
    --tramo-eucalipto-estudio-acento: #ededeb;
    --tramo-eucalipto-videotutoriales-acento: var(--acento-oscuro);
  }
}
[data-tramo="papel"], :root[data-tramo-actual="papel"] .cabecera-tramo {
  --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);
}
[data-tramo="hueso"], :root[data-tramo-actual="hueso"] .cabecera-tramo {
  --fondo: var(--tramo-hueso-fondo); --superficie: var(--tramo-hueso-superficie); --tinta: var(--tramo-hueso-tinta); --secundario: var(--tramo-hueso-secundario); --linea: var(--tramo-hueso-linea); --acento: var(--tramo-hueso-acento); --boton: var(--tramo-hueso-boton); --boton-texto: var(--tramo-hueso-boton-texto); --foco: var(--tramo-hueso-foco);
}
[data-tramo="piedra"], :root[data-tramo-actual="piedra"] .cabecera-tramo {
  --fondo: var(--tramo-piedra-fondo); --superficie: var(--tramo-piedra-superficie); --tinta: var(--tramo-piedra-tinta); --secundario: var(--tramo-piedra-secundario); --linea: var(--tramo-piedra-linea); --acento: var(--tramo-piedra-acento); --boton: var(--tramo-piedra-boton); --boton-texto: var(--tramo-piedra-boton-texto); --foco: var(--tramo-piedra-foco);
}
[data-tramo="grafito"], :root[data-tramo-actual="grafito"] .cabecera-tramo {
  --fondo: var(--tramo-grafito-fondo); --superficie: var(--tramo-grafito-superficie); --tinta: var(--tramo-grafito-tinta); --secundario: var(--tramo-grafito-secundario); --linea: var(--tramo-grafito-linea); --acento: var(--tramo-grafito-acento); --boton: var(--tramo-grafito-boton); --boton-texto: var(--tramo-grafito-boton-texto); --foco: var(--tramo-grafito-foco);
}
[data-tramo="tinta"], :root[data-tramo-actual="tinta"] .cabecera-tramo {
  --fondo: var(--tramo-tinta-fondo); --superficie: var(--tramo-tinta-superficie); --tinta: var(--tramo-tinta-tinta); --secundario: var(--tramo-tinta-secundario); --linea: var(--tramo-tinta-linea); --acento: var(--tramo-tinta-acento); --boton: var(--tramo-tinta-boton); --boton-texto: var(--tramo-tinta-boton-texto); --foco: var(--tramo-tinta-foco);
}
[data-tramo="petroleo"], :root[data-tramo-actual="petroleo"] .cabecera-tramo {
  --fondo: var(--tramo-petroleo-fondo); --superficie: var(--tramo-petroleo-superficie); --tinta: var(--tramo-petroleo-tinta); --secundario: var(--tramo-petroleo-secundario); --linea: var(--tramo-petroleo-linea); --acento: var(--tramo-petroleo-acento); --boton: var(--tramo-petroleo-boton); --boton-texto: var(--tramo-petroleo-boton-texto); --foco: var(--tramo-petroleo-foco);
}
[data-tramo="eucalipto-estudio"], :root[data-tramo-actual="eucalipto-estudio"] .cabecera-tramo {
  --fondo: var(--tramo-eucalipto-estudio-fondo); --superficie: var(--tramo-eucalipto-estudio-superficie); --tinta: var(--tramo-eucalipto-estudio-tinta); --secundario: var(--tramo-eucalipto-estudio-secundario); --linea: var(--tramo-eucalipto-estudio-linea); --acento: var(--tramo-eucalipto-estudio-acento); --boton: var(--tramo-eucalipto-estudio-boton); --boton-texto: var(--tramo-eucalipto-estudio-boton-texto); --foco: var(--tramo-eucalipto-estudio-foco);
}
[data-tramo="eucalipto-cuaderno"], :root[data-tramo-actual="eucalipto-cuaderno"] .cabecera-tramo {
  --fondo: var(--tramo-eucalipto-cuaderno-fondo); --superficie: var(--tramo-eucalipto-cuaderno-superficie); --tinta: var(--tramo-eucalipto-cuaderno-tinta); --secundario: var(--tramo-eucalipto-cuaderno-secundario); --linea: var(--tramo-eucalipto-cuaderno-linea); --acento: var(--tramo-eucalipto-cuaderno-acento); --boton: var(--tramo-eucalipto-cuaderno-boton); --boton-texto: var(--tramo-eucalipto-cuaderno-boton-texto); --foco: var(--tramo-eucalipto-cuaderno-foco);
}
[data-tramo="eucalipto-videotutoriales"], :root[data-tramo-actual="eucalipto-videotutoriales"] .cabecera-tramo {
  --fondo: var(--tramo-eucalipto-videotutoriales-fondo); --superficie: var(--tramo-eucalipto-videotutoriales-superficie); --tinta: var(--tramo-eucalipto-videotutoriales-tinta); --secundario: var(--tramo-eucalipto-videotutoriales-secundario); --linea: var(--tramo-eucalipto-videotutoriales-linea); --acento: var(--tramo-eucalipto-videotutoriales-acento); --boton: var(--tramo-eucalipto-videotutoriales-boton); --boton-texto: var(--tramo-eucalipto-videotutoriales-boton-texto); --foco: var(--tramo-eucalipto-videotutoriales-foco);
}
[data-tramo="eucalipto-recursos"], :root[data-tramo-actual="eucalipto-recursos"] .cabecera-tramo {
  --fondo: var(--tramo-eucalipto-recursos-fondo); --superficie: var(--tramo-eucalipto-recursos-superficie); --tinta: var(--tramo-eucalipto-recursos-tinta); --secundario: var(--tramo-eucalipto-recursos-secundario); --linea: var(--tramo-eucalipto-recursos-linea); --acento: var(--tramo-eucalipto-recursos-acento); --boton: var(--tramo-eucalipto-recursos-boton); --boton-texto: var(--tramo-eucalipto-recursos-boton-texto); --foco: var(--tramo-eucalipto-recursos-foco);
}
[data-tramo="eucalipto-teselador"], :root[data-tramo-actual="eucalipto-teselador"] .cabecera-tramo {
  --fondo: var(--tramo-eucalipto-teselador-fondo); --superficie: var(--tramo-eucalipto-teselador-superficie); --tinta: var(--tramo-eucalipto-teselador-tinta); --secundario: var(--tramo-eucalipto-teselador-secundario); --linea: var(--tramo-eucalipto-teselador-linea); --acento: var(--tramo-eucalipto-teselador-acento); --boton: var(--tramo-eucalipto-teselador-boton); --boton-texto: var(--tramo-eucalipto-teselador-boton-texto); --foco: var(--tramo-eucalipto-teselador-foco);
}
:root[data-tramo-actual="papel"] { --fondo-tramo: var(--tramo-papel-fondo); --tinta-tramo: var(--tramo-papel-tinta); --secundario-tramo: var(--tramo-papel-secundario); --acento-tramo: var(--tramo-papel-acento); }
:root[data-tramo-actual="hueso"] { --fondo-tramo: var(--tramo-hueso-fondo); --tinta-tramo: var(--tramo-hueso-tinta); --secundario-tramo: var(--tramo-hueso-secundario); --acento-tramo: var(--tramo-hueso-acento); }
:root[data-tramo-actual="piedra"] { --fondo-tramo: var(--tramo-piedra-fondo); --tinta-tramo: var(--tramo-piedra-tinta); --secundario-tramo: var(--tramo-piedra-secundario); --acento-tramo: var(--tramo-piedra-acento); }
:root[data-tramo-actual="grafito"] { --fondo-tramo: var(--tramo-grafito-fondo); --tinta-tramo: var(--tramo-grafito-tinta); --secundario-tramo: var(--tramo-grafito-secundario); --acento-tramo: var(--tramo-grafito-acento); }
:root[data-tramo-actual="tinta"] { --fondo-tramo: var(--tramo-tinta-fondo); --tinta-tramo: var(--tramo-tinta-tinta); --secundario-tramo: var(--tramo-tinta-secundario); --acento-tramo: var(--tramo-tinta-acento); }
:root[data-tramo-actual="petroleo"] { --fondo-tramo: var(--tramo-petroleo-fondo); --tinta-tramo: var(--tramo-petroleo-tinta); --secundario-tramo: var(--tramo-petroleo-secundario); --acento-tramo: var(--tramo-petroleo-acento); }
:root[data-tramo-actual="eucalipto-estudio"] { --fondo-tramo: var(--tramo-eucalipto-estudio-fondo); --tinta-tramo: var(--tramo-eucalipto-estudio-tinta); --secundario-tramo: var(--tramo-eucalipto-estudio-secundario); --acento-tramo: var(--tramo-eucalipto-estudio-acento); }
:root[data-tramo-actual="eucalipto-cuaderno"] { --fondo-tramo: var(--tramo-eucalipto-cuaderno-fondo); --tinta-tramo: var(--tramo-eucalipto-cuaderno-tinta); --secundario-tramo: var(--tramo-eucalipto-cuaderno-secundario); --acento-tramo: var(--tramo-eucalipto-cuaderno-acento); }
:root[data-tramo-actual="eucalipto-videotutoriales"] { --fondo-tramo: var(--tramo-eucalipto-videotutoriales-fondo); --tinta-tramo: var(--tramo-eucalipto-videotutoriales-tinta); --secundario-tramo: var(--tramo-eucalipto-videotutoriales-secundario); --acento-tramo: var(--tramo-eucalipto-videotutoriales-acento); }
:root[data-tramo-actual="eucalipto-recursos"] { --fondo-tramo: var(--tramo-eucalipto-recursos-fondo); --tinta-tramo: var(--tramo-eucalipto-recursos-tinta); --secundario-tramo: var(--tramo-eucalipto-recursos-secundario); --acento-tramo: var(--tramo-eucalipto-recursos-acento); }
:root[data-tramo-actual="eucalipto-teselador"] { --fondo-tramo: var(--tramo-eucalipto-teselador-fondo); --tinta-tramo: var(--tramo-eucalipto-teselador-tinta); --secundario-tramo: var(--tramo-eucalipto-teselador-secundario); --acento-tramo: var(--tramo-eucalipto-teselador-acento); }
/* Efecto de color (#146): .cobra-casilla y .cobra-barrido toman los tokens de data-cobra-tramo; .relleno-tono (#160), su tono de texto. */
.cobra[data-cobra-tramo="papel"] { --cobra-fondo: var(--tramo-papel-fondo); --cobra-tinta: var(--tramo-papel-tinta); --cobra-secundario: var(--tramo-papel-secundario); --cobra-linea: var(--tramo-papel-linea); --cobra-acento: var(--tramo-papel-acento); --cobra-foco: var(--tramo-papel-foco); --cobra-tono: var(--tramo-papel-tono); }
.cobra[data-cobra-tramo="hueso"] { --cobra-fondo: var(--tramo-hueso-fondo); --cobra-tinta: var(--tramo-hueso-tinta); --cobra-secundario: var(--tramo-hueso-secundario); --cobra-linea: var(--tramo-hueso-linea); --cobra-acento: var(--tramo-hueso-acento); --cobra-foco: var(--tramo-hueso-foco); --cobra-tono: var(--tramo-hueso-tono); }
.cobra[data-cobra-tramo="piedra"] { --cobra-fondo: var(--tramo-piedra-fondo); --cobra-tinta: var(--tramo-piedra-tinta); --cobra-secundario: var(--tramo-piedra-secundario); --cobra-linea: var(--tramo-piedra-linea); --cobra-acento: var(--tramo-piedra-acento); --cobra-foco: var(--tramo-piedra-foco); --cobra-tono: var(--tramo-piedra-tono); }
.cobra[data-cobra-tramo="grafito"] { --cobra-fondo: var(--tramo-grafito-fondo); --cobra-tinta: var(--tramo-grafito-tinta); --cobra-secundario: var(--tramo-grafito-secundario); --cobra-linea: var(--tramo-grafito-linea); --cobra-acento: var(--tramo-grafito-acento); --cobra-foco: var(--tramo-grafito-foco); --cobra-tono: var(--tramo-grafito-tono); }
.cobra[data-cobra-tramo="tinta"] { --cobra-fondo: var(--tramo-tinta-fondo); --cobra-tinta: var(--tramo-tinta-tinta); --cobra-secundario: var(--tramo-tinta-secundario); --cobra-linea: var(--tramo-tinta-linea); --cobra-acento: var(--tramo-tinta-acento); --cobra-foco: var(--tramo-tinta-foco); --cobra-tono: var(--tramo-tinta-tono); }
.cobra[data-cobra-tramo="petroleo"] { --cobra-fondo: var(--tramo-petroleo-fondo); --cobra-tinta: var(--tramo-petroleo-tinta); --cobra-secundario: var(--tramo-petroleo-secundario); --cobra-linea: var(--tramo-petroleo-linea); --cobra-acento: var(--tramo-petroleo-acento); --cobra-foco: var(--tramo-petroleo-foco); --cobra-tono: var(--tramo-petroleo-tono); }
.cobra[data-cobra-tramo="eucalipto-estudio"] { --cobra-fondo: var(--tramo-eucalipto-estudio-fondo); --cobra-tinta: var(--tramo-eucalipto-estudio-tinta); --cobra-secundario: var(--tramo-eucalipto-estudio-secundario); --cobra-linea: var(--tramo-eucalipto-estudio-linea); --cobra-acento: var(--tramo-eucalipto-estudio-acento); --cobra-foco: var(--tramo-eucalipto-estudio-foco); --cobra-tono: var(--tramo-eucalipto-estudio-tono); }
.cobra[data-cobra-tramo="eucalipto-cuaderno"] { --cobra-fondo: var(--tramo-eucalipto-cuaderno-fondo); --cobra-tinta: var(--tramo-eucalipto-cuaderno-tinta); --cobra-secundario: var(--tramo-eucalipto-cuaderno-secundario); --cobra-linea: var(--tramo-eucalipto-cuaderno-linea); --cobra-acento: var(--tramo-eucalipto-cuaderno-acento); --cobra-foco: var(--tramo-eucalipto-cuaderno-foco); --cobra-tono: var(--tramo-eucalipto-cuaderno-tono); }
.cobra[data-cobra-tramo="eucalipto-videotutoriales"] { --cobra-fondo: var(--tramo-eucalipto-videotutoriales-fondo); --cobra-tinta: var(--tramo-eucalipto-videotutoriales-tinta); --cobra-secundario: var(--tramo-eucalipto-videotutoriales-secundario); --cobra-linea: var(--tramo-eucalipto-videotutoriales-linea); --cobra-acento: var(--tramo-eucalipto-videotutoriales-acento); --cobra-foco: var(--tramo-eucalipto-videotutoriales-foco); --cobra-tono: var(--tramo-eucalipto-videotutoriales-tono); }
.cobra[data-cobra-tramo="eucalipto-recursos"] { --cobra-fondo: var(--tramo-eucalipto-recursos-fondo); --cobra-tinta: var(--tramo-eucalipto-recursos-tinta); --cobra-secundario: var(--tramo-eucalipto-recursos-secundario); --cobra-linea: var(--tramo-eucalipto-recursos-linea); --cobra-acento: var(--tramo-eucalipto-recursos-acento); --cobra-foco: var(--tramo-eucalipto-recursos-foco); --cobra-tono: var(--tramo-eucalipto-recursos-tono); }
.cobra[data-cobra-tramo="eucalipto-teselador"] { --cobra-fondo: var(--tramo-eucalipto-teselador-fondo); --cobra-tinta: var(--tramo-eucalipto-teselador-tinta); --cobra-secundario: var(--tramo-eucalipto-teselador-secundario); --cobra-linea: var(--tramo-eucalipto-teselador-linea); --cobra-acento: var(--tramo-eucalipto-teselador-acento); --cobra-foco: var(--tramo-eucalipto-teselador-foco); --cobra-tono: var(--tramo-eucalipto-teselador-tono); }
/* ===== fin Tramos ===== */

/* ---------- Tramos: fondo, corte de tijeras de picos y cabecera (#143) ----------
   Cada tramo pinta su fondo de lado a lado. Entre dos tramos seguidos, el de abajo muerde al
   de arriba con una fila de picos, como el corte de unas tijeras de picos: 14 px de paso y
   7 px de alto, del color del tramo de abajo. Con data-corte="recto" el corte es liso.
   La cabecera con .cabecera-tramo toma el tono del tramo que tiene debajo (comun/tramos.js);
   el cambio de tono es un fundido corto, sin transición con movimiento reducido. */
[data-tramo] { background-color: var(--fondo); color: var(--tinta); }
[data-tramo] + [data-tramo] { position: relative; }
[data-tramo] + [data-tramo]:not([data-corte="recto"])::before {
  content: "";
  position: absolute;
  inset: auto 0 100% 0;
  height: var(--picos-alto, 7px);
  background: conic-gradient(from 135deg at 50% 0, var(--fondo) 90deg, transparent 0) 0 0 / var(--picos-paso, 14px) 100% repeat-x;
  pointer-events: none;
  z-index: 1;
}
.cabecera-tramo { background-color: var(--fondo); color: var(--tinta); }
@media (prefers-reduced-motion: no-preference) {
  .cabecera-tramo { transition: background-color 0.25s ease, color 0.25s ease; }
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--fondo);
  color: var(--tinta);
  font-family: var(--letra);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.5;
}

main { flex: 1; }

h1, h2, h3 { margin: 0; font-weight: 300; letter-spacing: -0.02em; line-height: 1.1; }

p { margin: 0; }

a { color: inherit; text-underline-offset: 3px; }

img, svg { max-width: 100%; }

code, kbd, .cifras { font-family: var(--letra); font-variant-numeric: tabular-nums; }

kbd {
  font-size: 0.8em;
  border: 1px solid var(--linea);
  border-bottom-width: 2px;
  border-radius: var(--radio);
  padding: 1px 6px;
  background: var(--superficie);
}

/* Foco visible en todo lo que se alcanza con el teclado: de tinta en la web, para que el
   verde siga siendo una nota escasa. Las aplicaciones (Estudio de diseño y Teselador) lo mantienen
   en el acento, que allí es el color de la selección. */
.aplicacion, .app { --foco: var(--acento); }

:focus-visible {
  outline: 2px solid var(--foco);
  outline-offset: 3px;
  border-radius: var(--radio);
}

.visualmente-oculto {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Enlace para saltar la barra con el teclado */
.saltar {
  position: absolute;
  left: var(--margen);
  top: 8px;
  z-index: 10;
  padding: 8px 14px;
  background: var(--boton);
  color: var(--boton-texto);
  border-radius: var(--radio);
  text-decoration: none;
  font-size: 14px;
  transform: translateY(-200%);
}
.saltar:focus { transform: none; }

.contenedor {
  width: 100%;
  max-width: var(--ancho);
  margin-inline: auto;
  padding-inline: var(--margen);
}

/* ---------- Barra de navegación común ---------- */
.barra { border-bottom: 1px solid var(--linea); background: var(--fondo); }

.barra-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 28px;
  row-gap: 0;
  min-height: var(--barra-alto);
  padding-inline: var(--margen);
  font-size: 14px;
}

.barra-marca {
  font-weight: 500;
  font-size: 12.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  padding-block: 16px;
}

.barra-enlaces {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.barra-enlaces a {
  display: inline-block;
  padding-block: 15px 13px;
  color: var(--secundario);
  text-decoration: none;
  border-bottom: 2px solid transparent;
}
.barra-enlaces a:hover { color: var(--tinta); }

/* Sección actual: la nota de color de la barra; el resto, en blanco y negro */
.barra-enlaces a[aria-current] {
  color: var(--acento);
  border-bottom-color: var(--acento);
}

@media (max-width: 520px) {
  .barra-nav { column-gap: 20px; }
  .barra-marca { width: 100%; padding-block: 14px 0; }
  .barra-enlaces { gap: 4px 20px; }
  .barra-enlaces a { padding-block: 10px 9px; }
}

/* Enlaces legales de la barra compacta (#182): las herramientas no llevan pie, así que Privacidad ·
   Cookies · Accesibilidad van a la derecha de la barra, en letra pequeña y en gris. En el móvil,
   solo Privacidad, en la fila de la marca (la página enlaza con las otras dos). */
.barra:has(.barra-legal) { display: flex; align-items: center; position: relative; }
.barra:has(.barra-legal) .barra-nav { flex: 1 1 auto; min-width: 0; }
.barra-legal { flex: none; padding-inline-end: var(--margen); }
.barra-legal ul { display: flex; gap: 14px; margin: 0; padding: 0; list-style: none; }
.barra-legal a {
  display: inline-block;
  padding-block: 8px;
  font-size: 12px;
  color: var(--secundario);
  text-decoration: none;
}
.barra-legal a:is(:hover, :focus-visible) { color: var(--tinta); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 900px) {
  .barra-legal [data-legal="cookies"], .barra-legal [data-legal="accesibilidad"] { display: none; }
}
@media (max-width: 520px) {
  .barra-legal { position: absolute; top: 6px; right: 0; }
}

/* ---------- Botones ---------- */
.boton {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 18px;
  border: 1px solid var(--boton);
  border-radius: var(--radio);
  background: var(--boton);
  color: var(--boton-texto);
  font: 500 15px/1.2 var(--letra);
  text-decoration: none;
  cursor: pointer;
}
.boton:hover { opacity: 0.88; }

.boton-secundario {
  background: transparent;
  color: var(--tinta);
  border-color: var(--linea);
}
.boton-secundario:hover { opacity: 1; border-color: var(--tinta); }

/* ---------- Textos comunes ---------- */
.antetitulo {
  font-family: var(--letra); font-variant-numeric: tabular-nums;
  font-size: 13px;
  color: var(--secundario);
}

.entradilla {
  font-size: 19px;
  line-height: 1.45;
  color: var(--secundario);
  max-width: 52ch;
}

/* ---------- Cabecera de página interior ---------- */
.cabecera {
  display: grid;
  gap: 16px;
  padding-block: 72px 48px;
}
.cabecera h1 { font-size: clamp(40px, 7vw, 60px); max-width: 18ch; }

/* Trazos de plano técnico (ilustraciones en SVG) */
.trazo { fill: none; stroke: var(--tinta); stroke-width: 0.9; stroke-linejoin: round; stroke-linecap: round; }
.trazo-fino { stroke-width: 0.5; }
.cota { fill: none; stroke: var(--secundario); stroke-width: 0.5; }
.cota-texto { font: 6.5px var(--letra); font-variant-numeric: tabular-nums; fill: var(--secundario); }

/* ---------- Hoja de dibujo de Inicio (/comun/hoja.js, /comun/lienzo.js) ----------
   Vive en el capítulo 02 de Inicio, el del Cuaderno de bocetos (#147): en reposo, su demostración
   y «Probar aquí: Iniciar lienzo»; al iniciar, una hoja de papel 3:4 con un
   figurín atenuado de fondo, el estuche debajo y «Ampliar»/«Cerrar». Solo se dibuja en el papel. */
.inicio-dibujo { display: grid; gap: 16px; justify-items: center; min-width: 0; }
.inicio-dibujo [hidden] { display: none !important; }
.iniciar-lienzo { gap: 8px; }
.iniciar-lienzo svg, .hoja-boton svg {
  width: 15px;
  height: 15px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.hoja-dibujo { display: grid; gap: 10px; width: 100%; max-width: 440px; outline: none; }
@media (prefers-reduced-motion: no-preference) {
  .hoja-dibujo { animation: hoja-aparece 0.32s ease-out; }
}
@keyframes hoja-aparece { from { opacity: 0; transform: scale(0.985); } }

.hoja-cabeza { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; }
.hoja-acciones { display: flex; gap: 6px; margin-left: auto; }
.hoja-elegir { display: inline-flex; align-items: center; gap: 8px; font: 500 13px var(--letra); color: var(--secundario); }
.hoja-elegir select {
  padding: 5px 26px 5px 9px;
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  background: var(--fondo);
  color: var(--tinta);
  font: 500 13px/1.2 var(--letra);
  cursor: pointer;
}
.hoja-boton {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  background: transparent;
  color: var(--tinta);
  font: 500 13px/1.2 var(--letra);
  white-space: nowrap;
  cursor: pointer;
}
.hoja-boton:hover:not(:disabled) { border-color: var(--tinta); }
.hoja-boton:disabled { color: var(--secundario); opacity: 0.5; cursor: default; }
.hoja-boton-icono { padding-inline: 8px; }
.hoja-dibujo label { cursor: pointer; }
.hoja-dibujo .estuche-grupo:disabled label { cursor: default; }

/* El papel: blanco en claro; en oscuro, un gris de la familia del fondo (no un bloque blanco que
   deslumbre). El figurín se pinta como máscara del color secundario, atenuado, en los dos modos. */
.hoja-marco { display: grid; place-items: center; min-width: 0; min-height: 0; }
.hoja-papel {
  --papel: var(--hoja);
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 4;
  background: var(--papel);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  overflow: hidden;
  cursor: crosshair;
  touch-action: none;           /* el dedo dibuja en el papel; fuera de él, la página se desplaza */
  user-select: none;
  -webkit-user-select: none;
}
.hoja-papel.con-goma { cursor: cell; }
@media (prefers-color-scheme: dark) {
  .hoja-papel { --papel: var(--superficie); }
  .hoja-figurin { opacity: 0.3; }
}
.hoja-figurin {
  position: absolute;
  inset: 4% 0;
  background: var(--secundario);
  opacity: 0.45;
  mask: var(--figurin) center / contain no-repeat;
  -webkit-mask: var(--figurin) center / contain no-repeat;
  pointer-events: none;
}
.hoja-lienzo { position: absolute; inset: 0; width: 100%; height: 100%; }

/* Pantalla completa: un <dialog> modal a toda la ventana (.dialogo-completo, #124); el papel, lo más grande que quepa. */
.dialogo.hoja-dialogo {
  width: 100vw;
  height: 100dvh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 16px;
  border: 0;
  background: var(--fondo);
  color: var(--tinta);
  font: inherit;
}
.dialogo.hoja-dialogo::backdrop { background: var(--fondo); }
.hoja-dialogo .hoja-dibujo { max-width: 720px; height: 100%; margin-inline: auto; grid-template-rows: auto minmax(0, 1fr) auto auto; }
/* Enlace al Cuaderno de bocetos, la herramienta completa de dibujo a mano alzada (#119). */
.hoja-enlace { justify-self: start; font: 500 13px/1.3 var(--letra); color: var(--secundario); }
.hoja-enlace:hover { color: var(--tinta); }
.hoja-dialogo .hoja-marco { container-type: size; }
.hoja-dialogo .hoja-papel { width: min(100cqw, 100cqh * 3 / 4); }

/* ---------- Estuche (/comun/estuche.js), debajo de la hoja ----------
   Opciones de línea fina; la elegida, en tinta. El color solo está en las muestras. */
.estuche { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; min-width: 0; }
.estuche-grupo { margin: 0; padding: 0; border: 0; min-width: 0; }
.estuche-grupo:disabled { opacity: 0.35; }
.estuche-opciones { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.estuche-grupo-tipo { flex-basis: 100%; }

/* Cada opción es un botón de opción (radio) invisible encima de su marca: se pulsa en toda la marca. */
.estuche-opcion, .estuche-color, .estuche-grosor { position: relative; display: inline-grid; }
.estuche :is(.estuche-opcion, .estuche-color, .estuche-grosor) input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.estuche-grupo:disabled input { cursor: default; }
.estuche-opcion-marca {
  padding: 5px 8px;
  border: 1px solid transparent;
  border-radius: var(--radio);
  font: 500 13px/1.2 var(--letra);
  color: var(--secundario);
}
.estuche-opcion:hover .estuche-opcion-marca { color: var(--tinta); }
.estuche-opcion input:checked + .estuche-opcion-marca { color: var(--tinta); border-color: var(--tinta); }
.estuche :is(.estuche-opcion, .estuche-color, .estuche-grosor) input:focus-visible + span { outline: 2px solid var(--foco); outline-offset: 2px; }

.estuche-color { padding: 4px; }
.estuche-color-marca {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--muestra);
  box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.08);
}
.estuche-color input:checked + .estuche-color-marca { box-shadow: 0 0 0 2px var(--fondo), 0 0 0 3px var(--tinta); }
.estuche-grupo-color .estuche-opciones { gap: 0; margin-left: -4px; }

/* Grosores: una raya con el ancho del trazo elegido. */
.estuche-grosor-marca {
  display: grid;
  place-items: center;
  width: 30px;
  height: 28px;
  border: 1px solid transparent;
  border-radius: var(--radio);
}
.estuche-grosor-marca::before { content: ""; width: 16px; height: var(--grueso, 2px); border-radius: 2px; background: var(--secundario); }
.estuche-grosor-marca[data-valor="fino"] { --grueso: 1px; }
.estuche-grosor-marca[data-valor="medio"] { --grueso: 3.5px; }
.estuche-grosor-marca[data-valor="grueso"] { --grueso: 6px; }
.estuche-grosor:hover .estuche-grosor-marca::before { background: var(--tinta); }
.estuche-grosor input:checked + .estuche-grosor-marca { border-color: var(--tinta); }
.estuche-grosor input:checked + .estuche-grosor-marca::before { background: var(--tinta); }
.estuche-grupo-grosor { padding-left: 12px; border-left: 1px solid var(--linea); }

@media (max-width: 820px) {
  .estuche-color { padding: 6px; }   /* muestras más fáciles de pulsar con el dedo */
  .estuche-grupo-grosor { padding-left: 6px; }
}

/* ---------- Cobra color ----------
   Componente reutilizable: un enlace .cobra con una ilustración SVG que en reposo es un plano
   en blanco y negro y que, al pasar el ratón, con el foco del teclado o (sin ratón) al aparecer
   en pantalla (`data-en-vista`, lo pone /comun/cobra.js), se anima y se llena de color.
   Piezas de la ilustración:
     .cobra-tinte     relleno del fondo en reposo; en activo, el color de `--tinte`.
     .cobra-aparece   oculto en reposo; aparece en activo.
     .cobra-oculta    visible en reposo; desaparece en activo.
     .cobra-desplaza  se mueve `--dx`, `--dy` en activo.
     .cobra-traza     trazo con pathLength="1" que se vuelve a dibujar al activarse.
   `--retraso` escalona cualquiera de ellas. Con movimiento reducido no hay transiciones ni
   desplazamientos: el color aparece de golpe, sin movimiento. */
.cobra { --cobra-duracion: 0.7s; --cobra-curva: cubic-bezier(0.2, 0.7, 0.2, 1); }

.cobra-tinte { fill: var(--fondo); }
.cobra-aparece { opacity: 0; }
.cobra-traza { stroke-dasharray: 1; stroke-dashoffset: 0; }

.cobra:is(:hover, :focus-visible, [data-en-vista]) .cobra-tinte { fill: var(--tinte); }
.cobra:is(:hover, :focus-visible, [data-en-vista]) .cobra-aparece { opacity: 1; }
.cobra:is(:hover, :focus-visible, [data-en-vista]) .cobra-oculta { opacity: 0; }

@media (prefers-reduced-motion: no-preference) {
  .cobra-tinte { transition: fill var(--cobra-duracion) ease var(--retraso, 0s); }
  .cobra-aparece, .cobra-oculta { transition: opacity calc(var(--cobra-duracion) * 0.8) ease var(--retraso, 0s); }
  .cobra-desplaza { transition: transform var(--cobra-duracion) var(--cobra-curva) var(--retraso, 0s); }
  .cobra:is(:hover, :focus-visible, [data-en-vista]) .cobra-desplaza { transform: translate(var(--dx, 0px), var(--dy, 0px)); }
  .cobra:is(:hover, :focus-visible, [data-en-vista]) .cobra-traza { animation: cobra-traza 1.2s var(--cobra-curva) var(--retraso, 0s) both; }
}

@keyframes cobra-traza { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }

/* Cobra color ampliado (#146): no solo la ilustración, también el contenedor.
     .cobra.cobra-casilla  la casilla entera (un acceso directo) toma el color de su tramo al
                           activarse: fondo y tokens de texto; la ilustración de dentro, igual.
     .cobra.cobra-barrido  la fila se llena de color de izquierda a derecha (destinos del cierre).
                           `--cobra-desborde` alarga el relleno a los lados (p. ej. var(--margen)).
   El color sale de `data-cobra-tramo="<tramo>"` (papel, hueso, piedra, grafito, tinta, petroleo);
   sin él, petróleo, la única nota de color. Para el de una herramienta sin tramo propio basta con
   dar en línea --cobra-fondo, --cobra-tinta, --cobra-secundario, --cobra-linea, --cobra-acento y
   --cobra-foco. En activo, dentro del contenedor --fondo, --tinta… son los del tramo, así que lo
   que vive dentro (números, textos secundarios, el anillo de foco) se recolorea solo; un hijo con
   color propio puede fundirse con `transition: color var(--cobra-fundido)`.
   Activo es lo mismo que en .cobra: ratón, foco del teclado o, sin ratón, al aparecer en pantalla.
   Con movimiento reducido el color llega de golpe, sin fundido ni barrido. */
.cobra-casilla, .cobra-barrido {
  --cobra-fundido: 0.45s;
  --cobra-fondo: var(--tramo-petroleo-fondo); --cobra-tinta: var(--tramo-petroleo-tinta);
  --cobra-secundario: var(--tramo-petroleo-secundario); --cobra-linea: var(--tramo-petroleo-linea);
  --cobra-acento: var(--tramo-petroleo-acento); --cobra-foco: var(--tramo-petroleo-foco);
  color: var(--tinta);
}

.cobra:is(.cobra-casilla, .cobra-barrido):is(:hover, :focus-visible, [data-en-vista]) {
  --fondo: var(--cobra-fondo); --superficie: var(--cobra-fondo); --tinta: var(--cobra-tinta);
  --secundario: var(--cobra-secundario); --linea: var(--cobra-linea);
  --acento: var(--cobra-acento); --foco: var(--cobra-foco);
}

.cobra-casilla { background-color: var(--fondo); }

.cobra-barrido { position: relative; isolation: isolate; }
.cobra-barrido::before {
  content: "";
  position: absolute;
  inset: 0 calc(var(--cobra-desborde, 0px) * -1);
  z-index: -1;
  background-color: var(--cobra-fondo);
  transform: scaleX(0);
  transform-origin: 0 50%;
  pointer-events: none;
}
.cobra-barrido:is(:hover, :focus-visible, [data-en-vista])::before { transform: none; }

@media (prefers-reduced-motion: no-preference) {
  .cobra-casilla { transition: background-color var(--cobra-fundido) ease, color var(--cobra-fundido) ease; }
  .cobra-barrido { transition: color var(--cobra-fundido) ease; }
  .cobra-barrido::before { transition: transform calc(var(--cobra-fundido) + 0.1s) var(--cobra-curva); }
}

/* ---------- Columnas (Herramientas): una columna grande por herramienta ---------- */
.cabecera-compacta { padding-block: 56px 36px; }

.columnas {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0 0 72px;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--linea);
  border-bottom: 1px solid var(--linea);
}
.columnas > li { display: flex; min-width: 0; }
.columnas > li + li { border-left: 1px solid var(--linea); }

.columna {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 24px;
  width: 100%;
  min-height: clamp(560px, calc(100vh - var(--barra-alto) - 80px), 860px);
  padding: 32px 40px 40px;
  text-decoration: none;
}
.columnas > li:first-child .columna { padding-left: 0; }
.columnas > li:last-child .columna { padding-right: 0; }
.columna:focus-visible { outline-offset: -2px; }

.columna-dibujo { display: grid; place-items: center; min-height: 0; }
.columna-dibujo svg { width: 100%; max-width: 420px; height: auto; max-height: 100%; overflow: visible; }
.columna-hoja { fill: none; stroke: var(--secundario); stroke-width: 0.5; stroke-dasharray: 3 3; }

.columna-texto { display: grid; gap: 10px; justify-items: start; }
.columna h2 { font-size: clamp(30px, 3.4vw, 40px); }
.columna p { color: var(--secundario); max-width: 46ch; }
.columna-ir {
  margin-top: 8px;
  font-weight: 500;
  font-size: 15px;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}
.columna:hover .columna-ir, .columna:focus-visible .columna-ir { text-decoration-thickness: 2px; }

/* Tres columnas (Herramientas: Teselador, Estudio de diseño y Cuaderno de bocetos): algo más
   estrechas, con menos aire entre ellas y el titular un punto menor. */
.columnas-tres { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.columnas-tres .columna { padding-inline: 28px; }
.columnas-tres .columna h2 { font-size: clamp(26px, 2.6vw, 36px); }

@media (max-width: 820px) {
  .columnas { grid-template-columns: minmax(0, 1fr); border-bottom: 0; }
  .columnas > li + li { border-left: 0; }
  .columnas > li { border-bottom: 1px solid var(--linea); }
  .columnas > li .columna { min-height: 0; padding: 28px 0 36px; }
  .columna-dibujo svg { max-width: 320px; }
}

/* ---------- Aviso de página provisional ---------- */
.aviso {
  display: grid;
  gap: 12px;
  padding: 24px 0;
  margin-bottom: 72px;
  border-top: 1px solid var(--linea);
  border-bottom: 1px solid var(--linea);
  color: var(--secundario);
}
.aviso a { color: var(--tinta); }

/* ---------- Pie: la etiqueta de la prenda, en grande (rediseño B, #148) ----------
   Lo genera scripts/pie.js (npm run barra). Es un tramo de la paleta «Piedra y tinta»
   (data-tramo="piedra"), así que sus colores salen de los tokens del tramo, en claro y en
   oscuro, con AA garantizado por scripts/tramos.test.js. Una cinta tejida (un acanalado fino de
   hilo) cruza la ventana de borde a borde, con orillo y un pespunte verde petróleo arriba y
   abajo que también llegan a los dos bordes. Dentro, en el contenedor de la página: una cinta
   métrica de 0 a 150 cm; las «Instrucciones de cuidado», los símbolos de cuidado textil como
   enlaces con su nombre a la vista; la composición en grande, una nota y «Volver arriba»; y
   la marca tejida a todo lo ancho, medida para que se lea entera en cualquier anchura. */
.etiqueta {
  --etiqueta-hilo: color-mix(in srgb, var(--tinta) 4%, transparent);   /* el acanalado */
  position: relative;
  margin-top: 72px;
  padding-block: 34px 30px;
  font-family: var(--letra);
  /* El tejido: hilos horizontales finos con cortes netos (una trama, no un degradado). */
  background:
    repeating-linear-gradient(to bottom, transparent 0 2px, var(--etiqueta-hilo) 2px 3px),
    var(--fondo);
  border-block: 1px solid var(--linea);
}

/* El pespunte: un hilo verde petróleo a 9 px del orillo, de lado a lado de la ventana. */
.etiqueta-pespunte {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  overflow: visible;
  pointer-events: none;
}
.etiqueta-pespunte-arriba { top: 9px; }
.etiqueta-pespunte-abajo { bottom: 9px; }
.etiqueta-pespunte line { stroke: var(--acento); stroke-width: 1.2; stroke-dasharray: 6 4; }

/* Al pasar el ratón por la etiqueta, el hilo del pespunte corre. Con movimiento reducido, quieto. */
@media (prefers-reduced-motion: no-preference) {
  .etiqueta:hover .etiqueta-pespunte line { animation: etiqueta-cose 1.6s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
}
@keyframes etiqueta-cose { from { stroke-dashoffset: 0; } to { stroke-dashoffset: -40; } }

/* La cinta métrica: 150 rayitas de 1 cm, una mayor cada 10 y la cifra encima. Las rayas son
   bandas de color con cortes netos, no degradados. */
.etiqueta-cinta {
  display: flex;
  justify-content: space-between;
  padding: 12px 0 13px;
  margin-bottom: clamp(36px, 6vh, 64px);
  font-size: 11px;
  line-height: 1;
  color: var(--secundario);
  font-variant-numeric: tabular-nums;
  border-bottom: 1px solid var(--tinta);
  background:
    linear-gradient(to right, var(--secundario) 1px, transparent 1px) 0 100% / calc((100% - 1px) / 150) 4px repeat-x,
    linear-gradient(to right, var(--tinta) 1px, transparent 1px) 0 100% / calc((100% - 1px) / 15) 9px repeat-x;
}
.etiqueta-cinta span { width: 0; white-space: nowrap; }
.etiqueta-cinta span:last-child { width: auto; }

.etiqueta-cuerpo {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 40px 64px;
}

.etiqueta-rotulo {
  display: block;
  margin: 0 0 14px;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--secundario);
}

.etiqueta-cuidados ul {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 0 32px;
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--linea);
}
.etiqueta-cuidados li { border-bottom: 1px solid var(--linea); }
.etiqueta-simbolo {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 48px;
  padding: 8px 0;
  color: var(--tinta);
  text-decoration: none;
  font-size: clamp(16px, 1.2vw, 18px);
  font-weight: 300;
}
.etiqueta-simbolo svg {
  width: 30px;
  height: 30px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.3;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.etiqueta-simbolo svg .relleno { fill: currentColor; stroke: none; }
.etiqueta-simbolo:is(:hover, :focus-visible) { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }
.etiqueta-simbolo:is(:hover, :focus-visible) svg { stroke-width: 1.8; }
@media (prefers-reduced-motion: no-preference) {
  .etiqueta-simbolo svg { transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1); }
  .etiqueta-simbolo:is(:hover, :focus-visible) svg { transform: rotate(-8deg); }
}
/* La sección actual: el símbolo lleva la nota de color (3:1 basta para un icono); el nombre
   sigue en tinta, algo más grueso, porque el verde sobre piedra no llega a 4,5:1 como texto. */
.etiqueta-simbolo[aria-current] { font-weight: 500; }
.etiqueta-simbolo[aria-current] svg { color: var(--acento); }

.etiqueta-composicion { display: grid; align-content: start; gap: 10px; }
.etiqueta-composicion p { margin: 0; }
.etiqueta-cien {
  display: block;
  font-size: clamp(32px, 3.6vw, 56px);
  font-weight: 300;
  letter-spacing: -0.035em;
  line-height: 1;
}
.etiqueta-nota { color: var(--secundario); max-width: 28em; }
.etiqueta-arriba {
  justify-self: start;
  margin-top: 6px;
  padding: 6px 0;
  color: var(--tinta);
  font-weight: 500;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}
.etiqueta-arriba:hover { text-decoration-thickness: 2px; }
/* La flecha, dibujada (el carácter «↑» no está en Hanken Grotesk y saldría de otra letra). */
.etiqueta-flecha { width: 0.7em; height: 0.85em; vertical-align: -0.05em; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }

/* La marca tejida a todo lo ancho del contenedor. El tamaño sale del ancho disponible (cqi):
   «ESTUDIO DE MODA» en Hanken Grotesk ligera, en mayúsculas y con -0,04 em entre letras, mide
   8,07 em; se divide entre 8,2 para que quepa entera con un poco de holgura. */
.etiqueta-telar { container-type: inline-size; }
.etiqueta-marca {
  margin: clamp(40px, 7vh, 80px) 0 0;
  padding-bottom: 18px;
  font-size: calc(100cqi / 8.2);
  font-weight: 300;
  letter-spacing: -0.04em;
  line-height: 0.86;
  text-transform: uppercase;
  white-space: nowrap;
  user-select: none;
}

/* La línea legal (#182): letra pequeña bajo la marca, como el texto legal de una etiqueta. */
.etiqueta-legal ul {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 0;
  margin: 0;
  padding: 0 0 6px;
  list-style: none;
  font-size: 13px;
}
.etiqueta-legal li:not(:last-child)::after { content: "·" / ""; padding-inline: 10px; color: var(--secundario); }
.etiqueta-legal a { color: var(--secundario); text-decoration: none; padding-block: 6px; display: inline-block; }
.etiqueta-legal a:is(:hover, :focus-visible) { color: var(--tinta); text-decoration: underline; text-underline-offset: 3px; }
.etiqueta-legal a[aria-current] { color: var(--tinta); font-weight: 500; }

@media (max-width: 760px) {
  .etiqueta-cuerpo { grid-template-columns: minmax(0, 1fr); }
  .etiqueta-cinta span:nth-child(even) { visibility: hidden; }
}
@media (forced-colors: active) {
  .etiqueta { border-top: 1px solid CanvasText; }
}


/* ---------- Diálogos (/comun/dialogo.js, #124) ----------
   Un solo marco para todos los <dialog> de la web: caja blanca de línea fina y esquinas de 2 px
   sobre un velo sutil, cabecera con el título, cuerpo y botonera separada por una línea. El botón
   principal es de tinta en la web y del acento en las aplicaciones (allí es «la acción
   principal»); el resto, de línea. Entra y sale con un fundido corto que sube 6 px; con
   movimiento reducido, sin transición. En el móvil, los diálogos son una hoja inferior a lo ancho
   con botones grandes. Variantes: .dialogo-breve (confirmar y avisar), .dialogo-completo
   (a toda la ventana: la hoja de Inicio) y .dialogo-amplio (paneles grandes como la vista 3D,
   que no pasan a hoja inferior). */
:root { --velo: rgb(20 20 20 / 0.24); --dialogo-principal: var(--boton); --dialogo-principal-texto: var(--boton-texto); }
@media (prefers-color-scheme: dark) { :root { --velo: rgb(0 0 0 / 0.56); } }
.aplicacion, .app { --dialogo-principal: var(--acento); --dialogo-principal-texto: var(--fondo); }

.dialogo {
  width: min(var(--dialogo-ancho, 340px), calc(100vw - 32px));
  max-width: none;
  max-height: calc(100dvh - 48px);
  padding: 0;
  overflow: auto;
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  background: var(--fondo);
  color: var(--tinta);
  font: 13px/1.45 var(--letra);
  accent-color: var(--dialogo-principal);
}
.dialogo-breve { --dialogo-ancho: 400px; }
.dialogo::backdrop { background: var(--velo); }
.dialogo > form { display: contents; }

.dialogo-cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 20px 12px;
}
.dialogo-titulo { margin: 0; font: 500 15px/1.25 var(--letra); color: var(--tinta); }
.dialogo-cuerpo { display: grid; gap: 12px; padding: 0 20px 18px; }
.dialogo-texto { margin: 0; color: var(--secundario); }
.dialogo-nota { margin: 0; color: var(--secundario); font-size: 12px; }

/* Grupo de campos con leyenda pequeña y línea fina. */
.dialogo-grupo { display: grid; gap: 8px; margin: 0; padding: 10px 12px; border: 1px solid var(--linea); border-radius: var(--radio); min-width: 0; }
.dialogo-grupo[hidden] { display: none; }
.dialogo-grupo legend { padding: 0 4px; font-size: 12px; color: var(--secundario); }
.dialogo-grupo label, .dialogo-casilla { display: flex; align-items: center; gap: 8px; }
.dialogo :is(input[type="number"], input[type="text"], select) {
  padding: 4px 6px;
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  background: var(--fondo);
  color: var(--tinta);
  font: 13px/1.3 var(--letra);
  font-variant-numeric: tabular-nums;
}
.dialogo :is(input[type="number"], input[type="text"], select):hover:not(:disabled) { border-color: var(--secundario); }
.dialogo :is(input, select):focus-visible { outline: 2px solid var(--foco); outline-offset: 0; }
.dialogo :is(input, select):disabled { opacity: 0.5; }

.dialogo-botones {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 20px;
  border-top: 1px solid var(--linea);
}
.dialogo-boton {
  min-height: 32px;
  padding: 6px 16px;
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  background: transparent;
  color: var(--tinta);
  font: 500 13px/1.2 var(--letra);
  cursor: pointer;
}
.dialogo-boton:hover { border-color: var(--tinta); }
.dialogo-boton:focus-visible { outline-offset: 2px; }
.dialogo-principal { border-color: var(--dialogo-principal); background: var(--dialogo-principal); color: var(--dialogo-principal-texto); }
.dialogo-principal:hover { border-color: var(--dialogo-principal); background: color-mix(in srgb, var(--dialogo-principal) 86%, var(--tinta)); }
/* Destructivo: el principal no lleva la nota de color (no es «adelante»), va en tinta. */
.dialogo[data-destructivo] { --dialogo-principal: var(--boton); --dialogo-principal-texto: var(--boton-texto); }
/* El principal se ve a la derecha aunque vaya primero en el HTML (así Intro en un campo lo pulsa);
   una acción aparte (como «Copiar» de Reflejar), a la izquierda. */
.dialogo-botones > .dialogo-principal { order: 1; }
.dialogo-boton-aparte { order: -1; margin-right: auto; }
/* Elegir entre varios caminos (elegir() de comun/dialogo.js): uno debajo de otro, a lo ancho, el
   principal arriba y «Cancelar» al final. */
.dialogo-eleccion { --dialogo-ancho: 440px; }
.dialogo-eleccion .dialogo-botones { flex-direction: column; align-items: stretch; }
.dialogo-eleccion .dialogo-botones > .dialogo-boton { order: 1; margin: 0; text-align: center; }
.dialogo-eleccion .dialogo-botones > .dialogo-principal { order: 0; }
.dialogo-eleccion .dialogo-botones > .dialogo-boton-aparte { order: 2; border-color: transparent; }
.dialogo-eleccion .dialogo-botones > .dialogo-boton-aparte:hover { border-color: var(--linea); }

.dialogo-cerrar {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 30px;
  height: 30px;
  margin: -4px -6px -4px 0;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--radio);
  background: transparent;
  color: var(--tinta);
  cursor: pointer;
}
.dialogo-cerrar:hover { border-color: var(--linea); }
.dialogo-cerrar svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }

/* A toda la ventana, sin caja (la hoja de dibujo ampliada de Inicio). */
.dialogo-completo {
  width: 100vw;
  height: 100dvh;
  max-height: none;
  margin: 0;
  border: 0;
  border-radius: 0;
}

/* Al cerrarse, mientras se desvanece, ya no recoge clics. */
.dialogo:not([open]), .dialogo:not([open])::backdrop { pointer-events: none; }

@media (prefers-reduced-motion: no-preference) {
  .dialogo {
    transition: opacity 0.16s ease, translate 0.16s cubic-bezier(0.2, 0.7, 0.2, 1), overlay 0.16s allow-discrete, display 0.16s allow-discrete;
  }
  .dialogo:not([open]) { opacity: 0; translate: 0 6px; }
  @starting-style { .dialogo[open] { opacity: 0; translate: 0 6px; } }
  .dialogo::backdrop { transition: opacity 0.16s ease, overlay 0.16s allow-discrete, display 0.16s allow-discrete; }
  .dialogo:not([open])::backdrop { opacity: 0; }
  @starting-style { .dialogo[open]::backdrop { opacity: 0; } }
  .dialogo-completo:not([open]), .dialogo-completo[open] { translate: none; }
  @starting-style { .dialogo-completo[open] { translate: none; } }
}

/* Móvil: hoja inferior a lo ancho, con botones a partes iguales y de 44 px. */
@media (max-width: 560px) {
  .dialogo:not(.dialogo-completo):not(.dialogo-amplio) {
    width: 100%;
    max-height: calc(100dvh - 56px);
    margin: auto 0 0;
    border-width: 1px 0 0;
    border-radius: var(--radio) var(--radio) 0 0;
  }
  .dialogo .dialogo-botones { padding-bottom: max(12px, env(safe-area-inset-bottom)); }
  .dialogo .dialogo-boton { flex: 1; min-height: 44px; }
  .dialogo .dialogo-boton-aparte { flex: 1; margin-right: 0; }
}
@media (max-width: 560px) and (prefers-reduced-motion: no-preference) {
  .dialogo:not(.dialogo-completo):not(.dialogo-amplio):not([open]) { translate: 0 24px; }
  @starting-style { .dialogo:not(.dialogo-completo):not(.dialogo-amplio)[open] { translate: 0 24px; } }
}

/* ===== Movimiento (#142) =====
   Componentes de /comun/movimiento.js para las páginas de lectura (las de aplicación no los
   usan). Solo se animan transform y opacity; con movimiento reducido todo queda quieto y legible.
   La transición entre páginas está aparte, en /comun/transicion.css, para que solo la pidan las
   páginas de lectura. Los colores del tramo (--tinta-tramo...) son de la paleta (#143). */
:root { --curva-movimiento: cubic-bezier(.2, .7, .2, 1); }

/* Renglón destacado de las frases del manifiesto y de las portadas (tras #169, decisión del
   responsable; antes iba en letra hueca): letra llena del color del acento del tramo, sin contorno.
   En papel es el eucalipto oscuro (claro) o el claro (oscuro); en los capítulos de color, el acento
   de su tramo, que destaca al menos 3:1 sobre su fondo (scripts/tramos.js), suficiente en letra tan
   grande. Con colores forzados, letra llena del sistema; impreso, del color del texto. */
.destacada { color: var(--acento); }
@media (forced-colors: active) { .destacada { color: CanvasText; } }
@media print { .destacada { color: inherit; } }

/* Letra hueca, para las cifras decorativas (.cabeza-cifra, el número del look de «Desfile»). El contorno se pinta debajo y el relleno del
   color del fondo encima, para que no se vean los cruces internos de la fuente variable. Es texto
   de verdad (se lee, se copia y se busca). Con colores forzados, al imprimir o sin contorno en el
   navegador, vuelve a ser letra llena. */
@supports (-webkit-text-stroke: 1px) and (paint-order: stroke) {
  .hueca { color: var(--fondo); -webkit-text-stroke: max(2.8px, 0.022em) var(--tinta); paint-order: stroke fill; }
}
@media (forced-colors: active) { .hueca { color: CanvasText; -webkit-text-stroke: 0; } }
@media print { .hueca { color: inherit; -webkit-text-stroke: 0; } }

/* Frases que se deslizan con el desplazamiento: --p (0 a 1) es el progreso de su tramo
   [data-progreso] y --v, cuántos vw recorren. El tramo recorta lo que se sale por los lados. */
[data-progreso] { overflow-x: clip; }
.desliza { display: block; }

/* Entrada palabra a palabra (.entra): cada .palabra con su retraso --r. */
.entra .palabra { display: inline-block; }

/* Progreso de lectura de la página: una raya que crece de izquierda a derecha (--leido en <html>). */
.progreso-lectura {
  display: block; height: 2px;
  background: var(--tinta-tramo, var(--tinta));
  transform-origin: 0 50%; transform: scaleX(var(--leido, 0));
}

/* Acompañante del cursor: un anillo fino que va detrás del puntero del sistema, nunca en su lugar.
   Con «diferencia» se ve sobre cualquier tramo, claro u oscuro. */
.acompanante {
  position: fixed; left: 0; top: 0; z-index: 70;
  width: 26px; height: 26px; margin: -13px 0 0 -13px;
  border: 1px solid #fff; border-radius: 50%;
  pointer-events: none; mix-blend-mode: difference;
  opacity: 0; transition: opacity .25s ease, scale .3s var(--curva-movimiento);
}
.acompanante[data-visible] { opacity: .9; }
.acompanante[data-sobre] { scale: 2; }
@media (hover: none), (pointer: coarse), (prefers-reduced-motion: reduce), (forced-colors: active), print {
  .acompanante { display: none; }
}

@media (prefers-reduced-motion: no-preference) {
  .desliza[data-v] { transform: translate3d(calc((var(--p, .5) - .5) * var(--v, 0) * 1vw), 0, 0); }
  [data-progreso] .desliza[data-v] { will-change: transform; }
  .entra[data-entra="espera"] .palabra { transform: translateY(.35em); opacity: 0; }
  .entra[data-entra="visto"] .palabra {
    transition: transform .9s var(--curva-movimiento) var(--r, 0s), opacity .6s ease var(--r, 0s);
  }
}
/* ===== fin Movimiento ===== */

/* ===== Cabecera y menú (#144) =====
   La cabecera de las páginas de lectura (scripts/barra.js escribe el marcado y
   comun/cabecera.js la conducta): fija arriba, del tono del tramo que tiene debajo
   (.cabecera-tramo, #143), con la marca, Herramientas · Videotutoriales · Recursos, el botón
   «Menú» y la cinta métrica del progreso de lectura (.progreso-lectura, #142). El menú a
   pantalla completa es un <dialog> modal en tinta: el resto de la página queda inerte.
   Las páginas de aplicación conservan la barra compacta (.barra sin .barra-lectura). */
:root { --cabecera-alto: 64px; }
@media (max-width: 720px) { :root { --cabecera-alto: 56px; } }
:root:has(.barra-lectura) { --barra-alto: var(--cabecera-alto); scroll-padding-top: calc(var(--cabecera-alto) + 12px); }
.saltar { z-index: 60; }

.barra-lectura {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; gap: 28px;
  min-height: var(--cabecera-alto); padding: 0 var(--margen) 7px;
  border-bottom: 0;
  view-transition-name: cabecera;
}
.barra-lectura .barra-nav {
  flex: 1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 0 28px; min-height: 0; padding: 0;
}
.barra-lectura .barra-marca, .menu .barra-marca { font-size: 13px; letter-spacing: 0.2em; padding-block: 12px; }
.barra-lectura .barra-enlaces { gap: 4px 26px; }
.barra-lectura .barra-enlaces a {
  position: relative; padding-block: 12px; border: 0;
  color: var(--tinta); font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase;
}
/* El subrayado crece desde la izquierda al pasar o con el foco; la sección actual lo lleva fijo,
   con la nota de color. */
.barra-lectura .barra-enlaces a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 6px; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: 0 50%;
}
.barra-lectura .barra-enlaces a:is(:hover, :focus-visible)::after,
.barra-lectura .barra-enlaces a[aria-current]::after { transform: none; }
.barra-lectura .barra-enlaces a[aria-current] { color: var(--acento); }
.barra-lectura .barra-marca[aria-current] { color: inherit; }

.boton-menu {
  display: inline-flex; align-items: center; gap: 10px; flex: none;
  min-height: 40px; padding: 0 16px;
  border: 1px solid currentColor; border-radius: 999px; background: none; color: inherit;
  font: 500 13px var(--letra); letter-spacing: 0.14em; text-transform: uppercase; cursor: pointer;
}
.boton-menu[hidden] { display: none; }
.rayas { position: relative; display: inline-block; width: 16px; height: 8px; }
.rayas span { position: absolute; left: 0; right: 0; height: 1px; background: currentColor; }
.rayas span:first-child { top: 0; }
.rayas span:last-child { bottom: 0; }
.rayas.abierto span:first-child { transform: translateY(3.5px) rotate(45deg); }
.rayas.abierto span:last-child { transform: translateY(-3.5px) rotate(-45deg); }
@media (forced-colors: active) { .rayas span { background: CanvasText; } }

/* La cinta métrica: una marca cada 10 px y otra mayor cada 50, y la lectura avanza en tinta. */
.cinta-metrica {
  position: absolute; left: 0; right: 0; bottom: 0; height: 7px; pointer-events: none;
  background:
    linear-gradient(to right, var(--linea) 1px, transparent 1px) 0 100% / 10px 4px repeat-x,
    linear-gradient(to right, var(--secundario) 1px, transparent 1px) 0 100% / 50px 7px repeat-x;
  border-bottom: 1px solid var(--linea);
}
.cinta-metrica .progreso-lectura { position: absolute; left: 0; right: 0; bottom: -1px; background: var(--tinta); }
@media (forced-colors: active) { .cinta-metrica .progreso-lectura { background: CanvasText; } }

/* Con JavaScript, en pantallas estrechas los enlaces se recogen en el menú. Sin él, se ven
   siempre (y el botón no aparece). */
@media (max-width: 860px) {
  .barra-lectura[data-con-menu] .barra-enlaces { display: none; }
}
@media (max-width: 860px) {
  /* Sin JavaScript, la cabecera con los enlaces en dos renglones no se queda fija: ocuparía media pantalla. */
  .barra-lectura:not([data-con-menu]) { position: relative; }
}
@media (max-width: 520px) {
  .barra-lectura:not([data-con-menu]) { padding-bottom: 12px; }
  .barra-lectura:not([data-con-menu]) .barra-marca { width: 100%; padding-block: 12px 0; }
}

/* ---------- El menú a pantalla completa ---------- */
.menu.dialogo-completo {
  padding: 0 var(--margen) 24px; border: 0;
  font: inherit; font-size: 16px; overflow: auto; overscroll-behavior: contain;
}
.menu[open] { display: grid; grid-template-rows: var(--cabecera-alto) 1fr auto; }
.menu::backdrop { background: var(--fondo); }
:root:has(.menu[open]) { overflow: hidden; }
.menu-cabeza { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.menu-nav { align-self: center; padding: 24px 0; }
.menu-nav ol { list-style: none; margin: 0; padding: 0; }
.menu-seccion {
  display: grid; grid-template-columns: auto 1fr; align-items: end; gap: 4px 32px;
  padding: 6px 0 10px; border-top: 1px solid var(--linea);
}
.menu-seccion:last-child { border-bottom: 1px solid var(--linea); }
.menu-grande { display: flex; align-items: baseline; gap: 20px; text-decoration: none; overflow: hidden; }
.menu-num { font-size: 13px; letter-spacing: 0.12em; color: var(--secundario); font-variant-numeric: tabular-nums; }
.menu-grande[aria-current] .menu-num { color: var(--acento); }
.menu-texto {
  display: inline-block; font-size: clamp(40px, 7.6vw, 112px); font-weight: 300;
  letter-spacing: -0.04em; line-height: 1.02; text-transform: uppercase;
}
/* Al pasar o con el foco, la palabra se vuelve hueca (con colores forzados, sigue llena). */
@supports (-webkit-text-stroke: 1px) and (paint-order: stroke) {
  .menu-grande:is(:hover, :focus-visible) .menu-texto { color: var(--fondo); -webkit-text-stroke: 2.6px var(--tinta); paint-order: stroke fill; }
}
@media (forced-colors: active) { .menu-grande .menu-texto { color: LinkText; -webkit-text-stroke: 0; } }
.menu-sub { display: flex; flex-wrap: wrap; justify-self: end; gap: 4px 20px; margin: 0; padding: 0 0 10px; list-style: none; }
.menu-sub a { display: inline-block; padding: 6px 0; color: var(--secundario); font-size: 15px; text-decoration: none; }
.menu-sub a:is(:hover, :focus-visible), .menu-sub a[aria-current] { color: var(--tinta); text-decoration: underline; }
.menu-pie { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; color: var(--secundario); font-size: 13px; }
@media (hover: none) { .menu-esc { display: none; } }
@media (max-width: 860px) {
  .menu-seccion { grid-template-columns: 1fr; }
  .menu-sub { justify-self: start; padding-left: 40px; }
}

@media (prefers-reduced-motion: no-preference) {
  .barra-lectura .barra-enlaces a::after { transition: transform 0.35s var(--curva-movimiento); }
  .rayas span { transition: transform 0.35s var(--curva-movimiento); }
  /* Al abrirse, cada palabra sube desde su renglón, una tras otra, y luego aparecen las subsecciones. */
  .menu[open] .menu-texto, .menu[open] .menu-num { transition: transform 0.8s var(--curva-movimiento) calc(0.08s + var(--i, 0) * 0.06s); }
  .menu[open] .menu-sub { transition: opacity 0.5s ease 0.4s; }
  @starting-style {
    .menu[open] .menu-texto, .menu[open] .menu-num { transform: translateY(105%); }
    .menu[open] .menu-sub { opacity: 0; }
  }
  .menu-seccion:nth-child(2) { --i: 1; }
  .menu-seccion:nth-child(3) { --i: 2; }
  .menu-seccion:nth-child(4) { --i: 3; }
}
/* ===== fin Cabecera y menú ===== */