:root{
  /* Paleta y sistema de diseño */
  --primary:#7c5ffa; --primary-600:#6947ff;
  --bg:#0d0f15; --surface:rgba(17,19,27,.65); --surface-strong:rgba(17,19,27,.85);
  --text:#f7f8fc; --muted:#b8b9c3;
  --accent:#ff9966; --accent-2:#ff5e62;
  --radius:16px; --shadow:0 10px 30px rgba(0,0,0,.35);
  --space-1:.5rem; --space-2:1rem; --space-3:1.5rem; --space-4:2rem; --space-6:3rem;

  /* Tile SVG 512x512 con gradiente #1a1230→#0d1326, bokeh morado/cyan y haces diagonales */
  --nightclub-tile: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='512' height='512' viewBox='0 0 512 512'>\
<defs>\
  <linearGradient id='bg' x1='0' y1='0' x2='1' y2='1'>\
    <stop offset='0' stop-color='%231a1230'/>\
    <stop offset='1' stop-color='%230d1326'/>\
  </linearGradient>\
  <radialGradient id='bo1' cx='0.25' cy='0.28' r='0.35'>\
    <stop offset='0' stop-color='%238a5cff' stop-opacity='.28'/>\
    <stop offset='1' stop-color='%238a5cff' stop-opacity='0'/>\
  </radialGradient>\
  <radialGradient id='bo2' cx='0.72' cy='0.68' r='0.33'>\
    <stop offset='0' stop-color='%2323c6d4' stop-opacity='.26'/>\
    <stop offset='1' stop-color='%2323c6d4' stop-opacity='0'/>\
  </radialGradient>\
  <radialGradient id='bo3' cx='0.78' cy='0.22' r='0.28'>\
    <stop offset='0' stop-color='%238a5cff' stop-opacity='.22'/>\
    <stop offset='1' stop-color='%238a5cff' stop-opacity='0'/>\
  </radialGradient>\
  <radialGradient id='bo4' cx='0.18' cy='0.78' r='0.30'>\
    <stop offset='0' stop-color='%2323c6d4' stop-opacity='.20'/>\
    <stop offset='1' stop-color='%2323c6d4' stop-opacity='0'/>\
  </radialGradient>\
  <linearGradient id='beam' x1='0' y1='0' x2='1' y2='1'>\
    <stop offset='0' stop-color='white' stop-opacity='.0'/>\
    <stop offset='0.5' stop-color='white' stop-opacity='.05'/>\
    <stop offset='1' stop-color='white' stop-opacity='0'/>\
  </linearGradient>\
</defs>\
<rect width='512' height='512' fill='url(%23bg)'/>\
<g opacity='.7' transform='translate(0,-40) rotate(12 256 256)'>\
  <rect x='-50' y='160' width='700' height='40' fill='url(%23beam)'/>\
</g>\
<g opacity='.6' transform='translate(0,30) rotate(-18 256 256)'>\
  <rect x='-50' y='320' width='700' height='36' fill='url(%23beam)'/>\
</g>\
<circle cx='140' cy='150' r='130' fill='url(%23bo1)'/>\
<circle cx='380' cy='360' r='150' fill='url(%23bo2)'/>\
<circle cx='420' cy='120' r='120' fill='url(%23bo3)'/>\
<circle cx='110' cy='420' r='140' fill='url(%23bo4)'/>\
</svg>");
}

/* Ajuste móvil: quitar fixed para rendimiento */
@media (max-width: 991.98px){
  html,body{ background-attachment: scroll, scroll; }
}

.section{padding:var(--space-6) 0;}
.container-narrow{max-width:980px}

