/* Cantina La 70 · discoteca crossover · RDW Novatech Web Studio */
:root{
  --noche:#0d0714;
  --noche-2:#170d22;
  --rosa:#ff2d87;        /* color principal */
  --rosa-osc:#c3155f;
  --bombillo:#ffd23f;
  --cian:#29e0e6;
  --blanco:#fbf7ff;
  --gris:#a79bb5;
  --linea:rgba(251,247,255,.12);
  --display:"Syne", "Arial Black", system-ui, sans-serif;
  --texto:"Red Hat Text", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono:"Space Mono", ui-monospace, Consolas, monospace;
  --pad:clamp(20px, 5vw, 72px);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--noche);color:var(--blanco);font-family:var(--texto);font-size:17px;line-height:1.6;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
p{text-wrap:pretty}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.saltar{position:absolute;left:-999px;top:8px;background:var(--blanco);color:var(--noche);padding:8px 14px;z-index:99}
.saltar:focus{left:8px}
:focus-visible{outline:2px solid var(--bombillo);outline-offset:3px}
.etiqueta{font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--cian);margin:0 0 14px}
.h2{font-family:var(--display);font-weight:800;font-size:clamp(36px, 5.6vw, 76px);line-height:.98;letter-spacing:-.03em;margin:0 0 18px;text-wrap:balance}
.h2 em{font-style:normal;color:var(--rosa)}
.sub{color:var(--gris);max-width:54ch;margin:0}
.cabeza{max-width:1200px;margin:0 auto 46px}
.sello{display:inline-grid;place-items:center;min-width:34px;height:22px;padding:0 6px;border-radius:4px;background:var(--bombillo);color:var(--noche);font-family:var(--mono);font-weight:700;font-size:12px;margin-right:8px}

/* aviso +18 */
.mayores{position:relative;z-index:51;margin:0;padding:8px var(--pad);padding-top:max(8px, env(safe-area-inset-top));background:#000;color:var(--gris);font-size:13px;text-align:center}

/* botones */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:0 26px;border-radius:12px;font-weight:700;font-size:15px;text-decoration:none;border:1.5px solid transparent;transition:transform .2s, box-shadow .25s, border-color .25s, background .25s;cursor:pointer;font-family:inherit}
.btn-rosa{background:var(--rosa);color:#fff;box-shadow:0 0 0 rgba(255,45,135,0)}
.btn-rosa:hover{box-shadow:0 0 34px rgba(255,45,135,.55);transform:translateY(-2px)}
.btn-linea{border-color:rgba(251,247,255,.3);color:var(--blanco);background:rgba(13,7,20,.35)}
.btn-linea:hover{border-color:var(--cian);color:var(--cian)}
.btn-chico{min-height:40px;padding:0 18px;font-size:14px}

/* barra */
.barra{position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:20px;padding:12px var(--pad);background:rgba(13,7,20,.82);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--linea)}
.marca{font-family:var(--display);font-weight:800;font-size:22px;letter-spacing:-.03em;text-decoration:none;margin-right:auto}
.marca b{color:var(--rosa);margin-left:2px}
.nav{display:none;gap:26px}
.nav a{text-decoration:none;font-size:14px;color:var(--gris)}
.nav a:hover{color:var(--blanco)}
.estado{display:none;font-family:var(--mono);font-size:12px;color:var(--gris)}
.estado.abierto{color:var(--cian)}
@media (min-width:1000px){.nav{display:flex}.estado{display:inline}}

/* hero */
.hero{position:relative;min-height:calc(100svh - 110px);display:grid;place-items:center;padding:60px var(--pad) 90px;overflow:hidden;isolation:isolate;text-align:center}
.hero-fondo{position:absolute;inset:0;z-index:-3}
.hero-fondo img{width:100%;height:100%;object-fit:cover;opacity:.42;filter:saturate(1.2)}
.hero-fondo::after{content:"";position:absolute;inset:0;background:radial-gradient(70% 60% at 50% 45%, rgba(13,7,20,.35), var(--noche) 92%)}
.haces{position:absolute;inset:0;z-index:-2;pointer-events:none;mix-blend-mode:screen}
.haces span{position:absolute;bottom:-10%;width:34vmax;height:120vmax;transform-origin:50% 100%;background:linear-gradient(to top, rgba(255,45,135,.28), transparent 70%);clip-path:polygon(45% 100%,55% 100%,100% 0,0 0);animation:barre 7s ease-in-out infinite alternate}
.haces span:nth-child(1){left:2%;animation-delay:-2s}
.haces span:nth-child(2){left:40%;background:linear-gradient(to top, rgba(41,224,230,.22), transparent 70%);animation-duration:9s}
.haces span:nth-child(3){right:2%;animation-delay:-5s;background:linear-gradient(to top, rgba(255,210,63,.18), transparent 70%)}
@keyframes barre{from{transform:rotate(-24deg)}to{transform:rotate(24deg)}}

