/* Motor de plantillas v2 -- SOLO GEOMETRIA. Cargado despues del <style> de galeria.html
   (misma especificidad = gana el que carga al final).

   La regla que gobierna este archivo: AQUI NO HAY COLORES. Toda superficie pinta con los
   tokens que escribirTokens() (galeria.js) deja inline en #app -- --bg --panel --ink
   --ink2 --ink3 --line --line2 --dark --dark-ink --accent --accent-tinta --accent-dark --navbg
   --gt-dockink -- derivados de la SEMILLA del catalogo (galeria-temas.js) mas las
   elecciones del fotografo. En el v1 cada plantilla traia su paleta pegada con hex y dos
   bloques de parches manuales sostenian la tinta; el arnes midio botones a contraste
   1.00 y acentos inertes. Cero hex #RRGGBB aqui = imposible reincidir; lo hace cerradura
   evaluacion/paridad-motor-galeria.mjs. Los unicos literales permitidos son rgba() de
   velos/sombras sobre FOTO (independientes de paleta por definicion) y los rgba() de
   texto sobre esos velos.

   Organizacion: .lay-<id> = geometria de un acomodo (la pone aplicarShell en #app);
   .cp-<id> = geometria de una portada; .tema-<id> = SOLO flourishes de plantilla (el
   dock de mosaico). Un acomodo prestado funciona en cualquier plantilla porque su CSS ya
   no depende de .tema-*. */

/* ---------- tacto (fase 0 del motor v1, intacta) ---------- */
@media (hover: none) {
  .tfav { opacity: 1; transform: none; background: rgba(255, 255, 255, .82); }
  .tile-shade { opacity: .55; }
  .tcap { opacity: .95; transform: none; }
  .hidem { display: inline-block; }
}

/* ---------- piezas narrativas compartidas (cita y cierre) ---------- */
.gt-cita { --tx-esc: 1; --tx-ink: initial; --tx-font: initial; font-family: var(--tx-font, var(--gt-display, 'Instrument Serif'), serif); font-style: italic; font-size: calc(clamp(26px, 3.4vw, 44px) * var(--tx-esc)); color: var(--tx-ink, inherit); line-height: 1.3; text-align: center; max-width: 900px; margin: clamp(56px, 8vw, 110px) auto 0; padding: 0 20px; }
.gt-cita-a { --tx-esc: 1; --tx-ink: initial; --tx-font: initial; font-family: var(--tx-font, 'Instrument Sans', sans-serif); font-style: normal; font-size: calc(12px * var(--tx-esc)); letter-spacing: .2em; text-transform: uppercase; color: var(--tx-ink, var(--ink2)); margin-top: 18px; }
/* El cierre vive sobre --dark con su tinta GARANTIZADA (--dark-ink la deriva galeria.js
   con umbral de contraste): en el v1 su texto era un literal claro y un --dark claro
   elegido lo dejaba invisible. */
.gt-cierre { background: var(--dark); color: var(--dark-ink); padding: clamp(44px, 6vw, 70px) clamp(24px, 6vw, 70px); margin: clamp(56px, 8vw, 110px) 0 0; display: flex; flex-direction: column; gap: 10px; }
.gt-cierre-t { --tx-esc: 1; --tx-ink: initial; --tx-font: initial; font-family: var(--tx-font, var(--gt-display, 'Instrument Serif'), serif); font-size: calc(clamp(24px, 3.4vw, 40px) * var(--tx-esc)); color: var(--tx-ink, inherit); line-height: 1.25; }
.gt-cierre-s { font-size: 14px; color: var(--dark-ink); opacity: .65; }

/* ---------- portada "clasica": el movimiento de la geometria dividida ----------
   (era el tema "papel"; ahora cualquier portada clasica con geometria split lo trae).
   Regla de oro: el estado base es SIEMPRE el estado final visible y toda animacion vive
   DENTRO de su gate -- sin soporte o con reduced-motion queda el markup quieto. */
@media (prefers-reduced-motion: no-preference) {
  @keyframes gt-split-foto-in { from { opacity: 0; transform: translateX(-24px); } }
  @keyframes gt-split-texto-in { from { opacity: 0; transform: translateY(26px); } }
  .cp-clasica .cv-split .coverphoto { animation: gt-split-foto-in .9s cubic-bezier(.22,.61,.36,1) both; }
  .cp-clasica .cv-split .coverbody { animation: gt-split-texto-in .9s .25s cubic-bezier(.22,.61,.36,1) both; }
  @supports (animation-timeline: scroll()) {
    @keyframes gt-split-texto-out { to { transform: translateY(-90px); opacity: 0; } }
    @keyframes gt-split-tile-in { from { opacity: 0; transform: translateY(34px); } }
    /* scroll(root), no nearest: .cover trae overflow:hidden y eso lo volveria el scroll
       container mas cercano -- uno que jamas scrollea. El que scrollea es el documento. */
    .cp-clasica .cv-split .covercontent { animation: gt-split-texto-out linear both; animation-timeline: scroll(root); animation-range: 0 60vh; }
  }
}

/* ---------- coreografia de portada (nivel "completo") ----------
   Las portadas de varias fotos se arman pieza por pieza en vez de llegar enteras. Anima el
   `img` HIJO y nunca la pieza posicionada: .gt-der-p ya lleva su propia animacion de
   paralaje sobre transform, y una entrada temporal sobre el mismo elemento y la misma
   propiedad pisaria el shorthand -- se veria como que el paralaje "no funciona" en esas
   plantillas. El escalonado es corto a proposito: es una portada de boda, no una intro.
   Cada plantilla puede darle su acento sin escribir keyframes propios, solo cambiando
   --mov-dist o --mov-firma-rot en su clase de portada. */
@media (prefers-reduced-motion: no-preference) {
  @keyframes gt-pieza-in {
    from { opacity: 0; transform: translateY(var(--mov-dist, 24px)) rotate(var(--mov-firma-rot, 0deg)) scale(1.02); }
  }
  /* Compuestos (.mov-c.cp-collage): el nivel de movimiento y la portada son clases del
     MISMO #app, igual que el acomodo -- ver la nota de los opt-outs mas abajo. */
  .mov-c.cp-collage .gt-der-p img,
  .mov-c.cp-mesa .gt-mes-p img,
  .mov-c.cp-triptico .gt-tri-p img { animation: gt-pieza-in var(--mov-dur-3) var(--mov-ease-elev) backwards; }
  .mov-c .gt-der-p1 img, .mov-c .gt-mes-p1 img { animation-delay: .08s; }
  .mov-c .gt-der-p2 img, .mov-c .gt-mes-p2 img { animation-delay: .16s; }
  .mov-c .gt-der-p3 img, .mov-c .gt-mes-p3 img { animation-delay: .24s; }
  /* El triptico no numera sus piezas (todas son .gt-tri-p a secas), asi que su escalonado
     va por posicion. Sirve igual porque las tres estan en el orden en que se leen. */
  .mov-c.cp-triptico .gt-tri-p:nth-child(2) img { animation-delay: .08s; }
  .mov-c.cp-triptico .gt-tri-p:nth-child(3) img { animation-delay: .16s; }
}

/* ---------- el revelado de las fotos al entrar en pantalla (nivel "sutil") ----------
   Cada foto aparece cuando la pareja llega a ella, en vez de estar ya ahi esperando. Nacio
   como un detalle de la portada dividida y aqui se generaliza a todas las plantillas -- la
   regla vieja de `.cv-split ~ #gal-body .tile` se retiro para que ninguna foto lleve DOS
   animaciones de entrada peleando por el mismo transform.

   Va con animation-timeline y no con un IntersectionObserver por dos razones medidas: el
   observer moriria en cada `innerHTML` de renderBody (y son 800 nodos que re-observar), y
   sobre todo el scroll-driven es DETERMINISTA -- en cualquier posicion de scroll el estado
   es funcion del scroll y no del reloj, asi que el arnes nunca captura una foto a media
   animacion.

   Los cuatro acomodos que se quedan fuera tienen su propio gesto o su propio eje: el riel y
   panorama scrollean en horizontal (entrar "desde abajo" ahi no significa nada), la pila ya
   tiene su abanico, y contacto son cientos de celdas diminutas donde esto seria ruido. La
   guia queda fuera aparte: sus tiles son ilustraciones de una leccion, no fotos. */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    @keyframes gt-tile-in { from { opacity: 0; transform: translateY(var(--mov-dist, 24px)); } }
    .mov-s #gal-body .tile { animation: gt-tile-in linear both; animation-timeline: view(); animation-range: entry 0% entry 55%; }
    /* Dos cosas que hay que respetar aqui, las dos medidas:
       1) Selectores COMPUESTOS (.mov-s.lay-riel) y no descendentes: aplicarShell escribe el
          acomodo, la direccion y el movimiento como clases del MISMO elemento (#app).
       2) El opt-out repite `#gal-body`. La regla de arriba lo lleva, y un ID pesa mas que
          cualquier cantidad de clases: sin repetirlo, estos opt-outs perdian en silencio y
          el riel revelaba sus fotos igual. */
    .mov-s.lay-riel #gal-body .tile,
    .mov-s.lay-apilado #gal-body .tile,
    .mov-s.lay-contacto #gal-body .tile,
    .mov-s.dir-h #gal-body .tile,
    .mov-s #gal-body .guia-esc .tile { animation: none; }
  }
}

/* ---------- portada "overlay" (la de Revista) ---------- */
.gt-rev-cover { display: block; position: relative; }
/* Velo sobre FOTO: independiente de paleta por definicion (siempre oscurece la foto para
   que el texto claro de encima se lea, en cualquier plantilla). */
.gt-rev-grad { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(21,19,15,.42) 0%, rgba(21,19,15,.08) 40%, rgba(21,19,15,.72) 100%); }
.gt-rev-content { position: absolute; left: 0; right: 0; bottom: 64px; display: flex; flex-direction: column; align-items: center; gap: 16px; color: rgba(243,239,232,.97); padding: 0 20px; text-align: center; }
.gt-rev-eyebrow { --tx-esc: 1; --tx-ink: initial; --tx-font: initial; font-family: var(--tx-font, inherit); font-size: calc(11px * var(--tx-esc)); letter-spacing: .3em; text-transform: uppercase; font-weight: 600; color: var(--tx-ink, rgba(243,239,232,.75)); }
.gt-rev-title { --tx-esc: 1; --tx-ink: initial; --tx-font: initial; font-family: var(--tx-font, var(--gt-display, 'Instrument Serif'), Georgia, serif); font-weight: 400; font-size: calc(clamp(52px, 9vw, 104px) * var(--tx-esc)); color: var(--tx-ink, inherit); line-height: .98; margin: 0; }
.gt-rev-title i { font-style: italic; color: rgba(232,201,180,.95); }

/* ---------- portada "banda" ----------
   Encabezado tipografico + la foto elegida a sangre debajo. Una sola pieza para lo que
   en el v1 eran cinco encabezados casi identicos: el caracter lo ponen la paleta y la
   tipografia de la plantilla. */
.gt-bda-cover { display: block; position: relative; min-height: 0; background: var(--bg); color: var(--ink); }
.gt-bda-hd { max-width: 1160px; margin: 0 auto; padding: clamp(40px, 7vw, 90px) clamp(18px, 5vw, 64px) clamp(16px, 3vw, 30px); display: flex; flex-direction: column; gap: 14px; }
.gt-bda-hd.ca-center { align-items: center; text-align: center; }
.gt-bda-hd.ca-left { align-items: flex-start; text-align: left; }
.gt-bda-hd.ca-right { align-items: flex-end; text-align: right; }
.gt-bda-eyebrow { --tx-esc: 1; --tx-ink: initial; --tx-font: initial; font-family: var(--tx-font, inherit); font-size: calc(11px * var(--tx-esc)); letter-spacing: .28em; text-transform: uppercase; font-weight: 600; color: var(--tx-ink, var(--ink2)); }
.gt-bda-title { --tx-esc: 1; --tx-ink: initial; --tx-font: initial; font-family: var(--tx-font, var(--gt-display, 'Instrument Serif'), serif); font-weight: 400; font-size: calc(clamp(38px, 6.5vw, 76px) * var(--tx-esc)); color: var(--tx-ink, inherit); line-height: 1.02; margin: 0; }
.gt-bda-title i { font-style: italic; color: var(--accent-tinta); }
.gt-bda-sub { font-size: 12px; letter-spacing: .22em; text-transform: uppercase; color: var(--ink2); }

/* La banda de foto compartida (tambien la usa "film" sin video). */
.gt-banda { background-size: cover; background-repeat: no-repeat; width: 100%; }
.gt-banda-alta { height: clamp(240px, 42vh, 460px); }
/* Techo de ancho: sin el, en un monitor ancho la banda mide 2560px+ contra ~460px de
   alto y cover recorta hasta partir una vertical en dos franjas (reportado). */
.gt-banda-alta { max-width: 1200px; margin-left: auto; margin-right: auto; }
@container (max-width: 700px) {
  .gt-banda-alta { height: 40vh; }
}

/* ---------- portada "collage" (la de Deriva) ---------- */
.cp-collage .gt-der-cover, .gt-der-cover { display: block; position: relative; min-height: clamp(560px, 92vh, 900px); background: var(--bg); overflow: hidden; }
.gt-der-collage { position: absolute; inset: 0; }
.gt-der-p { position: absolute; overflow: hidden; }
.gt-der-p img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Composicion estatica valida POR SI SOLA: sin scroll timelines esto es lo que se ve. */
.gt-der-p0 { left: 0; top: 26%; width: min(38%, 520px); aspect-ratio: 16/10; }
.gt-der-p1 { right: 4%; top: 2%; width: min(32%, 430px); aspect-ratio: 5/6; }
.gt-der-p2 { left: 22%; bottom: 4%; width: min(30%, 400px); aspect-ratio: 8/5; }
.gt-der-p3 { right: 0; bottom: 0; width: min(22%, 300px); aspect-ratio: 5/7; }
.gt-der-titulo { position: absolute; left: 0; right: 0; top: 44%; display: flex; flex-direction: column; align-items: center; gap: 12px; pointer-events: none; padding: 0 16px; }
.gt-der-eyebrow { --tx-esc: 1; --tx-ink: initial; --tx-font: initial; font-family: var(--tx-font, inherit); font-size: calc(11px * var(--tx-esc)); letter-spacing: .28em; text-transform: uppercase; font-weight: 600; color: var(--tx-ink, var(--ink2)); }
.gt-der-titulo h1 { --tx-esc: 1; --tx-ink: initial; --tx-font: initial; font-family: var(--tx-font, var(--gt-display, 'Instrument Serif'), serif); font-weight: 400; font-size: calc(clamp(34px, 7vw, 96px) * var(--tx-esc)); letter-spacing: .06em; color: var(--tx-ink, var(--ink)); margin: 0; text-align: center; }
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: scroll()) {
    @keyframes gt-der-v1 { to { transform: translateY(-260px); } }
    @keyframes gt-der-v2 { to { transform: translateY(120px); } }
    @keyframes gt-der-v3 { to { transform: translateY(-150px); } }
    @keyframes gt-der-v4 { to { transform: translateY(-70px); } }
    @keyframes gt-der-fade { to { opacity: 0; transform: translateY(-40px); } }
    .gt-der-p0, .gt-der-p1, .gt-der-p2, .gt-der-p3, .gt-der-titulo { animation-timeline: scroll(root); animation-range: 0 100vh; animation-timing-function: linear; animation-fill-mode: both; }
    .gt-der-p0 { animation-name: gt-der-v1; }
    .gt-der-p1 { animation-name: gt-der-v2; }
    .gt-der-p2 { animation-name: gt-der-v3; }
    .gt-der-p3 { animation-name: gt-der-v4; }
    .gt-der-titulo { animation-name: gt-der-fade; animation-range: 0 62vh; }
  }
}
@container (max-width: 760px) {
  /* El alto se ata al ANCHO, que es lo que gobierna a las piezas: con 92vh, cuatro fotos
     de ~140px quedaban repartidas sobre ~780px (densidad medida 17%, era mezcla de
     unidades, no aire de diseno). Topes en px calibrados para congelar a ~452px. */
  .gt-der-cover { --der-alto: clamp(430px, 124vw, 560px); min-height: var(--der-alto); }
  .gt-der-p0 { left: 0;   top: 18%;   width: min(54%, 245px); }
  .gt-der-p1 { right: 0;  top: 0;     width: min(40%, 180px); aspect-ratio: 4/5; }
  .gt-der-p2 { left: 6%;  bottom: 0;  width: min(52%, 235px); aspect-ratio: 3/2; }
  .gt-der-p3 { right: 0;  bottom: 6%; width: min(38%, 170px); aspect-ratio: 3/4; }
  .gt-der-titulo { top: 42%; }
}
/* El paralaje movil se re-calibra a la RELACION del alto de portada, no a los px de
   escritorio: -260px sobre una portada de ~484px sacaria a p0 entera de cuadro. */