/* --------- TIPOGRAFÍA / HEADINGS --------- */
h1.main-title{
  font-size:clamp(2rem,2.6vw + 1rem,3.1rem);
  line-height:1.15; margin-bottom:2.25rem;
}
.lead{color:var(--text); opacity:.92}
.section-title{font-size:clamp(1.5rem,1.2vw + 1rem,2.1rem); color:#fff; margin-bottom:1rem}
p{color:var(--text)}
/* Titulares con degradado morado → cyan */
h1.main-title, .section-title {
  background: linear-gradient(90deg, var(--primary), #23c6d4);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent; /* fallback */
}

/* Párrafos con texto más claro y palabras clave en color */
p, .lead {
  color: rgba(247, 248, 252, 0.92);
}
p strong, .lead strong {
  color: var(--primary);
  font-weight: 600;
}

/* Opción extra: checklist ítems con dos colores */
.checklist li {
  color: rgba(247, 248, 252, 0.92);
}
.checklist li::before {
  color: var(--primary);
}



/* ===== HERO BACKGROUND (overlay para legibilidad) ===== 
.hero > .container{ position:relative; z-index:1; }
@media (min-width: 1024px){
  .hero{ will-change: transform; }
}
@media (max-width: 991.98px){
  .hero::before{ opacity:.35; }
  .hero::after{ background:
    radial-gradient(120% 80% at 50% -10%, rgba(0,0,0,.6) 25%, rgba(0,0,0,.9) 70%),
    linear-gradient(to bottom, rgba(0,0,0,.55), rgba(0,0,0,.92) 70%);
  }
}*/

/* --------- BOTONES --------- */
.buttonBiColor1,.btn-primary{
  background:linear-gradient(90deg,var(--primary-600),var(--primary));
  border:0; color:#fff; padding:.8rem 1.25rem;
  border-radius:9999px; box-shadow:var(--shadow); font-weight:600;
  transition:transform .15s ease, filter .15s ease
}
.buttonBiColor1:hover,.btn-primary:hover{filter:brightness(1.05); transform:translateY(-1px)}
.btn-primary:focus,.buttonBiColor1:focus{box-shadow:0 0 0 4px rgba(124,95,250,.25)}

.btn-outline-light{
  border-color:rgba(255,255,255,.65); color:#fff;
  padding:.75rem 1.25rem; border-radius:9999px
}
.btn-outline-light:hover{background:rgba(255,255,255,.12)}

.btn-success, .btn-whatsapp{
  background:#25D366 !important; color:#0c2b17 !important; border:0 !important;
  font-weight:700; border-radius:9999px; padding:.9rem 1.25rem;
  box-shadow:var(--shadow)
}
.btn-success:hover, .btn-whatsapp:hover{filter:brightness(1.05); transform:translateY(-1px)}

/* --------- CHECKLIST HERO --------- */
.checklist{
  display:grid; gap:.6rem; grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  margin:var(--space-2) auto 0; padding:0; list-style:none;
}
.checklist li{position:relative; padding-left:1.7rem;}
.checklist li::before{
  content:"\f00c";
  font-family:"Font Awesome 6 Free","Font Awesome 6 Pro","Font Awesome 5 Free","Font Awesome 5 Pro", Arial, sans-serif;
  font-weight:900; position:absolute; left:0; top:.15rem; opacity:.95;
}
@supports not (font-variant-ligatures: none){
  .checklist li::before{content:"✓"; font-family:inherit; font-weight:700}
}

/* --------- PESTAÑAS TIPOS DE EVENTO (mobile-first) --------- */
/* Contenedor tipo “cápsula” con scroll horizontal */
#eventTabs{
  display:flex;
  gap:.5rem;
  overflow-x:auto;
  padding:.4rem .6rem; /*padding:.5rem;*/
  margin:.25rem auto 0; /*margin:.75rem auto 0;*/
  border-radius:14px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.08);
  backdrop-filter:blur(6px);
  scroll-snap-type:x mandatory;
  -ms-overflow-style:none;      /* IE/Edge */
  scrollbar-width:none;         /* Firefox */
  max-width:980px;
  border-bottom-left-radius:12px;
  border-bottom-right-radius:12px;
}
#eventTabs::-webkit-scrollbar{ display:none; } /* WebKit */

/* Cada item ocupa solo lo necesario y hace snap al inicio */
#eventTabs .nav-item{ flex:0 0 auto; }
#eventTabs .nav-link{
  display:flex; align-items:center; gap:.5rem;
		  padding:.5rem .8rem;     /* antes .6rem .9rem */
  border-radius:10px;
  color:var(--muted);
  background:transparent;
  border:1px solid transparent;
  scroll-snap-align:start;
  white-space:nowrap;
}
#eventTabs .nav-link i{ opacity:.9; }

/* 2) Quitar el hueco que mete el wrapper siguiente (.text-white.mt-3) */
.event-tabs + .text-white{ 
  margin-top:0 !important; /* estaba en 1rem por el .mt-3 de Bootstrap */
}
.event-tabs + .text-white > .event-pane{
  border-top-left-radius:0;
  border-top-right-radius:0;
  margin-top:-1px;         /* solapa 1px para evitar doble borde */
}

