/* ===== Cabeceras de las páginas interiores con vídeo real (oct-2026) =====
   Clips de una americana Horizon en Bela Padel Center, uno distinto por página (assets/js/hero-video.js).
   De fondo, su primer fotograma (lo que se ve mientras carga o con «reducir movimiento»).
   Selectores con html[data-page] porque nightlife.css deja transparentes todos los heroes con !important. */
html[data-page] #site-hero.am-hero .am-hero-bg { background: linear-gradient(180deg, rgba(5,8,16,.66) 0%, rgba(5,8,16,.52) 40%, rgba(5,8,16,.80) 82%, #050810 100%), radial-gradient(ellipse 80% 70% at 50% 45%, rgba(0,60,180,.20) 0%, transparent 70%), url("../media/heroes/hero-americanas.webp") center / cover no-repeat, #050810 !important; }
@media (max-width: 700px) { html[data-page] #site-hero.am-hero .am-hero-bg { background: linear-gradient(180deg, rgba(5,8,16,.66) 0%, rgba(5,8,16,.52) 40%, rgba(5,8,16,.80) 82%, #050810 100%), radial-gradient(ellipse 80% 70% at 50% 45%, rgba(0,60,180,.20) 0%, transparent 70%), url("../media/heroes/hero-americanas-m.webp") center / cover no-repeat, #050810 !important; } }
html[data-page] #site-hero.nos-hero .nos-hero-bg { background: linear-gradient(180deg, rgba(5,8,16,.66) 0%, rgba(5,8,16,.52) 40%, rgba(5,8,16,.80) 82%, #050810 100%), radial-gradient(ellipse 80% 70% at 50% 45%, rgba(0,60,180,.20) 0%, transparent 70%), url("../media/heroes/hero-nosotros.webp") center / cover no-repeat, #050810 !important; }
@media (max-width: 700px) { html[data-page] #site-hero.nos-hero .nos-hero-bg { background: linear-gradient(180deg, rgba(5,8,16,.66) 0%, rgba(5,8,16,.52) 40%, rgba(5,8,16,.80) 82%, #050810 100%), radial-gradient(ellipse 80% 70% at 50% 45%, rgba(0,60,180,.20) 0%, transparent 70%), url("../media/heroes/hero-nosotros-m.webp") center / cover no-repeat, #050810 !important; } }
html[data-page] #site-hero.sed-hero .sed-hero-bg { background: linear-gradient(180deg, rgba(5,8,16,.66) 0%, rgba(5,8,16,.52) 40%, rgba(5,8,16,.80) 82%, #050810 100%), radial-gradient(ellipse 80% 70% at 50% 45%, rgba(0,60,180,.20) 0%, transparent 70%), url("../media/heroes/hero-sedes.webp") center / cover no-repeat, #050810 !important; }
@media (max-width: 700px) { html[data-page] #site-hero.sed-hero .sed-hero-bg { background: linear-gradient(180deg, rgba(5,8,16,.66) 0%, rgba(5,8,16,.52) 40%, rgba(5,8,16,.80) 82%, #050810 100%), radial-gradient(ellipse 80% 70% at 50% 45%, rgba(0,60,180,.20) 0%, transparent 70%), url("../media/heroes/hero-sedes-m.webp") center / cover no-repeat, #050810 !important; } }
html[data-page] #site-hero.cnt-hero .cnt-hero-bg { background: linear-gradient(180deg, rgba(5,8,16,.66) 0%, rgba(5,8,16,.52) 40%, rgba(5,8,16,.80) 82%, #050810 100%), radial-gradient(ellipse 80% 70% at 50% 45%, rgba(0,60,180,.20) 0%, transparent 70%), url("../media/heroes/hero-contacto.webp") center / cover no-repeat, #050810 !important; }
@media (max-width: 700px) { html[data-page] #site-hero.cnt-hero .cnt-hero-bg { background: linear-gradient(180deg, rgba(5,8,16,.66) 0%, rgba(5,8,16,.52) 40%, rgba(5,8,16,.80) 82%, #050810 100%), radial-gradient(ellipse 80% 70% at 50% 45%, rgba(0,60,180,.20) 0%, transparent 70%), url("../media/heroes/hero-contacto-m.webp") center / cover no-repeat, #050810 !important; } }
html[data-page] #site-hero.cap-hero { background: linear-gradient(180deg, rgba(5,8,16,.66) 0%, rgba(5,8,16,.52) 40%, rgba(5,8,16,.80) 82%, #050810 100%), radial-gradient(ellipse 80% 70% at 50% 45%, rgba(0,60,180,.20) 0%, transparent 70%), url("../media/heroes/hero-captacion.webp") center / cover no-repeat, #050810 !important; }
@media (max-width: 700px) { html[data-page] #site-hero.cap-hero { background: linear-gradient(180deg, rgba(5,8,16,.66) 0%, rgba(5,8,16,.52) 40%, rgba(5,8,16,.80) 82%, #050810 100%), radial-gradient(ellipse 80% 70% at 50% 45%, rgba(0,60,180,.20) 0%, transparent 70%), url("../media/heroes/hero-captacion-m.webp") center / cover no-repeat, #050810 !important; } }
html[data-page] .ranking-hero.ranking-hero { background: linear-gradient(180deg, rgba(5,8,16,.66) 0%, rgba(5,8,16,.52) 40%, rgba(5,8,16,.80) 82%, #050810 100%), radial-gradient(ellipse 80% 70% at 50% 45%, rgba(0,60,180,.20) 0%, transparent 70%), url("../media/heroes/hero-ranking.webp") center / cover no-repeat, #050810 !important; }
@media (max-width: 700px) { html[data-page] .ranking-hero.ranking-hero { background: linear-gradient(180deg, rgba(5,8,16,.66) 0%, rgba(5,8,16,.52) 40%, rgba(5,8,16,.80) 82%, #050810 100%), radial-gradient(ellipse 80% 70% at 50% 45%, rgba(0,60,180,.20) 0%, transparent 70%), url("../media/heroes/hero-ranking-m.webp") center / cover no-repeat, #050810 !important; } }
html #torneo-hero .trn-hero-bg { background: linear-gradient(180deg, rgba(5,8,16,.66) 0%, rgba(5,8,16,.52) 40%, rgba(5,8,16,.80) 82%, #050810 100%), radial-gradient(ellipse 80% 70% at 50% 45%, rgba(0,60,180,.20) 0%, transparent 70%), url("../media/heroes/hero-torneo.webp") center / cover no-repeat, #050810 !important; }
@media (max-width: 700px) { html #torneo-hero .trn-hero-bg { background: linear-gradient(180deg, rgba(5,8,16,.66) 0%, rgba(5,8,16,.52) 40%, rgba(5,8,16,.80) 82%, #050810 100%), radial-gradient(ellipse 80% 70% at 50% 45%, rgba(0,60,180,.20) 0%, transparent 70%), url("../media/heroes/hero-torneo-m.webp") center / cover no-repeat, #050810 !important; } }
html #equipos-hero .trn-hero-bg { background: linear-gradient(180deg, rgba(5,8,16,.66) 0%, rgba(5,8,16,.52) 40%, rgba(5,8,16,.80) 82%, #050810 100%), radial-gradient(ellipse 80% 70% at 50% 45%, rgba(0,60,180,.20) 0%, transparent 70%), url("../media/heroes/hero-equipos.webp") center / cover no-repeat, #050810 !important; }
@media (max-width: 700px) { html #equipos-hero .trn-hero-bg { background: linear-gradient(180deg, rgba(5,8,16,.66) 0%, rgba(5,8,16,.52) 40%, rgba(5,8,16,.80) 82%, #050810 100%), radial-gradient(ellipse 80% 70% at 50% 45%, rgba(0,60,180,.20) 0%, transparent 70%), url("../media/heroes/hero-equipos-m.webp") center / cover no-repeat, #050810 !important; } }
html #patrocinios-hero .trn-hero-bg { background: linear-gradient(180deg, rgba(5,8,16,.66) 0%, rgba(5,8,16,.52) 40%, rgba(5,8,16,.80) 82%, #050810 100%), radial-gradient(ellipse 80% 70% at 50% 45%, rgba(0,60,180,.20) 0%, transparent 70%), url("../media/heroes/hero-patrocinios.webp") center / cover no-repeat, #050810 !important; }
@media (max-width: 700px) { html #patrocinios-hero .trn-hero-bg { background: linear-gradient(180deg, rgba(5,8,16,.66) 0%, rgba(5,8,16,.52) 40%, rgba(5,8,16,.80) 82%, #050810 100%), radial-gradient(ellipse 80% 70% at 50% 45%, rgba(0,60,180,.20) 0%, transparent 70%), url("../media/heroes/hero-patrocinios-m.webp") center / cover no-repeat, #050810 !important; } }
html[data-page] .ranking-hero.ranking-hero::before { opacity: .5; }

/* capa del vídeo: detrás del texto, con el mismo degradado para que se lea */
.hz-hero-vidwrap { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.hz-hero-vid { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .8s ease; }
.hz-hero-vidwrap.is-on .hz-hero-vid { opacity: 1; }
.hz-hero-vidov { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(5,8,16,.58) 0%, rgba(5,8,16,.30) 36%, rgba(5,8,16,.42) 66%, #050810 100%), radial-gradient(ellipse 70% 60% at 50% 45%, rgba(5,8,16,.30) 0%, transparent 75%); }
/* donde el vídeo va dentro del propio hero (captación, ranking) el contenido tiene que quedar encima */
#site-hero.cap-hero.hz-has-vid > :not(.hz-hero-vidwrap),
.ranking-hero.hz-has-vid > :not(.hz-hero-vidwrap) { position: relative; z-index: 1; }
@media (prefers-reduced-motion: reduce) { .hz-hero-vidwrap { display: none; } }
.hz-vid-hero .trn-aurora, .hz-vid-hero .trn-beams, .hz-vid-hero .mo-beam, .hz-vid-hero .mo-hero-spot,
.hz-vid-hero .am-hero-lines, .hz-vid-hero .nos-hero-lines, .hz-vid-hero .sed-hero-lines, .hz-vid-hero .cnt-hero-lines { opacity: .12 !important; }
.hz-vid-hero p { text-shadow: 0 2px 18px rgba(0,0,0,.75), 0 1px 3px rgba(0,0,0,.5); }
/* el titular lleva letras con degradado (background-clip:text): un text-shadow se transparenta y lo oscurece; drop-shadow no */
.hz-vid-hero h1 { text-shadow: none !important; filter: drop-shadow(0 4px 22px rgba(0,0,0,.65)); }
.hz-vid-hero h1 span { text-shadow: none !important; }

/* ===== Nosotros: fotos reales (club donde empezó + fundadores) ===== */
.nos-foto { position: relative; margin: 0; border-radius: 18px; overflow: hidden; border: 1px solid rgba(255,255,255,.1); box-shadow: 0 30px 70px rgba(0,0,0,.45); background: #0a0f1d; }
.nos-foto img { display: block; width: 100%; height: 100%; object-fit: cover; }
.nos-foto::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(5,8,16,.85) 100%); pointer-events: none; }
.nos-foto figcaption { position: absolute; left: 16px; bottom: 14px; z-index: 1; font-family: 'Barlow Condensed', sans-serif; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; font-size: .78rem; color: #fff; }
.nos-foto figcaption::before { content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #1a8fff; box-shadow: 0 0 10px #1a8fff; margin-right: .5rem; vertical-align: middle; }
.nos-foto--club { aspect-ratio: 3 / 2; margin-bottom: 2.4rem; }
.nos-founders-wrap { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(1.2rem, 3vw, 2.2rem); align-items: stretch; margin-top: 2rem; }
.nos-founders-wrap .equipo-grid { grid-template-columns: 1fr; margin-top: 0; align-content: center; }
.nos-foto--fundadores { aspect-ratio: 4 / 5; }
@media (max-width: 900px) {
  .nos-founders-wrap { grid-template-columns: 1fr; }
  .nos-foto--fundadores { aspect-ratio: 4 / 3; }
  .nos-foto--fundadores img { object-position: center 30%; }
}

/* textos pequeños de la cabecera encima del vídeo (etiquetas, cifras): sombra suave y gris más claro para que se lean */
.hz-vid-hero span, .hz-vid-hero [class*="label"], .hz-vid-hero [class*="eyebrow"], .hz-vid-hero [class*="meta"], .hz-vid-hero [class*="period"] {
  text-shadow: 0 1px 10px rgba(0,0,0,.85), 0 0 2px rgba(0,0,0,.6);
}
.hz-vid-hero .trn-stat-label { color: #a9b6cf; }