/* Whiskey River — sitio.
   Paneles redondeados sobre un fondo neutro, foto a pantalla completa, una sola
   familia tipográfica y un único acento (ámbar de whisky). La foto lleva el color;
   la interfaz es sobria. Todo estado por defecto es el estado final: sin JS ni
   animaciones la página se lee completa; el movimiento solo mejora. */

:root {
  --f: 'Geist', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

  --ink: #101411;
  --ink-2: #454A46;
  --ink-3: #626762;
  --fondo: #E8E9E5;
  --panel: #F5F5F2;
  --blanco: #FFFFFF;
  --noche: #0B100D;
  --noche-2: #151C17;
  --linea: rgb(16 20 17 / .12);
  --linea-clara: rgb(255 255 255 / .16);
  --ambar: #E8892B;
  --ambar-vivo: #F39C43;

  --r-panel: 32px;
  --r-tarjeta: 24px;
  --margen: 10px;
  --lado: clamp(22px, 4.4vw, 64px);
  --ease: cubic-bezier(.16, 1, .3, 1);
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: 96px;
  background: var(--fondo);
  scrollbar-color: var(--ink) var(--fondo);
  text-underline-offset: .2em;
}
body {
  margin: 0;
  font: 400 17px/1.6 var(--f);
  color: var(--ink);
  background: var(--fondo);
  overflow-x: hidden; overflow-x: clip;
  accent-color: var(--ambar);
  caret-color: var(--ambar);
}
img, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3, p, figure, ul, ol, dl, dd, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button, select, input { font: inherit; color: inherit; }
::selection { background: var(--ambar); color: var(--ink); }
:focus-visible { outline: 3px solid var(--foco, var(--ink)); outline-offset: 3px; border-radius: 6px; }
.hero, .nav:not(.solido), .panel.oscuro, .cabanas, .pie, dialog.menu, .escribe, .salto { --foco: var(--ambar); }
.pausa:focus-visible { outline: 3px solid var(--ink); outline-offset: 0; box-shadow: 0 0 0 6px #fff; }
.riel:focus-visible { outline-offset: -3px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.salto { position: fixed; left: 12px; top: 12px; z-index: 100; padding: 10px 16px; border-radius: 999px; background: var(--ink); color: #fff; transform: translateY(-200%); }
.salto:focus { transform: none; }

/* ── Tipografía ─────────────────────────────────────────────────── */
h1, h2, h3 { font-weight: 600; text-wrap: balance; }
h1 { font-size: clamp(46px, 6vw, 96px); line-height: .98; letter-spacing: -.035em; }
h2 { font-size: clamp(34px, 4.4vw, 62px); line-height: 1.04; letter-spacing: -.03em; }
h3 { font-size: clamp(22px, 2vw, 28px); line-height: 1.15; letter-spacing: -.02em; }
.lead { font-size: clamp(18px, 1.5vw, 21px); line-height: 1.55; color: var(--ink-2); max-width: 54ch; text-wrap: pretty; }
.cuerpo { color: var(--ink-2); max-width: 56ch; text-wrap: pretty; }
.tenue { color: var(--ink-3); }
.num { font-variant-numeric: tabular-nums; }

/* ── Paneles ────────────────────────────────────────────────────── */
.panel { margin: var(--margen); border-radius: var(--r-panel); background: var(--panel); padding: clamp(44px, 7vw, 112px) var(--lado); position: relative; overflow: hidden; overflow: clip; }
.panel.blanco { background: var(--blanco); }
.panel.oscuro { background: var(--noche); color: #fff; }
.panel.oscuro .lead, .panel.oscuro .cuerpo { color: rgb(255 255 255 / .74); }
.cab-panel { display: flex; justify-content: space-between; align-items: end; gap: 24px; margin-bottom: clamp(28px, 4vw, 56px); }
.cab-panel p { max-width: 40ch; color: var(--ink-2); }
@media (max-width: 700px) { .cab-panel { flex-direction: column; align-items: flex-start; gap: 14px; } }
.panel.oscuro .cab-panel p { color: rgb(255 255 255 / .74); }

/* ── Botones ────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  min-height: 52px; padding: 0 26px; border-radius: 999px; border: 0; cursor: pointer;
  font: 600 16px/1 var(--f); letter-spacing: -.005em; text-decoration: none; white-space: nowrap;
  background: var(--ambar); color: var(--ink);
  transition: background-color .2s, transform 120ms var(--ease);
}
.btn:hover { background: var(--ambar-vivo); }
.btn:active { transform: scale(.98); }
.btn svg { width: 22px; height: 22px; flex: none; }
.btn.sec { background: transparent; color: inherit; box-shadow: inset 0 0 0 1.5px currentColor; }
.btn.sec:hover { background: var(--ink); color: #fff; box-shadow: none; }
.panel.oscuro .btn.sec:hover, .hero .btn.sec:hover { background: #fff; color: var(--ink); }
.btn.con-flecha { padding-right: 8px; }
.btn.con-flecha .fl { width: 38px; height: 38px; border-radius: 50%; background: var(--ink); color: #fff; display: grid; place-items: center; }
.btn.con-flecha .fl svg { width: 18px; height: 18px; transition: transform .25s var(--ease); }
.btn.con-flecha:hover .fl svg { transform: rotate(45deg); }
.circ {
  width: 46px; height: 46px; border-radius: 50%; border: 0; cursor: pointer; display: inline-grid; place-items: center;
  background: var(--ink); color: #fff; transition: background-color .2s, opacity .2s, transform 120ms var(--ease);
}
.circ:not([aria-disabled="true"]):hover { background: var(--ambar); color: var(--ink); }
.circ:active { transform: scale(.94); }
.circ[aria-disabled="true"] { opacity: .28; cursor: default; }
.circ svg { width: 20px; height: 20px; }

/* ── Navegación ─────────────────────────────────────────────────── */
.nav {
  position: fixed; z-index: 50; top: var(--margen); left: var(--margen); right: var(--margen);
  display: flex; align-items: center; gap: clamp(16px, 3vw, 44px);
  padding: 14px var(--lado); border-radius: 26px; color: #fff;
  transition: background-color .35s, color .35s, padding .35s var(--ease), top .35s var(--ease), left .35s var(--ease), right .35s var(--ease), box-shadow .35s;
}
.nav::after { content: ''; position: absolute; left: var(--lado); right: var(--lado); bottom: 0; height: 1px; background: var(--linea-clara); transition: opacity .3s; }
.nav.solido {
  top: 14px; left: 14px; right: 14px; padding: 10px 14px 10px 22px;
  background: rgb(245 245 242 / .88); color: var(--ink);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  box-shadow: 0 10px 34px rgb(11 16 13 / .1);
}
.nav.solido::after { opacity: 0; }
.marca { display: inline-flex; align-items: center; text-decoration: none; }
.marca img { height: 54px; width: auto; }
.marca .logo-n { display: none; }
.nav.solido .marca .logo-b { display: none; }
.nav.solido .marca .logo-n { display: block; }
.nav.solido .marca img { height: 44px; }
@media (max-width: 899px) { .marca img { height: 46px; } .nav.solido .marca img { height: 40px; } }
.nav ul { display: flex; gap: clamp(16px, 2.4vw, 34px); margin-left: clamp(8px, 2vw, 32px); }
.nav ul a { text-decoration: none; font-weight: 500; font-size: 15px; opacity: .92; padding: 8px 2px; }
.nav ul a:hover { opacity: 1; text-decoration: underline; text-decoration-thickness: 1.5px; }
.nav .btn { margin-left: auto; min-height: 44px; padding: 0 20px; font-size: 15px; }
.menu-btn { display: none; align-items: center; justify-content: center; margin-left: auto; min-height: 44px; padding: 0 18px; border-radius: 999px; line-height: 1; background: transparent; color: inherit; box-shadow: inset 0 0 0 1.5px currentColor; border: 0; font-weight: 600; cursor: pointer; }
@media (max-width: 420px) {
  .btn { white-space: normal; text-align: center; line-height: 1.2; padding: 10px 20px; }
  .btn.con-flecha { padding: 7px 8px 7px 20px; }
}
.pasadia > *, .resto > *, .eventos > *, .faq > *, .esencia > *, .cabanas-info { min-width: 0; }
@media (max-width: 899px) { .nav ul { display: none; } .menu-btn { display: inline-flex; } .nav .btn { display: none; } }
html:not(.js) .menu-btn { display: none; }
html:not(.js) .nav ul { display: flex; flex-wrap: wrap; }

dialog.menu:not([open]) { display: none; }
.menu-btn[hidden] { display: none !important; }
dialog.menu { border: 0; padding: 0; margin: 0; width: 100%; max-width: none; height: 100%; max-height: none; background: var(--noche); color: #fff; }
dialog.menu::backdrop { background: var(--noche); }
dialog.menu[open] { animation: menu-in .35s var(--ease); }
@keyframes menu-in { from { clip-path: circle(0 at calc(100% - 60px) 38px); } to { clip-path: circle(150vmax at calc(100% - 60px) 38px); } }
.menu-in { padding: clamp(72px, 14vh, 88px) var(--lado) max(32px, env(safe-area-inset-bottom)); display: grid; gap: clamp(8px, 2.4vh, 28px); }
.menu-in a:not(.btn) { font-size: clamp(28px, min(9vw, 7.2vh), 56px); font-weight: 600; letter-spacing: -.03em; text-decoration: none; line-height: 1.1; padding-block: 6px; }
.menu-in a:not(.btn):hover { color: var(--ambar); }
.menu-in .btn { justify-self: start; }
.menu-x { display: inline-flex; align-items: center; position: fixed; z-index: 1; background: var(--noche); top: max(20px, env(safe-area-inset-top)); right: var(--lado); min-height: 44px; padding: 0 18px; border-radius: 999px; background: transparent; color: #fff; border: 0; box-shadow: inset 0 0 0 1.5px #fff; font-weight: 600; cursor: pointer; }

/* ── Hero ───────────────────────────────────────────────────────── */
.hero {
  position: relative; margin: var(--margen); border-radius: var(--r-panel); overflow: hidden; overflow: clip; isolation: isolate;
  min-height: calc(100svh - var(--margen) * 2); min-height: calc(100dvh - var(--margen) * 2);
  display: flex; flex-direction: column; justify-content: flex-end; color: #fff; background: var(--noche);
}
.hero-foto { position: absolute; inset: 0; z-index: -2; }
.hero-foto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; transform-origin: 40% 60%; animation: hero-zoom 2.2s var(--ease) backwards; }
@keyframes hero-zoom { from { transform: scale(1.14); } }
.hero::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgb(8 12 9 / .5) 0%, rgb(8 12 9 / .08) 30%, rgb(8 12 9 / .1) 52%, rgb(8 12 9 / .78) 100%); }
.hero-marca {
  position: absolute; z-index: -1; left: 50%; top: clamp(84px, 13vh, 150px); translate: -50% 0; white-space: nowrap; pointer-events: none; user-select: none;
  font-weight: 700; font-size: min(calc((100vw - 20px) / 6.6), 340px); line-height: .9; letter-spacing: -.04em; color: rgb(255 255 255 / .3);
  -webkit-mask-image: linear-gradient(180deg, #000 18%, transparent 82%); mask-image: linear-gradient(180deg, #000 18%, transparent 82%);
  animation: marca-in 1.6s var(--ease) .2s backwards;
}
@keyframes marca-in { from { opacity: 0; translate: -50% 5%; } }
.hero-in { display: grid; gap: 28px; align-items: end; padding: 0 var(--lado) clamp(26px, 3.4vw, 52px); padding-top: 140px; }
.hero h1 { max-width: none; }
.hero h1 span { display: block; overflow: hidden; overflow: clip; padding-bottom: .06em; margin-bottom: -.06em; }
.hero h1 span > i { display: block; font-style: normal; animation: sube .95s var(--ease) backwards; }
.hero h1 span:nth-child(2) > i { animation-delay: .09s; }
@keyframes sube { from { transform: translateY(105%); } }
.hero .sub { margin-top: 20px; max-width: 44ch; font-size: clamp(17px, 1.4vw, 20px); color: rgb(255 255 255 / .86); animation: aparece .8s var(--ease) .45s backwards; text-wrap: pretty; }
@keyframes aparece { from { opacity: 0; transform: translateY(10px); } }
.planner {
  display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 24px; border-radius: 999px;
  background: rgb(11 16 13 / .5); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  box-shadow: inset 0 0 0 1px var(--linea-clara); animation: aparece .8s var(--ease) .6s backwards;
}
.planner label { display: grid; gap: 1px; flex: 1; min-width: 0; }
.planner label span { font-size: 12.5px; color: rgb(255 255 255 / .74); line-height: 1.2; }
.planner select {
  appearance: none; -webkit-appearance: none; background: transparent; border: 0; color: #fff; font-weight: 600; font-size: 17px; padding: 2px 26px 2px 0; width: 100%; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 2px center; background-size: 12px;
}
.planner select option { color: var(--ink); }
.planner .btn { flex: none; }
@media (min-width: 900px) {
  .hero-in { grid-template-columns: minmax(0, 1fr) minmax(360px, 480px); gap: clamp(28px, 4vw, 56px); }
}
@media (max-width: 899px) {
  .hero-in { position: relative; }
  .hero-in::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(180deg, rgb(8 12 9 / 0) 0, rgb(8 12 9 / .46) 110px, rgb(8 12 9 / .6) 100%); }
  .planner { border-radius: 28px; padding: 14px; flex-direction: column; align-items: stretch; gap: 12px; }
  .planner label { padding-left: 8px; }
  .planner .btn { width: 100%; }
  .hero-in { padding-top: 120px; }
  .hero .sub { margin-top: 14px; }
}

/* Video vertical del hero: solo en teléfonos, encima de la foto (que es el primer pintado) */
.hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .9s var(--ease); }
.hero-video.lista { opacity: 1; }
.pausa.hero-pausa { position: absolute; z-index: 2; top: 92px; right: var(--lado); bottom: auto; }
.pausa.hero-pausa[hidden] { display: none; }
@media (min-width: 900px) { .hero-video, .hero-pausa { display: none !important; } }

/* ── Nuestra esencia ────────────────────────────────────────────── */
.esencia { display: grid; gap: 36px; }
.esencia-der h2 { font-size: clamp(30px, 3.9vw, 56px); line-height: 1.1; max-width: 22ch; }
.esencia-der .btn { margin-top: 32px; }
.esencia-izq { display: grid; gap: 24px; align-content: end; }
.etiquetas { display: flex; flex-wrap: wrap; gap: 8px; }
.etiquetas li { padding: 9px 16px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--linea); font-size: 15px; font-weight: 500; background: var(--blanco); }
@media (min-width: 900px) { .esencia { grid-template-columns: .8fr 1.5fr; gap: clamp(40px, 8vw, 140px); align-items: start; } .esencia-der { order: 2; } .esencia-izq { order: 1; min-height: 100%; } }

/* Galería del lugar: cuadrícula de miniaturas cuadradas con una destacada (2x2).
   9 piezas llenan la cuadrícula exacta: 3 columnas x 4 filas en teléfono,
   4 x 3 en tableta y 6 x 2 en computador. Cada foto se abre en el visor. */
.galeria { margin-top: clamp(40px, 6vw, 80px); display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.g-item { position: relative; margin: 0; aspect-ratio: 1; border-radius: 14px; overflow: hidden; overflow: clip; background: var(--noche-2); }
.g-item.g-grande { grid-column: span 2; grid-row: span 2; }
.g-abrir { position: absolute; inset: 0; display: block; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.g-abrir picture, .g-abrir img { display: block; width: 100%; height: 100%; object-fit: cover; }
.g-abrir img { transition: transform .9s var(--ease); }
.g-abrir:hover img { transform: scale(1.05); }
.g-abrir:focus-visible { outline-offset: -4px; }
.g-video .foto { position: absolute; inset: 0; }
.g-video video { width: 100%; height: 100%; object-fit: cover; }
.g-item figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 32px 12px 10px; pointer-events: none;
  font-size: 14px; line-height: 1.3; color: #fff; background: linear-gradient(180deg, rgb(8 12 9 / 0), rgb(8 12 9 / .72));
  opacity: 0; transition: opacity .25s;
}
.g-item:hover figcaption, .g-item:focus-within figcaption { opacity: 1; }
.g-video figcaption { padding-right: 60px; }
@media (min-width: 640px) { .galeria { grid-template-columns: repeat(4, 1fr); gap: 10px; } .g-item { border-radius: 16px; } }
@media (min-width: 1100px) { .galeria { grid-template-columns: repeat(6, 1fr); gap: 12px; } }

/* Visor de fotos */
dialog.visor { border: 0; padding: 0; margin: 0; width: 100%; max-width: none; height: 100%; max-height: none; background: rgb(8 12 9 / .96); color: #fff; --foco: var(--ambar); overflow-x: hidden; overflow-x: clip; touch-action: pan-y pinch-zoom; }
dialog.visor:not([open]) { display: none; }
dialog.visor::backdrop { background: rgb(8 12 9 / .96); }
dialog.visor[open] { display: grid; place-items: center; animation: aparece .25s var(--ease); }
.visor-fig { width: 100%; display: grid; gap: 14px; justify-items: center; padding: 72px 76px 28px; }
.visor-fig img { max-width: min(100%, 1600px); max-height: calc(100svh - 170px); width: auto; height: auto; border-radius: 14px; }
.visor-fig figcaption { font-size: 16px; color: rgb(255 255 255 / .82); text-align: center; max-width: 60ch; }
.visor-x { display: inline-flex; align-items: center; position: fixed; z-index: 1; top: 18px; right: 18px; min-height: 44px; padding: 0 18px; border-radius: 999px; background: var(--noche); color: #fff; border: 0; box-shadow: inset 0 0 0 1.5px #fff; font-weight: 600; cursor: pointer; }
.visor-ant, .visor-sig { position: fixed; top: 50%; translate: 0 -50%; background: var(--noche); box-shadow: inset 0 0 0 1.5px rgb(255 255 255 / .6); }
.visor-ant { left: 16px; }
.visor-sig { right: 16px; }
@media (max-width: 640px) {
  .visor-fig { padding: 70px 12px 96px; }
  .visor-fig img { max-width: 100%; }
  .visor-ant, .visor-sig { top: auto; bottom: 22px; translate: none; }
  .visor-ant { left: calc(50% - 56px); }
  .visor-sig { right: calc(50% - 56px); }
}

/* ── Tarjetas de foto ───────────────────────────────────────────── */
.tarjeta { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: 280px; border-radius: var(--r-tarjeta); overflow: hidden; overflow: clip; isolation: isolate; color: #fff; text-decoration: none; background: var(--noche-2); }
.tarjeta > picture, .tarjeta > .fondo { position: absolute; inset: 0; z-index: -2; }
.tarjeta img, .tarjeta video { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease); }
.tarjeta::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgb(8 12 9 / 0) 25%, rgb(8 12 9 / .54) 55%, rgb(8 12 9 / .82) 100%); }
.tarjeta:hover img, .tarjeta:hover video { transform: scale(1.045); }
.tarjeta .ir { position: absolute; top: 16px; right: 16px; width: 46px; height: 46px; border-radius: 50%; background: rgb(255 255 255 / .94); color: var(--ink); display: grid; place-items: center; transition: transform .35s var(--ease), background-color .2s; }
.tarjeta .ir svg { width: 20px; height: 20px; }
.tarjeta:hover .ir { transform: rotate(45deg); background: var(--ambar); }
.tarjeta .txt { padding: clamp(18px, 2vw, 28px); display: grid; gap: 8px; }
.tarjeta h3 { font-size: clamp(26px, 2.8vw, 40px); letter-spacing: -.03em; }
.tarjeta p { font-size: 15.5px; line-height: 1.45; color: rgb(255 255 255 / .86); max-width: 38ch; }
.meta { display: inline-flex; align-items: center; gap: 8px; font-size: 14.5px; font-weight: 500; }
.meta svg { width: 16px; height: 16px; }
.meta b { font-weight: 600; }

.formas-grid { display: grid; gap: 14px; }
.formas-grid .tarjeta { min-height: 320px; }
@media (min-width: 900px) {
  .formas-grid { grid-template-columns: 1.7fr 1fr; grid-template-rows: 1fr 1fr; height: clamp(480px, 42vw, 620px); }
  .formas-grid .tarjeta:first-child { grid-row: 1 / span 2; }
  .formas-grid .tarjeta { min-height: 0; }
}

/* ── Carrusel «Lo que encontrarás» ──────────────────────────────── */
.carrusel-ctl { display: flex; gap: 10px; }
.riel { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; margin-inline: calc(var(--lado) * -1); padding-inline: var(--lado); scroll-padding-inline: var(--lado); scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.riel::-webkit-scrollbar { display: none; }
.item { flex: none; width: clamp(250px, 26vw, 340px); scroll-snap-align: start; }
.tira .t, .item .foto { position: relative; }
.item .foto { position: relative; aspect-ratio: 4 / 5; border-radius: 22px; overflow: hidden; overflow: clip; background: var(--noche-2); }
.item .foto img, .item .foto video { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease); }
.item:hover .foto img, .item:hover .foto video { transform: scale(1.05); }
.item h3 { font-size: 20px; margin-top: 16px; letter-spacing: -.015em; }
.item p { font-size: 15.5px; color: var(--ink-3); margin-top: 2px; line-height: 1.45; }
.pausa { position: absolute; right: 10px; bottom: 10px; width: 44px; height: 44px; border-radius: 50%; border: 0; cursor: pointer; background: rgb(255 255 255 / .94); color: var(--ink); display: grid; place-items: center; }
.pausa svg { width: 18px; height: 18px; }
.pausa .i-play { display: none; }
.pausa.pausado .i-pause { display: none; }
.pausa.pausado .i-play { display: block; }
html:not(.js) .pausa, html:not(.js) .carrusel-ctl { display: none; }

/* ── Pasadía ────────────────────────────────────────────────────── */
.pasadia { display: grid; gap: 40px; }
.pasadia h2 { max-width: 12ch; }
.incluye { margin-top: 32px; max-width: 560px; }
.incluye li { display: flex; align-items: center; gap: 14px; padding-block: 16px; border-top: 1px solid var(--linea); font-size: clamp(18px, 1.5vw, 21px); font-weight: 600; letter-spacing: -.015em; }
.incluye li:last-child { border-bottom: 1px solid var(--linea); }
.incluye li::before { content: ''; width: 9px; height: 9px; border-radius: 50%; background: var(--ambar); flex: none; }
.pasadia .btn { margin-top: 28px; }
.pasadia .nota { margin-top: 16px; font-size: 15.5px; color: var(--ink-3); max-width: 44ch; }
.pasadia-foto { position: relative; border-radius: var(--r-tarjeta); overflow: hidden; overflow: clip; min-height: 360px; background: var(--noche-2); }
.pasadia-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.foto-etiqueta { position: absolute; left: 16px; bottom: 16px; padding: 9px 15px; border-radius: 999px; background: rgb(255 255 255 / .94); color: var(--ink); font-size: 15px; font-weight: 600; }
@media (min-width: 900px) { .pasadia { grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 96px); align-items: start; } .pasadia-foto { min-height: 0; aspect-ratio: 4 / 5; max-height: 620px; justify-self: end; width: 100%; max-width: 500px; } }

/* ── Restaurante ────────────────────────────────────────────────── */
.resto { display: grid; gap: 36px; }
.resto h2 { max-width: 10ch; }
.abierto { margin-top: 32px; display: grid; gap: 14px; max-width: 440px; }
.chip { display: inline-flex; align-items: center; gap: 10px; font-size: 17px; font-weight: 600; }
.chip::before { content: ''; width: 10px; height: 10px; border-radius: 50%; background: var(--ambar); flex: none; }
.horario { display: grid; grid-template-columns: repeat(13, 1fr); gap: 4px; }
.horario i { display: block; height: 22px; border-radius: 6px; background: var(--ink); opacity: .14; }
.horario i.ahora { background: var(--ambar); opacity: 1; }
.horario-et { display: flex; justify-content: space-between; font-size: 14px; color: var(--ink-3); }
.resto-der { display: grid; gap: 28px; align-content: start; }
.resto-frase { font-size: clamp(28px, 3.4vw, 50px); font-weight: 600; letter-spacing: -.035em; line-height: 1.08; text-wrap: balance; }
.resto-der .btn { justify-self: start; }
@media (min-width: 900px) { .resto { grid-template-columns: .8fr 1.2fr; gap: clamp(40px, 8vw, 128px); align-items: start; } }

/* ── Cabañas ────────────────────────────────────────────────────── */
.cabanas { margin: var(--margen); border-radius: var(--r-panel); overflow: hidden; overflow: clip; position: relative; isolation: isolate; min-height: min(78svh, 700px); display: flex; align-items: flex-end; padding: var(--lado); color: #fff; background: var(--noche); }
.cabanas > picture { position: absolute; inset: 0; z-index: -2; }
.cabanas > picture img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; }
.cabanas::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgb(8 12 9 / .1) 30%, rgb(8 12 9 / .6) 100%); }
.cabanas-info { max-width: 520px; padding: clamp(24px, 3vw, 38px); border-radius: var(--r-tarjeta); background: rgb(11 16 13 / .58); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); box-shadow: inset 0 0 0 1px var(--linea-clara); display: grid; gap: 18px; }
.cabanas-info h2 { font-size: clamp(32px, 3.6vw, 52px); }
.cabanas-info p { color: rgb(255 255 255 / .82); font-size: 16px; }
.cabanas-info .btn { justify-self: start; }

