/* ==========================================================================
   clases tra.ma — hoja de estilo unica
   --------------------------------------------------------------------------
   La misma gramatica visual de tra.ma/scroll, adaptada a dar clase.
   Casi todo lo que se toca a mano vive en :root: cambia ahi el amarillo, el
   papel, los margenes o el ritmo vertical y se propaga a todas las clases.

   Las tipografias van aparte, en  fuentes.css  (incrustadas para que
   funcionen tambien abriendo el HTML con doble clic, sin servidor).
   ========================================================================== */

:root {
  /* Color */
  --amarillo: #ffc515;
  --tinta: #14120f;
  --papel: #f2efe8;
  --gris: #8a8578;
  --gris-claro: #d9d4c8;
  /* El azul de Espacios Domesticos: solo lo usa el calendario */
  --azul-claro: #c8d8e8;
  /* El naranja de las practicas obligatorias: tambien solo el calendario.
     Palido a proposito, para que no le quite el sitio al amarillo. */
  --naranja-claro: #f6cda2;

  /* Tipografia */
  --courier: "Courier New Trama", "Courier New", ui-monospace, monospace;
  --texto: "Inter Trama", system-ui, -apple-system, sans-serif;

  /* Pastillas: el tamaño de letra manda, y la altura sale de su interlineado.
     Asi el logo mide exactamente lo mismo que "indice" o "clase 1". */
  --chip: clamp(0.73rem, 3.4vw, 0.84rem);
  --chip-alto: calc(var(--chip) * 1.44);

  /* Retícula y ritmo */
  --margen: 5vw; /* margen lateral de la pagina */
  --aire: clamp(4.5rem, 15vw, 9rem); /* separacion entre capitulos */
  --aire-corto: clamp(1.25rem, 5vw, 2.5rem); /* separacion dentro de un capitulo */
  --nav-borde: max(0.75rem, env(safe-area-inset-top));
}

/* --- Reset corto -------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}
* {
  margin: 0;
}
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
body {
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--texto);
  font-size: clamp(1rem, 4.1vw, 1.15rem);
  line-height: 1.45;
  letter-spacing: -0.011em;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img,
video,
svg {
  display: block;
  max-width: 100%;
}
a {
  color: inherit;
  text-decoration: none;
}
button {
  font: inherit;
  color: inherit;
  border: 0;
  background: none;
  padding: 0;
  cursor: pointer;
}
::selection {
  background: var(--amarillo);
  color: var(--tinta);
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ==========================================================================
   1. LOS FIJOS — flotan siempre sobre el scroll
   --------------------------------------------------------------------------
   arriba   indice · logo · imprimir
   abajo    ← anterior · clase N · siguiente →
   ========================================================================== */
.barra {
  position: fixed;
  left: 0;
  right: 0;
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding-inline: var(--margen);
  pointer-events: none; /* solo las pastillas son clicables */
}
.barra > * {
  pointer-events: auto;
}
.barra--arriba {
  top: var(--nav-borde);
}
.barra--abajo {
  bottom: max(0.75rem, env(safe-area-inset-bottom));
}
/* Hueco invisible: mantiene el reparto izquierda/centro/derecha cuando
   falta una pastilla (la clase 1 no tiene anterior, la ultima no tiene
   siguiente). */
.barra .hueco {
  visibility: hidden;
}

/* El amarillo va pegado a la letra, como cuando seleccionas un texto:
   la banda la marca el interlineado, no un relleno. */
.rotu {
  display: inline-block;
  font-family: var(--courier);
  font-size: var(--chip);
  line-height: 1.44;
  letter-spacing: 0.01em;
  color: var(--tinta);
  background: var(--amarillo);
  padding: 0 0.16em;
  white-space: nowrap;
  position: relative;
}
/* Zona de toque comoda en el movil sin engordar el amarillo */
.rotu::after {
  content: "";
  position: absolute;
  inset: -0.7rem -0.45rem;
}

/* Sombra dura, de tinta, SOLO en la navegacion fija. Es lo que la despega de
   las fotos y la hace mandar sobre el resto. */
.barra .rotu,
.barra .logo {
  box-shadow: 2.5px 2.5px 0 var(--tinta);
}

/* El logo, exactamente igual de alto que las demas pastillas */
.logo {
  display: grid;
  place-items: center;
  height: var(--chip-alto);
  padding-inline: 0.35rem;
  background: var(--amarillo);
}
.logo svg,
.logo img {
  height: 62%;
  width: auto;
  fill: var(--tinta);
}

/* Hilo de progreso: cuanto queda de clase */
.hilo {
  position: fixed;
  inset: 0 auto auto 0;
  height: 3px;
  width: 100%;
  transform-origin: 0 50%;
  background: var(--amarillo);
  z-index: 9001;
  transform: scaleX(0);
}

/* ==========================================================================
   2. RETÍCULA — 12 columnas y permiso para salirse de ellas
   ========================================================================== */
.escena {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  padding-inline: var(--margen);
  margin-block: var(--aire);
}
/* Escena pegada a la anterior: para partir un apartado largo sin abrir
   un capitulo nuevo. */
.escena--junta {
  margin-top: var(--aire-corto);
}
/* Al saltar desde el indice de la clase, que el apartado no se meta debajo
   de la barra de arriba. */
[id] {
  scroll-margin-top: 5rem;
}
/* Cualquier pieza elige sus columnas. Nada gira: la irregularidad la dan
   las columnas y los solapes, no los giros. */
.pieza {
  grid-column: var(--col, 1 / -1);
  position: relative;
  z-index: var(--z, 1);
  margin-top: var(--sube, 0px);
}

/* A sangre: se come los margenes laterales */
.sangre {
  grid-column: 1 / -1;
  margin-inline: calc(var(--margen) * -1);
}

/* ---- Apertura -------------------------------------------------------------
   En el movil, foto a sangre con el texto apoyado abajo.
   En pantalla grande se abre en dos: el texto respirando a la izquierda y la
   foto en su columna, a tamaño contenido. */
.apertura {
  position: relative;
  margin-bottom: var(--aire);
}
.apertura__foto {
  position: relative;
  overflow: hidden;
  background: var(--gris-claro);
}
.apertura__foto img {
  width: 100%;
  height: 78svh;
  object-fit: cover;
}
.apertura__texto {
  position: absolute;
  left: var(--margen);
  right: var(--margen);
  bottom: 4.6rem;
  z-index: 2;
}
.apertura__texto > * + * {
  margin-top: 0.4rem;
}

/* Portada de dibujo, no de foto. Un trazo fino no aguanta el texto encima ni
   el velo: se pierde el dibujo y no se lee el titulo. Asi que en el movil se
   apila —titulo arriba, dibujo debajo— y en pantalla ancha se abre en dos,
   igual que la portada normal. */
