/* ══════════════════════════════════════════════════════════════
   NOS APOYAN — galería de vídeos + visor
   Memorial Urbano González Escapa · INTDEA
   Se carga después de style.css y reutiliza sus variables.
   ══════════════════════════════════════════════════════════════ */

.sec--voices{background:linear-gradient(180deg,var(--carbon),#0F0F13 45%,var(--carbon))}
.sec--voices .lead{margin-bottom:clamp(2.2rem,5vw,3.2rem)}

/* ---------- rejilla ---------- */
.voices{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));
  gap:clamp(.7rem,1.6vw,1.15rem)}

.voice__card{display:block;width:100%;padding:0;border:0;background:none;cursor:pointer;
  font-family:inherit;text-align:left;color:inherit;
  transition:transform .35s var(--ease)}
.voice__card:hover{transform:translateY(-4px)}
.voice__card:focus-visible{outline:2px solid var(--gold);outline-offset:5px;border-radius:12px}

/* ---------- imagen ---------- */
.voice__media{position:relative;display:block;aspect-ratio:3/4;overflow:hidden;
  border-radius:12px;border:1px solid var(--line);
  background:linear-gradient(155deg,#1C1C22,#101014)}
.voice__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .6s var(--ease),filter .4s var(--ease);
  filter:saturate(.72) contrast(1.04)}
.voice__card:hover .voice__media img{transform:scale(1.05);filter:saturate(1) contrast(1.04)}
.voice__media::after{content:"";position:absolute;inset:0;border-radius:12px;pointer-events:none;
  background:linear-gradient(180deg,transparent 45%,rgba(8,8,10,.72));
  box-shadow:inset 0 0 0 1px rgba(201,162,39,0);transition:box-shadow .35s var(--ease)}
.voice__card:hover .voice__media::after{box-shadow:inset 0 0 0 1.5px rgba(201,162,39,.55)}

/* iniciales: se ven mientras no haya foto */
.voice__ini{position:absolute;inset:0;display:grid;place-items:center;
  font-size:clamp(1.5rem,3.4vw,2.1rem);font-weight:900;letter-spacing:.06em;
  color:rgba(242,238,230,.16);font-variation-settings:"wdth" 88}

/* botón de play */
.voice__play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:clamp(34px,4.4vw,44px);aspect-ratio:1;display:grid;place-items:center;
  border-radius:50%;background:rgba(12,12,14,.5);backdrop-filter:blur(4px);
  box-shadow:inset 0 0 0 1.5px rgba(242,238,230,.75);color:var(--bone);
  transition:background .3s var(--ease),transform .3s var(--ease),box-shadow .3s var(--ease)}
.voice__play svg{width:46%;height:46%;margin-left:6%}
.voice__card:hover .voice__play{background:var(--grad-gold);color:#14100A;
  box-shadow:none;transform:translate(-50%,-50%) scale(1.08)}

/* ---------- nombre ---------- */
.voice__name{display:block;margin-top:.7rem;font-size:clamp(.8rem,1.5vw,.94rem);
  font-weight:800;line-height:1.2;letter-spacing:.01em}
.voice__role{display:block;margin-top:.18rem;font-size:.7rem;line-height:1.3;
  color:var(--bone-40);letter-spacing:.02em}
.voice__role:empty{display:none}

/* ---------- llamada a la acción ---------- */
.voices__cta{margin-top:clamp(2.4rem,5vw,3.4rem);text-align:center}
.voices__cta p{font-size:clamp(1.05rem,2.6vw,1.4rem);margin:0 0 1.3rem;color:var(--bone-60)}
.voices__cta b{color:var(--bone);font-weight:800}

/* ---------- visor ---------- */
.lb{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:1rem;
  background:rgba(6,6,8,.9);backdrop-filter:blur(8px);
  animation:lbIn .28s var(--ease)}
.lb[hidden]{display:none}
@keyframes lbIn{from{opacity:0}to{opacity:1}}
.lb__box{position:relative;width:min(360px,94vw);max-height:92svh;display:flex;
  flex-direction:column;align-items:center;gap:.75rem}
.lb__name{margin:0;font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;
  font-weight:800;color:var(--gold-lt);text-align:center}
