/* ══════════════════════════════════════════════════════════
   SRL™ v2 — MOTION LAYER
   Se carga DESPUÉS de style.css en todas las páginas.
   Moderniza nav, botones, tipografía y añade movimiento.
══════════════════════════════════════════════════════════ */

:root {
  --o: #FF4500;
  --o2: #FF7A1A;
  --ease: cubic-bezier(.16,1,.3,1);
  --ease-io: cubic-bezier(.77,0,.18,1);
  --glass: rgba(10,10,10,.55);
  --glass-border: rgba(255,255,255,.09);
}

/* Lenis (scroll suave) necesita desactivar el smooth nativo */
html.lenis, html.lenis body { height: auto; }
html.lenis { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }

/* ── NAV — barra de cristal flotante que se esconde al bajar ── */
nav {
  background: linear-gradient(to bottom, rgba(0,0,0,.75), rgba(0,0,0,0)) !important;
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  transition: transform .6s var(--ease), background .4s, box-shadow .4s, height .4s, top .5s var(--ease) !important;
}
nav.solid {
  background: rgba(8,8,8,.72) !important;
  border-bottom: 1px solid var(--glass-border) !important;
  box-shadow: 0 10px 40px rgba(0,0,0,.35) !important;
}
@media (min-width: 769px) {
  nav {
    top: 12px !important; left: 16px !important; right: 16px !important; height: 68px !important;
    padding: 0 1.6rem !important; border-radius: 20px;
    background: rgba(12,12,12,.5) !important;
    backdrop-filter: blur(18px) saturate(1.5) !important; -webkit-backdrop-filter: blur(18px) saturate(1.5) !important;
    border: 1px solid rgba(255,255,255,.09) !important;
    box-shadow: 0 20px 60px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.06) !important;
  }
  nav.solid { background: rgba(10,10,10,.72) !important; }
  /* Línea de luz que recorre el borde inferior del menú */
  nav::after { content: ''; position: absolute; left: 20px; right: 20px; bottom: -1px; height: 1px; pointer-events: none;
    background: linear-gradient(90deg, transparent, var(--o), transparent); background-size: 30% 100%; background-repeat: no-repeat;
    animation: heroSweep 6s var(--ease-io) infinite; }
}
nav.nav-hidden { transform: translateY(-140%); }
.nav-links > li > a { white-space: nowrap; }
/* Sponsors del menú fijos como siempre; si la pantalla es estrecha, la fila se recorta por la derecha
   para que las opciones del menú no se salgan nunca */
