/* Son de La 70 · bar para bailar · RDW Novatech Web Studio */
:root{
  --tabaco:#1c1410;
  --tabaco-2:#2a1e17;
  --papel:#f1e4c8;
  --naranja:#ee7f22;     /* color principal */
  --verde:#2a8c82;
  --rojo:#c8372d;
  --sepia:#b9a68a;
  --linea:rgba(241,228,200,.16);
  --display:"Abril Fatface", "Bodoni MT Black", Georgia, serif;
  --texto:"Karla", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono:"Courier Prime", "Courier New", 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(--tabaco);color:var(--papel);font-family:var(--texto);font-size:17px;line-height:1.6;overflow-x:hidden}
/* textura de papel viejo, sin imágenes */
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:80;opacity:.06;background-image:radial-gradient(rgba(255,255,255,.7) 1px, transparent 1.2px), radial-gradient(rgba(0,0,0,.8) 1px, transparent 1.2px);background-size:7px 7px, 11px 11px;background-position:0 0, 3px 5px;mix-blend-mode:overlay}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
p{text-wrap:pretty}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.saltar{position:absolute;left:-999px;top:8px;background:var(--papel);color:var(--tabaco);padding:8px 14px;z-index:99}
.saltar:focus{left:8px}
:focus-visible{outline:2px dashed var(--naranja);outline-offset:4px}
.etiqueta{font-family:var(--mono);font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--naranja);margin:0 0 14px}
.h2{font-family:var(--display);font-weight:400;font-size:clamp(38px, 5.6vw, 76px);line-height:1;margin:0 0 18px;text-wrap:balance}
.h2 em{font-family:var(--texto);font-style:italic;font-weight:400;color:var(--naranja);letter-spacing:-.02em}
.sub{color:var(--sepia);max-width:52ch;margin:0}
.cabeza{max-width:1200px;margin:0 auto 46px}

.mayores{margin:0;padding:7px var(--pad);padding-top:max(7px, env(safe-area-inset-top));background:var(--rojo);color:#fff;font-size:13px;text-align:center}
.mayores b{font-family:var(--mono);margin-right:6px}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:50px;padding:0 24px;font-weight:800;font-size:15px;text-decoration:none;border:2px solid transparent;border-radius:3px;transition:transform .2s, box-shadow .2s, background .2s;font-family:inherit;cursor:pointer}
.btn-naranja{background:var(--naranja);color:var(--tabaco);box-shadow:4px 4px 0 var(--rojo)}
.btn-naranja:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--rojo)}
.btn-linea{border-color:var(--papel);color:var(--papel)}
.btn-linea:hover{background:var(--papel);color:var(--tabaco)}
.btn-chico{min-height:40px;padding:0 16px;font-size:14px;box-shadow:3px 3px 0 var(--rojo)}

.barra{position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:22px;padding:12px var(--pad);background:rgba(28,20,16,.9);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--linea)}
.marca{display:flex;align-items:center;gap:10px;font-family:var(--display);font-size:24px;text-decoration:none;margin-right:auto;white-space:nowrap}
.punto{width:22px;height:22px;border-radius:50%;background:var(--naranja);box-shadow:inset 0 0 0 6px var(--naranja), inset 0 0 0 11px var(--tabaco);animation:gira 4s linear infinite}
@keyframes gira{to{transform:rotate(360deg)}}
.nav{display:none;gap:26px}
.nav a{text-decoration:none;font-size:15px;color:var(--sepia)}
.nav a:hover{color:var(--papel)}
@media (min-width:960px){.nav{display:flex}}

