/* =========================================================
   PALETA DE CORES — troque aqui para mudar o site inteiro
   ========================================================= */
:root {
  /* Paleta oficial TV Caiçara Litoral (fundo com triângulos) */
  --cor-principal: #003698;      /* azul (base do fundo) */
  --cor-secundaria: #00a3b1;     /* turquesa (topo do fundo) */
  --cor-meio: #006ba2;           /* azul médio */
  --cor-escura: #00225f;         /* azul-marinho (topo, rodapé) */
  --cor-destaque: #f5b700;       /* amarelo para personagens */
  --cor-whats: #1faa53;
  --degrade: linear-gradient(180deg, #00a3b1 0%, #008cab 35%, #006ba2 60%, #00459c 82%, #003698 100%);
  --fundo-marca: url('/img/fundo.jpg') center / cover no-repeat, var(--degrade);

  --texto: #141c2e;
  --texto-suave: #5a6377;
  --linha: #e1e5ec;
  --fundo: #f3f5f8;
  --branco: #ffffff;

  --fonte-titulo: 'Bebas Neue', 'Oswald', Impact, sans-serif;
  --fonte-texto: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --raio: 10px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--fundo);
  color: var(--texto);
  font-family: var(--fonte-texto);
  font-size: 16px;
  line-height: 1.55;
}
img, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--cor-principal); }
button { font: inherit; cursor: pointer; }
[hidden] { display: none !important; }

.container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 16px; }