@media (prefers-reduced-motion: no-preference) {
 @container (max-width: 760px) {
  @supports (animation-timeline: scroll()) {
    @keyframes gt-der-v1m { to { transform: translateY(-95px); } }
    @keyframes gt-der-v2m { to { transform: translateY(64px); } }
    @keyframes gt-der-v3m { to { transform: translateY(-80px); } }
    @keyframes gt-der-v4m { to { transform: translateY(-38px); } }
    .gt-der-p0 { animation-name: gt-der-v1m; }
    .gt-der-p1 { animation-name: gt-der-v2m; }
    .gt-der-p2 { animation-name: gt-der-v3m; }
    .gt-der-p3 { animation-name: gt-der-v4m; }
    .gt-der-p0, .gt-der-p1, .gt-der-p2, .gt-der-p3 { animation-range: 0 var(--der-alto); }
    .gt-der-titulo { animation-range: 0 calc(var(--der-alto) * .62); }
  }
 }
}

/* ---------- el film como BLOQUE del cuerpo, entre portada y reticula ----------
   Agnostico de plantilla por construccion: pinta solo con los tokens que escribirTokens()
   (galeria.js) deja inline en #app, asi que se ve bien igual en las plantillas claras y en
   las oscuras sin una sola regla .tema-*. El unico literal es el negro del letterbox, que
   es independiente de la paleta por definicion -- mismo criterio que .gt-cine-marco, y lo
   que la paridad del motor permite explicitamente.
   Poster + play, nunca autoplay: el <video> real no se monta hasta que alguien lo pide. */
.gt-film { margin: clamp(36px, 6vw, 72px) auto 0; padding: 0 clamp(16px, 4vw, 44px); max-width: 1280px; }
.gt-film-marco { position: relative; background: #000; border-radius: 4px; overflow: hidden; aspect-ratio: 16 / 9; }
.gt-film-v { width: 100%; height: 100%; display: block; background: #000; object-fit: contain; }
/* El poster es el fondo del propio boton: un <img> aparte solo agregaria un nodo que
   posicionar. Sin poster (analizarFilm puede devolver null), queda el negro del marco. */
.gt-film-play { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; padding: 0; cursor: pointer;
  background-color: #000; background-size: cover; background-position: center; background-repeat: no-repeat;
  display: flex; align-items: center; justify-content: center; }
.gt-film-play::after { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,.18); transition: background .2s ease; }
.gt-film-play:hover::after { background: rgba(0,0,0,.06); }
.gt-film-play:focus-visible { outline: 3px solid var(--accent-tinta); outline-offset: -3px; }
/* El disco del play va en blanco/negro literales y NO en tokens de paleta: flota sobre una
   FOTO, no sobre el fondo del tema, asi que su contraste no depende de la plantilla. */
.gt-film-tri { position: relative; z-index: 1; width: clamp(56px, 7vw, 78px); height: clamp(56px, 7vw, 78px);
  border-radius: 50%; background: rgba(255,255,255,.94); display: block;
  box-shadow: 0 6px 28px rgba(0,0,0,.34); transition: transform .18s ease; }
.gt-film-tri::before { content: ""; position: absolute; top: 50%; left: 54%; transform: translate(-50%,-50%);
  border-style: solid; border-width: 11px 0 11px 18px; border-color: transparent transparent transparent #000; }
.gt-film-play:hover .gt-film-tri { transform: scale(1.06); }
.gt-film-play:active .gt-film-tri { transform: scale(.97); }
.gt-film-pie { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-top: 12px; }
.gt-film-tit { --tx-esc: 1; --tx-ink: initial; --tx-font: initial;
  font-family: var(--tx-font, var(--gt-display, 'Instrument Serif'), serif);
  font-size: calc(clamp(19px, 2.2vw, 27px) * var(--tx-esc)); color: var(--tx-ink, inherit); line-height: 1.2; }
.gt-film-dur { font-family: 'JetBrains Mono', monospace; font-size: 11.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink2); flex: none; }
@media (prefers-reduced-motion: reduce) {
  .gt-film-play::after, .gt-film-tri { transition: none; }
  .gt-film-play:hover .gt-film-tri, .gt-film-play:active .gt-film-tri { transform: none; }
}

/* ---------- portada "film" (la de Cine) ---------- */
.gt-cine-cover { display: block; position: relative; min-height: 0; background: var(--bg); color: var(--ink); }
.gt-cine-marco { background: #000; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.gt-cine-v { width: 100%; max-height: 82vh; display: block; background: #000; }
.gt-cine-hd { padding: clamp(26px, 4vw, 46px) clamp(18px, 4vw, 44px) clamp(18px, 3vw, 30px); }
.gt-cine-title { --tx-esc: 1; --tx-ink: initial; --tx-font: initial; font-family: var(--tx-font, var(--gt-display, 'Instrument Serif'), serif); font-weight: 400; font-size: calc(clamp(34px, 6vw, 72px) * var(--tx-esc)); color: var(--tx-ink, inherit); line-height: 1; margin: 0; }
.gt-cine-title i { font-style: italic; color: var(--accent-tinta); }
.gt-cine-meta { display: flex; flex-wrap: wrap; gap: clamp(14px, 3vw, 34px); margin-top: 16px; font-family: 'JetBrains Mono', monospace; font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink2); }

/* ---------- acomodo "capitulos" (el cuerpo de Revista) ---------- */
.gt-rev { max-width: 1160px; margin: 0 auto; padding: 0 clamp(18px, 6vw, 90px); }
.lay-capitulos .gt-cierre { margin-left: calc(-1 * clamp(18px, 6vw, 90px)); margin-right: calc(-1 * clamp(18px, 6vw, 90px)); }
.gt-rev-cap { padding-top: clamp(56px, 8vw, 96px); }
.gt-rev-caphd { display: flex; align-items: center; gap: 16px; }
.gt-rev-num { font-family: 'JetBrains Mono', monospace; font-size: 12px; letter-spacing: .2em; color: var(--accent-tinta); }
.gt-rev-rule { height: 1px; width: 70px; background: var(--line); }
.gt-rev-count { font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--ink2); }
.gt-rev-capt { --tx-esc: 1; --tx-ink: initial; --tx-font: initial; font-family: var(--tx-font, var(--gt-display, 'Instrument Serif'), serif); font-weight: 400; font-size: calc(clamp(32px, 4.5vw, 58px) * var(--tx-esc)); color: var(--tx-ink, inherit); line-height: 1.05; margin: 22px 0 0; max-width: 900px; }
.gt-rev-capx { --tx-esc: 1; --tx-ink: initial; --tx-font: initial; font-family: var(--tx-font, var(--gt-display, 'Instrument Serif'), serif); font-size: calc(clamp(17px, 2vw, 22px) * var(--tx-esc)); font-style: italic; line-height: 1.6; color: var(--tx-ink, var(--ink2)); margin-top: 18px; max-width: 760px; }
.gt-rev-par { display: grid; grid-template-columns: 1.35fr 1fr; gap: var(--gt-gap, 24px); align-items: start; margin-top: clamp(30px, 5vw, 56px); }
.gt-rev-col { display: flex; flex-direction: column; gap: var(--gt-gap, 24px); padding-top: clamp(30px, 6vw, 80px); }
.gt-rev-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gt-gap, 20px); margin-top: 24px; }
/* Proporciones = FALLBACK para fotos sin medidas guardadas; el aspect-ratio inline real
   de gtTile gana. */
.lay-capitulos .gt-rev-a { aspect-ratio: 4/5; }
.lay-capitulos .gt-rev-b { aspect-ratio: 1/1; }
.lay-capitulos .gt-rev-b + .gt-rev-b { aspect-ratio: 3/2; }
.lay-capitulos .gt-rev-c { aspect-ratio: 3/4; }
@container (max-width: 760px) {
  .gt-rev-par { grid-template-columns: 1fr; }
  .gt-rev-col { padding-top: 0; }
  .gt-rev-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
}

/* ---------- acomodo "linea-tiempo" (el cuerpo de Diario) ---------- */
.gt-dia { max-width: 1160px; margin: 0 auto; display: flex; align-items: flex-start; gap: 0; padding: 0 clamp(18px, 5vw, 64px); }
.gt-dia-rail { position: sticky; top: calc(160px + var(--demo-h, 0px)); flex: none; width: 168px; display: flex; flex-direction: column; gap: 26px; align-items: flex-end; border-right: 1px solid var(--line); padding: 26px 26px 26px 0; }
.gt-dia-rbtn { background: none; border: 0; padding: 0; cursor: pointer; text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; font: inherit; }
.gt-dia-rh { font-family: var(--gt-display, 'Instrument Serif'), serif; font-size: 26px; line-height: 1; color: var(--ink3); transition: color .2s; }
.gt-dia-rl { font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; color: transparent; font-weight: 600; transition: color .2s; }
.gt-dia-rbtn.on .gt-dia-rh { color: var(--ink); }
.gt-dia-rbtn.on .gt-dia-rl { color: var(--accent-tinta); }
.gt-dia-main { flex: 1; min-width: 0; padding: 26px 0 0 clamp(20px, 4vw, 52px); display: flex; flex-direction: column; gap: clamp(38px, 5vw, 56px); }
.gt-dia-caphd { display: flex; gap: 16px; align-items: baseline; }
.gt-dia-h { --tx-esc: 1; --tx-ink: initial; --tx-font: initial; font-family: var(--tx-font, inherit); font-size: calc(11px * var(--tx-esc)); letter-spacing: .22em; text-transform: uppercase; color: var(--tx-ink, var(--accent-tinta)); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gt-dia-rule { height: 1px; flex: 1; background: var(--line); }
.gt-dia-count { font-size: 12px; color: var(--ink2); white-space: nowrap; }
.gt-dia-capx { --tx-esc: 1; --tx-ink: initial; --tx-font: initial; font-family: var(--tx-font, var(--gt-display, 'Instrument Serif'), serif); font-size: calc(clamp(17px, 1.8vw, 21px) * var(--tx-esc)); font-style: italic; line-height: 1.6; color: var(--tx-ink, var(--ink2)); max-width: 640px; margin-top: 14px; }
.gt-dia-ancla { display: grid; grid-template-columns: 2fr 1fr; gap: var(--gt-gap, 16px); margin-top: 18px; align-items: start; }
.gt-dia-col { display: grid; grid-template-rows: auto auto; gap: var(--gt-gap, 16px); align-content: start; }
.gt-dia-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gt-gap, 14px); margin-top: 16px; align-items: start; }
.lay-linea-tiempo .gt-cita { text-align: left; margin-left: 0; }
@container (max-width: 860px) {
  .gt-dia-rail { display: none; }
  .gt-dia-main { padding-left: 0; }
  .gt-dia-ancla { grid-template-columns: 1fr; }
  .gt-dia-col { grid-template-rows: none; grid-template-columns: 1fr 1fr; align-items: start; }
  .gt-dia-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
}

/* ---------- acomodo "mamposteria" (el cuerpo de Mosaico) ----------
   display:grid y NO columns: mismo motivo que .grid (Clasico, ver el comentario en
   galeria.html) -- con `columns` el navegador llena hacia ABAJO por columna antes de
   pasar a la siguiente, y con una galeria grande cada columna termina siendo un cuarto
   completo del dia. Aqui el cambio sale MAS limpio que en Clasico: cada .gt-mos-t ya
   fuerza aspect-ratio:3/2 (a diferencia del .tile de Clasico, que respeta el aspect-ratio
   real de cada foto), asi que TODAS las piezas de una fila miden lo mismo de alto -- cero
   huecos irregulares, ni falta align-items para evitarlos. */
.gt-mos { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gt-gap, 12px); padding: clamp(14px, 3vw, 40px); }
.lay-mamposteria .gt-mos-t { width: 100%; height: auto; break-inside: avoid; aspect-ratio: 3/2; }
.gt-mos-say { break-inside: avoid; background: var(--dark); color: var(--dark-ink); display: flex; align-items: center; padding: clamp(14px, 2.5vw, 26px); font-family: var(--gt-display, 'Instrument Serif'), serif; font-size: clamp(20px, 3vw, 40px); line-height: 1.05; }
.gt-mos-say i { font-style: italic; opacity: .75; }
.lay-mamposteria .gt-cierre { margin: 0; }
@container (max-width: 1000px) { .gt-mos { grid-template-columns: repeat(3, 1fr); } }
@container (max-width: 700px) { .gt-mos { grid-template-columns: repeat(2, 1fr); gap: var(--gt-gap, 8px); } }

/* Flourish de PLANTILLA mosaico (no del acomodo): la .nav se vuelve dock flotante.
   Mismo markup de galeria.js, otra piel; el selbar sube para no encimarse. */
.tema-mosaico .nav { position: fixed; top: auto; bottom: calc(16px + env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); width: auto; max-width: calc(100vw - 24px); background: var(--navbg); backdrop-filter: blur(14px); border: 0; border-radius: 100px; padding: 8px 14px; gap: 8px; color: var(--gt-dockink); box-shadow: 0 20px 50px -20px rgba(0,0,0,.55); }
.tema-mosaico .selbar { bottom: calc(84px + env(safe-area-inset-bottom)); }

/* ---------- acomodo "collage" (el cuerpo de Deriva) ---------- */
.gt-der { padding: clamp(40px, 6vw, 70px) clamp(18px, 5vw, 70px) 80px; }
.gt-der-cap + .gt-der-cap { padding-top: clamp(40px, 6vw, 80px); }
.gt-der-intro { max-width: 680px; }
/* Los encabezados de capitulo son el lugar del ACENTO en este acomodo; --accent-tinta
   garantiza que un acento chillon jamas los deje ilegibles (medido: 1.14 con verde). */
.gt-der-h { --tx-esc: 1; --tx-ink: initial; --tx-font: initial; font-family: var(--tx-font, var(--gt-display, 'Instrument Serif'), serif); font-weight: 400; font-size: calc(clamp(28px, 4vw, 46px) * var(--tx-esc)); line-height: 1.1; color: var(--tx-ink, var(--accent-tinta)); margin: 0; }
.gt-der-tx { --tx-esc: 1; --tx-ink: initial; --tx-font: initial; font-family: var(--tx-font, inherit); font-size: calc(14.5px * var(--tx-esc)); line-height: 1.75; color: var(--tx-ink, var(--ink2)); margin: 12px 0 0; }
.gt-der-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gt-gap, 18px); margin-top: clamp(26px, 4vw, 44px); align-items: start; }
.lay-collage .gt-der-t { aspect-ratio: 3/4; margin-bottom: 0; }
.lay-collage .gt-der-baja { margin-top: clamp(20px, 5vw, 70px); }
.lay-collage .gt-cierre { background: none; color: var(--ink); margin: clamp(50px, 8vw, 90px) 0 0; padding: 0; }
.lay-collage .gt-cierre-s { color: var(--ink2); opacity: 1; }
@container (max-width: 760px) {
  .gt-der-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .lay-collage .gt-der-baja { margin-top: 0; }
}

/* ---------- acomodo "bandas" (el cuerpo de Cine) ---------- */
.gt-cine { padding: 0 0 60px; }
.gt-cine-cap { padding: clamp(26px, 4vw, 48px) 0 0; }
.gt-cine-caphd { display: flex; align-items: baseline; gap: 14px; padding: 0 clamp(18px, 4vw, 44px); }
.gt-cine-num { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--accent-tinta); }
.gt-cine-n { --tx-esc: 1; --tx-ink: initial; --tx-font: initial; font-family: var(--tx-font, var(--gt-display, 'Instrument Serif'), serif); font-size: calc(clamp(22px, 3vw, 34px) * var(--tx-esc)); color: var(--tx-ink, inherit); }
.gt-cine-tx { --tx-esc: 1; --tx-ink: initial; --tx-font: initial; font-family: var(--tx-font, inherit); padding: 10px clamp(18px, 4vw, 44px) 0; max-width: 640px; font-size: calc(14.5px * var(--tx-esc)); line-height: 1.75; color: var(--tx-ink, var(--ink2)); }
/* Banda horizontal con snap: nunca queda una foto cortada a la mitad al soltar. */
.gt-cine-banda { display: flex; align-items: center; gap: var(--gt-gap, 10px); overflow-x: auto; scroll-snap-type: x proximity; padding: clamp(16px, 2.5vw, 26px) clamp(18px, 4vw, 44px); scrollbar-width: none; }
.gt-cine-banda::-webkit-scrollbar { display: none; }
.lay-bandas .gt-cine-t { flex: 0 0 auto; width: clamp(220px, 30vw, 380px); aspect-ratio: 3/2; margin-bottom: 0; scroll-snap-align: center; }
.lay-bandas .gt-cita { padding: 0 clamp(18px, 4vw, 44px); }
.lay-bandas .gt-cierre { background: none; border-top: 1px solid var(--line); color: var(--ink); margin: clamp(40px, 6vw, 70px) clamp(18px, 4vw, 44px) 0; padding-left: 0; padding-right: 0; }
.lay-bandas .gt-cierre-s { color: var(--ink2); opacity: 1; }

