/* Rock Para Siempre — Bandas emergentes (plantilla animada) */

/* Barra de lectura */
.be-progress { position: fixed; inset: 0 0 auto; height: 3px; z-index: 60; pointer-events: none; }
.be-progress span { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, var(--red), var(--volt)); transform-origin: 0 50%; transform: scaleX(var(--p, 0)); }

/* ---------- Portada a pantalla completa ---------- */
.be-hero { position: relative; min-height: min(92svh, 920px); display: grid; align-items: end; overflow: hidden; isolation: isolate; border-bottom: 1px solid var(--line); }
.be-hero__bg { position: absolute; inset: 0; z-index: -2; }
.be-hero__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; transform: translate3d(0, var(--py, 0px), 0) scale(var(--ps, 1.12)); filter: saturate(.85) contrast(1.05); transition: transform .1s linear; will-change: transform; }
.be-hero__shade { position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(70% 60% at 85% 20%, rgba(224,38,47,.35), transparent 70%),
    linear-gradient(180deg, rgba(14,13,12,.55) 0%, rgba(14,13,12,.15) 30%, rgba(14,13,12,.75) 70%, var(--ink) 100%);
}
.be-hero__inner { display: grid; gap: 16px; padding-block: clamp(90px, 14vw, 160px) clamp(36px, 6vw, 64px); }
.be-hero .crumbs { padding-top: 0; }
.be-hero__eyebrow { color: var(--bone); }
.be-hero__eyebrow::before { background: var(--volt); }
.be-hero__name { margin: 0; font-family: var(--f-display); font-weight: 900; text-transform: uppercase; line-height: .82; letter-spacing: .01em; font-size: clamp(3.6rem, 1rem + 13vw, 12rem); color: var(--bone); text-shadow: 0 6px 40px rgba(0,0,0,.55); display: flex; flex-wrap: wrap; overflow: hidden; padding-bottom: .04em; }
.be-hero__name span { display: inline-block; transform: translateY(105%) rotate(6deg); opacity: 0; animation: be-letter .8s cubic-bezier(.2,.9,.2,1) forwards; animation-delay: calc(.25s + var(--i) * .055s); }
@keyframes be-letter { to { transform: none; opacity: 1; } }
.be-hero__title { font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.4rem); max-width: 26ch; color: var(--volt); opacity: 0; animation: be-fade .8s ease forwards .9s; }
.be-hero__lede { max-width: 60ch; font-size: var(--t-lg); color: #d8d2c8; opacity: 0; animation: be-fade .8s ease forwards 1.05s; }
@keyframes be-fade { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.be-hero__down { justify-self: start; display: inline-flex; align-items: center; gap: 10px; margin-top: 10px; font-family: var(--f-mono); font-size: var(--t-xs); letter-spacing: .14em; text-transform: uppercase; color: var(--bone); text-decoration: none; opacity: 0; animation: be-fade .8s ease forwards 1.25s; }
.be-hero__down svg { width: 20px; height: 20px; animation: be-bob 1.6s ease-in-out infinite; color: var(--volt); }
@keyframes be-bob { 50% { transform: translateY(5px); } }
.be-hero__credit { position: absolute; right: 16px; bottom: 10px; margin: 0; font-family: var(--f-mono); font-size: 11px; color: rgba(238,234,227,.6); }

/* ---------- Datos rápidos ---------- */
.be-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 0; margin-block: 0 8px; border-bottom: 1px solid var(--line); scroll-margin-top: 80px; }
.be-fact { display: grid; gap: 6px; padding: 22px 18px; border-left: 1px solid var(--line); }
.be-fact:first-child { border-left: 0; padding-left: 0; }
.be-fact span { font-family: var(--f-mono); font-size: var(--t-xs); letter-spacing: .14em; text-transform: uppercase; color: var(--ash); }
.be-fact b { font-family: var(--f-display); font-weight: 900; font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.3rem); line-height: 1; text-transform: uppercase; color: var(--bone); }
.be-fact:nth-child(2) b { color: var(--volt); }
@media (max-width: 560px) { .be-facts { grid-template-columns: 1fr 1fr; } .be-fact { padding: 16px 14px; } .be-fact:nth-child(odd) { border-left: 0; padding-left: 0; } .be-fact:nth-child(n+3) { border-top: 1px solid var(--line); } }

.be-meta { margin-top: 28px; }

/* ---------- Cita destacada ---------- */
.be-quote { margin: 36px 0 8px; padding: 0; border: 0; }
.be-quote p { position: relative; font-family: var(--f-display); font-weight: 900; text-transform: uppercase; font-size: clamp(2rem, 1.3rem + 3vw, 3.4rem); line-height: .98; color: var(--bone);
  background: linear-gradient(transparent 62%, rgba(224,38,47,.55) 62%) no-repeat 0 0 / 0% 100%;
  -webkit-box-decoration-break: clone; box-decoration-break: clone; display: inline; transition: background-size 1.2s cubic-bezier(.2,.9,.2,1) .2s; }
