/* =====================================================
   369 Producciones · style.css (compartido por todo el sitio)
   Todos los tamaños están en px escritos directamente en cada regla.
   ===================================================== */
:root{
  /* Colores */
  --bg:#0a0710;
  --bg-2:#130e1d;
  --card:#161219;
  --line:rgba(255,255,255,.1);
  --text:#f4f0fa;
  --muted:#a79fb8;
  --orange:#ff8a00;
  --pink:#ff2d87;
  --violet:#9b1cff;
  --grad:linear-gradient(135deg,var(--orange),var(--pink) 50%,var(--violet));
  --font:'Outfit',system-ui,sans-serif;
}
/* Los tamaños (letras, logo, ancho, círculos) están escritos en px directamente en cada regla:
   .brand img = alto del logo · .wrap = ancho máximo · body = tamaño base · h2 = títulos ·
   .artist / .artist .avatar = círculos de artistas · .big span = marquesinas.
   Si cambiás el alto del logo (.brand img), ajustá también body{padding-top} = alto del logo + 5px (2px + 2px de padding y 1px de borde). */

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:72px}
body{padding-top:205px;background:var(--bg);color:var(--text);font:400 17px/1.65 var(--font);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;text-align:inherit}
:focus-visible{outline:2px solid var(--orange);outline-offset:3px}
.wrap{width:min(1400px,94%);margin-inline:auto}

/* ---------- Botones con vida ---------- */
.btn{position:relative;display:inline-flex;align-items:center;gap:10px;overflow:hidden;isolation:isolate;
  padding:16px 30px;border-radius:99px;color:#fff;font:600 16px/1 var(--font);letter-spacing:.01em;
  background:linear-gradient(110deg,var(--orange),var(--pink),var(--violet),var(--pink),var(--orange));background-size:300% 100%;
  animation:flow 7s linear infinite;box-shadow:0 8px 28px -8px rgba(255,45,135,.65);
  transition:transform .35s cubic-bezier(.3,1.5,.5,1),box-shadow .3s}
.btn::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.45) 50%,transparent 65%);translate:-120% 0;animation:shine 3.8s ease-in-out infinite}
.btn i{font-style:normal;display:inline-block;transition:translate .3s}
.btn::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(130px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.55),transparent 70%);opacity:0;transition:opacity .25s}
.btn:hover::before{opacity:1}
.btn:hover{animation:flow 2.4s linear infinite,halo 1.1s ease-out infinite}
@keyframes halo{from{box-shadow:0 0 0 0 rgba(255,45,135,.7)}to{box-shadow:0 0 0 20px rgba(255,45,135,0)}}
.btn:hover i{translate:6px 0}
.btn:active{transform:scale(.95)}
.btn.sm{padding:13px 22px}
.ripple{position:absolute;border-radius:50%;background:rgba(255,255,255,.5);pointer-events:none;translate:-50% -50%;width:10px;height:10px;animation:ripple .65s ease-out forwards}
@keyframes flow{to{background-position:300% 0}}
@keyframes shine{0%,55%{translate:-120% 0}100%{translate:120% 0}}
@keyframes ripple{to{width:380px;height:380px;opacity:0}}

/* ---------- Header ---------- */
.top{position:fixed;top:0;left:0;right:0;z-index:50;background:rgba(10,7,16,.88);backdrop-filter:blur(14px);border-bottom:1px solid var(--line);transition:box-shadow .3s}
.top.scrolled{box-shadow:0 10px 40px rgba(0,0,0,.5)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:32px;padding-block:2px;transition:padding .3s}
.top.scrolled .wrap{padding-block:2px}
.brand img{height:200px;width:auto;transition:height .3s}
.top.scrolled .brand img{height:80px}
.nav{display:flex;gap:34px;align-items:center;font:800 20px/1 var(--font)}
.nav a:not(.btn){position:relative;color:#fff;padding:6px 0;transition:color .2s}
.nav a:not(.btn)::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;background:var(--grad);scale:0 1;transform-origin:left;transition:scale .3s}
.nav a:not(.btn):hover::after,.nav a[aria-current]::after{scale:1 1}
.nav .btn.sm{font:800 20px/1 var(--font)}
.burger{display:none;width:48px;height:48px;border:1px solid var(--line);border-radius:12px}
.burger span{display:block;width:22px;height:2px;background:var(--text);margin:5px auto}