nav > div:first-child { flex: 1 1 auto; min-width: 0; overflow: hidden; }
.nav-sponsors { min-width: 0; overflow: hidden; }
.nav-sponsors.m-clip { -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent); mask-image: linear-gradient(90deg, #000 88%, transparent); }
/* Logos y opciones se escalan con el ancho de la pantalla para que quepa todo */
@media (min-width: 769px) {
  .nav-sponsors img { height: clamp(8px, calc(1.2vw - 7.5px), 14px) !important; }
  .nav-sponsors div[style*="gap:.6rem"] { gap: clamp(.3rem, .4vw, .6rem) !important; }
  .nav-sponsors > div:last-child { padding: .3rem clamp(.6rem, 1vw, 1.5rem) !important; }
  nav .logo img { height: clamp(26px, 2vw, 38px) !important; }
  nav { padding: 0 clamp(.9rem, 1.1vw, 1.6rem) !important; }
  .nav-links { gap: clamp(.8rem, 1vw, 1.4rem) !important; margin-left: clamp(.6rem, 1vw, 1.5rem); }
  .nav-links > li > a { font-size: clamp(.58rem, .5vw, .74rem) !important; letter-spacing: .06em !important; }
}
.nav-links { flex-shrink: 0; margin-left: 1.5rem; gap: 1.4rem !important; }
/* Tipografía del menú: Sequel 100 Black (archivo en assets/fonts) */
@font-face { font-family: 'Sequel 100 Black'; src: url('assets/fonts/Sequel100Black-76.ttf') format('truetype'); font-weight: 400 900; font-display: swap; }
.nav-links a, .dropdown-menu li a { font-family: 'Sequel 100 Black', 'Barlow Condensed', sans-serif !important; font-weight: 400 !important; text-transform: uppercase; }
.dropdown-menu li a { font-size: .62rem !important; letter-spacing: .06em !important; }

/* Etiquetas pequeñas (POWERED BY, TEMPORADA 2026, OFFICIAL SPONSORS, etiquetas de sección…) también en Sequel.
   Es muy ancha, así que van algo más pequeñas y con menos espacio entre letras. */
.hx-powered small, .hx-eyebrow, .hx-results-head, .sx-kicker, .section-label, .page-hero-label, .pal-kicker, .pal-badge,
.win-kicker, .cd-label, .m-join small, .ss-label, .erc-live-kicker, .ac-hero-label, .noticia-hero-content > div:first-child > span,
.nav-sponsors span,
.section-accent-text, .camp-sub, .champ-season, .podio-label, .podio-meta, .feat-meta, .hito-date, .win-crew {
  font-family: 'Sequel 100 Black', 'Barlow Condensed', sans-serif !important; font-weight: 400 !important;
  letter-spacing: .14em !important; font-size: .62rem !important;
}
.nav-sponsors span { font-size: .42rem !important; letter-spacing: .2em !important; }
.hx-powered small { font-size: .55rem !important; }

/* Títulos animados: la sombra se aplica al título entero (si no, sale un recuadro oscuro detrás de cada palabra) */
.m-w, .m-wi, .m-c { text-shadow: none !important; }
.page-hero h1, .noticia-hero h1, .pal-hero h1, .ac-hero h1 { text-shadow: none !important; filter: drop-shadow(0 6px 30px rgba(0,0,0,.6)); }

/* ── FONDO VIVO: luces de color que se mueven detrás de todo ── */
body { background: transparent !important; }
html { background: #070707 !important; }
#m-bg { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden;
  background: radial-gradient(ellipse 80% 55% at 50% -8%, rgba(255,69,0,.30), transparent 70%), radial-gradient(ellipse 60% 40% at 100% 100%, rgba(255,69,0,.10), transparent 70%), #070707; }

/* ── FOCO DE LUZ QUE SIGUE AL RATÓN ── */
#m-spot { position: fixed; top: 0; left: 0; width: 700px; height: 700px; margin: -350px 0 0 -350px; border-radius: 50%; pointer-events: none; z-index: 9990;
  background: radial-gradient(circle, rgba(255,110,40,.10), rgba(255,69,0,.04) 35%, transparent 65%); mix-blend-mode: screen; will-change: transform; }
@media (hover: none), (pointer: coarse) { #m-spot { display: none; } }

/* ── BLOQUE FINAL "ÚNETE" (todas las páginas) ── */
.m-join { position: relative; margin: 4rem 2.5rem 0; padding: 5rem 3rem; border-radius: 32px; overflow: hidden; isolation: isolate; text-align: center;
  border: 1px solid rgba(255,255,255,.08); background: radial-gradient(ellipse at 50% 120%, rgba(255,69,0,.45), transparent 60%), linear-gradient(180deg, #0d0d0d, #070707); }
.m-join::before { content: ''; position: absolute; inset: 0; z-index: -1; opacity: .5;
  background: repeating-linear-gradient(100deg, transparent 0 60px, rgba(255,69,0,.07) 60px 61px); animation: speedLines 4s linear infinite; background-size: 200% 100%; }
.m-join small { display: inline-flex; align-items: center; gap: .6rem; font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: .75rem; letter-spacing: .35em; text-transform: uppercase; color: rgba(255,255,255,.55); }
.m-join h3 { font-family: 'Barlow Condensed', sans-serif; font-weight: 900; text-transform: uppercase; line-height: .86; font-size: clamp(3.4rem, 9vw, 9rem); margin: 1.2rem 0 2.2rem; }
.m-join h3 em { font-style: normal; background: linear-gradient(100deg, #FF4500, #FFB347, #FF4500); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: joinShine 3s linear infinite; }
@keyframes joinShine { to { background-position: -200% 0; } }
.m-join-btns { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }
@media (max-width: 768px) { .m-join { margin: 3rem 1.2rem 0; padding: 3.5rem 1.5rem; border-radius: 24px; } }

/* ── BOTÓN PRINCIPAL: borde de luz que gira ── */
@property --ang { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
.btn {
  border: 1.5px solid transparent !important;
  background:
    linear-gradient(100deg, var(--o), var(--o2)) padding-box,
    conic-gradient(from var(--ang), rgba(255,255,255,.15) 0deg, #fff 40deg, rgba(255,255,255,.15) 90deg, rgba(255,255,255,.15) 360deg) border-box !important;
  animation: btnSpin 3s linear infinite;
  box-shadow: 0 10px 30px rgba(255,69,0,.35) !important;
}
.btn::after { display: none !important; }
@keyframes btnSpin { to { --ang: 360deg; } }
nav .logo img { transition: transform .5s var(--ease), filter .4s; }
nav .logo:hover img { transform: scale(1.06) rotate(-2deg); filter: drop-shadow(0 0 14px rgba(255,69,0,.6)); }

.nav-links a { transition: color .25s !important; }
.nav-links a::after {
  height: 2px !important; bottom: -8px !important; border-radius: 2px;
  background: linear-gradient(90deg, var(--o), var(--o2)) !important;
  box-shadow: 0 0 10px rgba(255,69,0,.8);
}
.dropdown-menu { transform: translateX(-50%) translateY(8px) !important; transition: opacity .3s var(--ease), transform .4s var(--ease), visibility .3s !important; }
.nav-dropdown:hover .dropdown-menu { transform: translateX(-50%) translateY(0) !important; }
.dropdown-menu::before { background: rgba(8,8,8,.85) !important; backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border-radius: 14px !important; }

/* ── BARRA DE PROGRESO DE SCROLL ── */
#m-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 9999;
  transform-origin: 0 50%; transform: scaleX(0);
  background: linear-gradient(90deg, var(--o), var(--o2), #FFC04D);
  box-shadow: 0 0 12px rgba(255,69,0,.8);
  pointer-events: none;
}

/* ── TEXTO PARTIDO (split) ── */
.m-w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .06em; margin-bottom: -.06em; }
.m-wi { display: inline-block; will-change: transform; }
.m-split-ready .m-wi { transform: translateY(110%); }

/* ── REVEAL — más dinámico ── */
.reveal { transform: translateY(48px) scale(.98); transition: opacity 1s var(--ease), transform 1.1s var(--ease); }
.reveal.vis { transform: none; }

/* Etiquetas de sección: la línea crece al aparecer */
.section-label::before, .page-hero-label::before { transform-origin: left; animation: labelGrow 1.2s var(--ease) both, labelGlow 2.2s 1.2s ease-in-out infinite alternate !important; }
@keyframes labelGrow { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ── BOTONES — relleno animado + flecha ── */
.btn, .btn-outline { border-radius: 100px !important; isolation: isolate; overflow: hidden; position: relative; }
.btn { background: linear-gradient(100deg, var(--o), var(--o2)) !important; }
.btn::before, .btn-outline::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: #fff; transform: translateY(101%); border-radius: inherit;
  transition: transform .55s var(--ease);
}
.btn:hover { color: #0a0a0a !important; opacity: 1 !important; }
.btn:hover::before { transform: translateY(0); }
.btn-outline { border-color: rgba(255,255,255,.25) !important; color: #fff !important; }
.btn-outline::before { background: var(--o); }
.btn-outline:hover::before { transform: translateY(0); }
.btn-outline:hover { border-color: var(--o) !important; }

/* ── CARDS — borde de luz que sigue al ratón ── */
.card, .tier-card, .why-item, .news-card { --mx: 50%; --my: 50%; }
.card::after, .tier-card::after, .why-item::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .4s;
  background: radial-gradient(420px circle at var(--mx) var(--my), rgba(255,69,0,.14), transparent 45%);
}
.card, .tier-card, .why-item { position: relative; }
.card:hover::after, .tier-card:hover::after, .why-item:hover::after { opacity: 1; }

/* ── PAGE HERO (páginas internas) — más grande, zoom lento + líneas de velocidad ── */
.page-hero { height: 88vh !important; min-height: 560px !important; padding-bottom: 4.5rem !important; }
.page-hero h1 { font-size: clamp(4.2rem, 11vw, 12rem) !important; line-height: .84 !important; }
.page-hero h1 .m-c { display: inline-block; will-change: transform; }
.noticia-hero h1 .m-c, .pal-hero h1 .m-c { display: inline-block; }
.page-hero-label, .noticia-hero-content > :first-child:not(h1) {
  display: inline-flex !important; padding: .45rem 1rem .45rem .9rem; border-radius: 100px;
  border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.05);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.page-hero-img, .page-hero .hero-video, .page-hero > img, .page-hero > video { animation: heroZoom 1.8s var(--ease) backwards; will-change: transform; }
@keyframes heroZoom { from { transform: scale(1.18); filter: brightness(.4); } to { transform: scale(1); filter: none; } }
.page-hero::before {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: .5;
  background: repeating-linear-gradient(100deg, transparent 0 140px, rgba(255,69,0,.05) 140px 141px, transparent 141px 260px, rgba(255,255,255,.03) 260px 261px);
  background-size: 200% 100%;
  animation: speedLines 6s linear infinite;
}
@keyframes speedLines { from { background-position: 0 0; } to { background-position: -1200px 0; } }
.page-hero::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; z-index: 3;
  background: linear-gradient(90deg, transparent, var(--o), transparent);
  background-size: 50% 100%; background-repeat: no-repeat;
  animation: heroSweep 3.5s var(--ease-io) infinite;
}
@keyframes heroSweep { from { background-position: -50% 0; } to { background-position: 150% 0; } }
.page-hero h1 { animation: none; }

/* Indicador de scroll en heroes */
.m-scroll-hint {
  position: absolute; right: 2.5rem; bottom: 2.5rem; z-index: 4;
  display: flex; flex-direction: column; align-items: center; gap: .8rem;
  font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: .62rem; letter-spacing: .35em; text-transform: uppercase;
  color: rgba(255,255,255,.55); writing-mode: vertical-rl;
}
.m-scroll-hint::after {
  content: ''; width: 1px; height: 56px;
  background: linear-gradient(to bottom, var(--o), transparent);
  animation: scrollHint 1.8s var(--ease-io) infinite; transform-origin: top;
}
@keyframes scrollHint { 0% { transform: scaleY(0); opacity: 1; } 60% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(1); opacity: 0; } }
@media (max-width: 768px) { .m-scroll-hint { display: none; } }

@media (max-width: 768px) {
  .page-hero { height: 72vh !important; min-height: 440px !important; padding-bottom: 3rem !important; }
  .page-hero h1 { font-size: clamp(3rem, 14vw, 6rem) !important; }
}

/* ── COMPONENTES COMUNES — tarjetas redondeadas con cristal ── */
.card-grid { gap: 1rem !important; background: transparent !important; }
.card { border-radius: 20px; border: 1px solid rgba(255,255,255,.08); border-top: 1px solid rgba(255,255,255,.08) !important; overflow: hidden;
  background: linear-gradient(160deg, rgba(22,22,22,.85), rgba(10,10,10,.85)) !important; }
.card:hover { border-color: rgba(255,69,0,.45) !important; }
.stats-row { gap: 1rem; border: none !important; }
.stat-block { border: 1px solid rgba(255,255,255,.08) !important; border-radius: 20px; background: rgba(255,255,255,.03); }
.victory-big { border-radius: 20px; border: 1px solid rgba(255,255,255,.08); border-left: 3px solid var(--o) !important; margin-bottom: 1rem !important; }
.row-item { border-radius: 12px; padding-left: 1rem !important; padding-right: 1rem !important; }
.row-item:hover { padding-left: 1.6rem !important; }

/* ── TARJETAS DE PILOTO (Simracing, Karting, Racing, Vendrell) ── */
.drivers-grid { gap: 1rem !important; background: transparent !important; counter-reset: drv; }
.driver { counter-increment: drv; border-radius: 20px !important; overflow: hidden !important; border: 1px solid rgba(255,255,255,.08);
  background: linear-gradient(170deg, #151515, #0a0a0a) !important; transition: border-color .5s, box-shadow .5s !important; }
.driver:hover { border-color: rgba(255,69,0,.55); box-shadow: 0 30px 70px rgba(0,0,0,.6), 0 0 50px rgba(255,69,0,.18); }
.driver::before { content: counter(drv, decimal-leading-zero); position: absolute; top: .7rem; right: .9rem; z-index: 11;
  font-family: 'Sequel 100 Black', 'Barlow Condensed', sans-serif; font-weight: 900; font-size: .7rem; letter-spacing: .1em; color: rgba(255,255,255,.55);
  padding: .25rem .5rem; border-radius: 100px; background: rgba(0,0,0,.45); backdrop-filter: blur(6px); }
.driver-img { filter: grayscale(.35) contrast(1.05) !important; transition: filter .6s, transform 1s var(--ease) !important; }
.driver:hover .driver-img { filter: grayscale(.35) contrast(1.05) !important; transform: scale(1.08) !important; }
.driver:hover .driver-img.jakub { transform: translateX(-16%) scale(1.08) !important; }
.driver-img-wrap { background: radial-gradient(ellipse at 50% 80%, rgba(255,69,0,.22), transparent 65%), linear-gradient(160deg, #1b1b1b, #0b0b0b) !important; }
.driver-border { height: 3px !important; background: linear-gradient(90deg, var(--o), var(--o2), transparent) !important; transform-origin: left; transform: scaleX(.25); transition: transform .8s var(--ease); }
.driver:hover .driver-border { transform: scaleX(1); }
.driver-flag { border-radius: 4px !important; width: 28px !important; top: .75rem !important; left: .75rem !important; }
.driver-name { font-size: 1.3rem !important; transition: color .3s, letter-spacing .5s var(--ease) !important; }
.driver:hover .driver-name { color: var(--o) !important; letter-spacing: .09em !important; }

/* ── COMPETICIONES (ERC, SEL) ── */
/* Logo de la competición flotando en un halo que gira */
.logo-orb { position: relative; overflow: hidden; isolation: isolate; border-radius: 28px !important; min-height: 340px; }
.logo-orb::before { content: ''; position: absolute; inset: -50%; z-index: -1; background: conic-gradient(from 0deg, transparent 0 15%, #FF4500 25%, transparent 35% 60%, #0a8cff 72%, transparent 82%); animation: orbSpin 6s linear infinite; }
.logo-orb::after { content: ''; position: absolute; inset: 3px; z-index: -1; border-radius: 25px; background: radial-gradient(circle at 50% 50%, rgba(255,69,0,.12), transparent 60%), radial-gradient(circle at 50% 50%, #161616, #080808 75%); }
.logo-orb img { animation: orbFloat 5s ease-in-out infinite; filter: drop-shadow(0 20px 40px rgba(0,0,0,.6)); }
@keyframes orbSpin { to { transform: rotate(360deg); } }
@keyframes orbFloat { 0%,100% { transform: translateY(-8px); } 50% { transform: translateY(8px); } }

/* Fila piloto + coche */
.pilot-row { gap: 1rem !important; background: transparent !important; margin-top: 1rem !important; }
.pr-info, .pr-car { border-radius: 24px; border: 1px solid rgba(255,255,255,.08) !important; border-top: 1px solid rgba(255,255,255,.08) !important; transition: border-color .5s, box-shadow .5s; }
.pilot-row:hover .pr-info, .pilot-row:hover .pr-car { border-color: rgba(255,69,0,.45) !important; box-shadow: 0 30px 70px rgba(0,0,0,.5); }
.pr-car { background: radial-gradient(ellipse at 50% 90%, rgba(255,69,0,.18), transparent 60%), linear-gradient(170deg,#141414,#080808) !important; }
.pr-car img:first-child { background: transparent !important; transition: transform 1.2s var(--ease), filter .5s !important; }
.pilot-row:hover .pr-car img:first-child { transform: scale(1.07) translateX(-12px) !important; }
.pr-car-label, .driver-result-tag, .badge-result { border-radius: 100px !important; }
.pr-info .pr-img { transition: transform 1.2s var(--ease), filter .5s !important; }
.pilot-row:hover .pr-info .pr-img { transform: scale(1.08) !important; }

/* Tabla de rondas: cada fila es una tarjeta */
.rounds-table { border-collapse: separate !important; border-spacing: 0 .5rem; }
.rounds-table th { border-bottom: none !important; color: rgba(255,255,255,.45) !important; }
.rounds-table td { background: rgba(255,255,255,.03); border-bottom: none !important; border-top: 1px solid rgba(255,255,255,.06); border-bottom: 1px solid rgba(255,255,255,.06) !important; transition: background .4s, transform .6s var(--ease); }
.rounds-table td:first-child { border-radius: 14px 0 0 14px; border-left: 1px solid rgba(255,255,255,.06); }
.rounds-table td:last-child { border-radius: 0 14px 14px 0; border-right: 1px solid rgba(255,255,255,.06); }
.rounds-table tbody tr:hover td { background: rgba(255,69,0,.08) !important; }
.rounds-table tr.round-next td { background: rgba(255,69,0,.1) !important; border-color: rgba(255,69,0,.35) !important; }
.badge-active { animation: nextPulse 1.6s ease-in-out infinite; }
@keyframes nextPulse { 0%,100% { box-shadow: 0 0 0 0 rgba(255,69,0,.5); } 50% { box-shadow: 0 0 0 6px rgba(255,69,0,0); } }

/* Caja de cuenta atrás */
#countdown-box { border-radius: 24px !important; padding: 2rem 2.4rem !important; position: relative; overflow: hidden; isolation: isolate;
  background: radial-gradient(ellipse at 0% 50%, rgba(255,69,0,.2), transparent 55%), linear-gradient(165deg,#151515,#0a0a0a) !important; }
#countdown-box .cd-num { font-size: 3.4rem !important; text-shadow: 0 0 30px rgba(255,69,0,.45); }
#countdown-box .cd-unit { padding: .6rem .9rem; border-radius: 14px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); }

/* ── NOTICIAS (noticia-1, 2, 3) ── */
.noticia-hero { height: 80vh !important; min-height: 480px !important; }
.noticia-hero h1 { font-size: clamp(2.8rem, 7.5vw, 7rem) !important; line-height: .9 !important; }
.noticia-hero-content > div:first-child > span:first-child { border-radius: 100px !important; padding: .4rem 1rem !important; animation: nextPulse 2s ease-in-out infinite; }
.noticia-body h3 { font-size: 2.6rem !important; }
.noticia-body h3::after { height: 3px !important; border-radius: 3px; box-shadow: 0 0 12px var(--o); }
.noticia-body > p:first-of-type::first-letter { font-size: 7rem !important; text-shadow: 0 0 40px rgba(255,69,0,.5); }
.noticia-sidebar > * { border-radius: 22px !important; overflow: hidden; border: 1px solid rgba(255,255,255,.08) !important; transition: border-color .5s, box-shadow .5s; }
.noticia-sidebar > *:hover { border-color: rgba(255,69,0,.45) !important; box-shadow: 0 30px 70px rgba(0,0,0,.5); }
.noticia-foto img { transition: transform 1.4s var(--ease) !important; }
.noticia-foto:hover img { transform: scale(1.08) !important; }
.noticia-foto-caption { background: rgba(255,255,255,.03); }
.race-day-banner, .dnf-banner, .noticia-layout .podio-banner { border-radius: 24px !important; position: relative; overflow: hidden; isolation: isolate; }
.race-day-banner::before, .dnf-banner::before, .noticia-layout .podio-banner::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.18) 50%, transparent 70%); background-size: 250% 100%; animation: bannerShine 3.5s linear infinite; }
@keyframes bannerShine { from { background-position: 150% 0; } to { background-position: -150% 0; } }
.quote-block { border-radius: 24px !important; position: relative; overflow: hidden; background: radial-gradient(ellipse at 0% 0%, rgba(255,69,0,.16), transparent 60%), rgba(255,255,255,.03) !important; }

/* ── PIE DE PÁGINA NUEVO ── */
footer.m-foot { display: block !important; padding: 4.5rem 2.5rem 1.6rem !important; background: linear-gradient(180deg, #070707, #030303) !important; }
.mf-top { display: grid; grid-template-columns: 1.6fr repeat(4, 1fr); gap: 2.5rem; max-width: 1400px; margin: 0 auto; }
.mf-brand img { height: 40px; width: auto; transition: filter .4s; }
.mf-brand a:hover img { filter: drop-shadow(0 0 16px rgba(255,69,0,.6)); }
.mf-slogan { font-family: 'Sequel 100 Black', 'Barlow Condensed', sans-serif; font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; margin-top: 1.4rem; }
.mf-slogan em { font-style: normal; color: var(--o); }
.mf-txt { font-size: .88rem; line-height: 1.7; color: rgba(255,255,255,.5); margin-top: .8rem; max-width: 300px; }
.mf-social { display: flex; gap: .6rem; margin-top: 1.4rem; }
.mf-social a { width: 42px; height: 42px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff;
  border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.04); transition: color .3s, border-color .3s, background .3s, transform .5s var(--ease); }
.mf-social a:hover { color: var(--c); border-color: var(--c); background: rgba(255,255,255,.08); transform: translateY(-4px); }
.mf-social svg { width: 17px; height: 17px; }
.mf-col { display: flex; flex-direction: column; gap: .7rem; }
.mf-col h4 { font-family: 'Sequel 100 Black', 'Barlow Condensed', sans-serif; font-weight: 400; font-size: .62rem; letter-spacing: .16em; text-transform: uppercase; color: var(--o); margin-bottom: .5rem; }
.mf-col a { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 1rem; letter-spacing: .04em; text-transform: uppercase; color: rgba(255,255,255,.6);
  text-decoration: none; width: fit-content; position: relative; transition: color .3s, transform .4s var(--ease); }
.mf-col a::after { content: ''; position: absolute; left: 0; bottom: -2px; width: 100%; height: 1px; background: var(--o); transform: scaleX(0); transform-origin: left; transition: transform .4s var(--ease); }
.mf-col a:hover { color: #fff; transform: translateX(4px); }
.mf-col a:hover::after { transform: scaleX(1); }
.mf-col a[href^="mailto"], .mf-col a[href^="https"] { text-transform: none; font-size: .92rem; }
.mf-col a.mf-cta { color: var(--o); }
.mf-bottom { max-width: 1400px; margin: 3.5rem auto 0; padding-top: 1.4rem; border-top: 1px solid rgba(255,255,255,.07); display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap;
  font-size: .78rem; color: rgba(255,255,255,.35); }
.mf-top-btn { background: none; border: 1px solid rgba(255,255,255,.15); color: rgba(255,255,255,.7); border-radius: 100px; padding: .55rem 1.1rem; cursor: pointer;
  font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: .78rem; letter-spacing: .16em; text-transform: uppercase; transition: border-color .3s, color .3s; }
.mf-top-btn:hover { border-color: var(--o); color: #fff; }
@media (max-width: 1000px) { .mf-top { grid-template-columns: 1fr 1fr; } .mf-brand { grid-column: 1 / -1; } }
@media (max-width: 520px) { footer.m-foot { padding: 3.5rem 1.4rem 1.4rem !important; } .mf-top { grid-template-columns: 1fr 1fr; gap: 2rem 1.2rem; } }

/* ── BOTÓN FLOTANTE "VOLVER ARRIBA" ── */
#m-totop { position: fixed; right: 1.4rem; bottom: 1.4rem; z-index: 950; width: 52px; height: 52px; border-radius: 50%; border: none; padding: 0; cursor: pointer;
  background: rgba(10,10,10,.7); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); color: #fff; box-shadow: 0 10px 30px rgba(0,0,0,.45);
  opacity: 0; transform: translateY(20px) scale(.8); pointer-events: none; transition: opacity .4s, transform .5s var(--ease); }
#m-totop.show { opacity: 1; transform: none; pointer-events: auto; }
#m-totop svg { position: absolute; inset: 0; transform: rotate(-90deg); }
#m-totop circle { fill: none; stroke-width: 2.5; }
#m-totop .trk { stroke: rgba(255,255,255,.12); }
#m-totop .prg { stroke: var(--o); stroke-linecap: round; filter: drop-shadow(0 0 4px var(--o)); }
#m-totop span { position: relative; font-family: 'Barlow Condensed', sans-serif; font-weight: 900; font-size: 1.2rem; transition: transform .4s var(--ease); display: inline-block; }
#m-totop:hover span { transform: translateY(-3px); }

/* ── PALABRA GIGANTE DE FONDO EN LAS CABECERAS ── */
.m-ghost { position: absolute; left: 0; bottom: 14%; z-index: 1; display: flex; gap: 6vw; white-space: nowrap; pointer-events: none; user-select: none;
  animation: ghostDrift 40s linear infinite; }
.m-ghost span { font-family: 'Barlow Condensed', sans-serif; font-weight: 900; text-transform: uppercase; font-size: 26vw; line-height: .8; letter-spacing: -.02em;
  color: transparent; -webkit-text-stroke: 1.5px rgba(255,255,255,.11); }
@keyframes ghostDrift { to { translate: -50% 0; } }
.page-hero-content, .noticia-hero-content, .ac-hero-body, .pal-hero-content { position: relative; z-index: 2; }
@media (max-width: 768px) { .m-ghost span { font-size: 38vw; -webkit-text-stroke-width: 1px; } }

/* Separadores: línea que brilla y se mueve */
.divider { background: linear-gradient(90deg, transparent, rgba(255,255,255,.12) 30%, rgba(255,69,0,.6) 50%, rgba(255,255,255,.12) 70%, transparent) !important; background-size: 200% 100% !important; animation: divMove 6s linear infinite; }
@keyframes divMove { to { background-position: -200% 0; } }

/* Texto gigante antes del pie */
.big-foot { overflow: hidden; padding: 4rem 0 0; }
.big-foot div { font-family: 'Barlow Condensed', sans-serif; font-weight: 900; text-transform: uppercase; font-size: 36vw; line-height: .78; letter-spacing: -.03em; text-align: center; white-space: nowrap;
  background: linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,0) 85%); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ── TICKER más vivo ── */
.ticker { background: linear-gradient(90deg, var(--o), var(--o2), var(--o)) !important; background-size: 200% 100% !important; animation: tickerBg 6s linear infinite; }
@keyframes tickerBg { to { background-position: 200% 0; } }

/* ── FOOTER ── */
footer { position: relative; overflow: hidden; }
footer::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--o), transparent);
  background-size: 40% 100%; background-repeat: no-repeat;
  animation: heroSweep 5s var(--ease-io) infinite;
}


/* ── ESTILO CINEMATOGRÁFICO en las fotos de los pilotos (clase puesta por motion.js) ──
   Un poco más de contraste y un punto cálido, sin oscurecer. También al pasar el ratón por la tarjeta. */
img.cine-cut { filter: contrast(1.06) saturate(1.05) brightness(1.02) sepia(.06); }
.driver:hover img.cine-cut { filter: grayscale(.35) contrast(1.05) !important; }   /* igual que en reposo: al pasar el ratón no sube el contraste ni el naranja */

/* ── Las cabeceras de las páginas interiores suben hasta arriba y quedan detrás del menú flotante ── */
.page:has(> .page-hero:first-child) { padding-top: 0 !important; }
.page > .page-hero:first-child { padding-top: calc(var(--hero-top, 80px) + 16px); }
@media (max-width: 768px) { .page > .page-hero:first-child { --hero-top: 60px; } }

/* ══════════════════════════════════════════════════════════
   HERO DE TODAS LAS PÁGINAS — ocupa toda la pantalla
   ══════════════════════════════════════════════════════════ */
.page-hero, .pal-hero, .ac-hero { height: 100vh !important; min-height: 640px !important; }
@media (max-width: 768px) {
  .page-hero, .pal-hero, .ac-hero { height: 88vh !important; min-height: 520px !important; }
}

/* ══════════════════════════════════════════════════════════
   SISTEMA TIPOGRÁFICO Y ACCESIBILIDAD
   · Ningún texto de la web baja de ~10 px (antes había etiquetas de 7 px)
   · Foco visible al navegar con teclado
   · (sin reducción de movimiento: la web está pensada con animaciones)
   ══════════════════════════════════════════════════════════ */
/* Placas y chips (letra Sequel, muy ancha): mínimo ~10 px */
.nw-tag, .rc-badge, .rc-meta span, .psc-meta span, .psc-row-tag, .camp-status-txt, .pr-lbl, .nav-sponsors span,
.camp-tags span, .ev2-badge, .ev2-badge > span, .hz-date, .hz-date > span { font-size: .64rem !important; }
/* Etiquetas, fechas y botones pequeños */
.nw-date, .hz-st, .camp-go, .ev2-go, .team-card-label, .champ-stat-label, .ac-path-badge, .psc-fact small, .psc-step small, .psc-car-info small, .psc-round-s, .psc-done { font-size: .68rem !important; }
/* Kickers y etiquetas de sección */
.hx-eyebrow, .hx-results-head, .win-kicker, .win-crew, .sx-kicker, .cd-label, .ss-label, .page-hero-label, .m-scroll-hint, .section-label, .rh-n, .champ-season,
.pal-badge, .pal-kicker, .hito-date, .feat-meta, .ac-hero-label, .ac-stat-l, .erc-live-kicker, .podio-label, .podio-meta, .stat-label, .champ-badge, .tm-num,
.champ-label, .badge-result, .result-class, .mf-col h4, .hx-powered small { font-size: .72rem !important; }
.dropdown-menu li a { font-size: .68rem !important; }

/* Un solo juego de letras: Orbitron se sustituye por Sequel (la del resto de etiquetas) */
.intro-count, .nw-date, .win-kicker, .tm-num, .hito-date { font-family: 'Sequel 100 Black', 'Barlow Condensed', sans-serif !important; }

/* Foco visible (teclado) */
:focus-visible { outline: 2px solid var(--o); outline-offset: 3px; }
a:focus:not(:focus-visible), button:focus:not(:focus-visible) { outline: none; }

/* Botón de acción del menú */
.nav-links .nav-cta a { padding: .62rem 1.15rem !important; background: var(--o); color: #000 !important; transform: skewX(-12deg); transition: background .3s, transform .4s cubic-bezier(.16,1,.3,1); }
.nav-links .nav-cta a:hover { background: #fff; transform: skewX(-12deg) translateY(-2px); }
.nav-links .nav-cta a::after { display: none !important; }

/* La etiqueta de título de la tarjeta de piloto va bajo la bandera, para no tapar el dorsal */
.driver.rc .rc-badge { top: 2.9rem !important; left: .9rem !important; max-width: 62%; line-height: 1.35; }
@media (max-width: 768px) { .driver.rc .rc-badge { top: 2.5rem !important; left: .6rem !important; } }

/* ══════════════════════════════════════════════════════════
   HEROES COHERENTES — mismo tratamiento de color y de sombras en todas las páginas
   (antes cada foto tenía su propio tono: azul y clara en Karting, naranja y oscura en Equipo…)
   ══════════════════════════════════════════════════════════ */
.page-hero > img, .page-hero > video, .page-hero .hero-video, .page-hero .page-hero-img, .page-hero .page-hero-img img, .pal-hero > img, .pal-hero > video, .ac-hero > video, .ac-hero > img {
  filter: saturate(.92) contrast(1.06) brightness(.88);
}
.page-hero::before {
  opacity: 1 !important; animation: none !important;
  background:
    linear-gradient(0deg, rgba(7,7,7,.94) 0%, rgba(7,7,7,.4) 36%, transparent 62%),
    linear-gradient(90deg, rgba(7,7,7,.62) 0%, rgba(7,7,7,.2) 46%, transparent 72%),
    linear-gradient(rgba(255,69,0,.07), rgba(255,69,0,.07)) !important;   /* un velo cálido de la marca */
}

/* ══════════════════════════════════════════════════════════
   MÓVIL — zonas táctiles de al menos 36 px y botón del menú
   ══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* botón "Únete" del menú: limpio, a todo el ancho y sin inclinar */
  .nav-links .nav-cta { margin-top: 1.4rem; }
  .nav-links .nav-cta a, .nav-links .nav-cta a:hover { display: block !important; text-align: center; transform: none !important; padding: 1.1rem 1.4rem !important; font-size: .95rem !important; letter-spacing: .18em !important; }
  /* iconos de Instagram de las fichas y otros botones pequeños */
  .driver-info a, .pr-ig { min-width: 36px; min-height: 36px; display: inline-flex; align-items: center; justify-content: center; }
  .driver.rc .rc-ig { width: 36px !important; height: 36px !important; right: .5rem !important; bottom: .6rem !important; }
  /* puntos del carrusel de Academy: se ven pequeños pero se pulsan bien */
  #ac-carousel-dots button { position: relative; }
  #ac-carousel-dots button::after { content: ''; position: absolute; inset: -14px -6px; }
  /* enlaces de texto sueltos */
  .psc-src a, .f-links a { display: inline-block; padding: .55rem 0; }
}
@media (max-width: 768px) {
  /* cualquier enlace a Instagram/TikTok suelto: zona táctil cómoda */
  a[href*="instagram.com"]:not(.rc-ig), a[href*="tiktok.com"]:not(.rc-ig) { min-height: 36px; min-width: 36px; display: inline-flex; align-items: center; justify-content: center; }
}