/* hero cartel */
.hero{position:relative;display:grid;gap:40px;align-items:center;padding:60px var(--pad) 80px;max-width:1400px;margin:0 auto;min-height:calc(100svh - 100px)}
@media (min-width:900px){.hero{grid-template-columns:1.15fr .85fr;gap:5vw}}
.titular{margin:0 0 24px;font-family:var(--display);font-weight:400;line-height:.82}
.titular span{display:block}
.t1{font-size:clamp(90px, 13vw, 180px);color:var(--papel)}
.t2{font-family:var(--texto);font-style:italic;font-size:clamp(30px, 4.4vw, 58px);color:var(--sepia);margin:.1em 0 .05em .1em;line-height:1}
.t3{font-size:clamp(130px, 18vw, 250px);color:var(--naranja);text-shadow:6px 6px 0 var(--rojo), 12px 12px 0 var(--verde);letter-spacing:-.02em}
.t3 i{display:inline-block;font-style:normal}
.hero-sub{max-width:44ch;color:#e6d8bb;margin:0 0 28px;font-size:clamp(17px, 1.5vw, 19px)}
.hero-cta{display:flex;flex-wrap:wrap;gap:14px}

.cartel{margin:0;background:var(--papel);color:var(--tabaco);padding:16px 16px 22px;transform:rotate(2.2deg);box-shadow:0 30px 60px rgba(0,0,0,.45);position:relative;
  clip-path:polygon(0 1%,4% 0,9% 1.2%,15% .2%,22% 1%,30% 0,38% 1.1%,47% .2%,55% 1%,63% 0,72% 1.2%,80% .3%,88% 1%,95% 0,100% 1.3%,99.4% 50%,100% 98.6%,94% 100%,86% 99%,77% 100%,68% 98.9%,59% 100%,50% 99%,41% 100%,32% 98.8%,23% 100%,14% 99%,6% 100%,0 98.7%,.6% 50%)}
.cartel::before{content:"";position:absolute;top:-6px;left:50%;width:90px;height:26px;transform:translateX(-50%) rotate(-3deg);background:rgba(241,228,200,.55);box-shadow:0 1px 2px rgba(0,0,0,.15)}
.cartel-foto{aspect-ratio:4/3.3;overflow:hidden}
.cartel-foto img{width:100%;height:100%;object-fit:cover;filter:sepia(.35) contrast(1.08) saturate(1.1)}
.cartel figcaption{display:grid;gap:2px;text-align:center;margin-top:12px}
.c-gran{font-family:var(--display);font-size:clamp(46px, 5vw, 70px);line-height:1;color:var(--rojo)}
.c-linea{font-family:var(--mono);font-weight:700;font-size:15px;text-transform:uppercase;letter-spacing:.06em}
.c-chico{font-family:var(--mono);font-size:11px;color:#7a6a55}
.nota{display:flex;align-items:center;gap:14px;font-size:14px;color:var(--sepia);line-height:1.3}
.nota strong{font-family:var(--display);font-weight:400;font-size:52px;line-height:1;color:var(--papel)}
.nota b{color:var(--papel)}
@media (min-width:900px){.nota{grid-column:1/-1;margin-top:-10px}}

/* semitono que se disuelve al aparecer */
.trama{position:relative;overflow:hidden}
.trama::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle, var(--tabaco) 38%, transparent 42%) 0 0/9px 9px;opacity:.55;transition:opacity 1.2s ease, background-size 1.2s ease}
.trama.visto::after{opacity:.12;background-size:4px 4px}
.cartel .trama::after{background-image:radial-gradient(circle, rgba(28,20,16,.9) 30%, transparent 34%)}

/* clave */
.clave{display:grid;gap:40px;align-items:center;padding:100px var(--pad);background:var(--verde);color:var(--papel)}
@media (min-width:900px){.clave{grid-template-columns:1fr 1.1fr;gap:6vw}}
.clave .etiqueta{color:var(--papel);opacity:.8}
.clave .h2 em{color:var(--tabaco)}
.clave-texto p{max-width:46ch}
.escuchar{display:inline-flex;align-items:center;gap:10px;margin-top:10px;background:var(--tabaco);color:var(--papel);border:0;border-radius:999px;padding:14px 22px;font:800 15px var(--texto);cursor:pointer}
.escuchar[aria-pressed="true"]{background:var(--naranja);color:var(--tabaco)}
.escuchar .icono{font-size:12px}
.patron{background:rgba(28,20,16,.22);border-radius:10px;padding:clamp(18px, 3vw, 34px)}
.pasos{display:grid;grid-template-columns:repeat(16,1fr);gap:clamp(3px, .7vw, 8px)}
.pasos i{aspect-ratio:1;border-radius:50%;background:rgba(241,228,200,.16);transition:transform .12s, background .12s}
.pasos i.golpe{background:var(--papel)}
.pasos i.ahora{transform:scale(.8);box-shadow:0 0 0 3px rgba(241,228,200,.35)}
.pasos i.golpe.ahora{background:var(--naranja);transform:scale(1.25);box-shadow:0 0 18px var(--naranja)}
.cuenta{display:grid;grid-template-columns:repeat(8,1fr);margin:10px 0 0;font-family:var(--mono);font-size:12px;text-align:left;opacity:.8}