.be-quote.is-in p { background-size: 100% 100%; }
.be-quote__mark { color: var(--volt); }
.be-quote cite { display: block; margin-top: 16px; font-family: var(--f-mono); font-size: var(--t-xs); font-style: normal; letter-spacing: .12em; text-transform: uppercase; color: var(--ash); }

/* ---------- Texto que aparece al bajar ---------- */
.be-prose > h2, .be-prose > h3, .be-prose > p, .be-prose > ul, .be-prose > blockquote, [data-reveal] { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.9,.2,1); transition-delay: calc(var(--d, 0) * 90ms); }
.be-prose > .is-in, [data-reveal].is-in { opacity: 1; transform: none; }
.be-prose > h2 { position: relative; padding-top: 18px; }
.be-prose > h2::before { content: ""; position: absolute; left: 0; top: 0; height: 4px; width: 64px; background: var(--red); transform: scaleX(0); transform-origin: 0 50%; transition: transform .8s cubic-bezier(.2,.9,.2,1) .25s; }
.be-prose > h2.is-in::before { transform: scaleX(1); }

/* ---------- Fotos del contenido ---------- */
.be-photo { margin: 2.2em 0 !important; position: relative; }
.be-photo__frame { overflow: hidden; border-radius: var(--radius); clip-path: inset(0 100% 0 0); transition: clip-path 1.1s cubic-bezier(.7,0,.2,1); }
.be-photo.is-right .be-photo__frame { clip-path: inset(0 0 0 100%); }
.be-photo.is-in .be-photo__frame { clip-path: inset(0 0 0 0); }
.be-photo img { display: block; width: 100%; height: auto; max-height: 78vh; object-fit: cover; transform: scale(1.15) translateY(var(--iy, 0px)); transition: transform 1.6s cubic-bezier(.2,.9,.2,1); will-change: transform; }
.be-photo.is-in img { transform: scale(1.04) translateY(var(--iy, 0px)); }
@media (min-width: 1000px) {
  .be-photo { width: min(1100px, 92vw); max-width: none; margin-left: calc(50% - min(550px, 46vw)) !important; margin-right: calc(50% - min(550px, 46vw)) !important; }
}
.be-photo figcaption { display: flex; gap: 10px; align-items: center; margin-top: 10px; }
.be-photo figcaption::before { content: ""; width: 18px; height: 2px; background: var(--volt); flex: none; }
.be-photo::after { content: ""; position: absolute; width: 90px; height: 90px; border: 2px solid var(--volt); border-radius: var(--radius); z-index: -1; opacity: 0; transition: opacity .6s ease .9s, transform .9s ease .9s; transform: translate(0, 0); }
.be-photo.is-left::after { left: -14px; top: -14px; }
.be-photo.is-right::after { right: -14px; top: -14px; }
.be-photo.is-in::after { opacity: .9; }

