/* ============================================================
   AGENDA ROCK BAHÍA — home.css (independiente)
   Basado en diseño original magazine
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=Bodoni+Moda:ital,opsz,wght@0,6..96,400..900;1,6..96,400..900&family=JetBrains+Mono:wght@400;500;700&family=Source+Serif+4:ital,opsz,wght@0,8..60,400;0,8..60,600;0,8..60,700;1,8..60,400&display=swap');

:root{
  --ink:#0a0a0b;
  --ink-2:#131316;
  --ink-3:#1c1c20;
  --paper:#f5f1e6;
  --paper-dim:#8f8a7c;
  --line:rgba(245,241,230,.14);
  --coral:#ff4f5e;
  --gold:#caa128;
  --c-nacional:#ff7a45;
  --c-punk:#ff2f6e;
  --c-metal:#9aa4b2;
  --c-indie:#22d3b8;
  --c-internacional:#a78bfa;
  --f-serif:'Bodoni Moda', Georgia, serif;
  --f-black:'Archivo Black', sans-serif;
  --f-body:'Source Serif 4', Georgia, serif;
  --f-mono:'JetBrains Mono', monospace;
}
*{box-sizing:border-box; margin:0; padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--ink); color:var(--paper);
  font-family:var(--f-body); -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
a{color:inherit; text-decoration:none}
img{display:block; width:100%; height:100%; object-fit:cover}
::selection{background:var(--coral); color:var(--ink)}
:focus-visible{outline:2px solid var(--gold); outline-offset:3px}

/* Photo treatment */
.photo{position:relative; overflow:hidden; background:var(--ink-3)}
.photo img{
  filter:grayscale(1) contrast(1.12) brightness(.92);
  transform:scale(1.03);
  transition:filter .6s ease, transform 1.1s cubic-bezier(.16,.8,.24,1);
}
.photo:hover img, .photo:focus-within img, .photo.always-color img{
  filter:grayscale(0) contrast(1.05) brightness(1);
}
.card:hover .photo img, .side-item:hover .photo img{transform:scale(1.09)}
.photo::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(10,10,11,0) 40%, rgba(10,10,11,.85) 100%);
  pointer-events:none;
}
.photo.no-grad::after{display:none}

/* Loader */
#loader{
  position:fixed; inset:0; z-index:999; background:var(--ink);
  display:flex; align-items:center; justify-content:center; flex-direction:column; gap:22px;
  transition:opacity .7s ease, visibility .7s ease;
}
#loader.hide{opacity:0; visibility:hidden; pointer-events:none}
.loader-word{
  font-family:var(--f-serif); font-weight:800; font-style:italic;
  font-size:clamp(30px,6vw,54px); letter-spacing:.01em;
  filter:blur(10px); opacity:0; animation:focusIn 1.3s ease forwards .2s;
}
@keyframes focusIn{
  0%{filter:blur(14px); opacity:0; letter-spacing:.3em}
  100%{filter:blur(0); opacity:1; letter-spacing:.01em}
}
.loader-rule{width:1px; height:0; background:var(--paper); animation:grow 1s ease forwards 1.1s}
@keyframes grow{to{height:26px}}
.loader-sub{font-family:var(--f-mono); font-size:10.5px; letter-spacing:.22em; color:var(--paper-dim); text-transform:uppercase; opacity:0; animation:fadeUp .6s ease forwards 1.4s}
@keyframes fadeUp{from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:translateY(0)}}

/* Reading progress bar */
#readProgress{position:fixed; top:0; left:0; height:3px; width:0%; background:var(--coral); z-index:300; transition:width .1s linear}