.apertura--reel {
  padding-inline: var(--margen);
  padding-top: calc(var(--nav-borde) + 4.6rem);
}
.apertura--reel .apertura__texto {
  position: static;
  margin-bottom: 1.8rem;
}
/* La ficha de la clase va en la portada, debajo del titulo. Un punto mas
   pequeña que suelta en su escena, porque aqui vive en una columna estrecha
   y las filas tienen que caber en una linea. */
.apertura--reel .ficha {
  margin-top: 1.5rem;
  font-size: 0.7rem;
}
/* En pantallas medianas la columna del titulo se estrecha y algun dato no cabe
   al lado de su epigrafe. Antes que partir la frase por la mitad, que baje
   entera a la linea siguiente, pegada a la derecha. */
.apertura--reel .ficha div {
  gap: 0.7rem;
  flex-wrap: wrap;
}
.apertura--reel .ficha dd {
  white-space: nowrap;
  margin-left: auto;
}

/* ==========================================================================
   3. TEXTOS
   ========================================================================== */
.frase {
  font-size: clamp(1.6rem, 7.4vw, 2.9rem);
  line-height: 1.1;
  letter-spacing: -0.035em;
  font-weight: 500;
  text-wrap: balance;
}
.frase--grande {
  font-size: clamp(2rem, 9.5vw, 3.6rem);
}
.frase--pequena {
  font-size: clamp(1.15rem, 5vw, 1.6rem);
  line-height: 1.22;
  letter-spacing: -0.025em;
}
.parrafo {
  max-width: 34ch;
  color: color-mix(in srgb, var(--tinta) 82%, var(--papel));
}
/* Varios parrafos seguidos dentro de una misma pieza */
.parrafo + .parrafo,
.parrafo p + p {
  margin-top: 0.9rem;
}

/* Amarillo dentro de una frase, igual que una seleccion de texto */
mark,
.marca {
  background: var(--amarillo);
  color: var(--tinta);
  padding: 0.08em 0.12em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* Texto que cae encima de una foto */
.encima {
  color: var(--papel);
  text-shadow: 0 1px 24px rgba(0, 0, 0, 0.35);
}
.encima--tinta {
  color: var(--tinta);
  text-shadow: none;
}

/* Enlace dentro del texto corrido: subrayado fino que se vuelve amarillo */
.parrafo a,
.paso a,
.aviso a,
.tarea a {
  border-bottom: 1px solid var(--gris-claro);
  transition: background 0.15s ease, border-color 0.15s ease;
}
.parrafo a:hover,
.paso a:hover,
.aviso a:hover,
.tarea a:hover {
  background: var(--amarillo);
  border-color: var(--amarillo);
}

/* ==========================================================================
   4. FOTOS
   ========================================================================== */
.foto {
  position: relative;
  overflow: hidden;
  background: var(--gris-claro);
}
.foto img {
  width: 100%;
  height: auto;
}
.foto--alta img {
  aspect-ratio: 3 / 4;
  object-fit: cover;
}
.foto--ancha img {
  aspect-ratio: 16 / 10;
  object-fit: cover;
}
.foto--cuadro img {
  aspect-ratio: 1 / 1;
  object-fit: cover;
}
.foto--pantalla img {
  height: 100svh;
  object-fit: cover;
}
.foto--media img {
  height: 72svh;
  object-fit: cover;
}

/* Dos imagenes en paralelo, para que una diga lo que la otra no dice.
   Siguen en paralelo tambien en el movil: si se apilan se pierde la
   comparacion, que es justo lo que se queria enseñar. Se les da la misma
   proporcion aunque vengan de tamaños distintos, que si no parecen dos
   fotos sueltas en vez de un par. */
.pareja {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
}
/* Una fila de dibujos para comparar. Todos en una caja del mismo tamaño y el
   dibujo dentro entero, sin recortar ni deformar: son laminas de proporciones
   distintas y recortarlas seria justo perder lo que se quiere enseñar. En el
   movil se apilan, que tres dibujos en una columna de telefono no se ven. */
.fila-dibujos {
  display: grid;
  gap: 1.4rem;
}
.fila-dibujos .foto {
  background: none;
}
.fila-dibujos .foto img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: contain;
}
@media (min-width: 700px) {
  .fila-dibujos {
    grid-template-columns: repeat(var(--cuantos, 3), 1fr);
    gap: 1.2rem;
    align-items: start;
  }
}

/* Dos piezas en paralelo, pero con su pie cada una —lo que .pareja no puede
   hacer, porque ahi los dos que van al lado son las imagenes—. En el movil se
   apilan: dos pies uno junto al otro, en media columna, no se leen. */
.par-pies {
  display: grid;
  gap: 1.6rem;
}
.par-pies > figure {
  margin: 0;
}
@media (min-width: 700px) {
  .par-pies {
    grid-template-columns: 1fr 1fr;
    gap: 1.8rem;
    align-items: start;
    /* Tope propio: si no, en un monitor grande las dos mitades se van a 800 px
       cada una y lo que era una comparacion se convierte en dos carteles. */
    max-width: var(--tope, 44rem);
    margin-inline: auto;
  }
  /* Una de las dos puede bajar para que las dos cosas casen por donde tienen
     que casar —los pies de las dos figuras, la misma linea de suelo— y no por
     el borde de arriba. En tanto por ciento, que se mide sobre el ancho: asi
     el ajuste aguanta a cualquier tamaño de pantalla. */
  .par-pies > figure {
    margin-top: var(--sube, 0);
  }
}

/* Con :where() esta regla no pesa nada, asi que cualquier modificador de
   .foto la desmonta: un logotipo o una lamina se enseñan enteros y con su
   forma, no recortados a un formato comun. */
:where(.pareja) .foto img {
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

/* Velo inferior para que el texto blanco se lea sobre cualquier foto.
   Hace falta de verdad: las fotos de clase no las elegimos nosotros, y sobre
   una imagen clara el texto blanco desaparece. */
.velo .foto::after,
.foto.velo::after,
.apertura__foto.velo::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 68%;
  background: linear-gradient(
    to top,
    rgba(20, 18, 15, 0.8),
    rgba(20, 18, 15, 0.42) 32%,
    rgba(20, 18, 15, 0.12) 62%,
    rgba(20, 18, 15, 0)
  );
  pointer-events: none;
}

/* Pie de foto: breve, gris. Lo que va en courier, en negro. */
.pie {
  margin-top: 0.55rem;
  font-size: 0.78rem;
  line-height: 1.3;
  color: var(--gris);
  max-width: 34ch;
}
.pie b {
  font-family: var(--courier);
  font-weight: 400;
  color: var(--tinta);
}

/* Pantallazo de programa: se le pone marco fino para que se distinga de una
   foto, que en una clase de CAD medio material son capturas. */
.foto--pantallazo {
  background: #fff;
  border: 1px solid var(--gris-claro);
}
.foto--pantallazo img {
  aspect-ratio: auto;
}

