/* La galería. Masonry por columnas de ancho igual y alturas naturales — lo que hace Pixieset:
   ninguna foto se recorta, las verticales son el doble de altas que las horizontales y la página
   se llena sin huecos. Fondo blanco, márgenes finos, cero bordes: la foto manda.
   Nada legible por debajo de 14 px (regla del dueño, reportada tres veces). */
/* La galería en mosaico — hoja del MOTOR (marketing/galerias/motor/plantilla). La marca de cada
   proyecto (colores y @font-face) llega por marca.css, generado desde su galeria.config.ts; acá sólo se
   consumen las variables. La cara display va SÓLO en mayúsculas y en títulos/frases cortas.
   ⚠️ Nada legible por debajo de 14 px. ⚠️ Ningún `overflow: hidden` sobre un título (la Ñ de Jolly). */
:root {
  --tinta: var(--deep);
  --tinta-2: color-mix(in oklab, var(--deep) 72%, white);
  --gap: 6px;
  --margen: 12px;
}
* { box-sizing: border-box; }
/* El anillo de foco es de la marca, no el azul del navegador; sólo cuando el foco viene del teclado. */
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--quiet); outline-offset: 3px; border-radius: 2px; }
.pswp button:focus-visible, .it a:focus-visible { outline: 2px solid var(--quiet); outline-offset: 2px; }
input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 2px solid var(--quiet); outline-offset: 0; border-color: var(--quiet); }
html, body { margin: 0; background: var(--fondo); color: var(--tinta); }
body {
  font: 300 16px/1.55 var(--texto);
  -webkit-font-smoothing: antialiased;
}
main { padding: 0 var(--margen) 64px; }

/* ── portada a sangre ─────────────────────────────────────────────────────── */
.portada { position: relative; height: min(92vh, 1100px); overflow: hidden; background: #111; margin-bottom: 40px; }
.portada img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transform-origin: 50% 40%; }
.portada::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.55) 0%, rgba(0,0,0,.18) 32%, transparent 60%); }
.portada h1 { z-index: 1; }
.portada h1::after { content: ""; display: block; width: 72px; height: 2px; margin: 22px auto 0; background: var(--quiet); }
@media (prefers-reduced-motion: no-preference) {
  .portada img { animation: portada-zoom 9s cubic-bezier(.2,.6,.2,1) both; }
  .portada h1 { animation: titulo-entra 1.6s cubic-bezier(.2,.7,.2,1) .35s both; }
  .portada h1::after { animation: raya-dibuja 1.1s cubic-bezier(.2,.7,.2,1) 1.2s both; }
  @keyframes portada-zoom { from { transform: scale(1.08); } to { transform: scale(1); } }
  @keyframes titulo-entra { from { opacity: 0; letter-spacing: .32em; transform: translateY(18px); filter: blur(6px); } to { opacity: 1; letter-spacing: .04em; transform: none; filter: blur(0); } }
  @keyframes raya-dibuja { from { width: 0; opacity: 0; } to { width: 72px; opacity: 1; } }
}
.portada h1 {
  position: absolute; left: 0; right: 0; bottom: clamp(32px, 8vh, 96px); margin: 0; padding: 0 16px; text-align: center;
  color: #fff; font-family: var(--display); font-weight: 400; font-size: clamp(30px, 6vw, 84px); line-height: 1.2; letter-spacing: 0.04em; text-transform: uppercase;
  text-shadow: 0 2px 24px rgba(0,0,0,.45);
}
.cab { padding: clamp(40px, 8vh, 96px) var(--margen) clamp(24px, 4vh, 48px); text-align: center; }
.cab h1 { margin: 0; font-family: var(--display); font-weight: 400; font-size: clamp(30px, 6vw, 84px); text-transform: uppercase; color: var(--deep); }
.cab-dbg { margin: 0 0 16px; padding: 0 var(--margen); text-align: center; font-size: 15px; color: var(--tinta-2); }

