/* home0920: bloco sem-id */
.a19hcta{display:flex;gap:8px;margin:12px 2px 0;padding:0}
        .a19hcta a{flex:1 1 0;display:flex;align-items:center;justify-content:center;gap:6px;
          height:32px;border-radius:10px;font-size:13.5px;font-weight:600;text-decoration:none;
          letter-spacing:.1px;white-space:nowrap;-webkit-tap-highlight-color:transparent}
        .a19hcta .a19hcta-v{background:rgba(255,255,255,.92);color:var(--app019-gold-text,#8A5E04);border:1px solid #D9CFB8}
        .a19hcta .a19hcta-a{background:var(--app019-gold-gradient,linear-gradient(135deg,#F3C651 0%,#E9A930 35%,#D49813 68%,#B88008 100%));color:var(--app019-gold-ink,#241900);border:1px solid rgba(184,128,8,.6)}
        .a19hcta a:active{transform:translateY(1px)}
        @media (max-width:360px){.a19hcta a{font-size:12.5px}}
/* home0920: bloco sem-id */
#cidades73 .c73nav{columns:5 130px;column-gap:20px;margin-top:2px} /* FRENTEA0912 V1: 2 colunas ja a 320 px (era 1 coluna de 66 cidades x 40 px) */
        #cidades73 .c73nav a{display:block;padding:10px 0;font-size:13.5px;font-weight:600;color:var(--ink2);text-decoration:none;break-inside:avoid}
        #cidades73 .c73nav a:hover{color:var(--ouro-txt);text-decoration:underline}
        #cidades73 .c73nav a::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--app019-gold-gradient,linear-gradient(135deg,#F3C651 0%,#E9A930 35%,#D49813 68%,#B88008 100%));margin-right:8px;vertical-align:2px}
        #cidades73 .c73sub{font-size:13.5px;color:var(--ink2);margin:2px 0 8px}
/* home0920: bloco hometop0901 */
/* ============================================================================
   HOMETOP0901 - 01/09/2026 - respiro do TOPO da home no celular/aplicativo.
   Bloco UNICO e ULTIMO. REMOVER = apagar este bloco inteiro.

   QUEIXA DO RAFAEL: "a home do app019.com ta sem margem de cima".

   O QUE MEDI ANTES DE ESCREVER (412x915, nos 2 temas):
   · a UNICA regra que governa o `padding-top` do `<header>` da home e a do
     skin019 - `header{padding-top:env(safe-area-inset-top,0px)}` - e ela
     APLICA (perguntei ao navegador pelo CSSOM, nao ao texto do ficheiro).
     Logo, a margem de seguranca do recorte do aparelho EXISTE.
   · o que NAO existe e respiro ALEM dela: o `.hwrap` comeca a 6px do topo e o
     primeiro controlo (o botao do menu) a 20px. Na /servicos o primeiro
     controlo comeca a 30px. A home tem 10px a MENOS que as irmas.
   · e o conteudo abre logo a seguir: o `main` comeca a 81px e o primeiro
     bloco a 94px - 13px depois do cabecalho.

   ⚑POR QUE ISTO SO APARECEU AGORA, e e honesto dize-lo: ate 30/08 o
   `theme_color` do manifesto era DOURADO (#9a6400), e no aplicativo instalado
   a barra de estado era uma faixa dourada que SEPARAVA o relogio do cabecalho.
   Eu troquei esse dourado por PRETO a pedido dele (o topo devia ser "uma
   superficie unica"). Ficou unica - e sem a faixa a separar, os 20px de
   respiro que antes bastavam passaram a ler-se como "colado no topo".
   🔑*Tirar um separador exige devolver o espaco que ele ocupava. A cor unificou;
   o respiro tinha de vir junto, e nao veio - isto e a segunda metade daquele conserto.*

   SO NO CELULAR: no computador `env()` vale 0 e nao ha barra de estado nenhuma,
   entao nada muda la.
   ============================================================================ */
@media(max-width:760px){
  /* +10px ACIMA do recorte do aparelho: o cabecalho deixa de encostar no relogio */
  header{padding-top:calc(env(safe-area-inset-top,0px) + 10px)}
  /* e um respiro real entre o cabecalho e o primeiro bloco (13px -> 22px) */
  main{padding-top:35px}
}
/* home0920: bloco soclaro0902css */
/* SOCLARO0902 - 02/09/2026 - ordem do Rafael: "NADA ESCURO MAIS" / "usar so claro !".
   O botao de alternar tema (sol/lua) deixa de ter funcao quando o site e so claro.
   Deixa-lo visivel seria um controlo MORTO: a pessoa carrega e nada acontece.
   REVERTER = apagar este bloco (o botao volta a aparecer e volta a funcionar). */
button[data-g19tema],[data-g19tema].g19-toggle{display:none!important}

/* ===== HOMEOURO0905 (05/09/2026) - ordem direta do Rafael (prompt tecnico da Home).
   MEDIDO no vivo a 375px ANTES de mexer: cabecalho 91px (min-height 91, padding-top 16, .hwrap 74)
   com 22px de vao ate a Hero; botao "Anunciar" = linear-gradient(135deg,#8A5E04,#6E4102) — o castanho
   que ele reprovou; "Ver anuncios" com texto #6E4102; 327 elementos a pintar com esses dois castanhos.
   O que se faz aqui, e porque assim: os castanhos NAO se trocam um a um (ele proibiu substituicao cega).
   O ouro de TEXTO da casa vive num token, `--ouro-txt`; repontar o TOKEN remapeia tudo de uma vez e
   mantem a funcao semantica de cada cor. Os dois CTA tem regra propria, por serem o pedido explicito.
   Bloco no FIM da folha: ganha por ORDEM, sem !important. ROLLBACK: gw3_baks_app019\home-nova_index_bak_HOMEOURO0905_*.html ===== */
:root{
  --app019-gold-light:#F3C651; /* PALETA0911 11/09: alinhado ao skin019 (fonte unica) */
  --app019-gold:#E9A930;
  --app019-gold-deep:#D49813;
  --app019-gold-dark:#B88008;
  --app019-gold-text:#8A5E04;
  --app019-gold-gradient:linear-gradient(135deg,#F3C651 0%,#E9A930 35%,#D49813 68%,#B88008 100%);
  --app019-border-gold:rgba(222,158,33,.38);
  --ouro-txt:#9A5C00;   /* era #8A5E04: mesmo papel, tom do logo, contraste mantido */
}
/* 1) cabecalho mais baixo, sem faixa branca — a Hero sobe junto */
header{padding-top:max(4px,env(safe-area-inset-top,0px));padding-bottom:0;min-height:0}   /* 74->~52px: o cabecalho termina poucos pixels depois do logo e dos controlos */
/* 2) CTA principal da Hero: o ouro do logo, texto branco (ordem dele), com sombra de texto para o
      branco nao se perder na parada clara do gradiente */
.a19hcta .a19hcta-a{
  background:var(--app019-gold-gradient);
  color:#FFFFFF;
  border:1px solid rgba(255,211,74,.75);
  text-shadow:0 1px 2px rgba(90,50,0,.55);
  box-shadow:0 6px 18px rgba(169,99,0,.16),inset 0 1px 0 rgba(255,255,255,.35);
}
.a19hcta .a19hcta-a:hover{filter:brightness(1.03)}
.a19hcta .a19hcta-a:active{transform:scale(.985)}
.a19hcta .a19hcta-a:focus-visible{outline:3px solid rgba(233,169,48,.25);outline-offset:2px}
/* 3) CTA secundario: continua secundario — branco, borda dourada fina, texto em ouro escuro legivel */
.a19hcta .a19hcta-v{
  background:rgba(255,255,255,.96);
  color:var(--app019-gold-text);
  border:1px solid var(--app019-border-gold);
}
.a19hcta .a19hcta-v:hover{background:#FFFFFF;border-color:var(--app019-gold)}
.a19hcta .a19hcta-v:focus-visible{outline:3px solid rgba(233,169,48,.25);outline-offset:2px}
@media (prefers-reduced-motion:reduce){.a19hcta .a19hcta-a,.a19hcta .a19hcta-v{transition:none}}

/* ============================================================================
   HOMEHERO0905 — consolidacao das 10 lentes sobre a Hero da home (app019.com)
   Cola-se no FIM do CSS inline da home. Ganha por ORDEM e por ESPECIFICIDADE.
   ZERO !important.

   O QUE MUDA E PORQUE:
   1. TOPO — o cabecalho ficou com folga ZERO na Dynamic Island: o bloco de hoje
      trocou calc(env + 10px) por max(4px, env), e max(4,env) - env = 0 na conta
      que o nav019 faz depois. Volta a forma calc(env + N), a unica
      deterministica com aquele desconto. Usa-se "body header" (0,0,2) para nao
      depender de qual <style> vem por ultimo no documento.
   2. VIDRO DA BUSCA — a barra declarava blur mas estava a 94% de branco: 6% de
      fundo a passar, ou seja, pagava-se uma camada de composicao para nada.
      Passa a var(--glass) (86%), o MESMO vidro que o <header> ja usa.
      CONFLITO RESOLVIDO: uma lente pedia .72 e outra .86. Fica .86 — e o token
      que a casa ja tem, mantem a barra coerente com o cabecalho, e o contraste
      do placeholder e do icone tem margem provada (5,95:1 e 3,89:1) mesmo no
      pior composto (barra sobre a zona preta da foto). A .72 obrigava a
      escurecer as tintas para #2A2D33 so para nao regredir.
   3. TINTAS DA BUSCA — placeholder passa a ter opacity:1 (o Firefox aplica .54
      por conta propria e derrubava o contraste para 2,36:1) e cor por variavel,
      para o tema escuro nao poder ser esquecido. Lupa acompanha a mesma tinta.
   4. FOCO DE TECLADO — .busca input{outline:none} anulava o anel global
      (:where() vale 0 de especificidade). O anel passa a ser desenhado no
      CONTENTOR, que e o objeto que a pessoa ve. WCAG 2.4.7.
   5. BOTAO BUSCAR — era vidro dentro de vidro: a acao PRINCIPAL da home estava
      mais palida que o atalho secundario "Anunciar". Vira ouro solido com texto
      branco (4,72:1 no stop mais claro). Vidro e o contentor; o botao e a ancora.
   6. MICROFONE — alvo 32px (12 abaixo dos 44 pedidos) e icone pintado por
      --ouro-medio #C0790F (3,51:1, e NUNCA redefinido em body.dark). Passa a
      40px com area de toque de 44px, icone 24px, e cor #9A5C00 (5,38:1).
      CONFLITO RESOLVIDO: tres lentes propuseram #6E4102, #A86305 e #9A5C00.
      Fica #9A5C00, a cor mandatada para ouro de texto pequeno sobre claro.
      O anel deixa de ser um radar que dispara e passa a respirar; ganha estado
      de REPOUSO em movimento reduzido (hoje congela CHEIO) e reafirma a trava
      .svoz (sem ela, esta folha RESSUSCITAVA o anel em navegador sem voz).
   7. KPIs — as 3 placas eram "vidro" sem nada por baixo para desfocar (o pai e
      opaco e o .hx tem isolation:isolate): 1,024:1 contra o pai, invisiveis, e
      3 camadas de composicao a custo zero de efeito. Viram superficie real.
      O ROTULO corrido deixa de ser ouro (o stop central dava 3,34:1); o ouro
      fica so no NUMERO, com gradiente cujo stop mais claro e #9A5C00.
   8. CORTE DA FOTO — a foto acabava a regua contra o creme; passa a dissolver-se.
   ============================================================================ */

/* --- 0. TOKENS -------------------------------------------------------------
   Fallback embutido em cada var(): se o bloco HOMEOURO0905 for removido ou
   renomeado, nada aqui perde a cor. --a19h-* sao nomes novos, nao colidem. */
:root{
  --a19h-ouro-txt:#9A5C00;                            /* 5,38:1 no claro       */
  --a19h-ouro-cta:var(--app019-gold,#E9A930);    /* 4,72:1 com branco     */
  --a19h-ouro-cta2:var(--app019-gold-dark,#B88008); /* PALETA0911: o botao Buscar passa ao gradiente oficial e a letra a TINTA */                           /* 5,70:1 com branco     */
  --a19h-ouro-foco:var(--app019-gold-dark,#B88008);
  --a19h-ouro-marca:var(--app019-gold,#E9A930);       /* SO no escuro          */
  --a19h-borda-ouro:var(--app019-border-gold,rgba(222,158,33,.38));
}

/* --- 1. TOPO / SAFE AREA ---------------------------------------------------
   Folga FIXA de 8px ACIMA do que o aparelho exige. A forma calc(env + N) e de
   proposito: o nav019 reescreve este padding como
   calc(<computado> - env + max(env,--a19-top-min)), logo o resultado e sempre
   N + max(env,min). Com max(4px,env) a conta anula-se e a folga desaparece.
   Aparelho sem recorte nao cresce: o piso inline de 73px do nav019 continua a
   mandar la, e a folga sai do vazio que ja existia. */
@media (max-width:760px){
  body header{padding-top:calc(env(safe-area-inset-top,0px) + 8px)}
}

/* --- 2. BARRA DE BUSCA: VIDRO REAL (so telemovel) --------------------------
   Fora do @media isto alcancaria o desktop, onde a .hx-b e branca solida num
   layout diferente — seria mudar uma pagina que ninguem pediu.
   .hx-b fica em (0,1,0) de proposito: assim as regras body.dark existentes
   (0,2,1) continuam a ganhar sozinhas e o escuro nao e tocado por engano. */
@media (max-width:640px){
  .hx-b{
    background:var(--glass,rgba(255,255,255,.86));
    -webkit-backdrop-filter:blur(16px) saturate(160%);
    backdrop-filter:blur(16px) saturate(160%);
    border-color:var(--a19h-borda-ouro);
    border-radius:26px;                  /* metade dos 52px de altura = pilula, */
                                         /* concentrica com o botao (19,5 + 6)  */
    box-shadow:
      0 1px 2px rgba(60,42,10,.10),            /* contacto: pousa a barra       */
      0 12px 28px -8px rgba(45,32,10,.30),     /* ambiente, QUENTE (hero creme) */
      inset 0 1px 0 rgba(255,255,255,.80);     /* aresta de topo                */
  }
  body.dark .hx-b,html.dark .hx-b{border-color:rgba(233,169,48,.28)}
}
/* Reserva obrigatoria: a .hx-b NAO tinha @supports (os outros vidros da casa
   tem). Sem blur, a 86% a foto apareceria crua atras do texto. */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  @media (max-width:640px){
    .hx-b{background:rgba(255,255,255,.95)}
    body.dark .hx-b,html.dark .hx-b{background:rgba(20,20,23,.94)}
  }
}

/* --- 3. TINTAS DA BUSCA (claro e escuro) -----------------------------------
   #4A4F58 = 8,23:1 sobre branco e 5,95:1 no pior composto (86% sobre foto
   preta). opacity:1 tira o ::placeholder{opacity:.54} do Firefox da equacao.
   No escuro o valor volta a ser exatamente o de hoje (var(--ink2) = #B9BEC7):
   o escuro fica igual ao que ja esta no ar, so ganha o opacity:1. */
.hx-b{--a19-ph:#4A4F58}
body.dark .hx-b,html.dark .hx-b{--a19-ph:var(--ink2)}
.hx-b input::placeholder{color:var(--a19-ph);opacity:1}
.hx-b .hx-go svg{stroke:var(--a19h-ouro-txt)}                      /* HOMESKEL0913: a lupa decorativa da esquerda saiu; a lupa e o botao (bloco 5) */
/* Remendo honesto, nao cura: o placeholder tem 58 caracteres num campo de
   ~174px (cabem ~27); com o microfone a 40px sobram ~166px. Isto corta com
   reticencias em vez de cortar a meio de "pizzaria,". Firefox ignora
   text-overflow em input: fica como esta hoje, nunca pior. A CURA e encurtar
   o atributo placeholder no HTML — fora deste mandato. */
.hx-b input{text-overflow:ellipsis}

/* --- 4. FOCO DE TECLADO NA BARRA -------------------------------------------
   outline (e nao box-shadow) para sobreviver ao alto contraste do Windows.
   O outline segue o border-radius nos navegadores atuais. */
.hx-b:focus-within{outline:2px solid var(--a19h-ouro-cta);outline-offset:2px}
body.dark .hx-b:focus-within,html.dark .hx-b:focus-within{outline-color:var(--a19h-ouro-marca)}
/* Quando o foco esta num BOTAO de dentro, o botao ja desenha o seu proprio
   anel — evita-se o anel duplo. Progressivo: sem :has(), ficam os dois, que e
   o comportamento aceitavel e nao uma regressao. */
@supports selector(:has(*)){
  .hx-b:has(.mic:focus-visible),.hx-b:has(.hx-go:focus-visible){outline:none}
}

/* --- 5. BOTAO BUSCAR = LUPA (HOMESKEL0913, ordem Rafael 13/09) -------------
   Era pilula dourada com o texto "Buscar". Passa a icone monocromatico da
   MESMA familia do microfone: mesmo tamanho (53 px no desktop, 40 no telemovel),
   mesma tinta (--a19h-ouro-txt), mesmo :hover (--separa). O nome acessivel
   fica no aria-label do <button>: saiu do ecra, nao do leitor de ecra. */
.hx-b .hx-go{
  display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;align-self:center;position:relative;
  width:53px;height:53px;min-width:0;min-height:0;padding:0;margin:0;border:0;border-radius:50%;
  background:transparent;color:var(--a19h-ouro-txt);text-shadow:none;box-shadow:none;transform:none;
  -webkit-backdrop-filter:none;backdrop-filter:none;cursor:pointer;
}
.hx-b .hx-go svg{width:22px;height:22px;stroke:var(--a19h-ouro-txt);stroke-width:2.2;fill:none;stroke-linecap:round;stroke-linejoin:round}
.hx-b .hx-go:hover{background:var(--separa);box-shadow:none;transform:none}
.hx-b .hx-go:focus-visible{outline:2px solid var(--a19h-ouro-foco);outline-offset:2px;border-radius:50%}
body.dark .hx-b .hx-go,html.dark .hx-b .hx-go,
body.dark .hx-b .hx-go:hover,html.dark .hx-b .hx-go:hover{background:transparent;color:var(--a19h-ouro-marca)}
body.dark .hx-b .hx-go svg,html.dark .hx-b .hx-go svg{stroke:var(--a19h-ouro-marca)}

/* --- 6. MICROFONE ---------------------------------------------------------- */
/* 6a. GEOMETRIA — so telemovel. Acima de 640px o .mic ja e 53x53 e nao se toca;
   fora do @media isto encolheria o desktop, que seria regressao.
   Botao 32->40 e icone 18->24 (+33%). 40 + 10 de padding = 50 < min-height 52:
   a barra NAO cresce e a Hero nao se desloca. O stroke acompanha sozinho
   (viewBox 0 0 24 24) — nao mexer em stroke-width. */
@media (max-width:640px){
  .hx-b .mic,.hx-b .hx-go{width:42px;height:42px;min-height:0;align-self:center}
  .hx-b .mic svg,.hx-b .hx-go svg{width:24px;height:24px}
  .hx-b .mic::after{inset:3px}          /* anel de 34px dentro do botao de 40 */
  /* area de toque de 44x44 sem mexer no layout: 2px de folga de cada lado,
     dentro do gap de 9px da barra, e pertence ao proprio <button>. */
  .hx-b .mic::before,.hx-b .hx-go::before{
    content:"";position:absolute;top:50%;left:50%;
    width:44px;height:44px;transform:translate(-50%,-50%);border-radius:50%;
  }
}
/* 6b. COR — alvo estreito. NAO se reponta --ouro-medio: ele pinta tambem
   .btn-menu, .toggle, .loja.divulgue e .seta; mexer nele era substituicao cega.
   Claro  #9A5C00: 5,38:1 na barra (3,89:1 no pior composto — piso de 3:1 ok).
   Escuro #E9A930: 8,99:1. NUNCA #E9A930 no claro (2,06:1). */
.hx-b .mic svg{stroke:var(--a19h-ouro-txt)}
body.dark .hx-b .mic svg,html.dark .hx-b .mic svg{stroke:var(--a19h-ouro-marca)}
/* 6c. PULSACAO — respira em vez de disparar radar. 0% e 100% IGUAIS: o ciclo
   fecha sem salto no ponto de emenda (o keyframe antigo acabava em 1.18 e
   saltava para .72). Amplitude curta: 1 -> 1,10 e opacidade .34 -> .68; no pico
   o anel tem 37,4px e NUNCA transborda o botao de 40. Nome carimbado: nao
   redeclara pulso-mic nem g19radar (redeclarar apagaria o original na pagina). */
@keyframes a19micPulso0905{
  0%,100%{transform:scale(1);opacity:.34}
  50%    {transform:scale(1.10);opacity:.68}
}
.hx-b .mic::after{border-color:rgba(200,122,5,.45);opacity:0;animation:none} /* HOMESKEL0913: parado = icone limpo, gemeo da lupa */
.hx-b .mic.voz019-on::after{opacity:.68;animation:a19micPulso0905 2.2s ease-in-out infinite} /* a escutar (o voz019 poe .voz019-on) = o anel respira */
body.dark .hx-b .mic::after,html.dark .hx-b .mic::after{border-color:rgba(233,169,48,.50)}
/* 6d. FOCO — o .mic so tinha :hover, inutil em toque. #C87A05 = 3,36:1 na barra
   clara e 5,51:1 na escura: passa o piso de 3:1 nos dois com uma cor so.
   :focus-visible e nao :focus, para nao desenhar contorno ao tocar. */
.hx-b .mic:focus-visible{outline:2px solid var(--a19h-ouro-foco);outline-offset:2px;border-radius:50%}
/* 6e. TRAVA — o navegador SEM reconhecimento de voz ganha a classe .svoz por
   script e a folha apaga o anel. A regra 6c tem a mesma especificidade da
   original e vem depois: sozinha, RESSUSCITAVA o anel nesses navegadores
   (Firefox desktop, varias WebViews Android). Reafirmar em (0,3,1). */
.hx-b .mic.svoz::after{animation:none;opacity:0}

/* --- 7. KPIs: SUPERFICIE REAL, OURO SO NO NUMERO --------------------------- */
@media (max-width:640px){
  /* sem backdrop-filter: nao havia nada para desfocar. Poupa 3 camadas. */
  .hx .hx-fatos .pt{
    background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(255,255,255,.78));
    -webkit-backdrop-filter:none;backdrop-filter:none;
    border:1px solid rgba(168,99,5,.22);
    box-shadow:0 1px 2px rgba(80,55,10,.06),0 8px 18px -10px rgba(80,55,10,.22),
               inset 0 1px 0 rgba(255,255,255,.95);
  }
  /* HOMESKEL0913 (ordem Rafael 13/09): o KPI INTEIRO numa cor so = ouro-texto oficial (5,70:1 no branco) */
  .hx .hx-fatos .pt>span{background:none;color:var(--app019-gold-text,#8A5E04);-webkit-text-fill-color:var(--app019-gold-text,#8A5E04);animation:none}
  /* o numero destaca-se so pelo peso (700), na MESMA cor */
  .hx .hx-fatos .pt>span>b{background:none;color:inherit;-webkit-text-fill-color:currentColor;font-weight:700}
  /* gradiente com o stop MAIS CLARO em #9A5C00: todos os pontos passam 4,5:1 */
  .hx .hx-fatos{--kpi-grad:linear-gradient(100deg,var(--app019-gold-text,#8A5E04) 0%,var(--app019-gold-dark,#B88008) 50%,var(--app019-gold-text,#8A5E04) 100%)} /* PALETA0912: KPIs no ouro oficial (texto + escuro), sem castanho #6E4102 */
  .hx .hx-fatos .sti{color:var(--app019-gold-text,#8A5E04)}                                /* 5,70:1 */
  /* ESCURO OBRIGATORIO: a regra clara acima e (0,3,1) e venceria a body.dark
     existente (0,2,1) — cinza escuro sobre quase-preto seria fatal. */
  body.dark .hx .hx-fatos .pt,html.dark .hx .hx-fatos .pt{
    background:rgba(24,24,28,.62);border-color:rgba(233,169,48,.30);
    box-shadow:0 1px 2px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.06);
  }
  body.dark .hx .hx-fatos .pt>span,html.dark .hx .hx-fatos .pt>span{
    color:#C3C8D1;-webkit-text-fill-color:#C3C8D1;                /* 11,2:1 */
  }
  body.dark .hx .hx-fatos,html.dark .hx .hx-fatos{
    --kpi-grad:linear-gradient(100deg,#C0790F 0%,#E9A930 46%,#EFAF3F 50%,#E9A930 54%,#C0790F 100%);
  }
  body.dark .hx .hx-fatos .sti,html.dark .hx .hx-fatos .sti{color:#E9A930}
}

/* --- 8. A FOTO DEIXA DE ACABAR A REGUA -------------------------------------
   NAO se poe vidro no .hx: por tras dele esta o fundo da pagina (#F7F8FA), nao
   a foto — translucidez ali seria efeito invisivel. O que existe e o CORTE.
   Topo mantido em .05 de proposito: a .hx-t e texto escuro sobre a foto e
   escurecer o topo pioraria a leitura dela. O degrade passa POR BAIXO da barra
   de busca (.hx-b esta em z-index:6, .hx-img em 1). */
@media (max-width:640px){
  .hx .hx-img::after{
    background:linear-gradient(180deg,
      rgba(27,27,31,.05) 0%,
      rgba(27,27,31,.04) 40%,
      rgba(251,246,236,0) 74%,
      rgba(251,246,236,.70) 94%,
      #FBF6EC 100%);
  }
  /* obrigatorio: o creme sujaria o fundo escuro. Cores tiradas do proprio
     body.dark .hx, para o degrade terminar exatamente no fundo do painel. */
  body.dark .hx .hx-img::after,html.dark .hx .hx-img::after{
    background:linear-gradient(180deg,
      rgba(0,0,0,.12) 0%,
      rgba(0,0,0,.10) 40%,
      rgba(12,12,14,0) 74%,
      rgba(12,12,14,.70) 94%,
      #0C0C0E 100%);
  }
}

/* --- 9. MOVIMENTO REDUZIDO -------------------------------------------------
   O global *{animation:none!important} ja mata a animacao, mas o .mic::after
   nao declara repouso: HOJE o anel congela em opacity 1 / scale 1, ou seja um
   anel dourado CHEIO e permanente. Aqui ele descansa discreto, no vale da
   pulsacao. Nao e preciso !important: o global so o carrega em animation e
   transition, e estas regras mexem em opacity e transform.
   O .svoz repete-se de proposito: sem isto, quem tem movimento reduzido E
   navegador sem voz veria um anel de repouso num botao que nao funciona. */
@media (prefers-reduced-motion:reduce){
  .hx-b .mic::after{animation:none;transform:none;opacity:0}
  .hx-b .mic.voz019-on::after{opacity:.5}
  .hx-b .mic.svoz::after{opacity:0}
  .hx .hx-fatos .pt>span,.hx .hx-fatos .pt>span>b{animation:none}
}
/* Transparencia reduzida: a regra que ja existe forca #FFFFFF / #16171B com
   !important e continua a vencer tudo o que esta acima — como deve. */