/* Un dibujo a mano escaneado. Lo contrario del pantallazo: aqui no queremos
   marco ninguno, queremos que la lamina se apoye en el papel de la pantalla.
     - multiply funde el papel del escaneo con el papel de la web, y de paso
       apaga el azul del cielo, que era lo que cantaba;
     - la mascara deshace los cuatro bordes, para que no quede el rectangulo
       del escaner —ni sus sellos de archivo— recortado a cuchillo.
   El filtro solo levanta un poco el escaneo antes de multiplicar: si no, la
   lamina se va a marron. */
.foto--dibujo {
  background: none;
  overflow: visible;
}
.foto--dibujo img {
  mix-blend-mode: multiply;
  filter: brightness(1.06) contrast(1.02) saturate(0.85);
  -webkit-mask-image: linear-gradient(
      to right,
      transparent 0%,
      #000 11%,
      #000 89%,
      transparent 100%
    ),
    linear-gradient(
      to bottom,
      transparent 0%,
      #000 9%,
      #000 86%,
      transparent 100%
    );
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(
      to right,
      transparent 0%,
      #000 11%,
      #000 89%,
      transparent 100%
    ),
    linear-gradient(
      to bottom,
      transparent 0%,
      #000 9%,
      #000 86%,
      transparent 100%
    );
  mask-composite: intersect;
}

/* --- Señas: un pantallazo que se explica solo ------------------------------
   Una nube amarilla va posandose sobre cada sitio de la pantalla, uno detras
   de otro, mientras debajo se dice como se llama. Sirve para lo que un
   pantallazo quieto no sirve: enseñar donde hay que mirar.

   Cada sitio lleva su rectangulo escrito en el HTML (--x, --y, --w, --h, en
   tanto por ciento de la imagen), asi que aguanta cualquier tamaño de
   pantalla. La lista de sitios es a la vez el guion y el indice: el
   JavaScript la lee de ahi y no tiene ningun dato dentro.
   -------------------------------------------------------------------------- */
.senas__caja {
  position: relative;
}
.senas__nube {
  position: absolute;
  left: var(--sx, 0%);
  top: var(--sy, 0%);
  width: var(--sw, 0%);
  height: var(--sh, 0%);
  background: color-mix(in srgb, var(--amarillo) 30%, transparent);
  outline: 2px solid var(--amarillo);
  outline-offset: -1px;
  opacity: var(--so, 0);
  pointer-events: none;
  transition: left 0.7s cubic-bezier(0.65, 0, 0.35, 1),
    top 0.7s cubic-bezier(0.65, 0, 0.35, 1),
    width 0.7s cubic-bezier(0.65, 0, 0.35, 1),
    height 0.7s cubic-bezier(0.65, 0, 0.35, 1), opacity 0.4s ease;
}

/* El renglon de debajo: a la izquierda el sitio en el que va, a la derecha
   la pastilla de parar y seguir. La monta clase.js. */
.senas__pies {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 0.55rem;
}
.senas__boton {
  flex: 0 0 auto;
  font-family: var(--courier);
  font-size: 0.72rem;
  line-height: 1.5;
  padding: 0 0.4em;
  background: var(--amarillo);
  color: var(--tinta);
  transition: transform 0.15s ease;
}
.senas__boton:active {
  transform: scale(0.94);
}

/* Los seis sitios, apilados en el mismo renglon: solo se ve el que toca. */
.senas__lista {
  position: relative;
  flex: 1 1 auto;
  list-style: none;
  padding: 0;
  min-height: 1.5em;
  counter-reset: sena;
  font-family: var(--courier);
  font-size: 0.72rem;
  line-height: 1.5;
  color: var(--tinta);
}
.senas__lista li {
  position: absolute;
  inset: 0 auto auto 0;
  counter-increment: sena;
  opacity: 0;
  transition: opacity 0.35s ease;
}
.senas__lista li::before {
  content: counter(sena, decimal-leading-zero) " · ";
  color: var(--gris);
}
.senas__lista li[data-activa] {
  opacity: 1;
}

/* Sin animacion, el pantallazo se queda quieto y la lista se lee entera,
   que es lo unico que tiene sentido si no se puede mover nada. */
@media (prefers-reduced-motion: reduce) {
  .senas__nube {
    display: none;
  }
  .senas__lista {
    position: static;
  }
  .senas__lista li {
    position: static;
    opacity: 1;
  }
}

/* En papel: los seis sitios de la lista y ningun boton. */
@media print {
  .senas__nube,
  .senas__boton {
    display: none;
  }
  .senas__lista {
    position: static;
  }
  .senas__lista li {
    position: static;
    opacity: 1;
  }
}

/* Un logotipo no es una foto: se enseña entero, centrado y con aire, sobre
   blanco. Recortarlo a un formato seria destrozarlo. La placa va cuadrada
   porque unas marcas son alargadas y otras verticales, y asi conviven al
   lado sin que una parezca el doble de grande que la otra. */
.foto--marca {
  aspect-ratio: 1 / 1;
  background: #fff;
  border: 1px solid var(--gris-claro);
  display: grid;
  place-items: center;
  padding: clamp(1rem, 6%, 2.4rem);
}
/* Llena la placa y que sea contain quien respete la forma. Con width:auto un
   SVG se quedaria al tamaño que trae escrito dentro, que suelen ser 40 px. */
.foto--marca img {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  object-fit: contain;
}

/* ==========================================================================
   5. CABECERA DE CLASE
   ========================================================================== */
.cabecera {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.4rem;
  margin-bottom: var(--aire-corto);
}
.cabecera h2 {
  font-size: clamp(1.5rem, 6.6vw, 2.4rem);
  line-height: 1.05;
  letter-spacing: -0.035em;
  font-weight: 500;
  flex-basis: 100%;
  margin-top: 0.5rem;
}
/* Todo lo que va en la tipografia del estudio va en negro. Sin excepciones. */
.dato {
  font-family: var(--courier);
  font-size: clamp(0.76rem, 3.1vw, 0.84rem);
  line-height: 1;
  color: var(--tinta);
  letter-spacing: -0.012em;
}
.dato--fuerte {
  color: var(--tinta);
  background: var(--amarillo);
  line-height: 1.46;
  padding: 0 0.22em;
}

/* ==========================================================================
   6. FICHA DE LA CLASE — los datos de cabecera, en dos columnas
   ========================================================================== */
.ficha {
  border-top: 1px solid var(--gris-claro);
  font-family: var(--courier);
  font-size: 0.8rem;
  line-height: 1.5;
}
.ficha div {
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  border-bottom: 1px solid var(--gris-claro);
  padding: 0.5rem 0;
}
.ficha dt {
  color: var(--gris);
  flex: 0 0 auto;
}
.ficha dd {
  text-align: right;
  color: var(--tinta);
}

/* ==========================================================================
   7. ÍNDICE DE LA CLASE — lo que vamos a hacer hoy
   ========================================================================== */