/* ── Eventos y grupos ───────────────────────────────────────────── */
/* ── Cabañas por dentro ───────────────────────────────────────────
   Tres fragmentos verticales del recorrido + ocho fotos que abren el visor. */
.dentro { display: grid; gap: 14px; }
.cab-vids { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.cab-vid { margin: 0; }
.cab-vid .foto { position: relative; aspect-ratio: 9 / 16; border-radius: 18px; overflow: hidden; overflow: clip; background: var(--noche-2); }
.cab-vid video { width: 100%; height: 100%; object-fit: cover; }
.cab-vid .pausa { width: 38px; height: 38px; right: 8px; bottom: 8px; }
.cab-vid figcaption { margin-top: 10px; font-size: 15px; font-weight: 600; letter-spacing: -.01em; }
.cab-fotos { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.cab-fotos .g-item { border-radius: 16px; }
@media (min-width: 640px) { .cab-fotos { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 900px) { .dentro { grid-template-columns: .95fr 1.05fr; gap: clamp(14px, 1.6vw, 22px); align-items: start; } .cab-fotos { grid-template-columns: repeat(4, 1fr); } }
.enlace-claro { justify-self: start; font-size: 15.5px; font-weight: 600; color: #fff; text-underline-offset: 4px; }

/* ── Platos del restaurante (sin precios) ── */
.platos-cab { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin-top: clamp(48px, 7vw, 96px); padding-top: 28px; border-top: 1px solid var(--linea); }
.platos-cab h3 { font-size: clamp(24px, 2.4vw, 34px); letter-spacing: -.03em; }
.platos-cab p { font-size: 14px; color: var(--ink-3); }
.platos { margin-top: 24px; display: grid; grid-auto-flow: column; grid-auto-columns: min(72vw, 300px); gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; margin-inline: calc(var(--lado) * -1); padding-inline: var(--lado); scroll-padding-inline: var(--lado); }
.platos { scrollbar-width: none; }
.platos::-webkit-scrollbar { display: none; }
.plato { scroll-snap-align: start; }
.plato-foto { aspect-ratio: 4 / 3; border-radius: 18px; overflow: hidden; overflow: clip; background: var(--noche-2); }
.plato-foto img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease); }
.plato:hover .plato-foto img { transform: scale(1.04); }
.plato h3 { margin-top: 14px; font-size: 19px; letter-spacing: -.02em; }
.plato p { margin-top: 6px; font-size: 15px; line-height: 1.45; color: var(--ink-3); }
@media (min-width: 640px) { .platos { grid-auto-flow: row; grid-template-columns: repeat(3, 1fr); overflow: visible; margin-inline: 0; padding-inline: 0; } }
@media (min-width: 1100px) { .platos { grid-template-columns: repeat(5, 1fr); } }

/* ── Eventos al aire libre ─────────────────────────────────────────
   Cabecera grande, cuatro zonas que en computador se apilan como un mazo
   al bajar (sticky, sin JS) y la logística en una fila. */
.ev-cab { display: grid; gap: 28px; }
.ev-ante { font-size: 15px; font-weight: 600; letter-spacing: .02em; color: var(--ambar); margin-bottom: 16px; }
.ev-cab h2 { font-size: clamp(46px, 7vw, 108px); line-height: .96; letter-spacing: -.045em; max-width: 8ch; }
.ev-cab .lead { color: rgb(255 255 255 / .78); }
.ev-tipos { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 8px; }
.ev-tipos li { padding: 9px 16px; border-radius: 999px; box-shadow: inset 0 0 0 1px rgb(255 255 255 / .24); font-size: 15px; font-weight: 500; }
.ev-cab .btn { margin-top: 30px; }
@media (min-width: 900px) { .ev-cab { grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 96px); align-items: end; } }

.zonas { margin-top: clamp(48px, 7vw, 96px); display: grid; gap: 14px; }
.zona { display: grid; border-radius: var(--r-tarjeta); overflow: hidden; overflow: clip; background: var(--noche-2); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .08); }
.zona-foto { position: relative; order: -1; aspect-ratio: 4 / 3; background: #0F1511; }   /* en teléfono, la foto primero */
.zona-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.zona-txt { display: flex; flex-direction: column; gap: 12px; padding: clamp(22px, 3vw, 44px); }
.zona-n { font-size: 15px; font-weight: 600; letter-spacing: .04em; color: var(--ambar); font-variant-numeric: tabular-nums; }
.zona h3 { font-size: clamp(30px, 3.6vw, 54px); line-height: 1; letter-spacing: -.035em; }
.zona p { font-size: clamp(16px, 1.25vw, 18px); line-height: 1.55; color: rgb(255 255 255 / .76); max-width: 44ch; text-wrap: pretty; }
.zona-usos { margin-top: 6px; display: flex; flex-wrap: wrap; gap: 8px; }
.zona-usos li { padding: 7px 13px; border-radius: 999px; background: rgb(255 255 255 / .08); font-size: 14px; font-weight: 500; color: rgb(255 255 255 / .9); }
@media (min-width: 900px) {
  .zona { grid-template-columns: 1fr 1.05fr; min-height: 420px; }
  .zona-foto { order: 2; aspect-ratio: auto; }
  .zona-n { margin-bottom: auto; font-size: clamp(64px, 7vw, 112px); line-height: .9; letter-spacing: -.05em; }
}
/* el mazo solo cuando la tarjeta cabe entera en pantalla; en ventanas bajas (zoom, teléfono acostado) van en flujo normal */
@media (min-width: 900px) and (min-height: 700px) {
  .zonas { gap: 0; }
  .zonas::after { content: ''; height: 24vh; }
  .zona { position: sticky; top: calc(92px + var(--k, 0) * 18px); height: clamp(420px, 64vh, 580px);
          box-shadow: inset 0 0 0 1px rgb(255 255 255 / .08), 0 -24px 60px rgb(0 0 0 / .35); }
  .zona + .zona { margin-top: 14vh; }
}

.ev-apoyo { margin-top: clamp(40px, 6vw, 80px); display: grid; border-top: 1px solid rgb(255 255 255 / .14); }
.ev-apoyo li { padding-block: 18px; border-bottom: 1px solid rgb(255 255 255 / .14); font-size: clamp(16px, 1.3vw, 18px); line-height: 1.5; color: rgb(255 255 255 / .72); }
.ev-apoyo b { font-weight: 600; color: #fff; }
@media (min-width: 900px) {
  .ev-apoyo { grid-template-columns: repeat(4, 1fr); gap: 28px; border-top: 0; }
  .ev-apoyo li { padding: 18px 0 0; border-bottom: 0; border-top: 1px solid rgb(255 255 255 / .18); }
}
#eventos .eventos { margin-top: clamp(64px, 9vw, 128px); }
.ev-cierre { font-size: clamp(30px, 3.6vw, 52px); line-height: 1.04; letter-spacing: -.035em; max-width: 12ch; }

.eventos { display: grid; gap: 40px; }
.eventos h2 { max-width: 11ch; }
.eventos .cuerpo { margin-top: 22px; }
.eventos .btn { margin-top: 32px; }
.eventos-fotos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; align-items: start; }
.eventos-fotos figure { border-radius: 20px; overflow: hidden; overflow: clip; background: var(--noche-2); }
.eventos-fotos figure:nth-child(2) { margin-top: 36px; }
.eventos-fotos figure:nth-child(3) { margin-top: 14px; }
.eventos-fotos img { width: 100%; aspect-ratio: 3 / 4.6; object-fit: cover; }
.eventos-fotos figcaption { padding: 12px 14px 14px; font-size: 14.5px; color: rgb(255 255 255 / .78); line-height: 1.35; }
@media (min-width: 900px) { .eventos { grid-template-columns: .85fr 1.15fr; gap: clamp(40px, 6vw, 96px); align-items: center; } }
@media (max-width: 640px) { .eventos-fotos { grid-template-columns: 1fr 1fr; } .eventos-fotos figure:nth-child(3) { grid-column: 1 / -1; margin-top: 0; } .eventos-fotos figure:nth-child(3) img { aspect-ratio: 16 / 10; } }

/* ── Preguntas ──────────────────────────────────────────────────── */
.faq { display: grid; gap: 40px; }
.faq h2 { max-width: 12ch; }
.faq-lista { margin-top: 32px; }
details { border-top: 1px solid var(--linea); }
details:last-of-type { border-bottom: 1px solid var(--linea); }
summary { cursor: pointer; list-style: none; display: grid; grid-template-columns: 1fr 32px; gap: 16px; align-items: center; padding-block: 22px; font-size: clamp(18px, 1.7vw, 22px); font-weight: 600; letter-spacing: -.015em; }
summary::-webkit-details-marker { display: none; }
summary .mas { position: relative; width: 32px; height: 32px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--ink); transition: background-color .2s, box-shadow .2s; }
summary .mas::before, summary .mas::after { content: ''; position: absolute; left: 50%; top: 50%; width: 12px; height: 1.8px; background: currentColor; translate: -50% -50%; transition: transform .3s var(--ease); }
summary .mas::after { transform: rotate(90deg); }
details[open] summary .mas { background: var(--ambar); box-shadow: none; }
details[open] summary .mas::after { transform: rotate(0); }
details p { padding-bottom: 22px; max-width: 54ch; color: var(--ink-2); }
@supports (interpolate-size: allow-keywords) {
  :root { interpolate-size: allow-keywords; }
  details::details-content { block-size: 0; overflow: hidden; overflow: clip; transition: block-size .3s var(--ease), content-visibility .3s allow-discrete; }
  details[open]::details-content { block-size: auto; }
}
.pasos { margin-top: 36px; display: grid; gap: 14px; counter-reset: p; max-width: 480px; }
.pasos li { display: grid; grid-template-columns: 40px 1fr; gap: 14px; align-items: center; counter-increment: p; }
.pasos li::before { content: counter(p); width: 40px; height: 40px; border-radius: 50%; background: var(--ink); color: #fff; font-weight: 600; display: grid; place-items: center; }
.faq-foto { border-radius: var(--r-tarjeta); overflow: hidden; overflow: clip; min-height: 380px; position: relative; background: var(--noche-2); }
.faq-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 900px) { .faq { grid-template-columns: 1.1fr .9fr; gap: clamp(40px, 6vw, 96px); align-items: start; } .faq-foto { min-height: 0; aspect-ratio: 4 / 5; max-height: 600px; justify-self: end; width: 100%; max-width: 480px; } }

