/* ==========================================================================
   SAAE Pirajuí — ajustes que não cabem nos tokens do Tailwind.

   A PALETA NÃO FICA AQUI. Ela está em assets/css/abstract/variable.css,
   que é compilado pelo Tailwind (`npm run css`). Definir cor aqui cria
   valor duplicado que sobrescreve a fonte e gera divergência silenciosa.
   ========================================================================== */

/* O template usa --bodytext tanto em seções escuras quanto em painéis
   claros. Como as páginas do SAAE são todas escuras, o token global é
   claro (#BBD5EC) e os blocos claros pedem cor própria. */
.superficie-clara,
.superficie-clara p,
.superficie-clara li,
.superficie-clara span:not([class*="text-"]) {
    color: #4A6580;
}

/* --------------------------------------------------------------------------
   Robustez das animações

   O WOW.js esconde .wow com visibility:hidden ate o scroll disparar. Se o JS
   falhar ou estiver desligado, o conteudo nunca aparece. Num site publico isso
   nao e aceitavel: sem JS, tudo visivel.
   -------------------------------------------------------------------------- */
html:not(.js) .wow,
html:not(.js) .headline,
html:not(.js) .char {
    visibility: visible !important;
    opacity: 1 !important;
    animation: none !important;
    transform: none !important;
}

/* Quem pediu menos movimento no sistema nao recebe animacao nenhuma. */
@media (prefers-reduced-motion: reduce) {
    .wow, .headline, .char, .img-zoom * {
        visibility: visible !important;
        opacity: 1 !important;
        animation: none !important;
        transition: none !important;
        transform: none !important;
    }
}

/* Sem JS o accordion nunca abre e as respostas do FAQ ficam invisiveis.
   Conteudo de utilidade publica nao pode depender de script. */
html:not(.js) .accordion-content {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
}
html:not(.js) .accordion-header .arrow { display: none; }

/* --------------------------------------------------------------------------
   Botões — texto no hover

   O efeito .flairBtn preenche o botão com --secondary (azul escuro) ao passar
   o mouse. Sem isto o texto continua escuro e some no fundo escuro. Regra
   única: qualquer botão flair fica escuro com texto BRANCO no hover/foco.
   -------------------------------------------------------------------------- */
.flairBtn:hover,
.flairBtn:focus-visible,
.flairBtn:hover *,
.flairBtn:focus-visible * {
    color: #ffffff !important;
}

/* --------------------------------------------------------------------------
   Visor de PDF — modal para ver documentos sem sair do site
   -------------------------------------------------------------------------- */