.indice {
  list-style: none;
  padding: 0;
  counter-reset: punto;
  border-top: 1px solid var(--gris-claro);
}
.indice li {
  counter-increment: punto;
  border-bottom: 1px solid var(--gris-claro);
  padding: 0.75rem 0;
  display: flex;
  gap: 0.9rem;
  align-items: baseline;
}
.indice li::before {
  content: counter(punto, decimal-leading-zero);
  font-family: var(--courier);
  font-size: 0.76rem;
  color: var(--tinta);
  background: var(--amarillo);
  padding: 0 0.22em;
  flex: 0 0 auto;
}
.indice a {
  flex: 1 1 auto;
}
.indice a:hover {
  text-decoration: underline;
  text-underline-offset: 0.25em;
}
.indice .rato {
  font-family: var(--courier);
  font-size: 0.72rem;
  color: var(--gris);
  flex: 0 0 auto;
}

/* ==========================================================================
   8. PASOS — el tutorial paso a paso
   ========================================================================== */
.pasos {
  list-style: none;
  padding: 0;
  counter-reset: paso;
}
.paso {
  counter-increment: paso;
  position: relative;
  padding-left: 2.6rem;
  padding-bottom: 1.6rem;
  max-width: 44ch;
}
.paso::before {
  content: counter(paso, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 0.15em;
  font-family: var(--courier);
  font-size: 0.76rem;
  line-height: 1.46;
  color: var(--tinta);
  background: var(--amarillo);
  padding: 0 0.22em;
}
/* Hilo que une los pasos, como una linea de construccion */
.paso:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 0.85rem;
  top: 1.9em;
  bottom: 0.4rem;
  width: 1px;
  background: var(--gris-claro);
}
.paso h4 {
  font-size: 1.02rem;
  font-weight: 500;
  letter-spacing: -0.02em;
  margin-bottom: 0.2rem;
}
.paso p {
  color: color-mix(in srgb, var(--tinta) 82%, var(--papel));
}
.paso p + p {
  margin-top: 0.5rem;
}

/* ==========================================================================
   9. COMANDOS Y TECLAS — la chuleta
   --------------------------------------------------------------------------
   En AutoCAD y Rhino lo que se memoriza son los alias. Esta es la tabla que
   va a repetirse en casi todas las clases.
   ========================================================================== */
.comandos {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
  text-align: left;
}
.comandos caption {
  font-family: var(--courier);
  font-size: 0.76rem;
  letter-spacing: 0.04em;
  color: var(--tinta);
  text-align: left;
  padding-bottom: 0.6rem;
}
.comandos th {
  font-family: var(--courier);
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0.04em;
  color: var(--gris);
  border-bottom: 1px solid var(--gris-claro);
  padding: 0 0.6rem 0.4rem 0;
  vertical-align: bottom;
}
.comandos td {
  border-bottom: 1px solid var(--gris-claro);
  padding: 0.55rem 0.6rem 0.55rem 0;
  vertical-align: top;
}
.comandos td:last-child,
.comandos th:last-child {
  padding-right: 0;
}
.comandos tr:hover td {
  background: color-mix(in srgb, var(--amarillo) 16%, transparent);
}
.comandos .orden {
  font-family: var(--courier);
  white-space: nowrap;
}
/* El alias que se teclea va en negrita del texto corrido, no en la
   tipografia del estudio: en courier un alias de dos o tres letras se lee
   peor de lo que parece, y aqui lo unico que importa es que se quede en la
   cabeza. La columna de al lado, la del nombre de la orden, si sigue en
   courier: eso es lo que aparece escrito en el programa. */
.comandos .atajo {
  font-weight: 700;
  white-space: nowrap;
}
.comandos .que {
  color: color-mix(in srgb, var(--tinta) 82%, var(--papel));
}

/* Una tecla o un alias suelto dentro del texto */
kbd,
.tecla {
  font-family: var(--courier);
  font-size: 0.85em;
  line-height: 1.4;
  background: var(--amarillo);
  color: var(--tinta);
  padding: 0 0.24em;
  white-space: nowrap;
}

/* ==========================================================================
   10. AVISO Y TAREA — las dos cajas que rompen el scroll
   ========================================================================== */
.aviso {
  border-left: 3px solid var(--amarillo);
  padding: 0.2rem 0 0.2rem 1.1rem;
  max-width: 42ch;
}
.aviso h4,
.tarea h4 {
  font-family: var(--courier);
  font-size: 0.76rem;
  font-weight: 400;
  letter-spacing: 0.04em;
  margin-bottom: 0.4rem;
}
.aviso p {
  color: color-mix(in srgb, var(--tinta) 82%, var(--papel));
}
.aviso p + p {
  margin-top: 0.6rem;
}

.tarea {
  background: var(--amarillo);
  padding: 1.4rem 1.3rem;
  max-width: 46ch;
}
.tarea h4 {
  color: var(--tinta);
}
.tarea p,
.tarea li {
  color: var(--tinta);
}
.tarea ul {
  margin: 0.6rem 0 0 1.1rem;
  padding: 0;
}
.tarea li + li {
  margin-top: 0.35rem;
}
.tarea .cuando {
  font-family: var(--courier);
  font-size: 0.76rem;
  margin-top: 0.9rem;
  display: block;
  border-top: 1px solid rgba(20, 18, 15, 0.25);
  padding-top: 0.6rem;
}

/* ==========================================================================
   11. LISTA — enlaces, descargas, apartados
   ========================================================================== */
.lista {
  list-style: none;
  padding: 0;
  border-top: 1px solid var(--gris-claro);
}
.lista li {
  border-bottom: 1px solid var(--gris-claro);
  padding: 0.9rem 0;
}
.lista h3 {
  font-size: 1.05rem;
  font-weight: 500;
  letter-spacing: -0.02em;
  margin-bottom: 0.2rem;
}
/* Un titulo de fila puede decir dos cosas seguidas: en negrita, de que es; y
   detras, en la letra del estudio, la coletilla que lo situa — que clase es, de
   que cuatrimestre. Van seguidas en la misma linea mientras quepan; si no,
   la coletilla sigue debajo. */
.lista h3 b {
  font-weight: 700;
}
.lista h3 .coletilla {
  font-family: var(--courier);
  font-size: 0.86em;
  font-weight: 400;
  letter-spacing: 0.02em;
}
.lista p {
  font-size: 0.92rem;
  color: var(--gris);
  margin: 0;
  max-width: 40ch;
}
/* Fila de lista que es un enlace entero */
.lista a.fila {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}
/* El texto ocupa la fila entera aunque el parrafo de debajo sea mas estrecho
   (se queda en sus 40ch): asi un titulo largo dispone de todo el ancho antes
   de partirse, y la flechita sigue pegada a la derecha. */
.lista a.fila > :first-child {
  flex: 1;
  min-width: 0;
}
.lista a.fila:hover h3 {
  background: var(--amarillo);
}
.lista .flechita {
  font-family: var(--courier);
  color: var(--gris);
  flex: 0 0 auto;
}

/* ==========================================================================
   12. CARRUSEL — flechitas laterales, una imagen por idea
   ========================================================================== */
