@import url('public-motion.css');
@import url('public-totw.css');

:root{
 --motion-fast:180ms;
 --motion-normal:550ms;
 --motion-slow:850ms;
 --motion-ease:cubic-bezier(.22,1,.36,1);
 --hero-duration:9000ms;
}

/* Legibilidad pública: ningún dato útil depende de texto microscópico. */
.nav nav{font-size:12px}
.hero-v3-copy>p{font-size:14px;line-height:1.7;color:#b9cbe0}
.hero-v3-eyebrow b,.scene-heading b,.hero-v3-meta span,.visual-selector small{font-size:10px}
.scene-heading>small,.free-player p,.league-lines p,.hero-v3-footer>div b{font-size:10px}
.free-player>small,.scene-match-footer small,.league-visual span{font-size:10px}
.hero-v3-footer>div span,.hero-v3-footer>p,.hero-v3-footer>a{font-size:9px}
.section-heading .tag,.compact-heading p,.table-legend,.updated{font-size:11px}
.player-filters label>span,.fixture-toolbar label>span{font-size:10px}
.player-filters input,.player-filters select,.fixture-toolbar input,.fixture-toolbar select{font-size:13px}
.participant-card p,.participant-card small,.compact-match small{font-size:11px}

.visual-selector button{transition:border-color var(--motion-fast) ease,background var(--motion-fast) ease,color var(--motion-fast) ease,transform var(--motion-fast) ease}
.visual-selector button:hover,.visual-selector button:focus-visible{border-color:var(--gold);transform:translateY(-2px);outline:none}
.visual-scene{transition-duration:var(--motion-normal)}

@media(max-width:700px){
 body.public-menu-open{overflow:hidden}
 .nav{z-index:40}
 .nav nav{top:66px;max-height:calc(100dvh - 66px);overflow:auto;padding:15px 6vw 24px;box-shadow:0 24px 50px rgba(0,0,0,.5)}
 .nav nav a{min-height:48px;display:flex;align-items:center;padding:0 4px;border-bottom:1px solid rgba(255,255,255,.08);font-size:14px}
 .nav nav a.is-active{color:#fff;padding-left:13px;background:linear-gradient(90deg,rgba(255,201,74,.1),transparent)}
 .nav nav .nav-registration{justify-content:center;margin-top:10px;border:1px solid var(--gold);background:var(--gold);color:#07101e}
 .hero-v3-copy>p{font-size:14px;line-height:1.65}
 .hero-v3-meta span,.scene-heading b,.visual-selector small{font-size:10px}
 .hero-v3-footer>div b{font-size:9px}
 .visual-selector button{min-width:48px;min-height:44px}
}

@media(prefers-reduced-motion:reduce){
 .visual-selector button{transition:none}
}