/* ==========================================================================
   MELILLA TITANS — evento.css · sección de evento especial
   Cinematic Social Studio
   --------------------------------------------------------------------------
   Se carga SOLO en /evento y, para el aviso, en portada. No toca ninguna
   variable de base.css, así que el resto de la web sigue intacto.

   Dos pieles: .ev-noche (la de Halloween, navy llevado a violeta con acento
   calabaza) y .ev-club (navy y dorado de siempre, para reciclar la sección
   en otros eventos sin que parezca Halloween en marzo).

   Nombres de clase neutros (ev-*) a propósito: Opera GX y Brave esconden por
   nombre, y con los equipos ya nos comieron un bloque entero por llamarse
   «anuncio». Nada de popup, banner, promo, ad ni sticky aquí.
   ========================================================================== */

/* Los tokens se declaran en LOS DOS sitios donde se usan. El aviso vive en el
   pie, fuera de <main class="ev">, así que heredando no le llegaba ninguna
   variable: el botón se quedaba sin fondo y con el texto casi negro sobre
   oscuro, o sea invisible. */
.ev,
.ev-aviso-capa{
  /* piel noche por defecto */
  --ev-fondo:#0B0714;
  --ev-fondo-2:#150D24;
  --ev-acento:#FF7A1A;
  --ev-acento-claro:#FFA24D;
  --ev-vivo:#9FE870;
  --ev-oro:#D4B76A;
  --ev-texto:#F2EDE3;
  --ev-texto-soft:rgba(242,237,227,.72);
  --ev-texto-mute:rgba(242,237,227,.46);
  --ev-filete:rgba(212,183,106,.26);
  --ev-filete-f:rgba(212,183,106,.5);
}

/* El bloque de la página. Separado de los tokens de arriba a propósito: si el
   fondo y el padding fueran en el mismo selector, la capa del aviso heredaría
   un fondo opaco y taparía la portada entera en vez de velarla. */
.ev{
  position:relative;
  background:var(--ev-fondo);
  color:var(--ev-texto);
  /* 120px arriba como /tei y /socios: la barra del menú es position:fixed y
     con menos hueco la cabecera se mete por debajo de ella. */
  padding:120px clamp(16px,4vw,48px) clamp(50px,7vw,88px);
  overflow:hidden;
}
@media (max-width:900px){
  .ev{padding-top:100px}
}
/* piel alternativa: el navy y el dorado de la web, sin Halloween */
.ev.ev-club{
  --ev-fondo:#0A1A3E;
  --ev-fondo-2:#0E2250;
  --ev-acento:#D4B76A;
  --ev-acento-claro:#E4CB7F;
  --ev-vivo:#9FE870;
  --ev-texto:#F3F5FB;
  --ev-texto-soft:rgba(243,245,251,.74);
  --ev-texto-mute:rgba(243,245,251,.5);
}
/* niebla: dos halos quietos, pintados en el propio fondo */
.ev::before{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:0;
  background:
    radial-gradient(60% 40% at 80% 6%, rgba(255,122,26,.16), transparent 70%),
    radial-gradient(70% 50% at 8% 100%, rgba(159,232,112,.07), transparent 70%),
    radial-gradient(90% 60% at 50% 48%, var(--ev-fondo-2), transparent 75%);
}
.ev.ev-club::before{
  background:
    radial-gradient(60% 40% at 80% 6%, rgba(212,183,106,.14), transparent 70%),
    radial-gradient(90% 60% at 50% 48%, var(--ev-fondo-2), transparent 75%);
}
.ev > *{position:relative; z-index:1}
.ev-sprite{position:absolute; width:0; height:0; overflow:hidden}

/* OJO, esto es imprescindible.
   El navegador oculta un elemento con [hidden] poniéndole display:none desde
   su hoja interna, pero CUALQUIER regla de clase propia con display gana por
   especificidad. Como la cortina y el aviso llevan display:grid, el
   `elemento.hidden = true` de JavaScript no los ocultaba: la cortina seguía
   tapando el reproductor (el botón «Ver el contenido» parecía no funcionar)
   y el aviso no se podía cerrar. */
