/* CMWR V3.0 · shared · 01-hero */
/* Cidade + Web Rádio — V5.0 | Sessão 01 — Hero */

.hero {
  z-index: 1;
  background: #090a0b;
}

.hero__art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: auto;
  aspect-ratio: 1891 / 832;
  object-fit: contain;
  object-position: center top;
  user-select: none;
  -webkit-user-drag: none;
}

.tuner-menu {
  position: absolute;
  z-index: 10;
  left: 20.36%;
  top: 1.65%;
  width: 59.48%;
  height: 10.30%;
}

.tuner-menu__glass {
  position: absolute;
  inset: 8px;
  border-radius: 2px;
  background: linear-gradient(180deg, #0b0e10 0%, #07090a 58%, #050708 100%);
  box-shadow: inset 0 0 24px rgba(0,0,0,.88),
    inset 0 1px 0 rgba(255,255,255,.022);
  pointer-events: none;
}

.tuner-menu__nav {
  position: absolute;
  z-index: 3;
  inset: 12px 19px 21px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  align-items: center;
}

.tuner-link {
  display: grid;
  place-items: center;
  height: 100%;
  color: #ead9bc;
  font-family: "Arial Narrow", Arial, sans-serif;
  font-size: clamp(9px, .70vw, 13px);
  font-weight: 800;
  letter-spacing: .055em;
  text-transform: uppercase;
  text-decoration: none;
  text-shadow: 0 1px 2px #000;
  transition: color .2s ease, text-shadow .2s ease;
}

.tuner-link:hover,
.tuner-link:focus-visible,
.tuner-link.is-active {
  color: #ff6045;
  text-shadow: 0 0 9px rgba(239,79,53,.42);
  outline: none;
}

.tuner-menu__scale {
  position: absolute;
  z-index: 2;
  left: 2.2%;
  right: 2.2%;
  bottom: 10px;
  height: 12px;
  background: repeating-linear-gradient(
      90deg,
      transparent 0 19px,
      rgba(198,145,75,.42) 19px 20px,
      transparent 20px 39px
    );
  opacity: .78;
  pointer-events: none;
}

.tuner-menu__needle {
  --slot: 0;
  position: absolute;
  z-index: 4;
  bottom: 7px;
  left: calc((100% / 5) * var(--slot) + (100% / 10) - 31px);
  width: 62px;
  height: 3px;
  border-radius: 9px;
  background: #ef4f35;
  box-shadow: 0 0 7px rgba(239,79,53,.68),
    0 0 18px rgba(239,79,53,.22);
  transition: left .48s cubic-bezier(.16,.82,.22,1);
}

.status-panel {
  position: absolute;
  z-index: 10;
  left: 81.86%;
  top: 1.90%;
  width: 11.27%;
  height: 9.85%;
  overflow: hidden;
}

.status-panel__surface {
  position: absolute;
  inset: 8px;
  border-radius: 2px;
  background: radial-gradient(circle at 50% 50%, rgba(96,35,20,.13), transparent 70%),
    linear-gradient(180deg, #22120e 0%, #140b09 64%, #0c0807 100%);
  box-shadow: inset 0 0 17px rgba(0,0,0,.78),
    inset 0 1px rgba(255,184,109,.045);
}

.status-marquee {
  position: absolute;
  z-index: 2;
  inset: 11px 10px 6px;
  overflow: hidden;
  display: flex;
  align-items: center;
  -webkit-mask-image: linear-gradient(
    90deg, transparent 0, #000 7%, #000 93%, transparent 100%
  );
  mask-image: linear-gradient(
    90deg, transparent 0, #000 7%, #000 93%, transparent 100%
  );
}

.status-marquee__track {
  display: flex;
  flex: none;
  width: max-content;
  white-space: nowrap;
  animation: status-marquee-scroll 17s linear infinite;
  will-change: transform;
}

.status-marquee__group {
  flex: none;
  padding-right: 2em;
  color: #efb06f;
  font-family: "Arial Narrow", Arial, sans-serif;
  font-size: clamp(8px, .66vw, 12px);
  font-weight: 800;
  letter-spacing: .07em;
  line-height: 1;
  text-shadow: 0 0 3px rgba(239,176,111,.45),
    0 0 8px rgba(210,76,42,.12);
}

.status-marquee__group b {
  margin-inline: .58em;
  color: #dc6747;
  text-shadow: 0 0 5px rgba(220,103,71,.34);
}

@keyframes status-marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.brand-wall {
  position: absolute;
  z-index: 7;
  left: 62.30%;
  top: 12.30%;
  width: 35.15%;
  height: 70.10%;
  pointer-events: none;
}

.brand-wall__logo {
  position: absolute;
  left: 0;
  top: 3.2%;
  width: 100%;
  height: 35.5%;
  object-fit: contain;
  object-position: center center;
  transform: scale(1.13);
  transform-origin: center center;
  filter: drop-shadow(0 9px 18px rgba(0,0,0,.48))
    drop-shadow(0 0 8px rgba(213,146,74,.10));
  user-select: none;
  -webkit-user-drag: none;
}

.brand-copy {
  position: absolute;
  left: 8%;
  top: 39.5%;
  width: 84%;
  text-align: left;
}

.brand-copy__eyebrow {
  display: block;
  margin-bottom: clamp(9px, .85vw, 15px);
  color: #cfa36e;
  font-family: "Bahnschrift Condensed", "Arial Narrow", Arial, sans-serif;
  font-size: clamp(8px, .60vw, 12px);
  font-weight: 600;
  letter-spacing: .20em;
  text-transform: uppercase;
  opacity: .88;
}

.neon-sign {
  position: relative;
  display: inline-block;
  margin-bottom: clamp(12px, 1vw, 18px);
}

.neon-sign::before {
  content: "";
  position: absolute;
  inset: 18% -2% 4%;
  border-radius: 14px;
  background: rgba(228,105,42,.045);
  filter: blur(12px);
}

.neon-sign span {
  position: relative;
  display: inline-block;
  color: #f6d7ad;
  font-family: "Bahnschrift Condensed", "Arial Narrow", Arial, sans-serif;
  font-size: clamp(17px, 1.65vw, 31px);
  font-weight: 500;
  line-height: 1;
  letter-spacing: .085em;
  white-space: nowrap;
  -webkit-text-stroke: .55px rgba(255,244,226,.70);
  text-shadow: 0 0 1px rgba(255,255,255,.88),
    0 0 3px rgba(255,224,181,.78),
    0 0 6px rgba(244,166,93,.55),
    0 0 11px rgba(217,104,44,.28);
}

.brand-copy__body {
  margin: 0;
  color: rgba(236,228,216,.82);
  font-family: "Bahnschrift Condensed", "Arial Narrow", Arial, sans-serif;
  font-size: clamp(10px, .78vw, 15px);
  font-weight: 400;
  line-height: 1.48;
  letter-spacing: .025em;
  text-shadow: 0 1px 3px rgba(0,0,0,.42);
}

.brand-copy__closing {
  margin: 0;
  font-family: "Bahnschrift Condensed", "Arial Narrow", Arial, sans-serif;
  font-size: clamp(10px, .78vw, 15px);
  font-weight: 400;
  line-height: 1.48;
  letter-spacing: .025em;
  text-shadow: 0 1px 3px rgba(0,0,0,.42);
  color: rgba(227,212,190,.74);
}

.brand-copy__program {
  display: inline-block;
  margin: clamp(12px, 1vw, 19px) 0 clamp(9px, .7vw, 13px);
  color: #d4a86f;
  font-family: "Bahnschrift Condensed", "Arial Narrow", Arial, sans-serif;
  font-size: clamp(12px, 1.02vw, 19px);
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.hero-meter {
  position: absolute;
  left: 7.5%;
  right: 7.5%;
  bottom: 0.6%;
  height: 19.5%;
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 2.0%;
  padding: 0;
  background: transparent;
}

.hero-meter i {
  --cut: 55%;
  position: relative;
  display: block;
  width: 5.3%;
  height: 100%;
  opacity: .88;
  background: linear-gradient(
      to top,
      #2a6f94 0%,
      #3d9fba 38%,
      #61b7c0 54%,
      #c79352 72%,
      #d16d45 84%,
      #c94b3d 100%
    );
  -webkit-mask: repeating-linear-gradient(
      to top,
      #000 0 5px,
      transparent 5px 9px
    ),
    linear-gradient(
      to bottom,
      transparent 0 var(--cut),
      #000 var(--cut) 100%
    );
  -webkit-mask-composite: source-in;
  mask: repeating-linear-gradient(
      to top,
      #000 0 5px,
      transparent 5px 9px
    ),
    linear-gradient(
      to bottom,
      transparent 0 var(--cut),
      #000 var(--cut) 100%
    );
  mask-composite: intersect;
  filter: drop-shadow(0 0 3px rgba(68,152,184,.18))
    drop-shadow(0 0 5px rgba(201,75,61,.08));
  transition: --cut .12s linear;
}

.scroll-cue {
  position: absolute;
  z-index: 8;
  left: 50%;
  bottom: 18px;
  width: 30px;
  height: 45px;
  translate: -50% 0;
  border: 1px solid rgba(235,205,160,.18);
  border-radius: 18px;
  opacity: .50;
}

.scroll-cue span {
  position: absolute;
  top: 9px;
  left: 50%;
  width: 4px;
  height: 8px;
  translate: -50% 0;
  border-radius: 5px;
  background: #e6c18e;
  animation: scrollCue 1.7s ease-in-out infinite;
}

@keyframes scrollCue {
  0%   { transform: translateY(0); opacity: .25; }
  50%  { opacity: 1; }
  100% { transform: translateY(16px); opacity: 0; }
}

@media (prefers-reduced-motion: no-preference){
.neon-sign span {
  animation: neon-breathe 7s ease-in-out infinite;
}
@keyframes neon-breathe {
    0%, 100% { opacity: .92; }
    50%      { opacity: 1; }
  }
}

@media (prefers-reduced-motion: reduce){
.scroll-cue span {
  animation: none !important;
}
.tuner-menu__needle {
  transition: none;
}
}

/* Cidade + Web Rádio — V1.0-mobile | TESTE 02 — HERO
   Desktop permanece intacto. Abaixo de 900px entra a direção de arte portátil. */

.hero__art--mobile,
.mobile-tuner { display:none; }

.hero-weather{position:absolute;z-index:12;right:9%;bottom:20%;color:#fff2cf;text-decoration:none;font:700 clamp(11px,1vw,16px)/1.15 Arial,sans-serif;text-shadow:0 2px 6px #000;display:flex;align-items:baseline;gap:8px}

.hero-weather span{font-size:.68em;letter-spacing:.12em}

.hero-weather strong{font-size:1.4em}

.hero-news{position:absolute;z-index:12;left:7.5%;right:7.5%;bottom:21.5%;padding:7px 11px;display:flex;gap:14px;align-items:center;border:1px solid #d8a76577;background:#130d0bcc;box-shadow:0 4px 12px #0009;color:#ffdb9b;font:700 clamp(10px,.9vw,14px)/1.25 Arial,sans-serif}

.hero-news__label{white-space:nowrap;letter-spacing:.11em}

.hero-news a{color:#fff5da;text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.hero-news a:hover{text-decoration:underline}

.hero .hero-news a { display:block;flex:1;min-width:0;overflow:hidden;white-space:nowrap; }

.hero .hero-news #hero-news-title { display:inline-block;white-space:nowrap;animation:hero-headline 12s linear infinite; }

@keyframes hero-headline { from { transform:translateX(100%); } to { transform:translateX(-100%); } }

@media(prefers-reduced-motion:reduce){
.hero .hero-news #hero-news-title { animation:none; }
}

/* Letreiro pertence à seção inteira, não à parede estreita da marca. */
.hero .hero-news{
  position:absolute;z-index:30;left:0;right:0;top:auto;bottom:0;
  width:100%;height:44px;box-sizing:border-box;margin:0;padding:0 14px;
  display:flex;align-items:center;gap:13px;border:0;border-top:1px solid #c994557a;
  border-radius:0;background:linear-gradient(180deg,#17100de8,#080b0df5);
  box-shadow:0 -5px 18px #0008;color:#ffc989;
}

.hero .hero-news__label{font:900 clamp(10px,.85vw,13px)/1 Arial,sans-serif;letter-spacing:.12em;white-space:nowrap}

.hero .hero-news__viewport{display:block;flex:1;min-width:0;overflow:hidden;white-space:nowrap;-webkit-mask-image:linear-gradient(90deg,transparent,#000 2%,#000 98%,transparent);mask-image:linear-gradient(90deg,transparent,#000 2%,#000 98%,transparent)}

.hero .hero-news__track{display:flex;width:max-content;animation:cmwr-ticker 60s linear infinite;will-change:transform}

.hero .hero-news__set{display:flex;align-items:center;flex:none;white-space:nowrap}

.hero .hero-news__set a{flex:none;overflow:visible;color:#fff0d1;text-decoration:none;font:700 clamp(11px,.92vw,15px)/1.2 Arial,sans-serif}

.hero .hero-news__set a:hover,.hero .hero-news__set a:focus-visible{text-decoration:underline}

.hero .hero-news__separator{padding:0 20px;color:#cf8655}

@keyframes cmwr-ticker{to{transform:translateX(-50%)}}

@keyframes cmwr-rain{to{background-position:0 137px,0 173px,0 280px}}

/* Correções 16: visibilidade do QR, clima no desktop, mobile sem letreiro superior. */
.hero .hero-news__track{animation-play-state:running!important}

/* Retoques de lançamento: relógio legível e clima dentro da janela. */
.brand-wall .hero-weather{pointer-events:auto}

.brand-wall .hero-clock{
  position:absolute;right:9%;bottom:27%;display:block;
  color:#f9dca9;font:800 clamp(12px,1.05vw,17px)/1 Arial,sans-serif;
  letter-spacing:.10em;text-shadow:0 2px 5px #000,0 0 8px #000;
}

.brand-wall .hero-weather-license:not([hidden]){
  position:absolute;right:9%;bottom:16%;display:block;pointer-events:auto;
  color:#f9dca9;font:700 9px/1.1 Arial,sans-serif;text-shadow:0 1px 3px #000;
}

@keyframes cmwr-rain-visible{to{background-position:0 230px,0 153px,0 191px}}

.hero .hero-weather-stage{
  position:absolute;left:0;top:0;width:100%;aspect-ratio:1891 / 832;
  z-index:2;pointer-events:none;overflow:hidden;
}

.hero .weather-glass{position:absolute;overflow:hidden;transition:background-color .7s ease,filter .7s ease;}

.hero .weather-glass--side{
  left:4.55%;top:12.75%;width:12.65%;height:60.65%;
  clip-path:polygon(0 0,100% 5.8%,100% 100%,0 99%);
}

.hero .weather-glass--main{
  left:19.1%;top:15.5%;width:33.35%;height:59.2%;
  clip-path:polygon(0 0,100% 12%,100% 99%,0 100%);
}

.hero.hero--night .weather-glass{background:linear-gradient(180deg,rgba(5,12,37,.29),rgba(0,5,19,.43))}

.hero.hero--sun .weather-glass{background:radial-gradient(ellipse at 65% 8%,rgba(255,198,98,.16),transparent 55%)}

.hero.hero--hot .weather-glass{background-color:rgba(248,116,31,.09)}

.hero.hero--rain .weather-glass{background-color:rgba(30,50,65,.13)}

.hero.hero--cold .weather-glass{box-shadow:inset 0 0 28px 9px rgba(229,244,247,.13)}

.hero .weather-glass > span{position:absolute;inset:0;display:block;pointer-events:none;opacity:0}

/* Pequenas lentes repetidas distorcem o fundo como gotas sobre o vidro. */
.hero.hero--rain .weather-glass__drops{
  opacity:.72;backdrop-filter:blur(2.8px) brightness(1.12);
  -webkit-backdrop-filter:blur(2.8px) brightness(1.12);
  -webkit-mask-image:radial-gradient(ellipse 3px 8px at 18px 27px,#000 45%,transparent 78%),radial-gradient(ellipse 2px 6px at 72px 93px,#000 40%,transparent 78%);
  mask-image:radial-gradient(ellipse 3px 8px at 18px 27px,#000 45%,transparent 78%),radial-gradient(ellipse 2px 6px at 72px 93px,#000 40%,transparent 78%);
  -webkit-mask-size:103px 149px,137px 191px;mask-size:103px 149px,137px 191px;
  background:radial-gradient(ellipse 3px 8px at 18px 27px,#eefaff90 12%,transparent 78%),radial-gradient(ellipse 2px 6px at 72px 93px,#dceaf785 10%,transparent 78%);
  background-size:103px 149px,137px 191px;
}

.hero.hero--rain .weather-glass__streaks{
  opacity:.64;background:repeating-linear-gradient(103deg,transparent 0 31px,#d8e8ef55 32px 33px,transparent 34px 81px);
  background-size:211px 291px;animation:cmwr-glass-rain 2.4s linear infinite;
}

.hero.hero--cold .weather-glass__frost{
  opacity:.6;background:radial-gradient(ellipse at 0 90%,rgba(234,247,251,.43),transparent 38%),radial-gradient(ellipse at 100% 98%,rgba(216,240,247,.36),transparent 42%);
  filter:blur(9px)
}

@keyframes cmwr-glass-rain{to{background-position:0 291px}}

@media(prefers-reduced-motion:reduce){
.hero.hero--rain .weather-glass__streaks{animation:none}
}