/* Estilos Loca Luna - Dorado y Negro */
:root {
  /* Gradiente dorado metálico inspirado en tu logo */
  --gold: #d4af37;
  --gold-2: #a9711a;
  --gold-3: #f6e27a;
  --gold-4: #8c6b21;
  --black: #0a0a0a;
  --gray: #111216;
  --text: #e8e8e8;
  --accent1: #b5179e; /* magenta neón */
  --accent2: #00d1d1; /* cian neón */
  --accent3: #8a2be2; /* purple */
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--black); color: var(--text); font-family: Poppins, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, 'Helvetica Neue', Arial, sans-serif; }
.bg-canvas { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -1; background: radial-gradient(1000px 600px at 20% 10%, rgba(181,23,158,.05), transparent), radial-gradient(1000px 600px at 80% 90%, rgba(0,209,209,.05), transparent), var(--black); filter: contrast(1.02) saturate(1.02); }

/* Nav */
.nav { position: sticky; top: 0; z-index: 60; backdrop-filter: blur(8px); background: rgba(0,0,0,.5); border-bottom: 1px solid rgba(212,175,55,.15); }
.nav__inner { max-width: 1360px; margin: 0 auto; padding: 16px 28px; display: flex; align-items: center; justify-content: space-between; }
.nav__logo { height: 48px; width: auto; border-radius: 6px; box-shadow: 0 0 0 2px rgba(246,226,122,.25); }
.nav__links a { position: relative; text-decoration: none; margin-left: 20px; font-family: 'Cinzel Decorative', serif; font-weight: 700; font-size: clamp(14px, 1.3vw, 22px); letter-spacing: 1.5px; background: linear-gradient(145deg, var(--gold-3), var(--gold), var(--gold-4)); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: 0 0 14px rgba(212,175,55,.25); transition: transform .25s ease, text-shadow .25s ease; }
.nav__links a:hover { transform: translateY(-1px); text-shadow: 0 0 18px rgba(212,175,55,.35); }
/* Brillo acotado dentro de cada link del menú */
.nav__links a::after { content:''; position:absolute; top:0; bottom:0; left:0; width:18%; background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,.25) 50%, transparent 100%); animation: shine-link 2.8s ease-in-out infinite alternate; mix-blend-mode: screen; pointer-events:none; }
@keyframes shine-link { from { left: 0%; } to { left: 82%; } }

