/* =====================================================================
   VIZUNE — site institucional.

   REGRAS DESTE ARQUIVO

   1. Nenhuma cor escrita na mao. Tudo sai dos tokens `--vz-*` definidos em
      `vizune.css` (que este site carrega antes deste arquivo). E por isso
      que o tema escuro funciona sem uma linha a mais aqui: quando o
      documento ganha `data-bs-theme="dark"`, os tokens trocam e o site
      inteiro acompanha. Um `#fff` solto quebraria isso.

   2. Mobile primeiro. As regras base valem para o celular; as media
      queries so ACRESCENTAM espaco em tela grande. A maior parte dos
      visitantes vai chegar por celular, em 3G ou 4G fraco.

   3. Nada de fonte remota. A pilha do sistema chega em zero milissegundo.

   4. Movimento e enfeite: tudo o que anima esta atras de
      `prefers-reduced-motion`.
   ===================================================================== */

/* 1. BASE ------------------------------------------------------------ */

.site {
    font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    font-size: 1rem;
    line-height: 1.6;
    color: var(--vz-texto);
    background: var(--vz-fundo);
    margin: 0;
    overflow-x: hidden;

    /* ---------------------------------------------------------------
       AZUL QUE DA PARA LER NO TEMA ESCURO

       `--vz-primaria` (#0B5FFF por padrao) e uma cor de FUNDO de botao:
       sobre branco ela rende 5,1:1, mas sobre o fundo escuro do site
       (#0B1220) rende 3,65:1 — abaixo do minimo AA de 4,5:1 para texto.
       Isso valia para TODO link do corpo, para o item de menu ativo e
       para as etiquetas, e e a razao de o dono (que usa tema escuro) ver
       o site "apagado".

       Este token nao substitui `--vz-primaria`: e a mesma marca ajustada
       para virar TEXTO. No escuro ela clareia (7,8:1 sobre o fundo, 7,1:1
       sobre o cartao); no claro escurece 8%, o que e imperceptivel a
       olho nu e leva a etiqueta sobre `--vz-info-fundo` de 4,49:1 para
       5,1:1 — de reprovada para aprovada em AA por causa de um centesimo.
       FUNDO de botao continua usando `--vz-primaria` pura: la a marca
       precisa ser a marca.
       --------------------------------------------------------------- */
    --site-marca-texto: color-mix(in srgb, var(--vz-primaria) 92%, #000);
}

[data-bs-theme="dark"] .site {
    --site-marca-texto: color-mix(in srgb, var(--vz-primaria) 55%, #FFFFFF);
}

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

/* ---------------------------------------------------------------------
   TIPOGRAFIA BASE — tambem dentro de `:where()`, e pelo mesmo motivo

   `.site h2` vale (0,1,1): uma classe mais um elemento. `.site-rodape__titulo`
   vale (0,1,0). O generico ganhava, e o resultado aparecia na tela:

     - os titulos do rodape ("SITE", "ACESSO", "DOCUMENTOS") saiam com
       36px em vez de 12,8px e com `--vz-texto` no lugar do cinza claro —
       no tema CLARO isso e texto quase preto sobre o rodape escuro, com
       1,08:1 de contraste. Praticamente invisiveis;
     - `.site ul` (0,1,1) anulava o `padding-left: 0` de `.site-cidades`,
       de `.site-lista` e do menu, deixando todas as listas com uma
       margem fantasma a esquerda;
     - `.site p` anulava a margem propria dos paragrafos de componente.

   Envolvendo em `:where()` a especificidade cai para (0,1,0) e cada
   componente volta a mandar no proprio desenho. Nenhum `!important`.
   --------------------------------------------------------------------- */
.site :where(h1, h2, h3, h4) {
    line-height: 1.18;
    letter-spacing: -.015em;
    margin: 0 0 .6rem;
    color: var(--vz-texto);
    text-wrap: balance;
}

.site :where(h1) { font-size: clamp(1.9rem, 7vw, 3.3rem); font-weight: 800; }
.site :where(h2) { font-size: clamp(1.5rem, 5vw, 2.25rem); font-weight: 750; }
.site :where(h3) { font-size: clamp(1.12rem, 3.4vw, 1.35rem); font-weight: 700; }
.site :where(h4) { font-size: 1rem; font-weight: 700; }

.site :where(p) { margin: 0 0 1rem; }
.site :where(p:last-child) { margin-bottom: 0; }
.site :where(img, svg) { max-width: 100%; }
.site :where(ul, ol) { margin: 0 0 1rem; padding-left: 1.15rem; }

/* ---------------------------------------------------------------------
   COR PADRAO DE LINK — e por que ela mora dentro de `:where()`

   Esta regra ja foi escrita `.site a { color: var(--vz-primaria) }`, e isso
   deixou TRES defeitos visiveis na tela do dono:

     1. o botao azul do topo ficava azul sobre azul (texto invisivel);
     2. o botao verde do WhatsApp ficava com texto AZUL sobre verde;
     3. os links do menu ignoravam `--vz-texto-suave`.

   A causa e especificidade, nao a cor: `.site a` vale (0,1,1) — uma classe
   mais um elemento — enquanto `.site-botao--primario` vale (0,1,0). O
   seletor generico GANHAVA de todos os componentes e pintava tudo de azul.
   No `:hover` a conta virava (0,2,0) do lado do componente e a cor certa
   voltava — foi por isso que o texto so aparecia ao passar o mouse.

   `:where()` tem especificidade zero. Com ele a regra cai para (0,1,0) e
   passa a ser o que sempre quis ser: um PADRAO, que qualquer componente
   declarado depois sobrescreve naturalmente. Nenhum `!important` envolvido.
   --------------------------------------------------------------------- */
.site :where(a) { color: var(--site-marca-texto); text-decoration-thickness: 1px; text-underline-offset: .18em; }
.site :where(a:hover) { color: color-mix(in srgb, var(--site-marca-texto) 78%, var(--vz-texto)); }

/* Foco sempre visivel. Navegacao por teclado nao e detalhe: e a diferenca
   entre o site servir ou nao servir para quem depende dela. */
.site :focus-visible {
    outline: 3px solid var(--vz-primaria);
    outline-offset: 2px;
    border-radius: 4px;
}

.site-largura {
    width: 100%;
    max-width: 1140px;
    margin: 0 auto;
    padding-inline: 1.15rem;
}

.site-visualmente-oculto {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0);
    white-space: nowrap; border: 0;
}

/* Link de pulo: primeiro item do documento, visivel so no foco. */
.site-pular {
    position: absolute;
    left: -999px;
    top: .5rem;
    z-index: 60;
    background: var(--vz-superficie);
    color: var(--vz-texto);
    padding: .6rem 1rem;
    border-radius: var(--vz-raio);
    box-shadow: var(--vz-sombra-2);
}
.site-pular:focus { left: .8rem; }

/* 2. TOPO E MENU ------------------------------------------------------ */

.site-topo {
    position: sticky;
    top: 0;
    z-index: 50;
    background: color-mix(in srgb, var(--vz-superficie) 92%, transparent);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--vz-borda);
}