/* Ticker */
.ticker-wrap{
  border-bottom:1px solid var(--line); height:32px; display:flex; align-items:center; overflow:hidden;
  background:var(--ink);
}
.ticker-label{
  flex:0 0 auto; font-family:var(--f-mono); font-size:10px; font-weight:700; letter-spacing:.18em;
  color:var(--coral); padding:0 16px; border-right:1px solid var(--line); height:100%; display:flex; align-items:center;
}
.ticker-track{
  display:flex; gap:46px; white-space:nowrap; padding-left:28px;
  font-family:var(--f-mono); font-size:11.5px; letter-spacing:.02em; color:var(--paper-dim);
  animation:ticker 38s linear infinite;
}
.ticker-track span.sep{color:var(--gold)}
@keyframes ticker{to{transform:translateX(-50%)}}
.ticker-wrap:hover .ticker-track{animation-play-state:paused}

/* Utility bar */
.util-bar{border-bottom:1px solid var(--line); font-family:var(--f-mono); font-size:10.5px; color:var(--paper-dim)}
.util-inner{max-width:1320px; margin:0 auto; padding:9px 28px; display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap}
.util-left,.util-right{display:flex; gap:20px; align-items:center; flex-wrap:wrap}
.util-item{display:flex; align-items:center; gap:7px; white-space:nowrap; letter-spacing:.03em}
.live-chip{display:flex; align-items:center; gap:7px; color:var(--coral); font-weight:700; letter-spacing:.1em}
.dotlive{width:6px; height:6px; border-radius:50%; background:var(--coral); box-shadow:0 0 8px 1px rgba(255,79,94,.7); animation:pulse 1.5s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1; transform:scale(1)} 50%{opacity:.3; transform:scale(.7)}}
#visitCount{color:var(--gold); font-weight:700}

