/* Cerámica de Irina Rocío — hoja única.
   Decisiones que NO son estéticas:
   · cuerpo a 19px y Atkinson Hyperlegible (Braille Institute, para baja visión)
   · CERO sombras, parallax o capas: con visión monocular no hay profundidad,
     y una tarjeta «flotando» no se lee como flotando, se lee como sucia.
     Todo se separa por ESPACIO y por LÍNEA. */

:root{
  --cal:#F2F1EC; --cal-2:#E7E6DF; --sunk:#DAD9D2;
  --tinta:#1C201E; --tinta-2:#4E5451; --tinta-3:#585E5B; --linea:#C9C9C0;
  --mar:#0E6E80; --mar-lift:#DFEDF0;
  --oxido:#A84A18; --oxido-lift:#F6E6DC;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --cal:#14181A; --cal-2:#1D2225; --sunk:#0C1012;
    --tinta:#EDEEE9; --tinta-2:#A3AAA6; --tinta-3:#767D79; --linea:#333C40;
    --mar:#5CC6D9; --mar-lift:#0E2A31; --oxido:#E4874A; --oxido-lift:#2B1B10;
  }
}
:root[data-theme="dark"]{
  --cal:#14181A; --cal-2:#1D2225; --sunk:#0C1012;
  --tinta:#EDEEE9; --tinta-2:#A3AAA6; --tinta-3:#767D79; --linea:#333C40;
  --mar:#5CC6D9; --mar-lift:#0E2A31; --oxido:#E4874A; --oxido-lift:#2B1B10;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--cal);color:var(--tinta);
  font-family:"Atkinson Hyperlegible","Helvetica Neue",Arial,sans-serif;
  font-size:19px;line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
:focus-visible{outline:3px solid var(--mar);outline-offset:3px}
.mono{font-family:"IBM Plex Mono",ui-monospace,monospace}
/* 🔎 22-ago · `--tinta-3` era `#878D89` y daba 2,4:1 sobre el fondo nuevo — pero YA daba
   2,9:1 sin fondo, o sea que llevaba fallando desde el principio, en un sitio hecho a
   propósito para alguien que ve poco. El fondo no creó el defecto: lo hizo visible al
   obligarme a medir. Ahora `#585E5B`, medido ≥4,5:1 contra el suelo PEOR de la textura.
   ⚖️ Se pierde separación con `--tinta-2`: una jerarquía de tres grises en la que el
      tercero no se lee no son tres niveles, son dos y un adorno. */
.hueco{color:var(--tinta-3);font-style:italic}

.saltar{position:absolute;left:-9999px;background:var(--tinta);color:var(--cal);padding:12px 18px;z-index:99}
.saltar:focus{left:12px;top:12px}

/* ── barra ── */
/* Columna, no fila: las colecciones van DEBAJO del nombre y con su propio rótulo. En fila
   competían con la marca por el ancho, y al pasar de 4 se apilaban en un bloque ilegible. */
/* 🔴 22-ago (Franco): con el fondo puesto, la cabecera se veía como una BANDA APARTE —
   llevaba `background:var(--cal)` opaco, o sea que el papel pintado empezaba justo por
   debajo de ella y parecía otro trozo de página pegado. El pie nunca tuvo fondo propio, así
   que el corte sólo pasaba arriba. ✅ Transparente: el fondo corre entero, cabecera incluida.
   ⚖️ La raya de abajo se queda: separar cabecera y cuerpo por LÍNEA es la regla de esta hoja
      —lo que no vale es separarlos por dos SUELOS distintos.
   ⛔ Ojo si alguna vez se hace `sticky`: entonces necesita suelo opaco o el texto de la
      página le pasará por debajo. `.taller-barra` sí es sticky y por eso conserva el suyo. */
.barra{display:flex;flex-direction:column;align-items:stretch;gap:13px;
  padding:15px clamp(16px,4vw,40px);border-bottom:1px solid var(--linea);background:transparent}
.marca{display:flex;flex-direction:column;line-height:1.14}
.marca .n{font-family:"Source Serif 4",serif;font-size:1.3rem;font-weight:600;letter-spacing:-.01em}
.marca .o{font-size:.74rem;color:var(--tinta-3);letter-spacing:.08em;text-transform:uppercase}
/* Las colecciones se leían como texto suelto: el borde sólo salía en :hover, y en un
   móvil no hay hover — así que en el teléfono NUNCA aparecía y no se notaba que eran
   categorías. Ahora son piezas con borde y fondo SIEMPRE. Sin sombra: relieve por
   línea y tinta plana, que es lo único que se lee con visión monocular.
   El color es el TURQUESA de sus esmaltes (--mar): el acento del sitio no aparecía
   en la cabecera, y gris-sobre-gris no se distinguía del texto. */
/* 🔑 NO se envuelve: se DESLIZA. Con 10 colecciones, envolver hace una pared de 3 filas que
   empuja la obra fuera de pantalla; deslizar mantiene la cabecera de una altura fija SIEMPRE.
   Y el corte del último elemento en el borde es la única pista honesta de que hay más:
   no hace falta una flecha que mienta cuando sí caben todas. */
.cols-tit{font-size:.68rem;color:var(--tinta-3);letter-spacing:.13em;text-transform:uppercase;
  display:block;margin-bottom:7px}
.barra nav{display:flex;gap:8px;flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;
  scrollbar-width:thin;padding-bottom:4px}
.barra nav a{flex:0 0 auto;white-space:nowrap;scroll-snap-align:start}
.barra nav a{font-size:.94rem;color:var(--mar);background:var(--mar-lift);
  padding:10px 17px;border:1px solid var(--mar);letter-spacing:.01em;line-height:1.2}
.barra nav a:hover{background:var(--mar);color:var(--cal)}
.barra nav a:focus-visible{outline:3px solid var(--mar);outline-offset:2px}
.barra nav a[aria-current]{background:var(--mar);border-color:var(--mar);color:var(--cal);font-weight:700}

main{max-width:1180px;margin:0 auto;padding:clamp(26px,4vw,48px) clamp(16px,4vw,40px) 70px}

/* ── portada ── */
.hero{max-width:24ch;margin-bottom:clamp(28px,5vw,52px)}
.hero h1{font-family:"Source Serif 4",serif;font-weight:400;font-style:italic;
  font-size:clamp(2.1rem,6vw,3.4rem);line-height:1.02;margin:0 0 .35em}
.lead{color:var(--tinta-2);max-width:52ch;margin:0;font-size:1.05rem}
.colecciones{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.col{border:1px solid var(--linea);background:var(--cal-2);display:flex;flex-direction:column}
.col:hover{border-color:var(--tinta)}
.col img{aspect-ratio:4/3;object-fit:cover;width:100%}
.col .txt{padding:17px 19px;display:flex;flex-direction:column;gap:5px}
.col .t{font-family:"Source Serif 4",serif;font-style:italic;font-size:1.35rem;line-height:1.1}
.col .d{font-size:.9rem;color:var(--tinta-2)}
.col .n{font-size:.72rem;color:var(--tinta-3);margin-top:4px}

/* ── cabecera de colección ── */
.cab-col{margin-bottom:clamp(22px,3.5vw,36px);max-width:56ch}
.cab-col h1{font-family:"Source Serif 4",serif;font-weight:400;font-style:italic;
  font-size:clamp(1.9rem,5vw,2.8rem);line-height:1.03;margin:0 0 .25em}
.cab-col .mono{font-size:.76rem;color:var(--tinta-3);margin:10px 0 0}

/* ── mosaico: sin recortar NADA. La proporción original manda ──
   🔴 22-ago: esto era `columns:3 300px` —COLUMNAS DE PERIÓDICO—. Las obras bajaban por la
      primera columna, luego por la segunda… así que con 7 piezas salía 3+3+1 y la tercera
      columna se quedaba con una sola. Y el orden de lectura era vertical, no como se lee.
   ✅ Rejilla: se llena de izquierda a derecha, fila a fila. `align-items:start` mantiene lo
      que se buscaba con las columnas —cada obra con su altura, sin recortar— sin heredar
      el reparto vertical. */
.mosaico{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
  gap:16px;align-items:start}
.tarjeta{display:block;border:1px solid var(--linea);background:var(--cal-2)}
.tarjeta:hover{border-color:var(--tinta)}
.tarjeta img{width:100%;height:auto}
.tarjeta .pie-t{display:flex;flex-direction:column;gap:3px;padding:13px 15px}
.tarjeta .t{font-family:"Source Serif 4",serif;font-style:italic;font-size:1.12rem;line-height:1.15}
.tarjeta .r{font-size:.7rem;color:var(--tinta-3)}
.tarjeta .cuantas{font-size:.72rem;color:var(--mar);margin-top:2px}
.tarjeta .marca-no{font-size:.72rem;color:var(--oxido);margin-top:2px}

.sin-foto{background:var(--sunk);aspect-ratio:4/3;display:grid;place-items:center;
  color:var(--tinta-3);font-size:.82rem;text-align:center;padding:14px;line-height:1.4}
.sin-foto.grande{aspect-ratio:16/9;font-size:1rem}
.vacio{color:var(--tinta-3);font-style:italic}

/* ── EL DÍA A DÍA (Franco, 23-ago) ────────────────────────────────────────────────
   La artista trabajando: fotos y vídeos sueltos, sin ficha. El enlace vive en la fila
   de la marca —que tenía todo el lado derecho vacío— para no gastar ni un pixel de
   alto ni ensuciar la tira que dice «Colecciones», donde esto no es una.
   Va en el OTRO acento (óxido, no turquesa) para que se lea como otra cosa. */
.fila-marca{display:flex;align-items:center;justify-content:space-between;gap:14px}
.dia-ir{flex:0 0 auto;font-size:.88rem;color:var(--oxido);background:var(--oxido-lift);
  border:1px solid var(--oxido);padding:9px 15px;line-height:1.2;white-space:nowrap}
.dia-ir:hover{background:var(--oxido);color:var(--cal)}
.dia-ir:focus-visible{outline:3px solid var(--oxido);outline-offset:2px}
.dia-ir[aria-current]{background:var(--oxido);color:var(--cal);font-weight:700}

/* Las piezas van en `.mosaico` con tarjeta y pie de texto; esto NO lleva texto ninguno,
   así que la rejilla es más apretada y la imagen ocupa la tarjeta entera. Los vídeos
   del móvil vienen de pie: por eso ninguna altura fija y ningún recorte — se ve lo que
   ella grabó, no un trozo elegido por mí. */
/* 🔑 COLUMNAS, no rejilla. Aquí las fotos vienen como salgan: unas de pie (el móvil) y otras
   tumbadas. Con `grid` todas las de una fila se alinean arriba y la más alta deja un hueco
   muerto debajo de las demás — con 30 fotos mezcladas, la página se llena de agujeros.
   `columns` las apila sin huecos y se adapta sola al ancho, sin un solo punto de corte escrito
   a mano (que es el número que siempre acaba ajustado a las pantallas que yo probé).
   📌 A cambio, el orden se lee HACIA ABAJO por columna, no de izquierda a derecha. Para un muro
      de fotos es lo normal; si algún día importara el orden exacto, esto habría que cambiarlo. */
.dias{columns:250px;column-gap:14px}
.dd{break-inside:avoid;margin:0 0 14px;border:1px solid var(--linea);
  background:var(--cal-2);line-height:0}
.dd:hover{border-color:var(--tinta)}
.dd img,.dd video{display:block;width:100%;height:auto}
.dd video{background:#000}
@media(max-width:520px){ .dias{columns:1} }

/* ── obra ── */
.obra{display:flex;flex-direction:column;gap:18px}
.carril-obra{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;
  background:var(--cal-2);border:1px solid var(--linea)}
/* `grid-template-rows:1fr` NO es decoración: sin ella la fila se dimensiona por el
   CONTENIDO, así que el `height:100%` de la foto no resuelve contra nada y se ignora. */
.toma{flex:0 0 100%;scroll-snap-align:center;margin:0;display:block;
  padding:clamp(14px,2.4vw,28px);
  /* el tope de altura es LA CURA del formato B: sin él una foto vertical
     empuja la ficha fuera de la pantalla y hay que bajar para leer quién la hizo */
  height:clamp(300px,62vh,560px)}
/* 🔴 22-ago: la foto se pintaba a 782 px dentro de una caja de 558 y se salía por abajo:
   se veía un trozo y había que bajar para verla. El CSS «parecía» correcto porque ya decía
   `object-fit:contain` — sólo se vio RENDERIZANDO y preguntando al navegador.
   🔑 La causa era la REJILLA: su fila se dimensiona por el CONTENIDO, así que ni
      `max-height:100%` ni `height:100%` resolvían contra nada y los dos se ignoraban.
      `grid-template-rows:1fr` tampoco bastó. Se retiró la rejilla.
   ✅ Bloque con alto definido + `height:100%` en la foto: ahí el 100% SÍ resuelve, y
      `contain` la centra y la mete entera. */
.toma img{width:100%;height:100%;object-fit:contain;cursor:zoom-in}
.tiras{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px}
.tira{border:1px solid var(--linea);background:none;padding:0;cursor:pointer;flex:0 0 auto}
.tira img{width:74px;height:74px;object-fit:cover}
.tira[aria-current="true"]{border-color:var(--tinta);border-width:2px}
.pista-zoom{font-size:.85rem;color:var(--tinta-3);margin:0}

.ficha-obra{display:grid;grid-template-columns:1fr auto;gap:14px clamp(24px,4vw,56px);
  border-top:1px solid var(--linea);padding-top:22px}
.ficha-obra h1{font-family:"Source Serif 4",serif;font-weight:400;font-style:italic;
  font-size:clamp(1.7rem,4vw,2.4rem);line-height:1.04;margin:0}
.ficha-obra .reg{font-size:.74rem;color:var(--tinta-3);margin:6px 0 16px}
.ficha-obra dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:7px 16px;font-size:.92rem}
.ficha-obra dt{font-family:"IBM Plex Mono",monospace;font-size:.7rem;color:var(--tinta-3);padding-top:3px}
.ficha-obra dd{margin:0;color:var(--tinta-2)}
.cartela{margin:20px 0 0;padding-left:17px;border-left:3px solid var(--mar);
  font-size:1rem;color:var(--tinta);max-width:56ch;line-height:1.55}
.cartela cite{display:block;margin-top:9px;font-size:.8rem;color:var(--tinta-3);font-style:normal}
.cartela.pendiente{border-left-color:var(--linea);color:var(--tinta-3);font-style:italic;font-size:.92rem}
.compra{display:flex;flex-direction:column;align-items:flex-end;gap:6px;text-align:right}
.compra .p{font-size:1.5rem}
.compra .est{font-size:.76rem;text-transform:uppercase;letter-spacing:.08em;color:var(--tinta-3)}
.compra .est.no{color:var(--oxido)}
@media(max-width:640px){
  .ficha-obra{grid-template-columns:1fr}
  .compra{align-items:flex-start;text-align:left;border-top:1px solid var(--linea);padding-top:14px}
}

/* ── visor a pantalla completa ── */
.lupa{position:fixed;inset:0;background:var(--cal);z-index:50;display:none;
  place-items:center;padding:clamp(12px,3vw,40px)}
.lupa[open]{display:grid}
.lupa img{max-width:100%;max-height:100%;object-fit:contain}
.lupa button{position:absolute;top:14px;right:14px;font:inherit;font-size:.9rem;
  background:var(--cal);border:1px solid var(--tinta);color:var(--tinta);padding:10px 18px;cursor:pointer}

.pie{border-top:1px solid var(--linea);padding:24px clamp(16px,4vw,40px) 40px;
  color:var(--tinta-3);font-size:.85rem}
.pie p{margin:0 0 4px}
.pie .mono{font-size:.74rem}

@media (prefers-reduced-motion:reduce){.carril-obra{scroll-behavior:auto}}

/* ── FONDO DEL RESTO DEL SITIO ── el mismo trabajo suyo, en claro ────────────────
   22-ago, Franco: «al resto de las páginas ponle el fondo en la versión clara».
   ⚖️ Queda entonces un sitio de UN solo aspecto para todo el mundo: la puerta en oscuro y
      el catálogo en claro, lleve el visitante el móvil como lo lleve. Por eso aquí se
      redeclaran los tokens CLAROS igual que la portada redeclara los oscuros — si mañana se
      quiere devolver el tema del visitante, se borran las dos listas de tokens y ya está.
   🔑 POR QUÉ OTRA IMAGEN Y NO LA DE LA PORTADA: la portada mide ~1045px y `cover` le va bien.
      Estas no. Medido en la web viva antes de tocar nada:
        macetas en el móvil 7744px de alto  ->  `cover` ampliaría la foto x4,89
        marina  en el móvil 5096px          ->  x3,22          (la portada: x0,66)
      Ampliar x5 una foto no es un fondo, es un borrón: se vería un trozo central gigante y
      ni se reconocería la pieza. ✅ Se repite en vertical en vez de estirarse.
   📌 Y la tira es un ESPEJO: su mitad de abajo es la de arriba volteada, así que la última
      fila de un mosaico es idéntica a la primera del siguiente y no hay costura. Medido:
      diferencia media entre esas dos filas = 0,00 sobre 765. No es «no se nota»: es CERO.
   ⛔ `absolute` y no `fixed`, igual que en la portada: un fondo que se queda quieto mientras
      el texto sube es una señal de profundidad, y esta hoja no las usa. */
body:not(.portada){
  --cal:#F2F1EC; --cal-2:#E7E6DF; --sunk:#DAD9D2;
  --tinta:#1C201E; --tinta-2:#4E5451; --tinta-3:#585E5B; --linea:#C9C9C0;
  --mar:#0E6E80; --mar-lift:#DFEDF0; --oxido:#A84A18; --oxido-lift:#F6E6DC;
  background:var(--cal);position:relative;
  /* 🔴 23-ago, lo vio Franco en el móvil: «el fondo se pone a mitad de página». El fondo lo
     pinta `::before` con `position:absolute; inset:0`, o sea que cubre EXACTAMENTE LA CAJA DEL
     BODY — no la pantalla. Mientras la página fue larga nunca se notó; en cuanto quité una línea
     del pie, la galería cabía entera y el body se quedó más corto que el móvil ⇒ el fondo se
     acababa donde acababa el texto y debajo quedaba un rectángulo liso.
     🔑 No lo rompió el cambio: lo DESTAPÓ. La regla llevaba mal desde el principio y sólo hacía
        falta una página corta para verla — y ninguna de las que yo miré lo era.
     ✅ El body mide al menos lo que la ventana, así que su caja llega abajo y el fondo con ella.
     📌 `dvh` y no `vh`: en el móvil `vh` cuenta la pantalla SIN la barra del navegador, así que
        con la barra a la vista sobraría un trozo y aparecería scroll en una página que cabe.
        `dvh` sigue a la ventana de verdad. `vh` queda de repuesto para quien no entienda `dvh`. */
  min-height:100vh; min-height:100dvh}
body:not(.portada)::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:url("fondo-corales-tira-662eef8d.jpg") top center/100% auto repeat-y;
  opacity:.10}

/* ── PORTADA ── una puerta, no un índice.
   Centrada, sin barra de navegación, sin nada que decidir salvo entrar. */
/* ── FONDO DE LA PORTADA ──────────────────────────────────────────────────────
   El borde de tubos de la maceta de corales (2026-007), su pieza más suya. De cerca
   deja de ser una maceta y es TEXTURA: el sitio se presenta con su propio trabajo y
   no con una imagen de banco.
   ⛔ SÓLO aquí. El resto de páginas se quedan como estaban — es lo que pidió Franco,
      y además una galería con fondo compite con las fotos que va a enseñar.
   ⚠️ Esto NO rompe la regla de «cero capas» de arriba. Esa regla prohíbe las señales
      de PROFUNDIDAD (sombras, parallax, tarjetas flotando), que con visión monocular
      no se leen como profundidad sino como suciedad. Aquí:
        · `absolute`, NO `fixed`  -> el fondo baja con la página; sin parallax
        · `z-index:-1`            -> detrás de todo; nada se superpone a nada
        · el rótulo, el retrato y el botón llevan fondo OPACO propio -> no flotan
   🔑 La opacidad sigue hecha en CSS y no cocida en el JPG: la imagen se mezcla contra
      `--cal`, o sea contra el suelo que haya. Cocer el desvaído dentro del JPG lo ataría
      a UN suelo concreto y habría que rehacer la imagen cada vez que se cambie de idea.
   📌 El nombre del fichero lleva el sha de su contenido, igual que hace `v()` con el CSS:
      si cambio la imagen cambia la URL y ningún navegador puede servir la vieja. */
/* 🌑 22-ago · OPCIÓN 2, la que pidió probar Franco: la puerta SIEMPRE en oscuro, entre
      quien entre y lleve el móvil como lo lleve. La opción 1 (clara, y oscura sólo si el
      visitante ya venía en oscuro) está guardada ENTERA —CSS, portada generada, imagen y
      capturas— en `/opt/jupiter_snapshots/irina_portada_OPCION1_CLARO_ad2dff61_20260822T2121Z/`,
      con un `COMO_VOLVER.md` al lado. Volver es copiar el CSS y REGENERAR.
   💣 La ruta va COMPLETA y sin comodín A PROPÓSITO: un asterisco pegado a una barra CIERRA
      EL COMENTARIO. Me pasó DOS veces seguidas en este mismo bloque — primero al abreviar la
      ruta con un comodín, y después escribiendo el aviso de la primera vez. Las dos veces se
      llevó por delante el `position:relative` de aquí abajo, y sin él el fondo se coloca
      contra la PANTALLA y no contra la PÁGINA: 900px de fondo en una página de 1045px, o sea
      que debajo del pliegue —la leyenda, el botón y el recuento— NO HAY FONDO. Lo cazó Franco
      mirando, no yo midiendo, porque el síntoma no se parece en nada a la causa.
      ⚖️ Un comentario NO es inerte. Aquí dentro no se escribe esa pareja de caracteres, ni
         siquiera para explicar que no se escribe. Hay una guarda en `generar_web.py` que
         ahora aborta la generación si vuelve a pasar.
   🔑 Cómo se hace sin tocar una línea del resto del sitio: aquí NO se pinta un color, se
      REDECLARAN LOS TOKENS del tema oscuro sobre `body.portada`. Como todo lo que hay
      dentro de la puerta (rótulo, retrato, leyenda, botón, cuenta, y hasta el enlace de
      saltar) está escrito con esos tokens y no con colores literales, la puerta entera
      cambia de tema con este bloque y NINGUNA otra página se entera. Son EXACTAMENTE los
      valores del tema oscuro de la cabecera de esta hoja, no unos nuevos: lo que ya estaba
      medido y leído sigue valiendo.
   📌 Y por eso desaparecen las dos ramas de opacidad que había aquí: ya no hay dos suelos
      posibles contra los que mezclar la imagen. El suelo es éste y es el único. */
body.portada{
  --cal:#14181A; --cal-2:#1D2225; --sunk:#0C1012;
  --tinta:#EDEEE9; --tinta-2:#A3AAA6; --tinta-3:#767D79; --linea:#333C40;
  --mar:#5CC6D9; --mar-lift:#0E2A31; --oxido:#E4874A; --oxido-lift:#2B1B10;
  background:var(--cal);position:relative}
body.portada::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:url("fondo-corales-05be36b9.jpg") center/cover no-repeat;
  opacity:.16}