.zona { margin: 0 0 clamp(40px, 6vh, 72px); }
.zona h2 {
  margin: 0 0 20px; padding: 0 2px;
  font-family: var(--display); font-weight: 400; font-size: clamp(30px, 3vw, 52px); line-height: 1.15; letter-spacing: 0.02em; text-transform: uppercase; color: var(--deep);
}

/* ── mosaico ─────────────────────────────────────────────────────────────── */
/* Celdas de ancho igual y filas de altura fija = ancho de columna / 1.5, o sea una lámina 3:2 exacta.
   `h` ocupa 1×1, `hx` 2×2 (misma proporción, sin recorte) y `v` 1×3 (una vertical 9:16 mide 1.78
   anchos; la celda mide 2.0 ⇒ `cover` recorta 11 % a los lados, sólo en el grid; el zoom la muestra
   entera). `dense` rellena los huecos que dejan las grandes. Todo en CSS: sin JS y sin salto. */
.zona { container-type: inline-size; }
.grid {
  --n: 5;
  --colw: calc((100cqw - (var(--n) - 1) * var(--gap)) / var(--n));
  display: grid;
  grid-template-columns: repeat(var(--n), minmax(0, 1fr));
  grid-auto-rows: calc(var(--colw) / 1.5);
  grid-auto-flow: dense;
  gap: var(--gap);
}
@media (max-width: 2199px) { .grid { --n: 4; } }
@media (max-width: 1399px) { .grid { --n: 3; } }
@media (max-width: 899px)  { .grid { --n: 2; } }
@media (max-width: 559px)  { .grid { --n: 1; } }
.it { margin: 0; min-width: 0; }
.it.hx { grid-column: span 2; grid-row: span 2; }
.it.v { grid-row: span 3; }
@media (max-width: 559px) { .it.hx { grid-column: span 1; grid-row: span 1; } }
/* A una columna, de un par horizontal/vertical de la misma escena sólo se ve la vertical (dueño, 2026-09-09). */
@media (max-width: 559px) { .it.par-h { display: none; } }
.it a { display: block; height: 100%; cursor: zoom-in; }
.it img { display: block; width: 100%; height: 100%; object-fit: cover; background: #ececea; transition: opacity .2s; }
.it a:hover img { opacity: 0.92; }

/* ── la galería de EFECTOS por foto (se elige en /debug, KV f:fx:<slug>) ────────────────────────
   Regla (dueño, 2026-09-08): EN REPOSO LA FOTO ES LA FOTO. Ningún efecto desatura, desenfoca ni vela;
   sólo suma al activarse. Activo = :hover en escritorio; sin puntero, .fx-on cuando la foto ocupa ≥ 60 %
   de la pantalla. Los de JS (inclinar, parallax, foco) viven en galeria.js. Lo que usan las galerías de
   referencia (Pixieset, Squarespace, Format): zoom sutil, Ken Burns, pie que sube, tilt, atenuar vecinas. */
.it[data-fx] a { overflow: hidden; position: relative; }
.it[data-fx] img { will-change: transform; transition: transform .9s cubic-bezier(.2,.6,.2,1), filter .9s cubic-bezier(.2,.6,.2,1), opacity .3s; }
.it[data-fx] a:hover img { opacity: 1; }
/* zoom: el estándar de las galerías — 5 % en 0,9 s */
.it[data-fx="zoom"] a:hover img, .it[data-fx="zoom"].fx-on img { transform: scale(1.05); }
/* kenburns: zoom lento y continuo, como la portada */
.it[data-fx="kenburns"] img { transform-origin: 50% 45%; }
.it[data-fx="kenburns"] a:hover img, .it[data-fx="kenburns"].fx-on img { transform: scale(1.1); transition-duration: 8s; }
/* flotar: la foto se levanta con sombra, como una tarjeta */
/* La caja NO se mueve (dueño, 2026-09-08: «genera un margen inferior»): la sombra crece debajo y la foto
   sube 1,5 % dentro de su marco con un zoom que tapa el hueco. Se lee como levantada sin abrir espacio. */
.it[data-fx="flotar"] a { transition: box-shadow .7s cubic-bezier(.2,.6,.2,1); }
.it[data-fx="flotar"] a:hover, .it[data-fx="flotar"].fx-on a { box-shadow: 0 22px 44px -8px rgba(0,0,0,.35); z-index: 1; }
.it[data-fx="flotar"] a:hover img, .it[data-fx="flotar"].fx-on img { transform: scale(1.06) translateY(-1.5%); }
/* pie: el título sube desde abajo sobre un degradado; usa el pie de la foto o el nombre de la sección */
.it[data-fx="pie"] a::after { content: attr(data-pie); position: absolute; left: 0; right: 0; bottom: 0; padding: 40px 18px 16px; color: #fff; font: 400 clamp(15px, 1.1cqw, 18px)/1.3 var(--display); text-transform: uppercase; letter-spacing: .06em; background: linear-gradient(transparent, rgba(0,0,0,.55)); transform: translateY(100%); transition: transform .7s cubic-bezier(.2,.6,.2,1); pointer-events: none; }
.it[data-fx="pie"] a:hover::after, .it[data-fx="pie"].fx-on a::after { transform: none; }
.it[data-fx="pie"] a:hover img, .it[data-fx="pie"].fx-on img { transform: scale(1.03); }
/* inclinar: tilt 3D que sigue al cursor (galeria.js pone --rx/--ry); sin puntero, una inclinación suave */
.it[data-fx="inclinar"] a { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .25s ease-out; transform-style: preserve-3d; }
.it[data-fx="inclinar"] a:hover img { transform: scale(1.04); }
.it[data-fx="inclinar"].fx-on a { --rx: 3deg; --ry: -4deg; transition-duration: 1.2s; }
.it[data-fx="inclinar"].fx-on img { transform: scale(1.04); }
/* parallax: ambiente — la foto se desplaza un poco más lento que el scroll (galeria.js pone --py) */
.it[data-fx="parallax"] img { transform: translateY(var(--py, 0px)) scale(1.12); transition: none; }
/* foco: la foto queda y las vecinas de la misma sección se atenúan (galeria.js pone .fx-dim) */
/* adornos: la foto complementaria no lleva marca de tour ni feedback; en debug se ve con su especie */
.it[data-zona="adorno"] a { cursor: zoom-in; }
.it.fx-dim img { opacity: .55 !important; transition: opacity .6s cubic-bezier(.2,.6,.2,1); }
/* marco: un marco blanco interior se dibuja (Squarespace/Format) */
.it[data-fx="marco"] a::after { content: ""; position: absolute; inset: 14px; border: 1px solid rgba(255,255,255,.9); opacity: 0; transform: scale(1.04); transition: opacity .6s cubic-bezier(.2,.6,.2,1), transform .6s cubic-bezier(.2,.6,.2,1); pointer-events: none; }
.it[data-fx="marco"] a:hover::after, .it[data-fx="marco"].fx-on a::after { opacity: 1; transform: none; }
.it[data-fx="marco"] a:hover img, .it[data-fx="marco"].fx-on img { transform: scale(1.03); }
/* brillo: un destello de luz recorre la foto una vez, de izquierda a derecha */
.it[data-fx="brillo"] a::after { content: ""; position: absolute; top: -20%; bottom: -20%; left: -60%; width: 40%; background: linear-gradient(105deg, transparent, rgba(255,255,255,.35), transparent); transform: skewX(-18deg); pointer-events: none; opacity: 0; }
.it[data-fx="brillo"] a:hover::after, .it[data-fx="brillo"].fx-on a::after { animation: fx-brillo 1.1s cubic-bezier(.3,.6,.3,1) forwards; }
@keyframes fx-brillo { 0% { left: -60%; opacity: 0; } 15% { opacity: 1; } 100% { left: 130%; opacity: 0; } }
.it[data-fx="brillo"] a:hover img, .it[data-fx="brillo"].fx-on img { transform: scale(1.02); }
/* linterna: una luz suave sigue al cursor (galeria.js pone --mx/--my); en móvil, en el centro */
.it[data-fx="linterna"] a::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle 38% at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,.22), transparent 70%); opacity: 0; transition: opacity .5s; pointer-events: none; mix-blend-mode: soft-light; }
.it[data-fx="linterna"] a:hover::after, .it[data-fx="linterna"].fx-on a::after { opacity: 1; }
.it[data-fx="linterna"] a:hover img, .it[data-fx="linterna"].fx-on img { transform: scale(1.02); }
/* cine: barras de cine arriba y abajo con el título, como un fotograma */
.it[data-fx="cine"] a::before, .it[data-fx="cine"] a::after { content: ""; position: absolute; left: 0; right: 0; height: 11%; background: #0a0a0a; transform: scaleY(0); transition: transform .6s cubic-bezier(.2,.6,.2,1); pointer-events: none; z-index: 1; }
.it[data-fx="cine"] a::before { top: 0; transform-origin: top; }
.it[data-fx="cine"] a::after { bottom: 0; transform-origin: bottom; content: attr(data-pie); color: #fff; font: 400 clamp(13px, 1cqw, 16px)/1 var(--display); text-transform: uppercase; letter-spacing: .12em; display: flex; align-items: center; justify-content: center; }
.it[data-fx="cine"] a:hover::before, .it[data-fx="cine"] a:hover::after, .it[data-fx="cine"].fx-on a::before, .it[data-fx="cine"].fx-on a::after { transform: scaleY(1); }
.it[data-fx="cine"] a:hover img, .it[data-fx="cine"].fx-on img { transform: scale(1.04); }
/* viñeta: los bordes se oscurecen y el centro queda, como una lente */
.it[data-fx="vineta"] a::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 70% 65% at 50% 50%, transparent 55%, rgba(0,0,0,.45) 100%); opacity: 0; transition: opacity .8s cubic-bezier(.2,.6,.2,1); pointer-events: none; }
.it[data-fx="vineta"] a:hover::after, .it[data-fx="vineta"].fx-on a::after { opacity: 1; }
.it[data-fx="vineta"] a:hover img, .it[data-fx="vineta"].fx-on img { transform: scale(1.04); }
/* girar: un giro mínimo con zoom, como una foto apoyada que se endereza */
.it[data-fx="girar"] a:hover img, .it[data-fx="girar"].fx-on img { transform: rotate(1.5deg) scale(1.08); }
.it[data-fx="foco"] a:hover img { transform: scale(1.03); }
@media (prefers-reduced-motion: reduce) { .it[data-fx] img, .it[data-fx] a, .it[data-fx] a::after { transition: none !important; animation: none !important; transform: none !important; } }
/* Sin puntero no hay efectos (dueño, 2026-09-08): la foto queda en reposo; el parallax también se apaga. */
@media (hover: none) { .it[data-fx="parallax"] img { transform: none; } .it[data-fx] a::before, .it[data-fx] a::after { display: none; } }