/* Sticky nav */
.topnav{
  position:sticky; top:0; z-index:80; background:rgba(10,10,11,.86); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.topnav-inner{max-width:1320px; margin:0 auto; padding:14px 28px; display:flex; align-items:center; justify-content:space-between; gap:20px}
.brand{font-family:var(--f-serif); font-weight:800; font-style:italic; font-size:20px; letter-spacing:.01em}
.catnav{display:flex; gap:24px; overflow-x:auto}
.catnav a{
  position:relative; font-family:var(--f-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--paper-dim); padding:4px 0; white-space:nowrap;
}
.catnav a::after{
  content:''; position:absolute; left:0; right:100%; bottom:0; height:1px; background:currentColor;
  transition:right .3s cubic-bezier(.2,.8,.2,1);
}
.catnav a:hover{color:var(--paper)}
.catnav a:hover::after{right:0}
.nav-actions{display:flex; gap:8px; flex-shrink:0}
.nav-toggle{display:none; background:none; border:none; cursor:pointer; padding:8px 0 8px 8px; flex-direction:column; gap:5px}
.nav-toggle span{display:block; width:22px; height:2px; background:var(--paper); transition:transform .3s,opacity .3s}
.nav-toggle.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle.open span:nth-child(2){opacity:0}
.nav-toggle.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.mobile-menu{display:none}

/* Hero */
.hero{
  position:relative; height:100svh; min-height:560px; overflow:hidden;
  display:flex; flex-direction:column; justify-content:flex-end;
}
.hero .photo{position:absolute; inset:0}
.hero .photo img{
  filter:grayscale(0) contrast(1.05) brightness(.72) saturate(1.05);
  transform:scale(1.06);
  animation:kenburns 22s ease-in-out infinite alternate;
}
@keyframes kenburns{from{transform:scale(1.06) translate(0,0)} to{transform:scale(1.16) translate(-1%,-1%)}}
.hero .photo::after{background:linear-gradient(180deg, rgba(10,10,11,.35) 0%, rgba(10,10,11,.15) 30%, rgba(10,10,11,.92) 100%)}
.hero-kicker{
  position:relative; z-index:2; max-width:1320px; margin:0 auto; width:100%; padding:0 28px;
  font-family:var(--f-mono); font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--gold);
  display:flex; align-items:center; gap:10px; margin-bottom:14px;
}
.hero-content{position:relative; z-index:2; max-width:1320px; margin:0 auto; width:100%; padding:0 28px 56px}
.hero-badges{display:flex; gap:8px; margin-bottom:18px; flex-wrap:wrap}
.hero h1{
  font-family:var(--f-black); font-size:clamp(34px,6.4vw,92px); line-height:.92; letter-spacing:-.01em;
  max-width:14ch; margin-bottom:20px; cursor:pointer;
}
.hero h1:hover{color:var(--coral)}
.hero .dek{font-size:clamp(15px,1.6vw,19px); color:#ddd6c4; max-width:56ch; margin-bottom:16px}
.hero .byline{font-family:var(--f-mono); font-size:11px; color:var(--paper-dim); text-transform:uppercase; letter-spacing:.08em}
.scroll-cue{
  position:absolute; bottom:22px; left:50%; transform:translateX(-50%); z-index:2;
  width:1px; height:34px; background:linear-gradient(var(--paper), transparent);
  animation:cue 1.8s ease-in-out infinite;
}
@keyframes cue{0%,100%{opacity:.2} 50%{opacity:1}}

/* Badges */
.badge{
  display:inline-flex; align-items:center; gap:6px; font-family:var(--f-mono); font-size:10px; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase; padding:4px 9px; border-radius:1px; backdrop-filter:blur(6px);
}
.badge.exclusiva{background:var(--gold); color:#1b1400}
.badge.entrevista{background:var(--c-indie); color:#00251f}
.badge.cobertura{background:var(--c-internacional); color:#180d2b}
.badge.ultimo{background:var(--coral); color:var(--ink)}
.badge.ultimo .dot{width:5px; height:5px; border-radius:50%; background:var(--ink); animation:pulse 1.2s ease-in-out infinite}

.cat-tag{font-family:var(--f-mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase; padding-left:9px; border-left:2px solid}
.cat-tag.nacional{border-color:var(--c-nacional); color:var(--c-nacional)}
.cat-tag.punk{border-color:var(--c-punk); color:var(--c-punk)}
.cat-tag.metal{border-color:var(--c-metal); color:var(--c-metal)}
.cat-tag.indie{border-color:var(--c-indie); color:var(--c-indie)}
.cat-tag.internacional{border-color:var(--c-internacional); color:var(--c-internacional)}

/* Reveal on scroll */
.reveal{opacity:0; transform:translateY(28px); transition:opacity .8s ease, transform .8s cubic-bezier(.16,.8,.24,1)}
.reveal.in{opacity:1; transform:translateY(0)}

/* Layout */
main,.mag-main{max-width:1320px; margin:0 auto; padding:0 28px}
.section-head{display:flex; align-items:baseline; gap:14px; margin:88px 0 30px}
.section-head .num{font-family:var(--f-mono); font-size:11px; color:var(--gold); letter-spacing:.1em}
.section-head h2{font-family:var(--f-serif); font-style:italic; font-weight:700; font-size:clamp(24px,3vw,34px); margin:0}
.section-head::after{content:''; flex:1; height:1px; background:var(--line); align-self:center}

/* Bento grid */
.bento{
  display:grid; gap:22px; grid-template-columns:repeat(6,1fr);
  grid-template-areas:"a a a b b c" "a a a d d c" "e e f f g g";
}
.bento .card:nth-of-type(1){grid-area:a}
.bento .card:nth-of-type(2){grid-area:b}
.bento .card:nth-of-type(3){grid-area:c}
.bento .card:nth-of-type(4){grid-area:d}
.bento .card:nth-of-type(5){grid-area:e}
.bento .card:nth-of-type(6){grid-area:f}

.card{cursor:pointer; display:flex; flex-direction:column}
.card .photo{aspect-ratio:4/3; margin-bottom:0; border-radius:1px}
.bento .card:nth-of-type(1) .photo{aspect-ratio:auto; height:100%; min-height:420px}
.bento .card:nth-of-type(3) .photo{aspect-ratio:auto; height:100%; min-height:200px}
.card-body{padding-top:14px}
.card .badge{position:absolute; top:12px; left:12px; z-index:2}
.card h3{font-family:var(--f-black); font-size:19px; line-height:1.06; letter-spacing:-.005em; margin-bottom:6px}
.bento .card:nth-of-type(1) h3{font-size:clamp(22px,2.4vw,30px)}
.card:hover h3{color:var(--coral)}
.card p{color:var(--paper-dim); font-size:13.5px; max-width:44ch}
.card-views{display:inline-flex; align-items:center; gap:4px; margin-top:10px; color:var(--paper-dim); font-size:11.5px; letter-spacing:.02em; opacity:.85}

/* Pull quote */
.pullquote{margin:96px 0; padding:0 28px; text-align:center}
.pullquote q{
  font-family:var(--f-serif); font-style:italic; font-weight:700; font-size:clamp(26px,4.4vw,50px); line-height:1.15;
  quotes:none; display:block; max-width:22ch; margin:0 auto;
}
.pullquote cite{display:block; margin-top:20px; font-family:var(--f-mono); font-style:normal; font-size:11px; letter-spacing:.14em; color:var(--paper-dim); text-transform:uppercase}

/* Band feature */
.band-feature{display:grid; grid-template-columns:.9fr 1.1fr; gap:0; border:1px solid var(--line)}
.band-feature .photo{aspect-ratio:auto; height:100%; min-height:460px}
.band-copy{padding:44px 46px; display:flex; flex-direction:column; justify-content:center}
.band-eyebrow{font-family:var(--f-mono); font-size:10.5px; letter-spacing:.18em; color:var(--gold); text-transform:uppercase; margin-bottom:14px}
.band-copy h3{font-family:var(--f-serif); font-style:italic; font-weight:800; font-size:clamp(30px,3.6vw,46px); margin-bottom:18px}
.band-copy p{color:#cfc9b8; font-size:15.5px; max-width:52ch; margin-bottom:26px; line-height:1.6}
.band-meta{display:grid; grid-template-columns:1fr 1fr; gap:16px 26px; font-family:var(--f-mono); font-size:10.5px; color:var(--paper-dim); text-transform:uppercase; letter-spacing:.06em; border-top:1px solid var(--line); padding-top:22px}
.band-meta strong{display:block; font-family:var(--f-body); font-size:14px; color:var(--paper); text-transform:none; letter-spacing:0; margin-top:3px; font-weight:600}

/* Duo foto/video */
.duo{display:grid; grid-template-columns:1.3fr 1fr; gap:22px}
.media-card{border:1px solid var(--line); overflow:hidden; cursor:pointer}
.media-card .photo{aspect-ratio:16/10}
.media-body{padding:16px 18px 20px}
.media-body .eyebrow{font-family:var(--f-mono); font-size:10px; letter-spacing:.14em; color:var(--gold); text-transform:uppercase; margin-bottom:6px}
.media-body h4{font-family:var(--f-black); font-size:17px; margin-bottom:5px}
.media-body p{font-size:13px; color:var(--paper-dim)}
.play-btn{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); z-index:2;
  width:60px; height:60px; border-radius:50%; background:rgba(245,241,230,.94);
  display:flex; align-items:center; justify-content:center; transition:transform .25s ease;
}
.media-card:hover .play-btn{transform:translate(-50%,-50%) scale(1.1)}
.play-btn::after{content:''; border-style:solid; border-width:9px 0 9px 15px; border-color:transparent transparent transparent var(--ink); margin-left:4px}
.duration-chip{position:absolute; bottom:12px; right:12px; z-index:2; background:rgba(10,10,11,.7); font-family:var(--f-mono); font-size:10.5px; padding:3px 7px}

/* Throwback */
.throwback{border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.throwback-item{display:grid; grid-template-columns:110px 1fr; gap:20px; padding:22px 0; border-bottom:1px dashed var(--line); cursor:pointer; align-items:baseline}
.throwback-item:last-child{border-bottom:none}
.tb-date{font-family:var(--f-mono); font-size:10.5px; color:var(--gold)}
.throwback-item h4{font-family:var(--f-black); font-size:17px; margin-bottom:4px; margin:0}
.throwback-item:hover h4{color:var(--coral)}
.throwback-item p{font-size:13.5px; color:var(--paper-dim)}

/* Article overlay */
#articleView{
  position:fixed; inset:0; background:var(--ink); z-index:200; overflow-y:auto; overflow-x:hidden;
  transform:translateY(100%); transition:transform .5s cubic-bezier(.16,.8,.24,1);
}
#articleView.open{transform:translateY(0)}
.art-topbar{position:sticky; top:0; z-index:5; display:flex; justify-content:space-between; align-items:center; padding:16px 28px; background:rgba(10,10,11,.85); backdrop-filter:blur(10px); border-bottom:1px solid var(--line)}
.backBtn{font-family:var(--f-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--paper-dim); background:none; border:1px solid var(--line); padding:9px 14px; cursor:pointer; transition:color .2s,border-color .2s}
.backBtn:hover{color:var(--paper); border-color:var(--paper-dim)}
.art-hero{height:64vh; min-height:340px; position:relative}
.art-hero .photo{position:absolute; inset:0; aspect-ratio:auto}
.art-hero .photo img{filter:grayscale(0) brightness(.75)}
.art-hero-copy{position:absolute; left:0; right:0; bottom:0; max-width:820px; margin:0 auto; padding:0 28px 44px}
.art-wrap{max-width:720px; margin:0 auto; padding:44px 28px 100px}
.art-wrap h1{font-family:var(--f-black); font-size:clamp(30px,4.6vw,50px); line-height:1; margin-bottom:16px}
.art-hero-copy .dek{font-size:16px; color:#ddd6c4; margin-bottom:14px; max-width:58ch}
.art-hero-copy .byline, .art-wrap .byline{font-family:var(--f-mono); font-size:11px; color:var(--paper-dim); text-transform:uppercase; letter-spacing:.08em; display:block}
.art-body p{font-size:17.5px; line-height:1.7; margin-bottom:20px; color:#e7e2d3}
.art-body p:first-of-type::first-letter{font-family:var(--f-serif); font-style:italic; font-weight:800; font-size:64px; float:left; line-height:.75; padding:4px 10px 0 0; color:var(--gold)}
.art-body h2,.art-body h3,.art-body h4{font-family:var(--f-black); line-height:1.2; margin:36px 0 14px; color:var(--paper)}
.art-body h2{font-size:26px}
.art-body h3{font-size:21px}
.art-body h4{font-size:17px}
.art-body{overflow-x:hidden; max-width:100%; min-width:0}
.art-wrap{min-width:0}
.art-body img{max-width:100%!important; height:auto!important; border-radius:6px; margin:8px 0}
.art-body video,.art-body table{max-width:100%!important}
.art-body iframe{max-width:100%!important; border:none}
.art-body iframe[src*="youtube"],.art-body iframe[src*="youtu.be"]{display:block; width:100%!important; height:auto!important; aspect-ratio:16/9; border-radius:6px; margin:24px 0}
.art-body .wp-block-embed,.art-body .wp-block-embed__wrapper,.art-body .wp-block-video{max-width:100%; width:100%}
.art-body figure{max-width:100%!important; margin:24px 0; text-align:center}
.art-body figure img{margin:0}
.art-body figure figcaption{font-family:var(--f-mono); font-size:11.5px; color:var(--paper-dim); margin-top:10px}
.art-body blockquote{border-left:3px solid var(--gold); padding:4px 0 4px 22px; margin:28px 0; font-family:var(--f-serif); font-style:italic; font-size:20px; color:#eee7d6}
.art-body a{color:var(--gold); text-decoration:underline}
.art-body ul,.art-body ol{margin:0 0 20px; padding-left:24px; color:#e7e2d3}
.art-body li{margin-bottom:8px; line-height:1.6}
.art-body pre,.art-body table{display:block; overflow-x:auto; max-width:100%}

/* Newsletter section */
.newsletter{
  margin:100px 0 0; padding:60px 28px; border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  display:flex; align-items:center; justify-content:space-between; gap:30px; flex-wrap:wrap;
}
.newsletter h3{font-family:var(--f-serif); font-style:italic; font-weight:800; font-size:clamp(24px,3vw,34px); max-width:14ch; margin:0}
.newsletter p{color:var(--paper-dim); font-size:14px; margin-top:8px; max-width:38ch}
.newsletter-form{display:flex; gap:0; flex:0 0 auto}
.newsletter-form input{
  font-family:var(--f-mono); font-size:12.5px; background:none; border:1px solid var(--line); border-right:none;
  color:var(--paper); padding:13px 16px; width:240px;
}
.newsletter-form input::placeholder{color:var(--paper-dim)}
.newsletter-form button{
  font-family:var(--f-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; font-weight:700;
  background:var(--coral); color:var(--ink); border:none; padding:0 22px; cursor:pointer; transition:background .2s;
}
.newsletter-form button:hover{background:var(--gold)}
.newsletter-form.done input, .newsletter-form.done button{opacity:.5; pointer-events:none}

/* Footer */
footer{border-top:1px solid var(--line); margin-top:100px; padding:36px 28px 50px; max-width:1320px; margin-left:auto; margin-right:auto; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:14px}
footer .brand{font-size:22px; font-family:var(--f-serif); font-weight:800; font-style:italic}
footer p{font-family:var(--f-mono); font-size:10.5px; color:var(--paper-dim); letter-spacing:.04em; margin:0}

/* Responsive */
@media (max-width:980px){
  .bento{grid-template-columns:1fr 1fr; grid-template-areas:"a a" "b c" "d d" "e f"}
  .bento .card:nth-of-type(1) .photo{min-height:280px}
  .band-feature{grid-template-columns:1fr}
  .band-feature .photo{min-height:280px}
  .duo{grid-template-columns:1fr}
  .catnav{display:none}
  .nav-actions{display:none}
  .nav-toggle{display:flex}
  .mobile-menu.open{display:flex; flex-direction:column; border-top:1px solid var(--line); padding:8px 28px 18px}
  .mobile-menu a{font-family:var(--f-mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--paper-dim); padding:11px 0; border-bottom:1px solid rgba(240,237,232,.06)}
  .mobile-menu a:hover{color:var(--paper)}
  .mobile-menu-actions{display:flex; gap:10px; padding-top:16px}
  .mobile-menu-actions .backBtn{flex:1; text-align:center}
}
@media (max-width:600px){
  .bento{grid-template-columns:1fr; grid-template-areas:"a" "b" "c" "d" "e" "f"}
  .band-meta{grid-template-columns:1fr}
  .newsletter-form{flex-direction:column; width:100%}
  .newsletter-form input{width:100%; border-right:1px solid var(--line); border-bottom:none}
  .newsletter-form button{padding:12px; width:100%}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001s !important; transition-duration:.001s !important}
  .ticker-track{animation:none}
  .hero .photo img{animation:none}
}

/* ============ Sponsors (marcas) ============ */
.sponsor-strip{max-width:1320px;margin:0 auto;padding:64px 28px 0;display:flex;align-items:center;gap:26px;flex-wrap:wrap}
.sponsor-strip__label{font-family:var(--f-mono);letter-spacing:.16em;text-transform:uppercase;font-size:10.5px;color:var(--paper-dim);white-space:nowrap}
.sponsor-strip__logos{display:flex;gap:32px;flex-wrap:wrap;align-items:center}
.sponsor-strip__item{opacity:.65;filter:grayscale(1);transition:opacity .2s,filter .2s;display:flex;align-items:center}
.sponsor-strip__item:hover{opacity:1;filter:none}
.sponsor-strip__item img{max-height:32px;max-width:120px;width:auto}
.sponsor-strip__text{font-family:var(--f-black);font-size:1rem;letter-spacing:.05em;text-transform:uppercase;color:var(--paper);opacity:.85}