/* Esportes na Onda 80 anos - Radio Caxias. Cores e fonte do manual de marca 80 anos (Gotham -> Montserrat). */
:root{--am:#FFDD00;--esc:#000C14;--esc2:#0a1824;--esc3:#132636;--br:#fff;--cin:#9fb0bf;--raio:14px}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:70px}
body{margin:0;background:var(--esc);color:var(--br);font-family:Montserrat,Arial,sans-serif;font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:var(--am)}
img{max-width:100%;display:block}
h2{font-size:clamp(30px,5vw,52px);line-height:1.05;font-weight:900;margin:.1em 0 .5em;letter-spacing:-.02em}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.caixa{max-width:1180px;margin:0 auto;padding:0 22px}
.selo-txt{display:inline-block;color:var(--esc);background:var(--am);font-weight:800;text-transform:uppercase;letter-spacing:.12em;font-size:12px;padding:5px 12px;border-radius:20px 20px 20px 4px;margin:0}
.btn{display:inline-flex;align-items:center;gap:8px;font:800 15px Montserrat,sans-serif;text-transform:uppercase;letter-spacing:.05em;padding:15px 26px;border-radius:40px;text-decoration:none;cursor:pointer;border:2px solid var(--am);transition:transform .2s,background .2s,color .2s}
.btn:hover{transform:translateY(-2px)}
.btn-amarelo{background:var(--am);color:var(--esc)}
.btn-linha{background:transparent;color:var(--br);border-color:#ffffff66}
.btn-linha:hover{border-color:var(--am);color:var(--am)}

/* topo */
.topo{position:fixed;inset:0 0 auto;z-index:50;display:flex;align-items:center;gap:24px;padding:10px 22px;transition:background .3s,box-shadow .3s}
.topo.rolou{background:#000c14ee;backdrop-filter:blur(8px);box-shadow:0 2px 20px #0008}
.topo-marca .logo-radio{height:38px;width:auto}
.topo-menu{display:flex;gap:22px;margin-left:auto}
.topo-menu a{color:var(--br);text-decoration:none;font-weight:600;font-size:14px;text-transform:uppercase;letter-spacing:.08em;opacity:.85}
.topo-menu a:hover{color:var(--am);opacity:1}
.aovivo-btn{display:flex;align-items:center;gap:8px;background:#ffffff14;color:var(--br);border:1px solid #ffffff33;border-radius:30px;padding:8px 16px;font:700 13px Montserrat,sans-serif;text-transform:uppercase;letter-spacing:.06em;cursor:pointer}
.aovivo-btn:hover{border-color:var(--am)}
.aovivo-ponto{width:9px;height:9px;border-radius:50%;background:#ff3b3b;box-shadow:0 0 0 0 #ff3b3b;animation:pulsa 1.6s infinite}
@keyframes pulsa{70%{box-shadow:0 0 0 9px #ff3b3b00}100%{box-shadow:0 0 0 0 #ff3b3b00}}

/* hero */
.hero{position:relative;display:grid;place-items:center;overflow:hidden;padding:120px 22px 64px;isolation:isolate}
.hero-fundo{position:absolute;inset:0;z-index:-2;background:url(/img/hero-fundo.webp) center 30%/cover;opacity:.32;will-change:transform;backface-visibility:hidden;transform:translateZ(0);animation:zoom 30s ease-in-out infinite alternate}
.hero::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(ellipse at 50% 40%,#000c1499,var(--esc) 75%),linear-gradient(180deg,#000c14 0,#000c1400 30%,#000c1400 70%,var(--esc))}
@keyframes zoom{from{transform:translateZ(0) scale(1)}to{transform:translateZ(0) scale(1.06)}}
.hero-ondas{position:absolute;left:0;right:0;bottom:-30px;width:100%;height:120px;z-index:-1;opacity:.18}
.hero-ondas path{fill:none;stroke:var(--am);stroke-width:3;stroke-dasharray:1600;stroke-dashoffset:1600;animation:desenha 3s .6s ease-out forwards}
@keyframes desenha{to{stroke-dashoffset:0}}
.hero-conteudo{text-align:center;max-width:900px;width:100%}
.hero-selo .selo-80{width:clamp(90px,13vw,140px);height:auto;margin:0 auto 18px;opacity:0;animation:surge .9s .1s cubic-bezier(.2,.8,.2,1.2) forwards}
.hero-logo{margin:0}
.logo-en{width:min(100%,780px);height:auto;margin:0 auto;overflow:visible;filter:drop-shadow(0 6px 30px #0009)}
.logo-en .letra{opacity:0;animation:letra .7s cubic-bezier(.2,.8,.2,1) forwards}
.logo-en .letra:nth-of-type(1){animation-delay:.25s}.logo-en .letra:nth-of-type(2){animation-delay:.3s}.logo-en .letra:nth-of-type(3){animation-delay:.35s}
.logo-en .letra:nth-of-type(4){animation-delay:.4s}.logo-en .letra:nth-of-type(5){animation-delay:.45s}.logo-en .letra:nth-of-type(6){animation-delay:.5s}
.logo-en .letra:nth-of-type(7){animation-delay:.55s}.logo-en .letra:nth-of-type(8){animation-delay:.6s}.logo-en .letra:nth-of-type(9){animation-delay:.65s}
.logo-en .letra:nth-of-type(10){animation-delay:.7s}.logo-en .letra:nth-of-type(11){animation-delay:.75s}.logo-en .letra:nth-of-type(12){animation-delay:.8s}
.logo-en .letra:nth-of-type(13){animation-delay:.85s}.logo-en .letra:nth-of-type(14){animation-delay:.9s}
.logo-en .onda{filter:drop-shadow(0 0 6px #ffdd0080)}
@keyframes letra{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes surge{from{opacity:0;transform:scale(.6) rotate(-8deg)}to{opacity:1;transform:none}}
.hero-anos{display:flex;align-items:center;justify-content:center;gap:16px;font-weight:900;font-size:clamp(22px,3.4vw,34px);letter-spacing:.04em;margin:26px 0 6px;opacity:0;animation:letra .8s 1.4s forwards}
.hero-anos i{display:block;width:70px;height:3px;background:var(--am);border-radius:3px}
.hero-frase{font-size:clamp(17px,2.2vw,21px);font-weight:300;color:#dfe7ee;max-width:620px;margin:0 auto 30px;opacity:0;animation:letra .8s 1.6s forwards}
.hero-acoes{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;opacity:0;animation:letra .8s 1.8s forwards}
.hero-desce{position:absolute;bottom:16px;left:50%;width:22px;height:22px;margin-left:-11px;border-right:3px solid var(--am);border-bottom:3px solid var(--am);transform:rotate(45deg);opacity:.8;animation:desce 2s ease-in-out infinite}
.hero-desce:hover{opacity:1}
@keyframes desce{0%,100%{transform:translateY(0) rotate(45deg);opacity:.35}50%{transform:translateY(10px) rotate(45deg);opacity:.9}}
@media(max-width:860px){.hero-desce{display:none}.hero{padding-bottom:50px}}

/* historia */
.historia{padding:16px 0 80px;background:var(--esc)}
.historia-cols{display:grid;grid-template-columns:1fr 1fr;gap:40px;color:#dbe3ea}
.historia-cols p{margin:0}
.numeros{list-style:none;padding:0;margin:56px 0 0;display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.numeros li{background:var(--esc2);border:1px solid #ffffff12;border-radius:var(--raio);padding:22px;text-align:center}
.numeros b{display:block;font-size:44px;font-weight:900;color:var(--am);line-height:1.1}
.numeros span{font-size:13px;text-transform:uppercase;letter-spacing:.08em;color:var(--cin)}

/* acervo */
.acervo{padding:90px 0 70px;background:linear-gradient(180deg,var(--esc),var(--esc2))}
.intro{color:var(--cin);max-width:720px}
.era{margin:56px 0 0}
.era-cab{max-width:1180px;margin:0 auto 18px;padding:0 22px;display:flex;align-items:baseline;gap:18px;flex-wrap:wrap}
.era-num{font-weight:900;font-size:15px;color:var(--esc);background:var(--am);border-radius:6px;padding:2px 9px}
.era-cab h3{font-size:clamp(22px,3vw,30px);margin:0;font-weight:800}
.era-cab p{flex-basis:100%;margin:2px 0 0;color:var(--cin);font-size:15px}
.trilho{--recuo:22px;display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding:6px 22px 18px var(--recuo);scroll-padding-left:var(--recuo);scrollbar-width:thin;scrollbar-color:var(--am) transparent}
.trilho::-webkit-scrollbar{height:6px}.trilho::-webkit-scrollbar-thumb{background:var(--am);border-radius:3px}
@media(min-width:1224px){.trilho{--recuo:calc((100vw - 1180px)/2 + 22px)}}
.foto{flex:0 0 auto;height:280px;scroll-snap-align:start;position:relative;border-radius:10px;overflow:hidden;cursor:zoom-in;background:var(--esc3);border:0;padding:0}
.foto img{height:100%;width:auto;object-fit:cover;transition:transform .5s,filter .5s;filter:saturate(.9)}
.foto:hover img,.foto:focus-visible img{transform:scale(1.05);filter:none}
.foto:focus-visible{outline:3px solid var(--am)}
.foto figcaption{position:absolute;inset:auto 0 0;padding:26px 12px 10px;font-size:12px;line-height:1.35;text-align:left;background:linear-gradient(transparent,#000c14e6);color:#fff}
.revelar{opacity:0;transform:translateY(24px);transition:opacity .8s,transform .8s}
.revelar.visto{opacity:1;transform:none}

/* audios */
.audios{padding:100px 0;background:var(--am);color:var(--esc)}
.audios .selo-txt{background:var(--esc);color:var(--am)}
.audios a:not(.btn){color:var(--esc)}
.audios .btn-amarelo{background:var(--esc);color:var(--am);border-color:var(--esc)}
.audios-grade{display:grid;grid-template-columns:1.2fr 1fr;gap:50px;align-items:center}
.player-card{background:var(--esc);color:var(--br);border-radius:22px;padding:34px;text-align:center;box-shadow:0 20px 50px #000c1455}
.player-titulo{font-size:26px;font-weight:900;margin:14px 0 0}.player-titulo span{color:var(--am)}
.player-sub{color:var(--cin);font-size:14px;margin:4px 0 22px}
.player-card .btn-amarelo{background:var(--am);color:var(--esc);border-color:var(--am)}
.eq{display:flex;gap:5px;justify-content:center;align-items:flex-end;height:46px}
.eq i{width:7px;border-radius:4px;background:var(--am);height:20%;animation:eq 1s ease-in-out infinite alternate;animation-play-state:paused}
.tocando .eq i{animation-play-state:running}
.eq i:nth-child(2){animation-delay:-.3s}.eq i:nth-child(3){animation-delay:-.6s}.eq i:nth-child(4){animation-delay:-.15s}.eq i:nth-child(5){animation-delay:-.75s}.eq i:nth-child(6){animation-delay:-.45s}.eq i:nth-child(7){animation-delay:-.9s}
@keyframes eq{0%{height:15%}100%{height:100%}}

/* participe */
.participe{padding:100px 0 80px}
.participe-grade{display:grid;grid-template-columns:1fr 1.15fr;gap:56px;align-items:start}
.participe-txt p{color:#dbe3ea}
.whats-card{display:flex;align-items:center;gap:14px;margin-top:26px;padding:16px 20px;border-radius:var(--raio);background:#25d36614;border:1px solid #25d36655;color:var(--br);text-decoration:none;max-width:360px}
.whats-card:hover{background:#25d36626}
.whats-card svg{width:40px;height:40px;fill:#25d366;flex:none}
.whats-card b{display:block;font-size:13px;text-transform:uppercase;letter-spacing:.08em;color:#25d366}
.whats-card span{font-size:20px;font-weight:800}
.form{background:var(--esc2);border:1px solid #ffffff14;border-radius:22px;padding:30px;display:grid;gap:16px}
.form label{display:grid;gap:6px;font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--cin)}
.form input,.form textarea{font:400 16px Montserrat,sans-serif;color:var(--br);background:var(--esc);border:1px solid #ffffff26;border-radius:10px;padding:13px 14px;width:100%}
.form input:focus,.form textarea:focus{outline:none;border-color:var(--am);box-shadow:0 0 0 3px #ffdd0033}
.form-2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.form .chk{display:flex;gap:10px;align-items:flex-start;text-transform:none;letter-spacing:0;font-weight:400;font-size:13px;line-height:1.45}
.form .chk input{width:18px;height:18px;flex:none;margin-top:1px;accent-color:var(--am)}
.form .hp{position:absolute;left:-9999px}
.form button{justify-self:start}
.form-msg{margin:0;font-weight:600;min-height:1.2em}
.form-msg.ok{color:#5be08a}.form-msg.erro{color:#ff8a8a}
.mural-tit{font-size:24px;font-weight:800;margin:70px 0 20px}
.mural{columns:3 280px;column-gap:16px}
.recado{break-inside:avoid;margin:0 0 16px;background:var(--esc2);border:1px solid #ffffff12;border-left:4px solid var(--am);border-radius:12px;padding:18px 20px}
.recado p{margin:0 0 10px;color:#e6edf3;font-size:15px;white-space:pre-line}
.recado cite{font-style:normal;font-weight:700;font-size:13px;color:var(--am)}
.mural-vazio{color:var(--cin)}

/* rodape */
.rodape{background:#00070d;padding:46px 0 90px;color:var(--cin);font-size:14px;border-top:3px solid var(--am)}
.rodape-grade{display:grid;grid-template-columns:auto 1fr;gap:30px;align-items:center}
.rodape .logo-radio{height:64px;width:auto}
.rodape a{color:var(--br)}
.rodape-mini{grid-column:1/-1;margin:0;font-size:12px;opacity:.7}

/* whats flutuante, mini player, lightbox */
.whats-flutua{position:fixed;right:20px;bottom:20px;z-index:60;width:60px;height:60px;border-radius:50%;background:#25d366;display:grid;place-items:center;box-shadow:0 6px 24px #0007;transition:transform .2s}
.whats-flutua:hover{transform:scale(1.08)}
.whats-flutua svg{width:34px;height:34px;fill:#fff}
.mini-player{position:fixed;left:20px;bottom:20px;z-index:60;display:flex;align-items:center;gap:12px;background:var(--esc2);border:1px solid var(--am);border-radius:40px;padding:8px 8px 8px 18px;font-size:14px;box-shadow:0 6px 24px #0008}
.mini-player[hidden]{display:none}
.mini-player b{color:var(--am)}
.mini-player button{width:36px;height:36px;border-radius:50%;border:0;background:var(--am);color:var(--esc);font-weight:900;cursor:pointer}
.eq-mini{height:18px;gap:3px}.eq-mini i{width:4px}
.lightbox{position:fixed;inset:0;z-index:100;background:#000c14f5;display:grid;grid-template-columns:70px 1fr 70px;align-items:center}
.lightbox[hidden]{display:none}
.lightbox figure{margin:0;display:grid;place-items:center;height:100vh;padding:40px 0}
.lightbox img{max-height:calc(100vh - 130px);max-width:100%;object-fit:contain;border-radius:6px}
.lightbox figcaption{color:#dbe3ea;margin-top:12px;font-size:15px;text-align:center}
.lightbox button{background:none;border:0;color:#fff;font-size:54px;cursor:pointer;opacity:.75}
.lightbox button:hover{opacity:1;color:var(--am)}
.lb-fechar{position:absolute;top:10px;right:18px;font-size:44px!important}

@media(max-width:860px){
  body{font-size:16px}
  .topo-menu{display:none}
  .aovivo-btn{margin-left:auto}
  .historia-cols,.audios-grade,.participe-grade{grid-template-columns:1fr;gap:26px}
  .numeros{grid-template-columns:repeat(2,1fr)}
  .foto{height:210px}
  .form-2{grid-template-columns:1fr}
  .form{padding:22px}
  .rodape-grade{grid-template-columns:1fr}
  .lightbox{grid-template-columns:44px 1fr 44px}
  .mini-player{left:12px;bottom:14px;font-size:13px}
  .whats-flutua{right:14px;bottom:14px;width:54px;height:54px}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-delay:0s!important;transition:none!important}.revelar{opacity:1;transform:none}}