/* 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). */
/* Marca Sueños del Mar (guía del dueño, 2026-09-08): DEEP NATURE · QUIET GREEN · SUNNY BEIGE.
   Jolly Script SÓLO en mayúsculas y sólo en títulos/frases destacadas; Lexend para todo el cuerpo.
   ⚠️ La Ñ de Jolly sube a 888/1000 em: ningún `overflow: hidden` sobre una línea con Ñ. */
@font-face { font-family: "Jolly"; src: url("fonts/Jolly.otf") format("opentype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Lexend"; src: url("fonts/Lexend_300.ttf") format("truetype"); font-weight: 300; font-display: swap; }
@font-face { font-family: "Lexend"; src: url("fonts/Lexend_400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Lexend"; src: url("fonts/Lexend_500.ttf") format("truetype"); font-weight: 500; font-display: swap; }
:root {
  --deep: #003a34;
  --quiet: #8caca1;
  --sunny: #f1eae2;
  --fondo: #ffffff;
  --tinta: var(--deep);
  --tinta-2: #4a6660;
  --gap: 6px;
  --margen: 12px;
  --display: "Jolly", Georgia, serif;
  --texto: "Lexend", "Helvetica Neue", Arial, sans-serif;
}
* { 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; }
.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 {
  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 16px; padding: 0 2px;
  font-family: var(--display); font-weight: 400; font-size: clamp(22px, 2vw, 34px); line-height: 1.3; letter-spacing: 0.03em; 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(20px, 1.5cqw, 28px); line-height: 1.25; text-transform: uppercase; letter-spacing: 0.02em; color: var(--deep); }
.tx.ti { grid-column: span 2; }
.tx.ti .lema { font-family: var(--display); text-transform: uppercase; font-size: clamp(22px, 2cqw, 38px); line-height: 1.25; 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(22px, 1.7cqw, 32px); line-height: 1.25; 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(26px, 2.2cqw, 44px); }
.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); }

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