@charset "utf-8";
/* ==========================================================================
   Latitud 33 Sur × Baquedano 660 — Dirección B "De noche"
   Hoja única. Sin framework. Tokens en custom properties.
   Contrastes verificados (WCAG 2.x, cálculo propio):
     tinta #F4EFE3 / noche #0B0F14 ....... 16.75:1
     oro   #E8BA4A / noche #0B0F14 ....... 10.57:1
     terra #D26E4B / noche #0B0F14 ........ 5.56:1
     muted #A8A093 / noche #0B0F14 ........ 7.43:1
     muted #A8A093 / sup   #151B22 ........ 6.70:1
     noche #0B0F14 / oro   #E8BA4A ....... 10.57:1
   ========================================================================== */

/* ---------- Fuentes (autoalojadas, OFL-1.1) ---------- */
@font-face{font-family:Khand;src:url(../fonts/khand-500.woff2) format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:Khand;src:url(../fonts/khand-700.woff2) format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:Lato;src:url(../fonts/lato-400.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Lato;src:url(../fonts/lato-400-i.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:Lato;src:url(../fonts/lato-700.woff2) format("woff2");font-weight:700;font-style:normal;font-display:swap}

/* ---------- Tokens ---------- */
:root{
  --noche:#0B0F14;
  --noche-2:#070A0E;
  --sup:#151B22;
  --sup-2:#1D2530;
  --tinta:#F4EFE3;
  --muted:#A8A093;
  --oro:#E8BA4A;
  --oro-claro:#F2C95F;
  --terra:#D26E4B;
  --oliva:#7A9C59;
  --pizarra:#8FA6BF;
  --linea:rgba(244,239,227,.14);
  --linea-fuerte:rgba(244,239,227,.26);

  --f-display:Khand,"Arial Narrow",Impact,sans-serif;
  --f-body:Lato,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;

  --e1:.25rem; --e2:.5rem; --e3:1rem; --e4:1.5rem; --e5:2.5rem;
  --e6:4rem; --e7:6rem; --e8:9rem;

  --ancho:min(100% - 2.5rem, 1180px);
  --ancho-ancho:min(100% - 2rem, 1500px);
  --radio:2px;
  --curva:cubic-bezier(.22,1,.36,1);
  --sombra:0 24px 60px -32px rgba(0,0,0,.9);
}

/* ---------- Reset contenido ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }

body{
  margin:0;
  background:var(--noche);
  color:var(--tinta);
  font-family:var(--f-body);
  font-size:clamp(1rem,.28vw + .93rem,1.0625rem);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,picture,video,svg{display:block; max-width:100%}
img{height:auto}
h1,h2,h3,h4{margin:0; font-weight:500; line-height:1; text-wrap:balance}
p{margin:0 0 1em; text-wrap:pretty}
ul,ol{margin:0 0 1em; padding-inline-start:1.2em}
a{color:var(--oro); text-underline-offset:.22em; text-decoration-thickness:1px}
a:hover{color:var(--oro-claro)}

/* Foco visible: sobre fondo oscuro el anillo oro da 10.57:1.
   Sobre superficies oro se invierte a tinta oscura (el azul #0B5FFF sólo da 2.82:1 sobre oro). */
:focus-visible{outline:3px solid var(--oro); outline-offset:3px; border-radius:2px}
.btn--oro:focus-visible,.salto:focus-visible{outline-color:var(--noche); outline-offset:3px; box-shadow:0 0 0 7px rgba(244,239,227,.92)}

/* ---------- Utilidades ---------- */
.contenedor{width:var(--ancho); margin-inline:auto}
.contenedor--ancho{width:var(--ancho-ancho); margin-inline:auto}

/* La cabecera es fija: sin esto, al saltar a un ancla la sección queda tapada. */
section[id],div[id="ruta-alojamiento"],div[id="ruta-comida"]{scroll-margin-top:6rem}

/* Los hijos de grid y flex traen min-width:auto y pueden ensanchar la página
   más que el viewport. Esto es lo que provocaba el desbordamiento en 375 px. */
.hero__contenido,.narrativa__grid>*,.calle__grid>*,.carta__grid>*,
.testimonios__grid>*,.cierre__rutas>*,.pie__grid>*,.mesa__pasos>*,
.ubicacion__grid>*,.cinta__lista>*{min-width:0}
.hero h1,.seccion__titulo,.cierre h2,.calle__texto h2,.paso h3,
.e404__num,.marca__texto b{overflow-wrap:break-word}
html,body{max-width:100%}
.visualmente-oculto{
  position:absolute!important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.salto{
  position:absolute; inset-block-start:.5rem; inset-inline-start:.5rem; z-index:100;
  transform:translateY(-200%); background:var(--oro); color:var(--noche);
  padding:.85rem 1.25rem; font:700 .8rem/1 var(--f-body); letter-spacing:.12em;
  text-transform:uppercase; text-decoration:none; transition:transform .18s var(--curva);
}
.salto:focus{transform:translateY(0)}

.etiqueta{
  display:flex; align-items:center; gap:.75rem;
  font:700 .72rem/1 var(--f-body); letter-spacing:.28em; text-transform:uppercase;
  color:var(--oro); margin:0 0 var(--e3);
}
.etiqueta::before{content:""; width:2.2rem; height:2px; background:var(--oro); flex:none}

.seccion{padding-block:var(--e7)}
.seccion--ajustada{padding-block:var(--e6)}
.seccion__titulo{
  font:500 clamp(2.1rem,6vw,4.4rem)/.95 var(--f-display);
  text-transform:uppercase; letter-spacing:-.005em; margin:0 0 var(--e3);
}
.seccion__titulo em{font-style:normal; color:var(--oro)}
.seccion__intro{max-width:56ch; color:var(--muted); font-size:clamp(1rem,.5vw + .9rem,1.15rem)}

/* ---------- Botones ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  font:700 .78rem/1 var(--f-body); letter-spacing:.16em; text-transform:uppercase;
  padding:1.05rem 1.6rem; border-radius:999px; text-decoration:none; border:2px solid transparent;
  transition:transform .2s var(--curva), background-color .2s, color .2s, border-color .2s, box-shadow .2s;
  cursor:pointer;
}
.btn--oro{background:var(--oro); color:var(--noche); box-shadow:0 12px 34px -16px rgba(232,186,74,.7)}
.btn--oro:hover{background:var(--oro-claro); color:var(--noche); transform:translateY(-2px)}
.btn--linea{border-color:var(--linea-fuerte); color:var(--tinta); background:transparent}
.btn--linea:hover{border-color:var(--oro); color:var(--oro); transform:translateY(-2px)}
.btn--wa{background:transparent; border-color:rgba(122,156,89,.75); color:#B7D69A}
.btn--wa:hover{background:rgba(122,156,89,.16); color:#CFE8B8; border-color:var(--oliva); transform:translateY(-2px)}
.btn__flecha{font-size:1.05em; line-height:0}

/* ---------- Cabecera ---------- */
.cabecera{
  position:fixed; inset-block-start:0; inset-inline:0; z-index:60;
  padding-block:var(--e3);
  background:linear-gradient(180deg,rgba(7,10,14,.92) 0%,rgba(7,10,14,.55) 62%,rgba(7,10,14,0) 100%);
  transition:background-color .3s, padding .3s;
}
.cabecera__interior{display:flex; align-items:center; justify-content:space-between; gap:var(--e3)}
.marca{display:flex; align-items:center; gap:.8rem; text-decoration:none; color:var(--tinta)}
/* Logo real de la marca en versión negativa (blanco hueso sobre transparente), generado
   desde el PNG original: se usa en la cabecera y en el pie, sobre fondo oscuro. */
.marca__logo{height:2.6rem; width:auto; flex:none; display:block}
@media (min-width:900px){ .marca__logo{height:3.4rem} }
.marca__texto b{display:block; font:500 1.02rem/1 var(--f-display); letter-spacing:.2em; text-transform:uppercase; white-space:nowrap}
.marca__texto small{display:block; font:400 .62rem/1.5 var(--f-body); letter-spacing:.28em; text-transform:uppercase; color:var(--muted)}
/* En pantallas estrechas el bloque de marca se partía en cuatro líneas. */
@media (max-width:1180px){ .marca__texto small{display:none} }
@media (max-width:520px){
  .marca__logo{height:2.2rem}
  .marca__texto b{font-size:.92rem; letter-spacing:.16em}
}
.nav{display:none; align-items:center; gap:1.15rem; flex:none}
@media (min-width:960px){ .nav{display:flex} }
.nav a{
  font:700 .70rem/1 var(--f-body); letter-spacing:.13em; text-transform:uppercase;
  color:var(--tinta); text-decoration:none; padding-block:.5rem; border-block-end:2px solid transparent;
  transition:border-color .2s, color .2s; white-space:nowrap;
}
.nav a:hover,.nav a:focus-visible{border-block-end-color:var(--oro); color:var(--oro)}
.cabecera__cta{display:none}
@media (min-width:700px){ .cabecera__cta{display:inline-flex} }
.menu-boton{
  display:inline-flex; align-items:center; gap:.55rem; background:transparent; color:var(--tinta);
  border:2px solid var(--linea-fuerte); border-radius:999px; padding:.6rem 1rem;
  font:700 .7rem/1 var(--f-body); letter-spacing:.16em; text-transform:uppercase; cursor:pointer;
}
@media (min-width:960px){ .menu-boton{display:none} }
.menu-boton__barras{display:grid; gap:3px; width:16px}
.menu-boton__barras span{display:block; height:2px; background:currentColor; transition:transform .2s}

/* Panel de navegación móvil */
.panel{
  position:fixed; inset:0; z-index:70; background:rgba(7,10,14,.97);
  backdrop-filter:blur(8px); display:grid; align-content:center; gap:var(--e2);
  padding:var(--e6) var(--e4); opacity:0; visibility:hidden; transition:opacity .25s, visibility .25s;
}
.panel[data-abierto="true"]{opacity:1; visibility:visible}
.panel a{
  font:500 clamp(1.8rem,9vw,2.6rem)/1.1 var(--f-display); text-transform:uppercase;
  letter-spacing:.02em; color:var(--tinta); text-decoration:none; padding-block:.35rem;
  border-block-end:1px solid var(--linea);
}
.panel a:hover,.panel a:focus-visible{color:var(--oro)}
.panel__cerrar{
  position:absolute; inset-block-start:var(--e3); inset-inline-end:var(--e4);
  background:transparent; border:2px solid var(--linea-fuerte); color:var(--tinta);
  border-radius:999px; padding:.6rem 1.1rem; cursor:pointer;
  font:700 .7rem/1 var(--f-body); letter-spacing:.16em; text-transform:uppercase;
}
.panel__nota{margin-block-start:var(--e4); color:var(--muted); font-size:.85rem}

/* ---------- Hero ---------- */
.hero{
  position:relative; min-height:100svh; display:grid; align-content:end;
  padding-block:var(--e8) var(--e7); overflow:hidden; isolation:isolate;
}
.hero__media{position:absolute; inset:0; z-index:-2}
/* `picture` es el que debe estirarse: con altura automática, el img al 100 % caía
   al alto intrínseco y dejaba media pantalla vacía (defecto detectado en auditoría). */
.hero__media picture{position:absolute; inset:0; display:block}
.hero__media img{width:100%; height:100%; object-fit:cover; object-position:center 42%}
.hero__media::after{
  content:""; position:absolute; inset:0;
  background:
    /* scrim lateral: asegura contraste del texto sobre la foto, que tiene zonas muy claras */
    linear-gradient(100deg,rgba(7,10,14,.93) 0%,rgba(7,10,14,.74) 40%,rgba(7,10,14,.20) 72%,rgba(7,10,14,.46) 100%),
    linear-gradient(180deg,rgba(11,15,20,.55) 0%,rgba(11,15,20,.10) 28%,rgba(11,15,20,.52) 72%,var(--noche) 100%),
    radial-gradient(90% 70% at 78% 12%,rgba(232,186,74,.18) 0%,rgba(232,186,74,0) 62%),
    radial-gradient(70% 60% at 10% 88%,rgba(210,110,75,.20) 0%,rgba(210,110,75,0) 66%);
}
/* grano sutil, sin imagen extra */
.hero::after{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; opacity:.5;
  background-image:repeating-linear-gradient(0deg,rgba(255,255,255,.028) 0 1px,transparent 1px 3px);
}
.hero__contenido{position:relative}
.hero h1{
  font:500 clamp(3rem,12.5vw,9.5rem)/.84 var(--f-display);
  text-transform:uppercase; letter-spacing:-.015em; margin:0 0 var(--e4);
}
.hero h1 .oro{display:block; color:var(--oro)}
.hero h1 .sub{
  display:block; font-size:.3em; letter-spacing:.14em; color:var(--muted);
  margin-block-start:.7em; font-weight:500;
}
.hero__lede{
  max-width:44ch; font-size:clamp(1.02rem,1.4vw,1.25rem);
  color:#E6E1D4; margin:0 0 var(--e5);
}
.hero__ctas{display:flex; flex-wrap:wrap; gap:var(--e2) var(--e3); align-items:center}
.hero__nota{
  margin-block-start:var(--e4); font-size:.8rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--muted);
}
.hero__desliza{
  display:none; position:absolute; inset-block-end:var(--e4); inset-inline-end:2.5rem;
  align-items:center; gap:.65rem; font:700 .66rem/1 var(--f-body);
  letter-spacing:.26em; text-transform:uppercase; color:var(--muted);
}
@media (min-width:960px){ .hero__desliza{display:flex} }
.hero__desliza i{display:block; width:1px; height:2.6rem; background:linear-gradient(var(--oro),transparent)}
@media (prefers-reduced-motion:no-preference){
  .hero__desliza i{animation:caer 2.6s ease-in-out infinite}
}
@keyframes caer{0%,100%{transform:scaleY(.4);opacity:.5}50%{transform:scaleY(1);opacity:1}}

/* ---------- Cinta de datos ---------- */
.cinta{background:var(--noche-2); border-block:1px solid var(--linea)}
.cinta__lista{display:grid; grid-template-columns:repeat(2,1fr); margin:0; gap:1px; background:var(--linea)}
@media (min-width:780px){ .cinta__lista{grid-template-columns:repeat(4,1fr)} }
.cinta__item{background:var(--noche-2); padding:var(--e4) var(--e3); margin:0}
.cinta__item dt{
  font:400 .64rem/1.4 var(--f-body); letter-spacing:.24em; text-transform:uppercase;
  color:var(--muted); margin:0;
}
.cinta__item dd{margin:.45rem 0 0; font:700 clamp(1.2rem,2.2vw,1.6rem)/1 var(--f-display); color:var(--oro); letter-spacing:.02em}

/* ---------- Narrativa con pasos fijos ---------- */
.narrativa{position:relative; background:var(--noche)}
.narrativa__grid{display:grid; gap:0}
@media (min-width:900px){
  .narrativa__grid{grid-template-columns:1fr 1fr; gap:var(--e5); align-items:start}
}
.narrativa__media{position:relative}
.narrativa__marco{
  position:relative; overflow:hidden; border-radius:var(--radio);
  aspect-ratio:4/5; background:var(--sup); box-shadow:var(--sombra);
}
@media (min-width:900px){
  .narrativa__marco{position:sticky; top:14vh; aspect-ratio:3/4}
}
.narrativa__marco img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; transition:opacity .65s var(--curva);
}
.narrativa__marco img[data-activa="true"]{opacity:1}
.narrativa__marco::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg,rgba(11,15,20,.1) 0%,rgba(11,15,20,0) 40%,rgba(11,15,20,.55) 100%);
}
.narrativa__pasos{display:grid; gap:0}
@media (min-width:900px){ .narrativa__pasos{gap:0; padding-block:8vh} }
.paso{padding-block:var(--e5); border-block-start:1px solid var(--linea)}
.paso:first-child{border-block-start:0}
@media (min-width:900px){
  .paso{min-height:60vh; display:flex; flex-direction:column; justify-content:center; padding-block:var(--e6)}
}
.paso__num{
  font:400 clamp(2.4rem,7vw,4.6rem)/1 var(--f-display); color:var(--sup-2);
  letter-spacing:.02em; margin:0 0 .2rem;
}
.paso h3{
  font:500 clamp(1.6rem,3.6vw,2.6rem)/1 var(--f-display); text-transform:uppercase;
  color:var(--tinta); margin:0 0 var(--e2);
}
.paso h3 span{color:var(--oro)}
.paso p{color:var(--muted); max-width:42ch; margin:0}