/* Hero */
.hero { position: relative; height: 86vh; border-bottom: 1px solid rgba(212,175,55,.2); }
.hero--xl { height: 92vh; }
.hero .swiper, .hero__slide, .hero__media { height: 100%; width: 100%; }
.hero__yt { position: absolute; inset: 0; background:#000; overflow:hidden; }
/* Técnica de cover para 16:9 -> llenar contenedor */
.hero__yt iframe { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:100vw; height:56.25vw; min-width:100%; min-height:100%; display:block; pointer-events:none; }
.hero__media { object-fit: cover; filter: saturate(1.05) contrast(1.05); background:#000; }
.hero__slide video { width:100%; height:100%; display:block; }
.hero__overlay { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; padding-top: 54vh; text-align: center; background: linear-gradient(to top, rgba(0,0,0,.55), rgba(0,0,0,.25) 40%, rgba(0,0,0,.1) 70%, transparent); }
.hero__overlay h1 { font-family: 'Cinzel Decorative', serif; font-weight: 700; font-size: clamp(42px, 9vw, 112px); margin: 0; letter-spacing: 6px; text-transform: uppercase; background: linear-gradient(145deg, var(--gold-3), var(--gold), var(--gold-4)); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 10px 30px rgba(212,175,55,.25)); position: relative; overflow: hidden; }
/* Eliminar efecto de luz en LOCA LUNA */
.hero__overlay h1::after { content: none !important; }
.hero__overlay p { margin-top: 10px; font-weight: 700; color: #f7e7b6; letter-spacing: 3px; text-transform: uppercase; }

/* Marquee */
.marquee { overflow: hidden; white-space: nowrap; border-top: 1px solid rgba(246,226,122,.22); border-bottom: 1px solid rgba(246,226,122,.22); background: radial-gradient(1200px 160px at 10% 50%, rgba(246,226,122,.08), transparent), radial-gradient(1200px 160px at 90% 50%, rgba(246,226,122,.08), transparent); position: relative; }
.marquee::before, .marquee::after { content: ''; position: absolute; top: 0; width: 40px; height: 100%; z-index: 2; pointer-events: none; }
.marquee::before { left: 0; background: linear-gradient(90deg, var(--black), transparent); }
.marquee::after  { right: 0; background: linear-gradient(-90deg, var(--black), transparent); }
.marquee__inner { display: inline-block; padding: 14px 0; animation: marquee 12s linear infinite; color: #f1e2a4; font-weight: 700; letter-spacing: 1.5px; }
.marquee__inner span { margin: 0 28px; }
@keyframes marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }

/* Secciones */
.section { max-width: 1200px; margin: 0 auto; padding: 72px 20px; }
.section--xl { max-width: 1360px; padding: 92px 24px; }

/* Responsivo móvil/tablet */
@media (max-width: 1024px){
  .hero--xl { height: 88vh; }
  .section--xl { padding: 72px 18px; }
}
@media (max-width: 768px){
  .nav__inner { padding: 12px 16px; }
  .nav__logo { height: 40px; }
  .nav__links a { font-size: clamp(13px, 3.8vw, 18px); margin-left: 14px; }
  .hero__overlay { padding-top: 58vh; }
  .hero__overlay h1 { font-size: clamp(34px, 10vw, 72px); letter-spacing: 4px; }
  .section--xl { padding: 56px 16px; }
  .cards--xl { gap: 18px; }
  .gallery-swiper .swiper-slide { height: 300px; }
  .lineup__track { animation-duration: 10s; }
}
@media (max-width: 480px){
  .hero--xl { height: 84vh; }
  .hero__overlay { padding-top: 60vh; }
  .hero__overlay h1 { font-size: clamp(28px, 12vw, 60px); }
  .gallery-swiper .swiper-slide { height: 240px; }
  .lineup__track { animation-duration: 8s; }
}
.section__head h2 { font-family: 'Cinzel Decorative', serif; font-size: clamp(28px, 5vw, 44px); margin: 0; color: var(--gold-3); text-shadow: 0 0 22px rgba(212,175,55,.28); letter-spacing: 2px; position: relative; overflow: hidden; }
.section__head h2::after { content:''; position:absolute; top:0; bottom:0; left:0; width:18%; background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,.28) 50%, transparent 100%); animation: shine-h2 2.8s ease-in-out infinite alternate; mix-blend-mode: screen; pointer-events: none; }
.section__head p { margin: 6px 0 24px; opacity: .85; }
/* Brillo acotado al ancho del título (h2 y h3) */
@keyframes shine-h2 { from { left: 0%; } to { left: 82%; } }
@keyframes shine-h3 { from { left: 0%; } to { left: 84%; } }