/* ---------- Integrantes ---------- */
.be-band { margin-top: clamp(48px, 7vw, 80px); display: grid; gap: 12px; }
.be-band h2 { font-size: clamp(2rem, 1.4rem + 2.4vw, 3.2rem); }
.be-band__hint { color: var(--ash); font-family: var(--f-mono); font-size: var(--t-xs); letter-spacing: .1em; text-transform: uppercase; }
.be-members { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 14px; margin-top: 14px; align-items: start; }
.be-member { position: relative; }
.be-member__btn { all: unset; box-sizing: border-box; cursor: pointer; display: grid; width: 100%; border: 1px solid var(--line); border-radius: var(--radius); background: var(--ink-2); overflow: hidden; position: relative; transition: border-color .3s ease, transform .3s ease, box-shadow .3s ease; }
.be-member__btn:focus-visible { outline: 2px solid var(--volt); outline-offset: 3px; }
.be-member__img { display: block; aspect-ratio: 4 / 5; overflow: hidden; background: radial-gradient(70% 60% at 50% 40%, rgba(224,38,47,.4), transparent 70%), var(--ink); }
.be-member__img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 25%; display: block; filter: grayscale(1) contrast(1.08) brightness(.82); transform: scale(1.02); transition: filter .6s ease, transform .8s cubic-bezier(.2,.9,.2,1); }
.be-member__img.is-logo img { object-fit: contain; padding: 18%; filter: grayscale(1) brightness(.75); }
.be-member__name { padding: 12px 14px 0; font-family: var(--f-display); font-weight: 900; text-transform: uppercase; font-size: 1.45rem; line-height: 1; color: var(--bone); }
.be-member__role { padding: 6px 14px 14px; font-family: var(--f-mono); font-size: var(--t-xs); letter-spacing: .12em; text-transform: uppercase; color: var(--ash); transition: color .3s ease; }
.be-member__plus { position: absolute; top: 10px; right: 10px; width: 30px; height: 30px; border-radius: 50%; background: rgba(14,13,12,.75); border: 1px solid rgba(238,234,227,.3); }
.be-member__plus::before, .be-member__plus::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; background: var(--bone); transform: translate(-50%, -50%); transition: transform .3s ease; }
.be-member__plus::after { transform: translate(-50%, -50%) rotate(90deg); }
.be-member__btn:hover { border-color: var(--ash); transform: translateY(-3px); }
.be-member__btn:hover .be-member__img img { filter: grayscale(.4) contrast(1.05) brightness(.95); }
.be-member.is-open .be-member__btn { border-color: var(--volt); box-shadow: 6px 6px 0 var(--red); transform: translateY(-4px); }
.be-member.is-open .be-member__img img { filter: none; transform: scale(1.07); }
.be-member.is-open .be-member__img.is-logo img { transform: none; }
.be-member.is-open .be-member__role { color: var(--volt); }
.be-member.is-open .be-member__plus::after { transform: translate(-50%, -50%) rotate(0deg); }
.be-member__info h3 { font-size: clamp(2rem, 1.4rem + 2.4vw, 3.4rem); margin: 0 0 8px; }
.be-member__tag { display: inline-block; margin-bottom: 16px; font-family: var(--f-mono); font-size: var(--t-xs); letter-spacing: .14em; text-transform: uppercase; color: var(--ink); background: var(--volt); padding: 5px 10px; border-radius: 3px; }
.be-member__info p { font-size: clamp(1.05rem, 1rem + .3vw, 1.25rem); line-height: 1.6; color: var(--bone); margin: 0; }

