/* plantilla.css: página Historial de bandas.
   IDs: cada bloque lleva arriba un comentario con su ID (plantilla, categoría y número) para buscarlo con Ctrl+F.
   El número es correlativo por categoría y no se recicla ni se renumera: para sumar una regla nueva usá el número siguiente de su categoría.
   Números retirados (no se reutilizan): card/05 (.chip, la fecha ya no se muestra en la card), card/09 (.lore), visor/23 (.vid-lore), visor/24 (.vid-txt, la bio ya no se muestra en la ventana), visor/33 a visor/39 (.vid-for, la formación ya no se muestra en la ventana), visor/11 a visor/13 (.vid-bot, los links de YouTube y perfil ya no van debajo del video), visor/20 (.vid-info dentro del mini) y visor/22 (.vid-info).
   Los @media van en su propia categoría con sufijo (-laptop, -tablet, -mobile, -reducido).
   Categorías: base, grano, top, vinilo, hero, grilla, card, acciones, social, visor, pie, movimiento-reducido. */
/* plantilla/base/01 */
:root{--bg:#000;--s1:#121713;--tx:#e9ede9;--tx2:#9aa69e;--mu:#5c685f;--bd:rgba(233,237,233,.12);--ink:#141621;--red:#DC2626;--org:#F59E0B;--pnk:#FF005C;--grn:#22C55E;--blu:#2563EB;--vio:#8B5CF6;--disp:'Bungee','Arial Black',sans-serif;--body:'Space Grotesk',system-ui,sans-serif;--g:clamp(1.25rem,4vw,3.5rem);color-scheme:dark;box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
/* plantilla/base/02 */
html{scroll-behavior:smooth;scroll-padding-top:env(safe-area-inset-top,0px)}
/* plantilla/base/03 */
*,*::before,*::after{box-sizing:inherit;margin:0;padding:0}
/* plantilla/base/04 */
body{background:var(--bg);color:var(--tx);font-family:var(--body);line-height:1.5;overflow-x:hidden}
/* plantilla/base/05 */
a{color:inherit;text-decoration:none}
/* plantilla/base/06 */
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
/* plantilla/base/07 */
:focus-visible{outline:3px solid var(--org);outline-offset:3px}
/* plantilla/grano/01 */
.grain{position:fixed;inset:0;z-index:40;pointer-events:none;opacity:.1;mix-blend-mode:screen;background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");background-size:220px}
/* plantilla/top/01 */
.top{position:absolute;inset:env(safe-area-inset-top,0px) 0 auto;z-index:5;display:flex;justify-content:space-between;flex-wrap:wrap;gap:.6rem 1.5rem;padding:1.2rem var(--g)}
/* plantilla/top/02 */
.brand{font-weight:700}
/* plantilla/top/03 */
.top nav{display:flex;gap:clamp(1rem,2.5vw,2rem);font-size:.85rem;color:var(--tx2)}
/* plantilla/top/04 */
.top nav a:hover{color:var(--tx)}
/* plantilla/vinilo/01 */
.hd{aspect-ratio:1;container-type:size}
/* plantilla/vinilo/02 */
.rot{position:absolute;inset:0;border-radius:50%}
/* plantilla/vinilo/03 */
.vin{position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle,transparent 0 60%,rgba(0,0,0,.45)),repeating-radial-gradient(circle,rgba(233,237,233,.05) 0 1px,rgba(0,0,0,.18) 1px 3px),#0b0d0b;box-shadow:inset 0 0 0 1px var(--bd),0 14px 34px rgba(0,0,0,.6)}
/* plantilla/vinilo/04 */
.lb{position:absolute;inset:31%;border-radius:50%;background:var(--ac);color:var(--ci);display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:16% 6%;text-align:center;font-weight:700;line-height:1.2}
/* plantilla/vinilo/05 */
.lb span{font-size:max(3.4cqw,.3rem);white-space:nowrap}
/* plantilla/vinilo/06 */
.lb::after{content:'';position:absolute;left:50%;top:50%;width:9%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;background:#000}
/* plantilla/vinilo/07 */
.sh{position:absolute;inset:0;border-radius:50%;pointer-events:none;background:conic-gradient(transparent 0 22deg,rgba(233,237,233,.1) 46deg,transparent 74deg 196deg,rgba(233,237,233,.06) 224deg,transparent 252deg)}
/* plantilla/vinilo/08 */
@keyframes sp{to{transform:rotate(360deg)}}
/* plantilla/hero/01 */
.hero{position:relative;min-height:100svh;overflow:hidden;--d:max(min(88vh,64vw),48vw)}
/* plantilla/hero/02 */
.hd{position:absolute;top:50%;right:calc(var(--d)/-3);width:var(--d);transform:translateY(-50%)}
/* plantilla/hero/03 */
.hd .rot{animation:sp 50s linear infinite}
/* plantilla/hero/04 */
.hd .lb span{font-size:max(1.3cqw,.4rem)}
/* plantilla/hero/05 */
.hero h1{position:absolute;left:var(--g);top:50%;transform:translateY(-62%);z-index:3;font:400 clamp(2.6rem,8vw,6rem)/.96 var(--disp);text-shadow:0 4px 32px rgba(0,0,0,.5)}
/* plantilla/hero/06 */
.hero h1+p{position:absolute;left:var(--g);top:50%;transform:translateY(120%);z-index:3;max-width:30ch;color:var(--tx2)}
/* plantilla/hero/07 */
.foot{position:absolute;left:var(--g);bottom:clamp(2rem,6vh,4rem);z-index:3}
/* plantilla/hero/08 */
.foot small{color:var(--tx2);font-size:.8rem}
/* plantilla/hero/09 */
.eq{display:flex;align-items:flex-end;gap:5px;height:48px;width:min(300px,60vw);margin:.7rem 0}
/* plantilla/hero/10 */
.eq i{flex:1;height:100%;background:var(--ac);border-radius:2px 2px 0 0;transform-origin:bottom;animation:eq calc(.7s + var(--i)*.06s) ease-in-out infinite alternate}
/* plantilla/hero/11 */
@keyframes eq{from{transform:scaleY(.12)}to{transform:scaleY(1)}}
/* plantilla/hero/12 */
.hero[hidden]{display:none}
/* plantilla/hero-mobile/01 */
@media(max-width:760px){.hero{--d:min(70vh,108vw)}}
/* plantilla/grilla/01 */
.sec{padding:clamp(4.5rem,9vw,8rem) var(--g)}
/* plantilla/grilla/02 */
.sec h2{font:400 clamp(1.9rem,3.6vw,2.9rem)/1.05 var(--disp)}
/* plantilla/grilla/03 */
.sec>p{color:var(--tx2);margin-top:.6rem;max-width:56ch}
/* plantilla/grilla/04 */
.rack{list-style:none;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));align-items:stretch;gap:clamp(.8rem,1.5vw,1.4rem);margin-top:2.5rem}
/* plantilla/grilla-laptop/01 */
@media(max-width:1199px){.rack{grid-template-columns:repeat(4,minmax(0,1fr))}}
/* plantilla/grilla-tablet/01 */
@media(max-width:799px){.rack{grid-template-columns:repeat(3,minmax(0,1fr))}}
/* plantilla/grilla-mobile/01 */
@media(max-width:559px){.rack{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* plantilla/card/01 */
.card{display:flex;flex-direction:column;min-width:0;overflow:hidden;border:0;border-radius:6px;color:var(--ci);background:var(--ac);background:linear-gradient(165deg,var(--ac),color-mix(in srgb,var(--ac) 78%,#000));box-shadow:0 6px 18px rgba(0,0,0,.35)}
/* plantilla/card/02 */
.cv{flex:none;position:relative;aspect-ratio:16/9;display:grid;place-items:center;overflow:hidden;background:color-mix(in srgb,var(--ac) 62%,#000) center/cover}
/* plantilla/card/03 */
.em{font-size:2.2rem;line-height:1}
/* plantilla/card/04 */
.meta{flex:none;display:flex;flex-direction:column;gap:.4rem;padding:.8rem}
/* plantilla/card/06 */
.gs{position:absolute;top:.5rem;left:.5rem;right:.5rem;display:flex;flex-wrap:wrap;align-content:flex-start;gap:.25rem;max-height:1.3rem;overflow:hidden}
/* plantilla/card/07 */
.gn{flex:none;max-width:100%;height:1.3rem;padding:0 .55rem;border-radius:999px;background:rgba(0,0,0,.6);color:#fff;font-size:.62rem;font-weight:700;line-height:1.3rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* plantilla/card/08 */
.card h3{flex:none;max-height:2.2em;font-size:1.15rem;font-weight:700;letter-spacing:-.02em;line-height:1.1;overflow:hidden;overflow-wrap:anywhere;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2}
/* plantilla/card/10 */
.tm{flex:none;height:1.3em;font-size:.78rem;font-weight:500;line-height:1.3;opacity:.82;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* plantilla/card/11 */
.alb{flex:none;display:block;width:100px;height:100px;object-fit:cover;border-radius:4px;background:#000;box-shadow:0 4px 12px rgba(0,0,0,.5)}
/* plantilla/card/12 */
.alb-vacio{display:grid;place-items:center;font-size:2.4rem;line-height:1;background:rgba(0,0,0,.45);background:color-mix(in srgb,var(--ac) 62%,#000)}
/* plantilla/card/13 */
.tt{flex:none;display:flex;flex-direction:column;gap:.15rem;height:3.7rem}
/* plantilla/card/14 */
.ab{position:relative;z-index:1;flex:none;display:flex;align-items:flex-end;gap:.5rem;margin-top:calc(-50px - .8rem)}
/* plantilla/card/15 */
.pfl{flex:1;min-width:0;display:flex;align-items:center;justify-content:center;min-height:2rem;margin-bottom:.55rem;padding:.2rem .5rem;border-radius:6px;background:rgba(0,0,0,.2);background:color-mix(in srgb,var(--ci) 16%,transparent);color:var(--ci);font-size:.72rem;font-weight:700;line-height:1.15;text-align:center;overflow:hidden}
/* plantilla/card/16 */
.pfl:hover{background:color-mix(in srgb,var(--ci) 28%,transparent)}
/* plantilla/card/17 */
.pfl-c{display:none}
/* plantilla/card-mobile/01 */
@media(max-width:559px){.em{font-size:1.8rem}}
/* plantilla/card-mobile/02 */
@media(max-width:559px){.pfl{padding:.2rem .15rem}.pfl-l{display:none}.pfl-c{display:inline;font-size:.6rem}}
/* plantilla/acciones/01 */
.act{flex:none;display:flex;gap:.4rem;height:2rem}
/* plantilla/acciones/02 */
.play{flex:1;min-width:0;border-radius:6px;background:var(--ci);color:var(--ac);font-size:.72rem;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* plantilla/acciones/03 */
.play:hover{filter:brightness(1.12)}
/* plantilla/acciones/04 */
.yt{flex:none;width:2rem;display:grid;place-items:center;border:0;border-radius:6px;background:rgba(0,0,0,.2);background:color-mix(in srgb,var(--ci) 16%,transparent);color:var(--ci);font-size:.9rem}
/* plantilla/acciones/05 */
.yt:hover{background:color-mix(in srgb,var(--ci) 28%,transparent)}
/* plantilla/social/01 */
.soc{flex:none;display:flex;align-items:center;justify-content:space-between;gap:.5rem;height:2.4rem}
/* plantilla/social/02 */
.like{display:inline-flex;align-items:center;gap:.3rem;padding:.3rem .5rem;margin-left:-.5rem;border-radius:999px;color:var(--ci);font-size:.8rem;opacity:.75}
/* plantilla/social/03 */
.like[aria-pressed=true]{opacity:1;font-weight:700;background:rgba(0,0,0,.2);background:color-mix(in srgb,var(--ci) 16%,transparent)}
/* plantilla/social/04 */
.st{display:flex;flex-direction:column;align-items:flex-end;min-width:0;line-height:1}
/* plantilla/social/05 */
.sr{display:flex}
/* plantilla/social/06 */
.star{padding:0 .03rem;color:var(--ci);font-size:.95rem;line-height:1;opacity:.35}
/* plantilla/social/07 */
.star.on{opacity:1}
/* plantilla/social/08 */
.st span{max-width:100%;margin-top:.2rem;color:var(--ci);font-size:.6rem;opacity:.75;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* plantilla/social-mobile/01 */
@media(max-width:559px){.star{font-size:.85rem}}
/* plantilla/visor/01 */
.vid{position:fixed;inset:0;z-index:60;display:flex;overflow-y:auto;padding:1rem;background:rgba(0,0,0,.88)}
/* plantilla/visor/02 */
.vid[hidden]{display:none}
/* plantilla/visor/03 */
.vid-in{display:grid;gap:.9rem;width:min(640px,100%,max(356px,calc((100svh - 14rem)*16/9)));margin:auto}
/* plantilla/visor/04 */
.vid-top{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem}
/* plantilla/visor/05 */
.vid-top strong{min-width:0;font-size:1.5rem;font-weight:700;letter-spacing:-.02em;line-height:1.1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* plantilla/visor/06 */
.vid-x{flex:none;width:2.4rem;height:2.4rem;border-radius:50%;background:rgba(233,237,233,.12);color:var(--tx);font-size:1rem}
/* plantilla/visor/07 */
.vid-x:hover{background:rgba(233,237,233,.22)}
/* plantilla/visor/08 */
.vid-pl{width:100%;aspect-ratio:16/9;min-height:200px;overflow:hidden;border-radius:6px;background:#000}
/* plantilla/visor/09 */
.vid-pl iframe{display:block;width:100%;height:100%;border:0}
/* plantilla/visor/10 */
.ph{display:grid;place-items:center;height:100%;padding:1rem;text-align:center;color:var(--tx2);font-size:.85rem}
/* plantilla/visor/14 */
body.vid-open{overflow:hidden}
/* plantilla/visor/15 */
.vid-ttl{min-width:0;display:grid;gap:.25rem}
/* plantilla/visor/16 */
.vid-ttl span{color:var(--tx2);font-size:.95rem;line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* plantilla/visor/17 */
.vid-exp{display:none;flex:none;place-items:center;width:2.4rem;height:2.4rem;border-radius:50%;background:rgba(233,237,233,.12);color:var(--tx);font-size:1rem}
/* plantilla/visor/18 */
.vid.is-mini{inset:auto 1rem 1rem auto;z-index:55;display:block;width:min(356px,calc(100vw - 2rem));overflow:visible;padding:0;background:none}
/* plantilla/visor/19 */
.vid.is-mini .vid-in{gap:0;width:100%;margin:0;box-shadow:0 12px 30px rgba(0,0,0,.6)}
/* plantilla/visor/21 */
.vid.is-mini .vid-mini{display:none}
/* plantilla/visor/25 */
.vid-mini{flex:none;width:2.4rem;height:2.4rem;border-radius:50%;background:rgba(233,237,233,.12);color:var(--tx);font-size:1.2rem;line-height:1}
/* plantilla/visor/26 */
.vid-mini:hover{background:rgba(233,237,233,.22)}
/* plantilla/visor/27 */
.vid.is-mini .vid-top{align-items:center;padding:.45rem .5rem .45rem .8rem;border-radius:8px 8px 0 0;background:var(--s1)}
/* plantilla/visor/28 */
.vid.is-mini .vid-top strong{font-size:.8rem;letter-spacing:0}
/* plantilla/visor/29 */
.vid.is-mini .vid-ttl span{font-size:.7rem}
/* plantilla/visor/30 */
.vid.is-mini .vid-exp{display:grid}
/* plantilla/visor/31 */
.vid.is-mini .vid-x,.vid.is-mini .vid-exp{width:2rem;height:2rem;font-size:.85rem}
/* plantilla/visor/32 */
.vid.is-mini .vid-pl{border-radius:0 0 8px 8px}
/* plantilla/pie/01 */
.foot2{padding:2rem var(--g);border-top:1px solid var(--bd);color:var(--tx2);font-size:.8rem}
/* plantilla/movimiento-reducido/01 */
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}