/* home0920: bloco inapp019css */
html.in-app019 .soc-g,html.in-app019 .soc-a{display:none!important}html.in-app019 #r019,html.in-app019 #r19{display:none!important}html.in-app019 #a19gveu{display:none!important}
/* home0920: bloco a11y0807 */
body.dark .g19-cid .cab h2,body.dark .g19-cid .cab a,
body.dark .g19-blog .cab h2,body.dark .g19-blog .cab a,
body.dark #voltarcidade019,body.dark #r019pg .tp small,
body.dark .g19-blog .post .tema{color:#E9A930}
body.dark .rodape .emp019 .e0{color:#9AA0AA!important}/* !important porque a cor esta declarada INLINE na propria tag (style="...color:#6B7078"), e estilo inline vence folha */
/* home0920: bloco fh0807 */
/* AJUSTE FRONT 07/08 front-home-019food-0807: titulos de secao unificados + vidro 3D */
main .sec-titulo h2, #g19cidh, #g19blogh{ font-size:12px; letter-spacing:.8px; text-transform:uppercase; } /* FRENTEA0912 V1: 8.5px era ilegivel */
#g19cidh, #g19blogh{ background:var(--grad-logo-texto); background-size:220% auto; -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent; animation:brilho-logo 7s linear infinite; }
main .sec-titulo a, .g19-cid .cab a, .g19-blog .cab a{ font-size:11px !important; color:#8A5E04 !important; -webkit-text-fill-color:#8A5E04 !important; background:none !important; animation:none !important; text-decoration:none; }
main .sec-titulo a:hover, .g19-cid .cab a:hover, .g19-blog .cab a:hover{ text-decoration:underline; }
body.dark main .sec-titulo a, body.dark .g19-cid .cab a, body.dark .g19-blog .cab a{ color:#E9A930 !important; -webkit-text-fill-color:#E9A930 !important; }
.g19-cid .cx, .g19-blog .cx{ perspective:900px; }
.g19-blog a.post{ background:rgba(255,255,255,.55); -webkit-backdrop-filter:blur(9px) saturate(1.15); backdrop-filter:blur(9px) saturate(1.15); border:1px solid rgba(255,255,255,.6); box-shadow:0 4px 14px rgba(27,27,31,.10), inset 0 1px 0 rgba(255,255,255,.7); transform-style:preserve-3d; transition:transform .28s cubic-bezier(.22,.9,.3,1), box-shadow .28s ease, border-color .28s ease; }
.g19-cid a.c{ background:rgba(255,255,255,.5); -webkit-backdrop-filter:blur(10px) saturate(1.08); backdrop-filter:blur(10px) saturate(1.08); border:1px solid rgba(255,255,255,.55); box-shadow:0 1px 3px rgba(27,31,38,.05), inset 0 1px 0 rgba(255,255,255,.6); transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){ .g19-cid a.c{ background:rgba(255,255,255,.9); } }
.g19-blog a.post:hover{ transform:translateY(-4px) rotateX(4deg) rotateY(-3deg) scale(1.02); box-shadow:0 16px 34px rgba(27,27,31,.20), inset 0 1px 0 rgba(255,255,255,.9); border-color:rgba(168,99,5,.45); }
.g19-cid a.c:hover{ transform:translateY(-2px); box-shadow:0 8px 18px -6px rgba(27,31,38,.14), inset 0 1px 0 rgba(255,255,255,.75); border-color:rgba(168,99,5,.35); }
body.dark .g19-blog a.post{ background:rgba(27,27,31,.5); border-color:rgba(233,169,48,.28); box-shadow:0 4px 14px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.06); }
body.dark .g19-cid a.c{ background:rgba(28,31,34,.5); border-color:rgba(255,255,255,.08); box-shadow:0 1px 3px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.05); }
@keyframes fhCardIn{ from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:none} }
.g19-cid a.c{ animation:fhCardIn .5s ease both; }
.g19-cid a.c:nth-child(2){animation-delay:.05s}.g19-cid a.c:nth-child(3){animation-delay:.1s}.g19-cid a.c:nth-child(4){animation-delay:.15s}.g19-cid a.c:nth-child(5){animation-delay:.2s}.g19-cid a.c:nth-child(6){animation-delay:.25s}.g19-cid a.c:nth-child(7){animation-delay:.3s}.g19-cid a.c:nth-child(8){animation-delay:.35s}
@media (prefers-reduced-motion:reduce){ .g19-cid a.c,.g19-blog a.post{animation:none;transition:none} .g19-cid a.c:hover,.g19-blog a.post:hover{transform:none} }
/* home0920: bloco a2focus0810 */
/* A2 10/08: anel de foco proprio no teclado (ouro AA), claro+escuro. :where()=especificidade 0, nao sobrepoe componentes; :focus-visible so no teclado */
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{outline:2px solid #B88008;outline-offset:2px;border-radius:6px}
html.dark :where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{outline-color:#E9A930}
/* home0920: bloco HOME019-20260916 */
/* HOME019 16/09/2026: blocos finais da Home com a mesma largura útil do cabeçalho. */
main{max-width:1200px;padding-left:clamp(16px,2.5vw,30px);padding-right:clamp(16px,2.5vw,30px)}@media (min-width:1400px){main{max-width:1440px}} /* DESKTOP0919: mesma largura do cabeçalho e de /anuncios/ nas telas largas */
.a19-beneficios{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:24px 0 28px}
.a19-beneficio{min-width:0;padding:18px;border:1px solid var(--borda-ouro-fina);border-radius:16px;background:var(--card-bg);box-shadow:var(--sombra)}
.a19-beneficio h2{font-size:14px;line-height:1.25;color:var(--ouro-txt);margin:0 0 8px;letter-spacing:.02em}
.a19-beneficio p{font-size:14px;line-height:1.55;color:var(--ink2);margin:0}
.a19-termos{margin:28px 0 10px;padding:20px;border:1px solid var(--borda-ouro-fina);border-radius:16px;background:var(--card-bg);box-shadow:var(--sombra)}
.a19-termos h2{font-size:16px;margin:0 0 12px}.a19-termos nav{display:flex;flex-wrap:wrap;gap:8px}.a19-termos a{display:inline-flex;align-items:center;min-height:36px;padding:6px 11px;border:1px solid var(--borda-ouro-fina);border-radius:999px;color:var(--ink2);font-size:13px;font-weight:700;text-decoration:none}.a19-termos a:hover{color:var(--ouro-txt);border-color:var(--borda-ouro);background:rgba(233,169,48,.08)}
#cidades73{padding:18px;border:1px solid var(--borda-ouro-fina);border-radius:16px;background:var(--card-bg);box-shadow:var(--sombra)}#cidades73 details{margin-top:12px}#cidades73 summary{cursor:pointer;color:var(--ouro-txt);font-size:14px;font-weight:800}#cidades73 summary::marker{color:var(--ouro-medio)}
.rodape{margin-top:24px!important;padding:18px 0 8px!important}.rodape .linhas{gap:6px 14px!important;margin-bottom:8px!important}.rodape .linhas strong{flex-basis:100%;margin-top:6px;color:var(--ink);font-size:11px;letter-spacing:.08em}.rodape .linhas a{padding-top:6px!important;padding-bottom:6px!important}.rodape .emp019 .e3{font-size:8px}.rodape .a19dl{margin-top:12px!important}.rodape .a19dl-k{margin-bottom:6px!important}.rodape .a19dl-btn{min-height:42px!important}
@media(max-width:760px){main{padding-left:16px;padding-right:16px}.a19-beneficios{grid-template-columns:1fr;gap:10px;margin:20px 0 24px}.a19-beneficio{padding:16px}.a19-termos{padding:16px}.a19-termos nav{gap:7px}#cidades73{padding:16px}.rodape .a19dl-b{gap:8px!important}}
/* home0920: bloco r19vidro0917 */
/* RADIO0917 - 17/09/2026 - ordem direta do Rafael: "o bloco da barra que tem a radio player
esta com tamanho feio muito pequeno, a largura diferente do padrao dos outros elementos da
pagina, a fonte dentro dele preta; muda para o amarelo ouro da marca, efeito vidro 3d,
altura 40% maior e largura igual dos outros".
ANTES, medido no vivo (viewport 1009px): .r19in = 925,8 x 36 px, enquanto .caminhos e
.banner019 = 957,8 px. A faixa era a UNICA com recuo proprio de 16px: a HOME019-20260916
alinhou os blocos da home pela largura util do MAIN e esta ficou de fora.
DEPOIS: 957,8 x 50,4 px (36 x 1,4 = +40% exatos).
O botao tem PISO de 42px vindo da folha da casa (alvo de toque). Ele e que manda na altura:
42 + 3,2 + 3,2 de respiro + 2 de borda = 50,4. Foi por isso que o respiro ficou em 3,2px e nao
em 6px - com 6px a faixa dava 56px (+55,6%), mais do que os 40% pedidos.
Fonte: var(--ouro-txt) = #9A5C00, o token VIVO da casa (skin019), nao um ouro novo.
Contraste medido na pior parada do vidro (#FDF8ED): 5,08:1 - passa AA de texto normal.
Gradiente de ouro CLARO em texto pequeno foi descartado por MEDICAO, nao por gosto: a pior
parada (#B88008) da 3,23:1 e reprovaria. O brilho vem do vidro e do botao, nao da letra.
POR QUE UM BLOCO NO FIM: as regras da faixa vivem em DOIS blocos de estilo diferentes (o principal e
o vidro0805a), com dois :hover de especificidade maior. Um bloco no fim corre depois dos
dois, e o rollback e apagar esta regiao inteira.
NAO toca no ficheiro do tocador (js/r019player) nem no player do rodape (#r019): ordem antiga do dono.
REVERTER = apagar este bloco inteiro. */
/* 1. LARGURA - igual a .caminhos e .banner019 (o MAIN ja da o respiro lateral). */
.r19{max-width:none;padding:0}
/* 2. ALTURA +40% e VIDRO 3D - o relevo vem da LUZ (bisel no topo, sombra propria em baixo e
sombra projetada), nao de borda grossa. O brilho especular e uma CAMADA de fundo e nunca um
::before: pseudo-elemento dentro de um flex vira ITEM do flex e desarruma a faixa. */
.r19in{
position:relative;min-height:50.4px;padding:3.2px 16px;gap:14px;border-radius:18px;
background:
linear-gradient(180deg,rgba(255,255,255,.58) 0%,rgba(255,255,255,.10) 38%,rgba(255,255,255,0) 52%),
linear-gradient(180deg,rgba(255,255,255,.90) 0%,rgba(255,255,255,.62) 46%,rgba(255,248,232,.74) 100%);
-webkit-backdrop-filter:blur(20px) saturate(180%);backdrop-filter:blur(20px) saturate(180%);
border:1px solid rgba(255,255,255,.85);border-bottom-color:rgba(154,92,0,.22);
box-shadow:
inset 0 1px 0 rgba(255,255,255,.95),
inset 0 14px 22px -16px #FFFFFF,
inset 0 -10px 18px -14px rgba(154,92,0,.38),
0 1px 2px rgba(27,27,31,.05),
0 10px 22px -8px rgba(27,27,31,.16),
0 22px 40px -24px rgba(154,92,0,.30);
transition:transform .22s ease,box-shadow .22s ease;
}
.r19in:hover{transform:translateY(-2px);
box-shadow:
inset 0 1px 0 rgba(255,255,255,.95),
inset 0 14px 22px -16px #FFFFFF,
inset 0 -10px 18px -14px rgba(154,92,0,.38),
0 2px 4px rgba(27,27,31,.06),
0 16px 30px -10px rgba(27,27,31,.20),
0 30px 52px -28px rgba(154,92,0,.36);}
@media (prefers-reduced-motion:reduce){.r19in{transition:none}.r19in:hover{transform:none}}
/* 3. FONTE NO OURO DA MARCA (era rgb(42,42,46), preta). A hierarquia vem do PESO e do TAMANHO,
para os dois textos poderem usar o mesmo ouro aprovado. */
.r19tit{font-size:15px;font-weight:800;letter-spacing:.08em;gap:9px;color:var(--ouro-txt,#9A5C00)}
.r19now{font-size:13.5px;font-weight:500;margin-top:1px;color:var(--ouro-txt,#9A5C00)}
.r19live{font-size:10px;padding:1px 7px;border-radius:6px}
/* 4. BOTAO DE TOCAR - 28 -> 42px REDONDO (o piso de toque da casa ja o esticava para 42 de
altura, e com 36 de largura ele virava uma ELIPSE), ouro ESCURO com icone BRANCO (regra: nunca fonte
escura dentro de botao ouro) e relevo proprio. O :hover antigo pintava-o de branco
translucido - o icone branco desaparecia; aqui ele fica no ouro. */
.r19bt{width:42px;height:42px;
background:linear-gradient(180deg,#B36B06 0%,#9A5C00 55%,#7E4A02 100%);
box-shadow:inset 0 1px 0 rgba(255,255,255,.45),inset 0 -2px 6px rgba(0,0,0,.20),0 5px 12px -3px rgba(154,92,0,.50);}
.r19bt:hover{background:linear-gradient(180deg,#C07708 0%,#A76400 55%,#8A5204 100%)}
.r19bt svg{width:19px;height:19px;fill:#FFFFFF}
/* 5. "Ver" - branco sobre ouro escuro (5,38:1), nunca preto sobre ouro claro. */
.r19go{font-size:13px;padding:8px 14px;border-radius:10px;color:#FFFFFF;
background:linear-gradient(180deg,#A76400 0%,#8F5502 100%);
box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 4px 10px -3px rgba(154,92,0,.45)}
.r19go:hover{background:linear-gradient(180deg,#B36B06 0%,#9A5C00 100%)}
/* 6. Volume e fechar no ouro. O :hover do X era BRANCO - invisivel no vidro claro. */
.r19vol{width:96px;accent-color:var(--ouro-txt,#9A5C00)}
.r19x{width:30px;height:42px;font-size:20px;color:var(--ouro-txt,#9A5C00)}
.r19x:hover{color:#6E4102}
/* 7. ALTURA ESTAVEL, TAMBEM NO CASO MAU. Medido, nao suposto: quando o que toca e vaga ou
dica, o JS mostra o botao "Ver" - e no telemovel o .r19mid cai para 68,6px, o titulo quebra
em DUAS linhas e a faixa passa de 50,4 para 54,2px. Isso ja acontecia ANTES desta rodada,
com a faixa de 36px; conserta-se agora porque a altura pedida tem de ser a altura REAL da
faixa, e nao so a do caso bom. O titulo deixa de quebrar; no telemovel, e o VOLUME que cede
a vez ao "Ver" - e so enquanto o "Ver" esta no ar - porque o aparelho tem botoes fisicos de
volume e o botao e a unica coisa ali que leva a pessoa a outro sitio.
Exercido nos dois estados a 375px: 50,4px com e sem "Ver", titulo inteiro nos dois. */
.r19tit{white-space:nowrap}
.r19mid{overflow:hidden;min-width:0}
@media (max-width:560px){
.r19in{padding:3.2px 12px;gap:10px;min-height:50.4px}
.r19tit{font-size:13px;letter-spacing:.02em;gap:6px}
.r19now{font-size:12px}
.r19live{font-size:9px;padding:1px 5px}
.r19go{font-size:12px;padding:7px 10px}
.r19vol{width:52px}
.r19in:has(.r19go:not([style*="none"])) .r19vol{display:none}
}
/* 8. Reservas - sem blur e com transparencia reduzida o vidro vira creme solido. O !important
aqui e obrigatorio: a regra antiga de reduced-transparency pinta o botao de branco COM
!important, e o icone branco sumiria dentro dele. */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
.r19in{background:linear-gradient(180deg,#FFFFFF 0%,#FFFBF2 100%)}
}
@media (prefers-reduced-transparency:reduce){
.r19in{background:#FFFDF7!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
.r19bt{background:linear-gradient(180deg,#B36B06 0%,#9A5C00 55%,#7E4A02 100%)!important}
}