/* ---------- acomodo "riel" ---------- */
.gt-riel { display: flex; align-items: flex-start; gap: 0; }
.gt-riel-idx { position: sticky; top: calc(160px + var(--demo-h, 0px)); flex: none; width: 230px; display: flex; flex-direction: column; gap: 16px; padding: 26px 26px 26px clamp(18px, 4vw, 44px); border-right: 1px solid var(--line); }
.gt-riel-ib { display: flex; gap: 12px; align-items: baseline; background: none; border: 0; padding: 0; cursor: pointer; font: inherit; text-align: left; color: var(--ink2); transition: color .2s; }
.gt-riel-ib.on { color: var(--ink); }
.gt-riel-in { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--accent-tinta); }
.gt-riel-tot { margin-top: auto; padding-top: 24px; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--ink3); }
.gt-riel-main { flex: 1; min-width: 0; padding: 26px 0 70px; }
.gt-riel-cap + .gt-riel-cap { margin-top: clamp(30px, 5vw, 54px); }
.gt-riel-cn { display: flex; align-items: baseline; gap: 12px; padding: 0 clamp(18px, 3vw, 34px); }
.gt-riel-cnt { --tx-esc: 1; --tx-ink: initial; --tx-font: initial; font-family: var(--tx-font, var(--gt-display, 'Instrument Serif'), serif); font-size: calc(clamp(20px, 2.6vw, 30px) * var(--tx-esc)); color: var(--tx-ink, inherit); }
.gt-riel-cn .gt-riel-cnn { font-family: 'JetBrains Mono', monospace; font-size: 11.5px; color: var(--ink2); }
.gt-riel-pista { display: flex; align-items: center; gap: var(--gt-gap, 14px); overflow-x: auto; scroll-snap-type: x mandatory; padding: 18px clamp(18px, 3vw, 34px); scrollbar-width: none; }
.gt-riel-pista::-webkit-scrollbar { display: none; }
.lay-riel .gt-riel-t { flex: 0 0 auto; width: min(72%, 620px); aspect-ratio: 4/5; margin-bottom: 0; scroll-snap-align: center; }
@container (max-width: 860px) {
  .gt-riel-idx { position: static; width: 100%; flex-direction: row; flex-wrap: wrap; gap: 14px; border-right: 0; border-bottom: 1px solid var(--line); }
  /* align-items del eje transversal: sin stretch, la pista se encogia a 89px (medido). */
  .gt-riel { flex-direction: column; align-items: stretch; }
  /* Los capitulos son la unica navegacion del acomodo y en telefono median 20px de alto:
     el padding los lleva a ~40px sin tocar la tipografia. */
  .gt-riel-ib { padding: 10px 2px; }
  .gt-riel-tot { display: none; }
  .lay-riel .gt-riel-t { width: 86%; }
}

/* ---------- acomodo "apilado" (el cuerpo de Pila) ---------- */
.gt-pila-mesa { position: relative; height: min(72vh, 680px); display: flex; align-items: center; justify-content: center; margin-top: 20px; }
/* --d = distancia al frente: cada carta detras rota un poco mas y encoge. El ancho se
   ata tambien al alto de la mesa: una foto vertical con solo % de ancho se salia. */
/* La transicion va por TOKEN (--mov-dur-3) y no con la duracion escrita a mano: era la unica
   animacion del motor sin gate de reduced-motion, asi que alguien que pide menos movimiento
   veia igual el abanico deslizarse. Con el token en 0s el reorden es instantaneo y el estado
   final es el mismo, que es justo lo que una transicion permite y una animacion no. */
.gt-pila-carta { position: absolute; width: min(52%, 420px, calc(min(72vh, 680px) * .6)); transition: transform var(--mov-dur-3) var(--mov-ease-flujo), opacity var(--mov-dur-3), filter var(--mov-dur-3);
  /* El abanico responde al espaciado fino SIN mover el default: con --gt-gap en su 14px
     de fabrica la formula da los 10px de siempre; apretarlo junta las cartas y abrirlo
     las separa. Era el ultimo acomodo donde el control de espaciado no hacia NADA. */
  transform: rotate(calc(var(--d, 0) * 1.6deg)) scale(calc(1 - var(--d, 0) * .045)) translateY(calc(var(--d, 0) * (10px + (var(--gt-gap, 14px) - 14px) * .35)));
  z-index: calc(10 - var(--d, 0)); opacity: calc(1 - var(--d, 0) * .12); filter: brightness(calc(1 - var(--d, 0) * .1)); cursor: pointer; }
.gt-pila-carta.al-frente { cursor: zoom-in; }
.lay-apilado .gt-pila-t { aspect-ratio: 4/5; margin-bottom: 0; box-shadow: 0 30px 70px -30px rgba(0,0,0,.8); }
.gt-pila-pie { position: absolute; left: clamp(14px, 4vw, 44px); bottom: 10px; pointer-events: none; }
.gt-pila-n { font-family: 'JetBrains Mono', monospace; font-size: 12px; letter-spacing: .2em; color: var(--accent-tinta); }
.gt-pila-tira { display: flex; gap: var(--gt-gap, 10px); justify-content: flex-start; overflow-x: auto; padding: clamp(18px, 3vw, 30px) clamp(14px, 4vw, 44px) 60px; scrollbar-width: none; }
.gt-pila-tira::-webkit-scrollbar { display: none; }
.gt-pila-mini { flex: 0 0 auto; width: 62px; height: 78px; padding: 0; border: 1px solid transparent; background: none; cursor: pointer; opacity: .5; transition: opacity .2s, border-color .2s; }
.gt-pila-mini img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gt-pila-mini.on, .gt-pila-mini:hover { opacity: 1; border-color: var(--accent); }
.lay-apilado .gt-cierre { margin-top: 0; }
/* El ancho sigue atado a la altura de la mesa (igual que el base): con solo width:74%
   una foto VERTICAL se salia de la mesa por abajo -- el calc del base existia justo
   para eso y el override movil lo descartaba. */
@container (max-width: 700px) { .gt-pila-carta { width: min(74%, calc(min(56vh, 460px) * .6)); } .gt-pila-mesa { height: min(56vh, 460px); } }

/* ---------- Las 3 portadas editoriales (2026-08-20) ----------
   Geometria y nada mas, como todo este archivo: el color sale de los tokens que
   escribirTokens() deja en #app. Las tres comparten .coverphoto (la foto elegida con su
   encuadre, que ya pinta galeria.html) y se diferencian SOLO por como reparten el
   espacio -- que es exactamente lo que las 12 tarjetas viejas no hacian. */

/* "cabecera": el titulo cruza de borde a borde como el logotipo de una revista, y las
   lineas de portada bajan por el margen izquierdo. El velo va de abajo hacia arriba
   porque el bloque de texto vive abajo: un degradado parejo aclararia justo la zona que
   necesita ser oscura. */
.gt-cab-cover { position: relative; min-height: 100vh; min-height: 100svh; display: flex; overflow: hidden; background: var(--dark); color: var(--dark-ink); }
.gt-cab-velo { position: absolute; inset: 0; z-index: 1; background: linear-gradient(to top, rgba(10,8,6,.82), rgba(10,8,6,.15) 52%, rgba(10,8,6,.45)); }
.gt-cab-in { position: relative; z-index: 2; flex: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: clamp(16px, 2.4vw, 28px); padding: clamp(28px, 5vw, 60px) clamp(18px, 4vw, 54px) clamp(34px, 6vw, 72px); min-width: 0; }
/* El tamano sale de vw (no de un clamp con tope chico) porque la gracia de esta portada
   es que el titulo ROCE los dos margenes; el tope alto solo evita que en un monitor de
   2560px se salga de madre. */
.gt-cab-title { --tx-esc: 1; --tx-ink: initial; --tx-font: initial; font-family: var(--tx-font, var(--gt-display, 'Instrument Serif'), serif); font-weight: 400; font-size: calc(clamp(40px, 12.5vw, 200px) * var(--tx-esc)); color: var(--tx-ink, inherit); line-height: .88; letter-spacing: -.03em; margin: 0; text-wrap: balance; }
.gt-cab-title i { font-style: italic; color: var(--accent-dark); }
.gt-cab-lines { display: flex; flex-wrap: wrap; gap: 10px clamp(14px, 2vw, 26px); align-items: center; }
.gt-cab-line { --tx-esc: 1; --tx-ink: initial; --tx-font: initial; font-family: var(--tx-font, inherit); font-size: calc(10.5px * var(--tx-esc)); letter-spacing: .26em; text-transform: uppercase; font-weight: 600; color: var(--tx-ink, inherit); opacity: .82; }
/* El separador va con ::before en los que NO son el primero, no con un nodo suelto: asi
   una galeria sin lugar ni fecha nunca deja un punto colgando. */
.gt-cab-line + .gt-cab-line::before { content: "\00B7"; margin-right: clamp(14px, 2vw, 26px); opacity: .55; }
@container (max-width: 640px) {
  .gt-cab-title { font-size: calc(clamp(34px, 15vw, 74px) * var(--tx-esc)); letter-spacing: -.02em; }
  .gt-cab-line { letter-spacing: .18em; }
}

/* "triptico": tres columnas de foto y el titulo ACOSTADO en el margen. writing-mode y no
   rotate(): rotar saca al elemento del flujo y hay que adivinar su caja a mano; con
   writing-mode el navegador la calcula y el texto sigue seleccionable y accesible. */
.gt-tri-cover { position: relative; min-height: 100vh; min-height: 100svh; display: flex; align-items: stretch; background: var(--bg); color: var(--ink); overflow: hidden; }
.gt-tri-lado { flex: none; display: flex; align-items: center; justify-content: center; gap: clamp(14px, 2vw, 26px); padding: clamp(20px, 3vw, 40px) clamp(10px, 1.6vw, 22px); }
.gt-tri-title { --tx-esc: 1; --tx-ink: initial; --tx-font: initial; font-family: var(--tx-font, var(--gt-display, 'Instrument Serif'), serif); font-weight: 400; font-size: calc(clamp(32px, 5vw, 68px) * var(--tx-esc)); color: var(--tx-ink, inherit); line-height: 1; margin: 0; writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap; }
.gt-tri-title i { font-style: italic; color: var(--accent-tinta); }
.gt-tri-sub { --tx-esc: 1; --tx-ink: initial; --tx-font: initial; font-family: var(--tx-font, inherit); font-size: calc(11px * var(--tx-esc)); letter-spacing: .26em; text-transform: uppercase; font-weight: 600; color: var(--tx-ink, var(--ink2)); writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap; }
.gt-tri-fotos { flex: 1; display: flex; gap: clamp(6px, 1vw, 14px); padding: clamp(20px, 3vw, 40px) clamp(18px, 3vw, 44px) clamp(20px, 3vw, 40px) 0; min-width: 0; }
.gt-tri-p { flex: 1; min-width: 0; overflow: hidden; }
.gt-tri-p img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* En un telefono el texto vertical obliga a girar la cabeza y las 3 columnas quedan de
   80px: se endereza el titulo y las fotos pasan a una banda horizontal. */
@container (max-width: 640px) {
  .gt-tri-cover { flex-direction: column; min-height: 0; }
  .gt-tri-lado { flex-direction: column; align-items: flex-start; gap: 10px; padding: clamp(30px, 8vw, 54px) 20px 16px; }
  .gt-tri-title, .gt-tri-sub { writing-mode: horizontal-tb; transform: none; white-space: normal; }
  .gt-tri-title { font-size: calc(clamp(34px, 10vw, 60px) * var(--tx-esc)); }
  .gt-tri-fotos { padding: 0 20px 28px; height: clamp(200px, 34vh, 320px); flex: none; }
}

/* "franja": la foto partida en dos por una banda solida. El par --dark/--dark-ink ya
   viene con contraste garantizado por derivarPaleta, asi que el titulo se lee sobre
   CUALQUIER foto -- que es lo que "overlay" no puede prometer. */
/* La banda va en el TERCIO INFERIOR, no centrada: centrada cae sobre las caras (medido
   con una foto de pareja de pie, que es el encuadre mas comun de una portada de boda).
   Abajo sigue cortando la foto en dos, que es el gesto, pero sobre el cuerpo y no sobre
   el sujeto. */
.gt-fra-cover { position: relative; min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; justify-content: flex-end; padding-bottom: clamp(60px, 14vh, 150px); overflow: hidden; background: var(--dark); }
.gt-fra-banda { position: relative; z-index: 2; background: var(--dark); color: var(--dark-ink); padding: clamp(26px, 4.5vw, 54px) clamp(18px, 5vw, 64px); display: flex; flex-direction: column; gap: 12px; align-items: center; text-align: center; }
.gt-fra-eyebrow { --tx-esc: 1; --tx-ink: initial; --tx-font: initial; font-family: var(--tx-font, inherit); font-size: calc(11px * var(--tx-esc)); letter-spacing: .3em; text-transform: uppercase; font-weight: 600; color: var(--tx-ink, inherit); opacity: .72; }
.gt-fra-title { --tx-esc: 1; --tx-ink: initial; --tx-font: initial; font-family: var(--tx-font, var(--gt-display, 'Instrument Serif'), serif); font-weight: 400; font-size: calc(clamp(38px, 7vw, 92px) * var(--tx-esc)); color: var(--tx-ink, inherit); line-height: 1; margin: 0; text-wrap: balance; }
.gt-fra-title i { font-style: italic; color: var(--accent-dark); }
.gt-fra-sub { font-size: 12px; letter-spacing: .24em; text-transform: uppercase; opacity: .7; }
@container (max-width: 640px) {
  .gt-fra-title { font-size: calc(clamp(32px, 10vw, 58px) * var(--tx-esc)); }
  .gt-fra-banda { padding: clamp(22px, 7vw, 40px) 20px; }
}

/* ==================== Tanda editorial 2026-08-21 ====================
   Dos plantillas nuevas: "prensa" (revista) y "archivo" (expediente). Misma regla que
   todo este archivo: cero #RRGGBB, el color sale de los tokens que escribirTokens() deja
   en #app. Lo unico literal son los rgba() de velo sobre foto. */

/* ---------- portada "pliego" (prensa) ----------
   Franja de tinta a la izquierda + foto a altura completa. Es el espejo de cv-split: alli
   la foto va izquierda al 46% y el texto ocupa el resto; aqui el texto es una pieza
   ESTRECHA (un tercio) y la foto manda en area, que es como abre una revista. */
.gt-pli-cover { position: relative; min-height: 100vh; min-height: 100svh; display: flex; align-items: stretch; overflow: hidden; background: var(--dark); }
.gt-pli-col { flex: 0 0 34%; min-width: 0; background: var(--dark); color: var(--dark-ink); display: flex; flex-direction: column; justify-content: flex-end; gap: 18px; padding: clamp(30px, 5vw, 64px) clamp(22px, 3.4vw, 46px) clamp(38px, 6vw, 76px); }
.gt-pli-eyebrow { --tx-esc: 1; --tx-ink: initial; --tx-font: initial; font-family: var(--tx-font, inherit); font-size: calc(11px * var(--tx-esc)); letter-spacing: .3em; text-transform: uppercase; font-weight: 600; color: var(--tx-ink, inherit); opacity: .68; }
/* line-height 1.02 y no menos: Playfair tiene descendentes largas en italica (la "y" de
   "Fanny", la "g" de "Diego") y con leading-none se cortan. */