/* Activa: leve realce, sin “gritar” */
#eventTabs .nav-link.active{
  color:#fff;
  background:linear-gradient(180deg, rgba(124,95,250,.18), rgba(124,95,250,.08));
  border-color:rgba(124,95,250,.35);
  box-shadow:0 6px 18px rgba(124,95,250,.20);
}

/* Pequeñas mejoras de pulsado */
#eventTabs .nav-link:active{ transform:translateY(1px); }

/* Desktop: volvemos al look de pastillas centradas */
@media (min-width: 992px){
  #eventTabs{
    overflow:visible;
    background:transparent;
    border:0;
    padding:0;
    justify-content:center;
    gap:.5rem;
  }
  #eventTabs .nav-link{
    background:rgba(255,255,255,.08);
    border:1px solid rgba(255,255,255,.06);
  }
  #eventTabs .nav-link.active{
    background:var(--primary);
    border-color:transparent;
    box-shadow:0 6px 18px rgba(124,95,250,.35);
  }
}


/* Contenido de cada pestaña */
.event-pane{
  background:var(--surface); border:1px solid rgba(255,255,255,.08);
  border-radius:var(--radius); padding:var(--space-4); box-shadow:var(--shadow); backdrop-filter:blur(6px);
}
.event-pane h2{font-size:clamp(1.3rem,1.2vw + 1rem,2rem); margin-bottom:.6rem; color:#fff}
.event-pane ul{margin:.5rem 0 0; padding-left:1rem}
.event-pane li{margin:.15rem 0}

/* --------- SERVICIOS / EXTRAS --------- */
.services-grid{
  display:grid; gap:1rem; grid-template-columns:repeat(auto-fit,minmax(260px,1fr))
}
.card-plain{
  background:var(--surface); border:1px solid rgba(255,255,255,.08);
  border-radius:var(--radius); padding:1rem 1.25rem; color:var(--text)
}

/* --------- SERVICIOS / EXTRAS — NUEVO DISEÑO --------- */

/* Grid fluido; en móvil 2 columnas densas, en desktop 4 y 3 respectivamente */
.benefits{
  display:grid;
  gap:.75rem;
  grid-template-columns: repeat(2, minmax(0,1fr));
}
@media (min-width: 768px){
  .benefits{ gap:1rem; }
}
@media (min-width: 992px){
  .benefits--included{ grid-template-columns: repeat(4, minmax(0,1fr)); }
  .benefits--extras{   grid-template-columns: repeat(3, minmax(0,1fr)); }
}

/* Tarjeta compacta con borde degradado sutil y fondo translúcido */
.benefit{
  position:relative;
  display:flex; align-items:center; gap:.65rem;
  padding:.85rem .9rem;
  border-radius:14px;
  color:var(--text);
  background:
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.04)) padding-box,
    linear-gradient(90deg, rgba(124,95,250,.35), rgba(35,198,212,.35)) border-box;
  border:1px solid transparent;
  box-shadow: 0 4px 16px rgba(0,0,0,.25);
  backdrop-filter: blur(6px);
  transition: transform .15s ease, box-shadow .15s ease, background .2s ease;
}

/* Variante muy compacta en móvil (menos altura) */
.benefits.compact .benefit{
  padding:.7rem .8rem;
}

/* Icono circular con glow */
.benefit i{
  flex:0 0 auto;
  width:36px; height:36px; border-radius:9999px;
  display:grid; place-items:center;
  background: radial-gradient(60% 60% at 50% 40%, rgba(124,95,250,.35), rgba(124,95,250,.15));
  color:#fff; font-size:16px;
  box-shadow: 0 2px 10px rgba(124,95,250,.35), inset 0 0 0 1px rgba(255,255,255,.1);
}
.benefits--extras .benefit i{
  background: radial-gradient(60% 60% at 50% 40%, rgba(35,198,212,.35), rgba(35,198,212,.15));
  box-shadow: 0 2px 10px rgba(35,198,212,.35), inset 0 0 0 1px rgba(255,255,255,.1);
}

/* Texto con mejor legibilidad y truncado elegante si hace falta */
.benefit span{
  line-height:1.25;
  color:rgba(247,248,252,.95);
}
.benefit span small{
  display:block; color:var(--muted);
}