/* casa: mini carteles */
.casa{padding:100px var(--pad)}
.carteles{display:grid;gap:26px;max-width:1240px;margin:0 auto}
@media (min-width:700px){.carteles{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1100px){.carteles{grid-template-columns:repeat(4,1fr)}}
.mini{background:var(--papel);color:var(--tabaco);padding:12px 12px 20px;transform:rotate(var(--g));box-shadow:0 18px 40px rgba(0,0,0,.4);transition:transform .35s cubic-bezier(.3,1.5,.5,1)}
.mini:hover{transform:rotate(0) translateY(-6px)}
.mini img{width:100%;aspect-ratio:4/3;object-fit:cover;filter:sepia(.3) contrast(1.05)}
.mini h3{font-family:var(--display);font-weight:400;font-size:28px;line-height:1.05;margin:14px 4px 6px}
.mini p{margin:0 4px;font-size:15px;color:#5a4a3a}
.js .mini{opacity:0;transform:rotate(calc(var(--g) * 4)) translateY(50px) scale(.94)}
.js .mini.visto{opacity:1;transform:rotate(var(--g));transition:opacity .5s, transform .8s cubic-bezier(.3,1.4,.5,1)}
.js .mini.visto:hover{transform:rotate(0) translateY(-6px)}

/* dial de radio */
.dial{padding:90px var(--pad);background:var(--tabaco-2);border-block:1px solid var(--linea)}
.radio{max-width:900px;margin:0 auto}
.radio-caja{margin-top:30px;background:linear-gradient(#3a2a20,#2a1e17);border:2px solid #5b4332;border-radius:18px;padding:24px clamp(16px, 4vw, 40px) 26px;box-shadow:inset 0 2px 0 rgba(255,255,255,.06), 0 20px 40px rgba(0,0,0,.35)}
.escala{position:relative;display:flex;justify-content:space-between;padding:14px 10px;border-radius:8px;background:linear-gradient(#f3d9a6,#e9c886);color:var(--tabaco);font-family:var(--mono);font-weight:700;font-size:clamp(11px, 1.6vw, 15px);box-shadow:inset 0 0 18px rgba(120,60,10,.45)}
.escala::before{content:"";position:absolute;left:10px;right:10px;bottom:6px;height:8px;background:repeating-linear-gradient(90deg, rgba(28,20,16,.55) 0 1px, transparent 1px 8px)}
.aguja{position:absolute;top:4px;bottom:4px;width:3px;background:var(--rojo);left:calc(10px + var(--pos, 0) * (100% - 23px));transition:left .45s cubic-bezier(.3,1.4,.5,1);box-shadow:0 0 6px rgba(200,55,45,.7)}
.radio input{width:100%;margin:18px 0 4px;accent-color:var(--naranja);height:30px;cursor:pointer}
.lectura{font-size:clamp(20px, 2.6vw, 28px);margin:6px 0 0}
.lectura b{font-family:var(--display);font-weight:400;color:var(--naranja);margin-right:8px}
.nota-horario{font-size:14px;color:var(--sepia);margin:16px 0 0}

/* galería */
.galeria{padding:90px var(--pad)}
.fila{display:grid;gap:14px;max-width:1300px;margin:0 auto}
@media (min-width:760px){.fila{grid-template-columns:1fr 1.3fr 1fr}}
.fila figure{margin:0;aspect-ratio:4/5;border:10px solid var(--papel);box-shadow:0 16px 40px rgba(0,0,0,.4)}
.fila figure:nth-child(2){aspect-ratio:auto}
.fila img{width:100%;height:100%;object-fit:cover;filter:sepia(.25) contrast(1.06)}
.aviso-fotos{text-align:center;font-family:var(--mono);font-size:13px;color:var(--sepia);margin:22px 0 0}

/* opiniones */
.opiniones{display:grid;gap:30px;align-items:center;padding:80px var(--pad);max-width:1200px;margin:0 auto}
@media (min-width:900px){.opiniones{grid-template-columns:auto 1fr;gap:70px}}
.op-num h2{font-family:var(--display);font-weight:400;font-size:clamp(100px, 13vw, 170px);line-height:.85;margin:0;color:var(--naranja);text-shadow:5px 5px 0 var(--rojo)}
.op-num small{font-size:.3em;color:var(--sepia);text-shadow:none}
.op-num p{margin:10px 0 0;color:var(--sepia)}
.op-num b{color:var(--papel)}
.resumen{font-size:clamp(20px, 2.3vw, 27px);line-height:1.45;margin:0 0 26px}
.resumen u{text-decoration-color:var(--naranja);text-decoration-thickness:3px;text-underline-offset:5px}

/* 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;align-items:start}}
.direccion{color:var(--sepia);max-width:46ch;margin:0 0 26px}
.visita-cta{display:flex;flex-wrap:wrap;gap:14px}
.cuidado{margin:26px 0 0;padding:14px 16px;border-left:4px solid var(--naranja);background:rgba(241,228,200,.06);font-size:15px;color:#e6d8bb}
.mapa{border:10px solid var(--papel);min-height:380px;transform:rotate(-1deg);box-shadow:0 20px 40px rgba(0,0,0,.4)}
.mapa iframe{width:100%;height:100%;min-height:400px;border:0;display:block;filter:sepia(.5) contrast(1.05)}

/* pie */
.pie{text-align:center;padding:60px var(--pad) calc(110px + env(safe-area-inset-bottom));border-top:1px solid var(--linea);color:var(--sepia);font-size:14px}
.pie-marca{font-family:var(--display);font-size:38px;color:var(--papel);margin:0 0 10px}
.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:13px}

.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,.45);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,.js .mini{opacity:1;transform:rotate(var(--g, 0deg))}
}
@media (max-width:520px){
  .btn{width:100%}
  .barra .btn{width:auto}
  .marca{font-size:20px}
  .hero{padding-top:36px}
  .cartel{transform:rotate(1.2deg)}
}