.ev [hidden],
.ev-aviso-capa[hidden],
.ev-cortina[hidden],
.ev-fuera[hidden]{display:none!important}

/* ───────── ambiente: murciélagos ─────────
   Van dentro de la página (no fixed) y solo decoran. */
/* Van POR DELANTE de los bloques (z-index 2): detrás quedaban tapados por el
   fondo opaco de la cabecera y del visor y no se veía ninguno. Sin ratón
   (pointer-events:none) para que no estorben al pulsar nada. */
.ev-ambiente{position:absolute; inset:0; z-index:2; pointer-events:none; overflow:hidden}
.ev-fig{
  position:absolute; width:52px; height:33px; opacity:.5;
  filter:drop-shadow(0 0 9px rgba(255,122,26,.45));
}
/* Silueta en violeta claro: en negro sobre un fondo casi negro no se veían. */
.ev-fig path{fill:#4A3570}
.ev.ev-club .ev-fig path{fill:#2B3F74}
.ev-fig-1{top:9%;  left:-70px; width:46px; height:29px}
.ev-fig-2{top:34%; left:-70px; width:64px; height:40px; opacity:.55}
.ev-fig-3{top:62%; left:-70px; width:38px; height:24px; opacity:.6}
.ev-fig-4{top:84%; left:-70px; width:56px; height:35px; opacity:.45}

@media (prefers-reduced-motion:no-preference){
  .ev-fig{animation:ev-cruza 19s linear infinite}
  .ev-fig-2{animation-duration:26s; animation-delay:-6s}
  .ev-fig-3{animation-duration:15s; animation-delay:-11s}
  .ev-fig-4{animation-duration:31s; animation-delay:-3s}
  .ev-ala-i,.ev-ala-d{animation:ev-bate .42s ease-in-out infinite alternate; transform-origin:32px 18px}
  .ev-ala-d{animation-delay:-.21s}

  @keyframes ev-cruza{
    0%   {transform:translate(0, 0) rotate(-4deg)}
    25%  {transform:translate(30vw, -34px) rotate(5deg)}
    50%  {transform:translate(58vw, 20px) rotate(-6deg)}
    75%  {transform:translate(84vw, -24px) rotate(4deg)}
    100% {transform:translate(calc(100vw + 90px), 8px) rotate(-3deg)}
  }
  @keyframes ev-bate{
    from{transform:scaleY(1)   translateY(0)}
    to  {transform:scaleY(.52) translateY(-2px)}
  }
}
/* sin animación: los murciélagos se quedan fuera de cuadro y no molestan */
@media (prefers-reduced-motion:reduce){ .ev-ambiente{display:none} }

/* ───────── cabecera: texto a la izquierda, reproductor a la derecha ─────────
   Igual que el bloque de MT Media. Así el reproductor ocupa media pantalla y
   se ve entero sin tener que bajar. En móvil se apilan, texto arriba. */
.ev-top{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);
  gap:14px; align-items:stretch; margin-bottom:10px;
  /* z-index:auto a posta: así NO crea contexto de apilado propio y el visor
     de abajo puede ponerse por encima de los murciélagos. */
  z-index:auto;
}
@media (max-width:900px){
  .ev-top{grid-template-columns:minmax(0,1fr)}
}

.ev-hero{
  border:1px solid var(--ev-filete); border-top:3px solid var(--ev-acento);
  background:linear-gradient(165deg, var(--ev-fondo-2), var(--ev-fondo) 72%);
  padding:clamp(22px,3vw,34px) clamp(18px,2.4vw,28px);
  position:relative; overflow:hidden; min-width:0;
  display:flex; flex-direction:column;
}
.ev-dorsal{
  position:absolute; right:8px; top:-20px; font-family:'Big Shoulders Display',sans-serif;
  font-weight:900; font-size:clamp(5rem,17vw,9rem); line-height:1;
  color:transparent; -webkit-text-stroke:2px rgba(255,122,26,.18);
  pointer-events:none; user-select:none;
}
.ev.ev-club .ev-dorsal{-webkit-text-stroke-color:rgba(212,183,106,.2)}
/* En el flujo, no en posición absoluta: colgada abajo a la derecha se comía
   la etiqueta del contador. Aquí no puede solaparse con nada. */
.ev-calabaza-hero{
  align-self:flex-end; margin:10px -4px 16px 0;
  width:clamp(54px,8vw,82px); height:auto; color:var(--ev-acento); opacity:.9;
}
@media (prefers-reduced-motion:no-preference){
  .ev-calabaza-hero{animation:ev-respira 4.4s ease-in-out infinite}
  @keyframes ev-respira{
    0%,100%{transform:translateY(0) rotate(-2deg); filter:drop-shadow(0 0 10px rgba(255,122,26,.3))}
    50%    {transform:translateY(-7px) rotate(2deg); filter:drop-shadow(0 0 22px rgba(255,122,26,.55))}
  }
}

.ev-marker{display:flex; align-items:baseline; gap:10px; margin-bottom:12px}
.ev-marker span{
  font-family:'Inter',sans-serif; font-weight:600; font-size:.64rem; letter-spacing:.22em;
  text-transform:uppercase; color:var(--ev-acento);
}
.ev-marker-sec{margin:34px 0 13px}
.ev-marker-sec span{color:var(--ev-texto-mute)}

.ev-titulo{
  font-family:'Big Shoulders Display',sans-serif; font-weight:900; text-transform:uppercase;
  font-size:clamp(2.1rem,5.6vw,3.6rem); line-height:.86; letter-spacing:-.012em;
  margin:0 0 14px; text-wrap:balance; color:var(--ev-texto);
}
.ev-titulo em{font-style:normal; color:var(--ev-acento)}
.ev-intro{max-width:46ch; color:var(--ev-texto-soft); margin:0 0 20px; font-size:.92rem}

/* ───────── reproductor ───────── */
.ev-visor{
  border:1px solid var(--ev-filete-f); background:var(--ev-fondo-2);
  min-width:0; display:flex; flex-direction:column;
  /* Por encima de los murciélagos: cruzando por delante del vídeo molestaban. */
  position:relative; z-index:3;
}
.ev-visor-top,.ev-visor-bot{
  display:flex; flex-wrap:wrap; gap:9px 14px; align-items:center; justify-content:space-between;
  padding:11px 15px;
}
.ev-visor-top{border-bottom:1px solid var(--ev-filete)}
.ev-visor-bot{border-top:1px solid var(--ev-filete)}
.ev-quien{
  font-family:'Inter',sans-serif; font-weight:800; font-size:.62rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ev-texto-mute); min-width:0;
}
.ev-quien b{color:var(--ev-oro); font-weight:800}
.ev.ev-club .ev-quien b{color:var(--ev-acento)}
.ev-visor-bot p{margin:0; flex:1 1 200px; min-width:0; font-size:.86rem; color:var(--ev-texto-soft)}