/* ---------- Revelado al hacer scroll ---------- */
.js [data-reveal]{opacity:0;translate:0 34px;transition:opacity .8s,translate .8s cubic-bezier(.2,.8,.2,1);transition-delay:var(--d,0s)}
.js [data-reveal].in{opacity:1;translate:0 0}

/* ---------- Portada ---------- */
.hero{padding:28px 0 0}
.hero-frame{position:relative;border-radius:24px;overflow:hidden;aspect-ratio:1400/560;background:var(--bg-2);box-shadow:0 30px 80px -30px rgba(155,28,255,.55)}
.slide{position:absolute;inset:0;opacity:0;transition:opacity .8s}
.slide.on{opacity:1}
.slide img{width:100%;height:100%;object-fit:cover}
.slide.ph{background:radial-gradient(circle at 25% 30%,#ff2d87 0,transparent 45%),radial-gradient(circle at 80% 70%,#9b1cff 0,transparent 50%),#1a1026;background-size:140% 140%;animation:aurora 14s ease-in-out infinite alternate}
@keyframes aurora{to{background-position:100% 100%}}
.dots{position:absolute;bottom:16px;left:0;right:0;display:flex;justify-content:center;gap:8px}
.dots button{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.4);transition:width .3s}
.dots button.on{background:#fff;width:28px;border-radius:9px}

/* ---------- Títulos de sección ---------- */
section{padding:110px 0 0}
.head{text-align:center;margin-bottom:48px}
.pill{display:inline-block;font:600 12px/1 var(--font);letter-spacing:.16em;text-transform:uppercase;color:var(--muted);border:1px solid var(--violet);border-radius:99px;padding:9px 16px;margin-bottom:18px}
h2{font:700 44px/1.08 var(--font);letter-spacing:-.025em}

/* ---------- Sobre nosotros ---------- */
.about{display:grid;grid-template-columns:1.05fr 1fr;border-radius:24px;overflow:hidden;background:var(--card);border:1px solid var(--line)}
.about-text{padding:72px 64px;display:flex;flex-direction:column;justify-content:center;gap:24px;font-size:18px;line-height:1.7;color:#e9e3f2}
.about-text p strong{color:#fff;font-weight:600}
.about-text .btn{align-self:flex-start;margin-top:8px}
.collage{position:relative;min-height:560px;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(4,1fr);gap:8px;padding:8px;background:#0c0912}
.tile{border-radius:10px;overflow:hidden;background:var(--c1);background-image:linear-gradient(160deg,var(--c1),var(--c2));animation:drift 7s ease-in-out infinite alternate;animation-delay:var(--d,0s)}
.tile img{width:100%;height:100%;object-fit:cover}
.tile.t1{grid-row:span 2}.tile.t4{grid-row:span 2}.tile.t7{grid-column:span 2}
@keyframes drift{from{translate:0 -7px;filter:brightness(.8)}to{translate:0 7px;filter:brightness(1.05)}}
.collage::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 50%,rgba(10,7,16,.78) 0,rgba(10,7,16,.25) 55%,transparent 75%);pointer-events:none}
.collage .logo{position:absolute;left:50%;top:50%;translate:-50% -50%;z-index:2;height:190px;width:auto;filter:drop-shadow(0 0 36px rgba(155,28,255,.8));animation:pulse 4s ease-in-out infinite}
@keyframes pulse{50%{scale:1.07;filter:drop-shadow(0 0 56px rgba(255,45,135,.9))}}
.sticker{position:absolute;z-index:3;top:22px;right:22px;width:120px;height:120px;border-radius:50%;background:var(--grad);display:grid;place-content:center;text-align:center;box-shadow:0 12px 30px rgba(0,0,0,.5);animation:wobble 5s ease-in-out infinite}
.sticker b{font:800 40px/1 var(--font)}
.sticker span{font:500 14px/1.1 var(--font)}
@keyframes wobble{0%,100%{rotate:-8deg}50%{rotate:8deg}}

/* ---------- Marquesinas ---------- */
.track{display:flex;width:max-content;animation:slide var(--dur,40s) linear infinite}
@keyframes slide{to{transform:translateX(-50%)}}
.big{overflow:hidden;padding:26px 0;margin-top:110px;border-block:1px solid var(--line)}
.big .track{--dur:34s;gap:56px;align-items:center;padding-right:56px}
.big.rev .track{animation-direction:reverse}
.big span{font:800 84px/1.05 var(--font);letter-spacing:-.03em;white-space:nowrap}
.big span.o{color:transparent;-webkit-text-stroke:2px var(--pink)}
.big img{height:71px;width:auto}
.big svg{width:42px;flex:none;fill:var(--orange);animation:spin 9s linear infinite}
@keyframes spin{to{rotate:360deg}}

/* ---------- Banner ---------- */
.banner{margin-top:110px}
.banner-box{position:relative;overflow:hidden;border-radius:24px;background:linear-gradient(110deg,var(--orange),var(--pink),var(--violet),var(--pink),var(--orange));background-size:300% 100%;animation:flow 14s linear infinite;padding:clamp(32px,5vw,72px);min-height:340px;display:flex;align-items:center}
.banner-box h2{font-size:58px;max-width:13ch;font-weight:800;line-height:1.02;position:relative;z-index:1}
.banner-box::after{content:"";position:absolute;right:-6%;top:-20%;width:50%;height:140%;background:repeating-linear-gradient(115deg,rgba(0,0,0,.28) 0 38px,transparent 38px 90px);transform:skewX(-8deg)}
.banner-box .disc{position:absolute;right:10%;top:50%;translate:0 -50%;width:min(280px,38vw);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,#ff2d87 0 12%,#111 13% 14%,#222 15% 30%,#111 31% 32%,#222 33% 60%,#111 61%);z-index:1;animation:spin 8s linear infinite;box-shadow:0 0 70px rgba(255,255,255,.25)}

/* ---------- Blog ---------- */
.posts{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.post{display:flex;flex-direction:column;gap:16px;width:100%;background:var(--bg-2);border:1px solid var(--line);border-radius:20px;padding:18px;transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:border-color .25s,transform .18s ease-out,box-shadow .3s}
.js .post[data-reveal]{transition:opacity .8s,translate .8s cubic-bezier(.2,.8,.2,1),transform .18s ease-out,border-color .25s,box-shadow .3s;transition-delay:var(--d,0s),var(--d,0s),0s,0s,0s}
.post:hover{border-color:var(--pink);box-shadow:0 24px 50px -20px rgba(255,45,135,.5);background:radial-gradient(340px circle at var(--mx,50%) var(--my,50%),rgba(255,45,135,.2),transparent 60%),var(--bg-2)}
.post .meta{font-size:14px;color:var(--muted)}
.post h3{font:600 20px/1.28 var(--font);letter-spacing:-.01em}
.post .img{aspect-ratio:16/10;border-radius:12px;background:linear-gradient(135deg,#1b1228,#2a0f3f);overflow:hidden}
.post .img img{width:100%;height:100%;object-fit:cover;transition:scale .6s}
.post:hover .img img{scale:1.07}
.post .more{margin-top:auto;display:flex;justify-content:space-between;align-items:center;font-size:14px;color:var(--muted)}
.post .more i{width:32px;height:32px;border-radius:50%;background:var(--grad);display:grid;place-items:center;color:#fff;font-style:normal;transition:rotate .35s}
.post:hover .more i{rotate:-45deg}

/* ---------- Videos ---------- */
.videos{margin-top:110px;display:grid;grid-template-columns:1fr;gap:0}
.vid{position:relative;aspect-ratio:16/9;background:var(--bg-2);overflow:hidden}
.vid iframe,.vid img{position:absolute;inset:0;width:100%;height:100%;border:0;object-fit:cover}
.vid img{transition:scale .6s}
.vid:hover img{scale:1.05}
.vid .play{position:absolute;inset:0;display:grid;place-items:center;background:linear-gradient(0deg,rgba(0,0,0,.5),transparent 50%);width:100%}
.vid .play span{position:relative;width:76px;height:76px;border-radius:50%;background:var(--grad);display:grid;place-items:center;transition:transform .3s cubic-bezier(.3,1.5,.5,1);box-shadow:0 8px 30px rgba(255,45,135,.5)}
.vid .play span::before{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid var(--pink);animation:ring 2.2s ease-out infinite}
.vid:hover .play span{transform:scale(1.15)}
.vid .play svg{width:28px;margin-left:4px;fill:#fff}
.vid.empty{background:linear-gradient(135deg,#1a1026,#2a0f3f)}
@keyframes ring{from{scale:1;opacity:.9}to{scale:1.9;opacity:0}}

/* ---------- Sociedades (SADAIC / AADI CAPIF) ---------- */
.socios{display:flex;justify-content:center;gap:clamp(20px,3vw,40px);flex-wrap:wrap;padding:80px 0 0}
.socios a{display:block;width:clamp(110px,14vw,170px);aspect-ratio:580/610;border-radius:9%;transform:perspective(700px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .18s ease-out,box-shadow .35s,translate .35s;box-shadow:0 20px 50px -26px rgba(0,0,0,.8)}
.socios a:hover{translate:0 -6px;box-shadow:0 0 0 3px var(--pink),0 30px 70px -14px rgba(155,28,255,.75)}
.socios img{width:100%;height:100%;object-fit:contain;border-radius:inherit}

/* ---------- Trámites online ---------- */
.tramites-card{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;padding:64px;border-radius:24px;border:1px solid transparent;background:linear-gradient(var(--card),var(--card)) padding-box,var(--grad) border-box}
.tramites-card h2{margin-bottom:16px}
.tramites-card p{font-size:18px;color:#e9e3f2;max-width:46ch}
.skeleton{display:grid;gap:14px}
.skeleton span{height:52px;border-radius:14px;background:linear-gradient(100deg,rgba(255,255,255,.05) 30%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.05) 70%) 0 0/200% 100%;animation:shimmer 2.2s linear infinite}
.skeleton span.tall{height:110px}
@keyframes shimmer{to{background-position:-200% 0}}

/* ---------- Contacto ---------- */
.contact{display:grid;grid-template-columns:1fr 1fr;gap:0;border-radius:24px;overflow:hidden;border:1px solid var(--line);background:#000}
.contact-info{padding:56px;display:flex;flex-direction:column;gap:28px}
.contact-info .logo{height:150px;width:auto;align-self:center;animation:pulse 5s ease-in-out infinite}
.arrow{width:70px;height:46px;overflow:visible}
.arrow path{fill:none;stroke:#fff;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:240;stroke-dashoffset:240;animation:draw 3.6s ease-in-out infinite}
@keyframes draw{0%{stroke-dashoffset:240}45%,80%{stroke-dashoffset:0}100%{stroke-dashoffset:-240}}
.clist{display:grid;gap:8px;list-style:none}
.clist a{display:flex;align-items:center;gap:18px;padding:10px 14px;margin-inline:-14px;border-radius:16px;font-size:19px;transition:background .25s,translate .3s}
.clist a:hover{background:rgba(255,255,255,.06);translate:8px 0}
.clist .ic{flex:none;width:48px;height:48px;border-radius:14px;display:grid;place-items:center;background:rgba(155,28,255,.18);transition:background .3s,rotate .35s cubic-bezier(.3,1.5,.5,1)}
.clist a:hover .ic{background:var(--grad);rotate:-8deg}
.clist svg{width:24px;height:24px;fill:none;stroke:#fff;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.map{position:relative;min-height:540px;padding:8px;background:var(--grad)}
.map iframe{position:absolute;inset:8px;width:calc(100% - 16px);height:calc(100% - 16px);border:0;border-radius:16px;filter:saturate(.85)}

/* ---------- Footer, WhatsApp ---------- */
footer{margin-top:110px;border-top:1px solid var(--line);padding:26px 0 34px;text-align:center;font-size:14px;color:var(--muted)}
footer a{color:var(--text);border-bottom:1px solid var(--pink)}
.wa{position:fixed;left:20px;bottom:20px;z-index:60;display:flex;align-items:center;gap:10px}
.wa .dot{position:relative;width:58px;height:58px;border-radius:50%;background:#25d366;display:grid;place-items:center;box-shadow:0 8px 24px rgba(0,0,0,.45);transition:transform .3s cubic-bezier(.3,1.5,.5,1)}
.wa .dot::before{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid #25d366;animation:ring 2.4s ease-out infinite}
.wa:hover .dot{transform:scale(1.12) rotate(-8deg)}
.wa svg{width:30px;fill:#fff}
.wa em{font:500 14px/1 var(--font);font-style:normal;background:#fff;color:#222;padding:9px 14px;border-radius:99px;box-shadow:0 6px 20px rgba(0,0,0,.35);transition:opacity .3s,translate .3s}

/* ---------- Modal (artistas y noticias) ---------- */
dialog{border:0;background:transparent;color:var(--text);margin:auto;width:min(960px,94vw);max-height:92vh;overflow:visible}
dialog[open]{animation:pop .4s cubic-bezier(.2,1.2,.4,1)}
dialog::backdrop{background:rgba(5,3,10,.85);backdrop-filter:blur(6px)}
@keyframes pop{from{opacity:0;scale:.92;translate:0 20px}}
.modal{display:grid;grid-template-columns:340px 1fr;background:var(--bg-2);border:1px solid var(--line);border-radius:24px;overflow:hidden;max-height:90vh}
.modal .pic{background:var(--c,#1a1026);min-height:340px;position:relative;display:grid;place-items:center;font:800 110px/1 var(--font);color:#fff}
.modal .pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.modal .info{padding:36px;overflow:auto}
.modal h3{font:800 36px/1.05 var(--font);letter-spacing:-.02em}
.modal .role{color:var(--pink);font-weight:600;margin:8px 0 18px}
.modal p{color:#d8d0e6;font-size:17px;margin-bottom:14px}
.modal h4{font:600 12px/1 var(--font);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:26px 0 14px}
.modal .vlist{display:grid;gap:14px}
.modal .vid{border-radius:14px}
.modal .links{display:flex;flex-wrap:wrap;gap:10px}
.modal .links a:not(.btn){border:1px solid var(--line);border-radius:99px;padding:9px 16px;font-size:14px;background:linear-gradient(var(--pink),var(--pink)) no-repeat left center/0% 100%;transition:background-size .35s ease,border-color .25s,color .25s}
.modal .links a:not(.btn):hover{border-color:var(--pink);background-size:100% 100%;color:#fff}
.close{position:absolute;top:-16px;right:-10px;z-index:3;width:44px;height:44px;border-radius:50%;background:var(--grad);font-size:24px;color:#fff;text-align:center;box-shadow:0 6px 20px rgba(0,0,0,.5);transition:rotate .35s,scale .3s}
.close:hover{rotate:90deg;scale:1.12}

/* ---------- Móvil ---------- */
@media(max-width:1100px){
  h2{font-size:38px}
  .banner-box h2{font-size:46px}
  .big span{font-size:64px}
  .big img{height:54px}
  .big svg{width:32px}
  .about-text{padding:48px 36px}
  .contact-info{padding:40px 32px}
}
@media(max-width:860px){
  body{font-size:16px;padding-top:65px}
  .brand img{height:60px}
  .top.scrolled .brand img{height:44px}
  .about-text{font-size:17px}
  h2{font-size:32px}
  .banner-box h2{font-size:36px}
  .big span{font-size:44px}
  .big img{height:37px}
  .big svg{width:22px}
  .modal h3{font-size:28px}
  .clist a{font-size:17px}
  section{padding-top:80px}
  .big,.banner,.videos{margin-top:80px}
  .nav{position:absolute;top:100%;left:0;right:0;background:var(--bg);flex-direction:column;align-items:flex-start;padding:24px;gap:20px;border-bottom:1px solid var(--line);opacity:0;visibility:hidden;translate:0 -10px;transition:opacity .25s,translate .25s,visibility .25s;font-size:18px}
  .nav.open{opacity:1;visibility:visible;translate:0 0}
  .burger{display:block}
  .hero-frame{aspect-ratio:16/10}
  .about,.contact,.tramites-card{grid-template-columns:1fr}
  .tramites-card{padding:32px 24px}
  .collage{min-height:420px}
  .posts{grid-template-columns:1fr}
  .modal{grid-template-columns:1fr;overflow:auto}
  .modal .pic{min-height:240px}
  .wa em{display:none}
  .map{min-height:380px}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition-duration:.01ms!important}
  .big{overflow-x:auto}
  html{scroll-behavior:auto}
  .js [data-reveal]{opacity:1;translate:none}
}

/* ---------- Nosotros: foto en lugar del collage ---------- */
.collage.photo{display:block;padding:0}
.collage.photo::after{display:none}
.collage.photo > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* ---------- Banner con video de fondo ---------- */
.banner-box{min-height:420px}
.banner-box::after{display:none}
.bg-video{position:absolute;inset:0;overflow:hidden;container-type:size;pointer-events:none}
.bg-video iframe{position:absolute;top:50%;left:50%;translate:-50% -50%;width:max(100cqw,177.78cqh);height:max(56.25cqw,100cqh);border:0}
.bg-video::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(10,7,16,.82),rgba(10,7,16,.35) 70%,rgba(10,7,16,.2))}
@media(max-width:860px){.banner-box{min-height:320px}.bg-video::after{background:rgba(10,7,16,.62)}}

/* ---------- Portada: luces de escenario ---------- */
.dots{z-index:3}
.lights{position:absolute;inset:0;z-index:2;pointer-events:none;overflow:hidden;mix-blend-mode:screen}
.lights i{position:absolute;top:-10%;left:calc(var(--x) * 1%);width:28%;height:140%;margin-left:-14%;transform-origin:50% 0;
  clip-path:polygon(47% 0,53% 0,100% 100%,0 100%);background:linear-gradient(180deg,var(--c) 0%,transparent 80%);filter:blur(8px);opacity:.6;
  animation:sweep var(--t) ease-in-out infinite alternate,glow 3.4s ease-in-out infinite alternate;animation-delay:var(--dl),calc(var(--dl) * .6)}
@keyframes sweep{from{rotate:calc(var(--a) * -1deg)}to{rotate:calc(var(--a) * 1deg)}}
@keyframes glow{from{opacity:.2}to{opacity:.62}}
.lights::before{content:"";position:absolute;inset:0;
  background:radial-gradient(circle at 10% -2%,rgba(255,255,255,.6),transparent 9%),radial-gradient(circle at 30% -2%,rgba(255,255,255,.6),transparent 9%),
  radial-gradient(circle at 50% -2%,rgba(255,255,255,.6),transparent 9%),radial-gradient(circle at 70% -2%,rgba(255,255,255,.6),transparent 9%),
  radial-gradient(circle at 90% -2%,rgba(255,255,255,.6),transparent 9%)}
.lights::after{content:"";position:absolute;inset:-20%;
  background:radial-gradient(40% 50% at 25% 80%,rgba(255,45,135,.35),transparent 70%),radial-gradient(40% 50% at 75% 85%,rgba(155,28,255,.4),transparent 70%);
  animation:haze 9s ease-in-out infinite alternate}
@keyframes haze{from{translate:-6% 0;opacity:.5}to{translate:6% -4%;opacity:1}}
@media(max-width:860px){.lights i{width:40%;margin-left:-20%}}

/* ---------- Artistas: 4 círculos grandes, fijos y en línea ---------- */
.artists{margin-top:8px}
.arena{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(24px,3.4vw,56px);width:min(1400px,94%);margin-inline:auto;padding:16px 14px 8px}
.artist{position:relative;display:block;width:100%;aspect-ratio:1;container-type:inline-size;text-align:center;border-radius:50%}
.artist .avatar{position:relative;z-index:2;width:100%;height:100%;border-radius:50%;overflow:hidden;border:5px solid transparent;
  background:var(--c) padding-box,var(--grad) border-box;box-shadow:0 22px 50px -18px var(--c);
  transition:transform .5s cubic-bezier(.3,1.4,.5,1),box-shadow .4s}
.artist .avatar img{width:100%;height:100%;object-fit:cover;filter:saturate(.9) contrast(1.02);transition:filter .5s,scale .7s cubic-bezier(.2,.8,.2,1)}
/* velo oscuro abajo para leer el nombre + surcos de vinilo (aparecen al hover) */
.artist .avatar::before{content:"";position:absolute;inset:0;z-index:1;border-radius:50%;opacity:0;transition:opacity .5s;mix-blend-mode:overlay;
  background:repeating-radial-gradient(circle at 50% 50%,rgba(255,255,255,.55) 0 1px,transparent 1px 7px)}
.artist .avatar::after{content:"";position:absolute;inset:0;border-radius:50%;background:linear-gradient(transparent 50%,rgba(10,7,16,.9))}
.artist b,.artist small{position:absolute;left:8%;right:8%;z-index:4;margin:0;text-align:center;text-shadow:0 2px 12px rgba(0,0,0,.8);pointer-events:none}
.artist b{bottom:19%;font:700 clamp(15px,8.4cqw,30px)/1.1 var(--font)}
.artist small{bottom:9%;color:#e9e3f2;font-size:clamp(11px,5.6cqw,19px)}

/* Hover: aro de colores que gira como un vinilo, salpicaduras de pintura, ecualizador y notas que suben */
.artist .halo{position:absolute;inset:-14px;z-index:1;border-radius:50%;opacity:0;scale:.9;pointer-events:none;
  background:conic-gradient(from 0deg,var(--orange),var(--pink),var(--violet),#2f6bff,var(--orange));
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 8px),#000 calc(100% - 7px));mask:radial-gradient(farthest-side,transparent calc(100% - 8px),#000 calc(100% - 7px));
  transition:opacity .4s,scale .5s cubic-bezier(.3,1.5,.5,1);animation:spin 5s linear infinite;filter:drop-shadow(0 0 14px var(--pink))}
.artist .eq{position:absolute;z-index:4;left:50%;bottom:30%;translate:-50% 0;display:flex;align-items:flex-end;gap:4px;height:14%;opacity:0;transition:opacity .35s;pointer-events:none}
.artist .eq i{width:5px;height:100%;border-radius:3px;background:var(--grad);transform-origin:bottom;scale:1 .2;animation:eq .9s ease-in-out infinite alternate paused}
.artist .eq i:nth-child(2){animation-duration:.6s;animation-delay:-.2s}
.artist .eq i:nth-child(3){animation-duration:1.1s;animation-delay:-.5s}
.artist .eq i:nth-child(4){animation-duration:.7s;animation-delay:-.1s}
.artist .eq i:nth-child(5){animation-duration:.95s;animation-delay:-.4s}
@keyframes eq{to{scale:1 1}}
.artist .notes{position:absolute;inset:0;z-index:5;pointer-events:none}
.artist .notes i{position:absolute;bottom:30%;font:800 clamp(38px,19cqw,76px)/1 var(--font);font-style:normal;opacity:0;text-shadow:0 0 12px currentColor,0 0 3px #000,0 2px 8px rgba(0,0,0,.8)}
.artist .notes i:nth-child(1){left:8%;color:var(--orange);--dl:-0s}
.artist .notes i:nth-child(2){left:22%;color:var(--pink);--dl:-1.6s}
.artist .notes i:nth-child(3){left:36%;color:#8fb0ff;--dl:-.8s}
.artist .notes i:nth-child(4){left:50%;color:#d58bff;--dl:-2.4s}
.artist .notes i:nth-child(5){left:64%;color:#ffd23f;--dl:-.4s}
.artist .notes i:nth-child(6){left:76%;color:var(--pink);--dl:-2s}
.artist .notes i:nth-child(7){left:88%;color:var(--orange);--dl:-1.2s}
.artist .notes i:nth-child(8){left:15%;color:#8fb0ff;--dl:-2.8s}
@keyframes note{0%{translate:0 0;opacity:0;rotate:-12deg;scale:.7}10%{opacity:1}35%{translate:12px -28cqw;rotate:10deg}65%{opacity:1}100%{translate:-10px -80cqw;opacity:0;rotate:-8deg;scale:1.15}}

.artist:hover .avatar,.artist:focus-visible .avatar{transform:scale(1.04);box-shadow:0 30px 70px -12px var(--c)}
.artist:hover .avatar img,.artist:focus-visible .avatar img{filter:saturate(1.35) contrast(1.08);scale:1.07}
.artist:hover .avatar::before,.artist:focus-visible .avatar::before{opacity:.5}
.artist:hover .halo,.artist:focus-visible .halo{opacity:1;scale:1}
.artist:hover .eq,.artist:focus-visible .eq{opacity:1}
.artist:hover .eq i,.artist:focus-visible .eq i{animation-play-state:running}
.artist:hover .notes i,.artist:focus-visible .notes i{animation:note 3.2s linear infinite;animation-delay:var(--dl)}
.artist:focus-visible{outline:0}

@media(max-width:860px){
  .arena{grid-template-columns:repeat(2,1fr);gap:28px 22px;padding-inline:10px}
  .socios{padding-top:64px}
}

/* ---------- Blog: botón "Ver más notas" ---------- */
.more-posts{display:flex;justify-content:center;margin-top:36px}
.more-posts[hidden],#postsMore[hidden]{display:none}