/* 📐 22-ago, Franco: «que se encuadre en la pantalla sin necesidad de scrolear, para que se
   vea todo de un vistazo — pero SOLO en la portada».
   Medido antes de tocar: de 9 tamaños, 7 obligaban a bajar (de 18px a 305px de sobra).
   🔑 Todo lo que NO es la foto (rótulo, leyenda, botón, recuento, huecos y márgenes) medía
      entre 428 y 530px. Como eso no cabía en una pantalla de portátil bajo junto a una foto
      de 62vh, la cura es doble: que esos márgenes se ENCOJAN en pantallas bajas —por eso los
      `clamp` llevan ahora `vh` y no sólo `vw`— y que la foto tenga por techo LO QUE SOBRE.
   📌 `svh` y no `vh`: en el móvil, `100vh` es la pantalla CON la barra del navegador
      escondida, así que promete más alto del que hay y reaparece el scroll justo al abrir.
      `svh` es la medida con la barra puesta, o sea la peor, que es la que hay que cumplir.
      El `100vh` de al lado se queda de repuesto para navegadores que no entiendan `svh`. */
.puerta{max-width:760px;margin:0 auto;
  padding:clamp(14px,5vh,60px) clamp(18px,5vw,40px) clamp(14px,4vh,50px);
  display:flex;flex-direction:column;align-items:center;text-align:center;
  gap:clamp(10px,2.4vh,26px);
  height:100vh;height:100svh;justify-content:space-evenly}
