/*
 * Elo Clima - hero [clima_hero]. Enfileirado só nas páginas que usam o
 * shortcode (ver Elo_Clima_Shortcodes::maybe_enqueue_assets).
 *
 * Conversa com o hero do elo-vazao ([vazao_agora_claro]) DE PROPÓSITO:
 * mesma família visual (texto branco sobre imagem escurecida, pílulas
 * translúcidas com desfoque, linha de status e créditos discretos). Não
 * reaproveita as classes .elo-vazao-* (plugins separados, cada um com seu
 * CSS) - as regras aqui são equivalentes, prefixadas .elo-clima-hero.
 *
 * O shortcode NUNCA desenha fundo nem overlay - a cena de fundo e o color
 * overlay são da linha do WPBakery. Aqui é só o conteúdo, todo branco.
 * Mobile-first; cores como custom properties no topo pra ajuste futuro.
 */

.elo-clima-hero {
  --elo-clima-hero-cor-texto: #ffffff;
  --elo-clima-hero-cor-texto-suave: rgba(255, 255, 255, 0.82);
  --elo-clima-hero-cor-texto-tenue: rgba(255, 255, 255, 0.72);
  --elo-clima-hero-cor-borda: rgba(255, 255, 255, 0.35);
  --elo-clima-hero-cor-separador: rgba(255, 255, 255, 0.4);
  --elo-clima-hero-pilula-fundo: rgba(255, 255, 255, 0.14);
  --elo-clima-hero-pilula-fundo-hover: rgba(255, 255, 255, 0.24);
  --elo-clima-hero-raio: 12px;
  --elo-clima-hero-raio-pequeno: 6px;
  --elo-clima-hero-fonte: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  /* Durações das animações do ícone grande (constantes nomeadas, pra
     ajustar o ritmo sem mexer na estrutura). Tudo LENTO e discreto - o
     movimento é pra dar atmosfera, não pra chamar atenção. */
  --elo-clima-anim-sol: 90s;      /* rotação dos raios - tão lenta que se sente mais do que se vê */
  --elo-clima-anim-nuvem: 7s;     /* flutuação horizontal leve */
  --elo-clima-anim-gota: 2s;      /* ciclo de queda de uma gota */
  --elo-clima-anim-floco: 3.6s;   /* ciclo de queda de um floco (mais lento) */
  --elo-clima-anim-neblina: 6s;   /* deslize das linhas de neblina */
  --elo-clima-anim-raio: 4.5s;    /* oscilação de brilho do raio (nunca pisca) */
  --elo-clima-anim-lua: 8s;       /* boia muito leve da lua */
  /* Cintilar das estrelas do glifo de noite de céu limpo. Dois ritmos
     DIFERENTES e sem razão inteira entre si (4.5 e 6.2) pra as duas nunca
     ficarem em sincronia - piscar junto lê como um blink de interface, não
     como céu. */
  --elo-clima-anim-estrela-1: 4.5s;
  --elo-clima-anim-estrela-2: 6.2s;
  --elo-clima-hover-dur: 0.16s;   /* subida da pílula/box no hover - resposta, não animação */

  font-family: var(--elo-clima-hero-fonte);
  color: var(--elo-clima-hero-cor-texto);
  box-sizing: border-box;
  max-width: 100%;
  text-align: left;
}

.elo-clima-hero *,
.elo-clima-hero *::before,
.elo-clima-hero *::after {
  box-sizing: border-box;
}