/* Hover/Focus: levanta un pelín y refuerza borde */
.benefit:hover, .benefit:focus-within{
  transform: translateY(-2px);
  box-shadow: 0 6px 22px rgba(0,0,0,.35);
  background:
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.05)) padding-box,
    linear-gradient(90deg, rgba(124,95,250,.55), rgba(35,198,212,.55)) border-box;
}

/* Accesibilidad: foco visible si la tarjeta es navegada */
.benefit:focus-visible{
  outline: 3px solid rgba(124,95,250,.35);
  outline-offset: 2px;
}

/* (Opcional) Si alguna línea es larguísima, deja dos líneas y corta con "…" */
.benefit span{
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}


/* --------- FAQ --------- */
.accordion .accordion-button{
  background:var(--surface); color:var(--text); border:1px solid rgba(255,255,255,.08);
  border-radius:var(--radius); box-shadow:none
}
.accordion .accordion-button:not(.collapsed){background:var(--surface-strong); color:#fff}
.accordion .accordion-body{background:var(--surface); color:var(--muted)}
.accordion-item{border:0; margin-bottom:.5rem}

/* --------- FORMULARIO --------- */
.booking-form{max-width:980px; margin:0 auto}
.form-row{
  display:grid; grid-template-columns:1fr; gap:1rem; margin-bottom:1rem
}
@media (min-width:768px){
  .form-row{grid-template-columns:1fr 1fr}
}
.inputWrapper .dynamicPlaceholder{color:var(--muted)}
.inputModern{
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12);
  color:var(--text); border-radius:12px; padding:.9rem 1rem; width:100%
}
.inputModern:focus{outline:none; border-color:var(--primary); box-shadow:0 0 0 3px rgba(124,95,250,.25)}
.form-message{color:var(--muted)}
#sendFormButton{margin-top:.5rem}

/* --------- DIALOG --------- */
dialog{border:0; border-radius:var(--radius); background:var(--surface-strong); color:var(--text)}
dialog::backdrop{background:rgba(0,0,0,.55)}

/* --------- STICKY CTA MÓVIL --------- */
#stickyCta{background:rgba(13,15,21,.92); backdrop-filter:blur(6px); border-top:1px solid rgba(255,255,255,.08)}
#stickyCta .btn{border-radius:9999px}

/* --------- PEQUEÑOS AJUSTES DE ESPACIADO --------- */
.mt-0{margin-top:0!important}
.mb-0{margin-bottom:0!important}
.opacity-85{opacity:.85}


/* Botón de fotos */
.btn-ver-fotos {
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  
    font-weight: 700;
    border-radius: 9999px;
  color: #fff;
  font-weight: 700;
  box-shadow: var(--shadow);
  transition: transform .2s ease;
  padding: .85rem 1.25rem;
  margin-inline: auto;
}
.btn-ver-fotos:hover { transform: translateY(-1px); }

/* Mini-galerías de 4 fotos */
.event-photos{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap:.6rem; margin-top:1rem;
}

@media (min-width: 992px){
  .event-photos{ grid-template-columns: repeat(4, 1fr); }
}

.event-photos .ph{
  position:relative; border-radius:12px; overflow:hidden;
  background:#0b0e14; aspect-ratio:4/3;  /* mantiene el hueco antes de cargar */
  box-shadow: var(--shadow);
}
.event-photos img{
  width:100%; height:100%; object-fit:cover; display:block;
  transform:scale(1.02); transition:transform .25s ease, opacity .25s ease;
  opacity:0;
}
.event-photos img.is-loaded{ opacity:1; transform:scale(1); }
.event-photos .ph:hover img{ transform:scale(1.03); }

/* Lightbox sencillo con <dialog> */
#photoLightbox{
  border:0; padding:0; background:transparent;
}
#photoLightbox::backdrop{
  background:rgba(0,0,0,.85);
}
#photoLightbox img{
  max-width:min(96vw,1200px);
  max-height:90vh;
  border-radius:14px;
  display:block;
}
#photoLightbox .close{
  position:absolute; top:1rem; right:1rem;
  background:rgba(0,0,0,.6); color:#fff; border:0;
  width:40px; height:40px; border-radius:9999px; cursor:pointer;
}