/* ---------- Topo ---------- */
.topo { background: var(--cor-escura); color: #c9d4f0; font-size: 13px; }
.topo-linha { display: flex; justify-content: space-between; gap: 12px; padding-top: 6px; padding-bottom: 6px; }
#hoje { text-transform: capitalize; }
.topo-links { display: flex; gap: 18px; }
.topo-links a:hover { color: #fff; }

.cabecalho { background: var(--fundo-marca); color: #fff; }
.cabecalho-linha { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-top: 16px; padding-bottom: 16px; }
.marca { display: flex; align-items: center; gap: 14px; color: #fff; }
.marca:hover { color: #fff; }
.marca-logo { width: 62px; height: 62px; flex: none; object-fit: contain; }
.marca-texto { display: flex; flex-direction: column; }
.marca-nome { font-family: var(--fonte-titulo); font-size: 42px; line-height: .95; letter-spacing: .5px; }
.marca-sub { font-size: 12.5px; opacity: .9; letter-spacing: .3px; }

.busca { display: flex; background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.35); border-radius: 999px; overflow: hidden; }
.busca input { background: transparent; border: 0; color: #fff; padding: 9px 14px; width: 220px; font: inherit; font-size: 14px; outline: none; }
.busca input::placeholder { color: rgba(255,255,255,.8); }
.busca button { background: transparent; border: 0; color: #fff; padding: 0 14px; }

.menu { background: var(--branco); border-bottom: 1px solid var(--linha); position: sticky; top: 0; z-index: 10; box-shadow: 0 2px 8px rgba(10,29,79,.06); }
.menu-linha { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; }
.menu-linha::-webkit-scrollbar { display: none; }
.menu a { font-family: var(--fonte-titulo); font-size: 19px; letter-spacing: .4px; padding: 11px 12px 9px; white-space: nowrap; color: var(--cor-escura); border-bottom: 3px solid transparent; }
.menu a:hover, .menu a.ativo { color: var(--cor-principal); border-bottom-color: var(--cor-secundaria); }
.menu a.menu-personagem { color: #9a6c00; }
.menu a.menu-personagem.ativo, .menu a.menu-personagem:hover { border-bottom-color: var(--cor-destaque); }

/* ---------- Faixa "Últimas" ---------- */
.ticker { background: var(--branco); border-bottom: 1px solid var(--linha); }
.ticker-linha { display: flex; align-items: center; gap: 12px; height: 40px; }
.ticker-rotulo { flex: none; background: var(--cor-secundaria); color: #fff; font-family: var(--fonte-titulo); font-size: 17px; letter-spacing: .5px; padding: 3px 10px 1px; border-radius: 4px; }
.ticker-janela { overflow: hidden; flex: 1; mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); }
.ticker-trilho { display: flex; width: max-content; animation: rolar 70s linear infinite; }
.ticker-trilho > div { display: flex; align-items: center; white-space: nowrap; font-size: 14px; font-weight: 600; }
.ticker-trilho:hover { animation-play-state: paused; }
.ticker-sep { color: var(--cor-secundaria); margin: 0 14px; }
@keyframes rolar { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .ticker-trilho { animation: none; } }

/* ---------- Cards ---------- */
.card { background: var(--branco); border-radius: var(--raio); overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 1px 3px rgba(10,29,79,.08); transition: box-shadow .2s, transform .2s; }
.card:hover { box-shadow: 0 8px 22px rgba(10,29,79,.13); transform: translateY(-2px); }
.card-img { position: relative; display: block; aspect-ratio: 16 / 10; background: var(--degrade); overflow: hidden; }
/* As artes do Instagram têm a foto em cima e o título embaixo: mostramos só a parte da foto */
.card-img img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.sem-imagem { width: 100%; height: 100%; background: var(--degrade); }
.selo-video { position: absolute; left: 10px; bottom: 10px; width: 34px; height: 34px; border-radius: 50%; background: rgba(10,29,79,.75); color: #fff; display: grid; place-items: center; font-size: 13px; padding-left: 2px; }
.card-texto { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.chapeu { color: var(--cor-secundaria); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; }
.card-titulo { font-family: var(--fonte-titulo); font-weight: 400; font-size: 23px; line-height: 1.02; margin: 0; letter-spacing: .2px; color: var(--cor-escura); }
.card-resumo { margin: 4px 0 0; color: var(--texto-suave); font-size: 15px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.card time, .relacionada time { color: var(--texto-suave); font-size: 12.5px; margin-top: auto; padding-top: 4px; }

.em-breve { background: var(--fundo-marca); color: #fff; border-radius: var(--raio); padding: 34px 24px; text-align: center; }
.em-breve h2 { font-family: var(--fonte-titulo); font-weight: 400; font-size: 40px; line-height: 1; margin: 0 0 8px; }
.em-breve p { margin: 0 0 18px; opacity: .95; }
.aviso-teste { margin: 18px 0 0; background: #fff4cc; border: 1px solid #f2d36b; color: #5c4500; border-radius: var(--raio); padding: 10px 14px; font-size: 14.5px; }

/* ---------- Destaques ---------- */
.destaque { margin-top: 22px; }
.destaque-grade { display: grid; grid-template-columns: 1.7fr 1fr; gap: 18px; }
.card-grande .card-img { aspect-ratio: 16 / 9; }
.card-grande .card-texto { padding: 16px 20px 20px; }
.card-grande .card-titulo { font-size: 40px; line-height: .98; }
.destaque-lado { display: grid; grid-template-rows: repeat(3, 1fr); gap: 14px; }
.card-lado { flex-direction: row; }
.card-lado .card-img { aspect-ratio: auto; width: 42%; flex: none; min-height: 120px; }
/* Mostra só a metade de cima da arte (a foto) */
.card-lado .card-img img { height: 200%; }
.card-lado .card-titulo { font-size: 21px; }

.secao-cabecalho { display: flex; align-items: center; gap: 18px; background: var(--fundo-marca); color: #fff; border-radius: var(--raio); padding: 22px 24px; }
.secao-cabecalho h1 { font-family: var(--fonte-titulo); font-weight: 400; font-size: 46px; line-height: 1; margin: 0; }
.secao-cabecalho p { margin: 4px 0 0; opacity: .95; }
.secao-foto { width: 92px; height: 92px; border-radius: 50%; object-fit: cover; border: 3px solid var(--cor-destaque); }
.secao-contagem { font-size: 14px; }

/* ---------- Vídeos do YouTube ---------- */
.videos { margin-top: 30px; background: var(--fundo-marca); border-radius: var(--raio); padding: 20px 22px 22px; color: #fff; }
.videos .titulo-secao { color: #fff; }
.videos .titulo-secao::before { background: #fff; }
.videos-grade { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.video-quadro { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; padding: 0; border-radius: 8px; overflow: hidden; background: #000; }
.video-quadro.video-vertical { aspect-ratio: 9 / 16; max-height: 640px; width: auto; margin: 0 auto; }
.video-quadro iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-capa img { width: 100%; height: 100%; object-fit: cover; }
.video-play { position: absolute; left: 50%; top: 50%; width: 76px; height: 54px; margin: -27px 0 0 -38px; border-radius: 14px; background: #ff0033; box-shadow: 0 6px 20px rgba(0,0,0,.35); transition: transform .15s; }
.video-play::after { content: ''; position: absolute; left: 31px; top: 16px; border-left: 20px solid #fff; border-top: 11px solid transparent; border-bottom: 11px solid transparent; }
.video-capa:hover .video-play { transform: scale(1.08); }
.video-novo { position: absolute; left: 12px; top: 12px; background: var(--cor-destaque); color: var(--cor-escura); font-weight: 800; font-size: 12px; text-transform: uppercase; letter-spacing: .5px; padding: 4px 10px; border-radius: 4px; }
.video-titulo { font-family: var(--fonte-titulo); font-weight: 400; font-size: 28px; line-height: 1.02; margin: 12px 0 4px; }
.video-info { margin: 0; font-size: 14px; opacity: .9; }
.video-info a { color: #fff; font-weight: 700; text-decoration: underline; }
.video-lista { display: flex; flex-direction: column; gap: 10px; }
.video-item { display: flex; gap: 12px; text-align: left; background: rgba(255,255,255,.1); border: 0; border-radius: 8px; padding: 8px; color: #fff; }
.video-item:hover { background: rgba(255,255,255,.2); }
.video-item-img { position: relative; flex: none; width: 128px; aspect-ratio: 16 / 9; border-radius: 6px; overflow: hidden; background: #000; }
.video-item-img img { width: 100%; height: 100%; object-fit: cover; }
.video-short { position: absolute; right: 4px; bottom: 4px; background: #ff0033; font-size: 10px; font-weight: 700; padding: 1px 5px; border-radius: 3px; }
.video-item > span:last-child { display: flex; flex-direction: column; min-width: 0; }
.video-item strong { font-size: 14px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.video-item time { font-size: 12px; opacity: .8; margin-top: 2px; }
.bt-youtube { background: #ff0033; margin-top: 4px; }

/* ---------- Personagens ---------- */
.personagens:empty { display: none; }
.personagens { margin-top: 30px; }
.personagens-grade { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.personagem { display: flex; align-items: stretch; gap: 18px; padding: 0 18px 0 0; border-radius: var(--raio); background: linear-gradient(120deg, var(--cor-escura), var(--cor-principal) 70%, var(--cor-meio)); color: #fff; position: relative; overflow: hidden; }
.personagem::after { content: ''; position: absolute; right: -40px; top: -40px; width: 160px; height: 160px; border-radius: 50%; background: var(--cor-destaque); opacity: .14; }
.personagem:hover { color: #fff; box-shadow: 0 10px 24px rgba(10,29,79,.25); }
.personagem-foto { flex: none; width: 168px; min-height: 200px; overflow: hidden; border-right: 4px solid var(--cor-destaque); background: var(--cor-secundaria); display: grid; place-items: center; }
.personagem-foto img { width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform .3s; }
.personagem:hover .personagem-foto img { transform: scale(1.04); }
.personagem-texto { justify-content: center; padding: 16px 0; }
.personagem-inicial { font-family: var(--fonte-titulo); font-size: 56px; color: #fff; }
.personagem-texto { display: flex; flex-direction: column; gap: 2px; min-width: 0; position: relative; z-index: 1; }
.personagem-nome { font-family: var(--fonte-titulo); font-size: 36px; line-height: 1; color: var(--cor-destaque); }
.personagem-chamada { font-weight: 600; }
.personagem-ultimo { font-size: 13.5px; opacity: .85; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.personagem-ver { font-size: 13.5px; font-weight: 700; margin-top: 4px; }

/* ---------- Lista + lateral ---------- */
.layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 28px; margin-top: 30px; margin-bottom: 40px; align-items: start; }
.titulo-secao { font-family: var(--fonte-titulo); font-weight: 400; font-size: 30px; color: var(--cor-escura); margin: 0 0 14px; display: flex; align-items: center; gap: 12px; }
.titulo-secao::before { content: ''; width: 6px; height: 26px; border-radius: 3px; background: var(--degrade); }
.grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 18px; }
.bt-mais { display: block; margin: 24px auto 0; background: var(--branco); border: 2px solid var(--cor-principal); color: var(--cor-principal); font-weight: 700; padding: 11px 26px; border-radius: 999px; }
.bt-mais:hover { background: var(--cor-principal); color: #fff; }
.grade .vazio { grid-column: 1 / -1; }
.vazio, .carregando { background: var(--branco); border-radius: var(--raio); padding: 28px; text-align: center; color: var(--texto-suave); }

.lateral { display: flex; flex-direction: column; gap: 18px; position: sticky; top: 64px; }
.caixa { background: var(--branco); border-radius: var(--raio); padding: 18px; box-shadow: 0 1px 3px rgba(10,29,79,.08); }
.caixa h2 { font-family: var(--fonte-titulo); font-weight: 400; font-size: 24px; line-height: 1.05; margin: 0 0 6px; color: var(--cor-escura); }
.caixa p { margin: 0 0 12px; color: var(--texto-suave); font-size: 14.5px; }
.caixa-whats { background: var(--fundo-marca); }
.caixa-whats h2, .caixa-whats p { color: #fff; }
.lista-cidades { list-style: none; margin: 0; padding: 0; }
.lista-cidades li { display: flex; justify-content: space-between; border-top: 1px solid var(--linha); padding: 8px 0; font-weight: 600; font-size: 15px; }
.lista-cidades li:first-child { border-top: 0; }
.lista-cidades span { color: var(--texto-suave); font-weight: 500; }

.bt { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 9px 16px; border-radius: 999px; font-weight: 700; font-size: 14px; border: 0; color: #fff; }
.bt:hover { color: #fff; filter: brightness(1.08); }
.bt-whats { background: var(--cor-whats); }
.bt-insta { background: linear-gradient(45deg, #f09433, #dc2743, #bc1888); }
.bt-face { background: #1877f2; }
.bt-copiar { background: var(--cor-escura); }
.caixa .bt { width: 100%; }

/* ---------- Matéria ---------- */
.layout-materia { margin-top: 24px; }
.materia { background: var(--branco); border-radius: var(--raio); padding: 28px 34px 30px; box-shadow: 0 1px 3px rgba(10,29,79,.08); min-width: 0; }
.migalha { font-size: 13.5px; color: var(--texto-suave); margin-bottom: 10px; }
.migalha a { color: var(--cor-secundaria); font-weight: 700; text-transform: uppercase; letter-spacing: .5px; }
.migalha span { margin: 0 4px; }
.materia-titulo { font-family: var(--fonte-titulo); font-weight: 400; font-size: 52px; line-height: .98; margin: 0 0 14px; color: var(--cor-escura); letter-spacing: .3px; }
.materia-linha-fina { font-size: 19px; line-height: 1.5; color: #2f3a52; margin: 0 0 16px; }
.materia-meta { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 14px; color: var(--texto-suave); border-top: 1px solid var(--linha); border-bottom: 1px solid var(--linha); padding: 10px 0; margin-bottom: 20px; }
.materia-midia { margin: 0 0 22px; display: flex; flex-direction: column; gap: 10px; }
.materia-midia img, .materia-midia video { width: 100%; max-width: 640px; margin: 0 auto; border-radius: 8px; background: #000; }
.materia-midia figcaption { text-align: center; font-size: 13px; color: var(--texto-suave); }
.materia-corpo { font-size: 18px; line-height: 1.7; max-width: 680px; }
.materia-corpo p { margin: 0 0 18px; }
.materia-fonte { font-size: 15px; color: var(--texto-suave); border-left: 4px solid var(--cor-secundaria); padding-left: 12px; }
.materia-personagem { display: inline-flex; align-items: center; gap: 10px; background: #fff7dc; border: 1px solid #f2dc8f; border-radius: 999px; padding: 6px 16px 6px 6px; margin: 4px 0 14px; font-size: 15px; }
.materia-personagem img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; }
.materia-tags { list-style: none; padding: 0; margin: 6px 0 18px; display: flex; flex-wrap: wrap; gap: 8px; }
.materia-tags li { background: #eaf6f8; color: #0b7f8a; font-size: 13px; font-weight: 600; padding: 4px 10px; border-radius: 999px; }
.compartilhar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; border-top: 1px solid var(--linha); padding-top: 18px; }
.compartilhar > span { font-weight: 700; margin-right: 4px; }

.relacionadas { display: flex; flex-direction: column; }
.relacionada { display: flex; gap: 12px; padding: 10px 0; border-top: 1px solid var(--linha); }
.relacionada:first-child { border-top: 0; padding-top: 0; }
.relacionada img, .relacionada .sem-imagem { width: 92px; height: 70px; flex: none; object-fit: cover; object-position: top; border-radius: 6px; }
.relacionada > span { display: flex; flex-direction: column; min-width: 0; }
.relacionada strong { font-family: var(--fonte-titulo); font-weight: 400; font-size: 18px; line-height: 1.05; color: var(--cor-escura); }

/* ---------- Rodapé ---------- */
.rodape { background: var(--cor-escura); color: #c9d4f0; padding-top: 30px; font-size: 14.5px; }
.rodape a { color: #fff; }
.rodape-linha { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 20px; }
.rodape-linha p { margin: 4px 0; }
.rodape-marca { font-family: var(--fonte-titulo); font-weight: 400; font-size: 30px; color: #fff; }
.rodape-copy { border-top: 1px solid rgba(255,255,255,.12); margin-top: 22px; padding-top: 14px; padding-bottom: 18px; font-size: 13px; opacity: .8; }

/* ---------- Celular e tablet ---------- */
@media (max-width: 960px) {
  .layout { grid-template-columns: 1fr; }
  .lateral { position: static; }
  .destaque-grade { grid-template-columns: 1fr; }
  .destaque-lado { grid-template-rows: none; }
  .videos-grade { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .topo-links a:first-child { display: none; }
  .cabecalho-linha { flex-direction: column; align-items: stretch; gap: 12px; padding-top: 12px; padding-bottom: 12px; }
  .marca-logo { width: 48px; height: 48px; }
  .marca-nome { font-size: 34px; }
  .marca-sub { font-size: 11px; }
  .busca input { width: 100%; flex: 1; }
  .card-grande .card-titulo { font-size: 31px; }
  .personagens-grade { grid-template-columns: 1fr; }
  .videos { padding: 16px 14px; margin-left: -16px; margin-right: -16px; border-radius: 0; }
  .video-titulo { font-size: 24px; }
  .personagem-foto { width: 120px; min-height: 160px; }
  .personagem-nome { font-size: 30px; }
  .grade { grid-template-columns: 1fr 1fr; gap: 12px; }
  .grade .card-titulo { font-size: 19px; }
  .materia { padding: 18px 16px 22px; border-radius: 0; margin: 0 -16px; }
  .materia-titulo { font-size: 38px; }
  .materia-linha-fina { font-size: 17px; }
  .materia-corpo { font-size: 17px; }
  .secao-cabecalho h1 { font-size: 36px; }
}
@media (max-width: 420px) {
  .grade { grid-template-columns: 1fr; }
  .card-lado .card-titulo { font-size: 18px; }
}

/* ---------- Previsão do tempo ---------- */
.menu-linha a.menu-tempo::before { content: '☀ '; }
.tempo-pagina { margin-top: 26px; margin-bottom: 40px; }
.tempo-cabeca { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; }
.tempo-cabeca .titulo-secao { font-size: 38px; margin-bottom: 6px; }
.tempo-status { margin: 0; color: var(--texto-suave); font-size: 14px; }
.tempo-abas { display: flex; gap: 8px; overflow-x: auto; margin: 10px 0 18px; padding-bottom: 2px; }
.tempo-abas button { flex: none; border: 2px solid var(--cor-principal); background: var(--branco); color: var(--cor-principal); font-weight: 700; font-size: 14.5px; padding: 8px 16px; border-radius: 999px; }
.tempo-abas button[aria-selected="true"] { background: var(--cor-principal); color: #fff; }
.tempo-layout { display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 24px; align-items: start; }
.tempo-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; }
.tempo-card { display: flex; flex-direction: column; gap: 4px; text-align: left; background: var(--branco); border: 2px solid transparent; border-radius: var(--raio); padding: 14px 16px; box-shadow: 0 1px 3px rgba(10,29,79,.08); color: var(--texto); }
.tempo-card:hover { border-color: #b9d3ea; }
.tempo-card.ativo { border-color: var(--cor-secundaria); box-shadow: 0 4px 14px rgba(0,163,177,.18); }
.tempo-card-cidade { font-family: var(--fonte-titulo); font-size: 23px; line-height: 1; color: var(--cor-escura); }
.tempo-card-agora { display: flex; align-items: center; gap: 8px; }
.tempo-card-agora strong { font-size: 38px; font-weight: 700; line-height: 1.1; color: var(--cor-principal); }
.tempo-icone { font-size: 32px; line-height: 1; }
.tempo-card-texto { font-size: 14px; color: var(--texto-suave); }
.tempo-card-linha { display: flex; justify-content: space-between; gap: 8px; font-size: 14px; font-weight: 600; }
.tempo-card-mar { font-size: 13.5px; color: #0b7f8a; font-weight: 600; background: #eaf6f8; border-radius: 6px; padding: 3px 8px; margin-top: 2px; }

.tempo-painel { background: var(--fundo-marca); color: #fff; border-radius: var(--raio); padding: 20px; min-width: 0; }
.tempo-painel:empty { display: none; }
.tempo-painel h2 { font-family: var(--fonte-titulo); font-weight: 400; font-size: 38px; line-height: 1; margin: 0; }
.tempo-painel h3 { font-family: var(--fonte-titulo); font-weight: 400; font-size: 22px; margin: 18px 0 8px; }
.tempo-painel-topo { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.tempo-painel-texto { margin: 4px 0 0; opacity: .92; }
.tempo-painel-agora { display: flex; align-items: center; gap: 6px; font-size: 52px; font-weight: 700; line-height: 1; white-space: nowrap; }
.tempo-painel-agora span { font-size: 44px; }
.tempo-info { list-style: none; padding: 0; margin: 16px 0 0; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
.tempo-info li { background: rgba(0,25,80,.35); border-radius: 8px; padding: 8px 10px; display: flex; flex-direction: column; min-width: 0; }
.tempo-info small { font-size: 12px; opacity: .85; }
.tempo-info strong { font-size: 16px; }
.tempo-horas { list-style: none; padding: 0 0 6px; margin: 0; display: flex; gap: 6px; overflow-x: auto; }
.tempo-horas li { flex: none; width: 58px; background: rgba(0,25,80,.35); border-radius: 8px; padding: 6px 4px; display: flex; flex-direction: column; align-items: center; font-size: 13px; }
.tempo-horas .ic { font-size: 20px; }
.tempo-horas small { font-size: 11.5px; opacity: .85; }
.tempo-dias { list-style: none; padding: 0; margin: 0; }
.tempo-dias li { display: grid; grid-template-columns: 70px 32px 1fr 38px 38px; align-items: center; gap: 6px; padding: 7px 0; border-top: 1px solid rgba(255,255,255,.18); }
.tempo-dias li:first-child { border-top: 0; }
.tempo-dias .dia { font-weight: 700; text-transform: capitalize; }
.tempo-dias .ic { font-size: 22px; }
.tempo-dias .chuva { font-size: 13.5px; opacity: .9; }
.tempo-dias .max { font-weight: 700; text-align: right; }
.tempo-dias .min { opacity: .75; text-align: right; }
.tempo-fonte { font-size: 13px; color: var(--texto-suave); margin-top: 22px; }
.tempo-fonte a { color: var(--cor-meio); text-decoration: underline; }

.tempo-mini { list-style: none; margin: 4px 0 14px; padding: 0; }
.tempo-mini li { border-top: 1px solid var(--linha); }
.tempo-mini li:first-child { border-top: 0; }
.tempo-mini a { display: grid; grid-template-columns: 1fr 26px 40px 62px; align-items: center; gap: 6px; padding: 7px 0; font-size: 15px; }
.tempo-mini .nome { font-weight: 600; }
.tempo-mini .ic { font-size: 20px; text-align: center; }
.tempo-mini strong { color: var(--cor-principal); font-size: 17px; text-align: right; }
.tempo-mini small { color: #0b7f8a; font-size: 12.5px; text-align: right; }
.bt-tempo { background: var(--cor-principal); }

@media (max-width: 960px) {
  .tempo-layout { grid-template-columns: 1fr; }
  .tempo-painel { position: static; order: -1; }
}
@media (max-width: 720px) {
  .tempo-grade { grid-template-columns: 1fr 1fr; gap: 10px; }
  .tempo-card { padding: 12px; }
  .tempo-card-cidade { font-size: 20px; }
  .tempo-card-agora strong { font-size: 30px; }
  .tempo-icone { font-size: 26px; }
  .tempo-card-linha { flex-direction: column; gap: 0; font-size: 13px; }
  .tempo-painel { margin: 0 -16px; border-radius: 0; padding: 18px 16px; }
  .tempo-info { grid-template-columns: 1fr 1fr; }
  .tempo-painel-agora { font-size: 44px; }
}