/* ---- Linha de status: ponto + "CONDIÇÃO AGORA" + separador + idade ---- */
.elo-clima-hero__status-linha {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.elo-clima-hero__selo-texto,
.elo-clima-hero__idade {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.elo-clima-hero__selo-texto {
  color: var(--elo-clima-hero-cor-texto-suave);
}

.elo-clima-hero__idade {
  color: var(--elo-clima-hero-cor-texto-tenue);
}

.elo-clima-hero__separador {
  width: 1px;
  height: 12px;
  background: var(--elo-clima-hero-cor-separador);
  flex-shrink: 0;
}

.elo-clima-hero__ponto {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  background: #fff;
  animation: elo-clima-hero-pulsar 1.8s ease-in-out infinite;
}

@keyframes elo-clima-hero-pulsar {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.5); }
  50% { box-shadow: 0 0 0 6px rgba(255, 255, 255, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .elo-clima-hero__ponto { animation: none; }
}

/* ---- Nome do local ---- */
.elo-clima-hero__titulo {
  margin: 16px 0 0;
  font-size: clamp(1.5rem, 4vw, 2.25rem);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  line-height: 1.1;
  color: var(--elo-clima-hero-cor-texto);
}

/* ---- Bloco principal: temperatura grande + ícone da condição ---- */
.elo-clima-hero__atual {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  column-gap: 20px;
  row-gap: 8px;
  margin-top: 12px;
}

.elo-clima-hero__temp {
  display: inline-flex;
  align-items: flex-start;
  font-size: clamp(5rem, 16vw, 11rem);
  line-height: 0.85;
  font-weight: 900;
  color: var(--elo-clima-hero-cor-texto);
  font-variant-numeric: tabular-nums;
}

.elo-clima-hero__grau {
  font-size: 0.4em;
  font-weight: 700;
  margin-top: 0.15em;
}

.elo-clima-hero__icone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--elo-clima-hero-cor-texto);
  flex-shrink: 0;
}

/* Presença equivalente ao número da temperatura (clamp(5rem,16vw,11rem)) -
   antes o ícone parecia um adorno ao lado do número. Fica só um pouco
   abaixo do tamanho da fonte da temperatura pra não dominar. */
.elo-clima-hero__icone-svg {
  width: clamp(4.5rem, 15vw, 10rem);
  height: clamp(4.5rem, 15vw, 10rem);
  /* traço proporcionalmente mais fino no ícone grande (senão fica pesado
     no tamanho do hero) - o stroke-width base do SVG é 2 num 24x24. */
  stroke-width: 1.4;
}

/* Fila dos boxes de condição (rótulo + box extra condicional) - lado a
   lado, quebrando em linhas no celular se não couberem (flex-wrap), nunca
   rolagem horizontal. A margem superior vive AQUI (não em cada box), pra
   os dois boxes ficarem alinhados. */
.elo-clima-hero__condicoes {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 10px;
  margin-top: 12px;
}

/* Box escuro semitransparente, cantos arredondados, SEM borda - de
   propósito diferente das pílulas de baixo (claras/translúcidas com
   borda), pra não parecer da mesma família. O box abraça o próprio texto
   (não estica). Cor e tamanho do texto inalterados. O box extra usa
   EXATAMENTE esta mesma classe - tratamento visual idêntico. */
.elo-clima-hero__condicao {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 6px 14px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.32);
  font-size: clamp(1rem, 2.6vw, 1.35rem);
  font-weight: 600;
  color: var(--elo-clima-hero-cor-texto-suave);
}

/* Ícone do box da condição (sensação, box extra) - proporcional à fonte
   do box (1em), à esquerda do texto, mesmo tratamento de traço fino das
   pílulas. O box do rótulo não tem ícone (não repete o ícone grande ao
   lado da temperatura). */
.elo-clima-hero__condicao-icone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 1em;
  height: 1em;
  color: var(--elo-clima-hero-cor-texto-suave);
}

.elo-clima-hero__condicao-icone-svg {
  width: 100%;
  height: 100%;
}

/* ---- Pílulas (máx/mín, sensação, chuva, umidade, compartilhar) ----
   A fila ocupa 100% da largura, distribuindo as pílulas entre si (as duas
   variantes de largura estão logo abaixo). flex-wrap garante que a fila
   quebra pra linha de baixo no celular em vez de gerar rolagem horizontal
   (as pílulas nunca encolhem abaixo do próprio conteúdo - min-width:auto
   padrão -, então quebram em vez de vazar). */
.elo-clima-hero__pilulas {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
  width: 100%;
  max-width: 100%;
}

/* VARIANTE (a) igual: todas as pílulas do mesmo tamanho (base 0 + grow
   igual). VARIANTE (b) conteúdo: largura proporcional ao conteúdo (base =
   tamanho natural + grow preenche o resto). O alvo é sempre o FILHO DIRETO
   da fila - as pílulas soltas e o wrap do compartilhar -, nunca o <button>
   dentro do wrap. */