/* ── la TIRA DE DEMOSTRACIÓN, arriba del debug: la misma foto corriendo cada efecto en bucle ────── */
.fx-demo { padding: 0 var(--margen) 32px; }
.fx-demo h2 { margin: 0 0 6px; font-family: var(--display); font-weight: 400; font-size: clamp(24px, 2.4vw, 40px); text-transform: uppercase; letter-spacing: .02em; color: var(--deep); }
.fx-demo p.nota { margin: 0 0 16px; font-size: 15px; color: var(--tinta-2); }
.fx-demo .tira { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 16px; }
.fx-demo .it { margin: 0; background: #fff; border-radius: 6px; box-shadow: 0 1px 3px rgba(0,0,0,.08); container-type: inline-size; }
.fx-demo .it a { display: block; aspect-ratio: 3/2; overflow: hidden; border-radius: 6px 6px 0 0; }
.fx-demo .it img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fx-demo figcaption { padding: 12px 14px 14px; font-size: 15px; line-height: 1.4; color: var(--deep); }
.fx-demo figcaption b { display: block; font-family: var(--display); text-transform: uppercase; letter-spacing: .06em; font-size: 16px; margin-bottom: 4px; }
.fx-demo .it { cursor: default; }
.fx-ctl { display: grid; gap: 12px; margin: 0 0 18px; padding: 16px; background: var(--sunny); border-radius: 6px; font-size: 15px; color: var(--deep); }
.fx-ctl label { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.fx-ctl select { font: inherit; font-size: 15px; padding: 8px 10px; border: 1px solid #d9d8d3; border-radius: 4px; background: #fff; color: var(--tinta); min-height: 40px; }
.fx-ctl .limpiar { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.fx-ctl button, .hs-ed button { font: inherit; font-size: 14px; min-height: 40px; padding: 0 14px; border: 1px solid var(--deep); border-radius: 4px; background: #fff; color: var(--deep); cursor: pointer; }
.fx-ctl button.armado { background: #a12d2d; border-color: #a12d2d; color: #fff; }
.hs-ed { display: flex; align-items: center; gap: 10px; margin-top: 8px; font-size: 14px; }
.hs-ed button[hidden] { display: none; }

/* en debug: el selector y la previsualización */
.tag-ed { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 8px; font-size: 14px; }
.tag-ed select { font: inherit; font-size: 15px; padding: 8px 10px; border: 1px solid #d9d8d3; border-radius: 4px; background: #fff; color: var(--tinta); min-height: 40px; width: 100%; }
.tag-ed .estado { grid-column: 1 / -1; }
.it[data-orden="cubierta"] .panel .id b { box-shadow: inset 0 -3px 0 #c5a95e; }
.fx-ed { display: flex; align-items: center; gap: 10px; margin-top: 8px; font-size: 14px; }
.fx-ed select { font: inherit; font-size: 15px; padding: 8px 10px; border: 1px solid #d9d8d3; border-radius: 4px; background: #fff; color: var(--tinta); min-height: 40px; }

/* ── fichas de texto: pocas, grandes, de marca ────────────────────────────── */
/* La celda (.tx) no se transforma nunca: el IntersectionObserver la mide tal cual está en la rejilla. La cara
   (.cara) es la que gira. Medido 2026-09-09: con el flip sobre la celda, una ficha de 2 columnas proyectaba un
   bounding box de 5499 px de alto (celda de 335) y nunca llegaba al 30 % de intersección: quedaba en opacity 0,
   un hueco blanco. 5 por página a 2560, 1 en móvil. */
.tx { display: flex; min-width: 0; color: var(--deep); }
.tx > .cara { flex: 1; min-width: 0; background: var(--sunny); padding: clamp(22px, 2.4cqw, 48px); display: flex; flex-direction: column; justify-content: center; overflow: hidden; }
.tx p { margin: 0; font-size: clamp(17px, 1.25cqw, 22px); line-height: 1.5; font-weight: 300; color: var(--deep); }
.tx p + p { margin-top: 10px; }
.tx h3 { margin: 0 0 12px; font-family: var(--display); font-weight: 400; font-size: clamp(19px, 1.45cqw, 26px); line-height: 1.3; text-transform: uppercase; letter-spacing: 0.06em; color: var(--deep); }
.tx.ti { grid-column: span 2; }
.tx.ti .lema { font-family: var(--display); text-transform: uppercase; font-size: clamp(22px, 1.8cqw, 32px); line-height: 1.3; margin-bottom: 14px; letter-spacing: 0.06em; }
.tx.ti .lema::before { content: ""; display: block; width: 36px; height: 2px; background: var(--quiet); margin-bottom: 14px; }
.tx.tf:not(.t) > .cara { background: var(--quiet); }
.tx.tf:not(.t) .lema { font-family: var(--display); text-transform: uppercase; font-size: clamp(22px, 1.8cqw, 32px); line-height: 1.3; letter-spacing: 0.06em; color: var(--deep); }
.tx.tf:not(.t) .cita { font-weight: 300; font-size: clamp(19px, 1.5cqw, 28px); line-height: 1.4; color: var(--deep); }
.tf { display: none; }
.s2x2 { grid-column: span 2; grid-row: span 2; }
.s2x1 { grid-column: span 2; }
.s1x2 { grid-row: span 2; }
.tx.s2x2 .lema, .tx.s2x2 h3 { font-size: clamp(26px, 2.3cqw, 40px); }
.tx.s2x2 p:not(.lema) { font-size: clamp(17px, 1.2cqw, 22px); }
@media (min-width: 2200px) { .tf5 { display: flex; } }
@media (min-width: 1400px) and (max-width: 2199px) { .tf4 { display: flex; } }
@media (min-width: 900px) and (max-width: 1399px) { .tf3 { display: flex; } }
@media (min-width: 560px) and (max-width: 899px) { .tf2 { display: flex; } }
@media (max-width: 559px) { .tx.ti { grid-column: span 1; } .tx > .cara { padding: 18px; } }
body.debug .tx { display: none; }

/* ── el masterplan, al final: pesado, perezoso, no bloquea lo de arriba ─────── */
.masterplan { content-visibility: auto; contain-intrinsic-size: auto 100vh; }
.masterplan .it { margin: 0 auto; width: min(100%, calc(88vh * var(--r))); }
.masterplan .it img { width: 100%; height: auto; object-fit: initial; }
body.debug .masterplan { display: none; }

.pie { padding: 24px var(--margen) 48px; text-align: center; font-size: 14px; color: var(--tinta-2); }

/* ── el tour 2D: puntos sobre la foto ──────────────────────────────────────── */
/* Dorado de la marca (--quiet) con borde blanco y un anillo que se expande: sobre interiores blancos un
   disco blanco desaparece (dueño, 2026-09-08: «aún no veo nada»). En táctil la etiqueta va siempre
   visible; en escritorio, al pasar el cursor y durante 3 s al abrir la foto (.peek). */
.hs { position: absolute; left: 0; top: 0; pointer-events: none; }
.hs-p {
  position: absolute; width: 56px; height: 56px; margin: -28px 0 0 -28px; padding: 0; border: 0; background: transparent;
  cursor: pointer; pointer-events: auto; display: grid; place-items: center;
}
.hs-p i {
  position: relative; width: 26px; height: 26px; border-radius: 50%; background: var(--quiet); border: 3px solid #fff;
  box-shadow: 0 2px 14px rgba(0,0,0,.5), inset 0 0 0 2px var(--quiet);
}
.hs-p i::before { content: ""; position: absolute; inset: 7px; border-radius: 50%; background: #fff; }
.hs-p i::after { content: ""; position: absolute; inset: -3px; border-radius: 50%; border: 2px solid var(--quiet); animation: sonar 2.2s cubic-bezier(.2,.6,.3,1) infinite; }
@keyframes sonar { 0% { transform: scale(1); opacity: .9; } 100% { transform: scale(2.6); opacity: 0; } }
.hs-p span {
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%); white-space: nowrap; margin-top: 4px;
  font: 500 14px/1.2 var(--texto); color: var(--deep); background: rgba(255,255,255,.94); padding: 7px 12px; border-radius: 3px;
  box-shadow: 0 2px 10px rgba(0,0,0,.35); opacity: 0; transition: opacity .2s; pointer-events: none;
}
.hs-p span::before { content: "→ "; color: var(--quiet); }
.hs-p:hover span, .hs-p:focus-visible span, .hs.peek .hs-p span { opacity: 1; }
@media (hover: none) { .hs-p span { opacity: 1; } }
/* en el grid: la foto que tiene recorrido lo dice */
.it.con-tour a::after {
  content: ""; position: absolute; right: 12px; bottom: 12px; width: 18px; height: 18px; border-radius: 50%;
  background: var(--quiet); border: 3px solid #fff; box-shadow: 0 2px 8px rgba(0,0,0,.4); pointer-events: none;
}
.it.con-tour a { position: relative; }
/* el aviso la primera vez que se abre una foto con puntos */
.hs-aviso {
  position: absolute; left: 50%; bottom: 28px; transform: translateX(-50%); z-index: 3; pointer-events: none;
  font: 400 15px/1.3 var(--texto); color: var(--deep); background: rgba(255,255,255,.94); padding: 12px 18px; border-radius: 4px;
  box-shadow: 0 4px 20px rgba(0,0,0,.35); opacity: 0; transition: opacity .4s; white-space: nowrap; max-width: 92vw;
}
.hs-aviso.ver { opacity: 1; }
.pswp.colocando .pswp__img { cursor: crosshair; }
.hs-btn { display: inline-block; padding: 0 12px; line-height: 44px; font: 400 14px/44px var(--texto); color: #fff; letter-spacing: .04em; }
.pswp__button--mas-punto { width: auto !important; }
.pswp__button--mas-punto.activo .hs-btn { background: var(--quiet); color: var(--deep); }
.hs-sel {
  position: absolute; inset: auto 0 0 0; max-height: 60vh; background: var(--fondo); color: var(--deep); z-index: 20;
  display: flex; flex-direction: column; box-shadow: 0 -8px 30px rgba(0,0,0,.4); font: 300 15px/1.4 var(--texto);
}
.hs-sel header { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid #e2ded6; }
.hs-sel header input { flex: 1; font: inherit; font-size: 15px; padding: 8px 10px; border: 1px solid #d9d8d3; border-radius: 4px; }
.hs-sel .cerrar-sel { border: 0; background: transparent; font-size: 28px; width: 44px; height: 44px; cursor: pointer; color: var(--deep); }
.hs-sel .lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 8px; padding: 12px 16px; overflow: auto; }
.hs-sel .lista button { border: 0; padding: 0; background: #fff; cursor: pointer; text-align: left; font: inherit; color: var(--deep); }
.hs-sel .lista img { display: block; width: 100%; aspect-ratio: 3/2; object-fit: cover; }
.hs-sel .lista span { display: block; padding: 6px 4px; font-size: 14px; word-break: break-all; }

/* ── entrada al hacer scroll: títulos revelados por máscara, fichas escalonadas ─────────────────
   Las fotos no se mueven (una foto que aparece con retraso se lee como lenta). Respeta reduced-motion.
   `--d` es el escalón que asigna galeria.js según el orden en que entran en pantalla. */
@media (prefers-reduced-motion: no-preference) {
  .zona > h2 { clip-path: inset(0 0 100% 0); transform: translateY(24px); transition: clip-path .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1); }
  .zona > h2.vis { clip-path: inset(-10% 0 -10% 0); transform: none; }
  .grid { perspective: 1200px; }
  /* flip en Y sobre el centro (dueño, 2026-09-08): la ficha gira como una tarjeta y aterriza plana */
  .tx > .cara { opacity: 0; transform-origin: 50% 50%; transform: perspective(1200px) rotateY(-62deg) translateX(-18px); transition: opacity .8s cubic-bezier(.2,.7,.2,1) var(--d, 0ms), transform 1.1s cubic-bezier(.16,.8,.24,1) var(--d, 0ms); will-change: transform, opacity; backface-visibility: hidden; }
  .tx.vis > .cara { opacity: 1; transform: perspective(1200px) rotateY(0) translateX(0); }
  .zona > h2 { transform: translateY(40px); }
  .tx .lema::before { width: 0; }
  .tx.vis .lema::before { animation: raya-corta .9s cubic-bezier(.2,.7,.2,1) calc(var(--d, 0ms) + .35s) both; }
  @keyframes raya-corta { from { width: 0; } to { width: 36px; } }
  body.debug .tx > .cara, body.debug .zona > h2 { opacity: 1; transform: none; clip-path: none; }
}

/* el pie de foto en el zoom */
.pswp__pie {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 14px 16px 18px; text-align: center; pointer-events: none;
  display: flex; flex-direction: column; gap: 4px; align-items: center;
}
.pswp__pie .cap { font: 300 clamp(15px, 1.1vw, 18px)/1.4 var(--texto); color: #fff; text-shadow: 0 1px 8px rgba(0,0,0,.6); max-width: 70ch; }
.pswp__pie .tit { font: 400 clamp(16px, 1.2vw, 20px)/1.3 var(--display); text-transform: uppercase; letter-spacing: .06em; color: #fff; text-shadow: 0 1px 8px rgba(0,0,0,.6); }
.pswp__pie .rot { font: 400 14px/1.3 var(--texto); color: rgba(255,255,255,.75); }
/* el velo del crossfade: la foto que se va, disolviéndose sobre la que llega */
.pswp__velo { position: absolute; z-index: 5; pointer-events: none; object-fit: contain; opacity: 1; filter: blur(0); transform: scale(1); transition: opacity .7s cubic-bezier(.2,.6,.2,1), filter .7s cubic-bezier(.2,.6,.2,1), transform .7s cubic-bezier(.2,.6,.2,1); }
.pswp__velo.ida { opacity: 0; filter: blur(10px); transform: scale(1.03); }
.pie-ed { display: grid; gap: 6px; margin-top: 8px; }
.pie-ed input { font: inherit; font-size: 15px; padding: 8px 10px; border: 1px solid #d9d8d3; border-radius: 4px; background: #fff; color: var(--tinta); width: 100%; }
.pswp__pie[hidden] { display: none; }

/* PhotoSwipe: fondo pleno, sin contador en modo normal */
.pswp { --pswp-bg: #0a0a0a; }
body:not(.debug) .pswp__counter { display: none; }

/* ── modo debug: la misma página, una capa encima ─────────────────────────── */
.dbg-solo { display: none; }
body.debug .dbg-solo { display: block; }
body.debug .portada { height: 40vh; margin-bottom: 20px; }
body.debug .grid { --n: 1; grid-auto-rows: auto; grid-auto-flow: row; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 380px), 1fr)); gap: 20px; }
body.debug .it, body.debug .it.hx, body.debug .it.v { grid-column: span 1; grid-row: span 1; display: flex; flex-direction: column; background: #fff; border-radius: 6px; overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,.08); }
body.debug .it img { height: auto; object-fit: initial; }
body.debug .it.con-feedback { box-shadow: 0 0 0 2px #2c6b3a, 0 1px 3px rgba(0,0,0,.08); }
.panel { display: none; padding: 12px 14px 14px; font-size: 14px; line-height: 1.45; cursor: auto; }
body.debug .panel { display: block; }
.panel .id { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 14px; color: var(--tinta); word-break: break-all; }
.panel .id b { font-size: 18px; margin-right: 6px; }
.panel .id .z { color: var(--tinta-2); text-transform: uppercase; letter-spacing: .08em; margin-right: 6px; }
.panel .dec { margin: 8px 0 0; padding: 8px 10px; border-radius: 4px; background: #f3f2ee; color: #3f3f3f; font-size: 14px; }
.panel .dec b { text-transform: uppercase; letter-spacing: .06em; margin-right: 6px; }
.panel .dec.no b { color: #a12d2d; }
.panel .dec.si b { color: #2c6b3a; }
.panel .dec.fix b { color: #8a5a10; }
.panel .acc { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 10px; margin: 10px 0 6px; }
.panel .acc label { display: flex; align-items: center; gap: 8px; min-height: 40px; cursor: pointer; }
.panel .acc input { width: 20px; height: 20px; margin: 0; accent-color: #1c1c1c; }
.panel textarea {
  width: 100%; min-height: 64px; resize: vertical; font: inherit; font-size: 15px; padding: 8px 10px;
  border: 1px solid #d9d8d3; border-radius: 4px; background: #fff; color: var(--tinta);
}
.panel .estado { font-size: 14px; color: var(--tinta-2); min-height: 20px; margin-top: 4px; }
.panel .estado.ok { color: #2c6b3a; }
.panel .estado.err { color: #a12d2d; }
.cab-dbg a { color: inherit; }
.filtros { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 12px; font-size: 15px; }
.filtros label { display: flex; align-items: center; gap: 6px; min-height: 40px; cursor: pointer; }
body.debug.solo-feedback .it:not(.con-feedback) { display: none; }
@media (max-width: 559px) {
  body.debug .grid { grid-template-columns: 1fr; gap: 14px; }
  body.debug .portada { height: 32vh; }
  .panel .acc { grid-template-columns: 1fr; }
  .fx-ed { flex-wrap: wrap; }
  .tag-ed { grid-template-columns: 1fr; }
  .fx-ed select { width: 100%; }
  .cab-dbg { font-size: 15px; line-height: 1.6; }
  .filtros { gap: 6px; }
  .hs-sel .lista { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
}