.ev-estado{
  display:inline-flex; align-items:center; gap:7px;
  font-family:'Inter',sans-serif; font-weight:800; font-size:.6rem; letter-spacing:.16em;
  text-transform:uppercase; padding:4px 9px; border:1px solid var(--ev-filete);
  color:var(--ev-texto-mute); align-self:flex-start; white-space:nowrap;
}
.ev-estado.es-vivo{color:var(--ev-vivo); border-color:rgba(159,232,112,.45)}
.ev-estado i{
  width:7px; height:7px; border-radius:50%; background:var(--ev-vivo); flex:none;
  box-shadow:0 0 0 3px rgba(159,232,112,.14);
}
@media (prefers-reduced-motion:no-preference){
  .ev-estado i{animation:ev-late 1.9s ease-in-out infinite}
  @keyframes ev-late{
    0%,100%{box-shadow:0 0 0 3px rgba(159,232,112,.1)}
    50%    {box-shadow:0 0 0 7px rgba(159,232,112,.24)}
  }
}

.ev-pantalla{position:relative; aspect-ratio:16/9; max-width:100%; background:#07040E; overflow:hidden}
.ev-pantalla iframe{position:absolute; inset:0; width:100%; height:100%; border:0; display:block}

.ev-cortina,.ev-fuera{
  position:absolute; inset:0; display:grid; place-content:center; justify-items:center;
  gap:12px; text-align:center; padding:20px;
  background:linear-gradient(170deg, var(--ev-fondo-2), #07040E);
}
.ev-cortina{z-index:2}
.ev-fuera{z-index:1}
.ev-cortina svg{width:54px; height:54px; color:var(--ev-oro); opacity:.8}
.ev-cortina p,.ev-fuera p{
  margin:0; max-width:40ch; font-size:.86rem; color:var(--ev-texto-soft);
}
.ev-cortina-alt{font-size:.76rem; color:var(--ev-texto-mute); text-underline-offset:3px}
.ev-cortina-alt:hover{color:var(--ev-texto-soft)}
.ev-inicial{
  font-family:'Big Shoulders Display',sans-serif; font-weight:900;
  font-size:clamp(3rem,14vw,5.4rem); line-height:.8;
  color:transparent; -webkit-text-stroke:2px var(--ev-filete-f);
}

/* ───────── botones ───────── */
.ev-btn{
  display:inline-block; text-decoration:none; text-align:center; cursor:pointer;
  font-family:'Inter',sans-serif; font-weight:800; font-size:.7rem; letter-spacing:.1em;
  text-transform:uppercase; padding:12px 18px; border:1px solid transparent;
  transition:background .18s, color .18s, border-color .18s;
}
.ev-btn-o{background:var(--ev-acento); color:#190B02}
.ev-btn-o:hover{background:var(--ev-acento-claro); color:#190B02}
.ev-btn-f{background:transparent; color:var(--ev-texto-soft); border-color:var(--ev-filete-f)}
.ev-btn-f:hover{color:var(--ev-acento); border-color:var(--ev-acento)}

/* ───────── contador (dentro de la columna de texto) ───────── */
.ev-contador{
  display:flex; flex-wrap:wrap; border:1px solid var(--ev-filete);
  margin-top:auto;   /* se pega abajo para que las dos columnas casen */
}
.ev-contador > div{
  flex:1 1 90px; min-width:0; padding:12px 14px; border-right:1px solid var(--ev-filete);
  display:flex; flex-direction:column;
}
.ev-contador > div:last-child{border-right:0}
.ev-contador .n{
  font-family:'Big Shoulders Display',sans-serif; font-weight:900; font-size:1.8rem;
  line-height:1; color:var(--ev-oro); font-variant-numeric:tabular-nums;
}
.ev.ev-club .ev-contador .n{color:var(--ev-acento)}
.ev-contador .n.es-vivo{color:var(--ev-vivo)}
.ev-contador .l{
  font-family:'Inter',sans-serif; font-weight:600; font-size:.6rem; letter-spacing:.17em;
  text-transform:uppercase; color:var(--ev-texto-mute); margin-top:5px;
}

/* ───────── mando: botones de canal ─────────
   Son botones para cambiar de canal, no fichas: compactos, para que quepan
   todos los CC's de un vistazo debajo del reproductor. */
.ev-parrilla{display:grid; grid-template-columns:repeat(auto-fill,minmax(182px,1fr)); gap:10px}
.ev-cc{
  position:relative; appearance:none; cursor:pointer; text-align:left; font:inherit; color:inherit;
  border:1px solid var(--ev-filete); background:var(--ev-fondo-2);
  padding:12px 13px; min-width:0; display:flex; flex-direction:column; gap:9px;
  transition:border-color .18s, transform .18s, box-shadow .18s;
}
.ev-cc.es-vivo{
  border-color:rgba(159,232,112,.38);
  background:linear-gradient(170deg, rgba(159,232,112,.07), var(--ev-fondo-2) 55%);
}
.ev-cc:hover{border-color:var(--ev-acento)}
@media (prefers-reduced-motion:no-preference){
  .ev-cc:hover{transform:translateY(-3px); box-shadow:0 12px 26px rgba(0,0,0,.42)}
}
.ev-cc:focus-visible{outline:2px solid var(--ev-acento); outline-offset:2px}
.ev-cc[aria-pressed="true"]{
  border-color:var(--ev-acento); box-shadow:inset 0 0 0 1px rgba(255,122,26,.34);
}
/* Abajo a la derecha: arriba pisaba el nombre del creador. */
.ev-cc[aria-pressed="true"]::after{
  content:"Viendo"; position:absolute; bottom:-1px; right:-1px;
  background:var(--ev-acento); color:#190B02; padding:3px 8px;
  font-family:'Inter',sans-serif; font-weight:800; font-size:.55rem;
  letter-spacing:.14em; text-transform:uppercase;
}
/* …y el chip de plataforma se aparta para no quedar debajo del sello. */
.ev-cc[aria-pressed="true"] .ev-cc-pie{padding-right:62px}
.ev-cc-top{display:flex; align-items:center; gap:9px; min-width:0}
.ev-av{
  width:36px; height:36px; flex:none; border-radius:50%; object-fit:cover; display:block;
}
.ev-av-letra{
  display:grid; place-items:center; color:var(--ev-fondo);
  font-family:'Big Shoulders Display',sans-serif; font-weight:900; font-size:1.05rem;
  background:linear-gradient(145deg, var(--ev-acento-claro), var(--ev-oro));
}
.ev-cc.es-vivo .ev-av{box-shadow:0 0 0 2px var(--ev-fondo-2), 0 0 0 4px rgba(159,232,112,.55)}
.ev-cc-id{min-width:0; display:flex; flex-direction:column}
.ev-nm{
  font-family:'Big Shoulders Display',sans-serif; font-weight:700; font-size:1.12rem;
  line-height:1.05; text-transform:uppercase; overflow-wrap:anywhere;
}
.ev-sg{font-size:.7rem; color:var(--ev-texto-mute); font-variant-numeric:tabular-nums}
.ev-cc-pie{display:flex; flex-wrap:wrap; gap:6px; margin-top:auto}
.ev-canales{display:flex; flex-wrap:wrap; gap:6px; margin-top:auto}
.ev-canal{
  font-family:'Inter',sans-serif; font-weight:700; font-size:.6rem; letter-spacing:.1em;
  text-transform:uppercase; padding:4px 9px;
  border:1px solid var(--ev-filete); color:var(--ev-texto-soft);
}
.ev-canal.es-principal{border-color:var(--ev-oro); color:var(--ev-oro)}
.ev.ev-club .ev-canal.es-principal{border-color:var(--ev-acento); color:var(--ev-acento)}

/* nadie en directo */
.ev-nadie{
  border:1px dashed var(--ev-filete); padding:30px 22px; text-align:center;
  display:grid; justify-items:center; gap:14px;
}
.ev-nadie p{margin:0; max-width:46ch; color:var(--ev-texto-soft)}
.ev-calabaza-vacio{width:66px; height:auto; color:var(--ev-acento); opacity:.55}

/* pie */
.ev-pie{
  display:flex; flex-wrap:wrap; gap:10px; margin-top:38px;
  padding-top:26px; border-top:1px solid var(--ev-filete);
}
.ev-pie .ev-btn{flex:1 1 170px}

/* ==========================================================================
   AVISO DE PORTADA
   Capa centrada, no un widget pegado a una esquina. El velo es del propio
   aviso, así que apagado no queda nada en el DOM.
   ========================================================================== */
/* Aparece sola a los 1,4 s, sin JavaScript de por medio. */
.ev-aviso-capa{
  position:fixed; inset:0; z-index:9000; display:grid; place-items:center; padding:18px;
  opacity:0; visibility:hidden;
}
@media (prefers-reduced-motion:no-preference){
  .ev-aviso-capa{animation:ev-aparece .35s ease 1.4s forwards}
  @keyframes ev-aparece{to{opacity:1; visibility:visible}}
}
/* Sin animaciones el @keyframes no corre, así que aquí se muestra directa:
   más vale verlo al instante que no verlo nunca. */
@media (prefers-reduced-motion:reduce){
  .ev-aviso-capa{opacity:1; visibility:visible}
}
/* La casilla oculta lo cierra. Sin JS, solo cascada. */
.ev-aviso-chk:checked ~ .ev-aviso-capa{display:none!important}

.ev-aviso-velo{position:absolute; inset:0; background:rgba(8,5,16,.7); backdrop-filter:blur(2px); cursor:pointer}
.ev-aviso{
  position:relative; width:min(394px,100%);
  background:linear-gradient(170deg,#1E1333,#0B0714);
  border:1px solid rgba(212,183,106,.5); color:#F2EDE3;
  box-shadow:0 24px 70px rgba(0,0,0,.72), 0 0 0 1px rgba(255,122,26,.12);
  padding:30px 24px 22px; text-align:left;
}
.ev-aviso::before{
  content:""; position:absolute; left:0; right:0; top:0; height:3px;
  background:linear-gradient(90deg,#FF7A1A,#D4B76A 60%,#FF7A1A);
}
@media (prefers-reduced-motion:no-preference){
  .ev-aviso{animation:ev-entra .42s cubic-bezier(.2,.9,.3,1) both}
  @keyframes ev-entra{
    from{opacity:0; transform:translateY(16px) scale(.97)}
    to  {opacity:1; transform:none}
  }
}
.ev-aviso-x{
  position:absolute; top:9px; right:9px; width:30px; height:30px; cursor:pointer;
  display:grid; place-items:center;
  background:transparent; border:1px solid rgba(212,183,106,.26);
  color:rgba(242,237,227,.46); font-size:15px; line-height:1;
}
.ev-aviso-x:focus-visible,.ev-aviso-no:focus-visible{outline:2px solid #FF7A1A; outline-offset:2px}
.ev-aviso-x:hover{color:#FF7A1A; border-color:#FF7A1A}
.ev-aviso-calabaza{
  position:absolute; right:14px; bottom:12px; width:58px; height:auto;
  color:#FF7A1A; opacity:.26; pointer-events:none;
}
@media (prefers-reduced-motion:no-preference){
  .ev-aviso-calabaza{animation:ev-respira 4.4s ease-in-out infinite}
}
.ev-aviso-et{
  font-family:'Inter',sans-serif; font-weight:700; font-size:.6rem; letter-spacing:.24em;
  text-transform:uppercase; color:#FF7A1A; margin:0 0 10px;
}
.ev-aviso-t{
  font-family:'Big Shoulders Display',sans-serif; font-weight:900; text-transform:uppercase;
  font-size:2.3rem; line-height:.88; margin:0 0 12px; color:#F2EDE3;
}
.ev-aviso-t em{font-style:normal; color:#FF7A1A}
.ev-aviso-vivos{
  display:inline-flex; align-items:center; gap:8px; margin:0 0 14px;
  font-family:'Inter',sans-serif; font-weight:800; font-size:.66rem; letter-spacing:.14em;
  text-transform:uppercase; color:#9FE870;
}
.ev-aviso-vivos i{
  width:7px; height:7px; border-radius:50%; background:#9FE870; flex:none;
  box-shadow:0 0 0 4px rgba(159,232,112,.17);
}
@media (prefers-reduced-motion:no-preference){
  .ev-aviso-vivos i{animation:ev-late 1.9s ease-in-out infinite}
}
.ev-aviso-tx{margin:0 0 20px; font-size:.9rem; color:rgba(242,237,227,.72)}
.ev-aviso-cta{display:block; width:100%}
.ev-aviso-no{
  display:block; width:100%; margin-top:13px; text-align:center; cursor:pointer;
  font-family:'Inter',sans-serif; font-size:.72rem;
  color:rgba(242,237,227,.46); text-decoration:underline; text-underline-offset:3px;
}
.ev-aviso-no:hover{color:rgba(242,237,227,.72)}

@media (max-width:460px){
  .ev-aviso-t{font-size:1.95rem}
  .ev-aviso{padding:26px 19px 20px}
}