.lb__frame{width:100%;flex:1;min-height:0;border-radius:12px;overflow:hidden;background:#0E0E11}
.lb__frame iframe{display:block;width:100%;height:100%;min-height:min(72svh,620px);border:0}
.lb__link{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;font-weight:700;
  color:var(--bone-60);border-bottom:1px solid var(--line);padding-bottom:2px}
.lb__link:hover{color:var(--gold-lt);border-bottom-color:var(--gold)}
.lb__close{position:absolute;right:-.2rem;top:-2.5rem;width:40px;height:40px;
  display:grid;place-items:center;border:0;border-radius:50%;cursor:pointer;
  background:rgba(242,238,230,.1);color:var(--bone);font-size:1.6rem;line-height:1;
  transition:background .25s,color .25s}
.lb__close:hover{background:var(--grad-gold);color:#14100A}

/* ---------- responsive ---------- */
@media (max-width:1100px){ .voices{grid-template-columns:repeat(4,minmax(0,1fr))} }
@media (max-width:820px){ .voices{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (max-width:560px){
  .voices{grid-template-columns:repeat(2,minmax(0,1fr));gap:.65rem}
  .voice__role{font-size:.66rem}
  .lb__close{top:auto;bottom:-3.2rem;right:50%;transform:translateX(50%)}
}
@media (prefers-reduced-motion:reduce){
  .voice__card,.voice__media img,.voice__play{transition:none}
  .lb{animation:none}
}

/* ══════════════════════════════════════════════════════════════
   AÑADIDOS POSTERIORES · información práctica del día del partido
   (van aquí, y no en style.css, para no tocar la hoja principal)
   ══════════════════════════════════════════════════════════════ */

/* ---------- Barra fija superior: lo primero que se ve ---------- */
.alert{position:fixed;inset:0 0 auto;z-index:110;display:flex;flex-wrap:wrap;
  align-items:center;justify-content:center;gap:.4rem .9rem;
  padding:.55rem clamp(1rem,4vw,2rem);text-align:center;
  background:var(--grad-gold);background-size:200% 100%;color:#14100A;
  font-size:clamp(.68rem,1.9vw,.8rem);letter-spacing:.04em;line-height:1.35;
  transition:background-position .5s var(--ease)}
.alert:hover{background-position:100% 0}
.alert__dot{width:7px;height:7px;border-radius:50%;background:#14100A;flex:none;
  animation:alertPulse 2.2s ease-in-out infinite}
@keyframes alertPulse{0%,100%{opacity:.35}50%{opacity:1}}
.alert__txt b{font-weight:800}
.alert__cta{font-weight:800;text-transform:uppercase;letter-spacing:.12em;
  font-size:.9em;border-bottom:1.5px solid rgba(20,16,10,.45);padding-bottom:1px;white-space:nowrap}
/* la cabecera y el hero bajan para dejarle sitio */
.nav{top:var(--alert-h,2.4rem)}
.hero{padding-top:calc(5.6rem + var(--alert-h,2.4rem))}

@media (max-width:860px){
  .alert{gap:.25rem .6rem;padding:.5rem 1rem;font-size:.67rem}
  .alert__cta{display:none}
  .nav{top:var(--alert-h,3.4rem)}
  .hero{padding-top:calc(7rem + var(--alert-h,3.4rem))}
}
@media (max-width:420px){
  .alert__dot{display:none}
}
@media (prefers-reduced-motion:reduce){ .alert__dot{animation:none} }


/* ══════════════════════════════════════════════════════════════
   MODO POST-PARTIDO · marcador, gracias y prensa
   ══════════════════════════════════════════════════════════════ */

/* ---------- Marcador en el hero ---------- */
.matchup--final{align-items:flex-start}
.matchup__score{margin:.45rem 0 0;font-size:clamp(2.1rem,7vw,3.4rem);font-weight:900;line-height:1;
  font-variant-numeric:tabular-nums;font-variation-settings:"wdth" 88;color:var(--bone-40)}
.matchup__score--win{background:var(--grad-gold);-webkit-background-clip:text;background-clip:text;
  color:transparent;filter:drop-shadow(0 4px 18px rgba(201,162,39,.35))}
.matchup--final .matchup__vs{align-self:center;margin-top:1.2rem}

.hero__thanks{margin:0 0 1.5rem;font-size:clamp(1rem,2.7vw,1.28rem);line-height:1.5;color:var(--bone-60)}
.hero__thanks b{display:inline-block;margin-top:.25rem;color:var(--bone);font-weight:800}

/* botón secundario dorado en fondo oscuro */
.btn--ghost-gold{background:transparent;color:var(--gold-lt);
  box-shadow:inset 0 0 0 1.5px rgba(201,162,39,.6)}
.btn--ghost-gold:hover{background:rgba(201,162,39,.12);box-shadow:inset 0 0 0 1.5px var(--gold)}

/* ---------- Sección Gracias ---------- */
.sec--gracias{background:linear-gradient(180deg,var(--carbon),#101014 55%,var(--carbon));text-align:center}
.sec--gracias .eyebrow{justify-content:center}
.sec--gracias .eyebrow::after{display:none}
.sec--gracias .prose{text-align:left;max-width:60ch;margin-inline:auto}
.sec--gracias .prose b{color:var(--bone);font-weight:800}
.gracias__next{margin:2.2rem 0 0;font-size:clamp(1.05rem,2.8vw,1.35rem);color:var(--bone-60)}
.gracias__next b{background:var(--grad-gold);-webkit-background-clip:text;background-clip:text;
  color:transparent;font-weight:900}

/* cifras (ocultas hasta que haya datos) */
.numbers{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin:2.6rem 0 0}
.numbers li{padding:1.4rem 1rem;border-radius:var(--r);border:1px solid var(--line);
  background:linear-gradient(165deg,rgba(242,238,230,.05),rgba(242,238,230,.01))}
.numbers b{display:block;font-size:clamp(1.45rem,4vw,2.2rem);font-weight:900;line-height:1.05;
  background:var(--grad-gold);-webkit-background-clip:text;background-clip:text;color:transparent}
.numbers span{display:block;margin-top:.55rem;font-size:.6rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--bone-40);line-height:1.4}
.numbers b[data-editable]{font-size:clamp(1rem,2.6vw,1.35rem);letter-spacing:.02em}

/* ---------- Prensa ---------- */
.sec--prensa{background:var(--carbon)}
.press{display:grid;gap:.7rem;margin-top:.6rem}
.press a{display:grid;grid-template-columns:1fr auto;align-items:center;gap:.6rem 1.2rem;
  padding:1.15rem clamp(1.1rem,2.6vw,1.6rem);border-radius:var(--r);
  border:1px solid var(--line);background:var(--stone);
  transition:border-color .3s var(--ease),transform .3s var(--ease),background .3s var(--ease)}
.press a:hover{border-color:rgba(201,162,39,.45);transform:translateX(4px);background:var(--stone-2)}
.press__src{grid-column:1;display:flex;align-items:center;gap:.55rem;
  font-size:.6rem;letter-spacing:.24em;text-transform:uppercase;font-weight:800;color:var(--gold)}
.press__tag{font-style:normal;font-size:.85em;letter-spacing:.14em;padding:.16em .55em;
  border-radius:999px;background:rgba(214,25,125,.16);color:var(--rose-lt);
  box-shadow:inset 0 0 0 1px rgba(240,78,158,.4)}
.press__title{grid-column:1;font-size:clamp(.95rem,2vw,1.1rem);font-weight:700;line-height:1.35;
  color:var(--bone)}
.press__go{grid-column:2;grid-row:1/3;display:inline-flex;align-items:center;gap:.4rem;
  font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;font-weight:800;
  color:var(--bone-40);white-space:nowrap;transition:color .3s var(--ease)}
.press__go svg{width:15px;height:15px}
.press a:hover .press__go{color:var(--gold-lt)}
.press__note{margin:1.8rem 0 0;font-size:.85rem;color:var(--bone-40);text-align:center}
.press__note a{color:var(--gold-lt);border-bottom:1px solid rgba(201,162,39,.5)}

/* ---------- CTA final ---------- */
.final__thanks{margin:0 0 1.8rem;font-size:clamp(.95rem,2.3vw,1.1rem);line-height:1.55;color:var(--bone-60)}

@media (max-width:620px){
  .numbers{grid-template-columns:1fr}
  .press a{grid-template-columns:1fr}
  .press__go{grid-column:1;grid-row:auto;margin-top:.3rem}
  .matchup__score{font-size:2rem}
}

/* ══════════════════════════════════════════════════════════════
   VÍDEO DEL PARTIDO · miniatura ligera (el iframe solo al pulsar)
   ══════════════════════════════════════════════════════════════ */
.sec--video{background:linear-gradient(180deg,var(--carbon),#0E0E12 50%,var(--carbon));text-align:center}
.sec--video .eyebrow{justify-content:center}
.sec--video .eyebrow::after{display:none}
.sec--video .lead{margin:0 auto clamp(1.8rem,4vw,2.6rem);text-align:center}

.ytlite{position:relative;aspect-ratio:16/9;border-radius:var(--r);overflow:hidden;cursor:pointer;
  border:1px solid rgba(201,162,39,.35);background:#0B0B0D;
  box-shadow:0 40px 80px -50px #000}
.ytlite__poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:saturate(.8) brightness(.78);transition:filter .5s var(--ease),transform .8s var(--ease)}
.ytlite:hover .ytlite__poster{filter:saturate(1) brightness(.9);transform:scale(1.03)}
.ytlite::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(8,8,10,.15),rgba(8,8,10,.75))}

.ytlite__btn{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2;
  width:clamp(64px,9vw,88px);padding:0;border:0;background:none;cursor:pointer;
  transition:transform .3s var(--ease)}
.ytlite__btn svg{width:100%;height:auto;display:block;
  filter:drop-shadow(0 10px 26px rgba(0,0,0,.55))}
.ytlite__box{fill:#12121a;opacity:.9;transition:fill .3s var(--ease),opacity .3s var(--ease)}
.ytlite:hover .ytlite__btn{transform:translate(-50%,-50%) scale(1.08)}
.ytlite:hover .ytlite__box{fill:#C9A227;opacity:1}
.ytlite__btn:focus-visible{outline:2px solid var(--gold);outline-offset:6px;border-radius:12px}

.ytlite__label{position:absolute;left:0;right:0;bottom:0;z-index:2;margin:0;pointer-events:none;
  padding:2.6rem 1.3rem 1.1rem;text-align:left}
.ytlite__label b{display:block;font-size:clamp(.82rem,2vw,1rem);font-weight:800;
  letter-spacing:.02em;color:var(--bone)}
.ytlite__label span{display:block;margin-top:.15rem;font-size:.72rem;letter-spacing:.06em;
  color:var(--bone-40)}

/* al pulsar, el iframe ocupa la caja */
.ytlite.is-on{cursor:default}
.ytlite.is-on .ytlite__poster,
.ytlite.is-on .ytlite__btn,
.ytlite.is-on .ytlite__label,
.ytlite.is-on::after{display:none}
.ytlite iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

.ytlite__note{margin:1.2rem 0 0;font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;
  font-weight:700;text-align:center}
.ytlite__note a{color:var(--bone-40);border-bottom:1px solid var(--line);padding-bottom:2px}
.ytlite__note a:hover{color:var(--gold-lt);border-bottom-color:var(--gold)}

@media (max-width:620px){ .ytlite__label{padding:2rem 1rem .9rem} }
@media (prefers-reduced-motion:reduce){
  .ytlite__poster,.ytlite__btn{transition:none}
}

/* ---------- Crédito de la retransmisión ---------- */
.broadcast{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:.55rem .9rem;margin:1.5rem 0 0}
.broadcast span{font-size:.58rem;letter-spacing:.28em;text-transform:uppercase;
  font-weight:800;color:var(--bone-40)}
.broadcast a{display:block;line-height:0}
.broadcast img{height:34px;width:auto;object-fit:contain;
  transition:transform .3s var(--ease),opacity .3s var(--ease);opacity:.9}
.broadcast a:hover img{transform:scale(1.06);opacity:1}
.broadcast a:focus-visible{outline:2px solid var(--gold);outline-offset:6px;border-radius:6px}
.sec--video .ytlite__note{margin-top:.9rem}