/* ---------- Vídeo ---------- */
.video{background:var(--noche-2)}
.fachada{
  position:relative; display:block; width:100%; padding:0; border:0; cursor:pointer;
  background:var(--sup); border-radius:var(--radio); overflow:hidden;
  aspect-ratio:16/9; box-shadow:var(--sombra);
}
.fachada img{width:100%; height:100%; object-fit:cover; transition:transform .6s var(--curva), opacity .4s}
.fachada::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(7,10,14,.25) 0%,rgba(7,10,14,.62) 100%);
  transition:background .3s;
}
.fachada:hover img{transform:scale(1.03)}
.fachada__play{
  position:absolute; inset:0; z-index:2; display:grid; place-content:center; justify-items:center;
  gap:var(--e3); text-align:center; padding:var(--e3);
}
.fachada__aro{
  width:clamp(4rem,8vw,5.6rem); aspect-ratio:1; border-radius:50%;
  background:var(--oro); display:grid; place-items:center;
  box-shadow:0 18px 44px -16px rgba(232,186,74,.8);
  transition:transform .25s var(--curva);
}
.fachada:hover .fachada__aro{transform:scale(1.08)}
.fachada__aro svg{width:36%; height:36%; fill:var(--noche); display:block}
.fachada__texto{
  font:700 .74rem/1.5 var(--f-body); letter-spacing:.22em; text-transform:uppercase;
  color:var(--tinta); text-shadow:0 2px 14px rgba(0,0,0,.85);
}
.fachada__texto b{display:block; font-weight:700; color:var(--oro)}
.video__marco{position:relative; border-radius:var(--radio); overflow:hidden; aspect-ratio:16/9; background:#000}
.video__marco iframe{position:absolute; inset:0; width:100%; height:100%; border:0}
.video__pie{margin-block-start:var(--e3); display:flex; flex-wrap:wrap; gap:.5rem var(--e4); color:var(--muted); font-size:.84rem}
.video__pie b{color:var(--tinta); font-weight:700}

/* ---------- Galería ---------- */
.galeria-grid{
  display:grid; gap:var(--e2); grid-template-columns:repeat(2,1fr);
}
@media (min-width:700px){ .galeria-grid{grid-template-columns:repeat(3,1fr)} }
@media (min-width:1100px){ .galeria-grid{grid-template-columns:repeat(4,1fr)} }
.galeria-grid a{
  display:block; position:relative; overflow:hidden; border-radius:var(--radio);
  background:var(--sup); text-decoration:none;
}
.galeria-grid img{
  width:100%; aspect-ratio:4/5; object-fit:cover;
  transition:transform .55s var(--curva), filter .4s;
  filter:saturate(.94) brightness(.94);
}
.galeria-grid a:hover img,.galeria-grid a:focus-visible img{transform:scale(1.05); filter:saturate(1.05) brightness(1.02)}
.galeria-pie{
  position:absolute; inset-block-end:0; inset-inline:0; padding:1.4rem .85rem .7rem;
  font:700 .66rem/1.35 var(--f-body); letter-spacing:.14em; text-transform:uppercase;
  color:var(--tinta); background:linear-gradient(transparent,rgba(7,10,14,.92));
  pointer-events:none;
}

/* ---------- Cruzar la calle ---------- */
.calle{
  position:relative; background:var(--noche); overflow:hidden;
}
.calle__grid{display:grid; gap:var(--e5); align-items:center}
@media (min-width:900px){ .calle__grid{grid-template-columns:.95fr 1.05fr; gap:var(--e6)} }
.calle__foto{position:relative; border-radius:var(--radio); overflow:hidden; box-shadow:var(--sombra)}
.calle__foto img{width:100%; aspect-ratio:4/3; object-fit:cover}
.calle__placa{
  position:absolute; inset-block-end:var(--e3); inset-inline-start:var(--e3);
  background:var(--oro); color:var(--noche); padding:.5rem .95rem; border-radius:999px;
  font:700 .74rem/1 var(--f-body); letter-spacing:.18em; text-transform:uppercase;
}
.calle__texto h2{
  font:500 clamp(2rem,5.4vw,3.8rem)/.95 var(--f-display);
  text-transform:uppercase; margin:0 0 var(--e3);
}
.calle__texto h2 em{font-style:normal; color:var(--oro)}
.calle__texto p{color:var(--muted); max-width:46ch}
.calle__lista{list-style:none; padding:0; margin:var(--e4) 0 0; display:grid; gap:.65rem}
.calle__lista li{display:flex; gap:.7rem; align-items:flex-start; color:var(--tinta); font-size:.96rem}
.calle__lista li::before{
  content:""; flex:none; width:.5rem; height:.5rem; margin-block-start:.55em;
  border-radius:50%; background:var(--oro);
}

/* ---------- Mesa del huésped ---------- */
.mesa{background:linear-gradient(180deg,var(--noche) 0%,#101720 45%,var(--noche) 100%)}
.mesa__panel{
  background:var(--sup); border:1px solid var(--linea); border-radius:var(--radio);
  padding:clamp(1.5rem,4vw,3rem); box-shadow:var(--sombra);
}
.mesa__pasos{list-style:none; padding:0; margin:var(--e4) 0 0; display:grid; gap:1px; background:var(--linea)}
@media (min-width:820px){ .mesa__pasos{grid-template-columns:repeat(3,1fr)} }
.mesa__pasos li{background:var(--sup); padding:var(--e4) var(--e3)}
.mesa__pasos b{
  display:block; font:400 .66rem/1 var(--f-body); letter-spacing:.24em;
  text-transform:uppercase; color:var(--oro); margin-block-end:.6rem;
}
.mesa__pasos strong{display:block; font:500 1.3rem/1.15 var(--f-display); text-transform:uppercase; margin-block-end:.4rem}
.mesa__pasos span{color:var(--muted); font-size:.92rem}

/* ---------- Carta ---------- */
.carta__grid{display:grid; gap:var(--e5)}
@media (min-width:860px){ .carta__grid{grid-template-columns:repeat(2,1fr); gap:var(--e4) var(--e5)} }
.grupo h3{
  font:500 1.5rem/1 var(--f-display); text-transform:uppercase; color:var(--oro);
  margin:0 0 var(--e2); padding-block-end:.6rem; border-block-end:1px solid var(--linea);
}
.grupo ul{list-style:none; margin:0; padding:0}
.grupo li{
  display:flex; align-items:baseline; gap:.6rem; padding-block:.7rem;
  border-block-end:1px dashed rgba(244,239,227,.09);
  font-size:.95rem;
}
.grupo li:last-child{border-block-end:0}
.grupo .plato{flex:1 1 auto; min-width:0}
.grupo .plato b{font-weight:700; color:var(--tinta)}
.grupo .plato small{display:block; color:var(--muted); font-size:.85rem; line-height:1.45}
.grupo .precio{
  flex:none; font:700 .95rem/1 var(--f-body); color:var(--oro);
  font-variant-numeric:tabular-nums; white-space:nowrap;
}

/* ---------- Testimonios ---------- */
.testimonios{background:var(--noche-2)}
.testimonios__grid{display:grid; gap:var(--e3)}
@media (min-width:820px){ .testimonios__grid{grid-template-columns:repeat(3,1fr)} }
.cita{
  margin:0; background:var(--sup); border:1px solid var(--linea); border-radius:var(--radio);
  padding:var(--e4); display:flex; flex-direction:column; gap:var(--e3);
}
.cita blockquote{margin:0; font-size:1.02rem; line-height:1.55; color:var(--tinta); font-style:italic}
.cita blockquote::before{content:"«"; color:var(--oro); font-style:normal; margin-inline-end:.1em}
.cita blockquote::after{content:"»"; color:var(--oro); font-style:normal; margin-inline-start:.1em}
.cita figcaption{
  margin-block-start:auto; font:700 .72rem/1.4 var(--f-body);
  letter-spacing:.18em; text-transform:uppercase; color:var(--muted);
}

/* ---------- Ubicación ---------- */
.ubicacion__grid{display:grid; gap:var(--e5)}
@media (min-width:900px){ .ubicacion__grid{grid-template-columns:1fr .8fr; align-items:start} }
.datos{display:grid; gap:var(--e3); margin:0}
.datos div{border-block-start:1px solid var(--linea); padding-block-start:var(--e2)}
.datos dt{font:400 .64rem/1.4 var(--f-body); letter-spacing:.24em; text-transform:uppercase; color:var(--muted)}
.datos dd{margin:.35rem 0 0; font-size:1rem; color:var(--tinta)}
.datos dd a{color:var(--tinta); text-decoration-color:var(--linea-fuerte)}
.datos dd a:hover{color:var(--oro)}

/* ---------- Cierre ---------- */
.cierre{
  background:
    radial-gradient(70% 90% at 50% 0%,rgba(232,186,74,.16) 0%,rgba(232,186,74,0) 62%),
    var(--noche-2);
  border-block-start:1px solid var(--linea);
  text-align:center;
}
.cierre h2{
  font:500 clamp(2.4rem,8vw,5.4rem)/.9 var(--f-display); text-transform:uppercase;
  margin:0 auto var(--e3); max-width:16ch;
}
.cierre h2 em{font-style:normal; color:var(--oro)}
.cierre p{color:var(--muted); max-width:52ch; margin:0 auto var(--e5)}
.cierre__ctas{display:flex; flex-wrap:wrap; gap:var(--e2) var(--e3); justify-content:center}
.cierre__rutas{
  margin-block-start:var(--e5); display:grid; gap:var(--e3); text-align:start;
}
@media (min-width:760px){ .cierre__rutas{grid-template-columns:repeat(2,1fr)} }
.ruta{background:rgba(21,27,34,.75); border:1px solid var(--linea); border-radius:var(--radio); padding:var(--e4)}
.ruta h3{font:500 1.15rem/1.1 var(--f-display); text-transform:uppercase; color:var(--oro); margin:0 0 .5rem}
.ruta p{color:var(--muted); font-size:.92rem; margin:0}

/* ---------- Pie ---------- */
.pie{background:var(--noche-2); border-block-start:1px solid var(--linea); padding-block:var(--e6) var(--e4)}
.pie__grid{display:grid; gap:var(--e5)}
@media (min-width:820px){ .pie__grid{grid-template-columns:1.2fr 1fr 1fr; gap:var(--e4)} }
.pie h2{font:700 .66rem/1 var(--f-body); letter-spacing:.24em; text-transform:uppercase; color:var(--muted); margin:0 0 var(--e3)}
.pie ul{list-style:none; padding:0; margin:0; display:grid; gap:.6rem}
.pie a{color:var(--tinta); text-decoration:none; font-size:.94rem}
.pie a:hover{color:var(--oro)}
.pie__logo{width:150px; height:auto}
.pie__legal{
  margin-block-start:var(--e5); padding-block-start:var(--e3); border-block-start:1px solid var(--linea);
  display:flex; flex-wrap:wrap; gap:.5rem var(--e4); justify-content:space-between;
  color:var(--muted); font-size:.78rem;
}
.pie__legal a{color:var(--muted); text-decoration:underline; font-size:.78rem}

/* ---------- Apariciones ---------- */
@media (prefers-reduced-motion:no-preference){
  .revelar{opacity:0; transform:translateY(16px); transition:opacity .6s var(--curva), transform .6s var(--curva)}
  .revelar.in{opacity:1; transform:none}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important; animation-iteration-count:1!important; transition-duration:.001ms!important}
  .narrativa__marco img{transition:none}
}

/* Aviso de material pendiente: se marca con claridad, no se disimula */
.pendiente{
  display:grid; place-content:center; justify-items:center; gap:.7rem; text-align:center;
  aspect-ratio:4/5; padding:var(--e4); border-radius:var(--radio);
  border:2px dashed rgba(232,186,74,.42);
  background:
    radial-gradient(60% 50% at 50% 40%,rgba(232,186,74,.10) 0%,rgba(232,186,74,0) 70%),
    var(--sup);
}
.pendiente strong{
  font:500 1.1rem/1.15 var(--f-display); text-transform:uppercase; letter-spacing:.06em; color:var(--oro);
}
.pendiente span{font-size:.82rem; color:var(--muted); max-width:26ch}

/* ---------- Lightbox (GLightbox) overrides ---------- */
.glightbox-clean .gslide-description{background:var(--noche)}
.glightbox-clean .gslide-title,.glightbox-clean .gslide-desc{color:var(--tinta); font-family:var(--f-body)}

/* ---------- Selector de idioma (ES / EN) ---------- */
.idioma{
  display:none; align-items:center; gap:.15rem;
  font:700 .72rem/1 var(--f-body); letter-spacing:.14em;
}
@media (min-width:960px){ .idioma{display:flex} }
.idioma a{
  color:var(--muted); text-decoration:none; padding:.45rem .5rem; border-radius:2px;
  border-block-end:2px solid transparent;
}
.idioma a:hover{color:var(--oro)}
.idioma a[aria-current="true"]{color:var(--oro); border-block-end-color:var(--oro)}
.idioma > span{color:var(--linea-fuerte)}

.panel__idioma{
  margin:var(--e4) 0 0; display:flex; gap:.6rem; align-items:center;
  font:700 .78rem/1 var(--f-body); letter-spacing:.16em; text-transform:uppercase;
}
.panel__idioma a{
  font:inherit; letter-spacing:inherit; text-transform:inherit;
  padding:.6rem 1rem; border:2px solid var(--linea-fuerte); border-radius:999px;
  color:var(--tinta); border-block-end-width:2px;
}
.panel__idioma a:hover,.panel__idioma a:focus-visible{color:var(--oro); border-color:var(--oro)}
.panel__idioma a[aria-current="true"]{border-color:var(--oro); color:var(--oro)}

/* ---------- Reproductor de vídeo en modal ---------- */
.dialogo{
  border:0; padding:0; background:transparent; color:var(--tinta);
  width:min(1100px, 94vw); max-width:min(1100px, 94vw); max-height:92vh;
  margin:auto;
}
.dialogo::backdrop{background:rgba(4,6,9,.92); backdrop-filter:blur(6px)}
.dialogo__caja{
  background:var(--sup); border:1px solid var(--linea-fuerte); border-radius:var(--radio);
  overflow:hidden; box-shadow:0 40px 90px -40px #000;
}
.dialogo__barra{
  display:flex; align-items:center; justify-content:space-between; gap:var(--e3);
  padding:.8rem 1rem; border-block-end:1px solid var(--linea);
}
.dialogo__titulo{
  margin:0; font:500 .95rem/1.2 var(--f-display); text-transform:uppercase;
  letter-spacing:.08em; color:var(--tinta);
}
.dialogo__cerrar{
  flex:none; background:transparent; color:var(--tinta); cursor:pointer;
  border:2px solid var(--linea-fuerte); border-radius:999px; padding:.5rem .95rem;
  font:700 .68rem/1 var(--f-body); letter-spacing:.16em; text-transform:uppercase;
  transition:border-color .2s, color .2s;
}
.dialogo__cerrar:hover{border-color:var(--oro); color:var(--oro)}
.dialogo__marco{aspect-ratio:16/9; background:#000}
.dialogo__marco:empty{display:none}
.dialogo__marco iframe{display:block; width:100%; height:100%; border:0}
.dialogo__aviso{
  margin:0; padding:1rem; font-size:.9rem; line-height:1.6;
  color:var(--tinta); background:rgba(210,110,75,.14);
  border-block-start:2px solid var(--terra);
}
.dialogo__aviso b{color:var(--oro)}
.dialogo__aviso a{color:var(--oro)}
.dialogo__pie{
  margin:0; padding:.85rem 1rem; font-size:.82rem; color:var(--muted);
  border-block-start:1px solid var(--linea);
}
.dialogo__pie a{color:var(--oro)}