/* `flex-wrap` e obrigatorio aqui: o menu do celular e o terceiro filho e
   ocupa 100% da largura. Sem quebrar linha, ele seria espremido ao lado do
   logo em vez de descer. */
.site-topo__linha {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    min-height: 60px;
}

.site-logo { display: inline-flex; align-items: center; text-decoration: none; }

.site-logo__marca {
    font-weight: 800;
    font-size: 1.28rem;
    letter-spacing: .06em;
    color: var(--site-marca-texto);
}

.site-menu-botao {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px; height: 44px;
    border: 1px solid var(--vz-borda);
    border-radius: var(--vz-raio-sm);
    background: var(--vz-superficie);
    color: var(--vz-texto);
    cursor: pointer;
}

/* Tres barras desenhadas em CSS: menos um pedido de rede. */
.site-menu-botao__barras,
.site-menu-botao__barras::before,
.site-menu-botao__barras::after {
    display: block;
    width: 18px; height: 2px;
    background: currentColor;
    border-radius: 2px;
    position: relative;
}
.site-menu-botao__barras::before,
.site-menu-botao__barras::after { content: ''; position: absolute; left: 0; }
.site-menu-botao__barras::before { top: -6px; }
.site-menu-botao__barras::after { top: 6px; }

.site-menu {
    display: none;
    width: 100%;
    order: 3;
    padding-bottom: 1rem;
}
.site-menu.esta-aberto { display: block; }

.site-menu__lista { list-style: none; margin: 0 0 .8rem; padding: 0; }

/* `--vz-texto-suave` sobre o fundo escuro da pagina da 3,65:1 — abaixo do
   minimo AA de 4,5:1 para texto. Item de menu e navegacao, nao legenda:
   usa o token de texto normal, que da 13:1 no escuro e 12:1 no claro. */
.site-menu__link {
    display: block;
    padding: .7rem .25rem;
    color: var(--vz-texto);
    text-decoration: none;
    font-weight: 600;
    border-bottom: 1px solid var(--vz-borda);
}
.site-menu__link:hover,
.site-menu__link.esta-ativo { color: var(--site-marca-texto); }

.site-menu__acoes { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }

.site-tema {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px; height: 42px;
    border: 1px solid var(--vz-borda);
    border-radius: var(--vz-raio-sm);
    background: var(--vz-superficie);
    color: var(--vz-texto-suave);
    cursor: pointer;
    flex: none;
}
.site-tema:hover { color: var(--site-marca-texto); border-color: var(--site-marca-texto); }

/* Um icone por tema. O sol aparece no escuro (o que voce vai ganhar ao
   clicar), a lua no claro — e a convencao que as pessoas ja conhecem. */
.site-tema__sol { display: none; }
[data-bs-theme="dark"] .site-tema__sol { display: block; }
[data-bs-theme="dark"] .site-tema__lua { display: none; }

/* ---------------------------------------------------------------------
   ENTRAR / CRIAR CONTA

   Feito com <details>/<summary> de proposito: abre e fecha sem uma linha
   de JavaScript, ja chega com semantica de "expansivel" para o leitor de
   tela e sobrevive a CSP sem `onclick` nenhum. O JavaScript so acrescenta
   o fechar-ao-clicar-fora e o Esc.

   Sao QUATRO portas diferentes (painel, aplicativo, cadastro por WhatsApp
   e comercio) e elas nao podem virar um "Entrar" generico: mandar
   motorista para a tela de senha do painel e o tipo de erro que faz a
   pessoa desistir e nao voltar.
   --------------------------------------------------------------------- */
.site-acesso { position: relative; }

.site-acesso__gatilho {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    min-height: 44px;
    padding: .5rem .95rem;
    border: 1px solid var(--vz-borda-forte);
    border-radius: var(--vz-raio-pill);
    background: var(--vz-superficie);
    color: var(--vz-texto);
    font-weight: 700;
    font-size: .92rem;
    cursor: pointer;
    list-style: none;
    white-space: nowrap;
}
.site-acesso__gatilho::-webkit-details-marker { display: none; }
.site-acesso__gatilho:hover { border-color: var(--site-marca-texto); }

.site-acesso__seta {
    flex: none;
    width: 8px; height: 8px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
    transition: transform .18s ease;
}
.site-acesso[open] .site-acesso__seta { transform: translateY(1px) rotate(-135deg); }

.site-acesso__painel {
    margin-top: .5rem;
    background: var(--vz-superficie);
    border: 1px solid var(--vz-borda);
    border-radius: var(--vz-raio-lg);
    box-shadow: var(--vz-sombra-3);
    padding: .8rem;
    display: grid;
    gap: .2rem;
    min-width: 100%;
}

.site-acesso__titulo {
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--vz-texto-suave);
    margin: .5rem .6rem .15rem;
}
.site-acesso__titulo:first-child { margin-top: 0; }