.visor{position:fixed;inset:0;z-index:200;display:none;align-items:center;justify-content:center;padding:16px}
.visor.aberto{display:flex}
.visor-fundo{position:absolute;inset:0;background:rgba(0,21,38,.72);animation:visorFade .2s ease}
.visor-caixa{position:relative;background:#fff;border-radius:16px;width:min(1000px,100%);height:min(92vh,100%);display:flex;flex-direction:column;overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.45);animation:visorSobe .25s cubic-bezier(.2,.7,.3,1)}
.visor-topo{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 18px;border-bottom:1px solid #DCE6EF;flex:none}
.visor-titulo{font-weight:600;color:#002748;font-size:16px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.visor-acoes{display:flex;align-items:center;gap:10px;flex:none}
.visor-baixar{display:inline-flex;align-items:center;gap:8px;background:#0086F8;color:#001526;padding:9px 18px;border-radius:999px;font-weight:600;font-size:14px;text-decoration:none;transition:background .2s}
.visor-baixar:hover{background:#0070D6;color:#fff}
.visor-fechar{width:40px;height:40px;border:none;background:#F4F8FC;border-radius:50%;color:#002748;font-size:18px;cursor:pointer;display:grid;place-items:center;transition:background .2s}
.visor-fechar:hover{background:#DCE6EF}
.visor-quadro{flex:1;background:#5A6B7B;min-height:0;overflow:auto;padding:16px;display:flex;flex-direction:column;align-items:safe center;gap:16px}
/* PDF ampliado: alinha ao topo-esquerda (todo o conteudo alcancavel) e permite arrastar */
.visor-quadro.visor-ampliado{align-items:flex-start;cursor:grab}
.visor-quadro.arrastando{cursor:grabbing}
.visor-quadro.arrastando .visor-pagina{pointer-events:none}
.visor-pagina{max-width:100%;box-shadow:0 4px 16px rgba(0,0,0,.25);background:#fff}
.visor-alt{padding:40px 24px;text-align:center;color:#4A6580}
.visor-alt a{color:#0057A3;font-weight:600}
@keyframes visorFade{from{opacity:0}to{opacity:1}}
@keyframes visorSobe{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.visor-fundo,.visor-caixa{animation:none}}


/* --------------------------------------------------------------------------
   Popup — imagem promocional configurável (lida de assets/popups.json)
   Tamanho sugerido da imagem: 1000 x 1250 px (proporção 4:5, retrato).
   -------------------------------------------------------------------------- */
.popup{position:fixed;inset:0;z-index:220;display:none;align-items:center;justify-content:center;padding:20px}
.popup.aberto{display:flex}
.popup-fundo{position:absolute;inset:0;background:rgba(0,21,38,.72);animation:visorFade .2s ease}
.popup-caixa{position:relative;width:min(440px,100%);max-height:92vh;border-radius:16px;overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.45);animation:visorSobe .3s cubic-bezier(.2,.7,.3,1);background:#fff}
.popup-caixa a{display:block}
.popup-caixa img{width:100%;height:auto;display:block}
.popup-fechar{position:absolute;top:12px;right:12px;z-index:2;width:40px;height:40px;border:none;background:rgba(255,255,255,.92);border-radius:50%;color:#002748;font-size:18px;cursor:pointer;display:grid;place-items:center;transition:background .2s;box-shadow:0 2px 8px rgba(0,0,0,.2)}
.popup-fechar:hover{background:#fff}

/* --------------------------------------------------------------------------
   FAQ — cards com brilho que segue o cursor, ícone que gira e acordeão suave.
   Adaptado nas cores do SAAE (azul da marca).
   -------------------------------------------------------------------------- */
@keyframes faqx-sobe{0%{transform:translateY(20px);opacity:0;filter:blur(6px)}60%{filter:blur(0)}100%{transform:none;opacity:1;filter:blur(0)}}
@keyframes faqx-meter{0%,20%{transform:scaleX(0);transform-origin:left}45%,60%{transform:scaleX(1);transform-origin:left}80%,100%{transform:scaleX(0);transform-origin:right}}
@keyframes faqx-pulso{0%{transform:scale(.7);opacity:.5}60%{opacity:.1}100%{transform:scale(1.25);opacity:0}}

.faqx-badge{position:relative;display:inline-flex;align-items:center;gap:.75rem;padding:.7rem 1.3rem;border-radius:9999px;overflow:hidden;border:1px solid #CFE8FD;background:#E8F4FE;color:#0057A3;text-transform:uppercase;letter-spacing:.28em;font-size:.68rem;font-weight:600}
.faqx-badge__ponto{width:.5rem;height:.5rem;border-radius:50%;background:#0086F8;box-shadow:0 0 0 4px rgba(0,134,248,.15)}
.faqx-badge__linha{flex:1;min-width:2.5rem;height:1px;background:linear-gradient(90deg,transparent,#0086F8 40%,transparent 90%);transform:scaleX(0);transform-origin:left;animation:faqx-meter 5.8s ease-in-out infinite}

.faqx-item{position:relative;overflow:hidden;border:1px solid var(--borda,#DCE6EF);background:#fff;border-radius:24px;transition:transform .4s cubic-bezier(.22,.68,0,1),box-shadow .4s,border-color .4s}
.faqx-item:hover{transform:translateY(-3px);border-color:#CFE8FD;box-shadow:0 24px 60px -32px rgba(0,39,72,.4)}
.faqx-item.aberto{border-color:#9BD1FC}
.faqx-brilho{pointer-events:none;position:absolute;inset:0;opacity:0;transition:opacity .5s;background:radial-gradient(220px circle at var(--fx,50%) var(--fy,50%),rgba(0,134,248,.12),transparent 70%)}
.faqx-item:hover .faqx-brilho,.faqx-item.aberto .faqx-brilho{opacity:1}
.faqx-gatilho{position:relative;display:flex;width:100%;align-items:flex-start;gap:1.25rem;padding:1.6rem 1.8rem;text-align:left;background:none;border:none;cursor:pointer}
.faqx-gatilho:focus-visible{outline:2px solid #0086F8;outline-offset:-4px;border-radius:24px}
.faqx-mais{position:relative;display:grid;place-items:center;width:3rem;height:3rem;flex:none;border-radius:50%;border:1px solid #CFE8FD;background:#E8F4FE;color:#0057A3;transition:transform .5s}
.faqx-item.aberto .faqx-mais{transform:rotate(45deg);background:#0086F8;color:#fff;border-color:#0086F8}
.faqx-mais svg{width:1.15rem;height:1.15rem}
.faqx-resposta{overflow:hidden;max-height:0;transition:max-height .5s ease}
html:not(.js) .faqx-resposta{max-height:none}
.faqx-item.aberto .faqx-resposta{max-height:22rem}
@media(prefers-reduced-motion:reduce){.faqx-badge__linha,.faqx-mais,.faqx-resposta,.faqx-item{animation:none !important;transition:none !important}html:not(.js) .faqx-resposta{max-height:none}}

/* --------------------------------------------------------------------------
   Busca no site — a lupa abre uma TARJA fina; os resultados descem em seguida,
   com a mesma expansão suave do FAQ.
   -------------------------------------------------------------------------- */
.busca-modal{position:fixed;inset:0;z-index:240;display:none;justify-content:center;padding:10vh 20px 20px}
.busca-modal.aberto{display:flex;align-items:flex-start}
.busca-fundo{position:absolute;inset:0;background:rgba(0,21,38,.5);animation:visorFade .2s ease}
.busca-caixa{position:relative;width:min(660px,100%);background:#fff;border-radius:16px;overflow:hidden;box-shadow:0 24px 70px rgba(0,0,0,.3);animation:visorSobe .25s cubic-bezier(.2,.7,.3,1)}
.busca-topo{display:flex;align-items:center;gap:12px;padding:16px 20px}
.busca-topo i{color:#0057A3;font-size:18px}
.busca-input{flex:1;border:none;outline:none;font-size:17px;color:#002748;background:none}
.busca-input::placeholder{color:#7A94AC}
.busca-fechar{border:none;background:#F4F8FC;width:34px;height:34px;border-radius:8px;color:#002748;cursor:pointer;font-size:14px;flex:none}
.busca-resultados{max-height:0;overflow-y:auto;transition:max-height .38s cubic-bezier(.2,.7,.3,1)}
.busca-resultados.tem{max-height:min(58vh,520px);border-top:1px solid #DCE6EF}
.busca-lista{padding:8px}
.busca-item{display:block;padding:14px 16px;border-radius:12px;text-decoration:none;opacity:0;transform:translateY(6px);animation:faqx-sobe .35s ease forwards;transition:background .15s}
.busca-item:hover,.busca-item:focus-visible{background:#E8F4FE;outline:none}
.busca-item h4{color:#002748;font-size:16px;font-weight:600;margin:0 0 3px}
.busca-item p{color:#4A6580;font-size:14px;margin:0;line-height:1.5}
.busca-item mark{background:#CFE8FD;color:#0057A3;padding:0 2px;border-radius:3px}
.busca-vazio{padding:22px 20px;text-align:center;color:#4A6580;font-size:14px}
@media(prefers-reduced-motion:reduce){.busca-item{animation:none;opacity:1;transform:none}.busca-resultados{transition:none}}

/* --------------------------------------------------------------------------
   Atendente digital — botão flutuante + janela de conversa
   -------------------------------------------------------------------------- */
.at-wrap{position:fixed;right:20px;bottom:20px;z-index:230;display:flex;flex-direction:column;align-items:flex-end;gap:12px}
.at-teaser{background:#fff;border:1px solid var(--borda);border-radius:14px;border-bottom-right-radius:4px;padding:10px 14px;max-width:230px;font-size:13.5px;color:var(--azul-900);box-shadow:0 12px 30px -12px rgba(0,39,72,.4);cursor:pointer;animation:atEntra .4s ease}
.at-teaser b{color:var(--azul-700)}
.at-teaser.some{display:none}
@keyframes atEntra{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.at-bolha{width:60px;height:60px;border-radius:50%;border:none;cursor:pointer;background:linear-gradient(150deg,#0086F8,#0057A3);color:#fff;display:grid;place-items:center;box-shadow:0 14px 34px -10px rgba(0,134,248,.7);transition:transform .2s}
.at-bolha:hover{transform:scale(1.06)}
.at-bolha svg{width:26px;height:26px}
.at-bolha .bolha-foto{width:100%;height:100%;object-fit:cover;border-radius:50%}
.at-bolha{overflow:hidden;background:#fff;border:2px solid #0086F8;padding:0}
.at-bolha .ponto{position:absolute;top:2px;right:2px;width:14px;height:14px;background:#E24B4A;border:2px solid #fff;border-radius:50%}
.at-bolha{position:relative}

.at-janela{width:min(380px,calc(100vw - 32px));background:#fff;border:1px solid var(--borda);border-radius:18px;overflow:hidden;box-shadow:0 30px 70px -24px rgba(0,39,72,.55);display:none;flex-direction:column;animation:atSobe .3s cubic-bezier(.2,.7,.3,1)}
.at-janela.on{display:flex}
@keyframes atSobe{from{opacity:0;transform:translateY(16px) scale(.97)}to{opacity:1;transform:none}}
.at-cab{display:flex;align-items:center;gap:12px;padding:16px;background:linear-gradient(120deg,#0086F8,#0057A3);color:#fff}
.at-cab .av{width:42px;height:42px;border-radius:50%;overflow:hidden;flex:none;background:rgba(255,255,255,.2);border:2px solid rgba(255,255,255,.5)}
.at-cab .av img{width:100%;height:100%;object-fit:cover;display:block}
.at-cab .av svg{width:22px;height:22px}
.at-cab h4{margin:0;font-size:15px;font-weight:700}
.at-cab p{margin:0;font-size:12px;color:#fff;opacity:1;display:flex;align-items:center;gap:6px}
.at-cab h4{color:#fff}
.at-cab .on-dot{width:8px;height:8px;border-radius:50%;background:#5DE3B0}
.at-cab .fechar{margin-left:auto;background:rgba(255,255,255,.15);border:none;color:#fff;width:32px;height:32px;border-radius:8px;cursor:pointer;display:grid;place-items:center}
.at-cab .fechar svg{width:16px;height:16px}
.at-corpo{padding:18px 16px;height:360px;overflow-y:auto;background:var(--fundo);display:flex;flex-direction:column;gap:14px}
.at-linha{display:flex;gap:9px;align-items:flex-end;max-width:90%}
.at-linha.bot{align-self:flex-start}
.at-linha.user{align-self:flex-end;flex-direction:row-reverse}
.at-mini{width:30px;height:30px;border-radius:50%;flex:none;display:grid;place-items:center;background:linear-gradient(150deg,#0086F8,#0057A3);color:#fff}
.at-mini svg{width:16px;height:16px}
.at-linha.user .at-mini{background:#CFE8FD;color:#0057A3;font-weight:700;font-size:12px}
.at-msg{padding:12px 15px;border-radius:16px;font-size:14.5px;line-height:1.6}
.at-linha.bot .at-msg{background:#fff;border:1px solid var(--borda);border-bottom-left-radius:5px;color:var(--azul-900);box-shadow:0 4px 14px -8px rgba(0,39,72,.25)}
.at-linha.user .at-msg{background:var(--azul-700);color:#fff;border-bottom-right-radius:5px}
.at-msg a{color:var(--azul-700);font-weight:600;text-decoration:underline;text-underline-offset:2px}
.at-msg p{margin:0}
/* passos numerados */
.at-passos{list-style:none;counter-reset:p;margin:12px 0 4px;padding:0}
.at-passos li{counter-increment:p;position:relative;padding:0 0 12px 38px;line-height:1.5}
.at-passos li:last-child{padding-bottom:0}
.at-passos li::before{content:counter(p);position:absolute;left:0;top:-1px;width:26px;height:26px;border-radius:50%;background:#E8F4FE;color:var(--azul-700);font-weight:700;font-size:13px;display:grid;place-items:center}
.at-passos li:not(:last-child)::after{content:"";position:absolute;left:12.5px;top:26px;bottom:2px;width:1.5px;background:var(--borda)}
/* botão de ação dentro da mensagem (CTA) */
.at-cta{display:inline-flex;align-items:center;gap:8px;margin-top:12px;background:var(--azul-700);color:#fff!important;padding:9px 16px;border-radius:999px;font-weight:600;font-size:14px;text-decoration:none!important}
.at-cta:hover{background:var(--azul-900)}
.at-cta.zap{background:#1D9E75}.at-cta.zap:hover{background:#0F6E56}
/* indicador de digitando */
.at-digita .at-msg{display:flex;gap:5px;padding:14px 16px}
.at-digita span{width:7px;height:7px;border-radius:50%;background:#9BB4CC;animation:atPula 1.2s infinite}
.at-digita span:nth-child(2){animation-delay:.2s}.at-digita span:nth-child(3){animation-delay:.4s}
@keyframes atPula{0%,60%,100%{transform:translateY(0);opacity:.5}30%{transform:translateY(-5px);opacity:1}}
.at-chips{display:flex;flex-wrap:wrap;gap:8px;padding:4px 16px 14px;background:var(--fundo);border-top:1px solid var(--borda)}
.at-rodape{display:flex;gap:8px;padding:12px 14px;border-top:1px solid var(--borda);background:#fff}
.at-rodape input{flex:1;border:1px solid var(--borda);border-radius:999px;padding:10px 14px;font-size:14px;outline:none;color:var(--azul-900)}
.at-rodape input:focus{border-color:var(--azul)}
.at-rodape button{width:42px;height:42px;border:none;border-radius:50%;background:var(--azul-700);color:#fff;cursor:pointer;display:grid;place-items:center}
.at-rodape button svg{width:18px;height:18px}
@media(prefers-reduced-motion:reduce){.at-teaser,.at-janela{animation:none}}

/* Header fixo no scroll: fundo BRANCO translucido (tema claro) */
.site-header.is-fixed .main-bar-wraper,
.is-fixed:not(.sticky-no) .main-bar-wraper {
  background-color: rgba(255,255,255,0.90) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(15,42,74,0.08);
  box-shadow: 0 4px 20px rgba(0,86,163,0.06);
}

/* ===== Carrossel Qualidade da água (crossfade automático) ===== */
.carrossel-qa { overflow: hidden; }
.carrossel-qa .carrossel-img {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; opacity: 0; transition: opacity 1.1s ease; will-change: opacity;
}
.carrossel-qa .carrossel-img.ativa { opacity: 1; }
.carrossel-pontos { position: absolute; left: 0; right: 0; bottom: 16px; display: flex; justify-content: center; gap: 8px; z-index: 2; }
.carrossel-pontos button { width: 9px; height: 9px; border-radius: 50%; border: none; padding: 0; cursor: pointer; background: rgba(255,255,255,.55); transition: background .2s, width .2s; }
.carrossel-pontos button.ativa { background: #fff; width: 22px; border-radius: 5px; }

/* ===== FAQ — botão +/- visível, com cara de caixa de perguntas ===== */
.custom-accordion.style-2 .accordion-item { border-radius: 14px; transition: box-shadow .2s, border-color .2s; }
.custom-accordion.style-2 .accordion-item .accordion-header .arrow {
    display: flex !important; align-items: center; justify-content: center;
    width: 38px; height: 38px; border-radius: 50%; background: #eaf3ff; flex: none; transition: background .2s;
}
.custom-accordion.style-2 .accordion-item .accordion-header .arrow i {
    color: #0086F8 !important; font-size: 15px !important; line-height: 1 !important;
}
.custom-accordion.style-2 .accordion-item .accordion-header:hover .arrow { background: #d6e9ff; }
.custom-accordion.style-2 .accordion-item .accordion-header.open .arrow { background: #0086F8; }
.custom-accordion.style-2 .accordion-item .accordion-header.open .arrow i.fa-minus { color: #fff !important; }

/* Chat acima do botão "voltar ao topo" (que fica em right:20/bottom:20) — sem sobrepor */
.at-wrap { bottom: 88px !important; }
@media (max-width: 600px) { .at-wrap { bottom: 80px !important; right: 14px !important; } }

/* ===== Barra de avisos do topo (rodízio automático) ===== */
.barra-avisos-vp { display: grid; flex: 1; min-width: 0; }
.barra-avisos-vp .aviso-item {
    grid-area: 1 / 1; display: flex; align-items: center; gap: 10px;
    font-size: 15px; font-weight: 500; line-height: 1.35;
    opacity: 0; transform: translateY(6px); transition: opacity .5s ease, transform .5s ease;
    pointer-events: none;
}
.barra-avisos-vp .aviso-item.ativo { opacity: 1; transform: none; pointer-events: auto; }
.barra-avisos-vp .aviso-item a { text-decoration: underline; text-underline-offset: 4px; white-space: nowrap; }

/* ===== Passos "Como a água chega até você" — revelação + anel de água ===== */
.passo { opacity: 0; transform: translateY(24px); transition: opacity .6s ease, transform .6s ease, box-shadow .25s ease, border-color .25s ease; }
.passo.revelado { opacity: 1; transform: none; }
.passo:hover { border-color: #0086F8; box-shadow: 0 16px 36px rgba(0,86,163,.13); transform: translateY(-6px); }
.passo-num { position: relative; transition: transform .25s ease; }
.passo:hover .passo-num { transform: scale(1.08); }
.passo-num::after { content: ''; position: absolute; inset: -5px; border-radius: 50%; border: 2px solid rgba(0,134,248,.4); opacity: 0; }
.passo.revelado .passo-num::after { animation: passoRing 2.6s ease-out infinite; }
@keyframes passoRing { 0% { opacity: .55; transform: scale(.9); } 70% { opacity: 0; transform: scale(1.55); } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .passo { opacity: 1; transform: none; transition: none; } .passo.revelado .passo-num::after { animation: none; } }


/* ===== Chat: perguntas prontas como retângulos com contorno ===== */
.at-chip{display:inline-flex;align-items:center;gap:6px;padding:9px 13px;border:1.5px solid #cfe0f5;border-radius:12px;background:#fff;color:var(--azul-900);font-size:13.5px;font-weight:500;line-height:1.3;text-align:left;cursor:pointer;transition:border-color .15s,background .15s,color .15s,transform .1s}
.at-chip:hover{border-color:#0086F8;background:#f0f7ff;color:#0057A3}
.at-chip:active{transform:scale(.98)}
.at-chip.zap{border-color:#1D9E75;color:#0F6E56;background:#eafaf3}
.at-chip.zap:hover{background:#1D9E75;color:#fff;border-color:#1D9E75}

/* ===== Revelação genérica ao rolar ===== */
[data-revelar] > * { opacity: 0; transform: translateY(22px); transition: opacity .55s ease, transform .55s ease, box-shadow .25s ease, border-color .25s ease; }
[data-revelar] > *.revelado { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { [data-revelar] > * { opacity: 1; transform: none; } }
/* Cards de Serviços — hover ===== */
.serv-card > h3 { transition: background .25s ease, color .25s ease; }
.serv-card:hover { border-color: #0086F8 !important; box-shadow: 0 16px 36px rgba(0,86,163,.12); transform: translateY(-6px); }
.serv-card:hover > h3 { background: #0086F8; color: #fff; }

/* Passos "Como a água chega": número BRANCO + pulo no hover */
.passo-num { color: #fff !important; }
.passo:hover { animation: passoPulo .55s ease forwards; }
.passo:hover .passo-num { animation: numPop .5s ease; }
@keyframes passoPulo { 0% { transform: translateY(0); } 35% { transform: translateY(-14px); } 62% { transform: translateY(-3px); } 82% { transform: translateY(-9px); } 100% { transform: translateY(-7px); } }
@keyframes numPop { 0% { transform: scale(1); } 40% { transform: scale(1.22) rotate(-6deg); } 100% { transform: scale(1.1); } }
@media (prefers-reduced-motion: reduce) { .passo:hover, .passo:hover .passo-num { animation: none; } }

/* ===== Fundo do rodapé (onda azul) ===== */
footer.bg-escuro {
    background-image: linear-gradient(rgba(8,26,48,.45), rgba(8,26,48,.60)), url('../images/fundo-rodape.jpg');
    background-size: cover;
    background-position: center bottom;
    background-repeat: no-repeat;
}

/* ===== Zoom no visualizador de PDF ===== */
.visor-zoom-grupo{display:inline-flex;align-items:center;gap:2px;background:#F4F8FC;border:1px solid #DCE6EF;border-radius:999px;padding:3px}
.visor-zoom{width:34px;height:34px;border:none;border-radius:50%;background:transparent;color:#0057A3;cursor:pointer;display:grid;place-items:center;font-size:14px;transition:background .15s}
.visor-zoom:hover{background:#E1F0FF}
.visor-zoom-nivel{color:#002748;font-size:13px;font-weight:700;min-width:46px;text-align:center;user-select:none}
/* scroll instantâneo: o "suave" quebrava o arrastar-para-mover (cada movimento
   reiniciava a animação de scroll, travando o pan do PDF ampliado). */
.visor-quadro{scroll-behavior:auto}
@media(max-width:640px){.visor-titulo{display:none}.visor-acoes{gap:6px}.visor-baixar{padding:9px 14px}}

/* ===== Fix responsivo: hero em coluna única no mobile (evita overflow do grid-12) ===== */
@media (max-width: 1279px) {
  section.bg-primarylight .grid { grid-template-columns: 1fr !important; column-gap: 0 !important; }
  section.bg-primarylight .grid > * { grid-column: auto !important; }
}

/* grid-cols-1 (não compilada) — SÓ no mobile, para não sobrepor xl:grid-cols-12 no desktop */
@media (max-width:1279px){ .grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))} }

/* ===== Menu mobile: fundo escuro + texto BRANCO + centralizado ===== */
@media (max-width: 1279px) {
  .header-nav { background: #002748 !important; padding: 28px 24px !important; }
  .header-nav .navbar { text-align: center; }
  .header-nav .navbar > li > a { justify-content: center; }
  .header-nav .navbar a,
  .header-nav .navbar a span,
  .header-nav h2, .header-nav h3 { color: #ffffff !important; }
  .header-nav .navbar a span { font-weight: 500; }
  .header-nav .navbar a:hover span,
  .header-nav .navbar > li:hover > a span { color: #7fbcff !important; }
  .header-nav a:not(.navbar a) { color: #bcd6f2 !important; }
  .header-nav a:not(.navbar a):hover { color: #fff !important; }
  .header-nav input { color: #fff !important; border-color: rgba(255,255,255,.3) !important; background: transparent !important; }
  .header-nav input::placeholder { color: rgba(255,255,255,.55) !important; }
  .header-nav .fa-magnifying-glass { color: rgba(255,255,255,.7) !important; }
}
/* Hambúrguer: 3 tracinhos limpos */
.menu-btn .toogle-btn { display: inline-flex; flex-direction: column; gap: 5px; }
.menu-btn .toogle-btn span { height: 2.5px !important; width: 26px; border-radius: 3px; background: #0F2A43 !important; transition: transform .3s ease, opacity .2s ease; }

/* ===== Chat: caber na tela (altura) + responsivo no mobile ===== */
.at-janela{max-height:calc(100vh - 120px)}
.at-corpo{flex:1 1 auto;overflow-y:auto;min-height:0}
.at-chips{max-height:38vh;overflow-y:auto}
@media (max-width: 600px){
  .at-janela{position:fixed;left:12px;right:12px;bottom:16px;top:64px;width:auto;max-height:none}
  .at-wrap{right:16px !important;bottom:16px !important}
  .at-teaser{max-width:calc(100vw - 90px)}
}

/* ===== Faixa de título das páginas internas — versão compacta =====
   Atinge só o cabeçalho de página (breadcrumb + h1 + descrição) das
   páginas internas. A home fica de fora: o hero dela tem a classe
   .relative, excluída pelo :not(). */
.page-content > section.bg-primarylight:not(.relative) > .container{
  padding-top: 2.25rem;
  padding-bottom: 2.25rem;
}
.page-content > section.bg-primarylight:not(.relative) nav[aria-label="Trilha de navegação"]{
  margin-bottom: .5rem;
}
.page-content > section.bg-primarylight:not(.relative) h1{
  font-size: clamp(1.875rem, 3vw, 2.75rem);
}
.page-content > section.bg-primarylight:not(.relative) h1 + p{
  margin-top: .5rem;
  font-size: 1.0625rem;
}