/* Cards */
.cards { display: grid; grid-template-columns: repeat(1, minmax(0, 1fr)); gap: 20px; }
@media (min-width: 640px) { .cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .cards { grid-template-columns: repeat(3, 1fr); } }
.cards--xl { gap: 28px; }
.card { position: relative; background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01)); border: 1px solid rgba(212,175,55,.25); border-radius: 16px; overflow: hidden; box-shadow: 0 12px 40px rgba(0,0,0,.35), 0 0 0 1px rgba(246,226,122,.12) inset; transition: transform .35s ease, box-shadow .35s ease; transform-style: preserve-3d; }
.card--xl img { height: 280px; }
.card::after { content:''; position:absolute; top:-120%; left:-50%; width:60%; height:240%; transform: rotate(25deg); background: linear-gradient( to right, transparent, rgba(255,255,255,.18), transparent ); transition: transform .6s ease; pointer-events:none; }
.card:hover { transform: translateY(-6px) rotateX(0.8deg) rotateY(-0.8deg); box-shadow: 0 16px 60px rgba(0,0,0,.55), 0 0 0 1px rgba(246,226,122,.18) inset; }
.card:hover::after { transform: translateX(220%) rotate(25deg); }
.card img { width: 100%; height: 220px; object-fit: cover; filter: brightness(.92); }
.card__body { padding: 16px; }
.card__body h3 { margin: 0 0 4px; color: #ffe7a1; position: relative; overflow: hidden; }
.card__body h3::after { content:''; position:absolute; top:0; bottom:0; left:0; width:16%; background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,.25) 50%, transparent 100%); animation: shine-h3 1.8s ease-in-out infinite alternate; mix-blend-mode: screen; pointer-events:none; }
.card__body p { margin: 0; color: #d6c48a; }

/* Galería Swiper */
.gallery-swiper .swiper-slide { height: 380px; }
.gallery-swiper img { width: 100%; height: 100%; object-fit: cover; border-radius: 14px; border: 1px solid rgba(212,175,55,.18); box-shadow: 0 12px 40px rgba(0,0,0,.35); }

/* CTA Reservas */
.cta { display: grid; grid-template-columns: 1.2fr 1fr; gap: 24px; align-items: center; background: linear-gradient(145deg, rgba(255,255,255,.02), rgba(255,255,255,.01)); border: 1px solid rgba(212,175,55,.18); border-radius: 16px; padding: 20px; box-shadow: 0 12px 40px rgba(0,0,0,.35); }
@media (max-width: 900px){ .cta { grid-template-columns: 1fr; } }
.cta__media img { width: 100%; height: 340px; object-fit: cover; border-radius: 16px; border: 1px solid rgba(212,175,55,.18); }
.cta__content h3 { margin: 0 0 10px; font-size: 34px; color: #ffe7a1; }
.cta__content p { margin: 0 0 18px; opacity: .85; }

/* Formulario */
.form .grid { display: grid; grid-template-columns: repeat(1, 1fr); gap: 14px; }
@media (min-width: 768px) { .form .grid { grid-template-columns: repeat(4, 1fr); } }
.form input, .form select { width: 100%; padding: 12px 14px; background: #0f1014; color: #f3f3f3; border-radius: 10px; border: 1px solid rgba(212,175,55,.25); outline: none; }
.btn { margin-top: 16px; padding: 12px 22px; border-radius: 999px; border: none; cursor: pointer; color: #0b0b0b; font-weight: 800; letter-spacing: 1px; background: linear-gradient(145deg, var(--gold-3), var(--gold), var(--gold-4)); box-shadow: 0 10px 24px rgba(212,175,55,.35); }
.btn--xl { padding: 14px 28px; font-size: 16px; }
.btn:hover { filter: brightness(1.05); }

/* Line-Up horizontal moderno */
.lineup { overflow: hidden; position: relative; }
.lineup__scroller { display: grid; grid-auto-flow: column; grid-auto-columns: 320px; gap: 16px; padding-bottom: 10px; }
/* Marquesina infinita para lineup */
.lineup__track { display: inline-grid; grid-auto-flow: column; grid-auto-columns: 320px; gap: 16px; white-space: nowrap; animation: lineup-marquee 16s linear infinite; }
@keyframes lineup-marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.lineup__card { scroll-snap-align: start; background: linear-gradient(145deg, rgba(255,255,255,.025), rgba(255,255,255,.01)); border: 1px solid rgba(212,175,55,.2); border-radius: 14px; padding: 16px; display: grid; gap: 10px; box-shadow: 0 10px 30px rgba(0,0,0,.35); }
.lineup__card .day { color: #ffe7a1; font-weight: 800; letter-spacing: 1px; }
.lineup__card .act { color: #d6c48a; }
.lineup__card .tag { display:inline-block; padding: 6px 10px; border-radius: 999px; font-size: 12px; background: linear-gradient(135deg, var(--accent1), var(--accent2)); color:#0b0b0b; font-weight: 800; }

/* Contacto */
.contact { display: grid; grid-template-columns: 1fr; gap: 20px; align-items: center; background: linear-gradient(145deg, rgba(255,255,255,.02), rgba(255,255,255,.01)); border: 1px solid rgba(212,175,55,.18); border-radius: 16px; padding: 20px; box-shadow: 0 12px 40px rgba(0,0,0,.35); }
@media (min-width: 900px) { .contact { grid-template-columns: 1fr 1fr; } }
.map { width: 100%; height: 300px; border: 0; border-radius: 12px; }

/* Footer */
.footer { text-align: center; padding: 28px 16px; border-top: 1px solid rgba(212,175,55,.2); color: #c8b886; background: radial-gradient(800px 240px at 80% 20%, rgba(181,23,158,.05), transparent), radial-gradient(800px 240px at 20% 80%, rgba(0,209,209,.05), transparent); }

/* Botón WhatsApp flotante */
.whatsapp-fab { position: fixed; right: 18px; bottom: 18px; background: linear-gradient(135deg, #2fe26b, #25D366); color: #0b0b0b; font-weight: 800; border-radius: 999px; box-shadow: 0 10px 30px rgba(0,0,0,.4); padding: 14px 18px; display: flex; gap: 10px; align-items: center; z-index: 50; text-decoration: none; }
.whatsapp-fab:hover { filter: brightness(1.05); transform: translateY(-1px); }