.gt-pli-title { --tx-esc: 1; --tx-ink: initial; --tx-font: initial; font-family: var(--tx-font, var(--gt-display, 'Instrument Serif'), serif); font-weight: 400; font-size: calc(clamp(34px, 3.6vw, 66px) * var(--tx-esc)); color: var(--tx-ink, inherit); line-height: 1.02; margin: 0; text-wrap: balance; padding-bottom: .06em; }
.gt-pli-title i { font-style: italic; color: var(--accent-dark); }
.gt-pli-rule { height: 1px; width: 100%; background: currentColor; opacity: .28; }
.gt-pli-sub { font-size: 11.5px; letter-spacing: .22em; text-transform: uppercase; opacity: .72; }
.gt-pli-foto { flex: 1; min-width: 0; background-size: cover; background-repeat: no-repeat; background-position: center; }
@container (max-width: 640px) {
  /* En vertical la franja pasa a ser una banda superior: una columna de 34% en 390px deja
     el titulo en dos letras por linea. */
  .gt-pli-cover { flex-direction: column; }
  .gt-pli-col { flex: none; padding: clamp(34px, 9vw, 56px) 22px 26px; }
  .gt-pli-title { font-size: calc(clamp(32px, 9vw, 54px) * var(--tx-esc)); }
  /* flex:1 y no una altura fija: con `height:52vh` la banda de texto + la foto sumaban
     menos que el min-height:100vh de la portada y quedaba una franja oscura muerta
     debajo de la foto. Asi la foto se come el sobrante, sea cual sea el alto del titulo
     (uno de dos lineas cambia la cuenta). */
  .gt-pli-foto { flex: 1; min-height: 52vh; }
}

/* ---------- portada "expediente" (archivo) ----------
   Contraste de escala extremo: el ano en macro sangrando por el borde contra metadatos en
   micro. La foto NO es fondo -- es un cuadro modesto, la unica portada del catalogo donde
   la imagen cede el area al texto. */
.gt-exp-cover { position: relative; min-height: 100vh; min-height: 100svh; display: flex; align-items: center; overflow: hidden; background: var(--bg); color: var(--ink); }
/* El ano se sale por la izquierda a proposito (left negativo): un numero recortado por el
   borde lee como sello de archivo, no como titulo. aria-hidden porque es ornamento: el
   dato ya esta en la fila "fecha" de la lista, y un lector de pantalla no debe leer 2026
   suelto. */
.gt-exp-anio { position: absolute; left: -.06em; bottom: -.16em; font-family: var(--gt-display, 'JetBrains Mono'), monospace; font-size: clamp(9rem, 30vw, 26rem); line-height: .78; letter-spacing: -.05em; color: var(--ink); opacity: .06; pointer-events: none; user-select: none; }
.gt-exp-in { position: relative; z-index: 1; width: 100%; max-width: 1240px; margin: 0 auto; padding: clamp(70px, 9vw, 120px) clamp(20px, 5vw, 64px); display: grid; grid-template-columns: 1fr minmax(0, 42%); gap: clamp(24px, 5vw, 64px); align-items: start; }
.gt-exp-meta { min-width: 0; display: flex; flex-direction: column; gap: clamp(20px, 3vw, 34px); }
.gt-exp-title { --tx-esc: 1; --tx-ink: initial; --tx-font: initial; font-family: var(--tx-font, var(--gt-display, 'JetBrains Mono'), monospace); font-weight: 500; font-size: calc(clamp(30px, 4.4vw, 62px) * var(--tx-esc)); letter-spacing: -.04em; color: var(--tx-ink, inherit); line-height: 1.02; margin: 0; text-wrap: balance; }
.gt-exp-title i { font-style: normal; color: var(--accent-tinta); }
.gt-exp-filas { margin: 0; display: flex; flex-direction: column; gap: 0; border-top: 1px solid var(--line); }
.gt-exp-fila { display: grid; grid-template-columns: 5.5rem 1fr; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line); }
/* Las etiquetas van en --ink2 y NO en el acento: medido, el rojo de "archivo" sobre su
   sustrato da 4.38:1, y a 10px eso queda por debajo del minimo de 4.5 para texto chico.
   El acento se reserva para el ampersand del titulo, que es texto grande (>=3 basta) y
   ademas es donde se quiere que pese. Un acento fuerte vale mas que dos debiles. */
.gt-exp-fila dt { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; font-weight: 500; color: var(--ink2); }
.gt-exp-fila dd { margin: 0; font-family: 'JetBrains Mono', monospace; font-size: 11.5px; letter-spacing: .04em; color: var(--ink2); }
.gt-exp-foto { aspect-ratio: 4 / 5; background-size: cover; background-repeat: no-repeat; background-position: center; }
@container (max-width: 640px) {
  .gt-exp-in { grid-template-columns: 1fr; padding-top: clamp(56px, 14vw, 90px); }
  .gt-exp-anio { font-size: clamp(7rem, 46vw, 13rem); opacity: .05; }
  .gt-exp-foto { aspect-ratio: 3 / 2; }
}

/* ---------- acomodo "pliegos" (prensa) ----------
   Ancla + dos de apoyo, alternando lado. Los filetes son el fondo del padre asomando por
   gap:1px -- no bordes: dos celdas contiguas con border darian una linea doble. */
.gt-pgs { max-width: 1280px; margin: 0 auto; padding: 0 clamp(14px, 3vw, 40px) 80px; }
.gt-pgs-hd { display: flex; align-items: baseline; gap: 16px; margin: clamp(50px, 7vw, 96px) 0 clamp(14px, 2vw, 24px); }
.gt-pgs-n { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: .14em; color: var(--accent-tinta); }
.gt-pgs-t { --tx-esc: 1; --tx-ink: initial; --tx-font: initial; font-family: var(--tx-font, var(--gt-display, 'Instrument Serif'), serif); font-size: calc(clamp(22px, 2.6vw, 38px) * var(--tx-esc)); color: var(--tx-ink, inherit); line-height: 1.1; }
.gt-pgs-rule { flex: 1; height: 1px; background: var(--line); }
.gt-pgs-tx { --tx-esc: 1; --tx-ink: initial; --tx-font: initial; font-family: var(--tx-font, inherit); font-size: calc(15px * var(--tx-esc)); line-height: 1.75; color: var(--tx-ink, var(--ink2)); max-width: 62ch; margin: 0 0 clamp(18px, 3vw, 30px); }
.gt-pgs-pliego { display: grid; grid-template-columns: 1.62fr 1fr; gap: 1px; background: var(--line); margin-bottom: 1px; }
.gt-pgs-inv { grid-template-columns: 1fr 1.62fr; }
.gt-pgs-inv .gt-pgs-a { order: 2; }
.gt-pgs-col { display: grid; grid-template-rows: 1fr 1fr; gap: 1px; min-width: 0; }
.gt-pgs-a, .gt-pgs-b { min-width: 0; }
/* El aspect-ratio inline de gtTile respeta la proporcion de la foto; dentro del pliego las
   celdas mandan, asi que se anula para que el grid no se descuadre. */
.gt-pgs-pliego .tile, .gt-pgs-resto .tile { aspect-ratio: auto !important; height: 100%; background: var(--bg); }
.gt-pgs-pliego .tile-inner, .gt-pgs-resto .tile-inner { height: 100%; }
.gt-pgs-pliego .tile img, .gt-pgs-resto .tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gt-pgs-pliego { min-height: clamp(300px, 52vh, 620px); }
.gt-pgs-resto { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1px; background: var(--line); min-height: clamp(200px, 30vh, 340px); }
@container (max-width: 640px) {
  .gt-pgs-pliego, .gt-pgs-inv { grid-template-columns: 1fr; min-height: 0; }
  .gt-pgs-inv .gt-pgs-a { order: 0; }
  .gt-pgs-col { grid-template-rows: none; grid-template-columns: 1fr 1fr; }
  /* .gt-pgs-resto tambien: sus tiles heredan del selector base height:100% sobre una
     fila de altura indefinida (a 390 el resto queda en 1 columna). Es el residuo de
     1-2 fotos del ultimo pliego -- caso poco frecuente, misma geometria rota. */
  .gt-pgs-pliego .tile, .gt-pgs-resto .tile { height: auto; aspect-ratio: 3 / 2 !important; }
}

/* ---------- acomodo "contacto" (archivo) ----------
   Hoja de contactos: cada cuadro numerado, 1px de separacion, cero redondeo. */
.gt-cto { max-width: 1400px; margin: 0 auto; padding: clamp(30px, 5vw, 60px) clamp(14px, 3vw, 40px) 0; }
.gt-cto-hd { display: flex; align-items: center; gap: 16px; font-family: 'JetBrains Mono', monospace; font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--ink2); margin-bottom: clamp(16px, 2.4vw, 26px); }
.gt-cto-rule { flex: 1; height: 1px; background: var(--line); }
.gt-cto-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(clamp(120px, 15vw, 210px), 1fr)); gap: 1px; background: var(--line); padding: 1px; }
.gt-cto-c { position: relative; background: var(--bg); }
.gt-cto-t { aspect-ratio: 1 / 1 !important; }
.gt-cto-t .tile-inner { height: 100%; }
.gt-cto-t img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gt-cto-c .tile { border-radius: 0; }
/* El numero vive FUERA de la foto (barra inferior), no encima: sobre una foto clara se
   perdia, y un velo para sostenerlo contradice la sobriedad de una hoja de contactos. */
.gt-cto-n { display: block; font-family: 'JetBrains Mono', monospace; font-size: 9.5px; letter-spacing: .12em; color: var(--ink3); padding: 5px 6px 7px; }
.corners-round .gt-cto-c .tile { border-radius: 0; }

/* ==================== Tanda editorial 2/2 (2026-08-21) ====================
   "bruma" (susurro + pasada) y "diptico" (marco + pares). Misma regla de siempre: cero
   #RRGGBB, todo por tokens. */

/* ---------- portada "susurro" (bruma) ----------
   La foto NO llena la pantalla: es una pieza modesta centrada en un campo de papel. Como
   el texto nunca cae encima de la imagen, esta portada no necesita velo ni degradado --
   y es la unica cuyo contraste no depende de que foto le toque. */