/* ====== More info (discreto) ====== */
.more-info{
  max-width: 980px;
  margin: .5rem auto 0;
}
.more-info summary{
  list-style: none;               /* quita el triángulo por defecto */
  display: flex; align-items: center; gap: .55rem;
  padding: .6rem .9rem;
  border-radius: 12px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.08);
  color: var(--muted);
  font-weight: 600;
  cursor: pointer;
  backdrop-filter: blur(6px);
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.more-info summary::-webkit-details-marker{ display:none; } /* Safari/WebKit */

.more-info summary i{ color: var(--primary); opacity:.9; }

.more-info .chev{ margin-left:auto; opacity:.85; transition: transform .25s ease, opacity .2s; }
.more-info:hover summary{ background: rgba(255,255,255,.08); color:#fff; }
.more-info[open] summary{
  color:#fff;
  border-color: rgba(124,95,250,.35);
}
.more-info[open] .chev{ transform: rotate(180deg); }

.more-info .more-info-content{
  padding: .75rem .9rem 0;
  color: rgba(247,248,252,.88);
  font-size: .95rem;              /* un pelín más pequeño para no “gritar” */
}
.more-info .more-info-content p{ margin: 0; }
.more-info .more-info-content strong{ color: var(--primary); font-weight: 600; }

/* Animación de apertura suave */
@keyframes mi-expand { from { opacity:0; transform: translateY(-2px);} to {opacity:1; transform:none;} }
.more-info[open] .more-info-content{ animation: mi-expand .22s ease; }

/* Foco accesible al navegar con teclado */
.more-info summary:focus-visible{
  outline: 3px solid rgba(124,95,250,.35);
  outline-offset: 2px;
}



/* ==== HERO: efecto sutil “club” (beams + sweep + base eq) ==== */
.hero-attract{ position:relative; overflow:hidden;
  /* base muy ligera: halo morado arriba + oscurecido para legibilidad */
  background-image:
    radial-gradient(120% 80% at 50% -20%, rgba(124,95,250,.18), transparent 60%),
    linear-gradient(to bottom, rgba(0,0,0,.55), rgba(0,0,0,.88));
  background-blend-mode: screen, normal;
}

/* haces de luz rotando muy suaves */
.hero-attract::before{
  content:""; position:absolute; inset:-18%;
  background:
    conic-gradient(from 25deg at 10% 120%,
      rgba(124,95,250,.6), transparent 20%,
      rgba(35,198,212,.7) 35%, transparent 60%,
      rgba(124,95,250,.6) 80%, transparent);
  mix-blend-mode: screen;
  filter: blur(2px);
  animation: beams-spin 26s linear infinite;
  pointer-events:none;
}

/* ecualizador sutil en la base del hero */
.hero-attract::after{
  content:""; position:absolute; left:0; right:0; bottom:-1px; height:120px;
  background:
    repeating-linear-gradient(90deg,
      rgba(124,95,250,.22) 0 3px, rgba(124,95,250,.05) 3px 14px),
    radial-gradient(80% 60% at 50% 100%, rgba(0,0,0,.0), rgba(0,0,0,.45));
  mask-image: linear-gradient(to top, #000 65%, transparent);
  -webkit-mask-image: linear-gradient(to top, #000 65%, transparent);
  opacity:.55;
  animation: eq-scroll 12s linear infinite;
  pointer-events:none;
}

/* barrido de luz sobre el contenido (muy leve) */
.hero-attract > .container::before{
  content:""; position:absolute; inset:0; left:-32%; width:28%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.08), transparent);
  transform: skewX(-12deg);
  animation: sweep 5.5s ease-in-out infinite;
  mix-blend-mode: soft-light;
  pointer-events:none;
}

/* Animaciones */
@keyframes beams-spin { to { transform: rotate(360deg); } }
@keyframes eq-scroll   { to { background-position: 420px 0, 0 0; } }
@keyframes sweep {
  0%   { transform: translateX(-30%) skewX(-12deg); opacity:.0; }
  35%  { opacity:.9; }
  70%  { opacity:.0; }
  100% { transform: translateX(160%) skewX(-12deg); opacity:.0; }
}

/* Respeto accesibilidad: menos movimiento si el usuario lo pide 
@media (prefers-reduced-motion: reduce){
  .hero-attract::before,
  .hero-attract::after,
  .hero-attract > .container::before{ animation: none; }
} */