/* Escritorio: el integrante elegido se muestra en grande encima de las tarjetas */
.be-stage { display: none; }
@media (min-width: 760px) {
  .be-member__info { display: none !important; }
  .be-stage { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .55s cubic-bezier(.2,.9,.2,1), margin .55s ease; margin-top: 0; }
  .be-stage.is-open { grid-template-rows: 1fr; margin-top: 14px; }
  .be-stage__in { overflow: hidden; min-height: 0; }
  .be-stage__card { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); border: 1px solid var(--volt); border-radius: var(--radius); background: radial-gradient(70% 90% at 100% 0%, rgba(224,38,47,.24), transparent 70%), var(--ink-2); box-shadow: 8px 8px 0 var(--red); margin: 0 8px 8px 0; }
  .be-stage__img { position: relative; overflow: hidden; height: min(460px, 58vh); background: radial-gradient(70% 60% at 50% 40%, rgba(224,38,47,.4), transparent 70%), var(--ink); }
  .be-stage__img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 25%; display: block; animation: be-color 1s ease both; }
  .be-stage__img.is-logo img { object-fit: contain; padding: 14%; }
  .be-stage__text { align-self: center; padding: clamp(20px, 3vw, 40px); animation: be-fade .6s ease .15s both; }
  @keyframes be-color { from { filter: grayscale(1) brightness(.8); transform: scale(1.08); } to { filter: none; transform: scale(1.02); } }
  .be-stage__close { position: absolute; top: 12px; right: 12px; }
}
/* Celular: la información se despliega dentro de la tarjeta */
@media (max-width: 759px) {
  .be-members { grid-template-columns: 1fr 1fr; gap: 10px; }
  .be-member__name { font-size: 1.15rem; }
  .be-member.is-open { grid-column: 1 / -1; }
  .be-member.is-open .be-member__btn { box-shadow: 5px 5px 0 var(--red); border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
  .be-member.is-open .be-member__img { aspect-ratio: 1 / 1; }
  .be-member.is-open .be-member__name, .be-member.is-open .be-member__role { display: none; }
  .be-member__info { border: 1px solid var(--volt); border-top: 0; border-radius: 0 0 var(--radius) var(--radius); background: var(--ink-2); padding: 18px 16px 20px; box-shadow: 5px 5px 0 var(--red); animation: be-fade .5s ease both; }
}
@media (min-width: 1000px) {
  .be-band { width: min(1100px, 92vw); max-width: none; margin-left: calc(50% - min(550px, 46vw)) !important; margin-right: calc(50% - min(550px, 46vw)) !important; }
  .be-members { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
}

/* ---------- Escúchalos ---------- */
.be-listen { margin-top: clamp(48px, 7vw, 80px); display: grid; gap: 14px; padding: clamp(20px, 3vw, 32px); border: 1px solid var(--line); border-radius: var(--radius); background: radial-gradient(60% 80% at 100% 0%, rgba(224,38,47,.22), transparent 70%), var(--ink-2); }
.be-listen h2 { font-size: clamp(1.8rem, 1.3rem + 2vw, 2.8rem); }
.be-listen__player iframe { width: 100%; height: 352px; border: 0; border-radius: 12px; display: block; }
.be-listen__links { display: flex; flex-wrap: wrap; gap: 10px; }
.be-chip { font-family: var(--f-mono); font-size: var(--t-xs); letter-spacing: .1em; text-transform: uppercase; text-decoration: none; color: var(--ink); background: var(--volt); padding: 10px 16px; border-radius: 999px; transition: transform .2s ease, background .2s ease; }
.be-chip:hover { transform: translateY(-2px) rotate(-1deg); background: var(--bone); }

/* ---------- Llamado a bandas ---------- */
.be-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 26px; padding: clamp(20px, 3vw, 32px); border: 1px dashed var(--volt); border-radius: var(--radius); background: linear-gradient(100deg, var(--ink-2) 55%, rgba(255,198,26,.08)); }
.be-cta svg { width: 46px; height: 46px; flex: none; }
.be-cta > div { flex: 1 1 260px; display: grid; gap: 8px; min-width: 0; }
.be-cta h3 { font-size: clamp(1.4rem, 1.1rem + 1vw, 1.9rem); }
.be-cta p { color: var(--ash); }
.be-cta--post { margin-block: 8px 56px; }

/* Sin animaciones si la persona lo prefiere */
@media (prefers-reduced-motion: reduce) {
  .be-hero__name span, .be-hero__title, .be-hero__lede, .be-hero__down { animation: none; opacity: 1; transform: none; }
  .be-prose > *, [data-reveal], .be-photo__frame, .be-photo img { opacity: 1 !important; transform: none !important; clip-path: none !important; transition: none !important; }
  .be-quote p { background-size: 100% 100%; transition: none; }
  .be-hero__bg img { transform: none; }
}

/* Ajustes dentro del texto del artículo */
.be-prose .be-band h2, .be-prose .be-listen h2, .be-prose .be-member__info h3, .be-prose .be-stage h3 { margin-top: 0; }
.be-prose .be-band > * + *, .be-prose .be-listen > * + * { margin-top: 0; }
.be-prose .be-chip, .be-listen .be-chip { color: var(--ink); text-decoration: none; }
.be-stage, .be-member { scroll-margin-top: 96px; }
.be-prose .be-stage__img img, .be-prose .be-member__img img { height: 100%; }
.be-hero__name { padding-top: .14em; margin-top: -.1em; }

/* 1.1.1 — centrado sin transform (en el sitio real el translateX se perdía y la sección quedaba corrida) */
main.be, .be-main, body.is-banda { overflow-x: clip; }
.be-prose p:has(> .be-band), .be-prose p:has(> .be-photo) { opacity: 1 !important; transform: none !important; margin: 0; }

/* 1.1.2 — Spotify: tarjeta propia que carga el reproductor al tocar */
.be-sp { position: relative; isolation: isolate; overflow: hidden; border-radius: 12px; min-height: 240px; padding: clamp(22px, 4vw, 40px); display: grid; align-content: end; gap: 8px; background: #121212; color: #fff; }
.be-sp::before { content: ""; position: absolute; inset: 0; z-index: -2; background: var(--bg, none) center / cover no-repeat; filter: grayscale(1) brightness(.45); transform: scale(1.05); }
.be-sp::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(110deg, rgba(18,18,18,.95) 30%, rgba(30,215,96,.25)); }
.be-sp__logo { width: 42px; height: 42px; color: #1ed760; }
.be-prose .be-sp p { margin: 0; }
.be-sp__name { font-family: var(--f-display); font-weight: 900; text-transform: uppercase; font-size: clamp(2rem, 1.4rem + 3vw, 3.4rem); line-height: .9; }
.be-sp__sub { color: rgba(255,255,255,.75); max-width: 42ch; }
.be-sp__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.be-sp__play { all: unset; box-sizing: border-box; cursor: pointer; background: #1ed760; color: #000; font-weight: 700; padding: 12px 22px; border-radius: 999px; transition: transform .2s ease, background .2s ease; }
.be-sp__play:hover, .be-sp__play:focus-visible { background: #3be477; transform: scale(1.04); }
.be-sp__play:focus-visible, .be-sp__open:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.be-prose .be-sp__open, .be-sp__open { color: #fff; text-decoration: none; border: 1px solid rgba(255,255,255,.4); padding: 11px 20px; border-radius: 999px; }
.be-sp__open:hover { border-color: #fff; }