.gt-sus-cover { position: relative; min-height: 100vh; min-height: 100svh; display: flex; align-items: center; justify-content: center; background: var(--bg); color: var(--ink); }
.gt-sus-in { display: flex; flex-direction: column; align-items: center; gap: clamp(22px, 3.4vw, 44px); padding: clamp(50px, 8vw, 110px) clamp(20px, 5vw, 60px); width: 100%; max-width: 880px; }
.gt-sus-hd { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
.gt-sus-eyebrow { --tx-esc: 1; --tx-ink: initial; --tx-font: initial; font-family: var(--tx-font, inherit); font-size: calc(10px * var(--tx-esc)); letter-spacing: .44em; text-transform: uppercase; font-weight: 500; color: var(--tx-ink, var(--ink2)); }
/* Deliberadamente CHICO. El resto de las portadas del catalogo titulan entre 34px y
   200px; esta se queda en 18-30 y confia en el tracking y en el aire. Bajarle el tamano
   es el gesto, no un descuido. */
.gt-sus-title { --tx-esc: 1; --tx-ink: initial; --tx-font: initial; font-family: var(--tx-font, var(--gt-display, 'Instrument Serif'), serif); font-weight: 500; font-size: calc(clamp(18px, 2vw, 30px) * var(--tx-esc)); letter-spacing: .16em; text-transform: uppercase; color: var(--tx-ink, inherit); line-height: 1.3; margin: 0; text-wrap: balance; }
.gt-sus-title i { font-style: normal; color: var(--accent-tinta); }
.gt-sus-foto { width: 100%; max-width: 620px; height: clamp(280px, 46vh, 520px); background-size: cover; background-repeat: no-repeat; background-position: center; }
.gt-sus-sub { font-size: 10.5px; letter-spacing: .3em; text-transform: uppercase; color: var(--ink2); text-align: center; }
@container (max-width: 640px) {
  .gt-sus-in { gap: 22px; padding: clamp(40px, 12vw, 70px) 22px; }
  .gt-sus-foto { height: clamp(240px, 42vh, 380px); }
  .gt-sus-title { letter-spacing: .1em; }
  .gt-sus-eyebrow { letter-spacing: .3em; }
}

/* ---------- portada "marco" (diptico) ----------
   Dos copias montadas con paspartu, y la cartela con el nombre ABAJO, dentro del propio
   paspartu -- como una ficha de sala. El texto vive sobre --dark, asi que usa --dark-ink
   y --accent-dark (el acento con contraste garantizado contra el lado oscuro). */
.gt-mar-cover { position: relative; min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; background: var(--dark); color: var(--dark-ink); padding: clamp(30px, 5vw, 72px) clamp(20px, 5vw, 80px) clamp(26px, 4vw, 56px); gap: clamp(20px, 3vw, 38px); }
.gt-mar-obra { flex: 1; min-height: 0; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(14px, 2.4vw, 34px); }
.gt-mar-p { min-width: 0; overflow: hidden; }
.gt-mar-p img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gt-mar-cartela { flex: none; display: flex; flex-direction: column; align-items: center; gap: 9px; text-align: center; }
.gt-mar-title { --tx-esc: 1; --tx-ink: initial; --tx-font: initial; font-family: var(--tx-font, var(--gt-display, 'Instrument Serif'), serif); font-weight: 400; font-size: calc(clamp(26px, 3.2vw, 52px) * var(--tx-esc)); color: var(--tx-ink, inherit); line-height: 1.1; margin: 0; text-wrap: balance; padding-bottom: .05em; }
.gt-mar-title i { font-style: italic; color: var(--accent-dark); }
.gt-mar-sub { font-size: 10.5px; letter-spacing: .28em; text-transform: uppercase; opacity: .66; }
@container (max-width: 640px) {
  /* Dos columnas en 390px darian ~170px por foto. Se apilan, y la altura la manda la
     proporcion real de cada una en vez de una caja fija. */
  .gt-mar-obra { grid-template-columns: 1fr; grid-auto-rows: minmax(0, 1fr); }
  .gt-mar-cover { padding: clamp(26px, 8vw, 44px) 20px 26px; }
}

/* ---------- acomodo "pasada" (bruma) ----------
   Una foto por pantalla y mucho aire. La proporcion la manda LA FOTO (gtTile ya pone su
   aspect-ratio inline): aqui solo se acota el alto para que un vertical no obligue a dos
   scrolls por imagen. */
.gt-psd { max-width: 1180px; margin: 0 auto; padding: clamp(40px, 8vw, 110px) clamp(16px, 4vw, 48px) clamp(60px, 10vw, 140px); display: flex; flex-direction: column; gap: clamp(70px, 13vh, 190px); }
.gt-psd-p { margin: 0; display: flex; flex-direction: column; gap: 12px; }
.gt-psd-t { max-height: 82vh; }
.gt-psd-t .tile-inner { max-height: 82vh; }
.gt-psd-t img { max-height: 82vh; object-fit: contain; width: 100%; }
.gt-psd-pie { display: flex; align-items: baseline; gap: 12px; font-size: 10.5px; letter-spacing: .26em; text-transform: uppercase; color: var(--ink2); }
.gt-psd-n { font-family: 'JetBrains Mono', monospace; letter-spacing: .1em; color: var(--accent-tinta); }
@container (max-width: 640px) {
  .gt-psd { gap: clamp(46px, 9vh, 90px); padding: clamp(30px, 9vw, 56px) 16px 70px; }
  .gt-psd-t, .gt-psd-t .tile-inner, .gt-psd-t img { max-height: 70vh; }
}

/* ---------- acomodo "pares" (diptico) ----------
   De dos en dos, alternando cual manda. El ritmo es el punto. */
.gt-par { max-width: 1320px; margin: 0 auto; padding: clamp(26px, 5vw, 60px) clamp(12px, 3vw, 40px) 80px; display: flex; flex-direction: column; gap: clamp(14px, 2.4vw, 34px); }
.gt-par-f { display: grid; grid-template-columns: 1.62fr 1fr; gap: clamp(14px, 2.4vw, 34px); align-items: center; }
.gt-par-inv { grid-template-columns: 1fr 1.62fr; }
.gt-par-a, .gt-par-b { min-width: 0; }
.gt-par-solo { display: flex; justify-content: center; }
.gt-par-solo .gt-par-a { width: min(100%, 820px); }
@container (max-width: 640px) {
  .gt-par-f, .gt-par-inv { grid-template-columns: 1fr; gap: 12px; }
  .gt-par { gap: 26px; }
}

/* ==================== Shell horizontal (.dir-h) + acomodo "panorama" ====================
   El documento deja de scrollear: .scroll mide el viewport (columna: barra arriba, pager
   abajo) y el scroll vive en #gh -- un contenedor propio con snap, el patron probado de
   .gt-riel-pista, porque overflow-x:clip en .stage NO crea contenedor de scroll.
   PROHIBIDO transform/filter/backdrop-filter/contain/will-change en .dir-h .scroll y en
   .gh: cualquiera anclaria a los position:fixed del visor/hojas/selbar (la medicion
   documentada en galeria.html:27-54). Solo overflow y flex. */
.dir-h .scroll { height: 100vh; height: 100dvh; display: flex; flex-direction: column; overflow: hidden; position: relative; }
.dir-h #gal-barra { flex: none; }
.gh { flex: 1; min-height: 0; display: flex; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; }
.gh::-webkit-scrollbar { display: none; }
/* content-visibility por pagina: con 800 fotos el snap mandatory sobre cientos de hijos
   cuesta; asi el navegador solo compone lo cercano al viewport. */
.gh-pag { flex: none; width: 100%; height: 100%; scroll-snap-align: start; scroll-snap-stop: always; overflow: hidden; position: relative; content-visibility: auto; }
.gh-cuerpo { display: contents; }
/* La portada como primera pagina: su min-height:100vh de la hoja base se ata a la caja
   del pager, no al viewport del documento. */
.dir-h .cover, .dir-h .gh-cover .cover { min-height: 100%; height: 100%; }
.gh-film { display: flex; align-items: center; justify-content: center; }
.gh-film .gt-film { margin: 0 auto; width: 100%; }
/* La ultima pagina (cierre + capsula + footer) es la unica con scroll vertical propio:
   la capsula puede traer muchos mensajes. */
.gh-fin { overflow-y: auto; display: flex; flex-direction: column; justify-content: center; gap: 0; }
.gh-fin .gt-cierre { margin-top: 0; }
.dir-h #gal-body > .empty { flex: none; width: 100%; height: 100%; scroll-snap-align: start; display: flex; flex-direction: column; align-items: center; justify-content: center; }
/* El contador vive FUERA de #gh (absolute sobre .scroll): dentro scrollearia con las
   paginas. pointer-events:none -- es un letrero, no un control. */
.gh-contador { position: absolute; right: 16px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 5; font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: .18em; color: var(--ink2); background: var(--bg); border: 1px solid var(--line); padding: 4px 10px; border-radius: 100px; opacity: .92; pointer-events: none; }
.modo-demo .dir-h .scroll { height: calc(100vh - var(--demo-h, 46px)); height: calc(100dvh - var(--demo-h, 46px)); }

/* --- paginas del acomodo panorama --- */
.gh-cap { display: flex; align-items: center; background: var(--bg); }
.gh-cap-in { max-width: 640px; margin: 0 auto; padding: 0 clamp(24px, 5vw, 60px); display: flex; flex-direction: column; gap: 14px; }
.gh-cap-num { font-family: 'JetBrains Mono', monospace; font-size: 12px; letter-spacing: .2em; color: var(--accent-tinta); }
.gh-cap-t { --tx-esc: 1; --tx-ink: initial; --tx-font: initial; font-family: var(--tx-font, var(--gt-display, 'Instrument Serif'), serif); font-weight: 400; font-size: calc(clamp(34px, 5vw, 72px) * var(--tx-esc)); color: var(--tx-ink, inherit); line-height: 1.02; margin: 0; text-wrap: balance; }
.gh-cap-x { --tx-esc: 1; --tx-ink: initial; --tx-font: initial; font-family: var(--tx-font, var(--gt-display, 'Instrument Serif'), serif); font-style: italic; font-size: calc(clamp(16px, 1.9vw, 21px) * var(--tx-esc)); line-height: 1.6; color: var(--tx-ink, var(--ink2)); margin: 0; }
/* Pliegos de 1-3 fotos: las celdas mandan (mismo criterio que .gt-pgs-pliego) -- el
   aspect-ratio inline del tile se anula y la foto llena su celda con object-fit. */
.gh-pliego { display: grid; gap: var(--gt-gap, 14px); padding: clamp(18px, 4vh, 44px) clamp(18px, 3vw, 44px); }
.gh-n1 { grid-template-columns: 1fr; }
.gh-n2 { grid-template-columns: 1.3fr 1fr; }
.gh-n3 { grid-template-columns: 1.6fr 1fr; grid-template-rows: 1fr 1fr; }
.gh-n3 .gh-t:first-child { grid-row: 1 / -1; }
.lay-panorama .gh-t { aspect-ratio: auto !important; height: 100%; min-height: 0; margin: 0; }
.lay-panorama .gh-t .tile-inner { height: 100%; }
.lay-panorama .gh-t img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* modo "tira": paginas angostas con snap al centro -- la protagonista al centro y las
   vecinas asomando por los costados. */
.gh-una { width: min(72%, 900px); scroll-snap-align: center; display: flex; align-items: center; justify-content: center; padding: clamp(18px, 4vh, 44px) 0; }
.gh-una .gh-t { width: 100%; }
.gh-blq { display: flex; align-items: center; justify-content: center; background: var(--bg); }
.gh-blq-in { max-width: 640px; padding: 0 clamp(24px, 5vw, 60px); }
@container (max-width: 640px) {
  .gh-n2 { grid-template-columns: 1fr; grid-template-rows: 1fr 1fr; }
  .gh-n3 { grid-template-columns: 1fr 1fr; grid-template-rows: 1.4fr 1fr; }
  .gh-n3 .gh-t:first-child { grid-row: auto; grid-column: 1 / -1; }
  .gh-una { width: 86%; }
  .gh-cap-t { font-size: calc(clamp(30px, 9vw, 48px) * var(--tx-esc)); }
}

/* ==================== Bloques de texto entre fotos (diseno.bloques) ====================
   Piezas del fotografo intercaladas en el cuerpo (gtBloque en galeria-temas.js). Cuatro
   FORMAS segun el acomodo -- cada entrada de GT_LAYOUTS declara la suya: "columna" =
   tarjeta dentro del flujo multicol/grid; "banda" = pieza a lo ancho entre grupos;
   "slide" = una diapositiva mas dentro de una pista con snap; "pagina" = pagina propia
   del pager horizontal (.gh-blq, ver el shell dir-h). Misma regla que todo el
   archivo: cero hex, el color sale de los tokens. La paridad exige un selector
   .gt-blq-<tipo> por cada tipo de GAL_BLOQUE_TIPOS (src/db.js): un tipo guardable sin
   CSS es un bloque invisible. */
.gt-blq { color: var(--ink); }
.gt-blq-t { --tx-esc: 1; --tx-ink: initial; --tx-font: initial; font-family: var(--tx-font, var(--gt-display, 'Instrument Serif'), serif); font-weight: 400; font-size: calc(clamp(22px, 2.6vw, 32px) * var(--tx-esc)); color: var(--tx-ink, inherit); line-height: 1.15; margin: 0; text-wrap: balance; }
.gt-blq-x { --tx-esc: 1; --tx-ink: initial; --tx-font: initial; font-family: var(--tx-font, inherit); font-size: calc(15px * var(--tx-esc)); line-height: 1.75; color: var(--tx-ink, var(--ink2)); margin: 0; white-space: pre-line; }
.gt-blq-t + .gt-blq-x { margin-top: 12px; }
/* tipo "cita": misma receta visual que .gt-cita (comillas, italica, display) en escala
   de pieza intercalada; comparte los roles de estilo cita/cita-autor a proposito. */
.gt-blq-cita { --tx-esc: 1; --tx-ink: initial; --tx-font: initial; font-family: var(--tx-font, var(--gt-display, 'Instrument Serif'), serif); font-style: italic; font-size: calc(clamp(22px, 2.8vw, 34px) * var(--tx-esc)); color: var(--tx-ink, inherit); line-height: 1.35; }
.gt-blq-autor { --tx-esc: 1; --tx-ink: initial; --tx-font: initial; font-family: var(--tx-font, 'Instrument Sans', sans-serif); font-size: calc(11px * var(--tx-esc)); letter-spacing: .22em; text-transform: uppercase; color: var(--tx-ink, var(--ink2)); margin-top: 14px; }
/* tipo "separador": UNA palabra a escala de titular. overflow-wrap por si la "palabra"
   trae 24 caracteres sin espacios en un 390. */
.gt-blq-palabra { --tx-esc: 1; --tx-ink: initial; --tx-font: initial; font-family: var(--tx-font, var(--gt-display, 'Instrument Serif'), serif); font-size: calc(clamp(44px, 11vw, 150px) * var(--tx-esc)); line-height: .92; letter-spacing: .02em; color: var(--tx-ink, inherit); text-wrap: balance; overflow-wrap: anywhere; }
.gt-blq-separador { text-align: center; }
/* tipo "titulo" (titulo+parrafo): el bloque editorial base -- siempre alineado a la
   izquierda, tambien como banda (una banda centrada lee a dedicatoria, no a editorial).
   tipo "carta" lo viste de correspondencia: serif italica con mas aire y firma en
   micro-caps. */
.gt-blq-titulo { text-align: left; }
.gt-blq-carta .gt-blq-x { font-family: var(--tx-font, var(--gt-display, 'Instrument Serif'), serif); font-style: italic; font-size: calc(clamp(16px, 1.9vw, 20px) * var(--tx-esc)); line-height: 1.8; }
.gt-blq-firma { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--ink3); margin-top: 16px; }
/* forma "columna": tarjeta de papel dentro del flujo. break-inside evita que el multicol
   la parta; el margen usa --gap (reticula) con --gt-gap (mamposteria) de respaldo. */
.gt-blq-col { background: var(--panel); border: 1px solid var(--line2); padding: clamp(24px, 3vw, 38px); break-inside: avoid; margin: 0 0 var(--gap, var(--gt-gap, 16px)); text-align: left; }
.gt-blq-col.gt-blq-separador { background: none; border: 0; text-align: center; padding: clamp(18px, 2.4vw, 30px) 8px; }
.gt-blq-col .gt-blq-palabra { font-size: calc(clamp(34px, 4.5vw, 72px) * var(--tx-esc)); }
/* En la hoja de contactos la tarjeta ocupa dos celdas: en una sola, un parrafo largo
   desbordaria el cuadro cuadrado. margin 0: el gap de 1px lo pone el grid. */
.gt-cto-grid .gt-blq-col { grid-column: span 2; margin: 0; border: 0; }
/* forma "banda": pieza a lo ancho entre grupos de fotos. */
.gt-blq-banda { max-width: 720px; margin: clamp(40px, 6vw, 80px) auto; padding: 0 22px; }
.gt-blq-banda.gt-blq-cita { text-align: center; }
.gt-blq-banda.gt-blq-separador { max-width: none; }
/* forma "slide": una diapositiva mas dentro de la pista (bandas/riel). align-self:
   stretch para medir contra las fotos vecinas; el texto centra verticalmente. */
.gt-blq-slide { flex: 0 0 auto; width: min(420px, 82vw); align-self: stretch; display: flex; flex-direction: column; justify-content: center; padding: 0 clamp(18px, 3vw, 34px); scroll-snap-align: center; text-align: left; }
.gt-blq-slide .gt-blq-palabra { font-size: calc(clamp(38px, 6vw, 92px) * var(--tx-esc)); }
@container (max-width: 640px) {
  .gt-blq-col { padding: 20px; }
  .gt-blq-banda { margin: 44px auto; }
  .gt-blq-slide { width: min(320px, 82vw); }
}

/* ==================== Tanda editorial 2026-08-28: la generacion "revista de autor" ====
   verso (coro+triptico), horizonte (panorama tira+marco), titular/anuario (rota+rotulo/
   cabecera), tablero (disperso+mesa), velada (capitulos ovalo+flotante), cartel (paleta).
   Misma ley del archivo: cero #RRGGBB, todo por tokens; solo rgba() de velos sobre foto. */

/* ---------- acomodo "coro" (verso) ----------
   Multicol de 3 columnas ANCHAS con aire generoso: las tarjetas de texto (.gt-blq-col)
   son piezas iguales a las fotos. gt-coro-c2 = 2 columnas cuando hay pocas fotos
   (decidido por conteo en el html, no por ancho). */
/* display:grid y NO columns: mismo motivo que .grid/.gt-mos -- ver el comentario de
   mosaico arriba. Aqui SI hay align-items:start porque .gt-coro-t conserva el
   aspect-ratio real de cada foto (como el .tile de Clasico), asi que fotos verticales y
   horizontales en la misma fila dejan huecos abajo de las mas cortas -- el mismo
   tradeoff aceptado en Clasico y en el grid del editor. */
.gt-coro { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(28px, 3.5vw, 48px); align-items: start; max-width: 1240px; margin: 0 auto; padding: clamp(30px, 5vw, 64px) clamp(18px, 4vw, 48px) 80px; }
.gt-coro-c2 { grid-template-columns: repeat(2, 1fr); }
.lay-coro .gt-coro-t { width: 100%; break-inside: avoid; }
.gt-coro-carta .gt-blq-cita { font-size: calc(clamp(19px, 2vw, 26px) * var(--tx-esc)); }
@container (max-width: 1000px) { .gt-coro { grid-template-columns: repeat(2, 1fr); } }
@container (max-width: 640px) { .gt-coro, .gt-coro-c2 { grid-template-columns: 1fr; } }

/* ---------- acomodo "rota" (titular / anuario) ----------
   Grid suizo de 12 columnas con ciclo determinista (grid-column inline). Los margenes
   escalonados (+-vh) y los huecos son la retorica; en angosto el ciclo colapsa a dos
   por fila y el descuadre se apaga (los !important le ganan al style inline del ciclo,
   que es exactamente lo que se quiere aqui). */
.gt-rot { max-width: 1360px; margin: 0 auto; padding: clamp(30px, 5vw, 70px) clamp(18px, 4vw, 54px) 80px; }
.gt-rot-cap + .gt-rot-cap { margin-top: clamp(50px, 8vw, 110px); }
.gt-rot-hd { display: flex; align-items: baseline; gap: 14px; margin-bottom: clamp(20px, 3vw, 34px); }
.gt-rot-hd-t { --tx-esc: 1; --tx-ink: initial; --tx-font: initial; font-family: var(--tx-font, inherit); font-size: calc(11px * var(--tx-esc)); letter-spacing: .26em; text-transform: uppercase; font-weight: 600; color: var(--tx-ink, inherit); }
.gt-rot-lead { flex: 1; border-bottom: 1px dotted var(--line); }
.gt-rot-hd-n { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--ink2); }
/* El separador GIGANTE del anuario: el nombre del capitulo a escala de viewport. */
.gt-rot-gig { margin-bottom: clamp(24px, 4vw, 44px); }
.gt-rot-gig-mini { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; letter-spacing: .22em; color: var(--accent-tinta); margin-bottom: 8px; }
.gt-rot-gig-t { --tx-esc: 1; --tx-ink: initial; --tx-font: initial; font-family: var(--tx-font, var(--gt-display, 'Instrument Serif'), serif); font-weight: 400; font-size: calc(clamp(56px, 12vw, 190px) * var(--tx-esc)); line-height: .85; letter-spacing: -.02em; text-transform: uppercase; color: var(--tx-ink, inherit); margin: 0; text-wrap: balance; hyphens: none; }
.gt-rot-gig-x { --tx-esc: 1; --tx-ink: initial; --tx-font: initial; font-family: var(--tx-font, inherit); font-size: calc(15px * var(--tx-esc)); line-height: 1.7; color: var(--tx-ink, var(--ink2)); max-width: 62ch; margin: 16px 0 0; }
.gt-rot-grid { position: relative; display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--gt-gap, 18px); row-gap: calc(var(--gt-gap, 18px) * 2); align-items: start; }
.gt-rot-guias::before, .gt-rot-guias::after { content: ""; position: absolute; top: 0; bottom: 0; border-left: 1px dotted var(--line); pointer-events: none; }
.gt-rot-guias::before { left: 33.33%; }
.gt-rot-guias::after { left: 66.66%; }
.gt-rot-f { margin: 0; min-width: 0; }
.lay-rota .gt-rot-t { margin: 0; }
.gt-rot-pie { display: flex; gap: 10px; align-items: baseline; padding-top: 7px; font-size: 10px; letter-spacing: .24em; text-transform: uppercase; color: var(--ink2); }
.gt-rot-nn { font-family: 'JetBrains Mono', monospace; letter-spacing: .1em; color: var(--accent-tinta); }
@container (max-width: 640px) {
  .gt-rot-grid { grid-template-columns: repeat(2, 1fr); }
  .gt-rot-f { grid-column: auto !important; margin-top: 0 !important; }
  .gt-rot-guias::before, .gt-rot-guias::after { content: none; }
  /* Medido a 390: "PREPARATIVOS" (12 letras, uppercase) a 17vw=66px pedia 487px contra
     339 utiles -- cortado sin aviso por overflow-x:clip. 13vw=51px + overflow-wrap. */
  .gt-rot-gig-t { font-size: calc(clamp(32px, 13vw, 64px) * var(--tx-esc)); overflow-wrap: anywhere; }
}

