/* =========================================================
   Bom Dia — estilos
   Uma família tipográfica (Sora), texto branco sobre um céu
   que muda com a hora e com o tempo. Poucos painéis, muito ar.
   ========================================================= */

@font-face {
  font-family: "Sora";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("../fonts/sora-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Orbitron";
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url("../fonts/orbitron-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Sora";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("../fonts/sora-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --font: "Sora", "Segoe UI Variable Display", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-display: "Orbitron", "Sora", "Segoe UI", system-ui, sans-serif;

  --neon-pink: #ff2bd6;
  --neon-cyan: #2ef2ff;
  --neon-glow-cyan: 0 0 22px rgba(46, 242, 255, .45), 0 0 2px rgba(255, 255, 255, .6);
  --neon-glow-pink: 0 0 22px rgba(255, 43, 214, .45), 0 0 2px rgba(255, 255, 255, .6);

  --ink: #ffffff;
  --ink-2: rgba(255, 255, 255, .80);
  --ink-3: rgba(255, 255, 255, .60);
  --ink-4: rgba(255, 255, 255, .42);

  --glass: rgba(10, 6, 34, .38);
  --glass-strong: rgba(10, 6, 34, .55);
  --glass-light: rgba(255, 255, 255, .07);
  --glass-border: rgba(255, 120, 235, .22);
  --blur: 26px;

  --radius: 26px;
  --radius-s: 16px;
  --gap: clamp(1rem, 1.6vw, 1.8rem);
  --text-shadow: 0 1px 2px rgba(0, 0, 25, .22);

  --ease: cubic-bezier(.22, .61, .36, 1);
  --bar-h: 6.8rem; /* altura da faixa inferior: dica de filme (esq.) e rádio (dir.) */
}

html {
  /* Escala principalmente pela altura da janela, para a página inteira caber sem rolagem:
     ~18px em 1920×1080, ~13px em 1366×768, 11px em navegadores de TV com viewport pequeno */
  font-size: clamp(10px, 0.4vw + 0.95vh, 21px);
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--font);
  color: var(--ink);
  background: #07031a;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

h1, h2, p, ul, dl, dd, dt { margin: 0; }
ul { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid rgba(255, 255, 255, .85); outline-offset: 3px; border-radius: 6px; }
::selection { background: rgba(255, 255, 255, .25); }

/* =========================================================
   CÉU — fundo dinâmico
   ========================================================= */

/* antes do primeiro quadro, nada anima de posição: a cena já nasce no lugar */
body:not(.ready) #sky * { transition: none !important; }

#sky {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  background: #07031a;
  pointer-events: none;
}

.sky-layer {
  position: absolute;
  inset: 0;
  transition: opacity 3s var(--ease);
  background: linear-gradient(180deg, var(--s1) 0%, var(--s2) 46%, var(--s3) 78%, var(--s4) 100%);
}

/* Paletas de cena */
.scene-dawn      { --s1: #0b0626; --s2: #3a1160; --s3: #b0257a; --s4: #ff6a3d; }
.scene-morning   { --s1: #0a1a4a; --s2: #153c9a; --s3: #1f7bd0; --s4: #37a7d8; }
.scene-afternoon { --s1: #14104a; --s2: #3a2c9e; --s3: #8a3fb8; --s4: #e0619a; }
.scene-sunset    { --s1: #120636; --s2: #4b1478; --s3: #c0248a; --s4: #ff7a3a; }
.scene-night     { --s1: #04020e; --s2: #0d0530; --s3: #1c0b4a; --s4: #2a1060; }

/* Posição e presença do sol por cena (variáveis lidas no body) */
body { --horizon: 68%; } /* altura da linha do horizonte */
body.scene-dawn      { --sun-x: 50%; --sun-y: var(--horizon); --sun-o: 1; --sun-size: 40vmin; --sun-clip: 50%; --cloud: rgba(255, 170, 220, .26); --grid: 255, 90, 200;  --grid-o: .38; }
body.scene-morning   { --sun-x: 50%; --sun-y: calc(var(--horizon) - 19vmin); --sun-o: .95; --sun-size: 36vmin; --cloud: rgba(200, 235, 255, .30); --grid: 46, 242, 255;  --grid-o: .28; }
body.scene-afternoon { --sun-x: 50%; --sun-y: calc(var(--horizon) - 19vmin); --sun-o: .95; --sun-size: 36vmin; --cloud: rgba(255, 210, 240, .30); --grid: 255, 120, 220; --grid-o: .32; }
body.scene-sunset    { --sun-x: 50%; --sun-y: var(--horizon); --sun-o: 1; --sun-size: 44vmin; --sun-clip: 50%; --cloud: rgba(255, 160, 210, .26); --grid: 255, 43, 214;  --grid-o: .4; }
body.scene-night     { --sun-x: 50%; --sun-y: 130%; --sun-o: 0;   --sun-size: 36vmin; --cloud: rgba(140, 110, 200, .24); --grid: 170, 60, 255;  --grid-o: .38; }

.sky-sun {
  position: absolute;
  left: var(--sun-x, 50%);
  top: var(--sun-y, 50%);
  width: var(--sun-size, 36vmin);
  height: var(--sun-size, 36vmin);
  border-radius: 50%;
  opacity: var(--sun-o, 0);
  transform: translate(-50%, -50%);
  /* halo */
  box-shadow:
    0 0 6vmin 2vmin rgba(255, 140, 90, .28),
    0 0 18vmin 8vmin rgba(255, 43, 214, .16),
    0 0 40vmin 20vmin rgba(255, 90, 160, .08);
  transition: opacity 3s var(--ease), left 3s var(--ease), top 3s var(--ease), width 3s var(--ease), height 3s var(--ease);
  animation: sun-breathe 10s ease-in-out infinite;
  will-change: transform;
}
/* disco listrado: as faixas ficam mais largas perto da base, como nos posteres dos anos 80 */
.sky-sun::before, .sky-sun::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  clip-path: inset(0 0 var(--sun-clip, 0) 0); /* no nascer/pôr do sol, a metade de baixo some atrás do horizonte */
}
/* contorno: fio claro na borda do disco + anel fino de brilho por fora */
.sky-sun::before {
  inset: -2px;
  box-shadow:
    inset 0 0 0 3px rgba(255, 252, 235, .98),   /* fio claro na borda */
    inset 0 0 0 4px rgba(120, 20, 90, .45),     /* linha escura fina, separa o disco do céu */
    inset 0 0 22px rgba(255, 255, 255, .28),
    0 0 0 1.5px rgba(255, 200, 245, .55),       /* anel externo */
    0 0 16px 3px rgba(255, 120, 220, .45);
  z-index: 1;
}
.sky-sun::after {
  background: linear-gradient(180deg, #fff7b8 0%, #ffd23a 32%, #ff7f26 62%, #ff1e9c 100%);
  -webkit-mask-image: linear-gradient(180deg,
    #000 0 52%, transparent 52% 54%,
    #000 54% 61%, transparent 61% 64%,
    #000 64% 71%, transparent 71% 75%,
    #000 75% 81%, transparent 81% 86%,
    #000 86% 91%, transparent 91% 100%);
          mask-image: linear-gradient(180deg,
    #000 0 52%, transparent 52% 54%,
    #000 54% 61%, transparent 61% 64%,
    #000 64% 71%, transparent 71% 75%,
    #000 75% 81%, transparent 81% 86%,
    #000 86% 91%, transparent 91% 100%);
}
.sky-sun::before {
  -webkit-mask-image: linear-gradient(180deg,
    #000 0 52%, transparent 52% 54%,
    #000 54% 61%, transparent 61% 64%,
    #000 64% 71%, transparent 71% 75%,
    #000 75% 81%, transparent 81% 86%,
    #000 86% 91%, transparent 91% 100%);
          mask-image: linear-gradient(180deg,
    #000 0 52%, transparent 52% 54%,
    #000 54% 61%, transparent 61% 64%,
    #000 64% 71%, transparent 71% 75%,
    #000 75% 81%, transparent 81% 86%,
    #000 86% 91%, transparent 91% 100%);
}
/* No horizonte só a metade de cima aparece: as faixas ficam logo acima da linha */
body.scene-sunset .sky-sun::before, body.scene-dawn .sky-sun::before,
body.scene-sunset .sky-sun::after, body.scene-dawn .sky-sun::after {
  -webkit-mask-image: linear-gradient(180deg,
    #000 0 26%, transparent 26% 27.5%,
    #000 27.5% 33%, transparent 33% 35%,
    #000 35% 39.5%, transparent 39.5% 42%,
    #000 42% 45.5%, transparent 45.5% 48.5%,
    #000 48.5% 50%, transparent 50% 100%);
          mask-image: linear-gradient(180deg,
    #000 0 26%, transparent 26% 27.5%,
    #000 27.5% 33%, transparent 33% 35%,
    #000 35% 39.5%, transparent 39.5% 42%,
    #000 42% 45.5%, transparent 45.5% 48.5%,
    #000 48.5% 50%, transparent 50% 100%);
}
body.scene-morning .sky-sun::after, body.scene-afternoon .sky-sun::after {
  background: linear-gradient(180deg, #ffffff 0%, #ffe8a0 35%, #ff9a5c 70%, #ff4fc0 100%);
}
body.wx-rain .sky-sun, body.wx-storm .sky-sun, body.wx-fog .sky-sun { opacity: calc(var(--sun-o, 0) * .22); }
body.wx-cloudy .sky-sun { opacity: calc(var(--sun-o, 0) * .5); }

@keyframes sun-breathe {
  0%, 100% { transform: translate(-50%, -50%) scale(1); }
  50%      { transform: translate(-50%, -50%) scale(1.045); }
}

/* Horizonte: linha neon + grade em perspectiva que desliza em direcao ao observador */
.sky-horizon {
  position: absolute;
  left: 0; right: 0;
  top: var(--horizon, 68%);
  height: calc(100% - var(--horizon, 68%));
  overflow: hidden;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, .95), rgba(0, 0, 0, .55) 45%, transparent 100%);
          mask-image: linear-gradient(180deg, rgba(0, 0, 0, .95), rgba(0, 0, 0, .55) 45%, transparent 100%);
  opacity: var(--grid-o, .4);
  transition: opacity 3s var(--ease);
}
.sky-horizon::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, rgba(var(--grid), .9) 30%, rgba(var(--grid), .9) 70%, transparent 100%);
  box-shadow: 0 0 14px 2px rgba(var(--grid), .55);
  z-index: 1;
}
.sky-horizon i {
  position: absolute;
  left: -60%; right: -60%;
  top: 0; bottom: -30%;
  transform-origin: 50% 0;
  transform: perspective(38vh) rotateX(70deg);
  background-image:
    linear-gradient(rgba(var(--grid), .55) 2px, transparent 2px),
    linear-gradient(90deg, rgba(var(--grid), .45) 2px, transparent 2px);
  background-size: 9vh 9vh;
  animation: grid-move 3.2s linear infinite;
  will-change: background-position;
}
@keyframes grid-move { from { background-position: 0 0, 0 0; } to { background-position: 0 9vh, 0 0; } }

/* Scanlines bem leves, toque de monitor CRT */
.sky-scan {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(180deg, rgba(0, 0, 0, .18) 0 1px, transparent 1px 4px);
  opacity: .25;
  mix-blend-mode: multiply;
}

.sky-moon {
  position: absolute;
  left: 40%;
  top: 13%;
  width: 8.5vmin;
  height: 8.5vmin;
  border-radius: 50%;
  opacity: 0;
  transform: translate(-50%, -50%);
  /* o halo acompanha a fração iluminada (--moon-k, definido pelo JS) */
  box-shadow:
    0 0 40px 14px rgba(200, 160, 255, calc(.06 + .18 * var(--moon-k, 1))),
    0 0 130px 60px rgba(170, 100, 255, calc(.03 + .08 * var(--moon-k, 1)));
  transition: opacity 3s var(--ease);
}
.sky-moon svg { display: block; width: 100%; height: 100%; overflow: visible; }
body.scene-night .sky-moon { opacity: .96; }
.sky-moon-label {
  position: absolute;
  left: 40%;
  top: calc(13% + 5.6vmin);
  transform: translateX(-50%);
  font-size: .72rem;
  letter-spacing: .02em;
  color: rgba(220, 205, 255, .6);
  white-space: nowrap;
  opacity: 0;
  transition: opacity 3s var(--ease);
}
body.scene-night .sky-moon-label { opacity: 1; }
body.scene-night.wx-cloudy .sky-moon-label, body.scene-night.wx-rain .sky-moon-label,
body.scene-night.wx-storm .sky-moon-label, body.scene-night.wx-fog .sky-moon-label { opacity: .4; }
body.scene-night.wx-cloudy .sky-moon, body.scene-night.wx-rain .sky-moon,
body.scene-night.wx-storm .sky-moon, body.scene-night.wx-fog .sky-moon { opacity: .3; }

.sky-stars {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 3s var(--ease);
}
.sky-stars i {
  position: absolute;
  top: 0; left: 0;
  width: 2px; height: 2px;
  border-radius: 50%;
  background: transparent;
  animation: twinkle 5s ease-in-out infinite;
}
.sky-stars i:nth-child(2) { animation-delay: -2.5s; animation-duration: 7s; }
body.scene-night .sky-stars { opacity: 1; }
body.scene-dawn .sky-stars { opacity: .35; }
body.wx-cloudy .sky-stars { opacity: .25; }
body.wx-rain .sky-stars, body.wx-storm .sky-stars, body.wx-fog .sky-stars { opacity: 0; }
@keyframes twinkle { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }

.sky-clouds {
  position: absolute;
  inset: 0;
  opacity: .3;
  transition: opacity 3s var(--ease);
  --cloud-top: rgba(255, 255, 255, .20);
  --cloud-bottom: rgba(36, 10, 72, .55);
  --cloud-line: rgba(var(--grid, 255, 120, 220), .55);
}
.cloud-stop-top { stop-color: var(--cloud-top, rgba(255, 255, 255, .2)); }
.cloud-stop-bottom { stop-color: var(--cloud-bottom, rgba(36, 10, 72, .55)); }
.cloud {
  position: absolute;
  height: auto;
  overflow: visible;
  animation: drift linear infinite;
  will-change: transform;
  filter: drop-shadow(0 0 10px rgba(var(--grid, 255, 120, 220), .22));
}
.cloud path {
  fill: url(#cloud-fill);
  stroke: var(--cloud-line);
  stroke-width: 1.6;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  transition: stroke 3s var(--ease);
}
.cloud:nth-child(1) { top: 5%;  width: 30vw; animation-duration: 170s; animation-delay: -40s; }
.cloud:nth-child(2) { top: 19%; width: 20vw; animation-duration: 220s; animation-delay: -150s; }
.cloud:nth-child(3) { top: 33%; width: 36vw; animation-duration: 260s; animation-delay: -95s; }
.cloud:nth-child(4) { top: 47%; width: 24vw; animation-duration: 200s; animation-delay: -15s; }
.cloud:nth-child(5) { top: 12%; width: 16vw; animation-duration: 240s; animation-delay: -200s; opacity: .7; }
@keyframes drift {
  from { transform: translateX(-45vw); }
  to   { transform: translateX(110vw); }
}
/* Quantidade e peso das nuvens conforme o tempo */
body.wx-clear .sky-clouds  { opacity: .22; }
body.wx-clear .cloud:nth-child(n+2) { display: none; }
body.wx-partly .sky-clouds { opacity: .7; }
body.wx-partly .cloud:nth-child(4), body.wx-partly .cloud:nth-child(5) { display: none; }
body.wx-cloudy .sky-clouds { opacity: .95; --cloud-top: rgba(255, 255, 255, .14); --cloud-bottom: rgba(26, 6, 56, .72); }
body.wx-fog .sky-clouds    { opacity: .9;  --cloud-top: rgba(235, 225, 255, .28); --cloud-bottom: rgba(120, 100, 160, .45); --cloud-line: rgba(235, 225, 255, .35); }
body.wx-rain .sky-clouds, body.wx-storm .sky-clouds { opacity: 1; --cloud-top: rgba(200, 190, 255, .12); --cloud-bottom: rgba(16, 4, 40, .8); --cloud-line: rgba(46, 242, 255, .45); }
body.wx-snow .sky-clouds   { opacity: .9;  --cloud-top: rgba(255, 255, 255, .3); --cloud-bottom: rgba(90, 80, 140, .5); }
body.scene-night .sky-clouds { --cloud-top: rgba(200, 180, 255, .12); }

/* Atmosfera do tempo: chuva esfria e escurece, névoa clareia e apaga */
.sky-weather {
  position: absolute;
  inset: 0;
  opacity: 0;
  background: linear-gradient(180deg, rgba(14, 8, 40, .6) 0%, rgba(40, 22, 80, .72) 100%);
  transition: opacity 3s var(--ease);
}
body.wx-rain .sky-weather, body.wx-storm .sky-weather { opacity: 1; }
body.wx-storm .sky-weather { background: linear-gradient(180deg, rgba(8, 4, 24, .74) 0%, rgba(30, 14, 64, .82) 100%); }
body.wx-cloudy .sky-weather { opacity: .5; }
body.wx-fog .sky-weather { opacity: .75; background: linear-gradient(180deg, rgba(140, 152, 175, .45) 0%, rgba(175, 186, 205, .6) 100%); }
body.wx-snow .sky-weather { opacity: .6; background: linear-gradient(180deg, rgba(150, 165, 195, .45), rgba(190, 200, 220, .55)); }

.sky-rain {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 2.5s var(--ease);
  overflow: hidden;
}
body.wx-rain .sky-rain, body.wx-storm .sky-rain, body.wx-snow .sky-rain { opacity: 1; }
.sky-rain i {
  position: absolute;
  left: 0; top: 0;
  width: 100%;
  height: 3900px;
  background-repeat: repeat;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='260'><g stroke='rgb(170,240,255)' stroke-opacity='.3' stroke-width='1.2' stroke-linecap='round'><line x1='22' y1='6' x2='16' y2='46'/><line x1='78' y1='70' x2='72' y2='104'/><line x1='132' y1='24' x2='126' y2='68'/><line x1='48' y1='150' x2='42' y2='196'/><line x1='110' y1='180' x2='104' y2='214'/><line x1='150' y1='130' x2='146' y2='158'/><line x1='8' y1='222' x2='3' y2='254'/></g></svg>");
  background-size: 160px 260px;
  animation: rainfall 1.7s linear infinite;
  will-change: transform;
}
.sky-rain i:nth-child(2) {
  opacity: .4;
  height: 3800px;
  background-size: 240px 380px;
  animation: rainfall-2 2.3s linear infinite;
}
body.wx-snow .sky-rain i { animation-duration: 9s; filter: blur(.4px); }
body.wx-snow .sky-rain i:nth-child(2) { animation-duration: 13s; }
@keyframes rainfall   { from { transform: translateY(-260px); } to { transform: translateY(0); } }
@keyframes rainfall-2 { from { transform: translateY(-380px); } to { transform: translateY(0); } }

.sky-vignette {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0) 48%, rgba(6, 2, 24, .5) 100%),
    radial-gradient(130% 100% at 50% 40%, rgba(0, 0, 0, 0) 55%, rgba(4, 0, 20, .32) 100%);
}

/* =========================================================
   LAYOUT
   ========================================================= */

.page {
  display: grid;
  grid-template-columns: minmax(0, 45fr) minmax(0, 55fr);
  gap: var(--gap);
  min-height: 100vh;
  padding: clamp(1.4rem, 2.8vh, 2.6rem) clamp(1.4rem, 3vw, 3.2rem);
}

.hero {
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
  padding: .4rem .2rem 0 .4rem;
}

.side {
  display: grid;
  /* radar maior que as notícias (proporção em --radar-fr) */
  grid-template-rows: minmax(0, var(--radar-fr, 1.45fr)) minmax(0, 1fr) auto;
  gap: var(--gap);
  min-height: 0;
  min-width: 0;
}

/* Em qualquer tela na horizontal a página ocupa exatamente a altura da janela, sem rolagem */
@media (min-width: 900px) and (orientation: landscape) {
  .page { height: 100vh; overflow: hidden; }
}

/* =========================================================
   SAUDAÇÃO, RELÓGIO, DATA
   ========================================================= */

.greeting-text {
  font-size: 1.65rem;
  font-weight: 300;
  color: var(--ink-2);
  letter-spacing: -.005em;
  text-shadow: var(--text-shadow);
}

.clock {
  display: flex;
  align-items: baseline;
  gap: .55rem;
  margin-top: .3rem;
  font-family: var(--font-display);
  font-size: 5.9rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: .02em;
  font-variant-numeric: tabular-nums;
  text-shadow: var(--neon-glow-cyan);
}
.clock-seconds {
  font-size: 1.3rem;
  font-weight: 500;
  letter-spacing: .04em;
  color: var(--neon-cyan);
  text-shadow: 0 0 10px rgba(46, 242, 255, .6);
  transform: translateY(-.25rem);
}

.date {
  margin-top: .55rem;
  font-size: 1.2rem;
  font-weight: 300;
  color: var(--ink-2);
  text-shadow: var(--text-shadow);
}

/* =========================================================
   COTAÇÕES — bloco compacto do Bitcoin
   ========================================================= */

.quotes {
  margin-top: 1.2rem;
  width: 100%;
  transition: opacity .6s var(--ease);
}
.quote-grid {
  display: flex;
  align-items: flex-end;
  gap: 1.2rem 2.6rem;
  flex-wrap: wrap;
}
.quote-grid > .quote-main { flex: 1.4 1 20rem; min-width: 0; }
.quote-main--usd { flex: 1 1 12rem; padding-left: 1.6rem; border-left: 1px solid rgba(255, 255, 255, .12); }
.quote-main--usd .quote-spark-wrap { width: 5rem; }
body.no-quotes .quotes { display: none; }
.quotes.is-empty .quote-main { opacity: .6; }

.quote-main {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.2rem;
}
.quote-text { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.quote-name { font-size: .92rem; font-weight: 400; color: var(--ink-3); }
.quote-row { display: flex; align-items: baseline; flex-wrap: nowrap; gap: .2rem .7rem; white-space: nowrap; }
.quote-price {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 500;
  letter-spacing: .01em;
  font-variant-numeric: tabular-nums;
  text-shadow: var(--text-shadow);
}
.quote-change, .quote-delta {
  font-size: .9rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.quote-change:empty { display: none; }
.up   { color: #4dffc3; text-shadow: 0 0 10px rgba(77, 255, 195, .45); }
.down { color: #ff5c9a; text-shadow: 0 0 10px rgba(255, 92, 154, .45); }

.quote-spark-wrap {
  flex: 0 1 5.8rem;
  min-width: 3.2rem;
  width: 5.8rem;
  height: 2.4rem;
  color: var(--ink-3);
  opacity: .9;
}
.quote-spark-wrap.up   { color: #4dffc3; filter: drop-shadow(0 0 6px rgba(77, 255, 195, .6)); }
.quote-spark-wrap.down { color: #ff5c9a; filter: drop-shadow(0 0 6px rgba(255, 92, 154, .6)); }
.quote-spark { display: block; width: 100%; height: 100%; overflow: visible; }

.quote-position {
  margin-top: .45rem;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: .15rem .7rem;
  font-size: .9rem;
  font-weight: 300;
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
  text-shadow: var(--text-shadow);
}
.quote-position b { font-weight: 500; color: var(--ink); font-size: 1.05rem; }
.quote-pos-note { color: var(--ink-3); font-size: .8rem; }
.quotes .section-status { margin-top: .25rem; }

/* =========================================================
   CLIMA (elemento principal, sem caixa)
   ========================================================= */

.weather {
  margin: auto 0 0; /* o espaço livre fica acima; a previsão vem logo abaixo das métricas */
  padding: .6rem 0;
  transition: opacity .6s var(--ease);
}
.weather.is-empty .weather-temp, .weather.is-empty .weather-icon { display: none; }
.weather.is-empty .weather-label { font-size: 1.35rem; font-weight: 300; color: var(--ink-3); }
.weather.is-empty .weather-metrics dd { color: var(--ink-4); }

.weather-main {
  display: flex;
  align-items: center;
  gap: 1.2rem;
}

.weather-icon {
  flex: 0 0 auto;
  width: 7.6rem;
  height: 7.6rem;
  display: grid;
  place-items: center;
  color: #fff;
  filter: drop-shadow(0 0 14px rgba(46, 242, 255, .35));
}
.weather-icon .wicon { width: 100%; height: 100%; }

.weather-temp {
  font-family: var(--font-display);
  font-size: 5.8rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: .01em;
  font-variant-numeric: tabular-nums;
  text-shadow: var(--neon-glow-pink);
}
.weather-label {
  margin-top: .4rem;
  font-size: 1.7rem;
  font-weight: 400;
  letter-spacing: -.01em;
  text-shadow: var(--text-shadow);
}
.weather-sub {
  margin-top: .35rem;
  display: flex;
  flex-wrap: wrap;
  gap: .2rem 1.2rem;
  font-size: 1.1rem;
  font-weight: 300;
  color: var(--ink-2);
  text-shadow: var(--text-shadow);
}

.weather-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, auto));
  justify-content: start;
  gap: .55rem 2.2rem;
  margin-top: 1rem;
  padding-left: .25rem;
}
.weather-metrics div { display: flex; flex-direction: column; gap: .05rem; min-width: 0; }
.weather-metrics dd {
  font-size: 1.4rem;
  font-weight: 400;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  text-shadow: var(--text-shadow);
  white-space: nowrap;
}
.weather-metrics dd small { font-size: .82rem; font-weight: 400; color: var(--ink-2); letter-spacing: 0; }
.dot {
  display: inline-block;
  width: .28em;
  height: .28em;
  margin: 0 .55em;
  border-radius: 50%;
  background: currentColor;
  vertical-align: middle;
  opacity: .7;
}
.weather-metrics dt {
  font-size: .86rem;
  font-weight: 400;
  color: var(--ink-3);
}

/* =========================================================
   PREVISÃO — faixa compacta de dias
   ========================================================= */

.forecast {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: .35rem;
  margin-top: .8rem;
  margin-bottom: auto; /* sobra de altura fica entre a previsão e a dica */
  padding: .2rem 0 .1rem;
}
.forecast:empty {
  min-height: 7.5rem;
}
.day {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .25rem;
  padding: .6rem .3rem .55rem;
  border-radius: 18px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.day.is-today {
  background: var(--glass-light);
  border: 1px solid rgba(46, 242, 255, .35);
  box-shadow: 0 0 18px -6px rgba(46, 242, 255, .5), inset 0 0 12px rgba(46, 242, 255, .06);
  backdrop-filter: blur(var(--blur));
  -webkit-backdrop-filter: blur(var(--blur));
}
.day-name { font-size: .92rem; font-weight: 400; color: var(--ink-2); }
.day .wicon { width: 2.3rem; height: 2.3rem; margin: .15rem 0; color: #fff; }
.day-max { font-size: 1.28rem; font-weight: 500; letter-spacing: -.02em; }
.day-min { font-size: 1.02rem; font-weight: 300; color: var(--ink-2); }
.day-rain {
  margin-top: .15rem;
  font-size: .78rem;
  font-weight: 400;
  color: var(--neon-cyan);
  text-shadow: 0 0 8px rgba(46, 242, 255, .4);
  white-space: nowrap;
}
.day-rain i { font-style: normal; color: var(--ink-3); text-shadow: none; }
.day-rain--none::before { content: "—"; color: var(--ink-4); }

/* =========================================================
   DICA DE HOJE — filme ou série
   ========================================================= */

.tip {
  display: flex;
  align-items: center;
  gap: .95rem;
  margin-top: .9rem;
  width: 100%; /* mesma largura da faixa de previsão acima */
  height: var(--bar-h); /* mesma altura do rádio ao lado */
  padding: .55rem .8rem .55rem .55rem;
  border-radius: 18px;
  background: var(--glass);
  border: 1px solid var(--glass-border);
  box-shadow: 0 0 40px -18px rgba(255, 43, 214, .4);
  backdrop-filter: blur(var(--blur));
  -webkit-backdrop-filter: blur(var(--blur));
  transition: background .25s, opacity .26s var(--ease);
}
.tip.is-fading { opacity: 0; }
.tip:hover { background: rgba(255, 255, 255, .12); }
body.no-tips .tip, .tip.is-empty { display: none; }

.tip-poster {
  flex: 0 0 auto;
  width: 3.9rem;
  height: 100%;
  border-radius: 10px;
  background: linear-gradient(160deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .04)) center / cover no-repeat;
  box-shadow: 0 6px 16px -6px rgba(0, 0, 20, .6);
}
.tip-poster.has-image { background-size: cover; background-position: center; }

.tip-body { display: flex; flex-direction: column; gap: .12rem; min-width: 0; }
.tip-title {
  font-size: 1.12rem;
  font-weight: 500;
  letter-spacing: -.01em;
  line-height: 1.2;
  text-shadow: var(--text-shadow);
}
.tip-meta { display: flex; gap: .7rem; font-size: .8rem; color: var(--ink-3); }
.tip-synopsis {
  margin-top: .15rem;
  font-size: .88rem;
  font-weight: 300;
  line-height: 1.4;
  color: var(--ink-2);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Telas baixas (TVs com viewport pequeno): tudo um pouco menor, sem esconder informação */
@media (min-width: 900px) and (orientation: landscape) and (max-height: 620px) {
  .clock { font-size: 4.4rem; }
  .greeting-text { font-size: 1.35rem; }
  .date { margin-top: .3rem; font-size: 1.05rem; }
  .quotes { margin-top: .7rem; }
  .quote-price { font-size: 1.6rem; }
  .quote-spark-wrap { display: none; } /* sem espaço: só número e variação */
  .quote-grid { flex-wrap: nowrap; gap: 1rem; }
  .quote-grid > .quote-main { flex: 0 1 auto; }
  .quote-main--usd { padding-left: 1rem; }
  .weather { padding: .3rem 0; }
  .weather-icon { width: 5.4rem; height: 5.4rem; }
  .weather-temp { font-size: 4.4rem; }
  .weather-label { font-size: 1.4rem; margin-top: .2rem; }
  .weather-metrics { margin-top: .6rem; gap: .35rem 1.6rem; }
  .weather-metrics dd { font-size: 1.2rem; }
  .forecast { margin-top: .5rem; }
  .day { padding: .4rem .3rem .35rem; gap: .15rem; }
  .day .wicon { width: 1.9rem; height: 1.9rem; }
  .tip { align-items: center; gap: .7rem; margin-top: .6rem; padding: .4rem .7rem .4rem .4rem; }
  .tip-poster { width: 2.6rem; }
  .tip-body { gap: .05rem; }
  .tip-title { font-size: 1rem; display: inline; }
  .tip-meta { display: inline-flex; margin-left: .5rem; }
  .tip-synopsis { margin-top: .05rem; font-size: .82rem; -webkit-line-clamp: 1; }
  .weather-sub .section-status, .quotes .section-status { display: none; }
}
/* Em telas muito baixas a dica sai para o resto caber sem rolagem */
@media (min-width: 900px) and (orientation: landscape) and (max-height: 480px) {
  .tip { display: none; }
}

/* =========================================================
   PAINÉIS DE VIDRO
   ========================================================= */

.panel {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
  overflow: hidden;
  padding: 1.15rem 1.35rem 1.1rem;
  border-radius: var(--radius);
  background: var(--glass);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(var(--blur)) saturate(1.35);
  -webkit-backdrop-filter: blur(var(--blur)) saturate(1.35);
  box-shadow:
    0 20px 60px -30px rgba(0, 0, 20, .6),
    0 0 50px -18px rgba(255, 43, 214, .35),
    inset 0 1px 0 rgba(255, 255, 255, .06);
}
.panel::before {
  /* fio neon no topo do painel */
  content: "";
  position: absolute;
  left: 1.6rem; right: 1.6rem; top: -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--neon-pink) 30%, var(--neon-cyan) 70%, transparent);
  opacity: .75;
  pointer-events: none;
}

.panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: .8rem;
}
.panel-head h2 {
  font-size: 1.15rem;
  font-weight: 500;
  letter-spacing: -.01em;
}

.section-status {
  min-width: 0;
  font-size: .78rem;
  font-weight: 400;
  color: var(--ink-4);
  transition: color .4s;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.section-status[data-state="error"] { color: rgba(255, 214, 170, .9); }
.section-status:empty { display: none; }
.weather-sub .section-status { align-self: center; font-size: .78rem; }
.radar .panel-head .section-status { margin-left: auto; }

/* Controle segmentado (Mapa | Satélite) */
.segmented {
  display: inline-flex;
  padding: 3px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .1);
}
.segmented button {
  padding: .3rem .85rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  font-size: .82rem;
  font-weight: 500;
  color: var(--ink-3);
  cursor: pointer;
  transition: background .25s, color .25s;
}
.segmented button[aria-pressed="true"] {
  background: rgba(46, 242, 255, .16);
  color: var(--neon-cyan);
  text-shadow: 0 0 8px rgba(46, 242, 255, .5);
}

/* =========================================================
   RADAR
   ========================================================= */

.radar-map-wrap {
  position: relative;
  flex: 1 1 auto;
  min-height: 7rem; /* o mapa cede espaço antes de qualquer texto sair do painel */
  border-radius: var(--radius-s);
  overflow: hidden;
  background: #0b1224;
  isolation: isolate;
}
.radar-map { position: absolute; inset: 0; background: #0b1224; }
.radar-map-wrap.is-loading .radar-map { visibility: hidden; }

.radar-placeholder {
  position: absolute;
  inset: 0;
  display: none;
  place-items: center;
  font-size: .95rem;
  color: var(--ink-3);
  background:
    radial-gradient(60% 60% at 50% 50%, rgba(80, 110, 170, .18), transparent 70%),
    #0b1224;
}
.radar-map-wrap.is-loading .radar-placeholder { display: grid; }

.radar-legend {
  position: absolute;
  left: .8rem;
  bottom: .7rem;
  z-index: 500;
  display: flex;
  align-items: center;
  gap: .45rem;
  padding: .3rem .6rem;
  border-radius: 999px;
  background: rgba(8, 14, 40, .55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  font-size: .7rem;
  color: var(--ink-2);
  pointer-events: none;
}
.radar-legend i {
  width: 5.5rem;
  height: 5px;
  border-radius: 3px;
  background: linear-gradient(90deg, #d9cf9c, #6fd0f2, #0a8fc9, #0b4f8f, #8c2c93, #e23a35);
}
.radar-map-wrap.is-loading .radar-legend { display: none; }

/* Linha do tempo do radar */
.radar-timeline {
  display: flex;
  align-items: center;
  gap: .9rem;
  margin-top: .85rem;
}

.play {
  flex: 0 0 auto;
  width: 2.3rem;
  height: 2.3rem;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .16);
  background: rgba(255, 255, 255, .12);
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background .25s;
}
.play:hover { background: rgba(255, 255, 255, .2); }
.play::before {
  content: "";
  width: 0; height: 0;
  margin-left: 3px;
  border-left: .62rem solid #fff;
  border-top: .4rem solid transparent;
  border-bottom: .4rem solid transparent;
}
.play.is-playing::before {
  margin-left: 0;
  width: .62rem;
  height: .72rem;
  border: 0;
  border-left: .2rem solid #fff;
  border-right: .2rem solid #fff;
}

.slider-wrap {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  padding-bottom: .95rem;
}
.radar-timeline { --now-pos: 100%; }
.radar-timeline[data-kind="none"] .now-mark { display: none; }
.slider-wrap input[type="range"] {
  display: block;
  width: 100%;
  height: 1.2rem;
  margin: 0;
  background: transparent;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}
.slider-wrap input[type="range"]::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 2px;
  background: linear-gradient(90deg,
    rgba(46, 242, 255, .7) 0 var(--now-pos),
    rgba(255, 43, 214, .35) var(--now-pos) 100%);
}
.slider-wrap input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 14px; height: 14px;
  margin-top: -5px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 4px rgba(46, 242, 255, .22), 0 0 12px rgba(46, 242, 255, .7);
}
.slider-wrap input[type="range"]::-moz-range-track { height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .3); }
.slider-wrap input[type="range"]::-moz-range-thumb { width: 14px; height: 14px; border: 0; border-radius: 50%; background: #fff; }

.now-mark {
  position: absolute;
  left: var(--now-pos);
  top: 1.1rem;
  transform: translateX(-50%);
  font-size: .68rem;
  color: var(--ink-3);
  white-space: nowrap;
}
.now-mark::before {
  content: "";
  display: block;
  width: 1px;
  height: .35rem;
  margin: 0 auto .1rem;
  background: rgba(46, 242, 255, .7);
}

.radar-frame {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  min-width: 4.2rem;
  line-height: 1.15;
}
.radar-frame b { font-size: 1.05rem; font-weight: 500; font-variant-numeric: tabular-nums; }
.radar-frame small { font-size: .72rem; color: var(--ink-3); }
.radar-timeline[data-kind="nowcast"] .radar-frame small { color: var(--neon-pink); }

.radar-approach {
  margin-top: .55rem;
  font-size: 1.05rem;
  font-weight: 400;
  letter-spacing: -.005em;
}

.radar-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .5rem 1rem;
  margin-top: .8rem;
  padding-top: .8rem;
  border-top: 1px solid rgba(255, 255, 255, .1);
}
.radar-stats dt { font-size: .76rem; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.radar-stats dd { margin-top: .12rem; font-size: 1.1rem; font-weight: 500; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }

/* Ajustes do Leaflet para combinar com o vidro */
.leaflet-container { font-family: var(--font); background: #0b1224; }
.leaflet-control-container .leaflet-bar { border: 0; box-shadow: none; border-radius: 12px; overflow: hidden; }
.leaflet-bar a {
  width: 2rem; height: 2rem; line-height: 2rem;
  background: rgba(8, 14, 40, .6);
  color: #fff;
  border-bottom: 1px solid rgba(255, 255, 255, .1);
  font-weight: 300;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.leaflet-bar a:hover { background: rgba(30, 40, 80, .75); color: #fff; }
.leaflet-bar a.leaflet-disabled { color: var(--ink-4); }
.leaflet-control-attribution {
  background: rgba(8, 14, 40, .45) !important;
  color: rgba(255, 255, 255, .55);
  font-size: 9.5px;
  padding: 2px 7px;
  border-top-left-radius: 8px;
}
.leaflet-control-attribution a { color: rgba(255, 255, 255, .7); }
.leaflet-tile { filter: saturate(.9); }

.pin-wrap { background: transparent; border: 0; }
.pin {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .35rem;
  transform: translate(-50%, -7px);
  white-space: nowrap;
}
.pin i {
  width: 14px; height: 14px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--neon-pink);
  box-shadow: 0 0 0 5px rgba(255, 43, 214, .25), 0 0 12px rgba(255, 43, 214, .8);
  animation: pin-pulse 2.6s ease-out infinite;
}
.pin b {
  font-size: .82rem;
  font-weight: 500;
  color: #fff;
  text-shadow: 0 1px 4px rgba(0, 0, 0, .9), 0 0 12px rgba(0, 0, 0, .6);
}
@keyframes pin-pulse {
  0%   { box-shadow: 0 0 0 4px rgba(255, 43, 214, .35), 0 0 12px rgba(255, 43, 214, .8); }
  70%  { box-shadow: 0 0 0 14px rgba(255, 43, 214, 0), 0 0 12px rgba(255, 43, 214, .8); }
  100% { box-shadow: 0 0 0 14px rgba(255, 43, 214, 0), 0 0 12px rgba(255, 43, 214, .8); }
}

/* =========================================================
   NOTÍCIAS — feed ao vivo
   ========================================================= */

.news-list {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: .85rem;
  padding-bottom: 1.1rem; /* espaço para o indicador de páginas */
  transition: opacity .28s var(--ease);
}
.news-list.is-fading { opacity: 0; }
.news-list.is-tight .news-summary { display: none; }
.news-list.is-tight .news-lead .news-title { -webkit-line-clamp: 2; }
.news-placeholder { display: none; color: var(--ink-3); font-size: .95rem; margin: auto 0; }
.news-list.is-empty .news-placeholder { display: block; }

.news-lead {
  position: relative;
  flex: 0 0 auto;
  display: flex;
  align-items: flex-end;
  height: var(--lead-h, 9.8rem);
  padding: 1rem 1.15rem .95rem;
  border-radius: var(--radius-s);
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(20, 6, 48, .2) 0%, rgba(14, 4, 40, .88) 100%),
    var(--img, linear-gradient(135deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, .04))) center / cover no-repeat;
  border: 1px solid rgba(255, 255, 255, .1);
  transition: transform .35s var(--ease);
}
.news-lead:hover { transform: translateY(-2px); }
.news-lead-body { display: flex; flex-direction: column; gap: .35rem; max-width: 60ch; }
.news-lead .news-title {
  font-size: 1.42rem;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -.015em;
  text-shadow: 0 1px 6px rgba(0, 0, 20, .5);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.news-summary {
  font-size: .92rem;
  font-weight: 300;
  line-height: 1.4;
  color: var(--ink-2);
  text-shadow: 0 1px 4px rgba(0, 0, 20, .5);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.news-meta {
  display: flex;
  gap: .9rem;
  font-size: .78rem;
  color: var(--ink-3);
}
.news-source { font-weight: 500; color: var(--ink-2); }

/* Lista secundária: linhas de altura fixa para a paginação ser previsível */
.news-items {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: 5rem;
  gap: 0 1.6rem;
  align-content: start;
}
.news-items li { min-height: 0; }
.news-items li a {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: .3rem;
  height: 100%;
  padding: .3rem .4rem .3rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.news-items li a:hover .news-title { color: #fff; }
.news-items .news-title {
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.32;
  letter-spacing: -.005em;
  color: var(--ink);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Indicador de páginas do carrossel */
.news-dots {
  position: absolute;
  right: 1.35rem;
  bottom: .85rem;
  display: flex;
  gap: .4rem;
}
.news-dots:empty { display: none; }
.news-dots button {
  position: relative;
  width: .45rem;
  height: .45rem;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, .32);
  overflow: hidden;
  cursor: pointer;
  transition: width .3s var(--ease), background .3s;
}
.news-dots button[aria-current="true"] { width: 1.7rem; background: rgba(255, 43, 214, .25); }
.news-dots button[aria-current="true"]::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--neon-cyan);
  box-shadow: 0 0 8px rgba(46, 242, 255, .8);
  transform: scaleX(0);
  transform-origin: left;
}
.news-dots button.is-running::after { animation: dot-fill var(--dur, 12s) linear forwards; }
.news.is-paused .news-dots button[aria-current="true"]::after { transform: scaleX(1); opacity: .5; animation: none; }
@keyframes dot-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* =========================================================
   RÁDIO — head unit automotivo anos 80
   ========================================================= */

body.no-radio .radio { display: none; }
body.no-radio .side { grid-template-rows: minmax(0, var(--radar-fr, 1.45fr)) minmax(0, 1fr); }

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.radio {
  /* iluminação: --ill-h (matiz) e --ill-l (luminosidade) vêm do painel ILL; padrão âmbar */
  --ill-h: 36;
  --ill-l: 64%;
  --amber: hsl(var(--ill-h) 100% var(--ill-l));
  --amber-dim: hsl(var(--ill-h) 100% var(--ill-l) / .28);
  --amber-glow: 0 0 6px hsl(var(--ill-h) 100% 60% / .85), 0 0 18px hsl(var(--ill-h) 100% 50% / .35);
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto auto;
  align-items: center;
  gap: .9rem;
  height: var(--bar-h);
  padding: .8rem 1.1rem .55rem 1rem;
  border-radius: 12px;
  /* faceplate: plástico escuro com escovado e bisel */
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .025) 0 1px, transparent 1px 3px),
    linear-gradient(180deg, #33343b 0%, #1d1e23 18%, #141518 60%, #0f1013 100%);
  border: 1px solid #08090b;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .14),
    inset 0 -1px 0 rgba(0, 0, 0, .8),
    inset 0 0 0 1px rgba(255, 255, 255, .03),
    0 18px 40px -22px rgba(0, 0, 0, .9),
    0 0 40px -20px hsl(var(--ill-h) 100% 60% / .3);
  font-family: var(--font);
}
.radio-brand {
  position: absolute;
  left: 1.1rem;
  top: .28rem;
  display: flex;
  gap: .6rem;
  align-items: baseline;
  font-size: .55rem;
  letter-spacing: .22em;
  color: rgba(255, 255, 255, .38);
  pointer-events: none;
}
.radio-brand b { font-family: var(--font-display); font-weight: 700; color: rgba(255, 255, 255, .55); }
/* ---- botão ILL e painel de iluminação ---- */
.ill-btn {
  position: absolute;
  right: 1.1rem;
  top: .22rem;
  padding: .05rem .4rem;
  font-family: var(--font-display);
  font-size: .5rem;
  letter-spacing: .16em;
  color: rgba(255, 255, 255, .5);
  background: linear-gradient(180deg, #2c2d33, #17181c 60%, #101114);
  border: 1px solid #060708;
  border-radius: 3px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 1px 2px rgba(0, 0, 0, .7);
  cursor: pointer;
  z-index: 2;
}
.ill-btn:hover, .ill-btn[aria-expanded="true"] { color: var(--amber); text-shadow: var(--amber-glow); }
.ill-panel {
  position: absolute;
  right: 0;
  bottom: calc(100% + .6rem);
  z-index: 60;
  width: 18rem;
  padding: .85rem 1rem .9rem;
  border-radius: 12px;
  background: linear-gradient(180deg, #24252b, #141518);
  border: 1px solid #08090b;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 20px 50px -20px rgba(0, 0, 0, .9);
  font-size: .82rem;
  color: rgba(255, 255, 255, .8);
}
.ill-head { display: flex; align-items: baseline; gap: .6rem; margin-bottom: .6rem; }
.ill-head b { font-family: var(--font-display); font-size: .8rem; letter-spacing: .1em; color: var(--amber); text-shadow: var(--amber-glow); }
.ill-head span { color: rgba(255, 255, 255, .45); font-size: .74rem; }
.ill-modes { display: flex; flex-wrap: wrap; gap: .3rem; margin-bottom: .7rem; }
.ill-modes button {
  padding: .3rem .6rem;
  font-family: var(--font-display);
  font-size: .58rem;
  letter-spacing: .08em;
  color: rgba(255, 255, 255, .7);
  background: linear-gradient(180deg, #2c2d33, #17181c 60%, #101114);
  border: 1px solid #060708;
  border-radius: 4px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), inset 0 -1px 0 rgba(0, 0, 0, .8);
  cursor: pointer;
}
.ill-modes button[aria-pressed="true"] { color: var(--amber); text-shadow: var(--amber-glow); border-color: hsl(var(--ill-h) 100% 60% / .5); }
.ill-row { display: grid; grid-template-columns: 4.6rem 1fr; align-items: center; gap: .6rem; margin: .45rem 0; font-size: .74rem; color: rgba(255, 255, 255, .6); }
.ill-row input[type="range"] { width: 100%; height: 1.2rem; margin: 0; background: transparent; -webkit-appearance: none; appearance: none; cursor: pointer; }
.ill-row input[type="range"]::-webkit-slider-runnable-track { height: 6px; border-radius: 3px; background: rgba(255, 255, 255, .2); }
.ill-hue-row input[type="range"]::-webkit-slider-runnable-track {
  background: linear-gradient(90deg, hsl(0 100% 60%), hsl(60 100% 55%), hsl(120 100% 50%), hsl(180 100% 50%), hsl(240 100% 62%), hsl(300 100% 58%), hsl(360 100% 60%));
}
.ill-row input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 14px; height: 14px; margin-top: -4px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 2px rgba(0, 0, 0, .5); }
.ill-row input[type="range"]::-moz-range-track { height: 6px; border-radius: 3px; background: rgba(255, 255, 255, .2); }
.ill-row input[type="range"]::-moz-range-thumb { width: 14px; height: 14px; border: 0; border-radius: 50%; background: #fff; }
.ill-swatches { display: flex; gap: .38rem; margin: .1rem 0 .3rem 5.2rem; }
.swatch {
  width: 1.05rem; height: 1.05rem;
  padding: 0;
  border-radius: 50%;
  border: 2px solid transparent;
  background: hsl(var(--sw) 100% 60%);
  box-shadow: 0 0 8px hsl(var(--sw) 100% 60% / .6);
  cursor: pointer;
}
.swatch[aria-pressed="true"] { border-color: #fff; }
.ill-panel[data-mode="padrao"] .ill-hue-row, .ill-panel[data-mode="padrao"] .ill-swatches,
.ill-panel[data-mode="arco-iris"] .ill-hue-row, .ill-panel[data-mode="arco-iris"] .ill-swatches { opacity: .35; }
.ill-panel[data-mode="padrao"] .ill-speed-row, .ill-panel[data-mode="cor"] .ill-speed-row { opacity: .35; }
.ill-tip { margin-top: .45rem; font-size: .68rem; color: rgba(255, 255, 255, .38); }
.ill-tip kbd { font-family: inherit; padding: 0 .28rem; border: 1px solid rgba(255, 255, 255, .2); border-radius: 3px; }

/* ---- knobs ---- */
.knob {
  --angle: 0deg;
  position: relative;
  width: 3.9rem;
  height: 3.9rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: grab;
  touch-action: none;
  user-select: none;
}
.knob:active { cursor: grabbing; }
/* anel serrilhado no elemento do knob; a face côncava (opaca) fica por cima */
.knob {
  background: repeating-conic-gradient(from 0deg, #3d3e45 0deg 5deg, #101114 5deg 10deg);
  box-shadow: 0 0 0 1px #050506, 0 3px 6px rgba(0, 0, 0, .7);
}
.knob-face {
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 40%, #4a4b52 0%, #2b2c31 45%, #1a1b1f 72%, #0b0c0e 100%);
  box-shadow:
    inset 0 2px 3px rgba(255, 255, 255, .22),
    inset 0 -3px 5px rgba(0, 0, 0, .8),
    0 0 0 1px #050506;
  transform: rotate(var(--angle));
  transition: transform .25s var(--ease);
}
.knob-mark {
  position: absolute;
  left: 50%;
  top: 9%;
  width: 3px;
  height: 22%;
  margin-left: -1.5px;
  border-radius: 2px;
  background: var(--amber);
  box-shadow: var(--amber-glow);
}
.knob-label {
  position: absolute;
  left: 50%;
  bottom: -.95rem;
  transform: translateX(-50%);
  font-size: .5rem;
  letter-spacing: .18em;
  color: rgba(255, 255, 255, .4);
  white-space: nowrap;
}
.knob:focus-visible { outline: 2px solid var(--amber); outline-offset: 4px; }
.knob--vol .knob-face::after {
  /* LED de power */
  content: "";
  position: absolute;
  left: 50%; bottom: -1.05rem;
  width: 5px; height: 5px;
  margin-left: 1.6rem;
  border-radius: 50%;
  background: #3a1b08;
  box-shadow: inset 0 0 2px rgba(0, 0, 0, .8);
  transform: rotate(calc(-1 * var(--angle)));
}
.radio[data-state="playing"] .knob--vol .knob-face::after,
.radio[data-state="loading"] .knob--vol .knob-face::after { background: var(--amber); box-shadow: var(--amber-glow); }

/* ---- display VFD ---- */
.vfd {
  position: relative;
  height: 4.2rem;
  padding: .55rem .9rem .5rem;
  border-radius: 6px;
  background:
    repeating-linear-gradient(180deg, rgba(0, 0, 0, .18) 0 1px, transparent 1px 3px),
    linear-gradient(180deg, #1a1208 0%, #0d0904 55%, #120c05 100%);
  border: 1px solid #000;
  box-shadow:
    inset 0 2px 8px rgba(0, 0, 0, .95),
    inset 0 0 30px hsl(var(--ill-h) 100% 60% / .08),
    0 1px 0 rgba(255, 255, 255, .06);
  color: var(--amber);
  text-shadow: var(--amber-glow);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.vfd::after {
  /* reflexo do vidro */
  content: "";
  position: absolute;
  inset: 0 0 55% 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, 0));
  pointer-events: none;
}
.vfd-row { display: flex; align-items: baseline; gap: .9rem; min-width: 0; }
.vfd-row > .vfd-flags { margin-left: auto; }
.vfd-eq { margin-left: 0; }
.vfd-band {
  flex: 0 0 auto;
  font-family: var(--font-display);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .1em;
  color: var(--amber);
  border-right: 1px solid var(--amber-dim);
  padding-right: .7rem;
}
.vfd-name {
  flex: 0 1 auto;
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.vfd-flags { display: flex; gap: .45rem; flex: 0 0 auto; }
.vfd-flag {
  font-style: normal;
  font-size: .55rem;
  letter-spacing: .14em;
  padding: .12rem .3rem;
  border: 1px solid var(--amber-dim);
  border-radius: 3px;
  color: var(--amber-dim);
  text-shadow: none;
  transition: color .3s, border-color .3s, text-shadow .3s;
}
.radio[data-state="playing"] .vfd-flag { color: var(--amber); border-color: var(--amber); text-shadow: var(--amber-glow); }
.vfd-row--sub { font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: hsl(var(--ill-h) 100% 72% / .85); }
.vfd-desc { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.radio.is-flashing .vfd-desc { visibility: hidden; position: relative; }
.radio.is-flashing .vfd-desc::after {
  content: attr(data-flash);
  visibility: visible;
  position: absolute;
  left: 0; top: 0;
  color: var(--amber);
  text-shadow: var(--amber-glow);
}
.vfd-status { flex: 0 0 auto; margin-left: auto; white-space: nowrap; font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; color: hsl(var(--ill-h) 100% 72% / .85); }
.radio[data-state="error"] .vfd-status { color: #ff7a5a; text-shadow: 0 0 8px rgba(255, 90, 50, .8); }
.radio[data-state="loading"] .vfd-status { animation: vfd-blink 1s steps(2) infinite; }
@keyframes vfd-blink { to { opacity: .35; } }

/* medidor de nível: barras que só se mexem tocando */
.vfd-eq { display: flex; align-items: flex-end; gap: 2px; height: .8rem; flex: 0 0 auto; margin-left: .4rem; }
.vfd-eq i { width: 4px; height: 20%; background: var(--amber-dim); border-radius: 1px; }
.radio[data-state="playing"] .vfd-eq i { background: var(--amber); box-shadow: var(--amber-glow); animation: eq 1s ease-in-out infinite; }
.radio[data-state="playing"] .vfd-eq i:nth-child(2) { animation-delay: -.2s; }
.radio[data-state="playing"] .vfd-eq i:nth-child(3) { animation-delay: -.5s; }
.radio[data-state="playing"] .vfd-eq i:nth-child(4) { animation-delay: -.1s; }
.radio[data-state="playing"] .vfd-eq i:nth-child(5) { animation-delay: -.7s; }
.radio[data-state="playing"] .vfd-eq i:nth-child(6) { animation-delay: -.3s; }
.radio[data-state="playing"] .vfd-eq i:nth-child(7) { animation-delay: -.6s; }
.radio[data-state="playing"] .vfd-eq i:nth-child(8) { animation-delay: -.4s; }
@keyframes eq { 0%, 100% { height: 20%; } 50% { height: 100%; } }
.vfd-led {
  position: absolute;
  right: .55rem; top: .5rem;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--amber-dim);
}
.radio[data-state="playing"] .vfd-led { background: var(--amber); box-shadow: var(--amber-glow); }

/* ---- presets e seek ---- */
.presets-wrap { display: flex; align-items: stretch; gap: .35rem; }
.presets { display: grid; grid-template-columns: repeat(4, auto); gap: .3rem .35rem; }
.band-btn {
  width: 1.9rem;
  font-family: var(--font-display);
  font-size: .56rem;
  letter-spacing: .06em;
  color: var(--amber);
  text-shadow: var(--amber-glow);
  background: linear-gradient(180deg, #2c2d33, #17181c 60%, #101114);
  border: 1px solid #060708;
  border-radius: 4px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), inset 0 -1px 0 rgba(0, 0, 0, .8), 0 1px 2px rgba(0, 0, 0, .7);
  cursor: pointer;
}
.band-btn:active { transform: translateY(1px); box-shadow: inset 0 1px 3px rgba(0, 0, 0, .9); }
.preset, .seek-btn {
  font-family: var(--font-display);
  font-size: .62rem;
  letter-spacing: .06em;
  color: rgba(255, 255, 255, .7);
  background: linear-gradient(180deg, #2c2d33, #17181c 60%, #101114);
  border: 1px solid #060708;
  border-radius: 4px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), inset 0 -1px 0 rgba(0, 0, 0, .8), 0 1px 2px rgba(0, 0, 0, .7);
  cursor: pointer;
  transition: transform .08s, box-shadow .08s, color .2s;
}
.preset { width: 1.75rem; height: 1.35rem; padding: 0; }
.preset:active, .seek-btn:active { transform: translateY(1px); box-shadow: inset 0 1px 3px rgba(0, 0, 0, .9); }
.preset[aria-pressed="true"] { color: var(--amber); text-shadow: var(--amber-glow); border-color: hsl(var(--ill-h) 100% 60% / .5); }
.seek { display: flex; flex-direction: column; gap: .35rem; }
.seek-btn { padding: .3rem .55rem; white-space: nowrap; }

/* ---- telas menores ---- */
@media (max-width: 1400px) {
  .seek-btn { font-size: .55rem; padding: .26rem .4rem; }
  .band-btn { width: 1.5rem; font-size: .5rem; }
  .preset { width: 1.5rem; height: 1.2rem; font-size: .55rem; }
  .presets { gap: .25rem .28rem; }
}
/* telas baixas (TV): sem presets nem rótulos, só display, seek e knobs */
@media (min-width: 900px) and (orientation: landscape) and (max-height: 620px) {
  :root { --bar-h: 4.6rem; }
  .radio { gap: .7rem; padding: .55rem .8rem .4rem; grid-template-columns: auto minmax(0, 1fr) auto auto; }
  .presets-wrap { display: none; }
  .knob { width: 2.7rem; height: 2.7rem; }
  .knob-label, .radio-brand, .ill-btn { display: none; }
  .knob--vol .knob-face::after { display: none; }
  .vfd { height: 3.2rem; padding: .35rem .6rem; }
  .vfd-name { font-size: 1rem; }
  .vfd-desc { display: none; }
}

/* =========================================================
   ÍCONES METEOROLÓGICOS — animações
   ========================================================= */

.wicon { display: block; overflow: visible; }
.w-sun   { animation: spin 48s linear infinite; }
.w-drop  { animation: drop 1.3s ease-in infinite; }
.w-drop--small { animation-duration: 1.1s; }
.w-flake { animation: flake 2.6s ease-in-out infinite; }
.w-bolt  { animation: bolt 4s ease-in-out infinite; }
.w-fog   { animation: fog 5s ease-in-out infinite; }
.w-star  { animation: twinkle 3s ease-in-out infinite; }
.wicon--hero .w-cloud { animation: sway 7s ease-in-out infinite; }
.wicon--small * { animation: none !important; }

@keyframes spin  { to { transform: rotate(360deg); } }
@keyframes drop  { 0% { transform: translateY(-3px); opacity: 0; } 25% { opacity: 1; } 100% { transform: translateY(7px); opacity: 0; } }
@keyframes flake { 0% { transform: translateY(-2px); opacity: .2; } 50% { opacity: 1; } 100% { transform: translateY(6px); opacity: .1; } }
@keyframes bolt  { 0%, 84%, 100% { opacity: 1; } 88% { opacity: .2; } 92% { opacity: 1; } 95% { opacity: .35; } }
@keyframes fog   { 0%, 100% { transform: translateX(0); opacity: .6; } 50% { transform: translateX(3px); opacity: 1; } }
@keyframes sway  { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(2.5px); } }

/* =========================================================
   RESPONSIVO
   ========================================================= */

@media (max-width: 899px), (orientation: portrait) {
  .page {
    grid-template-columns: 1fr;
    height: auto;
    min-height: 100vh;
  }
  .hero { padding: .2rem 0 .4rem; }
  .weather { margin: 1.8rem 0 1rem; padding: 0; }
  .side { grid-template-rows: none; }
  .radio { height: auto; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-rows: auto auto; row-gap: .8rem; padding-bottom: 1.4rem; }
  .presets-wrap { grid-column: 1 / -1; justify-content: center; }
  .presets { grid-template-columns: repeat(8, auto); }
  .seek { grid-column: 1 / -1; flex-direction: row; justify-content: center; }
  .knob--tune { display: none; }
  .radar-map-wrap { min-height: 22rem; }
  .news-items { grid-auto-rows: auto; overflow: visible; }
  .news-items li a { padding: .7rem .4rem .7rem 0; }
  .news-lead { height: auto; min-height: 9.4rem; }
  .tip { height: auto; }
  .tip-poster { height: auto; min-height: 5rem; }
  .news-list { padding-bottom: 0; }
}

@media (max-width: 680px) {
  html { font-size: 14px; }
  .page { padding: 1.2rem 1.1rem 2rem; }
  .clock { font-size: 3.8rem; }
  .weather-temp { font-size: 3.8rem; }
  .weather-icon { width: 4.6rem; height: 4.6rem; }
  .weather-metrics { grid-template-columns: repeat(2, minmax(0, auto)); gap: .6rem 1.6rem; }
  .quote-main--usd { padding-left: 0; border-left: 0; }
  .forecast { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .day:nth-child(n+5) { display: none; }
  .radar-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .radar-map-wrap { min-height: 17rem; }
  .news-items { grid-template-columns: 1fr; }
  .panel { padding: 1rem 1rem .9rem; border-radius: 20px; }
  .panel-head { flex-wrap: wrap; }
}

/* Telas largas mas baixas (notebooks): encurta a notícia principal para sobrar espaço para a lista */
@media (min-width: 900px) and (orientation: landscape) and (max-height: 820px) {
  .news-lead { height: 6.8rem; }
  .news-summary { display: none; }
  .radar-stats { margin-top: .55rem; padding-top: .55rem; }
  .clock { font-size: 6.4rem; }
}

/* Modo TV (index.html?tv=1): margem de segurança contra overscan e efeitos mais leves */
body.tv .page { padding: 3.2vh 3.2vw; }
body.tv { --blur: 8px; }
body.tv .cloud { filter: none; }
body.tv .sky-rain i:nth-child(2) { display: none; }
body.tv .sky-sun { animation: none; }
body.tv .sky-scan { display: none; }
body.tv .sky-horizon i { animation: none; }
body.tv .news-lead:hover { transform: none; }
body.tv .panel { padding: .95rem 1.2rem .9rem; }
body.tv .radar-timeline { margin-top: .6rem; }
body.tv .radar-approach { margin-top: .4rem; }
body.tv .radar-stats { margin-top: .55rem; padding-top: .55rem; }
body.tv .quotes { margin-top: .9rem; }
body.tv .tip { margin-top: .7rem; }
body.tv .knob--vol .knob-label { display: none; }

/* Movimento reduzido: o céu continua mudando de cor, mas parado */
@media (prefers-reduced-motion: reduce) {
  .sky-sun, .cloud, .sky-rain i, .sky-stars i, .pin i, .sky-horizon i,
  .w-sun, .w-drop, .w-flake, .w-bolt, .w-fog, .w-star, .wicon--hero .w-cloud {
    animation: none !important;
  }
  .cloud:nth-child(1) { transform: translateX(-4vw); }
  .cloud:nth-child(2) { transform: translateX(34vw); }
  .cloud:nth-child(3) { transform: translateX(8vw); }
  .cloud:nth-child(4) { transform: translateX(44vw); }
  .cloud:nth-child(5) { transform: translateX(62vw); }
  .news-lead, .segmented button, .play { transition: none; }
}