.elo-clima-hero__pilulas--largura-igual > .elo-clima-hero__pilula,
.elo-clima-hero__pilulas--largura-igual > .elo-clima-hero__compartilhar-wrap {
  flex: 1 1 0;
}

.elo-clima-hero__pilulas--largura-conteudo > .elo-clima-hero__pilula,
.elo-clima-hero__pilulas--largura-conteudo > .elo-clima-hero__compartilhar-wrap {
  flex: 1 1 auto;
}

.elo-clima-hero__pilula {
  display: inline-flex;
  align-items: center;
  justify-content: center; /* conteúdo (ícone + texto) sempre centralizado na pílula */
  gap: 10px;
  min-height: 48px;
  padding: 10px 18px;
  border-radius: 100px;
  background: var(--elo-clima-hero-pilula-fundo);
  border: 1px solid var(--elo-clima-hero-cor-borda);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  line-height: 1.2;
  color: var(--elo-clima-hero-cor-texto);
  max-width: 100%;
}

/* Sem desfoque (navegador antigo) o fundo translúcido claro some sobre a
   foto - cai pra um escuro semitransparente que se sustenta sozinho. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .elo-clima-hero__pilula {
    background: rgba(15, 23, 42, 0.55);
  }
}

.elo-clima-hero__pilula-icone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: var(--elo-clima-hero-cor-texto-suave);
}

.elo-clima-hero__pilula-icone-svg {
  width: 100%;
  height: 100%;
}

/* Parte ILUMINADA do glifo de fase da lua - preenchida na MESMA cor do
   traço (currentColor, branco no contexto da pílula), opacidade total,
   mesmo peso visual do contorno. O !important é deliberado: o
   fill="currentColor" inline do <path>/<circle> é só atributo de
   apresentação (especificidade zero) e era sobrescrito por alguma regra de
   SVG do tema (Salient), pintando a lua num tom escuro quase invisível
   sobre a pílula enquanto o contorno saía branco. Regra escopada só a esta
   classe - nunca toca os demais ícones (que são stroke-only, fill none). */
.elo-clima-lua__iluminada {
  fill: currentColor !important;
  fill-opacity: 1 !important;
  stroke: none !important;
}

.elo-clima-hero__pilula-texto {
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--elo-clima-hero-cor-texto);
  white-space: nowrap;
}

/* O botão de compartilhar é um <button> - neutraliza o chrome nativo pra
   ficar idêntico às pílulas <span> (mesma disciplina do hero da vazão). */
button.elo-clima-hero__pilula {
  cursor: pointer;
  margin: 0;
  font-family: inherit;
  appearance: none;
  -webkit-appearance: none;
}

button.elo-clima-hero__pilula::-moz-focus-inner {
  border: 0;
  padding: 0;
}

button.elo-clima-hero__pilula:hover,
button.elo-clima-hero__pilula:focus-visible {
  background: var(--elo-clima-hero-pilula-fundo-hover);
}

/* Border-radius com especificidade elevada + !important pra vencer a regra
   de botão do tema Salient (body[data-button-style] button{border-radius:4px})
   - mesmo achado já documentado no hero da vazão. */
.elo-clima-hero__pilula.elo-clima-hero__pilula.elo-clima-hero__pilula {
  border-radius: 100px !important;
}

/* ---- Menu de compartilhamento (WhatsApp / X / Mais) ----
   position:fixed; top/left são escritos pelo JS a cada abertura (mesma
   técnica do hero da vazão). Fundo SEMPRE claro translúcido (contraste
   garantido por si só sobre foto/escuro/claro), texto escuro por cima. */
.elo-clima-hero__compartilhar-wrap {
  position: relative;
  display: flex;
}

/* O botão preenche a largura do wrap (que é quem participa do flex da
   fila) - senão, na distribuição a 100%, só o wrap cresceria e o botão
   ficaria do tamanho do conteúdo, desalinhado das demais pílulas. */
.elo-clima-hero__compartilhar-wrap > .elo-clima-hero__pilula--compartilhar {
  flex: 1 1 auto;
  width: 100%;
}