.marquesina{position:relative;padding:clamp(34px, 6vw, 70px) clamp(22px, 6vw, 90px);border-radius:22px;max-width:980px;background:rgba(13,7,20,.55);border:2px solid rgba(255,210,63,.35);box-shadow:0 0 60px rgba(255,45,135,.18), inset 0 0 40px rgba(255,45,135,.12)}
/* bombillos que corren alrededor */
.bombillos{position:absolute;inset:-9px;border-radius:28px;pointer-events:none;padding:9px;
  -webkit-mask:linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
          mask:linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  background:radial-gradient(circle, var(--bombillo) 0 3.2px, transparent 4.2px) 0 0/26px 26px}
.b1{animation:prende 1s steps(1) infinite}
.b2{background-position:13px 13px;animation:prende 1s steps(1) infinite .5s;opacity:0}
@keyframes prende{0%{opacity:1;filter:drop-shadow(0 0 4px var(--bombillo))}50%{opacity:.18;filter:none}}
.titular{margin:0 0 20px;line-height:.86;font-family:var(--display);font-weight:800;letter-spacing:-.05em}
.t-chico{display:block;font-size:clamp(26px, 4vw, 46px);letter-spacing:.32em;text-transform:uppercase;font-weight:700;color:var(--bombillo);margin-bottom:8px;padding-left:.32em}
.t-grande{position:relative;display:inline-block;white-space:nowrap;font-size:clamp(72px, 12vw, 170px);color:var(--blanco);text-shadow:0 0 26px rgba(255,45,135,.6)}
.t-grande::before,.t-grande::after{content:attr(data-texto);position:absolute;inset:0;pointer-events:none}
.t-grande::before{color:var(--cian);mix-blend-mode:screen;animation:rgb1 4.5s infinite}
.t-grande::after{color:var(--rosa);mix-blend-mode:screen;animation:rgb2 4.5s infinite}
@keyframes rgb1{0%,88%,100%{transform:none;opacity:0}90%{transform:translate(-6px,2px);opacity:.9}94%{transform:translate(4px,-2px);opacity:.7}}
@keyframes rgb2{0%,88%,100%{transform:none;opacity:0}91%{transform:translate(6px,-1px);opacity:.9}95%{transform:translate(-3px,2px);opacity:.6}}
.hero-sub{max-width:44ch;margin:0 auto 28px;color:#e4dcee;font-size:clamp(16px, 1.6vw, 19px)}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.nota{position:absolute;left:50%;bottom:24px;transform:translateX(-50%);display:flex;align-items:center;gap:12px;white-space:nowrap;font-size:13px;color:var(--gris)}
.nota strong{font-family:var(--display);font-size:28px;color:var(--bombillo)}
.nota b{color:var(--blanco)}
.estrellas{position:relative;display:inline-block;letter-spacing:2px;color:rgba(251,247,255,.2)}
.estrellas i{position:absolute;inset:0;width:calc(var(--nota)*100%);overflow:hidden;color:var(--bombillo);font-style:normal;white-space:nowrap}

/* ecualizador */
.eq{display:flex;align-items:flex-end;gap:4px;height:64px;padding:0 var(--pad);overflow:hidden;opacity:.85}
.eq i{flex:1;min-width:3px;background:linear-gradient(to top, var(--rosa), var(--bombillo));border-radius:2px 2px 0 0;height:20%;transition:height .18s ease-out}

/* boletas */
.noche{padding:90px var(--pad)}
.boletas{list-style:none;margin:0 auto;padding:0;max-width:1200px;display:grid;gap:18px}
@media (min-width:760px){.boletas{grid-template-columns:repeat(2,1fr)}}
.boleta{display:flex;min-height:190px;border-radius:16px;background:var(--noche-2);position:relative;transition:transform .3s}
.boleta:nth-child(odd){transform:rotate(-.6deg)}
.boleta:nth-child(even){transform:rotate(.5deg)}
.boleta:hover{transform:rotate(0) translateY(-4px)}
.b-cuerpo{flex:1;padding:26px 26px 26px 28px;border:1.5px solid var(--linea);border-right:none;border-radius:16px 0 0 16px;background:linear-gradient(135deg, rgba(255,45,135,.14), transparent 60%)}
.b-num{color:var(--rosa);font-size:13px}
.boleta h3{font-family:var(--display);font-weight:800;font-size:clamp(28px, 3.2vw, 40px);letter-spacing:-.03em;margin:4px 0 8px;line-height:1}
.boleta p{margin:0;color:var(--gris)}
.b-talon{width:92px;flex:none;display:grid;place-content:center;text-align:center;border:1.5px dashed rgba(255,210,63,.45);border-radius:0 16px 16px 0;background:rgba(255,210,63,.06);transform-origin:0 0;transition:transform .7s cubic-bezier(.3,1.4,.5,1)}
.b-talon span{font-size:10px;text-transform:uppercase;letter-spacing:.14em;color:var(--bombillo)}
.b-talon b{font-family:var(--display);font-size:40px;line-height:1;color:var(--bombillo)}
.boleta.visto .b-talon{transform:rotate(7deg) translate(6px,4px)}
.hora-loca{margin-top:16px;background:none;border:1.5px solid var(--bombillo);color:var(--bombillo);border-radius:999px;padding:8px 16px;font:700 14px var(--texto);cursor:pointer}
.hora-loca:hover{background:var(--bombillo);color:var(--noche)}
.confeti{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:70}

/* celebra */
.celebra{display:grid;gap:40px;align-items:center;padding:90px var(--pad);max-width:1340px;margin:0 auto}
@media (min-width:900px){.celebra{grid-template-columns:1fr 1fr;gap:6vw}}
.celebra-foto{margin:0;border-radius:18px;overflow:hidden;aspect-ratio:4/3}
.celebra-foto img{width:100%;height:100%;object-fit:cover}
.celebra-texto > p{color:#ddd3e8;max-width:48ch}
.planes{list-style:none;display:flex;flex-wrap:wrap;gap:10px;padding:0;margin:24px 0 28px}
.planes button{font:600 15px var(--texto);color:var(--blanco);background:transparent;border:1.5px solid var(--linea);border-radius:999px;padding:10px 18px;cursor:pointer;transition:all .2s}
.planes button:hover{border-color:var(--rosa)}
.planes button[aria-pressed="true"]{background:var(--rosa);border-color:var(--rosa)}

/* flash de cámara al aparecer */
.flash{position:relative}
.flash::after{content:"";position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none}
.flash.visto::after{animation:flash .7s ease-out}
@keyframes flash{0%{opacity:.85}100%{opacity:0}}

/* galería */
.galeria{padding:80px var(--pad)}
.tira{display:grid;gap:12px;grid-template-columns:repeat(2,1fr);max-width:1300px;margin:0 auto}
.tira figure{margin:0;border-radius:14px;overflow:hidden;background:var(--noche-2)}
.tira img{width:100%;height:100%;object-fit:cover;transition:transform .6s, filter .6s;filter:saturate(1.1)}
.tira figure:hover img{transform:scale(1.05);filter:saturate(1.35)}
.f1{grid-column:1/-1;aspect-ratio:16/8}
@media (min-width:900px){
  .tira{grid-template-columns:repeat(6,1fr);grid-auto-rows:220px}
  .f1{grid-column:1/4;grid-row:span 2;aspect-ratio:auto}
  .f2{grid-column:4/7}
  .f3{grid-column:4/6}
  .f4{grid-column:6/7}
  .f5{grid-column:1/7;}
}
.aviso-fotos{text-align:center;font-family:var(--mono);font-size:12px;color:var(--gris);margin:18px 0 0}

/* opiniones */
.opiniones{display:grid;gap:26px;align-items:center;justify-items:start;padding:80px var(--pad);max-width:1200px;margin:0 auto}
@media (min-width:900px){.opiniones{grid-template-columns:auto 1fr;column-gap:70px}.opiniones .btn{grid-column:2}}
.op-num h2{font-family:var(--display);font-weight:800;font-size:clamp(90px, 13vw, 160px);line-height:.85;letter-spacing:-.05em;margin:0;color:var(--bombillo)}
.op-num small{font-size:.3em;color:var(--gris);letter-spacing:0}
.op-num p{margin:8px 0 0;color:var(--gris)}
.vu{display:flex;gap:3px;margin-top:14px;height:12px;width:240px;background:repeating-linear-gradient(90deg, rgba(251,247,255,.1) 0 9px, transparent 9px 12px)}
.vu span{display:block;height:100%;width:calc(var(--nota)*100%);background:repeating-linear-gradient(90deg, var(--cian) 0 9px, transparent 9px 12px);clip-path:inset(0 100% 0 0);transition:clip-path 1.4s steps(18)}
.opiniones.visto .vu span{clip-path:inset(0 0 0 0)}
.resumen{font-size:clamp(20px, 2.4vw, 28px);line-height:1.45;margin:0}
.resumen mark{background:linear-gradient(transparent 62%, rgba(255,45,135,.5) 62%);color:inherit;padding:0 2px}

/* antes de ir */
.antes{padding:80px var(--pad);background:var(--noche-2);border-block:1px solid var(--linea)}
.faq{max-width:900px;margin:0 auto;display:grid;gap:10px}
.faq details{border:1.5px solid var(--linea);border-radius:14px;padding:0 22px;background:var(--noche)}
.faq summary{cursor:pointer;list-style:none;padding:20px 30px 20px 0;font-weight:700;font-size:18px;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:0;top:50%;transform:translateY(-50%);font-family:var(--mono);font-size:22px;color:var(--rosa);transition:transform .25s}
.faq details[open] summary::after{transform:translateY(-50%) rotate(45deg)}
.faq details p{margin:0 0 20px;color:var(--gris)}

/* visita */
.visita{display:grid;gap:40px;padding:90px var(--pad) 110px;max-width:1340px;margin:0 auto}
@media (min-width:900px){.visita{grid-template-columns:1fr 1fr}}
.direccion{color:var(--gris);margin:0 0 24px;max-width:44ch}
.horario{width:100%;max-width:460px;border-collapse:collapse}
.horario th,.horario td{padding:10px 0;border-bottom:1px solid var(--linea);text-align:left;font-weight:400}
.horario td{text-align:right;font-family:var(--mono);font-size:14px;color:var(--gris)}
.horario tr.hoy th,.horario tr.hoy td{color:var(--rosa);font-weight:700}
.nota-horario{font-size:14px;color:var(--gris);margin:12px 0 0}
.visita-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.mapa{border-radius:18px;overflow:hidden;min-height:380px;border:1px solid var(--linea)}
.mapa iframe{width:100%;height:100%;min-height:420px;border:0;filter:invert(.9) hue-rotate(180deg) saturate(.7)}

/* pie */
.pie{text-align:center;padding:60px var(--pad) calc(110px + env(safe-area-inset-bottom));border-top:1px solid var(--linea);color:var(--gris);font-size:14px}
.pie-marca{font-family:var(--display);font-weight:800;font-size:36px;letter-spacing:-.03em;color:var(--blanco);margin:0 0 10px}
.pie-marca b{color:var(--rosa)}
.pie p{margin:6px 0}
.pie-chico{font-size:12px;max-width:60ch;margin-inline:auto !important}
.firma{margin-top:24px !important;font-family:var(--mono);font-size:12px;letter-spacing:.05em}

.wa-flotante{position:fixed;right:max(18px, env(safe-area-inset-right));bottom:max(18px, env(safe-area-inset-bottom));z-index:60;width:60px;height:60px;border-radius:50%;background:#25d366;display:grid;place-items:center;box-shadow:0 10px 30px rgba(0,0,0,.5);transition:transform .25s}
.wa-flotante:hover{transform:scale(1.08)}
.wa-flotante svg{width:32px;height:32px;fill:#fff}

.js .aparece{opacity:0;transform:translateY(24px);transition:opacity .6s, transform .6s cubic-bezier(.2,.8,.2,1)}
.js .aparece.visto{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important;transition:none !important}
  html{scroll-behavior:auto}
  .js .aparece{opacity:1;transform:none}
  .vu span{clip-path:none}
}
@media (max-width:520px){
  .mayores{font-size:12px;text-align:left}
  .hero{min-height:auto;padding-top:40px;padding-bottom:110px}
  .btn{width:100%}
  .barra .btn{width:auto}
  .nota{font-size:12px}
  .b-talon{width:70px}
}