/* El nombre va enmarcado como una CARTELA de museo: es el objeto alrededor del
   que gira todo el proyecto, así que la portada lo usa para presentar a la autora.
   Doble filete con `border` + `outline` desplazado — dos líneas concéntricas SIN
   sombras ni capas, que es la regla de toda la hoja. */
.rotulo{font-family:"Source Serif 4",serif;font-weight:400;line-height:1.02;margin:0;
  font-size:clamp(1.4rem,min(5vw,5.4vh),2.6rem);letter-spacing:-.01em;
  background:var(--cal-2);
  border:1px solid var(--tinta);
  outline:1px solid var(--tinta);
  outline-offset:6px;
  padding:clamp(11px,2.3vh,30px) clamp(26px,5vw,52px);
  margin:6px}                       /* deja sitio al filete exterior */
.rotulo .arriba{
  display:block;font-family:"Atkinson Hyperlegible",sans-serif;
  font-size:.34em;font-weight:700;letter-spacing:.22em;text-transform:uppercase;
  color:var(--tinta-2);margin-bottom:.5em}
/* ✍️ 23-ago (Franco, elegida por él sobre una prueba en la web viva): manuscrita en el nombre.
   Cambia el tono de placa de museo a nota escrita a mano, que es lo que hace ella.
   ⛔ `font-style:normal`: Gloria Hallelujah NO tiene cursiva propia, y dejarle la `italic`
      heredada obliga al navegador a INCLINARLA ÉL — una falsa cursiva que deforma los trazos. */