/* ---------- acomodo "disperso" (tablero) ----------
   Mesas de 7 fotos en grid sparse de 12 columnas, rotaciones deterministas y la palabra
   del capitulo en VERTICAL en el canal izquierdo (writing-mode, el patron probado de
   .gt-tri-title). La nota oscura ocupa uno de los huecos. content-visibility por mesa:
   800 fotos son ~115 mesas. */
.gt-dsp { max-width: 1280px; margin: 0 auto; padding: clamp(36px, 6vw, 80px) clamp(16px, 3vw, 44px) 80px; }
.gt-dsp-mesa { position: relative; padding-left: clamp(30px, 4vw, 54px); content-visibility: auto; }
.gt-dsp-mesa + .gt-dsp-mesa { margin-top: clamp(60px, 9vw, 130px); }
.gt-dsp-vert { position: absolute; left: 0; top: 8px; writing-mode: vertical-rl; transform: rotate(180deg); font-size: 10px; letter-spacing: .32em; text-transform: uppercase; color: var(--ink3); white-space: nowrap; }
.gt-dsp-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(14px, 2vw, 26px); row-gap: clamp(24px, 3.5vw, 48px); align-items: start; }
.gt-dsp-f { min-width: 0; }
.lay-disperso .gt-dsp-t { margin: 0; box-shadow: 0 14px 40px -18px rgba(0, 0, 0, .35); }
.gt-dsp-nota { grid-column: 7 / span 4; align-self: center; background: var(--dark); color: var(--dark-ink); padding: clamp(20px, 2.6vw, 34px); max-width: 34ch; }
.gt-dsp-nota-t { --tx-esc: 1; --tx-ink: initial; --tx-font: initial; font-family: var(--tx-font, var(--gt-display, 'Instrument Serif'), serif); font-size: calc(clamp(18px, 2vw, 24px) * var(--tx-esc)); line-height: 1.2; color: var(--tx-ink, inherit); margin-bottom: 10px; }
.gt-dsp-nota-x { --tx-esc: 1; --tx-ink: initial; --tx-font: initial; font-family: var(--tx-font, inherit); font-size: calc(13.5px * var(--tx-esc)); line-height: 1.7; color: var(--tx-ink, inherit); opacity: .85; }
@container (max-width: 640px) {
  .gt-dsp-mesa { padding-left: 0; }
  .gt-dsp-vert { position: static; writing-mode: horizontal-tb; transform: none; display: block; margin-bottom: 14px; }
  .gt-dsp-grid { grid-template-columns: repeat(2, 1fr); }
  .gt-dsp-f { grid-column: auto !important; transform: none !important; }
  /* transform:none como sus hermanas .gt-dsp-f: la rotacion de la nota sobrevivia al
     colapso movil (inline sin !important) y era la unica pieza girada de la mesa. */
  .gt-dsp-nota { grid-column: 1 / -1; max-width: none; transform: none !important; }
}

/* ---------- portada "rotulo" (titular) ----------
   El titular manda por AREA sobre papel; la foto elegida es la tira inferior, como la
   tira de prueba de una imprenta. */
.gt-rtl-cover { position: relative; min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; background: var(--bg); color: var(--ink); overflow: hidden; }
.gt-rtl-in { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: clamp(16px, 2.4vw, 30px); padding: clamp(30px, 5vw, 64px) clamp(18px, 4vw, 54px) clamp(20px, 3vw, 40px); min-width: 0; }
.gt-rtl-eyebrow { --tx-esc: 1; --tx-ink: initial; --tx-font: initial; font-family: var(--tx-font, inherit); font-size: calc(11px * var(--tx-esc)); letter-spacing: .3em; text-transform: uppercase; font-weight: 600; color: var(--tx-ink, var(--ink2)); }
.gt-rtl-title { --tx-esc: 1; --tx-ink: initial; --tx-font: initial; font-family: var(--tx-font, var(--gt-display, 'Instrument Serif'), serif); font-weight: 400; font-size: calc(clamp(58px, 13.5vw, 230px) * var(--tx-esc)); line-height: .84; letter-spacing: -.03em; text-transform: uppercase; color: var(--tx-ink, inherit); margin: 0; hyphens: none; }
.gt-rtl-larga { font-size: calc(clamp(44px, 9.5vw, 160px) * var(--tx-esc)); }
.gt-rtl-title i { font-style: italic; text-transform: none; color: var(--accent-tinta); }
.gt-rtl-linea { display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; border-top: 1px dotted var(--line); padding-top: 12px; font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase; color: var(--ink2); }
/* MISMO perfil que .gt-banda-alta (la banda probada del motor): 1200px de tope y
   clamp(240,42vh,460). Historia, porque se corrigio dos veces: se calibro primero con
   las fotos HORIZONTALES del muestrario y con un retrato vertical dejaba ver 7-19% de
   la foto; el primer ajuste (1400px / 36vh) subio a 18-22% en monitores grandes pero
   seguia en 13.5-16.7% en PORTATILES de 768-810px de alto, que son la mayoria. Con el
   perfil de banda el peor caso (1366x768, foto 2:3) sube a ~18% y el tipico (1440x900)
   a ~21-25%. El gesto de "tira de imprenta" no lo daba la altura sino el resto de la
   portada (titular macro + linea de datos + filete), que no cambia. */
.gt-rtl-foto { flex: none; width: 100%; max-width: 1200px; margin: 0 auto; height: clamp(240px, 42vh, 460px); background-size: cover; background-repeat: no-repeat; background-position: center; }
@container (max-width: 640px) {
  /* Medido a 390 (ancho util 354px): a 16vw=62px un nombre de 11 letras pedia 388px y
     se RECORTABA en silencio (hyphens:none + overflow-x:clip del stage). 12vw=47px con
     overflow-wrap como ultima red para el nombre compuesto largo. */
  .gt-rtl-title { font-size: calc(clamp(34px, 12vw, 58px) * var(--tx-esc)); overflow-wrap: anywhere; }
  .gt-rtl-larga { font-size: calc(clamp(30px, 10vw, 48px) * var(--tx-esc)); }
  .gt-rtl-linea { gap: 8px; letter-spacing: .14em; }
}

/* ---------- portada "flotante" (velada) ----------
   Tarjeta de papel flotando sobre la foto a sangre: el unico texto con contraste
   GARANTIZADO sobre cualquier foto sin partirla. El velo se pinta siempre. */
.gt-flo-cover { position: relative; min-height: 100vh; min-height: 100svh; display: flex; align-items: center; overflow: hidden; background: var(--dark); }
.gt-flo-velo { position: absolute; inset: 0; z-index: 1; background: rgba(0, 0, 0, .18); }
.gt-flo-tarjeta { position: relative; z-index: 2; background: var(--panel); color: var(--ink); max-width: 420px; margin-left: clamp(18px, 8vw, 120px); margin-right: 18px; padding: clamp(28px, 3.4vw, 46px); border: 1px solid var(--line); box-shadow: 0 30px 70px -30px rgba(0, 0, 0, .45); display: flex; flex-direction: column; gap: 14px; }
.gt-flo-eyebrow { --tx-esc: 1; --tx-ink: initial; --tx-font: initial; font-family: var(--tx-font, inherit); font-size: calc(10.5px * var(--tx-esc)); letter-spacing: .3em; text-transform: uppercase; font-weight: 600; color: var(--tx-ink, var(--accent-tinta)); }
.gt-flo-title { --tx-esc: 1; --tx-ink: initial; --tx-font: initial; font-family: var(--tx-font, var(--gt-display, 'Instrument Serif'), serif); font-weight: 400; font-size: calc(clamp(32px, 3.6vw, 54px) * var(--tx-esc)); line-height: 1.05; color: var(--tx-ink, inherit); margin: 0; text-wrap: balance; padding-bottom: .05em; }
.gt-flo-title i { font-style: italic; color: var(--accent-tinta); }
.gt-flo-rule { height: 1px; width: 54px; background: var(--line2); }
.gt-flo-sub { font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--ink2); }
@container (max-width: 640px) {
  .gt-flo-cover { align-items: flex-end; }
  .gt-flo-tarjeta { margin: 0 16px clamp(24px, 8vw, 48px); max-width: none; width: calc(100% - 32px); }
}

/* ---------- portada "mesa" (tablero) ----------
   Cinco fotos en constelacion FIJA sobre papel + tarjeta oscura del nombre + kicker
   vertical. Posiciones deliberadas, no ruido: el editor debe poder reproducirla. */
.gt-mes-cover { position: relative; min-height: 100vh; min-height: 100svh; background: var(--bg); color: var(--ink); overflow: hidden; }
.gt-mes-vert { position: absolute; left: clamp(10px, 1.6vw, 22px); top: clamp(24px, 4vw, 48px); z-index: 2; writing-mode: vertical-rl; transform: rotate(180deg); font-size: 10px; letter-spacing: .32em; text-transform: uppercase; color: var(--ink3); }
.gt-mes-campo { position: absolute; inset: 0; }
.gt-mes-p { position: absolute; overflow: hidden; box-shadow: 0 16px 44px -20px rgba(0, 0, 0, .4); }
.gt-mes-p img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gt-mes-p0 { left: 8%; top: 8%; width: min(34%, 460px); aspect-ratio: 4/5; transform: rotate(-1.2deg); }
.gt-mes-p1 { right: 6%; top: 4%; width: min(24%, 320px); aspect-ratio: 1/1; transform: rotate(1.4deg); }
.gt-mes-p2 { left: 30%; bottom: 6%; width: min(26%, 340px); aspect-ratio: 3/2; transform: rotate(.8deg); }
.gt-mes-p3 { left: 4%; bottom: 12%; width: min(18%, 240px); aspect-ratio: 5/7; transform: rotate(1deg); }
.gt-mes-p4 { right: 10%; bottom: 22%; width: min(20%, 260px); aspect-ratio: 4/3; transform: rotate(-1.5deg); }
.gt-mes-tarjeta { position: absolute; right: clamp(16px, 6vw, 90px); top: 42%; z-index: 3; background: var(--dark); color: var(--dark-ink); padding: clamp(22px, 2.8vw, 38px) clamp(24px, 3vw, 44px); transform: rotate(-1deg); display: flex; flex-direction: column; gap: 10px; max-width: min(70vw, 460px); box-shadow: 0 24px 60px -24px rgba(0, 0, 0, .5); }
.gt-mes-title { --tx-esc: 1; --tx-ink: initial; --tx-font: initial; font-family: var(--tx-font, var(--gt-display, 'Instrument Serif'), serif); font-weight: 400; font-size: calc(clamp(26px, 3vw, 44px) * var(--tx-esc)); line-height: 1.08; color: var(--tx-ink, inherit); margin: 0; text-wrap: balance; padding-bottom: .05em; }
.gt-mes-title i { font-style: italic; color: var(--accent-dark); }
.gt-mes-sub { font-size: 10.5px; letter-spacing: .26em; text-transform: uppercase; opacity: .72; }
@container (max-width: 640px) {
  .gt-mes-cover { min-height: 0; }
  .gt-mes-vert { display: none; }
  .gt-mes-campo { position: static; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: clamp(20px, 6vw, 40px) 16px 20px; }
  .gt-mes-p { position: static; width: auto !important; transform: none !important; aspect-ratio: 4/5 !important; }
  .gt-mes-p0 { grid-column: 1 / -1; aspect-ratio: 16/10 !important; }
  /* grid-column:1/-1 igual que .gt-mes-p0: la tarjeta es hija DIRECTA del campo, que en
     movil pasa a grid de 2 columnas -- sin esto caia en UNA celda (187px medidos) y el
     nombre se apretaba en ~94px de caja de texto. Mismo patron que el bug de rota. */
  .gt-mes-tarjeta { position: static; transform: none; max-width: none; margin: 4px 16px 24px; grid-column: 1 / -1; }
}

/* ---------- portada "recortes" (mural) ----------
   SIETE fotos en constelacion FIJA sobre papel, ENCIMADAS a proposito (z-index por hueco,
   deliberado: el editor debe poder reproducirla), sin tarjeta ni titulo, y tres cuadritos
   de color de la paleta. Es "mesa" con dos huecos mas y sin texto. Las piezas altas van al
   frente; las que quedan debajo solo se tapan por su borde inferior o lateral, nunca por
   arriba -- en la portada no hay botones, pero asi la composicion lee igual que el cuerpo. */
.gt-rec-cover { position: relative; min-height: 100vh; min-height: 100svh; background: var(--bg); color: var(--ink); overflow: hidden; }
.gt-rec-campo { position: absolute; inset: 0; }
.gt-rec-p { position: absolute; overflow: hidden; box-shadow: 0 14px 40px -20px rgba(0, 0, 0, .35); }
.gt-rec-p img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gt-rec-p0 { left: 50%; top: 7%; width: min(30%, 420px); aspect-ratio: 4/5; transform: rotate(.6deg); z-index: 1; }
.gt-rec-p1 { left: 20%; top: 22%; width: min(19%, 260px); aspect-ratio: 3/4; transform: rotate(-1.2deg); z-index: 2; }
.gt-rec-p2 { left: 41%; top: 36%; width: min(21%, 290px); aspect-ratio: 5/6; transform: rotate(.8deg); z-index: 3; }
.gt-rec-p3 { left: 14%; bottom: 8%; width: min(38%, 520px); aspect-ratio: 3/2; transform: rotate(-.5deg); z-index: 2; }
.gt-rec-p4 { right: 20%; bottom: 14%; width: min(22%, 300px); aspect-ratio: 4/5; transform: rotate(1.1deg); z-index: 3; }
.gt-rec-p5 { left: 52%; bottom: 3%; width: min(17%, 230px); aspect-ratio: 1/1; transform: rotate(-.9deg); z-index: 4; }
.gt-rec-p6 { right: 5%; top: 30%; width: min(14%, 190px); aspect-ratio: 4/5; transform: rotate(1.6deg); z-index: 1; }
/* Los cuadritos: acento / oscuro / tinta terciaria. Rellenos, no texto: por eso --accent
   crudo y no --accent-tinta (mismo criterio que la chincheta de corcho). */
.gt-rec-sw { position: absolute; width: clamp(22px, 3vw, 40px); aspect-ratio: 1; z-index: 5; }
.gt-rec-sw0 { left: 12%; top: 26%; background: var(--accent); }
.gt-rec-sw1 { right: 12%; top: 10%; background: var(--dark); }
/* --ink2 y no --ink3: la terciaria es 45% de tinta sobre el fondo y como BLOQUE de color
   (no como texto de apoyo, que es para lo que existe) se pierde -- 1.23:1 medido en tema
   oscuro. La secundaria (64%) si se sostiene en los dos lados. */
.gt-rec-sw2 { right: 14%; bottom: 10%; background: var(--ink2); }
.gt-rec-firma { position: absolute; left: clamp(16px, 4vw, 54px); bottom: clamp(14px, 2.6vw, 30px); z-index: 6; font-family: var(--gt-mono, ui-monospace, monospace); font-size: 11px; letter-spacing: .04em; color: var(--ink3); }
/* Movil: esta portada NO se aplana a una reticula, a diferencia de "mesa" y del resto del
   motor. La referencia de la plantilla es justamente una captura de TELEFONO -- aplanarla
   la convierte en otra plantilla. Se conservan las absolutas, el encimado y los cuadritos;
   lo unico que cambia son las proporciones, porque el lienzo pasa de apaisado a vertical:
   las piezas ganan ancho (26-62% contra 14-38%) y bajan de 7 a 6 (la mas chica se retira:
   medida a 375px quedaba en ~48px de lado, mas mancha que foto). El hueco 7 sigue
   existiendo en el editor y en escritorio; solo no se pinta aqui. */
@container (max-width: 640px) {
  .gt-rec-p0 { left: 44%; top: 8%; width: 44%; }
  .gt-rec-p1 { left: 8%; top: 26%; width: 38%; }
  .gt-rec-p2 { left: 38%; top: 42%; width: 38%; }
  .gt-rec-p3 { left: 6%; bottom: 14%; width: 52%; }
  .gt-rec-p4 { right: 6%; bottom: 26%; width: 32%; }
  .gt-rec-p5 { left: 30%; bottom: 3%; width: 30%; }
  .gt-rec-p6 { display: none; }
  .gt-rec-sw { width: 20px; }
  .gt-rec-sw0 { left: 10%; top: 13%; }
  .gt-rec-sw1 { right: 4%; top: 37%; }
  .gt-rec-sw2 { right: 12%; bottom: 8%; }
  .gt-rec-firma { left: 16px; bottom: 12px; }
}

