/* ============================================================
   HOTEL 1641 — MOCKUP NUEVA PLATAFORMA WEB
   Identidad "Dark Neon Boutique": magenta de marca sobre negro
   profundo. Dorado reservado a la Promoción Nocturna. Tema
   nocturno único: es la identidad del negocio, no una omisión.
   ============================================================ */

/* Tipografía de títulos: Outfit (geométrica moderna, más angosta que la serif),
   incrustada en el archivo para funcionar sin internet */
@font-face{
  font-family:'Outfit'; font-style:normal; font-weight:600; font-display:swap;
  src:url("/assets/fonts/outfit600.woff2") format('woff2');
}

:root{
  --negro:#05050A;
  --grafito:#101017;
  --grafito-2:#161620;
  --blanco:#F7F3EF;
  --texto-2:rgba(247,243,239,.74);
  --texto-3:rgba(247,243,239,.5);
  --magenta:#FA3757;
  --magenta-suave:rgba(250,55,87,.13);
  --oro:#EFC368;
  --oro-suave:rgba(239,195,104,.1);
  --azul:#5B8DEF;
  --borde:rgba(247,243,239,.09);
  --radio:18px;
  --radio-s:12px;
  --glow:0 0 22px rgba(250,55,87,.38);
  --glow-oro:0 0 22px rgba(239,195,104,.32);
  --sombra:0 18px 48px rgba(0,0,0,.5);
  --fuente-display:"Outfit", "Bahnschrift", "Segoe UI", system-ui, sans-serif;
  --fuente-base:"Manrope", "Segoe UI", system-ui, -apple-system, sans-serif;
  --header-h:64px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:calc(var(--header-h) + 56px)}
body{
  margin:0;
  background:var(--negro);
  color:var(--blanco);
  font-family:var(--fuente-base);
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img,svg{max-width:100%}
a{color:inherit}
:focus-visible{outline:2px solid var(--magenta); outline-offset:3px; border-radius:4px}

h1,h2,h3{font-family:var(--fuente-display); font-weight:600; line-height:1.15; text-wrap:balance; margin:0}
p{margin:0}

.contenedor{max-width:1100px; margin:0 auto; padding:0 20px}
section{padding:72px 0}
@media(min-width:768px){ section{padding:96px 0} }

.eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-size:12px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--magenta); font-weight:700; margin-bottom:14px;
}
.eyebrow::before{content:""; width:26px; height:1px; background:var(--magenta); box-shadow:var(--glow)}
.titulo{font-size:clamp(28px,4.5vw,42px); margin-bottom:14px}
.bajada{color:var(--texto-2); max-width:62ch; margin-bottom:34px}