.rotulo em{font-family:"Gloria Hallelujah",cursive;font-style:normal;display:block}
/* 🖼️ El marco se ENCUADRA con la foto, no al revés.
   🔴 22-ago (lo vio Franco): el marco era `width:100%` y la foto iba dentro con
      `object-fit:contain`. Mientras la ventana era ALTA coincidían y no se notaba; en cuanto
      `max-height:62vh` mordía, la foto encogía DENTRO de un marco que seguía ancho y aparecían
      dos bandas de `--cal-2` a los lados. Medido en la web viva ANTES de tocar nada:
        1280x900 banda 0px ✅   ·   1280x760 banda 25px   ·   1366x700 banda 50px
        390x844  banda 0px ✅   ·   844x390 (móvil tumbado) banda 178px
      ⚠️ Mis dos primeras capturas fueron justo a 1280x900 y 390x844 — los dos tamaños que NO
         lo enseñan. Elegir el tamaño de la prueba es elegir el resultado.
   ✅ Ahora manda la FOTO: `width:auto` en las dos, y el marco se queda del tamaño que salga.
      Sin `object-fit` no hay nada que encajar dentro de nada, así que no puede haber banda.
      El fondo `--cal-2` se queda sólo como suelo mientras la imagen carga. */
/* 🔴 23-ago (Franco, en su móvil): «el título, la foto y el botón están muy centrados al medio
   y arriba y abajo se pierde el espacio». Tenía razón y la culpa era un NÚMERO MÍO: el techo de
   la foto era `73svh - 210px`, una recta que ajusté a nueve ventanas. En la suya «todo lo demás»
   ocupa menos que en mi peor caso, así que la recta frenaba la foto en ~214px y el hueco sobrante
   se repartía como margen arriba y abajo.
   🔑 UNA RECTA AJUSTADA A UNA MUESTRA FALLA FUERA DE LA MUESTRA. La cura no es re-ajustarla con
      su móvil dentro —eso sólo mueve el problema al siguiente teléfono—: es que no haya número.
      La foto pide `flex:1 1 auto` y se queda con LO QUE SOBRE, sea lo que sea.
   ✅ Y el truco que lo hace posible sin que vuelvan las bandas negras: EL MARCO VA EN LA <img>,
      no en el enlace que la envuelve. Si el borde está en el contenedor, flex le da toda la altura
      y la foto queda letterboxed dentro. Con el borde en la propia imagen, el marco ES la imagen:
      no hay hueco donde aparezca banda, por definición y no por cálculo. */