.elo-clima-hero__compartilhar-menu,
.elo-clima-hero__compartilhar-menu * {
  box-sizing: border-box;
}

.elo-clima-hero__compartilhar-menu {
  position: fixed;
  z-index: 20;
  min-width: 240px;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  border-radius: var(--elo-clima-hero-raio);
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.2), 0 4px 12px rgba(15, 23, 42, 0.1);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .elo-clima-hero__compartilhar-menu {
    background: #ffffff;
  }
}

.elo-clima-hero__compartilhar-menu[hidden] {
  display: none;
}

.elo-clima-hero__compartilhar-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  padding: 12px 14px;
  border: none;
  border-radius: var(--elo-clima-hero-raio-pequeno);
  background: transparent;
  color: #0f172a;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  font-family: inherit;
  appearance: none;
  -webkit-appearance: none;
  transition: background-color 0.12s ease;
}

.elo-clima-hero__compartilhar-item:hover,
.elo-clima-hero__compartilhar-item:focus-visible {
  background: rgba(15, 23, 42, 0.06);
}

.elo-clima-hero__compartilhar-item[hidden] {
  display: none;
}

.elo-clima-hero__compartilhar-rotulo {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #475569;
  flex-shrink: 0;
}

.elo-clima-hero__compartilhar-item-acao {
  font-size: 0.72rem;
  font-weight: 500;
  color: #0f172a;
  text-align: right;
}

@media (prefers-reduced-motion: reduce) {
  .elo-clima-hero__compartilhar-item { transition: none; }
}

/* ---- Texto do dia (texto_hoje) ----
   No máximo cerca de metade da largura no desktop, largura total no
   celular (pedido explícito). Corpo legível, não miúdo. */
.elo-clima-hero__texto {
  margin: 24px 0 0;
  max-width: 100%;
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--elo-clima-hero-cor-texto);
}

@media (min-width: 880px) {
  .elo-clima-hero__texto {
    max-width: 50%;
  }
}

/* ---- Créditos / atribuição obrigatória ([clima_creditos], rodapé) ----
   Não faz mais parte do hero - vai uma vez só no rodapé da página, sobre
   fundo desconhecido (pode ser claro ou escuro). Por isso NÃO fixa cor
   própria: herda a cor do texto do rodapé (color: inherit) com opacidade
   reduzida, funcionando nos dois casos sem precisar de variante. */
.elo-clima-creditos {
  margin: 0;
  font-size: 0.8rem;
  line-height: 1.5;
  color: inherit;
  opacity: 0.75;
}

.elo-clima-creditos a {
  color: inherit;
  text-decoration: underline;
}

/* ==================================================================
 * ANIMAÇÕES (CSS puro, sem JS)
 *
 * PARTE 1 - só o ícone GRANDE da condição (.elo-clima-hero__icone-svg)
 * anima, de forma contínua, lenta e discreta. As classes elo-anim-* estão
 * nos mesmos SVGs usados nas pílulas/boxes, mas o CSS abaixo é escopado ao
 * ícone grande, então lá eles ficam estáticos.
 *
 * PARTE 2 - pílulas e boxes sobem um pouco no hover, só em ponteiro real.
 *
 * prefers-reduced-motion desliga TUDO (bloco no fim). Salient: as classes
 * elo-anim-* são únicas (o tema não as alcança); o único ponto de atrito
 * possível é transform em <button>:hover, resolvido com especificidade
 * (regra sob .elo-clima-hero, ver Parte 2).
 * ================================================================== */

/* ---- Keyframes ---- */
@keyframes elo-clima-girar { to { transform: rotate(360deg); } }

@keyframes elo-clima-flutuar {
  0%, 100% { transform: translateX(-1px); }
  50% { transform: translateX(1px); }
}

@keyframes elo-clima-cair {
  0% { opacity: 0; transform: translateY(-2px); }
  20% { opacity: 1; }
  70% { opacity: 1; }
  100% { opacity: 0; transform: translateY(4px); }
}

@keyframes elo-clima-neblina {
  0%, 100% { transform: translateX(-1.5px); opacity: 0.45; }
  50% { transform: translateX(1.5px); opacity: 1; }
}