.site-acesso__porta {
    display: grid;
    gap: .1rem;
    padding: .55rem .6rem;
    border-radius: var(--vz-raio-sm);
    text-decoration: none;
    color: var(--vz-texto);
}
.site-acesso__porta:hover,
.site-acesso__porta:focus-visible {
    background: color-mix(in srgb, var(--vz-primaria) 12%, transparent);
    color: var(--vz-texto);
}
.site-acesso__porta strong { font-size: .95rem; font-weight: 700; }
.site-acesso__porta span { font-size: .82rem; color: var(--vz-texto-suave); line-height: 1.35; }

@media (min-width: 900px) {
    .site-menu-botao { display: none; }
    /* Os espacamentos encolheram (eram 1,6rem e 1,35rem) para o topo caber
       numa linha so depois da entrada do "Entrar" e do botao de WhatsApp.
       Com os valores antigos o cabecalho quebrava em duas linhas ja em
       1366px e o topo fixo passava a comer 97px de tela. */
    .site-menu {
        display: flex !important;
        align-items: center;
        gap: 1rem;
        width: auto;
        order: 0;
        padding-bottom: 0;
    }
    .site-menu__lista { display: flex; gap: 1rem; margin: 0; }
    .site-menu__link { border: 0; padding: .35rem 0; font-size: .95rem; }
    .site-menu__link.esta-ativo { box-shadow: inset 0 -2px 0 var(--site-marca-texto); }

    /* Em tela grande o painel flutua; no celular ele empurra o conteudo,
       que e o comportamento certo para quem rola com o polegar. */
    .site-acesso__painel {
        position: absolute;
        right: 0;
        top: 100%;
        z-index: 55;
        width: 21rem;
    }
}

/* Faixa apertada (notebook de 1024 a 1149px): o menu inteiro cabe, mas o
   rotulo do botao de WhatsApp nao. Ele sai da tela e CONTINUA no leitor de
   tela — o botao nao vira um icone anonimo. O alvo de toque nao encolhe. */
@media (min-width: 900px) and (max-width: 1149px) {
    .site-menu__acoes .site-zap__rotulo {
        position: absolute;
        width: 1px; height: 1px;
        padding: 0; margin: -1px;
        overflow: hidden; clip: rect(0 0 0 0);
        white-space: nowrap; border: 0;
    }
    .site-menu__acoes .site-zap { padding-inline: .85rem; }
}

/* 3. BOTOES ---------------------------------------------------------- */

.site-botao {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    /* Alvo de toque: 44px e o minimo em que um dedo acerta na primeira. */
    min-height: 44px;
    padding: .8rem 1.3rem;
    border-radius: var(--vz-raio-pill);
    border: 1px solid transparent;
    font-weight: 700;
    font-size: 1rem;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    text-align: center;
    transition: transform .12s ease, box-shadow .12s ease, background-color .12s ease;
}
.site-botao:hover { transform: translateY(-1px); }
.site-botao:active { transform: translateY(0); }

/* O `:link`/`:visited` nao esta aqui por enfeite: sem ele o navegador
   aplicaria a cor de "link ja visitado" ao <a> do botao em alguns temas
   de sistema, e o botao mudaria de cor depois do primeiro clique. */
