/* ============================================================================
   ESPORTS · LO COMÚN DE SUS TRES PÁGINAS (15 oct 2026)
   ============================================================================

   /salon/, /formatos/ y /busquedas/ salieron de la raíz de /esports/ el día
   que el portal dejó de existir (reorganización del 15 oct 2026, contrato en
   db/plan-reorganizacion-web.md). Las tres comparten la cabecera de página,
   la cabecera de sección y los EFECTOS DE CAMPEÓN, y eso vive aquí; lo de
   cada una, en su hoja (salon.css, formatos.css, busquedas.css).

   COPIADO, NO MOVIDO. Las reglas de la nebulosa, el aura y el barrido se
   escribieron en esports/index.html («LA NEBULOSA DORADA», «EL AURA», «EL
   BRILLO») y allí se quedan: la página de un campeón (/esports/campeones/
   <año>) las sigue usando. Si se retocan, se retocan en los dos sitios y en
   /muestra («6 · Efectos de campeón»), que es la referencia.

   Solo tokens. Los rem sueltos que quedan son huecos internos de una pieza,
   los mismos que llevaban en esports/index.html.
   ========================================================================== */

/* ---------- LA CABECERA DE PÁGINA ----------
   Antetítulo → titular → bajada, a la izquierda; a la derecha, la pieza que
   se toca (la vitrina, la escalera, el tablón). En móvil, apiladas. */
.es-hero{position:relative;padding:var(--esp-seccion) 0 var(--esp-bloque);overflow:hidden}
.es-hero-in{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:var(--esp-bloque);align-items:center}
.es-hero-txt{min-width:0}
.es-hero h1{font-size:var(--tipo-hero);margin:.9rem 0 1.1rem}
.es-hero h1 em{font-style:normal;color:var(--yellow);display:block}
.es-hero-bajada{font-size:var(--tipo-entradilla);color:var(--texto-2);max-width:44ch;line-height:1.55}
.es-hero-bajada em{font-style:normal;font-weight:600;color:var(--yellow)}
.es-acciones{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.75rem}
@media (max-width:900px){
  .es-hero-in{grid-template-columns:minmax(0,1fr)}
}

/* ---------- LA SECCIÓN ----------
   Como en el resto de la web: filete arriba, antetítulo numerado («01 / …»),
   titular a --tipo-titulo y bajada. */
.es-sec{padding:var(--esp-seccion) 0;border-top:1px solid var(--line)}
.es-sec-head{max-width:62ch;margin-bottom:var(--esp-cabecera)}
.es-sec-head h2{font-size:var(--tipo-titulo);margin:.7rem 0 1rem}
.es-sec-head p{color:var(--texto-2);font-size:var(--tipo-descripcion)}
.es-sec-head p em{font-style:normal;font-weight:600;color:var(--yellow)}

/* El cierre de una página: una línea y su salida. */
.es-cierre{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:var(--esp-rejilla);padding:var(--esp-caja)}
.es-cierre h2{font-size:var(--tipo-subtitulo);font-family:var(--fuente-display-e);font-weight:700;letter-spacing:.01em}
.es-cierre .es-acciones{margin-top:0}
.es-cierre p{font-size:var(--tipo-descripcion);color:var(--texto-2);margin-top:.4rem}

/* EL AVISO DE ERROR: si esports-data.js no llega, la página lo dice y da
   salida. Gris, como todo lo que avisa y no se pulsa. */
.es-error{padding:var(--esp-caja);--caja-fondo:var(--gris-1);--filo-color:var(--gris-2);
  color:var(--gris-3);font-size:var(--tipo-cuerpo);display:grid;gap:1rem;justify-items:start}
.es-error[hidden]{display:none}

/* ============================================================================
   LOS EFECTOS DE CAMPEÓN — nebulosa, aura y barrido
   ============================================================================
   Copiados de esports/index.html (ver la cabecera). Son el premio: solo los
   lleva lo que se ha ganado. */