.carrusel {
  position: relative;
}
.carrusel__via {
  display: flex;
  gap: 0.5rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  margin-inline: calc(var(--margen) * -1);
  padding-inline: var(--margen);
  scroll-padding-inline: var(--margen);
}
.carrusel__via::-webkit-scrollbar {
  display: none;
}
.carrusel__vagon {
  flex: 0 0 88%;
  scroll-snap-align: center;
}
.carrusel__pies {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 0.6rem;
}
.carrusel__flechas {
  display: flex;
  gap: 0.3rem;
  flex: 0 0 auto;
}
.flecha {
  width: 2.1rem;
  height: 2.1rem;
  display: grid;
  place-items: center;
  background: var(--amarillo);
  font-family: var(--courier);
  font-size: 0.9rem;
  line-height: 1;
  transition: opacity 0.15s ease, transform 0.15s ease;
}
/* Desactivada se destiñe el amarillo, nunca la letra: la letra siempre negra */
.flecha:disabled {
  background: color-mix(in srgb, var(--amarillo) 30%, var(--papel));
  cursor: default;
}
.flecha:active:not(:disabled) {
  transform: scale(0.9);
}
.contador {
  font-family: var(--courier);
  font-size: 0.72rem;
  color: var(--tinta);
  flex: 0 0 auto;
  align-self: center;
}

/* ==========================================================================
   13. ANTES / DESPUÉS — se arrastra la manilla
   ========================================================================== */
@property --corte {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 50%;
}

.ad {
  position: relative;
  overflow: hidden;
  touch-action: pan-y; /* el dedo sigue pudiendo bajar la pagina */
  user-select: none;
  -webkit-user-select: none;
  cursor: ew-resize;
  background: var(--gris-claro);
}
.ad--suave {
  transition: --corte 0.55s cubic-bezier(0.65, 0, 0.35, 1);
}
@media (hover: none) {
  .ad {
    cursor: pointer;
  }
}
.ad img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  /* Que el raton no pueda "coger" la imagen: si el navegador arranca su
     arrastre de imagen, se queda con el gesto y la manilla deja de seguir al
     cursor a mitad de camino. */
  pointer-events: none;
  -webkit-user-drag: none;
}
.ad__despues {
  position: absolute;
  inset: 0;
  clip-path: inset(0 0 0 var(--corte, 50%));
}
.ad__despues img {
  height: 100%;
}
/* La manilla: raya de tinta y discontinua, como una linea de corte de plano.
   Discontinua para que no parezca parte del dibujo, y de tinta para que se lea
   igual sobre las dos imagenes. */