/* ---------- acomodo "mural" (encimado sobre disperso) ----------
   Hereda TODO .gt-dsp; solo agrega el hover que levanta la pieza tapada (para que sus
   botones .tfav/.tsel vuelvan al frente cuando el cursor la busca) y el cuadrito por mesa.
   El margin-top negativo y el z-index de cada pieza vienen inline desde GT_MURAL_POS. */
.gt-dsp-mural .gt-dsp-f { position: relative; }
.gt-dsp-mural .gt-dsp-f:hover, .gt-dsp-mural .gt-dsp-f:focus-within { z-index: 20 !important; }
.gt-dsp-mural .gt-dsp-grid { row-gap: clamp(30px, 4.5vw, 64px); }
.gt-dsp-sw { grid-column: 12 / span 1; align-self: end; justify-self: end; width: clamp(18px, 2vw, 30px); aspect-ratio: 1; }
.gt-dsp-sw0 { background: var(--accent); }
.gt-dsp-sw1 { background: var(--dark); }
.gt-dsp-sw2 { background: var(--ink2); }
/* Movil: mismo criterio que la portada -- mural NO cae a las dos columnas planas de
   disperso. Se conserva el grid de 12 y el encimado; lo que cambia son los tramos (mucho
   mas anchos: 5-9 columnas contra 3-6) y las subidas, que pasan a vh chicos. La rotacion
   SI se plancha (la hereda del bloque de disperso): en un lienzo de 343px utiles el giro
   empuja las piezas contra el borde del papel, y la referencia de la plantilla tampoco la
   tiene. Las colocaciones van por nth-child y no por la tabla de JS porque en movil la
   composicion es otra: el mismo racimo de 12 columnas anchas no cabe.
   El invariante del encimado sigue en pie y aqui importa MAS que en escritorio, porque no
   hay hover que rescate a la pieza tapada: cada pieza que sube lleva z-index mayor que la
   anterior, asi que solo puede cubrir el BORDE INFERIOR de la de arriba, nunca su franja
   superior (los 48px donde viven .tfav/.tsel). Medido en 375x812: 3 encimados reales por
   mesa, cero franjas superiores tapadas. */
@container (max-width: 640px) {
  .gt-dsp-mural .gt-dsp-grid { grid-template-columns: repeat(12, 1fr); gap: 8px; row-gap: 12px; }
  .gt-dsp-mural .gt-dsp-f:nth-child(1) { grid-column: 1 / span 9 !important; margin-top: 0 !important; z-index: 2 !important; }
  .gt-dsp-mural .gt-dsp-f:nth-child(2) { grid-column: 6 / span 7 !important; margin-top: -4vh !important; z-index: 3 !important; }
  .gt-dsp-mural .gt-dsp-f:nth-child(3) { grid-column: 1 / span 5 !important; margin-top: -2vh !important; z-index: 4 !important; }
  .gt-dsp-mural .gt-dsp-f:nth-child(4) { grid-column: 4 / span 9 !important; margin-top: -3vh !important; z-index: 5 !important; }
  .gt-dsp-mural .gt-dsp-f:nth-child(5) { grid-column: 1 / span 6 !important; margin-top: -2vh !important; z-index: 6 !important; }
  .gt-dsp-mural .gt-dsp-f:nth-child(6) { grid-column: 7 / span 6 !important; margin-top: -3vh !important; z-index: 7 !important; }
  .gt-dsp-mural .gt-dsp-f:nth-child(7) { grid-column: 2 / span 8 !important; margin-top: -2vh !important; z-index: 8 !important; }
  .gt-dsp-sw { display: block; grid-column: 11 / span 2; width: 16px; }
}

/* ---------- el marco de maquina de escribir (horizonte, layoutOpts.marco) ----------
   Tres etiquetas absolutas sobre .scroll (la cuarta esquina es el contador). Ornamento:
   pointer-events none; en angosto solo sobrevive la superior izquierda. */
.gh-marco { pointer-events: none; }
.gh-marco-e { position: absolute; z-index: 5; font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--ink2); }
.gh-marco-ai { left: 16px; top: calc(var(--gh-marco-top, 0px) + 10px); }
.gh-marco-ad { right: 16px; top: calc(var(--gh-marco-top, 0px) + 10px); }
.gh-marco-bi { left: 16px; bottom: calc(12px + env(safe-area-inset-bottom)); }
@container (max-width: 640px) { .gh-marco-ad, .gh-marco-bi { display: none; } }

/* ---------- flourishes de la tanda ---------- */
/* velada: el numero romano del capitulo en capsula ovalada de contorno, y encabezados
   centrados. El ovalo es tipografico, jamas una mascara sobre fotos. */
.gt-rev-ovalo { display: inline-block; padding: 8px 22px; border: 1px solid var(--line); border-radius: 999px; }
.gt-rev-centrado .gt-rev-caphd { justify-content: center; }
.gt-rev-centrado .gt-rev-caphd .gt-rev-rule { display: none; }
.gt-rev-centrado .gt-rev-capt, .gt-rev-centrado .gt-rev-capx { margin-left: auto; margin-right: auto; text-align: center; }

/* ================= "gaceta": el periodico =================
   Dispositivos de diario, todos tipograficos y todos con tokens: filetes (uno fino y uno
   doble), corondeles entre columnas de lectura, capitulares y pies de foto. Nada de velos ni
   fotos a sangre -- en un periodico la foto es una pieza SOBRE el papel.
   Cero hex propios: la paleta entera viene de escribirTokens() (la cerradura de
   paridad-motor-galeria lo vigila). */
.gt-gac { max-width: 1180px; margin: 0 auto; padding: 0 clamp(16px, 4vw, 44px); }
.gt-gac-pliego { padding-top: clamp(26px, 5vh, 54px); }
.gt-gac-pliego + .gt-gac-pliego { margin-top: clamp(30px, 6vh, 62px); }
.gt-gac-cab { display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  border-top: 3px double var(--ink); border-bottom: 1px solid var(--line); padding: 8px 0; margin-bottom: clamp(18px, 3vh, 30px); }
.gt-gac-sec { --tx-esc: 1; --tx-ink: initial; --tx-font: initial;
  font-family: var(--tx-font, inherit); font-size: calc(11.5px * var(--tx-esc)); font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase; color: var(--tx-ink, var(--ink)); }
.gt-gac-n { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink3); }
/* La nota principal: foto grande y, al lado, el titular con su cronica a dos columnas. */
.gt-gac-lede { display: grid; grid-template-columns: 7fr 5fr; gap: clamp(20px, 3vw, 40px); align-items: start; }
.gt-gac-lede-foto { margin: 0; }
.gt-gac-lede-foto .tile { max-height: 72vh; }
.gt-gac-titular { --tx-esc: 1; --tx-ink: initial; --tx-font: initial;
  font-family: var(--tx-font, var(--gt-display, inherit)); font-weight: 600; line-height: 1.05;
  font-size: calc(clamp(26px, 3.4vw, 50px) * var(--tx-esc)); color: var(--tx-ink, var(--ink)); margin: 0 0 14px; }
.gt-gac-cronica { --tx-esc: 1; --tx-ink: initial; --tx-font: initial;
  font-family: var(--tx-font, inherit); font-size: calc(14.5px * var(--tx-esc)); line-height: 1.62;
  color: var(--tx-ink, var(--ink2)); columns: 2; column-gap: 26px; column-rule: 1px solid var(--line);
  text-align: justify; hyphens: auto; }
/* La capitular: el gesto mas reconocible de una pagina impresa. Si el fotografo empieza su
   cronica con comillas, la capitular toma la comilla -- los periodicos hacen exactamente eso. */
.gt-gac-cronica::first-letter { float: left; font-family: var(--gt-display, inherit); font-size: 3.2em;
  line-height: .82; padding: .04em .1em 0 0; color: var(--accent-tinta, var(--accent)); }
/* El resto del pliego, sin corondel: display:grid y no columns, mismo motivo que
   .grid/.gt-mos/.gt-coro (ver el comentario de Mosaico) -- con `columns`, aunque aqui el
   alcance es solo UN pliego (no toda la galeria), las fotos de ese capitulo igual se leian
   salteadas fila por fila. El corondel (column-rule) se quita del todo en vez de rehacerse
   con otra tecnica: decision de Daniel, no un intento de imitarlo con border-left. Las
   fotos no se parten entre celdas (break-inside, ya sin efecto en grid pero inofensivo) y
   cada bloque de texto del fotografo entra como un articulo mas. */
.gt-gac-flujo { margin-top: clamp(22px, 4vh, 40px); display: grid; grid-template-columns: repeat(4, 1fr);
  gap: clamp(14px, 2vw, 22px) clamp(16px, 2.2vw, 30px); align-items: start; }
.gt-gac-pocas .gt-gac-flujo { grid-template-columns: repeat(2, 1fr); }
.gt-gac-flujo > * { break-inside: avoid; }
.gt-gac-art { border-top: 1px solid var(--line); padding-top: 10px; }
.gt-gac-art-lede { margin-top: 18px; }
/* La clase .cover base pinta fondo --dark y texto --dark-ink: es lo correcto para las
   portadas que van a sangre sobre una foto, y lo contrario de lo que necesita un periodico.
   Sin estas dos lineas el papel se veia negro y los nombres, que van en tinta, desaparecian
   dentro de el -- medido: la cabecera existia en el DOM, en tinta, sobre un fondo del mismo
   valor exacto. Tambien se suelta el min-height:100vh: una primera plana termina donde
   termina su contenido, no una pantalla despues. */
.gt-gac-cover { background: var(--bg); color: var(--ink); min-height: 0; display: block;
  padding: clamp(30px, 7vh, 76px) clamp(16px, 4vw, 44px) clamp(20px, 4vh, 44px); }
.gt-gac-cover-in { max-width: 1100px; margin: 0 auto; }
.gt-gac-cintillo { display: flex; justify-content: space-between; gap: 14px;
  border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); padding: 6px 0;
  font-size: 11px; letter-spacing: .2em; text-transform: uppercase; font-weight: 600; }
.gt-gac-cintillo span { --tx-esc: 1; --tx-ink: initial; --tx-font: initial;
  font-family: var(--tx-font, inherit); font-size: calc(11px * var(--tx-esc)); color: var(--tx-ink, var(--ink)); }
.gt-gac-cabecera { --tx-esc: 1; --tx-ink: initial; --tx-font: initial;
  font-family: var(--tx-font, var(--gt-display, inherit)); font-weight: 700; text-align: center;
  font-size: calc(clamp(38px, 8vw, 100px) * var(--tx-esc)); line-height: 1.02; letter-spacing: -.01em;
  color: var(--tx-ink, var(--ink)); margin: clamp(14px, 2.6vh, 26px) 0 clamp(12px, 2vh, 20px);
  hyphens: none; overflow-wrap: anywhere; }
/* Con nombres largos NO se encoge la cabecera hasta que quepa en una linea: se reparte en
   tres (nombre / & / nombre) conservando el cuerpo grande, que es lo que hace un periodico
   de verdad. Medido a 390: encogiendo, "Guillermina & Maximiliano" quedaba en 28px y la
   cabecera medía 29px de alto -- una primera plana en la que el nombre no es lo primero
   que se ve no es una primera plana. */
.gt-gac-cabecera-larga { font-size: calc(clamp(34px, 9vw, 76px) * var(--tx-esc)); line-height: 1.08; }
.gt-gac-cabecera-larga .gt-gac-amp { font-size: .62em; display: inline-block; margin: -.06em 0; }
.gt-gac-amp { font-style: italic; color: var(--accent-tinta, var(--accent)); font-weight: 400; }
.gt-gac-filete { border-top: 4px double var(--ink); }
.gt-gac-dateline { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px 18px; padding: 9px 0;
  border-bottom: 1px solid var(--line); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink2); }
.gt-gac-plana { margin: clamp(18px, 3vh, 30px) 0 0; }
.gt-gac-plana-foto { width: 100%; aspect-ratio: 16/10; background-size: cover; background-position: 50% 50%;
  border: 1px solid var(--line); }
.gt-gac-pie { --tx-esc: 1; --tx-ink: initial; --tx-font: initial;
  font-family: var(--tx-font, inherit); font-size: calc(12px * var(--tx-esc)); font-style: italic;
  color: var(--tx-ink, var(--ink3)); border-top: 1px solid var(--line); margin-top: 8px; padding-top: 6px; }
@container (max-width: 1000px) { .gt-gac-flujo { grid-template-columns: repeat(3, 1fr); } }
@container (max-width: 760px) {
  .gt-gac-lede { grid-template-columns: 1fr; }
  .gt-gac-flujo { grid-template-columns: repeat(2, 1fr); }
}
@container (max-width: 640px) {
  .gt-gac-flujo, .gt-gac-pocas .gt-gac-flujo { grid-template-columns: 1fr; }
  /* Justificar a UNA columna abre rios de blanco en espanol: a esta anchura se alinea a la
     izquierda, que es lo que hacen los propios diarios en su edicion movil. */
  .gt-gac-cronica { columns: 1; column-rule: 0; text-align: left; }
  .gt-gac-lede-foto .tile { max-height: 62vh; }
  .gt-gac-plana-foto { aspect-ratio: 4/3; }
}

/* ================= "proyector": la sala a oscuras =================
   Una imagen ocupando la oscuridad, y nada mas. El letterbox NO es una caja impuesta: sale
   de la proporcion de cada foto contra la pantalla (max-width/max-height + contain), asi que
   una vertical llena el alto con oscuridad a los lados y NUNCA se recorta nada. */
.gt-pry-cuadro, .gt-pry-inter { position: relative; min-height: 100svh; display: flex;
  align-items: center; justify-content: center; padding: clamp(14px, 3vw, 40px);
  /* Con 800 fotos son 800 pantallas: sin esto el navegador compone todas de golpe. El alto
     estimado va en px y no en vh -- contain-intrinsic-size no acepta unidades de viewport. */
  content-visibility: auto; contain-intrinsic-size: auto 800px; }
/* El .tile base es width:100% con la foto en absolute y su alto derivado del aspect-ratio
   inline. Aqui se invierte: se fija el ALTO y el ancho lo deriva la proporcion de la foto --
   asi cada cuadro se ajusta a la pantalla como una proyeccion, y una vertical llena el alto
   dejando oscuridad a los lados. max-width acota las panoramicas (el navegador baja el alto
   manteniendo el ratio). `width:auto` a secas dejaba el tile en 0x0: medido. */
.gt-pry-cuadro .tile { width: auto; height: min(84svh, 84vh); max-width: 92vw; margin: 0; }
.gt-pry-n { position: absolute; right: clamp(14px, 3vw, 34px); bottom: clamp(14px, 3vh, 30px);
  font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 10.5px; letter-spacing: .16em;
  color: var(--ink3); }
/* El intertitulo del cine mudo: marco doble y el acto en versalitas. */
.gt-pry-marco { max-width: min(720px, 84vw); text-align: center; padding: clamp(26px, 5vh, 54px) clamp(22px, 5vw, 56px);
  border: 3px double var(--line2); }
.gt-pry-acto { --tx-esc: 1; --tx-ink: initial; --tx-font: initial;
  font-family: var(--tx-font, inherit); font-size: calc(10.5px * var(--tx-esc)); letter-spacing: .3em;
  text-transform: uppercase; color: var(--tx-ink, var(--accent-tinta, var(--accent))); margin-bottom: 14px; }
.gt-pry-titulo { --tx-esc: 1; --tx-ink: initial; --tx-font: initial;
  font-family: var(--tx-font, var(--gt-display, inherit)); font-style: italic; font-weight: 400;
  font-size: calc(clamp(26px, 5vw, 62px) * var(--tx-esc)); line-height: 1.1; color: var(--tx-ink, var(--ink)); margin: 0; }
.gt-pry-tx { --tx-esc: 1; --tx-ink: initial; --tx-font: initial;
  font-family: var(--tx-font, inherit); font-size: calc(14px * var(--tx-esc)); line-height: 1.65;
  color: var(--tx-ink, var(--ink2)); margin: 16px auto 0; max-width: 52ch; }