/* LA NEBULOSA DORADA: tres radiales amarillos detrás del contenido, que
   giran (16 s, lineal) y respiran (6 s, ida y vuelta). */
.nebulosa{position:relative;overflow:hidden}
.nebulosa > *{position:relative;z-index:1}
.nebulosa::before{
  content:'';position:absolute;inset:-30%;z-index:0;pointer-events:none;
  background:
    radial-gradient(38% 32% at 28% 32%, rgba(255,198,33,var(--neb-1,.18)), transparent 70%),
    radial-gradient(30% 36% at 72% 64%, rgba(255,198,33,var(--neb-2,.14)), transparent 70%),
    radial-gradient(26% 22% at 58% 22%, rgba(255,246,223,var(--neb-3,.08)), transparent 70%);
  filter:blur(18px);transform-origin:42% 58%;
}
@media (prefers-reduced-motion: no-preference){
  .nebulosa::before{
    animation:nebulosa-giro var(--neb-giro,16s) linear infinite,
              nebulosa-respira var(--neb-resp,6s) ease-in-out infinite alternate;
  }
}
@keyframes nebulosa-giro{from{rotate:0deg} to{rotate:360deg}}
@keyframes nebulosa-respira{from{scale:.94} to{scale:1.14}}

/* EL AURA: la nebulosa asoma por fuera. Va en un envoltorio SIN clip-path
   (el bisel de la tarjeta se la comería) y queda debajo de ella. */
.aura{position:relative;display:flex;flex-direction:column}
.aura > *{flex:1;position:relative;z-index:1}
.aura::before{
  content:'';position:absolute;inset:-8px;z-index:0;pointer-events:none;
  background:
    radial-gradient(60% 70% at 25% 35%, rgba(255,198,33,.3), transparent 70%),
    radial-gradient(55% 65% at 78% 70%, rgba(255,198,33,.22), transparent 70%);
  filter:blur(12px);opacity:.8;
}
@media (prefers-reduced-motion: no-preference){
  .aura::before{animation:nebulosa-aura 6s ease-in-out infinite alternate}
}
@keyframes nebulosa-aura{from{opacity:.5;scale:.99} to{opacity:1;scale:1.02}}

/* LA NEBULOSA DE FONDO, fija detrás de la página. */
.es-fondo{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.es-fondo::before{
  content:'';position:absolute;inset:-35%;pointer-events:none;
  background:
    radial-gradient(28% 24% at 24% 30%, rgba(255,198,33,.2), transparent 70%),
    radial-gradient(24% 30% at 76% 38%, rgba(255,198,33,.15), transparent 70%),
    radial-gradient(30% 22% at 58% 76%, rgba(255,198,33,.17), transparent 70%),
    radial-gradient(18% 16% at 38% 60%, rgba(255,246,223,.07), transparent 70%);
  filter:blur(30px);transform-origin:46% 54%;opacity:.55;
}
@media (prefers-reduced-motion: no-preference){
  .es-fondo::before{
    animation:nebulosa-giro 20s linear infinite,
              nebulosa-respira 7s ease-in-out infinite alternate;
  }
}
/* Lo de la página va por encima de la bruma. */
.contenido > :not(.es-fondo){position:relative;z-index:1}

/* EL BARRIDO: lo enciende assets/destello.js (`.destella`) solo a la vista.
   Las dos puntas del degradado son del color del texto: en reposo se ve
   igual que sin efecto. El recorrido se queda entre 0 % y 100 %. */
@keyframes pf-n-brillo-txt{
  0%, 70%   {background-position:100% 0}
  88%, 100% {background-position:0% 0}
}
@keyframes pf-n-halo{
  0%, 68%, 100% {filter:none}
  79%           {filter:drop-shadow(0 0 12px var(--halo))}
}
@keyframes pf-n-brillo-caja{
  0%, 70%   {transform:translateX(-70%)}
  90%, 100% {transform:translateX(70%)}
}