/* 🔑 `flex:0 1 auto` y NO `1 1 auto`, y es toda la diferencia del aire del móvil:
   · con `grow:1` el hueco de la foto se quedaba TODO lo que sobraba (222px medidos) y la
     centraba dentro -> una banda muerta pegada a la foto, que es lo que se veía
   · con `grow:0` sólo ocupa lo que la foto mide, y el sobrante se lo reparte `space-evenly`
     entre todas las piezas -> deja de ser hueco y pasa a ser respiración
   ⚖️ `shrink:1` se queda: en una pantalla BAJA flex la encoge y ahí sí le fija una altura
      definida, que es contra la que la foto resuelve su `max-height:100%`. Encoger y crecer
      no son simétricos aquí — por eso uno sí y el otro no. */
.retrato{flex:0 1 auto;min-height:0;width:100%;display:flex;align-items:center;justify-content:center;
  border:0;background:none}
.retrato img{display:block;width:auto;height:auto;max-width:100%;max-height:100%;margin:0;
  border:1px solid var(--linea);background:var(--cal-2)}
.retrato:hover img{border-color:var(--tinta)}
/* 📱 23-ago · EL AIRE DEL MÓVIL, medido antes de tocar: en un teléfono alto sobraban 311px, y
   222 de ellos estaban PEGADOS A LA FOTO — no arriba y abajo, como parecía a ojo. La causa no es
   el diseño: es que una foto 4:3 NO PUEDE llenar una pantalla 9:19,5. Se ataca por los dos lados:
     · de borde a borde   -> la foto gana ~11% de alto y ancla la pantalla en vez de flotar
     · el resto se REPARTE -> el hueco sobrante se vuelve respiración entre las piezas
   ⛔ Lo que NO se hace: recortar la foto para que llene. Se vería más «lleno» y se estaría
      tapando parte de su trabajo, que es justo lo que la página viene a enseñar. */
