/* Rede Brasil Repórter — layout "rádio web" (navy + verde + amarelo) */
:root{
  --navy-900:#00071a;--navy-800:#00102b;--navy-700:#062051;--navy-600:#0d3a86;
  --green:#1aa84a;--green-bright:#2ecc4a;--yellow:#f5c518;--yellow-soft:#ffd94a;
  --paper:#eef4f0;--muted:#9fb4cf;--line:rgba(255,255,255,.16);
  --cond:"Barlow Condensed",system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{min-height:100%;overflow-x:hidden;background:var(--navy-900);-webkit-text-size-adjust:100%}
body{
  min-height:100dvh;position:relative;overflow-x:hidden;
  font-family:"Barlow",system-ui,sans-serif;color:#fff;
  background:
    radial-gradient(ellipse 90% 55% at 50% 40%,rgba(20,64,150,.55),transparent 70%),
    radial-gradient(ellipse 70% 40% at 50% 100%,rgba(26,168,74,.12),transparent 70%),
    linear-gradient(180deg,#00102b 0%,#021438 45%,#00081f 100%);
  padding:max(26px,env(safe-area-inset-top)) 18px max(30px,env(safe-area-inset-bottom));
}
.sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- fundo decorativo ---------- */
.bg{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.bg__mic{position:absolute;left:min(0px,calc(50vw - 460px));top:-2vh;height:min(70vh,660px);width:auto;opacity:.6}
.bg__map{position:absolute;right:max(-30px,calc(50vw - 440px));top:3vh;width:min(26vw,250px);opacity:.09}

/* ---------- coluna central ---------- */
.page{position:relative;z-index:1;width:min(620px,100%);margin:0 auto;display:flex;flex-direction:column;align-items:center;text-align:center}

/* ---------- logo + assinatura ---------- */
.hero{width:100%}
.hero__logo{margin:0}
.hero__logo img{display:block;width:min(88%,470px);height:auto;margin:0 auto}
.hero__tagline{position:relative;margin-top:16px;display:flex;align-items:center;justify-content:center;gap:16px}
.hero__tagline span{font-style:italic;font-weight:800;font-size:clamp(20px,5.2vw,30px);line-height:1.16;letter-spacing:-.01em;text-shadow:0 2px 10px rgba(0,0,0,.45)}
.hero__tagline:before,.hero__tagline:after{content:"";width:clamp(22px,7vw,58px);height:4px;border-radius:3px;flex:none}
.hero__tagline:before{background:var(--green-bright)}
.hero__tagline:after{background:var(--yellow)}

/* ---------- bloco ao vivo ---------- */
.live{width:100%;margin-top:clamp(18px,4vw,30px)}
.live__badge{display:inline-flex;align-items:center;gap:8px;padding:5px 13px;border-radius:999px;border:1px solid rgba(46,204,74,.45);background:rgba(26,168,74,.14);font:700 11px/1 "Barlow",sans-serif;letter-spacing:.18em;text-transform:uppercase;color:#bdf3cb}
.live__dot{width:7px;height:7px;border-radius:50%;background:var(--green-bright);flex:none}
.is-playing .live__dot{animation:pulse 1.6s ease-out infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(46,204,74,.7)}70%{box-shadow:0 0 0 9px rgba(46,204,74,0)}100%{box-shadow:0 0 0 0 rgba(46,204,74,0)}}

.live__stage{display:flex;align-items:center;justify-content:center;gap:clamp(6px,2vw,16px);margin-top:clamp(10px,2.5vw,18px)}

/* botão play */
.play{
  position:relative;flex:none;width:clamp(158px,44vw,224px);aspect-ratio:1;border:0;padding:0;cursor:pointer;
  border-radius:50%;background:conic-gradient(from 215deg,#1aa84a 0deg,#e9f1ec 78deg,#f5c518 168deg,#ffe98a 232deg,#8fd6a4 300deg,#1aa84a 360deg);
  box-shadow:0 0 42px rgba(26,168,74,.35),0 0 68px rgba(245,197,24,.22),0 18px 44px rgba(0,0,0,.45);
  transition:transform .2s ease
}
.play:hover{transform:scale(1.035)}
.play:active{transform:scale(.975)}
.play__ring{position:absolute;inset:5px;border-radius:50%;background:linear-gradient(180deg,#fff 0%,#e6ede9 55%,#c8d5ce 100%)}
.play__disc{position:absolute;inset:clamp(16px,4.4vw,23px);border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 50% 32%,#1152b8 0%,#0a3a8e 42%,#06265e 75%,#041a44 100%);box-shadow:inset 0 3px 14px rgba(255,255,255,.22),inset 0 -8px 20px rgba(0,0,0,.5)}
.play svg{width:38%;height:38%;fill:#fff;filter:drop-shadow(0 3px 6px rgba(0,0,0,.35));margin-left:6%}
.ico-pause{margin-left:0!important}
.is-playing .ico-play{display:none}
.page:not(.is-playing) .ico-pause{display:none}
.play:focus-visible,.cta:focus-visible,.vol-btn:focus-visible,.social__item:focus-visible{outline:3px solid var(--yellow);outline-offset:4px}

/* ondas sonoras pontilhadas */
.wave{display:flex;align-items:center;gap:clamp(4px,1.3vw,7px);height:clamp(90px,26vw,150px);flex:1;min-width:0;overflow:hidden}
.wave--left{justify-content:flex-end;color:var(--green-bright)}
.wave--right{justify-content:flex-start;color:var(--yellow)}
.wave i{
  display:block;width:clamp(3px,1vw,5px);flex:none;border-radius:2px;
  background-image:radial-gradient(circle,currentColor 42%,transparent 46%);
  background-size:100% clamp(6px,1.6vw,8px);
  transform-origin:center;transition:height .35s ease
}
.wave i:nth-child(1){height:22%}.wave i:nth-child(2){height:46%}.wave i:nth-child(3){height:30%}
.wave i:nth-child(4){height:68%}.wave i:nth-child(5){height:40%}.wave i:nth-child(6){height:88%}
.wave i:nth-child(7){height:54%}.wave i:nth-child(8){height:100%}.wave i:nth-child(9){height:62%}
.wave i:nth-child(10){height:34%}
.wave--left i:nth-child(1){height:34%}.wave--left i:nth-child(2){height:62%}.wave--left i:nth-child(3){height:100%}
.wave--left i:nth-child(4){height:54%}.wave--left i:nth-child(5){height:88%}.wave--left i:nth-child(6){height:40%}
.wave--left i:nth-child(7){height:68%}.wave--left i:nth-child(8){height:30%}.wave--left i:nth-child(9){height:46%}
.wave--left i:nth-child(10){height:22%}
.is-playing .wave i{animation:bounce 1.1s ease-in-out infinite alternate}
.is-playing .wave i:nth-child(2n){animation-duration:.82s}
.is-playing .wave i:nth-child(3n){animation-duration:1.35s}
.is-playing .wave i:nth-child(4n){animation-delay:-.4s}
.is-playing .wave i:nth-child(5n){animation-delay:-.7s}
@keyframes bounce{from{transform:scaleY(.42)}to{transform:scaleY(1)}}

/* chamada / status */
.cta{
  display:inline-block;margin-top:clamp(14px,3vw,22px);padding:13px clamp(20px,5vw,36px);cursor:pointer;
  border:2px solid var(--green);border-radius:999px;background:rgba(0,26,64,.55);color:#fff;
  font-family:var(--cond);font-size:clamp(17px,4.4vw,25px);font-weight:700;letter-spacing:.05em;text-transform:uppercase;line-height:1;
  box-shadow:0 8px 26px rgba(0,0,0,.35);transition:background .2s ease,border-color .2s ease,transform .18s ease
}
.cta:hover{background:rgba(26,168,74,.22);border-color:var(--green-bright)}
.cta:active{transform:translateY(1px)}
.cta__label b{color:var(--yellow);font-weight:700}
.is-playing .cta{border-color:var(--yellow)}

/* volume */
.volume{display:flex;align-items:center;justify-content:center;gap:11px;margin-top:clamp(14px,3vw,20px)}
.vol-btn{width:36px;height:36px;flex:none;display:grid;place-items:center;border:1px solid var(--line);border-radius:50%;color:#dbe7f5;background:rgba(255,255,255,.07);cursor:pointer;transition:background .2s ease}
.vol-btn:hover{background:rgba(255,255,255,.14)}
.vol-btn svg{width:19px;height:19px;fill:currentColor}
.is-muted .ico-vol{display:none}
.page:not(.is-muted) .ico-muted{display:none}
.vol-range{appearance:none;-webkit-appearance:none;width:min(190px,46vw);height:5px;border-radius:10px;cursor:pointer;background:linear-gradient(90deg,var(--yellow) var(--vol,80%),rgba(255,255,255,.2) var(--vol,80%))}
.vol-range::-webkit-slider-thumb{-webkit-appearance:none;width:15px;height:15px;border-radius:50%;background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.5)}
.vol-range::-moz-range-thumb{width:15px;height:15px;border:0;border-radius:50%;background:#fff}

/* ---------- pilares ---------- */
.pillars{list-style:none;width:100%;margin-top:clamp(26px,6vw,42px);padding-top:clamp(18px,4vw,26px);border-top:1px solid var(--line);display:grid;grid-template-columns:repeat(4,1fr)}
.pillars li{display:flex;flex-direction:column;align-items:center;gap:12px;padding:2px clamp(4px,1.4vw,12px);border-left:1px solid var(--line)}
.pillars li:first-child{border-left:0}
.pillars .ico{width:clamp(30px,7.5vw,40px);height:clamp(30px,7.5vw,40px);fill:currentColor}
.ico--yellow{color:var(--yellow)}
.ico--green{color:var(--green-bright)}
.pillars span{font-size:clamp(10px,2.5vw,12.5px);font-weight:600;line-height:1.32;letter-spacing:.07em;text-transform:uppercase;color:#e7eef8}

/* ---------- rodapé ---------- */
.foot{position:relative;width:100%;margin-top:clamp(30px,7vw,48px);padding-top:clamp(22px,5vw,34px)}
.foot__band{position:relative;padding:clamp(6px,2vw,12px) 0 clamp(62px,15vw,92px)}
.foot__swoosh{position:absolute;left:50%;bottom:-6px;transform:translateX(-50%);width:210vw;max-width:none;height:clamp(94px,22vw,132px);z-index:-1;pointer-events:none}
.values{font-family:var(--cond);font-size:clamp(14px,3.7vw,20px);font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#fff}
.values i{font-style:normal;color:var(--green-bright);margin:0 .35em}
.domain{display:inline-block;margin-top:10px;font-family:var(--cond);font-size:clamp(19px,5vw,30px);font-weight:800;letter-spacing:.005em;color:var(--yellow);text-decoration:none;text-shadow:0 2px 10px rgba(0,0,0,.5)}
.domain:hover{color:var(--yellow-soft);text-decoration:underline}

.social{display:flex;align-items:flex-start;justify-content:center;gap:0;margin-top:clamp(26px,6vw,40px)}
.social__item{display:flex;flex-direction:column;align-items:center;gap:11px;flex:1;max-width:150px;padding:0 clamp(6px,3vw,20px);border:0;border-left:1px solid var(--line);background:none;color:#fff;font:600 clamp(11px,2.8vw,13px)/1 "Barlow",sans-serif;letter-spacing:.09em;text-transform:uppercase;text-decoration:none;cursor:pointer}
.social__item:first-child{border-left:0}
.social__ico{width:clamp(52px,14vw,66px);height:clamp(52px,14vw,66px);display:grid;place-items:center;border-radius:50%;color:#fff;box-shadow:0 10px 24px rgba(0,0,0,.4);transition:transform .18s ease,filter .18s ease}
.social__item:hover .social__ico{transform:translateY(-3px);filter:brightness(1.08)}
.social__ico svg{width:54%;height:54%;fill:currentColor}
.social__item--wa .social__ico{background:linear-gradient(160deg,#3ddc63,#12a63e)}
.social__item--ig .social__ico{background:radial-gradient(circle at 28% 100%,#fdd23f 0%,#f8683a 26%,#e0257c 52%,#a02fbb 74%,#5c53e0 100%)}
.social__item--sh .social__ico{background:linear-gradient(160deg,#3a86ff,#1256d6)}
.social__label{display:block}

/* ---------- responsivo ---------- */
@media(max-width:560px){
  .bg__mic{opacity:.34;height:min(52vh,470px);left:-46px}
  .bg__map{opacity:.07;width:38vw}
  .hero__tagline{gap:10px}
  .pillars{grid-template-columns:repeat(2,1fr);gap:22px 0}
  .pillars li:nth-child(odd){border-left:0}
  .foot__swoosh{width:280vw}
}
@media(max-width:360px){
  .cta{padding-inline:16px}
  .social__item{padding-inline:6px;letter-spacing:.05em}
}
@media(min-width:900px){
  body{padding-top:44px}
  .bg__mic{opacity:.72}
}
@media(prefers-reduced-motion:reduce){
  *,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}