/* 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; }
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; } }
.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; }

/* ── fichas de texto: pocas, grandes, de marca ────────────────────────────── */
.tx { background: var(--sunny); color: var(--deep); padding: clamp(22px, 2.4cqw, 48px); display: flex; flex-direction: column; justify-content: center; overflow: hidden; min-width: 0; }
.tx p { margin: 0; font-size: clamp(16px, 1.05cqw, 19px); 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(17px, 1.2cqw, 22px); 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(19px, 1.45cqw, 26px); 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) { background: var(--quiet); }
.tx.tf:not(.t) .lema { font-family: var(--display); text-transform: uppercase; font-size: clamp(19px, 1.45cqw, 26px); line-height: 1.3; letter-spacing: 0.06em; color: var(--deep); }
.tx.tf:not(.t) .cita { font-weight: 300; font-size: clamp(18px, 1.35cqw, 26px); 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(22px, 1.9cqw, 34px); }
.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 { 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; }
  .tx { opacity: 0; transform: translateY(28px); transition: opacity .9s cubic-bezier(.2,.7,.2,1) var(--d, 0ms), transform .9s cubic-bezier(.2,.7,.2,1) var(--d, 0ms); }
  .tx.vis { opacity: 1; transform: none; }
  .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, body.debug .zona > h2 { opacity: 1; transform: none; clip-path: 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; }