@media(max-width:640px){
  .puerta{padding-left:0;padding-right:0;gap:clamp(12px,2.8vh,30px)}
  .puerta > :not(.retrato){margin-left:18px;margin-right:18px}
  .retrato{width:100vw}
  .retrato img{max-width:100vw;border-left:0;border-right:0}
  /* 🖼️ 23-ago (Franco: «que la imagen vuelva a tomar el protagonismo y el texto se lea»).
     Medido: encogerle la letra NO le daba un solo píxel a la foto — es 4:3 en una pantalla
     9:19,5, así que topaba por ANCHO, no por alto. Y recortarla sola tampoco (34% -> 37%),
     porque al recortar el límite se muda a «lo que sobre tras el texto». Sólo las dos cosas
     juntas mueven la aguja:  foto 34% -> 56% de la pantalla, y sin scroll en ninguna.
     ⚠️ `cover` RECORTA los lados. Aquí sale ganando —la pieza llena y ella detrás— pero es un
        recorte real: si una foto tiene algo importante en un borde, se pierde. Sólo en móvil;
        en pantallas anchas la foto se ve entera. */
  .retrato img{aspect-ratio:4/5;object-fit:cover;width:100%;height:auto;max-height:100%}
}
/* 23-ago (Franco): más grande. Es la única frase que explica la obra en toda la puerta,
   y quien la lee puede ver poco. `clamp` para que crezca con la pantalla sin desbordar
   en un móvil bajo — el arnés de la puerta comprueba que sigue cabiendo sin scroll. */
/* 📏 23-ago · El tamaño sale de un BARRIDO, no de mi ojo. Con la frase de ella —2,6 veces más
   larga que la nuestra— la letra y la foto se pelean por la misma pantalla:
     1,14–1,42rem  ->  20,5px · 11 líneas · foto 269px · ❌ el móvil TUMBADO no cabe
     1,06–1,26rem  ->  18,6px · 10 líneas · foto 311px · ✅        <- ELEGIDO
     1,00–1,16rem  ->  17,1px ·  9 líneas · foto 311px · ✅
   🔑 Se elige el de en medio por un motivo medible, no por gusto: por debajo de `1,06` la letra
      encoge y LA FOTO YA NO GANA NADA — en un móvil topa en 311px por ANCHO, no por alto.
      Bajar más sería empeorar la lectura a cambio de cero. */