.site-botao--primario,
.site-botao--primario:link,
.site-botao--primario:visited {
    background: var(--vz-primaria);
    color: var(--vz-texto-invertido);
    box-shadow: var(--vz-sombra-2);
}
.site-botao--primario:hover,
.site-botao--primario:focus-visible {
    background: color-mix(in srgb, var(--vz-primaria) 88%, #000);
    color: var(--vz-texto-invertido);
}

/* Verde da marca. O texto e quase preto de proposito: sobre
   `--vz-destaque` (#12B76A) isso da 6,5:1 — passa AA com folga, e passa
   igual nos dois temas porque o fundo do botao nao muda com o tema. */
.site-botao--verde,
.site-botao--verde:link,
.site-botao--verde:visited {
    background: var(--vz-destaque);
    color: #04170D;
    box-shadow: var(--vz-sombra-2);
}
.site-botao--verde:hover,
.site-botao--verde:focus-visible {
    background: color-mix(in srgb, var(--vz-destaque) 88%, #000);
    color: #04170D;
}

.site-botao--fantasma,
.site-botao--fantasma:link,
.site-botao--fantasma:visited {
    background: transparent;
    color: var(--vz-texto);
    border-color: var(--vz-borda-forte);
}
.site-botao--fantasma:hover,
.site-botao--fantasma:focus-visible {
    border-color: var(--vz-primaria);
    color: var(--vz-texto);
    background: color-mix(in srgb, var(--vz-primaria) 10%, transparent);
}

.site-botao--pequeno { padding: .5rem .95rem; font-size: .92rem; }
.site-botao--largo { width: 100%; }

/* ---------------------------------------------------------------------
   BOTAO DE WHATSAPP

   Componente proprio, e nao mais uma variacao de cor: o WhatsApp e o
   produto inteiro deste site, e o botao precisa ser reconhecido antes de
   ser lido. Verde da marca do WhatsApp (#25D366) com texto quase preto —
   8,7:1 de contraste, muito acima do minimo AA, e identico nos dois temas
   porque o fundo do botao nao depende do tema da pagina.
   --------------------------------------------------------------------- */
.site-zap,
.site-zap:link,
.site-zap:visited {
    --site-zap-fundo: #25D366;
    --site-zap-texto: #06251A;
    background: var(--site-zap-fundo);
    color: var(--site-zap-texto);
    border-color: color-mix(in srgb, var(--site-zap-fundo) 70%, #000);
    box-shadow: var(--vz-sombra-2);
}
.site-zap:hover,
.site-zap:focus-visible {
    --site-zap-fundo: #1EBE5A;
    color: var(--site-zap-texto);
}
.site-zap:active { --site-zap-fundo: #17A64D; }

/* Anel de foco de dois tons: o azul do foco sozinho encostaria no verde e
   sumiria. O halo na cor do fundo da pagina separa os dois. */
.site-zap:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--vz-fundo), 0 0 0 6px var(--vz-primaria);
}

.site-zap__icone { flex: none; width: 22px; height: 22px; display: block; }
.site-zap--pequeno .site-zap__icone { width: 19px; height: 19px; }


.site-acoes {
    display: flex;
    flex-direction: column;
    gap: .7rem;
    margin-top: 1.4rem;
}

/* Um bloco so para os 600px. Eram dois, a nove linhas de distancia, com
   uma regra cada — mesma consulta avaliada duas vezes e duas chances de
   alguem ajustar uma e esquecer a outra. */
@media (min-width: 600px) {
    .site-botao--largo { width: auto; }
    .site-acoes { flex-direction: row; flex-wrap: wrap; align-items: center; }
}

/* 4. SECOES ---------------------------------------------------------- */

.site-conteudo { display: block; }

.site-secao { padding-block: clamp(2.6rem, 8vw, 4.6rem); }
.site-secao--apertada { padding-block: clamp(1.8rem, 5vw, 3rem); }
.site-secao--alterna { background: var(--vz-superficie-2); }
.site-secao--escura {
    background: var(--vz-secundaria);
    color: #EDF2F9;
}
.site-secao--escura h2,
.site-secao--escura h3 { color: #FFFFFF; }
.site-secao--escura p { color: #C6D2E2; }

.site-titulo-secao { max-width: 46rem; margin-bottom: 1.8rem; }
.site-titulo-secao p { color: var(--vz-texto-suave); font-size: 1.06rem; }
.site-secao--escura .site-titulo-secao p { color: #C6D2E2; }

.site-etiqueta {
    display: inline-block;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    /* Etiqueta e texto pequeno em caixa alta sobre `--vz-info-fundo`. Com
       `--vz-primaria` dava 3,2:1 no escuro; com o token legivel, 6,9:1. */
    color: var(--site-marca-texto);
    background: var(--vz-info-fundo);
    padding: .3rem .7rem;
    border-radius: var(--vz-raio-pill);
    margin-bottom: .8rem;
}
.site-secao--escura .site-etiqueta { background: rgba(255, 255, 255, .12); color: #FFFFFF; }

/* 5. HEROI ----------------------------------------------------------- */

.site-heroi {
    position: relative;
    padding-block: clamp(2.4rem, 9vw, 5rem);
    background:
        radial-gradient(900px 460px at 80% -10%, color-mix(in srgb, var(--vz-primaria) 18%, transparent), transparent 66%),
        radial-gradient(700px 420px at 0% 0%, color-mix(in srgb, var(--vz-destaque) 12%, transparent), transparent 62%),
        var(--vz-fundo);
}

.site-heroi__grade { display: grid; gap: 2.2rem; }

.site-heroi__frase {
    font-size: 1.14rem;
    color: var(--vz-texto-suave);
    max-width: 34rem;
}

.site-heroi__gesto {
    display: inline-block;
    font-weight: 800;
    font-size: clamp(1.05rem, 3.6vw, 1.35rem);
    color: var(--vz-texto);
    background: var(--vz-superficie);
    border: 1px solid var(--vz-borda);
    border-left: 4px solid var(--vz-destaque);
    border-radius: var(--vz-raio);
    padding: .7rem 1rem;
    margin-bottom: 1.1rem;
    box-shadow: var(--vz-sombra-1);
}

.site-heroi__selos {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-top: 1.5rem;
    padding: 0;
    list-style: none;
}

.site-selo {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-size: .86rem;
    font-weight: 600;
    color: var(--vz-texto-suave);
    background: var(--vz-superficie);
    border: 1px solid var(--vz-borda);
    border-radius: var(--vz-raio-pill);
    padding: .35rem .8rem;
}

@media (min-width: 960px) {
    .site-heroi__grade { grid-template-columns: 1.05fr .95fr; align-items: center; gap: 3rem; }
}

/* 6. CARTOES E GRADES ------------------------------------------------ */

.site-grade { display: grid; gap: 1rem; }
.site-grade--2 { grid-template-columns: 1fr; }
.site-grade--3 { grid-template-columns: 1fr; }
.site-grade--4 { grid-template-columns: 1fr 1fr; }

@media (min-width: 620px) {
    .site-grade--2 { grid-template-columns: 1fr 1fr; }
    .site-grade--3 { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 940px) {
    .site-grade--3 { grid-template-columns: repeat(3, 1fr); }
    .site-grade--4 { grid-template-columns: repeat(4, 1fr); }
}

/* ---------------------------------------------------------------------
   POR QUE O CARTAO NAO TEM MAIS `height: 100%`

   Era isso que fazia o rodape e o conteudo se desenharem um por cima do
   outro em /contato e em /cidades — o defeito em que dava para ler
   "VIZUNE / Conectando cidades" atravessando o texto do card.

   O mecanismo: `.site-revelar` e item de grade e, por `align-items:
   stretch`, recebe altura DEFINIDA (a altura da linha). Um `.site-cartao`
   dentro dele com `height: 100%` passava a medir essa altura inteira. Em
   /contato havia TRES cartoes empilhados nessa coluna, cada um esticado
   para 100% da coluna: o conteudo media o triplo da caixa, transbordava
   (o `overflow` e visivel) e ia parar por cima do rodape, que esta em
   fluxo normal logo abaixo do <main>.

   A altura cheia so faz sentido quando o cartao E o item da grade — e so
   nesse caso ela e aplicada agora, por seletor de filho direto.
   --------------------------------------------------------------------- */
.site-cartao {
    background: var(--vz-superficie);
    border: 1px solid var(--vz-borda);
    border-radius: var(--vz-raio-lg);
    padding: 1.4rem;
    box-shadow: var(--vz-sombra-1);
    height: auto;
}

/* Cartoes lado a lado terminam na mesma linha de base. So o filho direto
   da grade: ai a altura da linha e a altura que ele deve mesmo ter. */
.site-grade > .site-cartao { height: 100%; }

.site-cartao h3 { margin-bottom: .4rem; }

/* Titulo de cartao tem o tamanho do CARTAO, nao o da tag.
   Em /contato os cartoes usam <h2> (sao secoes de verdade na estrutura da
   pagina) e sairam com 36px dentro de uma caixa de 1,4rem de respiro,
   enquanto os cartoes das outras paginas, com <h3>, sairam com 21px. Mesma
   caixa, dois tamanhos: e a "inconsistencia" que se ve rolando o site. O
   nivel do titulo continua sendo escolhido pela estrutura do documento —
   so a aparencia e unificada. */
.site-cartao :where(h2, h3, h4) {
    font-size: clamp(1.12rem, 3.4vw, 1.35rem);
    font-weight: 700;
    margin-bottom: .4rem;
}
.site-cartao p { color: var(--vz-texto-suave); font-size: .97rem; }


.site-secao--escura .site-cartao {
    background: rgba(255, 255, 255, .06);
    border-color: rgba(255, 255, 255, .14);
    box-shadow: none;
}
.site-secao--escura .site-cartao p { color: #C6D2E2; }

.site-cartao__icone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px; height: 46px;
    border-radius: var(--vz-raio);
    background: var(--vz-info-fundo);
    color: var(--site-marca-texto);
    margin-bottom: .9rem;
}
.site-secao--escura .site-cartao__icone { background: rgba(255, 255, 255, .12); color: #FFFFFF; }

/* 7. LISTAS COM MARCA ------------------------------------------------ */

.site-lista { list-style: none; padding: 0; margin: 0; display: grid; gap: .7rem; }

/* Recuo pendurado, e nao grade de duas colunas.

   COM GRADE ESTAVA QUEBRADO: no CSS Grid cada pedaco de conteudo do <li>
   vira um item proprio — o texto solto vai para uma celula, o <a> para
   outra. Um item como "E-mail: <a>suporte@...</a>" saia em DUAS LINHAS,
   com o endereco caindo por baixo do visto. Da para ver isso na pagina de
   contato, no card "Outros caminhos".

   Com `position: absolute` no visto e recuo no <li>, o conteudo volta a
   ser fluxo de texto normal: texto e link na mesma linha, quebrando junto
   e alinhados pelo recuo. */
.site-lista li {
    position: relative;
    padding-left: 1.75rem;
    color: var(--vz-texto-suave);
}

/* Visto em texto, nao em imagem: nenhum pedido de rede a mais, e leitor de
   tela ignora (`aria-hidden` nao alcanca pseudo-elemento, mas o simbolo e
   decorativo e vem antes do conteudo real do item). */
.site-lista li::before {
    content: '✓';
    position: absolute;
    left: 0;
    top: .22em;
    width: 20px; height: 20px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: .78rem;
    font-weight: 800;
    line-height: 1;
    background: var(--vz-sucesso-fundo);
    color: var(--vz-sucesso);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--vz-sucesso) 30%, transparent);
}

.site-lista li strong { color: var(--vz-texto); }
.site-secao--escura .site-lista li { color: #C6D2E2; }
.site-secao--escura .site-lista li strong { color: #FFFFFF; }

/* 8. PASSOS ---------------------------------------------------------- */

.site-passos { display: grid; gap: 1.1rem; counter-reset: passo; list-style: none; padding: 0; margin: 0; }

.site-passos > li {
    counter-increment: passo;
    background: var(--vz-superficie);
    border: 1px solid var(--vz-borda);
    border-radius: var(--vz-raio-lg);
    padding: 1.3rem 1.3rem 1.3rem 3.6rem;
    position: relative;
    box-shadow: var(--vz-sombra-1);
}

.site-passos > li::before {
    content: counter(passo);
    position: absolute;
    left: 1.1rem;
    top: 1.25rem;
    width: 30px; height: 30px;
    border-radius: 50%;
    background: var(--vz-primaria);
    color: var(--vz-texto-invertido);
    font-weight: 800;
    font-size: .95rem;
    display: grid;
    place-items: center;
}

@media (min-width: 860px) {
    .site-passos { grid-template-columns: repeat(3, 1fr); }
}

/* 9. CONVERSA DE WHATSAPP -------------------------------------------- */

.site-conversa {
    margin: 0;
    background: var(--vz-superficie-3);
    border: 1px solid var(--vz-borda);
    border-radius: var(--vz-raio-lg);
    padding: 1rem;
    display: grid;
    gap: .55rem;
    box-shadow: var(--vz-sombra-2);
    max-width: 30rem;
}

.site-conversa__topo {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding-bottom: .7rem;
    margin: 0 0 .3rem;
    border-bottom: 1px solid var(--vz-borda);
    font-weight: 700;
    font-size: .92rem;
    color: var(--vz-texto-suave);
}

.site-balao {
    margin: 0;
    max-width: 86%;
    padding: .6rem .85rem;
    border-radius: 14px;
    font-size: .95rem;
    line-height: 1.45;
    box-shadow: var(--vz-sombra-1);
    white-space: pre-line;
}

.site-balao--pessoa {
    justify-self: end;
    background: color-mix(in srgb, var(--vz-destaque) 22%, var(--vz-superficie));
    color: var(--vz-texto);
    border-bottom-right-radius: 4px;
}

.site-balao--vizune {
    justify-self: start;
    background: var(--vz-superficie);
    color: var(--vz-texto);
    border-bottom-left-radius: 4px;
}

.site-balao strong { font-weight: 700; }

.site-conversa__nota {
    font-size: .82rem;
    color: var(--vz-texto-suave);
    margin: .35rem 0 0;
    text-align: center;
}

/* 10. TABELA COMPARATIVA ---------------------------------------------- */

.site-tabela-caixa {
    overflow-x: auto;
    border-radius: var(--vz-raio-lg);
    border: 1px solid var(--vz-borda);
    background: var(--vz-superficie);
    -webkit-overflow-scrolling: touch;
}

.site-tabela {
    width: 100%;
    min-width: 720px;
    border-collapse: collapse;
    font-size: .94rem;
}

.site-tabela th,
.site-tabela td {
    padding: .85rem .9rem;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid var(--vz-borda);
}

.site-tabela thead th {
    background: var(--vz-superficie-3);
    font-size: .82rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--vz-texto-suave);
    position: sticky;
    top: 0;
}

.site-tabela thead th.esta-em-destaque {
    color: var(--site-marca-texto);
    background: var(--vz-info-fundo);
}

.site-tabela tbody th {
    font-weight: 650;
    color: var(--vz-texto);
    width: 26%;
}

.site-tabela td.esta-em-destaque { background: color-mix(in srgb, var(--vz-primaria) 6%, var(--vz-superficie)); }
.site-tabela tr:last-child th,
.site-tabela tr:last-child td { border-bottom: 0; }

/* Marcador do resultado: forma + cor + texto. Quem nao distingue verde de
   vermelho ainda le o simbolo e o texto ao lado. */
.site-marca-nota {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    color: var(--vz-texto-suave);
}
.site-marca-nota::before {
    content: '+';
    flex: none;
    width: 20px; height: 20px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-weight: 800;
    font-size: .82rem;
    line-height: 1;
}
.site-marca-nota--bom::before { content: '✓'; background: var(--vz-sucesso-fundo); color: var(--vz-sucesso); }
.site-marca-nota--medio::before { content: '~'; background: var(--vz-aviso-fundo); color: var(--vz-aviso); }
.site-marca-nota--ruim::before { content: '×'; background: var(--vz-erro-fundo); color: var(--vz-erro); }

.site-nota-rodape {
    font-size: .86rem;
    color: var(--vz-texto-suave);
    margin-top: .9rem;
}

/* 11. PERGUNTAS ------------------------------------------------------- */

.site-faq { display: grid; gap: .7rem; max-width: 52rem; }

.site-faq__item {
    background: var(--vz-superficie);
    border: 1px solid var(--vz-borda);
    border-radius: var(--vz-raio);
    padding: .2rem 1.1rem;
}

.site-faq__item summary {
    cursor: pointer;
    font-weight: 700;
    padding: .95rem 0;
    list-style: none;
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: center;
}
.site-faq__item summary::-webkit-details-marker { display: none; }

.site-faq__item summary::after {
    content: '';
    flex: none;
    width: 10px; height: 10px;
    border-right: 2px solid var(--vz-texto-suave);
    border-bottom: 2px solid var(--vz-texto-suave);
    transform: rotate(45deg);
    transition: transform .18s ease;
}
.site-faq__item[open] summary::after { transform: rotate(-135deg); }

.site-faq__item p {
    color: var(--vz-texto-suave);
    padding-bottom: 1rem;
    margin: 0;
}

/* 12. FORMULARIO ------------------------------------------------------ */

.site-formulario {
    background: var(--vz-superficie);
    border: 1px solid var(--vz-borda);
    border-radius: var(--vz-raio-lg);
    padding: 1.4rem;
    box-shadow: var(--vz-sombra-2);
    display: grid;
    gap: .9rem;
}

.site-campo { display: grid; gap: .35rem; }

.site-campo label {
    font-weight: 650;
    font-size: .92rem;
    color: var(--vz-texto);
}

.site-campo__dica { font-size: .82rem; color: var(--vz-texto-suave); }

.site-campo input,
.site-campo textarea,
.site-campo select {
    font: inherit;
    font-size: 1rem;
    color: var(--vz-texto);
    background: var(--vz-superficie-2);
    border: 1px solid var(--vz-borda-forte);
    border-radius: var(--vz-raio-sm);
    padding: .75rem .85rem;
    width: 100%;
    min-height: 46px;
}
.site-campo textarea { min-height: 110px; resize: vertical; }
.site-campo input:focus,
.site-campo select:focus,
.site-campo textarea:focus { border-color: var(--vz-primaria); }

/* O <select> herda o menu do sistema operacional, que no tema escuro do
   Linux/Android costuma vir com fundo claro. Forcar o fundo do campo e da
   opcao mantem os dois temas coerentes. */
.site-campo select { appearance: none; padding-right: 2.4rem; cursor: pointer; }
.site-campo select option { background: var(--vz-superficie); color: var(--vz-texto); }

.site-campo--seta { position: relative; }
.site-campo--seta::after {
    content: '';
    position: absolute;
    right: 1rem;
    bottom: 1.15rem;
    width: 8px; height: 8px;
    border-right: 2px solid var(--vz-texto-suave);
    border-bottom: 2px solid var(--vz-texto-suave);
    transform: rotate(45deg);
    pointer-events: none;
}
/* No campo de cidade convivem um <select> e um <input> de texto, e so um
   deles esta a mostra. A seta pertence ao <select>: enquanto quem aparece
   e o texto (sem JavaScript, ou antes de o estado ser escolhido), ela sai.
   Navegador sem `:has()` mantem a seta — feio, nunca quebrado. */
.site-campo--seta:has(input:not([hidden]))::after { display: none; }

.site-campo[hidden] { display: none; }

/* Campo com erro: a borda vermelha nao vem sozinha — a mensagem de texto
   acima do formulario diz o que fazer, e o `aria-describedby` liga as duas.
   Cor sozinha nunca informa nada a quem nao distingue vermelho. */
.site-campo--erro input,
.site-campo--erro select {
    border-color: var(--vz-erro);
    background: color-mix(in srgb, var(--vz-erro) 7%, var(--vz-superficie-2));
}

/* ---------------------------------------------------------------------
   DESAFIO DE SOMA (anti-robo)

   A conta fica na sessao, no servidor; o que chega aqui e so a pergunta.
   Visualmente e um campo de formulario como qualquer outro — com rotulo
   de verdade, nao com um `placeholder` fazendo as vezes de rotulo.
   --------------------------------------------------------------------- */
.site-soma {
    display: grid;
    gap: .35rem;
    background: var(--vz-superficie-3);
    border: 1px solid var(--vz-borda);
    border-radius: var(--vz-raio);
    padding: .9rem 1rem;
}
.site-soma label { font-weight: 700; font-size: .95rem; color: var(--vz-texto); }
.site-soma .site-campo__dica { color: var(--vz-texto-suave); }

/* O campo da soma nao vive dentro de `.site-campo`, entao repete aqui o
   mesmo desenho dos outros campos — senao ele herdava o <input> cru do
   navegador e aparecia branco no tema escuro. */
.site-soma input {
    font: inherit;
    font-size: 1.05rem;
    font-weight: 700;
    text-align: center;
    color: var(--vz-texto);
    background: var(--vz-superficie-2);
    border: 1px solid var(--vz-borda-forte);
    border-radius: var(--vz-raio-sm);
    padding: .6rem .7rem;
    min-height: 46px;
    max-width: 8rem;
}
.site-soma input:focus { border-color: var(--vz-primaria); }

/* Campo-armadilha: fora da tela e fora da ordem de tabulacao. Nao usa
   `display:none` porque robo bom ignora campo escondido desse jeito. */
.site-armadilha {
    position: absolute;
    left: -9999px;
    width: 1px; height: 1px;
    overflow: hidden;
}

.site-formulario__retorno { margin: 0; font-size: .93rem; }

.site-aviso {
    border-radius: var(--vz-raio);
    padding: .8rem 1rem;
    margin: 1rem 0 0;
    font-size: .95rem;
    border: 1px solid transparent;
}
.site-aviso--ok { background: var(--vz-sucesso-fundo); color: var(--vz-sucesso); border-color: color-mix(in srgb, var(--vz-sucesso) 26%, transparent); }
.site-aviso--erro { background: var(--vz-erro-fundo); color: var(--vz-erro); border-color: color-mix(in srgb, var(--vz-erro) 26%, transparent); }

/* 13. CIDADES --------------------------------------------------------- */

.site-cidades { display: flex; flex-wrap: wrap; gap: .55rem; padding: 0; margin: 0 0 1.2rem; list-style: none; }

.site-cidade {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    font-weight: 650;
    font-size: .95rem;
    color: var(--vz-texto);
    background: var(--vz-superficie);
    border: 1px solid var(--vz-borda);
    border-radius: var(--vz-raio-pill);
    padding: .5rem 1rem;
}
.site-cidade__uf { color: var(--vz-texto-suave); font-weight: 500; font-size: .85rem; }
.site-cidade__distancia { color: var(--vz-texto-suave); font-weight: 500; font-size: .82rem; }
.site-cidade--ativa { border-color: color-mix(in srgb, var(--vz-destaque) 55%, var(--vz-borda)); }
.site-cidade--ativa::before {
    content: '';
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--vz-destaque);
}
.site-cidade--estudo { border-style: dashed; color: var(--vz-texto-suave); }

/* ---------------------------------------------------------------------
   BUSCA DE CIDADE

   As 5.570 cidades do IBGE NAO cabem na pagina — nem em bytes nem em
   sentido. A pagina mostra as atendidas e as vizinhas; o resto responde
   a uma busca. Funciona como <form method="get"> comum: sem JavaScript
   a pagina recarrega com o resultado, com JavaScript ele chega sem
   recarregar. Os dois caminhos usam a MESMA rota.
   --------------------------------------------------------------------- */
.site-busca {
    display: flex;
    flex-wrap: wrap;
    gap: .55rem;
    align-items: flex-end;
    margin: 0 0 1rem;
}
.site-busca__campo { flex: 1 1 15rem; display: grid; gap: .35rem; }
.site-busca__campo label { font-weight: 650; font-size: .92rem; color: var(--vz-texto); }
.site-busca__campo input {
    font: inherit;
    color: var(--vz-texto);
    background: var(--vz-superficie-2);
    border: 1px solid var(--vz-borda-forte);
    border-radius: var(--vz-raio-sm);
    padding: .7rem .85rem;
    width: 100%;
    min-height: 46px;
}
.site-busca__campo input:focus { border-color: var(--vz-primaria); }

.site-busca-resultado { margin: 0 0 1.2rem; }
.site-busca-resultado__vazio { color: var(--vz-texto-suave); font-size: .95rem; }

/* 14. RODAPE ---------------------------------------------------------- */

.site-rodape {
    background: var(--vz-secundaria);
    color: #C6D2E2;
    padding-top: 2.6rem;
    margin-top: 0;
}
.site-rodape a { color: #E6EDF6; text-decoration: none; }
.site-rodape a:hover { color: #FFFFFF; text-decoration: underline; }

.site-rodape__grade { display: grid; gap: 1.8rem; padding-bottom: 2rem; }

.site-rodape__slogan { color: #9FB0C6; margin-bottom: .6rem; }
.site-rodape__linha { margin: 0 0 .3rem; font-size: .93rem; }

.site-rodape__titulo {
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: #8FA2BA;
    margin: 0 0 .6rem;
}
.site-rodape__coluna ul { list-style: none; padding: 0; margin: 0 0 1.2rem; display: grid; gap: .45rem; font-size: .95rem; }

.site-rodape__base {
    border-top: 1px solid rgba(255, 255, 255, .12);
    padding-block: 1.1rem;
    font-size: .85rem;
    color: #8FA2BA;
    display: grid;
    gap: .25rem;
}
.site-rodape__base p { margin: 0; }

@media (min-width: 760px) {
    .site-rodape__grade { grid-template-columns: 1.6fr 1fr 1fr; }
    .site-rodape__base { grid-template-columns: 1fr auto; align-items: center; }
    .site-rodape__base p:last-child { text-align: right; }
}

/* 15. BOTAO FLUTUANTE E CONSENTIMENTO --------------------------------- */

/* O flutuante e o MESMO componente `.site-zap` do topo e do heroi: uma cor
   so, um icone so, um estado de foco so. O que ele acrescenta e a posicao. */
.site-flutuante {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    z-index: 45;
    font-size: .95rem;
    box-shadow: var(--vz-sombra-3);
}

/* No celular so o icone: o texto tapava metade da tela de leitura. O alvo
   continua com 48px de lado — nao encolhe junto com o rotulo. */
@media (max-width: 520px) {
    .site-flutuante .site-zap__rotulo { display: none; }
    .site-flutuante { padding: .8rem; min-width: 48px; min-height: 48px; }
}

.site-consentimento {
    position: fixed;
    left: 1rem; right: 1rem; bottom: 1rem;
    z-index: 60;
    background: var(--vz-superficie);
    border: 1px solid var(--vz-borda);
    border-radius: var(--vz-raio-lg);
    box-shadow: var(--vz-sombra-3);
    padding: 1rem;
    display: grid;
    gap: .8rem;
    max-width: 34rem;
    margin-inline: auto;
    font-size: .9rem;
}
.site-consentimento p { margin: 0; color: var(--vz-texto-suave); }
.site-consentimento__acoes { display: flex; gap: .5rem; justify-content: flex-end; }

/* 16. ILUSTRACOES ----------------------------------------------------- */

.site-ilustracao { width: 100%; height: auto; display: block; }
.site-ilustracao .traco { stroke: var(--vz-primaria); }
.site-ilustracao .cheio { fill: var(--vz-primaria); }
.site-ilustracao .cheio-suave { fill: color-mix(in srgb, var(--vz-primaria) 16%, transparent); }
.site-ilustracao .destaque { fill: var(--vz-destaque); }
.site-ilustracao .superficie { fill: var(--vz-superficie); }
.site-ilustracao .borda { stroke: var(--vz-borda-forte); }
.site-ilustracao .texto-suave { fill: var(--vz-texto-fraco); }

/* 17. TEXTO LONGO (termos e privacidade) ------------------------------ */

.site-documento { max-width: 46rem; }
.site-documento h2 { margin-top: 2.2rem; font-size: 1.32rem; }
.site-documento h3 { margin-top: 1.4rem; font-size: 1.05rem; }
.site-documento li { margin-bottom: .4rem; color: var(--vz-texto-suave); }
.site-documento p { color: var(--vz-texto-suave); }
.site-documento__data { font-size: .88rem; color: var(--vz-texto-suave); }

/* 18. ANIMACAO DISCRETA ------------------------------------------------ */

/* Estado inicial so entra quando o JS confirma que vai observar. Sem isso,
   navegador sem JavaScript deixaria o site inteiro invisivel — e um site
   invisivel e pior que um site sem animacao. */
.js-anima .site-revelar {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity .5s ease, transform .5s ease;
}
.js-anima .site-revelar.esta-visivel { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
    .site *,
    .site *::before,
    .site *::after {
        animation-duration: .001ms !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
    .js-anima .site-revelar { opacity: 1; transform: none; }
    .site-botao:hover { transform: none; }
}

/* 19. UTILIDADES ------------------------------------------------------- */

/* Poucas, e todas com nome do que fazem. Utilidade demais vira segundo
   sistema de layout escondido dentro do HTML. */
.site-centralizado { text-align: center; }
.site-centralizado .site-acoes { justify-content: center; }
.site-limite-texto { max-width: 40rem; margin-inline: auto; }
.site-limite-texto-largo { max-width: 46rem; }
.site-espaco-topo { margin-top: 1.6rem; }
.site-passos--coluna { grid-template-columns: 1fr !important; }

/* Botao fantasma sobre fundo escuro: a borda cinza sumia no
   `.site-secao--escura`. */
.site-secao--escura .site-botao--fantasma {
    color: #FFFFFF;
    border-color: rgba(255, 255, 255, .45);
}
.site-secao--escura .site-botao--fantasma:hover {
    color: #FFFFFF;
    border-color: #FFFFFF;
    background: rgba(255, 255, 255, .08);
}

/* A faixa escura usa `--vz-secundaria`, que e escura NOS DOIS TEMAS. Os
   tokens de texto auxiliar, porem, sao pensados para fundo claro: no tema
   claro, `--vz-texto-suave` sobre `#101828` da menos de 3:1. Estas tres
   regras existem so para isso — sem elas a secao fica bonita e ilegivel. */
.site-secao--escura .site-campo__dica,
.site-secao--escura .site-nota-rodape { color: #B7C4D6; }

/* Excecao da excecao: o formulario dentro da faixa escura e um cartao de
   fundo CLARO (ele usa `--vz-superficie`, nao a transparencia dos cartoes).
   Sem devolver os tokens normais aqui, o titulo do formulario sairia branco
   sobre branco — foi exatamente o que aconteceu na pagina do comerciante. */
.site-secao--escura .site-formulario,
.site-secao--escura .site-formulario h2,
.site-secao--escura .site-formulario h3,
.site-secao--escura .site-formulario label { color: var(--vz-texto); }
.site-secao--escura .site-formulario p,
.site-secao--escura .site-formulario .site-campo__dica { color: var(--vz-texto-suave); }
.site-secao--escura .site-formulario a { color: var(--site-marca-texto); }

.site-secao--escura .site-lista li::before {
    background: rgba(255, 255, 255, .14);
    color: #FFFFFF;
    box-shadow: none;
}

.site-secao--escura .site-cidade {
    background: rgba(255, 255, 255, .08);
    border-color: rgba(255, 255, 255, .2);
    color: #FFFFFF;
}
.site-secao--escura .site-cidade__uf { color: #B7C4D6; }

/* 20. IMPRESSAO -------------------------------------------------------- */

@media print {
    .site-topo, .site-flutuante, .site-consentimento, .site-rodape__coluna { display: none; }
    .site { background: #fff; color: #000; }
}

/* Entrada do aplicativo e agenda regional. */
.site-servico-link{display:block;color:inherit;text-decoration:none;transition:transform .18s,box-shadow .18s}.site-servico-link:hover,.site-servico-link:focus-visible{transform:translateY(-3px);box-shadow:0 12px 30px #0b5fff18}.site-servico-icone{font-size:2rem}.site-servico-link strong{color:var(--vz-primaria,#0b5fff)}.site-instalar{margin-top:28px}.site-rotas-publicas{margin-top:28px;flex-wrap:wrap}.site-rotas-publicas a{white-space:normal}