.gt-pry-inter-blq { min-height: 80svh; }
.gt-pry-inter-blq .gt-blq { max-width: min(680px, 84vw); text-align: center; }
/* "Dejar correr": fijo, con margen inferior propio para no caer sobre los controles de la
   foto (favorita/seleccion viven arriba a la derecha del tile, pero el pulgar llega aqui). */
.gt-pry-correr { position: fixed; right: clamp(14px, 3vw, 30px); bottom: clamp(16px, 3vh, 28px);
  z-index: 60; display: inline-flex; align-items: center; gap: 9px; padding: 9px 16px 9px 12px;
  border-radius: 999px; border: 1px solid var(--line); background: var(--panel); color: var(--ink);
  font-size: 12px; letter-spacing: .04em; box-shadow: 0 6px 24px -10px rgba(0,0,0,.5); }
.gt-pry-correr .gt-pry-tri { width: 0; height: 0; border-style: solid; border-width: 5px 0 5px 8px;
  border-color: transparent transparent transparent currentColor; }
.gt-pry-correr.on { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.gt-pry-correr.on .gt-pry-tri { border-width: 0; width: 8px; height: 9px;
  border-left: 3px solid currentColor; border-right: 3px solid currentColor; }
.gt-pry-cover { background: var(--dark); display: flex; align-items: center; justify-content: center;
  padding: clamp(30px, 8vh, 90px) clamp(16px, 4vw, 44px); }
.gt-pry-cover-in { width: min(1200px, 100%); text-align: center; }
.gt-pry-eyebrow { --tx-esc: 1; --tx-ink: initial; --tx-font: initial;
  font-family: var(--tx-font, inherit); font-size: calc(10.5px * var(--tx-esc)); letter-spacing: .32em;
  text-transform: uppercase; font-weight: 600; color: var(--tx-ink, var(--dark-ink2, var(--ink2))); }
.gt-pry-cover-t { --tx-esc: 1; --tx-ink: initial; --tx-font: initial;
  font-family: var(--tx-font, var(--gt-display, inherit)); font-weight: 400;
  font-size: calc(clamp(38px, 8vw, 96px) * var(--tx-esc)); line-height: 1.06; letter-spacing: .01em;
  color: var(--tx-ink, var(--dark-ink)); margin: clamp(12px, 2vh, 22px) 0; overflow-wrap: anywhere; }
.gt-pry-amp { font-style: italic; color: var(--accent); }
.gt-pry-linea { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px 20px;
  font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase; color: var(--dark-ink2, var(--ink2));
  margin-bottom: clamp(20px, 4vh, 40px); }
/* La banda cinemascope, con tope de ancho: la leccion de la tira de Rotulo -- sin max-width,
   en un monitor ancho el recorte de un retrato vertical se vuelve una rendija. */
.gt-pry-scope { width: 100%; max-width: 1200px; margin: 0 auto; aspect-ratio: 21/9;
  background-size: cover; background-position: 50% 50%;
  border-top: 1px solid var(--line2); border-bottom: 1px solid var(--line2); }
@container (max-width: 640px) {
  .gt-pry-scope { aspect-ratio: 16/9; }
  .gt-pry-cuadro .tile, .gt-pry-cuadro .tile img { max-width: 100%; max-height: 76vh; }
  .gt-pry-correr { left: 50%; right: auto; transform: translateX(-50%); }
}

/* ================= "revelado": el cuarto oscuro =================
   Tiras de negativos que ademas NAVEGAN, y copias grandes sobre su borde de papel. El
   monocromo de las minis es decorado fijo (un negativo es monocromo por naturaleza), no una
   animacion: la plantilla se sostiene entera sin un solo frame de movimiento. */
.gt-neg { max-width: 1180px; margin: 0 auto; padding: 0 clamp(14px, 3vw, 36px); }
.gt-neg-cap { padding-top: clamp(24px, 5vh, 52px); }
.gt-neg-cabeza { display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
  border-bottom: 1px solid var(--line); padding-bottom: 8px; }
.gt-neg-rotulo { --tx-esc: 1; --tx-ink: initial; --tx-font: initial;
  font-family: var(--tx-font, var(--gt-display, inherit)); font-size: calc(clamp(15px, 2vw, 22px) * var(--tx-esc));
  letter-spacing: .16em; text-transform: uppercase; color: var(--tx-ink, var(--ink)); }
.gt-neg-conteo { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 10.5px;
  letter-spacing: .1em; color: var(--ink3); }
.gt-neg-tx { --tx-esc: 1; --tx-ink: initial; --tx-font: initial;
  font-family: var(--tx-font, inherit); font-size: calc(13.5px * var(--tx-esc)); line-height: 1.6;
  color: var(--tx-ink, var(--ink2)); margin: 12px 0 0; max-width: 62ch; }
/* La tira: fondo negro literal (es la base del film, no un color de la paleta) con sus dos
   bandas de perforaciones hechas con un gradiente repetido. */
.gt-neg-tira { position: relative; margin: clamp(14px, 2.5vh, 22px) 0 clamp(20px, 4vh, 36px);
  background: #000; padding: 13px 0; }
.gt-neg-perf { position: absolute; left: 0; right: 0; height: 9px;
  background: repeating-linear-gradient(90deg, transparent 0 7px, rgba(255,255,255,.5) 7px 12px, transparent 12px 19px); }
.gt-neg-perf-a { top: 2px; } .gt-neg-perf-b { bottom: 2px; }
.gt-neg-cuadros { display: flex; gap: 4px; overflow-x: auto; padding: 0 8px; scrollbar-width: thin; }
.gt-neg-mini { position: relative; flex: none; width: 62px; height: 44px; overflow: hidden;
  filter: grayscale(1) contrast(1.08); opacity: .72; transition: filter .4s, opacity .4s, outline-color .2s;
  outline: 1px solid transparent; outline-offset: -1px; }
.gt-neg-mini img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* La UNICA mini revelada es la de la copia que se esta mirando: es lo que convierte la tira
   en una posicion y no en un adorno. */
.gt-neg-mini.on { filter: none; opacity: 1; outline-color: var(--accent); }
.gt-neg-num { position: absolute; left: 2px; bottom: 1px; font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 8px; letter-spacing: .04em; color: var(--accent); }
.gt-neg-copias { display: flex; flex-direction: column; align-items: center; gap: clamp(26px, 5vh, 58px); }
.gt-neg-copia { margin: 0; width: min(980px, 100%); content-visibility: auto; contain-intrinsic-size: auto 640px; }
/* Borde de papel fotografico: blanco literal, como el faldon de polaroid del eje marco. */
.gt-neg-copia .tile { border: 6px solid #fff; box-shadow: 0 10px 34px -14px rgba(0,0,0,.55); max-height: 80vh; }
.gt-neg-pie { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 10px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink3); margin-top: 9px; }
.gt-neg-ficha { border: 1px solid var(--line2); }
.gt-neg-cover { background: var(--bg); color: var(--ink); display: flex; align-items: center;
  justify-content: center; padding: clamp(30px, 8vh, 88px) clamp(14px, 3vw, 40px); }
.gt-neg-cover-in { width: min(1200px, 100%); text-align: center; }
.gt-neg-eyebrow { --tx-esc: 1; --tx-ink: initial; --tx-font: initial;
  font-family: var(--tx-font, inherit); font-size: calc(10.5px * var(--tx-esc)); letter-spacing: .3em;
  text-transform: uppercase; font-weight: 600; color: var(--tx-ink, var(--accent-tinta, var(--accent))); }
.gt-neg-cover-t { --tx-esc: 1; --tx-ink: initial; --tx-font: initial;
  font-family: var(--tx-font, var(--gt-display, inherit)); font-weight: 400;
  font-size: calc(clamp(32px, 6.5vw, 84px) * var(--tx-esc)); line-height: 1.05; letter-spacing: -.005em;
  color: var(--tx-ink, var(--ink)); margin: clamp(10px, 2vh, 18px) 0 clamp(20px, 4vh, 38px);
  overflow-wrap: anywhere; }
.gt-neg-amp { font-style: italic; color: var(--accent); }
.gt-neg-cover-tira { position: relative; background: #000; padding: 15px 0; max-width: 1200px; margin: 0 auto; }
/* Grid y no flex con align-items:stretch: estirando, los flancos se comian su propio
   aspect-ratio y salian como rendijas verticales (medido: 257x436, ratio 0.59, contra un
   central 3/2) -- en una tira de negativos todos los cuadros comparten formato. Con columnas
   proporcionales y centrado vertical, cada cuadro conserva su 3/2 y el central simplemente
   es el fotograma ampliado, que es el gesto de esta portada. */
.gt-neg-cover-cuadros { display: grid; grid-template-columns: 22fr 56fr 22fr; gap: 6px; padding: 0 10px; align-items: center; }
.gt-neg-p { position: relative; overflow: hidden; aspect-ratio: 3/2; }
.gt-neg-p img { width: 100%; height: 100%; object-fit: cover; display: block; filter: grayscale(1) contrast(1.06); }
/* El central es la copia buena: a color y mas grande. Los flancos, negativos. */
.gt-neg-p1 img { filter: none; }
.gt-neg-p-num { position: absolute; left: 5px; bottom: 3px; font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 9px; color: var(--accent); }
.gt-neg-linea { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px 18px; margin-top: clamp(16px, 3vh, 30px);
  font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--ink3); }
@container (max-width: 640px) {
  .gt-neg-mini { width: 46px; height: 34px; }
  .gt-neg-perf { height: 7px; background: repeating-linear-gradient(90deg, transparent 0 5px, rgba(255,255,255,.5) 5px 9px, transparent 9px 14px); }
  .gt-neg-copia .tile { border-width: 4px; max-height: 70vh; }
  /* La tira de portada NO se apila: una tira de negativos vertical no existe. Los flancos
     asoman menos y el central manda. */
  .gt-neg-cover-cuadros { grid-template-columns: 16fr 68fr 16fr; }
}

/* El gesto firma de "revelado" (nivel completo del eje de movimiento): la copia se revela al
   entrar en pantalla, de papel expuesto a imagen. El keyframe NO declara `to`: interpola
   hacia el valor COMPUTADO, asi que compone con el filtro que el fotografo haya elegido --
   bajo filtro-bn degrada sola a una rampa de exposicion en vez de pelearse con el.
   Sin el nivel completo (o sin soporte de scroll-timelines) las copias ya estan reveladas:
   la plantilla estatica es una galeria de negativos monocromos y copias a color, que es
   exactamente lo que promete. */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    @keyframes gt-neg-revelar { from { filter: grayscale(1) sepia(.3) brightness(1.12) contrast(.82); } }
    .mov-c.lay-negativos #gal-body .gt-neg-copia .tile img {
      animation: gt-neg-revelar linear both; animation-timeline: view(); animation-range: entry 12% entry 80%; }
  }
}

/* ================= "corcho": el muro de polaroids =================
   Comparte el esqueleto de mesas con "tablero" y se separa por todo lo demas: otra mesa,
   giros al doble, post-its en vez de nota oscura y faldones de polaroid (que los pone el eje
   `marco`, no este acomodo -- por eso la plantilla declara marcoDefault). */
.gt-dsp-corcho .gt-dsp-mesa { padding-top: clamp(20px, 4vh, 44px); }
/* La nota del capitulo como POST-IT: el amarillo sale de --panel (la paleta ya lo trae
   calido), con sombra corta y dura como la de un papel pegado, no la difusa de una tarjeta. */
.gt-dsp-corcho .gt-dsp-postit { background: var(--panel); color: var(--ink); border: 0;
  box-shadow: 2px 6px 14px rgba(0,0,0,.22); padding: clamp(14px, 2vw, 20px); }
.gt-dsp-corcho .gt-dsp-postit .gt-dsp-nota-t,
.gt-dsp-corcho .gt-dsp-postit .gt-dsp-nota-x { color: inherit; }
/* La cinta adhesiva: translucida, con los bordes dentados que deja al rasgarse. Sin un solo
   color propio -- blanco con alfa sobre lo que haya debajo. */
.gt-dsp-corcho .gt-dsp-postit::before { content: ""; position: absolute; top: -9px; left: 50%;
  width: 62px; height: 20px; transform: translateX(-50%) rotate(-4deg);
  background: rgba(255,255,255,.42); border-left: 1px dashed rgba(255,255,255,.55);
  border-right: 1px dashed rgba(255,255,255,.55); box-shadow: 0 1px 3px rgba(0,0,0,.12); }
.gt-dsp-corcho .gt-dsp-nota { position: relative; }
/* Los bloques del fotografo, como post-its grandes. */
.gt-dsp-corcho .gt-blq-banda { background: var(--panel); color: var(--ink); border: 0;
  box-shadow: 2px 6px 16px rgba(0,0,0,.2); transform: rotate(-1deg); }
.gt-dsp-corcho .gt-blq-palabra { font-family: var(--gt-display, inherit); }
.gt-chi-cover { background: var(--bg); color: var(--ink); display: flex; align-items: center;
  justify-content: center; padding: clamp(30px, 8vh, 80px) clamp(16px, 4vw, 44px); }
.gt-chi-in { width: min(940px, 100%); display: flex; flex-direction: column; align-items: center;
  gap: clamp(18px, 3vh, 34px); }
.gt-chi-abanico { display: flex; justify-content: center; align-items: flex-start; }
/* Marco polaroid propio de la portada (no es un .tile, asi que el eje `marco` no lo alcanza):
   borde blanco y faldon abajo. El traslape es solo de faldones -- ningun control queda debajo. */
.gt-chi-p { position: relative; width: min(30%, 260px); aspect-ratio: 1/1; background: #fff;
  border: 10px solid #fff; border-bottom-width: 38px; box-shadow: 0 12px 30px -12px rgba(0,0,0,.45);
  transform: rotate(var(--chi-rot, 0deg)); }
.gt-chi-p + .gt-chi-p { margin-left: -3%; }
.gt-chi-p img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* La chincheta: un solo radial-gradient con el acento de la paleta. */
.gt-chi-tack { position: absolute; top: -7px; left: 50%; transform: translateX(-50%);
  width: 14px; height: 14px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, rgba(255,255,255,.85), var(--accent) 45%, rgba(0,0,0,.35));
  box-shadow: 0 2px 4px rgba(0,0,0,.35); }
.gt-chi-nota { position: relative; background: var(--panel); color: var(--ink);
  padding: clamp(20px, 4vh, 36px) clamp(24px, 5vw, 54px); transform: rotate(-2deg);
  box-shadow: 3px 8px 22px rgba(0,0,0,.2); text-align: center; max-width: min(560px, 92%); }
.gt-chi-cinta { position: absolute; top: -10px; width: 58px; height: 22px;
  background: rgba(255,255,255,.45); border-left: 1px dashed rgba(255,255,255,.6);
  border-right: 1px dashed rgba(255,255,255,.6); box-shadow: 0 1px 3px rgba(0,0,0,.12); }
.gt-chi-cinta-a { left: 12px; transform: rotate(-24deg); }
.gt-chi-cinta-b { right: 12px; transform: rotate(22deg); }
.gt-chi-eyebrow { --tx-esc: 1; --tx-ink: initial; --tx-font: initial;
  font-family: var(--tx-font, inherit); font-size: calc(10.5px * var(--tx-esc)); letter-spacing: .26em;
  text-transform: uppercase; font-weight: 600; color: var(--tx-ink, var(--ink2)); }
/* La manuscrita luce en grande y se vuelve ilegible en chico: por eso vive SOLO aqui y en
   la palabra del separador, nunca en un cuerpo de texto. */
.gt-chi-t { --tx-esc: 1; --tx-ink: initial; --tx-font: initial;
  font-family: var(--tx-font, var(--gt-display, inherit)); font-weight: 400;
  font-size: calc(clamp(38px, 7vw, 88px) * var(--tx-esc)); line-height: 1.05;
  color: var(--tx-ink, var(--ink)); margin: 8px 0 6px; overflow-wrap: anywhere; }
.gt-chi-amp { color: var(--accent); }
.gt-chi-linea { display: flex; justify-content: center; flex-wrap: wrap; gap: 4px 16px;
  font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--ink3); }
@container (max-width: 640px) {
  .gt-chi-p { width: min(46%, 190px); }
  .gt-chi-p + .gt-chi-p { margin-left: -8%; }
  /* El caracter no se plancha en movil: se conserva una rotacion residual (tablero las
     anula del todo, que es justo la diferencia entre un moodboard y un corcho). */
  .gt-dsp-corcho .gt-dsp-f { transform: rotate(1.2deg) !important; }
  .gt-dsp-corcho .gt-dsp-f:nth-child(even) { transform: rotate(-1.2deg) !important; }
}