/* ✍️ 23-ago: caligráfica en el texto de la puerta, decidido por Franco viéndolo montado.
   📌 Lo que le costó, medido y dicho antes de desplegar: pasa de 8 a 10 líneas —es MÁS ancha,
      no más estrecha— y la foto baja del 43% al 37% de la pantalla. Franco lo eligió sabiéndolo.
   ⚖️ La portada es el escaparate hacia fuera (Franco: «no tomes en cuenta su visión, esta es la
      portada de su trabajo para el exterior»). Donde SÍ manda su vista es en el taller y en el
      recuadro de corregir la voz, y ahí NO se toca la Atkinson. */
/* 🎨 La tinta sube de `--tinta-2` a `--tinta`. Franco: «no se distingue con el fondo».
   Medido sobre el fondo real, tinta pintada en el mismo hueco:
     Petit Formal Script, tinta-2   10,2%   <- lo que había
     Caveat 400, tinta-2             8,8%   <- lo que habría salido eligiendo Caveat a secas
     Caveat 700, tinta-2            12,0%
     Caveat 700, tinta CLARA        13,0%   <- ESTE
   🔑 El contraste de COLOR ya pasaba (4,86:1). Lo que fallaba era el TRAZO: una caligráfica
      fina sobre textura se deshace aunque el número de contraste diga que va sobrada.
      Son dos cosas distintas y la norma sólo mide una. */
.leyenda{max-width:52ch;margin:0;color:var(--tinta);line-height:1.45;
  font-family:"Caveat",cursive;font-weight:700;
  font-size:clamp(17px,.95rem + .4vw,1.15rem)}
/* 📐 17px y no los 15 pedidos para Petit: Caveat tiene la altura de equis MUCHO más baja, así
   que al mismo número de píxeles se ve claramente más pequeña. Igualar el NÚMERO no iguala lo
   que se ve — se iguala el tamaño aparente, que es lo que lee una persona. */
/* 📌 El mínimo va en PIXELES y no en `rem` a propósito: Franco pidió «15px» y con `rem` el
   resultado dependía del ancho de la pantalla — pedí 15 y salían 14,5. Así el suelo son 15
   exactos en cualquier móvil, y en pantallas anchas sube hasta 16. */
/* 📉 23-ago: bajado a petición de Franco. La escalera medida en la web viva, por si hace falta
   otro escalón — en tu móvil, tamaño / líneas / cuánto de la pantalla se lleva la foto:
     1,06–1,26rem  19px · 10 líneas · foto 37%     <- lo que había
     0,98–1,16rem  17px ·  9 líneas · foto 42%
     0,90–1,06rem  16px ·  9 líneas · foto 44%
     0,82–0,98rem  15px ·  8 líneas · foto 48%     <- ESTE (Franco, 23-ago)
   ⚖️ Cada punto que baja el texto se lo lleva la foto. No hay una respuesta correcta: es dónde
      se pone el fiel entre leer y mirar, y eso lo decide Franco viéndolo, no yo calculándolo. */
.entrar{border:1px solid var(--tinta);color:var(--tinta);padding:15px 34px;font-size:1rem;
  font-weight:700;background:var(--cal)}
.entrar:hover{background:var(--tinta);color:var(--cal)}
.cuenta{font-size:.8rem;color:var(--tinta-2);margin:0}

/* ── recuadro para corregir la transcripción (sólo en modo taller) ──────────────
   Letra a 1rem y caja alta: quien corrige esto lee mal. No se achica para que "quepa". */
.taller-voz{margin:18px 0 0;padding:14px;border:1px solid var(--mar);background:var(--mar-lift)}
.taller-voz label{display:block;font-size:.86rem;color:var(--tinta-2);margin-bottom:8px;line-height:1.4}
.taller-voz textarea{width:100%;font:inherit;font-size:1rem;line-height:1.5;padding:10px;
  border:1px solid var(--linea);background:var(--cal);color:var(--tinta);resize:vertical}
/* En el móvil los dos botones se apilan a ancho completo: son el gesto principal de
   esta caja y quien la usa ve poco — no se ponen del tamaño de un enlace. */
.taller-voz .acc{display:flex;align-items:center;gap:12px;margin-top:10px;flex-wrap:wrap}
.taller-voz .oir{background:var(--cal);color:var(--mar)}
.taller-voz .oir:hover{background:var(--mar);color:var(--cal)}
@media(max-width:640px){
  .taller-voz .acc{flex-direction:column;align-items:stretch}
  .taller-voz button{width:100%;padding:15px 20px;font-size:1rem}
}
.taller-voz button{font:inherit;font-size:.94rem;font-weight:700;padding:10px 20px;cursor:pointer;
  border:1px solid var(--mar);background:var(--mar);color:var(--cal)}
.taller-voz button:disabled{opacity:.5;cursor:default}
.taller-voz #tVozEstado{font-size:.84rem;color:var(--tinta-3)}

/* ── ACCESO AL PANEL ── fijo abajo a la derecha, en todas las páginas ────────────────────────
   23-ago (Franco): «hay que unirlo con la web… para no usar una segunda web».
   ⚖️ FIJO y no dentro del pie: el pie hay que ir a buscarlo bajando y en la portada ni existe.
      Un acceso que depende de scrollear no está «en todas las páginas».
   ⛔ NO rompe la regla de cero capas de esta hoja. Aquí no hay sombra ni parallax ni tarjeta
      flotando: es un botón OPACO pegado a una esquina, con su línea. Lo que aquella regla
      prohíbe son las señales de PROFUNDIDAD, y esto no simula estar por encima de nada.
   📌 Discreto a propósito: lo protege la contraseña, no que nadie lo encuentre — pero no compite
      con la obra. Se enciende al pasar por encima o al tabular hasta él. */