@keyframes elo-clima-brilho {
  0%, 100% { opacity: 0.35; }
  50% { opacity: 1; }
}

@keyframes elo-clima-boiar {
  0%, 100% { transform: translateY(-0.6px); }
  50% { transform: translateY(0.6px); }
}

/* Cintilar: SÓ opacidade, e num intervalo curto (0.62 -> 1). O brilho do
   raio da tempestade vai a 0.35 de propósito, porque ali o pisca-pisca É a
   informação; aqui a estrela nunca chega a sumir - se sumisse, o olho pegaria
   o movimento em vez do céu. */
@keyframes elo-clima-cintilar {
  0%, 100% { opacity: 0.62; }
  50% { opacity: 1; }
}

/* ---- Parte 1: ícone grande ---- */
/* Sol: grupo inteiro girando devagar. transform-box: fill-box faz o
   transform-origin: center cair no centro do próprio grupo (~12,12). */
.elo-clima-hero__icone-svg .elo-anim-sol {
  transform-box: fill-box;
  transform-origin: center;
  animation: elo-clima-girar var(--elo-clima-anim-sol) linear infinite;
}

.elo-clima-hero__icone-svg .elo-anim-nuvem {
  animation: elo-clima-flutuar var(--elo-clima-anim-nuvem) ease-in-out infinite;
}

.elo-clima-hero__icone-svg .elo-anim-lua {
  animation: elo-clima-boiar var(--elo-clima-anim-lua) ease-in-out infinite;
}

/* ---- Glifo de noite de céu limpo (crescente + 2 estrelas) ----
   A boia (elo-anim-lua) fica no GRUPO inteiro, então crescente e estrelas
   sobem e descem juntos; o cintilar é por estrela, só opacidade - as duas
   animações não brigam porque mexem em propriedades diferentes. */
.elo-clima-hero__icone-svg .elo-anim-estrela {
  animation: elo-clima-cintilar var(--elo-clima-anim-estrela-1) ease-in-out infinite;
}

.elo-clima-hero__icone-svg .elo-anim-estrela--2 {
  animation-duration: var(--elo-clima-anim-estrela-2);
  animation-delay: -2.1s; /* começa fora de fase da primeira */
}


.elo-clima-hero__icone-svg .elo-anim-raio {
  animation: elo-clima-brilho var(--elo-clima-anim-raio) ease-in-out infinite;
}

.elo-clima-hero__icone-svg .elo-anim-gota {
  animation: elo-clima-cair var(--elo-clima-anim-gota) linear infinite;
}

.elo-clima-hero__icone-svg .elo-anim-floco {
  animation: elo-clima-cair var(--elo-clima-anim-floco) linear infinite;
}

.elo-clima-hero__icone-svg .elo-anim-neblina {
  animation: elo-clima-neblina var(--elo-clima-anim-neblina) ease-in-out infinite;
}

/* Defasagem entre gotas/flocos - delays NEGATIVOS pra já começarem
   espalhados (nunca todos juntos, senão vira pisca-pisca). */
.elo-clima-hero__icone-svg .elo-anim-gota--1 { animation-delay: 0s; }
.elo-clima-hero__icone-svg .elo-anim-gota--2 { animation-delay: -0.7s; }
.elo-clima-hero__icone-svg .elo-anim-gota--3 { animation-delay: -1.3s; }
.elo-clima-hero__icone-svg .elo-anim-gota--4 { animation-delay: -0.35s; }
.elo-clima-hero__icone-svg .elo-anim-gota--5 { animation-delay: -1s; }
.elo-clima-hero__icone-svg .elo-anim-gota--6 { animation-delay: -1.6s; }
.elo-clima-hero__icone-svg .elo-anim-floco--1 { animation-delay: 0s; }
.elo-clima-hero__icone-svg .elo-anim-floco--2 { animation-delay: -1.2s; }
.elo-clima-hero__icone-svg .elo-anim-floco--3 { animation-delay: -2.4s; }
.elo-clima-hero__icone-svg .elo-anim-floco--4 { animation-delay: -0.6s; }
.elo-clima-hero__icone-svg .elo-anim-floco--5 { animation-delay: -1.8s; }
.elo-clima-hero__icone-svg .elo-anim-floco--6 { animation-delay: -3s; }
.elo-clima-hero__icone-svg .elo-anim-neblina--2 { animation-delay: -3s; }