/* ── Cierre: mensaje + tiras ────────────────────────────────────── */
.mensaje { text-align: center; padding-inline: 0; }
.mensaje h2 { margin-inline: auto; max-width: 15ch; padding-inline: var(--lado); }
.mensaje .lead { margin: 22px auto 0; padding-inline: var(--lado); }
.mensaje .btn { margin-top: 32px; }
.cinta { margin: clamp(40px, 6vw, 72px) 0 0; padding: 0 var(--lado); display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 32px; }
.cinta li { font-size: clamp(20px, 2.3vw, 30px); font-weight: 600; letter-spacing: -.02em; color: var(--ink-3); }
.tira { margin-top: clamp(40px, 6vw, 72px); display: flex; justify-content: center; align-items: center; gap: clamp(12px, 2vw, 24px); overflow: hidden; overflow: clip; }
.tira .t { flex: none; border-radius: 24px; overflow: hidden; overflow: clip; background: var(--noche-2); }
.tira .t img, .tira .t video { width: 100%; height: 100%; object-fit: cover; }
.tira .t1 { width: clamp(70px, 12vw, 190px); height: clamp(180px, 26vw, 330px); border-radius: 0 24px 24px 0; }
.tira .t2 { width: clamp(130px, 18vw, 250px); height: clamp(200px, 28vw, 380px); }
.tira .t4 { width: clamp(130px, 18vw, 250px); height: clamp(200px, 28vw, 380px); }
.tira .t5 { width: clamp(70px, 12vw, 190px); height: clamp(180px, 26vw, 330px); border-radius: 24px 0 0 24px; }
.escribe { flex: none; width: clamp(240px, 28vw, 340px); border-radius: 24px; background: var(--noche); color: #fff; padding: 24px; text-align: left; display: grid; gap: 16px; }
.escribe p { font-size: 17px; line-height: 1.4; }
.escribe form { display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 18px; border-radius: 999px; background: rgb(255 255 255 / .1); box-shadow: inset 0 0 0 1px var(--linea-clara); }
.escribe .sin-js { display: none; }
html:not(.js) .escribe .sin-js { display: inline-flex; }
html:not(.js) .escribe form { display: none; }
.escribe input { flex: 1; min-width: 0; background: transparent; border: 0; color: #fff; font-size: 16px; padding: 8px 0; }
.escribe input::placeholder { color: rgb(255 255 255 / .66); }
.escribe input:focus-visible { outline: 2px solid transparent; }
.escribe form:focus-within { box-shadow: inset 0 0 0 2px var(--ambar); }
.escribe .circ { background: var(--ambar); color: var(--ink); width: 42px; height: 42px; flex: none; }
.escribe .circ:hover { background: var(--ambar-vivo); }
@media (max-width: 760px) { .tira { flex-wrap: wrap; overflow: visible; padding-inline: var(--lado); gap: 12px; } .tira .t1, .tira .t5 { display: none; } .tira .t2, .tira .t4 { width: calc(50% - 6px); height: 56vw; border-radius: 24px; } .escribe { width: 100%; order: -1; padding: 22px; } }

/* ── Pie ────────────────────────────────────────────────────────── */
.pie { margin: var(--margen); border-radius: var(--r-panel); background: var(--noche); color: #fff; padding: clamp(48px, 7vw, 104px) var(--lado) 0; position: relative; overflow: hidden; overflow: clip; }
.pie-top { display: grid; gap: 32px; justify-items: center; text-align: center; }
.pie-top h2 { max-width: 14ch; }
.pie-grid { margin-top: clamp(56px, 8vw, 112px); display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px 24px; }
.pie-logo img { width: min(240px, 70%); height: auto; margin-bottom: 14px; }
.pie-logo p { max-width: 30ch; }
.pie-grid h3 { font-size: 15px; font-weight: 500; color: rgb(255 255 255 / .62); margin-bottom: 10px; letter-spacing: 0; }
.pie-grid p, .pie-grid a { display: block; font-size: 16.5px; line-height: 1.7; text-decoration: none; color: rgb(255 255 255 / .92); }
.pie-grid a:hover { color: var(--ambar); }
.pie-marca { margin: clamp(24px, 4vw, 56px) 0 0; font-weight: 700; font-size: min(calc((100vw - 20px - 2 * var(--lado)) / 6.6), 330px); line-height: .9; letter-spacing: -.04em; white-space: nowrap; text-align: center; overflow: hidden; overflow: clip; padding-bottom: .12em; }
.legal { padding-block: 28px 30px; font-size: 14px; line-height: 1.55; color: rgb(255 255 255 / .62); display: grid; gap: 8px; border-top: 1px solid var(--linea-clara); margin-top: 20px; }
@media (min-width: 900px) { .pie-grid { grid-template-columns: repeat(4, 1fr); } }

/* ── Movimiento al desplazarse (solo mejora) ────────────────────── */
@supports (animation-timeline: view()) {
  @keyframes desvela { from { clip-path: inset(7% 5% 7% 5% round 30px); } to { clip-path: inset(0 round var(--r-tarjeta)); } }
  @keyframes asienta { from { scale: 1.16; } to { scale: 1; } }
  .desvela img, .desvela video { animation: asienta linear backwards; animation-timeline: view(); animation-range: entry 0% cover 40%; }
  @media (hover: hover) and (pointer: fine) {
    .desvela { animation: desvela linear backwards; animation-timeline: view(); animation-range: entry 0% cover 34%; }
  }
  @keyframes deriva { to { translate: -50% 18%; opacity: .2; } }
  .hero-marca { animation: marca-in 1.6s var(--ease) .2s backwards, deriva linear both; animation-timeline: auto, scroll(root); animation-range: normal, 0 90svh; }
}
/* ══ Modo cinemático ═════════════════════════════════════════════
   Lo activa sitio.js (html.cine) solo sin movimiento reducido. Sin JS o con
   movimiento reducido, todo lo de abajo queda inactivo y la página se ve completa.
   Gramática: telón de entrada → hero que se ancla y se hunde → títulos que suben
   por máscara → frase que se ilumina → escena horizontal → parallax y franja. */

/* Telón de entrada (primera visita de la sesión) */
.telon { display: none; }
html.con-telon .telon {
  position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; align-content: center; gap: 26px;
  background: var(--noche); color: #fff; clip-path: inset(0 0 0 0);
  transition: clip-path 1.05s cubic-bezier(.76, 0, .24, 1);
  animation: telon-auto .9s cubic-bezier(.76, 0, .24, 1) 3.6s forwards; /* por si el JS no llega */
}
html.con-telon .telon.fuera { clip-path: inset(0 0 100% 0); }
@keyframes telon-auto { to { clip-path: inset(0 0 100% 0); visibility: hidden; } }
.telon img { width: min(230px, 54vw); height: auto; animation: aparece .9s var(--ease) both; }
.telon-num { font: 600 14px/1 var(--f); letter-spacing: .1em; font-variant-numeric: tabular-nums; color: rgb(255 255 255 / .7); }
.telon-linea { width: min(230px, 54vw); height: 2px; border-radius: 2px; background: rgb(255 255 255 / .14); overflow: hidden; overflow: clip; }
.telon-linea i { display: block; height: 100%; background: var(--ambar); transform-origin: left; transform: scaleX(0); }
/* mientras el telón está arriba, la entrada del hero espera */
html.con-telon.listo-js:not(.entrada) .hero,
html.con-telon.listo-js:not(.entrada) .hero * { animation-play-state: paused !important; }

/* Titular letra por letra (lo parte un script en línea antes del primer pintado) */
.hero h1 .pal { display: inline-block; white-space: nowrap; }
.hero h1.letras span > i { animation: none; }
.hero h1.letras .l { display: inline-block; animation: sube .95s var(--ease) backwards; animation-delay: calc(.12s + var(--i) * 32ms); }

/* Barra de avance de lectura */
.progreso { position: fixed; top: 0; left: 0; right: 0; z-index: 60; height: 3px; pointer-events: none; }
.progreso i { display: block; height: 100%; background: var(--ambar); transform-origin: left; transform: scaleX(0); }
html:not(.cine) .progreso { display: none; }

/* Hero anclado: se encoge y se oscurece mientras «El lugar» sube por encima */
html.cine .hero-pin { height: calc(100svh + 45svh); }
html.cine .hero { position: sticky; top: var(--margen); transform: scale(calc(1 - var(--sp, 0) * .08)); transform-origin: 50% 35%; }
html.cine .hero-pin + .panel { position: relative; z-index: 2; margin-top: -45svh; box-shadow: 0 -28px 70px rgb(11 16 13 / .18); }
.hero-velo { position: absolute; inset: 0; z-index: 1; background: var(--noche); opacity: calc(var(--sp, 0) * .6); pointer-events: none; }

/* La navegación se esconde al bajar y vuelve al subir */
html.cine .nav { transition: background-color .35s, color .35s, padding .35s var(--ease), top .35s var(--ease), left .35s var(--ease), right .35s var(--ease), box-shadow .35s, translate .5s var(--ease); }
html.cine .nav.oculta { translate: 0 calc(-100% - 28px); }

/* Revelados al entrar en pantalla */
html.cine .r { opacity: 0; translate: 0 28px; transition: opacity .9s var(--ease), translate 1.05s var(--ease); transition-delay: var(--d, 0s); }
html.cine .r.v { opacity: 1; translate: none; }
html.cine .r-esc { opacity: 0; scale: .92; transition: opacity .8s var(--ease), scale 1.05s var(--ease); transition-delay: var(--d, 0s); }
html.cine .r-esc.v { opacity: 1; scale: none; }
/* títulos: cada palabra sube por una máscara */
.tw { display: inline-block; vertical-align: top; overflow: hidden; overflow: clip; padding-bottom: .12em; margin-bottom: -.12em; }
.tw > span { display: inline-block; }
html.cine .r-titulo .tw > span { transform: translateY(110%); transition: transform 1.05s var(--ease); transition-delay: calc(var(--i) * 45ms); }
html.cine .r-titulo.v .tw > span { transform: none; }
/* la frase de «El lugar» se ilumina palabra por palabra con el scroll */
html.cine #t-lugar .hw { color: rgb(16 20 17 / .14); transition: color .4s ease; }
html.cine #t-lugar .hw.on { color: var(--ink); }
html.cine #t-lugar .tenue .hw.on { color: var(--ink-3); }
/* el nombre gigante del pie sube letra por letra */
.pie-marca .l { display: inline-block; }
html.cine .pie-marca.r-letras .l { translate: 0 105%; transition: translate 1.1s var(--ease); transition-delay: calc(var(--i) * 38ms); }
html.cine .pie-marca.r-letras.v .l { translate: none; }

/* Escena horizontal: «Lo que encontrarás» se ancla y el scroll la mueve de lado (computador) */
html.cine-h #encontraras { overflow: visible; }
html.cine-h #encontraras .h-sticky { position: sticky; top: 84px; overflow: hidden; overflow: clip; margin-inline: calc(var(--lado) * -1); padding-inline: var(--lado); }
html.cine-h #encontraras .riel { overflow: visible; scroll-snap-type: none; margin-inline: 0; padding-inline: 0; translate: calc(var(--hx, 0) * -1px) 0; will-change: translate; }
html.cine-h #encontraras .carrusel-ctl { display: none; }
.h-avance { display: none; }
html.cine-h .h-avance { display: block; margin-top: 22px; height: 2px; border-radius: 2px; background: var(--linea); overflow: hidden; overflow: clip; }
html.cine-h .h-avance i { display: block; height: 100%; background: var(--ink); transform-origin: left; transform: scaleX(var(--hp, 0)); }

/* Parallax: las fotos grandes se mueven más lento que la página */
html.cine-par .cabanas > picture img, html.cine-par .pasadia-foto img, html.cine-par .faq-foto img { scale: 1.16; will-change: translate; }

/* Franja gigante que acelera con el scroll */
.franja { margin: clamp(36px, 6vw, 80px) 0; overflow: hidden; overflow: clip; }
.franja-pista { display: flex; align-items: center; gap: clamp(20px, 3vw, 48px); width: max-content; padding-inline: var(--lado); }
.franja span { font-weight: 700; font-size: clamp(56px, 10.5vw, 176px); line-height: 1.02; letter-spacing: -.04em; color: var(--ink); white-space: nowrap; }
.franja span:nth-of-type(even) { color: transparent; -webkit-text-stroke: 1.5px var(--ink); }
.franja svg { flex: none; width: clamp(30px, 4.6vw, 70px); height: clamp(30px, 4.6vw, 70px); color: var(--ambar); }

/* Cursor propio (solo con mouse) */
.cursor { position: fixed; left: 0; top: 0; z-index: 300; pointer-events: none; display: none; }
html.cine-cur .cursor { display: block; }
.cursor i { position: absolute; left: -18px; top: -18px; width: 36px; height: 36px; border-radius: 50%; border: 1.5px solid var(--ambar); opacity: 0; transition: transform .4s var(--ease), background-color .3s, border-color .3s, opacity .3s; }
.cursor.on i { opacity: 1; }
.cursor.enlace i { transform: scale(1.55); background: rgb(232 137 43 / .14); }
.cursor.ver i { transform: scale(2.5); background: var(--ambar); border-color: var(--ambar); }
.cursor span { position: absolute; left: 0; top: 0; translate: -50% -50%; font: 600 13px/1 var(--f); color: var(--ink); white-space: nowrap; opacity: 0; transition: opacity .2s; }
.cursor.ver span { opacity: 1; }
html.cine-cur .btn, html.cine-cur .circ { transition: background-color .2s, transform 120ms var(--ease), translate .55s var(--ease); }

/* El visor crece desde la miniatura (View Transitions) */
::view-transition-group(foto) { animation-duration: .6s; animation-timing-function: cubic-bezier(.16, 1, .3, 1); }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .3s; }

@media (prefers-reduced-motion: reduce) {
  .telon, .cursor, .progreso { display: none !important; }
  .hero h1.letras .l { animation: none; }
}

@media (forced-colors: active) {
  .menu-btn, .menu-x, .btn.sec, .escribe form, .planner, .etiquetas li { border: 1.5px solid currentColor; }
  .escribe input:focus-visible { outline: 2px solid Highlight; }
}
@media (prefers-reduced-motion: reduce) {
  .nav, .btn, .circ, .tarjeta .ir, .btn.con-flecha .fl svg, summary .mas, summary .mas::before, summary .mas::after { transition: none !important; }
  details::details-content { transition: none !important; }
  .hero-foto img, .hero-marca, .hero h1 span > i, .hero .sub, .planner { animation: none !important; }
  .hero-video, .hero-pausa { display: none !important; }
  dialog.visor[open] { animation: none; }
  .g-abrir img, .g-item figcaption, .plato-foto img { transition: none; }
  .desvela, .desvela img, .desvela video { animation: none !important; }
  dialog.menu[open] { animation: none; }
  .tarjeta img, .tarjeta video, .item .foto img, .item .foto video { transition: none; }
  html { scroll-behavior: auto; }
}
html.lite .desvela, html.lite .desvela img, html.lite .desvela video, html.lite .hero-marca { animation: none !important; }