.panel-ir{position:fixed;right:12px;bottom:12px;z-index:30;
  font-size:.8rem;letter-spacing:.02em;padding:9px 14px;
  background:var(--cal);color:var(--tinta-2);border:1px solid var(--linea);
  text-decoration:none;line-height:1;opacity:.72}
.panel-ir:hover,.panel-ir:focus-visible{opacity:1;border-color:var(--tinta);color:var(--tinta)}
/* en la portada el suelo es oscuro SIEMPRE: el botón hereda esos tokens y sale oscuro solo. */
@media(max-width:640px){
  /* en el móvil, más alto y más ancho: se pulsa con el pulgar y con la pieza en la mano */
  .panel-ir{right:10px;bottom:10px;padding:12px 16px;font-size:.86rem}
}
/* ⛔ en modo taller NO se enseña: ya hay una barra de taller arriba, y dos puertas al mismo
   sitio con nombres distintos es confusión, no comodidad (misma razón que el 22-ago). */
.en-taller .panel-ir{display:none}

/* ── pestañas de la obra: fotos / giro / vídeo ── */
.pestanas{display:flex;gap:3px;flex-wrap:wrap;margin-bottom:2px}
.pestanas button{font:inherit;font-size:.86rem;background:var(--cal);border:1px solid var(--linea);
  color:var(--tinta-2);padding:10px 18px;cursor:pointer}
.pestanas button[aria-pressed="true"]{background:var(--tinta);color:var(--cal);border-color:var(--tinta)}
.pestanas button:hover:not([aria-pressed="true"]){border-color:var(--tinta-2);color:var(--tinta)}
.panel[hidden]{display:none}
.cloudimage-360{width:100%;background:var(--cal-2);border:1px solid var(--linea);min-height:300px}
.cloudimage-360 img{width:100%;display:block}
.corto{width:100%;max-height:min(70vh,620px);background:var(--sunk);
  border:1px solid var(--linea);display:block}

/* Acceso al taller desde el pie. Discreto a propósito: es para ellos, no para quien
   visita. Pero VISIBLE — esconderlo del todo obliga a recordar una dirección. */
.pie .taller{margin-top:14px}
.pie .taller a{font-size:.82rem;color:var(--tinta-3);border-bottom:1px dotted var(--tinta-3);
  letter-spacing:.06em}
.pie .taller a:hover{color:var(--mar);border-bottom-color:var(--mar)}

/* ── MODO TALLER ────────────────────────────────────────────────────────────────
   Estar en modo taller TIENE que verse: un modo invisible donde un toque quita una
   foto es una trampa. La barra es llamativa a propósito. */
.taller-barra{position:sticky;top:0;z-index:40;display:flex;justify-content:space-between;
  align-items:center;gap:12px;flex-wrap:wrap;
  background:var(--oxido);color:#fff;padding:9px clamp(12px,3vw,26px);font-size:.86rem;
  letter-spacing:.04em}
.taller-barra .acc{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.taller-barra a,.taller-barra button{font:inherit;font-size:.84rem;color:#fff;background:rgba(0,0,0,.22);
  border:1px solid rgba(255,255,255,.55);padding:6px 12px;cursor:pointer;text-decoration:none}
.taller-barra a:hover,.taller-barra button:hover{background:rgba(0,0,0,.42)}
.en-taller .tira{position:relative;overflow:visible}
.tira-quitar{position:absolute;top:-9px;right:-9px;width:24px;height:24px;line-height:1;
  border-radius:50%;border:1px solid var(--oxido);background:var(--oxido);color:#fff;
  font-size:15px;cursor:pointer;padding:0}
.tira-quitar:hover{background:#7d3611}
.tira-orden{position:absolute;left:0;right:0;bottom:-27px;display:flex;justify-content:center;gap:2px}
.tira-orden button,.tira-orden .es-primera{font:inherit;font-size:.72rem;line-height:1;padding:4px 6px;
  border:1px solid var(--linea);background:var(--cal);color:var(--tinta-2);cursor:pointer}
.tira-orden .es-primera{color:var(--mar);border-color:var(--mar);cursor:default;font-weight:700}
.tira-orden button:hover{border-color:var(--mar);color:var(--mar)}
.en-taller .tiras{padding-bottom:34px}
.tira.quitada{opacity:.3}
.t-edit{outline:1px dashed var(--mar);outline-offset:3px;cursor:text;min-height:1.2em;min-width:4ch}
.t-edit:focus{outline:2px solid var(--mar);background:var(--mar-lift)}
.t-edit:empty::before{content:attr(data-vacio);color:var(--tinta-3);font-style:italic}
.taller-aviso{position:fixed;left:50%;bottom:22px;transform:translateX(-50%) translateY(20px);
  background:var(--tinta);color:var(--cal);padding:11px 18px;font-size:.9rem;z-index:60;
  opacity:0;transition:opacity .18s,transform .18s;pointer-events:none;max-width:88vw}
.taller-aviso.on{opacity:1;transform:translateX(-50%) translateY(0)}
.taller-aviso.mal{background:var(--oxido)}
.taller-barra button.peligro{background:#000;border-color:#000}
.taller-barra button.peligro:hover{background:#2a2a2a}