/* ---------- Botones ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:13px 24px; border-radius:999px; border:1px solid transparent;
  font:700 15px/1 var(--fuente-base); text-decoration:none; cursor:pointer;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
  white-space:nowrap;
}
.btn svg{width:17px; height:17px; flex:none}
.btn--magenta{background:var(--magenta); color:#fff; box-shadow:var(--glow)}
.btn--magenta:hover{transform:translateY(-2px); box-shadow:0 0 34px rgba(250,55,87,.55)}
.btn--fantasma{border-color:var(--borde); color:var(--blanco); background:rgba(247,243,239,.04)}
.btn--fantasma:hover{border-color:rgba(250,55,87,.5); box-shadow:var(--glow)}
/* CTA de reserva: celeste neón de alto impacto, mismo peso que el CTA magenta */
.btn--celeste{
  background:linear-gradient(140deg, #38C6F0, #4FD8FF);
  color:#04212D;
  box-shadow:0 0 24px rgba(79,216,255,.42);
}
.btn--celeste:hover{transform:translateY(-2px); box-shadow:0 0 38px rgba(79,216,255,.62)}
/* Badges pequeños de descarga de la app iMotel */
.hero__stores{margin-top:16px; display:flex; align-items:center; gap:10px; flex-wrap:wrap; font-size:13px; color:var(--texto-3)}
.hero__stores b{color:var(--texto-2)}
.store-badge{
  display:inline-flex; align-items:center; gap:7px;
  padding:8px 14px; border-radius:10px;
  border:1px solid var(--borde); background:rgba(247,243,239,.05);
  color:var(--texto-2); text-decoration:none;
  font:700 12px/1 var(--fuente-base);
  transition:border-color .18s, color .18s, box-shadow .18s, transform .18s;
}
.store-badge svg{width:14px; height:14px; flex:none}
.store-badge:hover{
  color:#fff; border-color:rgba(79,216,255,.6);
  box-shadow:0 0 16px rgba(79,216,255,.28); transform:translateY(-2px);
}
.btn--oro{background:var(--oro); color:#241a05; box-shadow:var(--glow-oro)}
.btn--oro:hover{transform:translateY(-2px); box-shadow:0 0 34px rgba(239,195,104,.5)}
.btn--ws{background:#1faa54; color:#fff}
.btn--ws:hover{transform:translateY(-2px); box-shadow:0 0 24px rgba(31,170,84,.5)}

/* ---------- Chips ---------- */
.chip{
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 13px; border-radius:999px; font-size:13px; font-weight:600;
  border:1px solid var(--borde); background:rgba(247,243,239,.04); color:var(--texto-2);
}
.chip--18{border-color:rgba(250,55,87,.45); color:var(--magenta); background:var(--magenta-suave)}
.chip--oro{border-color:rgba(239,195,104,.4); color:var(--oro); background:var(--oro-suave)}

/* ---------- Top bar ---------- */
.topbar{
  display:none; font-size:13px; color:var(--texto-2);
  border-bottom:1px solid var(--borde); background:rgba(5,5,10,.9);
  position:fixed; inset:0 0 auto 0; z-index:60; height:36px;
}
.topbar .contenedor{display:flex; align-items:center; justify-content:space-between; height:100%}
.topbar a{text-decoration:none}
.topbar a:hover{color:var(--magenta)}
.topbar__grupo{display:flex; align-items:center; gap:20px}
.topbar__grupo svg{width:14px; height:14px; vertical-align:-2px; margin-right:5px}
.punto-abierto{display:inline-block; width:7px; height:7px; border-radius:50%; background:#3ddc84; box-shadow:0 0 8px #3ddc84; margin-right:7px}
@media(min-width:1024px){ .topbar{display:block} }

/* ---------- Header ---------- */
.header{
  position:fixed; inset:0 0 auto 0; z-index:50; height:var(--header-h);
  display:flex; align-items:center;
  background:rgba(5,5,10,.55);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid transparent;
  transition:background .25s ease, border-color .25s ease;
}
@media(min-width:1024px){ .header{top:36px} }
.header.con-scroll{background:rgba(5,5,10,.88); border-color:var(--borde)}
.header .contenedor{display:flex; align-items:center; justify-content:space-between; gap:16px; width:100%}
.logo{display:flex; align-items:center; gap:11px; text-decoration:none}
/* Logotipo oficial PNG con transparencia real (variante para fondo oscuro) */
.logo__img{height:24px; width:auto; display:block}
.logo__img--footer{height:30px}
@media(min-width:768px){ .logo__img{height:27px} }
.nav-desktop{display:none; align-items:center; gap:26px}
.nav-desktop a{font-size:14px; font-weight:600; color:var(--texto-2); text-decoration:none; transition:color .15s}
.nav-desktop a:hover{color:var(--blanco); text-shadow:0 0 14px rgba(250,55,87,.6)}
@media(min-width:1024px){ .nav-desktop{display:flex} }
.header .btn--magenta{padding:11px 20px; font-size:14px; display:none}
@media(min-width:640px){ .header .btn--magenta{display:inline-flex} }

/* Botón hamburguesa */
.btn-menu{
  width:44px; height:44px; border-radius:12px; border:1px solid var(--borde);
  background:rgba(247,243,239,.05); color:var(--blanco); cursor:pointer;
  display:grid; place-items:center;
}
.btn-menu svg{width:20px; height:20px}
@media(min-width:1024px){ .btn-menu{display:none} }

/* Menú móvil flotante alineado a la derecha */
.menu-movil{
  position:fixed; z-index:55; top:calc(var(--header-h) + 10px); right:14px;
  width:min(300px, calc(100vw - 28px));
  background:rgba(16,16,23,.92);
  backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
  border:1px solid var(--borde); border-radius:20px; box-shadow:var(--sombra);
  padding:10px;
  opacity:0; transform:translateY(-8px) scale(.98); pointer-events:none;
  transition:opacity .2s ease, transform .2s ease;
}
.menu-movil.abierto{opacity:1; transform:none; pointer-events:auto}
.menu-movil a{
  display:flex; align-items:center; justify-content:space-between;
  padding:13px 16px; border-radius:12px; text-decoration:none;
  font-weight:600; font-size:15px; color:var(--texto-2);
}
.menu-movil a:hover{background:var(--magenta-suave); color:var(--blanco)}
.menu-movil a span{color:var(--texto-3); font-size:12px}
.menu-movil .btn--magenta{width:100%; margin-top:8px; display:inline-flex}

/* ---------- Hero ---------- */
.hero{
  position:relative; overflow:hidden;
  padding:calc(var(--header-h) + 92px) 0 96px;
  background:var(--negro);
}
/* Fondo real: frontis nocturno con desenfoque y degradado integrador */
.hero__fondo{
  position:absolute; inset:-14px;
  background:url("/assets/img/hero-frontis.jpg") center 30% / cover no-repeat;
  filter:blur(2px) brightness(.62) saturate(1.05);
  transform:scale(1.03);
}
.hero__velo{
  position:absolute; inset:0;
  background:
    radial-gradient(55% 45% at 15% 20%, rgba(250,55,87,.12), transparent 60%),
    linear-gradient(180deg, rgba(5,5,10,.52) 0%, rgba(5,5,10,.22) 48%, var(--negro) 97%);
}
/* Sombra sutil bajo el texto del hero: mantiene la legibilidad con el fondo más visible */
.hero .contenedor h1,
.hero .contenedor .hero__texto{text-shadow:0 2px 22px rgba(5,5,10,.85)}
.hero__estrellas{position:absolute; inset:0; pointer-events:none}
.hero__estrellas i{
  position:absolute; width:2px; height:2px; border-radius:50%;
  background:rgba(247,243,239,.8);
  animation:titilar 3.4s ease-in-out infinite;
}
@keyframes titilar{0%,100%{opacity:.15}50%{opacity:.85}}
.hero .contenedor{position:relative}
.hero__chips{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:22px}
.hero h1{font-size:clamp(34px,6vw,58px); max-width:16ch}
.hero h1 em{font-style:normal; color:var(--magenta); text-shadow:0 0 30px rgba(250,55,87,.45)}
.hero__texto{color:var(--texto-2); max-width:56ch; margin:20px 0 34px; font-size:17px}
.hero__acciones{display:flex; gap:14px; flex-wrap:wrap; align-items:center}
.hero__imotel{margin-top:14px; font-size:13px; color:var(--texto-3)}
.hero__imotel b{color:var(--texto-2)}

/* ---------- Quiénes somos ---------- */
.valores{display:grid; gap:16px; margin-top:8px}
@media(min-width:768px){ .valores{grid-template-columns:repeat(3,1fr)} }
.valor{
  border:1px solid var(--borde); border-radius:var(--radio); padding:26px 24px;
  background:linear-gradient(170deg, var(--grafito), var(--grafito-2));
}
.valor__num{
  font-family:var(--fuente-display); font-size:34px; color:var(--magenta);
  text-shadow:0 0 18px rgba(250,55,87,.4); display:block; margin-bottom:10px;
}
.valor h3{font-size:19px; margin-bottom:8px}
.valor p{color:var(--texto-2); font-size:15px}

/* ---------- Cards habitaciones ---------- */
.habitaciones-grid{display:grid; gap:28px}
@media(min-width:1024px){ .habitaciones-grid{grid-template-columns:1fr 1fr} }
.card-hab{
  border:1px solid var(--borde); border-radius:var(--radio); overflow:hidden;
  background:linear-gradient(175deg, var(--grafito), var(--grafito-2));
  display:flex; flex-direction:column;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.card-hab:hover{border-color:rgba(250,55,87,.35); box-shadow:0 0 0 1px rgba(250,55,87,.2), var(--sombra)}
.card-hab__cuerpo{padding:26px 24px 28px; display:flex; flex-direction:column; gap:18px; flex:1}
.card-hab h3{font-size:24px}
.card-hab .desde{color:var(--texto-3); font-size:13px; margin-top:4px}
.card-hab .desde b{font-family:var(--fuente-display); font-size:22px; color:var(--hab, var(--blanco)); font-weight:600; margin-left:6px; text-shadow:0 0 14px rgba(var(--hab-rgb),.4)}
.card-hab__desc{color:var(--texto-2); font-size:15px}
.card-hab__chips{display:flex; flex-wrap:wrap; gap:8px}
.card-hab__cta{display:flex; gap:10px; flex-wrap:wrap; margin-top:auto}

/* ---------- Carrusel ---------- */
.carrusel{position:relative}
.carrusel__pista{
  display:flex; overflow-x:auto; scroll-snap-type:x mandatory;
  scrollbar-width:none; border-radius:0;
}
.carrusel__pista::-webkit-scrollbar{display:none}
.carrusel__pista > *{flex:0 0 100%; scroll-snap-align:center}
.carrusel__btn{
  position:absolute; top:50%; transform:translateY(-50%); z-index:2;
  width:38px; height:38px; border-radius:50%; border:1px solid var(--borde);
  background:rgba(5,5,10,.6); color:var(--blanco); cursor:pointer;
  display:grid; place-items:center; backdrop-filter:blur(6px);
  transition:background .15s, box-shadow .15s;
}
.carrusel__btn:hover{background:var(--magenta); box-shadow:var(--glow)}
.carrusel__btn svg{width:16px; height:16px}
.carrusel__btn--ant{left:12px}
.carrusel__btn--sig{right:12px}
.carrusel__puntos{
  position:absolute; inset:auto 0 12px 0; display:flex; justify-content:center; gap:7px; z-index:2;
}
.carrusel__puntos button{
  width:8px; height:8px; border-radius:50%; border:0; padding:0; cursor:pointer;
  background:rgba(247,243,239,.35); transition:background .15s, box-shadow .15s, transform .15s;
}
.carrusel__puntos button[aria-current="true"]{background:var(--magenta); box-shadow:0 0 10px rgba(250,55,87,.8); transform:scale(1.25)}

/* ---------- Fotografías reales ---------- */
.foto{
  position:relative; margin:0; height:240px; cursor:zoom-in; user-select:none;
  background:#0b0b12;
}
@media(min-width:768px){ .carrusel .foto{height:270px} }
.foto img{width:100%; height:100%; object-fit:cover; display:block}
.foto::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, transparent 62%, rgba(5,5,10,.5));
  pointer-events:none;
}

/* ---------- Pestañas de tarifas ----------
   Cada habitación tiene su acento neón propio:
   Standar → celeste · Tántrica → rosado.
   Realce visible pero limpio: los precios son protagonistas. */
.card-hab--standar{--hab:#4FD8FF; --hab-rgb:79,216,255}
.card-hab--tantrica{--hab:#FF6FB5; --hab-rgb:255,111,181}
.tabs{display:flex; gap:6px; padding:5px; border-radius:999px; border:1px solid var(--borde); background:rgba(5,5,10,.5); width:max-content; max-width:100%}
.tabs button{
  border:0; background:transparent; color:var(--texto-2); cursor:pointer;
  padding:9px 16px; border-radius:999px; font:700 13px/1 var(--fuente-base);
  transition:background .15s, color .15s, box-shadow .15s; white-space:nowrap;
}
.tabs button[aria-selected="true"]{
  background:rgba(var(--hab-rgb),.14); color:var(--hab);
  box-shadow:inset 0 0 0 1px rgba(var(--hab-rgb),.55), 0 0 16px rgba(var(--hab-rgb),.22);
}
.tarifa-panel table{width:100%; border-collapse:collapse; font-variant-numeric:tabular-nums}
.tarifa-panel td{padding:10px 4px; border-bottom:1px dashed var(--borde); font-size:15px; color:var(--texto-2)}
.tarifa-panel tr:last-child td{border-bottom:0}
.tarifa-panel td:last-child{text-align:right}
.precio-pill{
  display:inline-block; font-family:var(--fuente-display); font-weight:600;
  font-size:19px; line-height:1; color:var(--hab); padding:7px 15px;
  border-radius:999px; background:rgba(var(--hab-rgb),.08);
  box-shadow:inset 0 0 0 1px rgba(var(--hab-rgb),.38);
  text-shadow:0 0 14px rgba(var(--hab-rgb),.5);
  font-variant-numeric:tabular-nums;
}
/* Realce al cambiar de rango de días: entrada escalonada + destello suave */
@keyframes filaEntra{from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:none}}
@keyframes pillDestello{
  0%{box-shadow:inset 0 0 0 1px rgba(var(--hab-rgb),.9), 0 0 22px rgba(var(--hab-rgb),.55)}
  100%{box-shadow:inset 0 0 0 1px rgba(var(--hab-rgb),.38), 0 0 0 rgba(var(--hab-rgb),0)}
}
.tarifa-panel.entrando tr{animation:filaEntra .32s ease both}
.tarifa-panel.entrando tr:nth-child(2){animation-delay:.07s}
.tarifa-panel.entrando tr:nth-child(3){animation-delay:.14s}
.tarifa-panel.entrando .precio-pill{animation:pillDestello .7s ease both}
/* Fin de semana en dorado: color y resplandor distintos para no confundir rangos.
   Los precios heredan --hab, así que dentro de estos paneles pasan a dorado. */
#standar-finde, #tantrica-finde{--hab:#EFC368; --hab-rgb:239,195,104}
.tabs button[data-tab="standar-finde"][aria-selected="true"],
.tabs button[data-tab="tantrica-finde"][aria-selected="true"]{
  background:rgba(239,195,104,.14); color:var(--oro);
  box-shadow:inset 0 0 0 1px rgba(239,195,104,.55), 0 0 16px rgba(239,195,104,.25);
}
@keyframes pillDestelloFinde{
  0%{box-shadow:inset 0 0 0 1px rgba(239,195,104,.95), 0 0 30px rgba(239,195,104,.6)}
  100%{box-shadow:inset 0 0 0 1px rgba(239,195,104,.38), 0 0 0 rgba(239,195,104,0)}
}
#standar-finde.entrando .precio-pill,
#tantrica-finde.entrando .precio-pill{animation:pillDestelloFinde .85s ease both}
.nota-tarifas{font-size:13px; color:var(--texto-3); margin-top:18px}

/* ---------- Instalaciones ---------- */
.chips-galeria{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:24px}
.chips-galeria button{
  border:1px solid var(--borde); background:rgba(247,243,239,.04); color:var(--texto-2);
  padding:9px 18px; border-radius:999px; cursor:pointer; font:700 13px/1 var(--fuente-base);
  transition:all .15s;
}
.chips-galeria button[aria-selected="true"]{border-color:var(--magenta); color:var(--magenta); background:var(--magenta-suave); box-shadow:var(--glow)}
.galeria{display:none; gap:14px; overflow-x:auto; scroll-snap-type:x proximity; padding-bottom:8px; scrollbar-width:thin}
.galeria.activa{display:flex}
.galeria .foto{
  flex:0 0 min(78%, 320px); scroll-snap-align:start;
  height:200px; border-radius:var(--radio-s); border:1px solid var(--borde); overflow:hidden;
  transition:border-color .15s, transform .15s;
}
.galeria .foto:hover{border-color:rgba(250,55,87,.5); transform:translateY(-3px)}

/* ---------- Promoción Nocturna (dorado) ---------- */
.promo{
  position:relative; border-radius:24px; overflow:hidden;
  border:1px solid rgba(239,195,104,.35);
  background:
    radial-gradient(70% 90% at 85% 10%, rgba(239,195,104,.14), transparent 60%),
    radial-gradient(50% 70% at 10% 90%, rgba(239,195,104,.08), transparent 60%),
    linear-gradient(165deg, #17130a, #0b0a08);
  box-shadow:0 0 60px rgba(239,195,104,.12), var(--sombra);
  padding:44px 26px;
}
@media(min-width:768px){ .promo{padding:60px 56px} }
.promo .eyebrow{color:var(--oro)}
.promo .eyebrow::before{background:var(--oro); box-shadow:var(--glow-oro)}
.promo__grid{display:grid; gap:36px}
@media(min-width:900px){ .promo__grid{grid-template-columns:1.2fr 1fr; align-items:center} }
.promo h2{font-size:clamp(28px,4vw,40px); color:var(--oro); text-shadow:0 0 26px rgba(239,195,104,.35)}
.promo__precio{font-family:var(--fuente-display); font-size:clamp(46px,7vw,68px); color:var(--blanco); line-height:1; margin:18px 0 4px}
.promo__precio small{font-size:16px; font-family:var(--fuente-base); color:var(--texto-2); font-weight:600}
.promo ul{list-style:none; margin:22px 0 0; padding:0; display:grid; gap:11px}
.promo li{display:flex; gap:11px; align-items:flex-start; color:var(--texto-2); font-size:15px}
.promo li svg{width:17px; height:17px; flex:none; color:var(--oro); margin-top:3px}
.promo__beb{display:flex; gap:8px; flex-wrap:wrap; margin-top:18px}
.promo__acciones{display:flex; gap:12px; flex-wrap:wrap; margin-top:28px}
.promo__restriccion{margin-top:18px; font-size:13px; color:var(--texto-3)}

/* ---------- Servicios ---------- */
.servicios-grid{display:grid; gap:16px}
@media(min-width:640px){ .servicios-grid{grid-template-columns:1fr 1fr} }
@media(min-width:1024px){ .servicios-grid{grid-template-columns:repeat(3,1fr)} }
.servicio{
  border:1px solid var(--borde); border-radius:var(--radio); padding:24px;
  background:linear-gradient(170deg, var(--grafito), var(--grafito-2));
  transition:border-color .2s, transform .2s, box-shadow .2s;
}
.servicio:hover{border-color:rgba(250,55,87,.4); transform:translateY(-4px); box-shadow:var(--sombra)}
.servicio__icono{
  width:46px; height:46px; border-radius:13px; display:grid; place-items:center;
  background:var(--magenta-suave); color:var(--magenta); margin-bottom:16px;
  box-shadow:inset 0 0 0 1px rgba(250,55,87,.3), 0 0 18px rgba(250,55,87,.18);
}
.servicio__icono svg{width:22px; height:22px}
.servicio h3{font-size:17px; font-family:var(--fuente-base); font-weight:700; margin-bottom:6px}
.servicio p{color:var(--texto-2); font-size:14px}

/* ---------- FAQ ---------- */
.faq{max-width:760px}
.faq details{
  border:1px solid var(--borde); border-radius:var(--radio-s); margin-bottom:12px;
  background:linear-gradient(170deg, var(--grafito), var(--grafito-2)); overflow:hidden;
}
.faq details[open]{border-color:rgba(250,55,87,.35)}
.faq summary{
  cursor:pointer; padding:18px 20px; font-weight:700; font-size:15px;
  list-style:none; display:flex; justify-content:space-between; align-items:center; gap:14px;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"+"; font-family:var(--fuente-display); font-size:22px; color:var(--magenta);
  transition:transform .2s; flex:none; line-height:1;
}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq .faq__resp{padding:0 20px 18px; color:var(--texto-2); font-size:15px}

/* ---------- Ubicación ---------- */
.ubicacion-grid{display:grid; gap:28px}
@media(min-width:1024px){ .ubicacion-grid{grid-template-columns:1fr 1.15fr; align-items:stretch} }
.contacto-card{
  border:1px solid var(--borde); border-radius:var(--radio); padding:30px 26px;
  background:linear-gradient(170deg, var(--grafito), var(--grafito-2));
  display:flex; flex-direction:column; gap:20px;
}
.dato{display:flex; gap:14px; align-items:flex-start}
.dato svg{width:19px; height:19px; color:var(--magenta); flex:none; margin-top:3px}
.dato b{display:block; font-size:15px}
.dato span{color:var(--texto-2); font-size:14px}
.redes-fila{display:flex; gap:10px; flex-wrap:wrap; margin-top:auto}
.red{
  width:46px; height:46px; border-radius:14px; display:grid; place-items:center;
  border:1px solid var(--borde); background:rgba(247,243,239,.04); color:var(--texto-2);
  transition:all .18s; text-decoration:none;
}
.red svg{width:20px; height:20px}
.red:hover{color:#fff; border-color:var(--magenta); background:var(--magenta-suave); box-shadow:var(--glow); transform:translateY(-3px)}
.mapa{
  position:relative; border-radius:var(--radio); border:1px solid var(--borde); overflow:hidden;
  min-height:340px;
  background:
    repeating-linear-gradient(0deg, transparent 0 46px, rgba(91,141,239,.07) 46px 47px),
    repeating-linear-gradient(90deg, transparent 0 46px, rgba(91,141,239,.07) 46px 47px),
    radial-gradient(60% 55% at 55% 45%, rgba(250,55,87,.1), transparent 65%),
    linear-gradient(160deg, #0b0d18, #08080f);
}
.mapa__calle{position:absolute; background:rgba(247,243,239,.08); border-radius:3px}
.mapa__etiqueta{
  position:absolute; font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--texto-3);
}
.mapa__pin{
  position:absolute; left:55%; top:42%; transform:translate(-50%,-100%);
  color:var(--magenta); filter:drop-shadow(0 0 12px rgba(250,55,87,.9));
  animation:pinFlota 2.6s ease-in-out infinite;
}
.mapa__pin svg{width:42px; height:42px}
@keyframes pinFlota{0%,100%{transform:translate(-50%,-100%)}50%{transform:translate(-50%,calc(-100% - 8px))}}
.mapa__ruta{
  position:absolute; inset:auto 0 22px 0; display:flex; justify-content:center;
}
.mapa__nota{position:absolute; top:14px; left:16px; font-size:11px; color:var(--texto-3); letter-spacing:.14em; text-transform:uppercase}

/* ---------- Footer ---------- */
footer{
  border-top:1px solid var(--borde); padding:56px 0 130px; background:#040408;
}
@media(min-width:768px){ footer{padding-bottom:64px} }
.footer-grid{display:grid; gap:32px}
@media(min-width:768px){ .footer-grid{grid-template-columns:1.4fr 1fr 1fr} }
footer h4{font-size:13px; letter-spacing:.2em; text-transform:uppercase; color:var(--texto-3); margin:0 0 14px}
footer ul{list-style:none; margin:0; padding:0; display:grid; gap:9px}
footer li a{color:var(--texto-2); text-decoration:none; font-size:14px}
footer li a:hover{color:var(--magenta)}
.footer-legal{margin-top:44px; padding-top:22px; border-top:1px solid var(--borde); display:flex; flex-wrap:wrap; gap:12px; justify-content:space-between; font-size:13px; color:var(--texto-3)}

/* ---------- Barra inferior móvil ---------- */
.barra-inferior{
  position:fixed; inset:auto 0 0 0; z-index:45;
  display:grid; grid-template-columns:repeat(4,1fr);
  background:rgba(10,10,16,.82);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  border-top:1px solid var(--borde);
  padding:8px 8px calc(8px + env(safe-area-inset-bottom));
}
@media(min-width:768px){ .barra-inferior{display:none} }
.barra-inferior a{
  display:flex; flex-direction:column; align-items:center; gap:4px;
  text-decoration:none; color:var(--texto-2); font-size:11px; font-weight:600;
  padding:7px 2px; border-radius:12px;
}
.barra-inferior a svg{width:20px; height:20px}
.barra-inferior a:active{background:var(--magenta-suave)}
.barra-inferior .accion-reserva{color:var(--magenta); text-shadow:0 0 12px rgba(250,55,87,.5)}

/* ---------- Volver arriba ---------- */
.volver-arriba{
  position:fixed; right:16px; bottom:96px; z-index:44;
  width:46px; height:46px; border-radius:50%; border:1px solid rgba(250,55,87,.5);
  background:rgba(16,16,23,.85); color:var(--magenta); cursor:pointer;
  display:grid; place-items:center; backdrop-filter:blur(8px);
  opacity:0; transform:translateY(14px); pointer-events:none;
  transition:opacity .25s, transform .25s, box-shadow .2s;
}
@media(min-width:768px){ .volver-arriba{bottom:28px} }
.volver-arriba.visible{opacity:1; transform:none; pointer-events:auto}
.volver-arriba:hover{box-shadow:var(--glow)}
.volver-arriba svg{width:18px; height:18px}

/* ---------- Lightbox ---------- */
.lightbox{
  position:fixed; inset:0; z-index:80; display:none;
  background:rgba(3,3,7,.9); backdrop-filter:blur(10px);
  align-items:center; justify-content:center; padding:20px;
}
.lightbox.abierto{display:flex}
.lightbox__marco{
  width:min(880px, 96vw); border-radius:var(--radio); overflow:hidden;
  border:1px solid rgba(250,55,87,.35); box-shadow:0 0 60px rgba(250,55,87,.2), var(--sombra);
}
.lightbox__marco .foto{height:min(66vh, 540px); cursor:default; background:#000}
.lightbox__marco .foto img{object-fit:contain}
.lightbox__marco .foto::after{content:none}
.lightbox__pie{
  background:var(--grafito); padding:14px 18px; display:flex; align-items:center; justify-content:space-between; gap:12px;
}
.lightbox__pie span{font-size:14px; color:var(--texto-2)}
.lightbox__pie small{color:var(--texto-3); font-variant-numeric:tabular-nums}
.lightbox__btn{
  position:absolute; top:50%; transform:translateY(-50%);
  width:44px; height:44px; border-radius:50%; border:1px solid var(--borde);
  background:rgba(16,16,23,.8); color:var(--blanco); cursor:pointer; display:grid; place-items:center;
}
.lightbox__btn:hover{background:var(--magenta); box-shadow:var(--glow)}
.lightbox__btn svg{width:18px; height:18px}
.lightbox__btn--ant{left:14px}
.lightbox__btn--sig{right:14px}
.lightbox__cerrar{
  position:absolute; top:18px; right:18px; width:44px; height:44px; border-radius:50%;
  border:1px solid var(--borde); background:rgba(16,16,23,.8); color:var(--blanco);
  cursor:pointer; display:grid; place-items:center; font-size:20px;
}
.lightbox__cerrar:hover{background:var(--magenta)}

/* ---------- Nota mockup ---------- */
.nota-mockup{
  margin:0 auto 0; max-width:1100px; padding:10px 20px; font-size:12px; color:var(--texto-3);
}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms !important; transition-duration:.01ms !important}
  html{scroll-behavior:auto}
}