.ad__linea {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--corte, 50%);
  width: 3px;
  background-image: repeating-linear-gradient(
    to bottom,
    var(--tinta) 0 11px,
    transparent 11px 19px
  );
  transform: translateX(-1.5px);
  pointer-events: none;
}
.ad__etiqueta {
  position: absolute;
  bottom: 0.6rem;
  font-family: var(--courier);
  font-size: 0.68rem;
  line-height: 1.5;
  padding: 0 0.2em;
  background: var(--amarillo);
  color: var(--tinta);
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.ad[data-viendo="antes"] .ad__etiqueta--d,
.ad[data-viendo="despues"] .ad__etiqueta--a {
  opacity: 0.25;
}
.ad__etiqueta--a {
  left: 0.6rem;
}
.ad__etiqueta--d {
  right: 0.6rem;
}

/* ==========================================================================
   14. VÍDEO
   ========================================================================== */
.video {
  position: relative;
  overflow: hidden;
  background: var(--tinta);
}
.video video {
  width: 100%;
  height: auto;
  object-fit: cover;
}
.video__sonido {
  position: absolute;
  right: 0.6rem;
  bottom: 0.6rem;
  font-family: var(--courier);
  font-size: 0.68rem;
  line-height: 1.5;
  padding: 0 0.2em;
  background: var(--amarillo);
  color: var(--tinta);
}

/* ==========================================================================
   15. REEL — el mismo dibujo, contado en cinco tiempos
   --------------------------------------------------------------------------
   Cuatro laminas en registro, una encima de otra, y un guion que las va
   encendiendo. Sirve para enseñar que un dibujo de CAD no es una lamina
   cerrada: es un archivo que se construye por capas y que puede contar el
   dia y la noche sin volver a dibujarse.

   El JavaScript solo mueve una variable, --t, de 0 a 1. El guion entero
   esta aqui, para poder cambiar el ritmo sin abrir clase.js:

     0.00 – 0.22   la linea       el trazo de AutoCAD, dibujandose
     0.22 – 0.40   el sombreado   las manchas que dicen donde da la luz
     0.40 – 0.60   el collage     se viste de materiales, de dia
     0.60 – 0.80   anochece       cae la tarde
     0.80 – 1.00   las luces      se encienden, y ahi se queda

   Si se tocan estos cortes hay que tocarlos tambien en la tabla CORTES de
   clase.js, que es la que pone el nombre de cada tiempo.
   ========================================================================== */
@property --t {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}

.reel__caja {
  position: relative;
  overflow: hidden;
  /* Papel blanco y filete: esto es una lamina, no una foto. */
  background: #fff;
  border: 1px solid var(--gris-claro);
  touch-action: pan-y; /* el dedo sigue pudiendo bajar la pagina */
  user-select: none;
  -webkit-user-select: none;
  cursor: ew-resize;
}
@media (hover: none) {
  .reel__caja {
    cursor: pointer;
  }
}
.reel__capa {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* 01 · la linea. No aparece: se dibuja. El barrido va en el eje de la
   axonometria, asi que el trazo entra como entraria a mano.

   Ademas es la unica lamina que va en el flujo: las otras tres se apilan
   encima en absoluto, y sin esta la caja no tendria de donde sacar su
   tamaño. Por eso lleva el width y el height en el HTML. */
.reel__capa--linea {
  position: relative;
  height: auto;
  --dibuja: clamp(0, calc(var(--t) / 0.2), 1);
  /* El borde va corto a proposito: si el degradado es largo no parece un
     dibujo avanzando, parece una lamina mal impresa. */
  -webkit-mask-image: linear-gradient(
    108deg,
    #000 calc(var(--dibuja) * 110% - 10%),
    transparent calc(var(--dibuja) * 110% - 5%)
  );
  mask-image: linear-gradient(
    108deg,
    #000 calc(var(--dibuja) * 110% - 10%),
    transparent calc(var(--dibuja) * 110% - 5%)
  );
}

/* 02 · el sombreado. Es la misma lamina con una capa mas encendida, asi que
   al fundir solo aparecen las manchas. */
.reel__capa--sombreado {
  opacity: clamp(0, calc((var(--t) - 0.22) / 0.12), 1);
}

/* 03 · el collage */
.reel__capa--dia {
  opacity: clamp(0, calc((var(--t) - 0.4) / 0.14), 1);
}

/* 04 y 05 · la noche entra fria y apagada, y al final recupera el color:
   eso es lo que hace que las ventanas se enciendan. */
.reel__capa--noche {
  --luz: clamp(0, calc((var(--t) - 0.78) / 0.16), 1);
  opacity: clamp(0, calc((var(--t) - 0.6) / 0.15), 1);
  filter: saturate(calc(0.45 + 0.55 * var(--luz)))
    brightness(calc(0.975 + 0.025 * var(--luz)));
}

/* Un velo frio que sube mientras cae la tarde y se retira cuando se
   encienden las luces. Sube y baja: por eso el min() de dos rectas. */
.reel__velo {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(200deg, #4a6ba8, #2c3f74);
  mix-blend-mode: multiply;
  opacity: clamp(
    0,
    min(calc((var(--t) - 0.58) * 0.8889), calc(0.5083 - var(--t) * 0.4583)),
    0.16
  );
}

/* --- La barra de tiempo ----------------------------------------------------
   Un tramo por tiempo, de ancho proporcional a lo que dura, y el rotulo
   debajo. Cada tramo sabe donde empieza (--desde) y cuanto ocupa (--factor,
   que es 1 / lo que dura); con eso y el --t comun se pinta solo, sin que el
   JavaScript tenga que tocar nada en cada fotograma. Esos numeros los pone
   clase.js al montar la barra. */
.reel__tiempo {
  margin-top: 0.6rem;
}
.reel__tramos {
  display: flex;
  gap: 3px;
  list-style: none;
  padding: 0;
  counter-reset: tramo;
}
.reel__tramo {
  flex: var(--dura);
  min-width: 0;
  counter-increment: tramo;
  --lleno: clamp(0, calc((var(--t) - var(--desde)) * var(--factor)), 1);
}
/* El carril: amarillo hasta donde va, gris el resto */
.reel__tramo::before {
  content: "";
  display: block;
  height: 3px;
  background: linear-gradient(
    90deg,
    var(--amarillo) 0 calc(var(--lleno) * 100%),
    var(--gris-claro) calc(var(--lleno) * 100%) 100%
  );
}
/* El rotulo no esta o esta: se enciende en cuanto la barra entra en su
   tramo, que es lo que hace que el guion se lea mientras corre.

   Van a dos alturas, alternando. Un rotulo es mas largo que su tramo —"el
   sombreado" no cabe en el 18 % que dura—, asi que si fueran todos seguidos
   se pisarian. Escalonados, cada uno tiene delante el ancho de dos tramos y
   entran holgados sin tener que achicar la letra. */
.reel__rotulo {
  display: block;
  margin-top: 0.42rem;
  font-family: var(--courier);
  font-size: 0.66rem;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--tinta);
  white-space: nowrap;
  opacity: clamp(0.2, calc(0.2 + var(--lleno) * 6), 1);
}
.reel__tramo:nth-child(even) .reel__rotulo {
  margin-top: calc(0.42rem + 1.3em);
}
/* El ultimo se alinea a la derecha: asi se desborda hacia dentro y no se
   sale de la lamina. */
.reel__tramo:last-child .reel__rotulo {
  text-align: right;
}
.reel__rotulo::before {
  content: counter(tramo, decimal-leading-zero) " ";
  color: var(--gris);
}
/* En el movil los cinco rotulos no caben en una linea, asi que solo se
   enseña el tiempo en el que va. */
.reel__ahora {
  display: block;
  margin-top: 0.42rem;
  font-family: var(--courier);
  font-size: 0.7rem;
  color: var(--tinta);
}
@media (min-width: 700px) {
  .reel__ahora {
    display: none;
  }
}
@media (max-width: 699.98px) {
  .reel__rotulo {
    display: none;
  }
}

/* ==========================================================================
   16. PLANO — se dibuja solo al llegar
   ========================================================================== */
.plano {
  width: 100%;
  height: auto;
  overflow: visible;
}
.plano [data-trazo] {
  fill: none;
  stroke: var(--tinta);
  stroke-linecap: square;
  stroke-linejoin: miter;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 1.15s cubic-bezier(0.65, 0, 0.35, 1);
  transition-delay: calc(var(--orden, 0) * 190ms);
}
.plano.dibujado [data-trazo] {
  stroke-dashoffset: 0;
}
.plano .muro {
  stroke-width: 3.4;
}
.plano .tabique {
  stroke-width: 1.6;
}
.plano .fino {
  stroke-width: 0.8;
}
.plano .cota {
  stroke-width: 0.6;
  stroke: var(--gris);
}
.plano .eje {
  stroke-width: 0.7;
  stroke: var(--amarillo);
}
.plano .discontinuo {
  stroke-width: 1;
  stroke-dasharray: 5 4;
  stroke-dashoffset: 0;
  opacity: 0;
  transition: opacity 0.7s ease;
  transition-delay: calc(var(--orden, 0) * 190ms);
}
.plano.dibujado .discontinuo {
  opacity: 0.55;
}
.plano text {
  font-family: var(--courier);
  font-size: 7.5px;
  letter-spacing: 0.06em;
  fill: var(--tinta);
  /* halo de papel para que el rotulo se lea sobre los trazos, como en CAD */
  paint-order: stroke fill;
  stroke: var(--papel);
  stroke-width: 2.4px;
  stroke-linejoin: round;
  opacity: 0;
  transition: opacity 0.5s ease;
  transition-delay: calc(var(--orden, 0) * 190ms + 300ms);
}
.plano.dibujado text {
  opacity: 1;
}
.plano text.cotatxt {
  font-size: 6.5px;
}

/* ==========================================================================
   17. TIRA de imagenes sueltas
   ========================================================================== */
.tira {
  display: flex;
  gap: 0.5rem;
  overflow-x: auto;
  scrollbar-width: none;
  margin-inline: calc(var(--margen) * -1);
  padding-inline: var(--margen);
  scroll-padding-inline: var(--margen);
  scroll-snap-type: x proximity;
  /* La tira sigue mas alla del borde: en vez de cortarse a hachazo se
     desvanece antes de llegar. */
  --desvanece: 6%;
  mask-image: linear-gradient(
    to right,
    transparent 0,
    #000 var(--desvanece),
    #000 calc(100% - var(--desvanece)),
    transparent 100%
  );
}
.tira::-webkit-scrollbar {
  display: none;
}
.tira > * {
  flex: 0 0 62%;
  scroll-snap-align: start;
}

/* ==========================================================================
   18. APARICIÓN al hacer scroll
   ========================================================================== */
.aparece {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.75s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.75s cubic-bezier(0.22, 1, 0.36, 1);
}
.aparece.visto {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .aparece {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .plano [data-trazo] {
    stroke-dashoffset: 0;
    transition: none;
  }
  .plano text,
  .plano .discontinuo {
    opacity: 1;
    transition: none;
  }
  /* El reel no se pone solo: se queda en la noche, que es donde acaba.
     El boton de repetir sigue funcionando, porque eso ya lo pide quien mira. */
  .reel {
    --t: 1;
  }
  html,
  * {
    scroll-behavior: auto !important;
  }
}

/* ==========================================================================
   19. HOJA — el indice y cualquier pagina de solo texto
   ========================================================================== */
.hoja {
  padding-inline: var(--margen);
  padding-top: calc(var(--nav-borde) + 4.5rem);
  padding-bottom: 8rem;
}
.hoja h1 {
  font-size: clamp(2rem, 9vw, 3.4rem);
  line-height: 1.04;
  letter-spacing: -0.04em;
  font-weight: 500;
  text-wrap: balance;
}
.hoja h2 {
  font-family: var(--courier);
  font-size: 0.8rem;
  font-weight: 400;
  letter-spacing: 0.04em;
  color: var(--tinta);
  margin-top: 4.5rem;
  margin-bottom: 1.1rem;
}
.hoja > p {
  max-width: 38ch;
  margin-bottom: 1.1rem;
}
/* Una figura suelta dentro de la hoja: separa como separa un parrafo. Puesta
   detras de un epigrafe, en pantalla ancha queda al lado del epigrafe. */
.hoja > figure.dibujo {
  margin-bottom: 1.6rem;
}
.hoja > p.grande {
  font-size: clamp(1.15rem, 4.6vw, 1.4rem);
  line-height: 1.26;
  letter-spacing: -0.025em;
  margin-bottom: 1.6rem;
}
.hoja > ul {
  margin-bottom: 1.4rem;
}
.hoja > figure {
  margin-block: 2.8rem;
}
.hoja > h1 + * {
  margin-top: 2rem;
}
.hoja > .aviso {
  margin-bottom: 1.4rem;
}

/* --- Calendario del cuatrimestre -------------------------------------------
   La tabla de la pagina  calendario/ : una fila por semana, de lunes a
   domingo. En amarillo, nuestras entregas; en azul claro, las de Espacios
   Domesticos. Hereda de .comandos; aqui, solo lo suyo. */
.calendario-marco {
  /* La tabla es mas ancha que un movil: que ruede de lado ella sola */
  overflow-x: auto;
}
.calendario {
  min-width: 46rem;
  font-size: 0.82rem;
}
.calendario td {
  padding-right: 0.4rem;
}
.calendario .dia {
  display: block;
  font-family: var(--courier);
  font-size: 0.68rem;
  color: var(--gris);
  margin-bottom: 0.12rem;
  white-space: nowrap;
}
/* El nombre del mes solo aparece el dia que cambia, y es la unica pista de por
   donde va el calendario: suelto entre los numeros se perdia. Va en pastilla
   amarilla con filo de tinta —el filo es lo que lo separa de las pastillas de
   entrega, que van sin borde—. */
.calendario .dia b {
  display: inline-block;
  font-weight: 700;
  font-size: 1.1em;
  letter-spacing: 0.04em;
  color: var(--tinta);
  background: var(--amarillo);
  border: 1px solid var(--tinta);
  padding: 0 0.22em;
  line-height: 1.25;
}
.calendario .festivo {
  color: var(--gris);
}
/* El numero de semana arranca arriba, a la altura de la fecha */
.calendario tbody th {
  vertical-align: top;
  padding-top: 0.6rem;
}
/* La columna de la izquierda no es una casilla mas: es el rotulo de la
   semana. Se separa de la del lunes para que el tema no se lea pegado a las
   clases, y se le deja un poco mas de sitio antes de partir la palabra. */
.calendario thead th:first-child,
.calendario tbody th {
  padding-right: 1.6rem;
}
/* Las entregas mandan sobre todo lo demas del calendario: llevan la sombra
   dura de tinta de las pastillas de la navegacion, que es lo que las levanta
   del papel. Ni la practica ni las fases de la otra asignatura la llevan. */
.calendario mark {
  display: inline-block;
  font-size: 0.78rem;
  margin-top: 0.15rem;
  box-shadow: 2px 2px 0 var(--tinta);
}
/* La entrega de la otra asignatura: pastilla azul, como la amarilla */
.ajena {
  display: inline-block;
  background: var(--azul-claro);
  font-family: var(--courier);
  font-size: 0.78rem;
  padding: 0 0.22em;
  white-space: nowrap;
}
.calendario .ajena {
  margin-top: 0.15rem;
}
/* Lo nuestro, cuando hay que nombrarlo al lado de las otras dos pastillas —en
   la leyenda del calendario—: mismo amarillo de siempre, pero en la letra del
   estudio, para que las tres se lean como lo que son, tres etiquetas iguales
   de distinto color. */
.propia {
  display: inline-block;
  font-family: var(--courier);
  font-size: 0.78rem;
  padding: 0 0.22em;
  white-space: nowrap;
}
/* Practica obligatoria: pastilla naranja, igual de forma que las otras dos.
   Van todos los martes menos los de entrega, que ya cantan de amarillo. */
.practica {
  display: inline-block;
  background: var(--naranja-claro);
  font-family: var(--courier);
  font-size: 0.78rem;
  padding: 0 0.22em;
  white-space: nowrap;
}
.calendario .practica {
  margin-top: 0.15rem;
}
/* El nombre de la fase: fuera de la reticula, en el margen izquierdo,
   debajo del numero de su semana */
.calendario .tema {
  display: block;
  max-width: 7.5rem;
  font-size: 0.68rem;
  line-height: 1.35;
  color: var(--gris);
  margin-top: 0.3rem;
}
/* Que el amarillo, el azul y el naranja salgan tambien en papel */
.calendario mark,
.calendario .dia b,
.practica,
.ajena {
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}
@media print {
  .calendario-marco {
    overflow: visible;
  }
  .calendario {
    min-width: 0;
    font-size: 0.7rem;
  }
}

/* ==========================================================================
   20. ESCRITORIO — la version movil manda; aqui solo se le da aire
   ========================================================================== */
@media (min-width: 900px) {
  :root {
    --margen: 9vw;
    /* Tope de ancho de cualquier imagen del relato */
    --foto-max: 34rem;
    /* El reel va mas ancho: es un dibujo que hay que poder leer, no una foto */
    --reel-max: 52rem;
  }
  body {
    font-size: 1.15rem;
  }
  .carrusel__vagon {
    flex-basis: 46%;
  }
  .tira > * {
    flex-basis: 22%;
  }
  .tira {
    --desvanece: 11%;
  }
  .foto--pantalla img {
    height: 100vh;
  }

  /* La apertura se abre en dos: texto a la izquierda, foto a la derecha. */
  .apertura {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 6vw;
    padding-inline: var(--margen);
    min-height: 86vh;
  }
  .apertura__texto {
    position: static;
    order: 1;
  }
  .apertura__foto {
    order: 2;
    width: min(34rem, 40vw);
  }
  /* En pantalla ancha la portada se enseña entera, con sus proporciones.
     No se recorta a un formato fijo: en una clase la portada tanto puede ser
     una foto vertical como un pantallazo de AutoCAD apaisado, y recortarlo
     seria justo perder lo que se quiere enseñar. */
  .apertura__foto img {
    height: auto;
    aspect-ratio: auto;
    max-height: 74vh;
    margin-inline: auto;
  }
  /* sobre papel el texto va en tinta, no en blanco */
  .apertura__texto .encima {
    color: var(--tinta);
    text-shadow: none;
  }

  /* La portada de dibujo hereda la reticula de la portada normal; solo hay
     que devolverle el aire de arriba y darle sitio al dibujo, que es apaisado
     y necesita mas ancho que una foto. */
  .apertura--reel {
    padding-top: 0;
  }
  .apertura--reel .apertura__pieza {
    order: 2;
    width: min(42rem, 50vw);
  }

  /* Que las lineas no se hagan kilometricas en pantallas anchas. */
  .frase {
    max-width: 22ch;
  }
  .frase--grande {
    max-width: 17ch;
  }
  .frase--pequena {
    max-width: 34ch;
  }
  .parrafo {
    max-width: 44ch;
  }

  /* Cada pieza va topada de ancho, y por defecto la rejilla la arranca donde
     empieza su columna: el resultado seria que TODO se pega a la izquierda.
     Centrandola dentro de su banda, la irregularidad la siguen dando las
     columnas pero el conjunto no se va a un lado. */
  .escena > .pieza:not(.sangre):not(.carrusel):not(:has(.tira)) {
    justify-self: center;
  }
  /* Cada figura se topa en --foto-max, salvo que diga lo suyo con --tope.
     Hace falta para las piezas que no son fotos: un croquis apaisado quiere
     ancho, y un alzado vertical, justo lo contrario. */
  .escena > figure.pieza:not(.sangre) {
    max-width: var(--tope, var(--foto-max));
  }
  .escena > figure.pieza:has(.plano) {
    max-width: 30rem;
  }
  /* Las dos imagenes del par van con width:100%, asi que no le dan ancho
     propio a la figura y acabaria midiendola el pie de foto. Se le dice que
     ocupe su banda, y el tope hace el resto. */
  /* Ojo con la especificidad: el figure.pieza de arriba pesa (0,3,1), asi que
     este tiene que igualarlo para ganarle por orden. */
  .escena > .pieza.pareja,
  .escena > figure.pieza:has(.pareja) {
    width: 100%;
    max-width: var(--tope, 44rem);
  }
  .escena > figure.pieza.reel:not(.sangre) {
    max-width: var(--reel-max);
  }
  /* Una lamina de proyecto se enseña lo mas grande que quepa: lo que hay que
     ver de ella es precisamente que esta llena de instrucciones. */
  .escena > figure.pieza.lamina:not(.sangre) {
    max-width: 58rem;
  }
  .sangre .foto {
    max-width: 64rem;
    margin-inline: auto;
  }
  .foto--media img {
    height: 62vh;
  }

  /* Bloques de clase: ancho de lectura comodo, no de cartel */
  .pasos,
  .indice,
  .lista,
  .ficha {
    max-width: 40rem;
  }
  /* Ancho fijo, no "lo que pida el contenido": estas piezas van centradas en su
     banda (mas abajo, justify-self), asi que una tabla de dos columnas salia
     mas estrecha que la de tres y unas debajo de otras se veia el escalon.
     Todas miden lo mismo y se leen como una sola chuleta. */
  .comandos {
    width: 44rem;
    max-width: 100%;
  }

  /* --- El indice en pantalla ancha ------------------------------------
     Los epigrafes se descuelgan al margen izquierdo y el texto se queda en
     su columna. La tercera columna va vacia a proposito: hace de contrapeso
     de la de los epigrafes, y asi la columna de texto cae en el centro
     exacto de la pagina. */
  .hoja {
    display: grid;
    /* Las columnas de fuera se comen el aire que sobra (por eso 1fr y no
       9rem a secas): la de texto sigue midiendo lo mismo y cayendo en el
       centro, pero ahora la rejilla llega hasta el margen de la pagina. Asi
       lo que se abre a 1 / -1 —el calendario— queda alineado con las
       pastillas de arriba. */
    grid-template-columns: minmax(9rem, 1fr) minmax(0, 34rem) minmax(9rem, 1fr);
    column-gap: 3.5rem;
    justify-content: center;
    align-items: start;
  }
  .hoja > * {
    grid-column: 2;
  }
  .hoja h2 {
    grid-column: 1;
    text-align: right;
    margin-bottom: 0;
    padding-top: 0.3rem;
  }
  .hoja h2,
  .hoja h2 + * {
    margin-top: 4.5rem;
  }
  .hoja > p,
  .hoja > h1 {
    max-width: none;
  }
  .hoja > figure {
    margin-inline: auto;
  }
  .calendario {
    font-size: 0.88rem;
  }
  /* El calendario es ancho: se sale de la columna de lectura, como el reel.
     Ocupa la pagina entera, de margen a margen. */
  .hoja > .calendario-marco {
    grid-column: 1 / -1;
    width: 100%;
  }
  /* Aqui no vale el tope de las tablas de comandos: el calendario se lee de
     lado a lado. */
  .hoja > .calendario-marco .calendario {
    width: 100%;
    max-width: none;
  }
  /* Los dias en los que no hay clase se quedan estrechos: el ancho que sobra
     se lo reparten lunes, martes y miercoles, que son los que tienen algo que
     contar. */
  .calendario th:nth-child(n + 5),
  .calendario td:nth-child(n + 5) {
    width: 3.4rem;
  }
}

/* ==========================================================================
   21. IMPRIMIR — que se pueda repartir en papel o guardar en PDF
   ========================================================================== */
@media print {
  :root {
    --margen: 0;
    --aire: 2.2rem;
    --aire-corto: 1rem;
  }
  body {
    background: #fff;
    font-size: 10.5pt;
  }
  .barra,
  .hilo,
  .carrusel__flechas,
  .no-imprimir {
    display: none !important;
  }
  .aparece {
    opacity: 1 !important;
    transform: none !important;
  }
  .plano [data-trazo] {
    stroke-dashoffset: 0 !important;
  }
  .plano text,
  .plano .discontinuo {
    opacity: 1 !important;
  }
  /* En papel el reel se imprime en su ultimo tiempo: la noche. */
  .reel {
    --t: 1;
  }
  .reel__tiempo {
    display: none;
  }
  .apertura {
    min-height: 0;
    display: block;
  }
  .apertura__foto {
    display: none;
  }
  .apertura__texto {
    position: static;
  }
  .apertura__texto .encima {
    color: var(--tinta);
    text-shadow: none;
  }
  /* En papel el carrusel y la tira se enseñan enteros, en columna */
  .carrusel__via,
  .tira {
    display: block;
    overflow: visible;
    mask-image: none;
    margin-inline: 0;
    padding-inline: 0;
  }
  .carrusel__vagon,
  .tira > * {
    width: 60%;
    margin-bottom: 0.6rem;
  }
  .escena,
  .pieza {
    break-inside: avoid;
    margin-top: 0 !important;
  }
  .tarea {
    border: 1.5pt solid var(--tinta);
  }
  @page {
    margin: 16mm;
  }
}