/* Desligar a animação do ícone por atributo (animar_icone="nao").
   [class*="elo-anim-"] pega qualquer parte animável; a especificidade
   maior (3 classes) vence a regra base sem !important. */
.elo-clima-hero--icone-parado .elo-clima-hero__icone-svg [class*="elo-anim-"] {
  animation: none;
}

/* ---- Parte 2: hover das pílulas e boxes (só ponteiro real) ----
   hover:hover + pointer:fine exclui telas de toque (onde o hover simulado
   deixaria a pílula levantada depois do toque). O elemento INTEIRO sobe. O
   botão de compartilhar sobe junto e mantém o próprio efeito de fundo. */
@media (hover: hover) and (pointer: fine) {
  .elo-clima-hero .elo-clima-hero__pilula,
  .elo-clima-hero .elo-clima-hero__condicao {
    transition: transform var(--elo-clima-hover-dur) ease;
  }
  .elo-clima-hero .elo-clima-hero__pilula:hover,
  .elo-clima-hero .elo-clima-hero__condicao:hover {
    transform: translateY(-3px);
  }
  /* Desligar por atributo (hover_pilulas="nao") - as duas classes no mesmo
     elemento raiz elevam a especificidade acima da regra base. */
  .elo-clima-hero.elo-clima-hero--sem-hover .elo-clima-hero__pilula:hover,
  .elo-clima-hero.elo-clima-hero--sem-hover .elo-clima-hero__condicao:hover {
    transform: none;
  }
}

/* ---- Acessibilidade: desliga TUDO com prefers-reduced-motion ----
   !important vence as regras base (não-important), independente de
   especificidade. Cobre animação contínua E o movimento de hover. */
@media (prefers-reduced-motion: reduce) {
  .elo-clima-hero [class*="elo-anim-"] {
    animation: none !important;
  }
  .elo-clima-hero .elo-clima-hero__pilula,
  .elo-clima-hero .elo-clima-hero__condicao {
    transition: none !important;
  }
  .elo-clima-hero .elo-clima-hero__pilula:hover,
  .elo-clima-hero .elo-clima-hero__condicao:hover {
    transform: none !important;
  }
}

/* ===========================================================================
 * VIDRO ELABORADO DAS PÍLULAS - EXPERIMENTAL, ligado por atributo
 * ===========================================================================
 *
 * Bloco ISOLADO de propósito: tudo o que este efeito faz está escopado a
 * .elo-clima-hero--vidro, que só entra no HTML com vidro_pilulas="sim" (ou
 * ?elo_clima_vidro=novo). Sem a classe, nenhuma linha daqui vale e o hero é
 * exatamente o de sempre. Aprovar é trocar o padrão do atributo no PHP, uma
 * linha; reprovar é apagar deste comentário até o fim do arquivo.
 *
 * ---------------------------------------------------------------------------
 * O QUE MUDA, E POR QUE ASSIM
 *
 * 1. BORDA EM DEGRADÊ, não de cor uniforme - é a diferença principal da
 *    referência. Mais clara no topo e à esquerda, quase apagada embaixo e à
 *    direita: simula luz vindo de um ângulo, que é o que faz o olho ler vidro
 *    em vez de retângulo translúcido com contorno.
 *
 *    A TÉCNICA é um anel desenhado num pseudo-elemento e recortado por MÁSCARA:
 *    o degradê preenche a caixa inteira e a máscara subtrai o miolo, sobrando
 *    só 1px de contorno. Duas alternativas foram descartadas:
 *
 *      - background em duas camadas (padding-box + border-box): mais simples,
 *        mas o degradê da camada de baixo aparece ATRAVÉS do preenchimento
 *        translúcido da pílula e tinge o miolo inteiro. Serve pra fundo opaco,
 *        não aqui.
 *      - box-shadow com spread: não aceita degradê, só cor sólida.
 *
 *    Sem suporte a mask-composite, NADA disto se aplica (ver o @supports): a
 *    pílula fica com a borda de cor uniforme de sempre, que é o estado bom.
 *    Por isso o `border-color: transparent` mora DENTRO do @supports - fora
 *    dele, um navegador sem máscara ficaria sem borda nenhuma.
 *
 * 2. BRILHO INTERNO NO TOPO, sutil, como se a luz atravessasse a peça. É um
 *    box-shadow inset, duas camadas: um fio de 1px na aresta de cima e um
 *    esfumado curto logo abaixo dela. Não usa pseudo-elemento (o único
 *    disponível já é do anel) e não interfere no layout.
 *
 * O QUE NÃO MUDA: o desfoque do fundo (backdrop-filter, que já existia), os
 * cantos, o preenchimento translúcido, o tamanho e a posição. O anel é
 * absoluto e o brilho é sombra - nenhum dos dois ocupa espaço, então a fila de
 * pílulas mede exatamente o mesmo antes e depois (conferido em navegador).
 *
 * ---------------------------------------------------------------------------
 * INTENSIDADE - por que estes valores e não mais
 *
 * O conteúdo é o texto sobre a pílula; o efeito não pode disputar com ele. O
 * pico do degradê é 0,55 de branco só no canto superior esquerdo e cai pra
 * 0,04 no inferior direito - contra os 0,18 uniformes da borda atual. Medido
 * sobre as duas cenas extremas do hero (dia-sol, foto clara, e noite-limpa,
 * foto escura), a razão de contraste do texto da pílula NÃO muda com o efeito
 * ligado: o anel vive na borda, o brilho é interno e curto, e nenhum dos dois
 * chega à área onde o texto assenta.
 *
 * A LINHA DA CONDIÇÃO (.elo-clima-hero__condicao, onde ficam sensação e o box
 * extra) recebe o MESMO tratamento, com uma diferença de geometria: ela não
 * tem borda em repouso, então o anel é desenhado 1px pra DENTRO (inset: 0) em
 * vez de sobre a borda (inset: -1px). Sem isso, acrescentar borda mudaria o
 * tamanho da caixa. Ela também não ganha desfoque: não tinha antes, e pôr
 * agora seria mudar mais do que o efeito pede.
 */

.elo-clima-hero--vidro .elo-clima-hero__pilula,
.elo-clima-hero--vidro .elo-clima-hero__condicao {
  /* Contexto de posicionamento pro anel. No repouso não muda nada. */
  position: relative;
  /* Brilho interno: fio na aresta de cima + esfumado curto logo abaixo. */
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    inset 0 10px 14px -10px rgba(255, 255, 255, 0.16);
}

@supports ((-webkit-mask-composite: xor) or (mask-composite: exclude)) {
  /* A borda uniforme sai só quando o anel pode entrar no lugar dela. */
  .elo-clima-hero--vidro .elo-clima-hero__pilula {
    border-color: transparent;
  }

  .elo-clima-hero--vidro .elo-clima-hero__pilula::before,
  .elo-clima-hero--vidro .elo-clima-hero__condicao::before {
    content: '';
    position: absolute;
    /* A pílula tem borda de 1px: o anel cobre exatamente a área dela. */
    inset: -1px;
    border-radius: inherit;
    padding: 1px;
    /* 135deg = do canto superior esquerdo pro inferior direito. */
    background: linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.55) 0%,
      rgba(255, 255, 255, 0.28) 30%,
      rgba(255, 255, 255, 0.09) 62%,
      rgba(255, 255, 255, 0.04) 100%
    );
    /* Duas máscaras: a caixa toda e só o miolo. A composição EXCLUI o miolo,
       sobrando o contorno - é o que transforma o degradê em anel. */
    -webkit-mask:
      linear-gradient(#000 0 0) content-box,
      linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask:
      linear-gradient(#000 0 0) content-box,
      linear-gradient(#000 0 0);
    mask-composite: exclude;
    pointer-events: none;
  }

  /* A linha da condição não tem borda em repouso - o anel entra pra dentro,
     pra a caixa não crescer 2px (ver a nota de geometria no cabeçalho). */
  .elo-clima-hero--vidro .elo-clima-hero__condicao::before {
    inset: 0;
  }
}