/* ============================================================
   Landing pages de serviço (Etapa 1: indústria e rede de incêndio)
   Carregado apenas por includes/servico-landing.php.
   Prefixo .sl- para não colidir com o app.css compartilhado (home).
   ============================================================ */

.sl-previa {
    margin: 0 0 1.25rem; padding: .6rem .9rem; border-radius: .75rem;
    background: #FEF3C7; color: #78350F; font-size: .85rem; font-weight: 600; line-height: 1.4;
}

/* Hero ------------------------------------------------------ */
.sl-hero { padding-top: 2.5rem; padding-bottom: 3rem; position: relative; z-index: 10; }
@media (min-width: 768px) { .sl-hero { padding-top: 4rem; padding-bottom: 4rem; } }
.sl-crumb { font-size: .85rem; color: rgba(219,234,254,.75); margin-bottom: 1.25rem; display: flex; flex-wrap: wrap; gap: .4rem; }
.sl-crumb a:hover, .sl-crumb-atual { color: #fff; }
.sl-hero-grid { display: grid; gap: 2rem; align-items: center; }
@media (min-width: 1024px) { .sl-hero-grid { grid-template-columns: 7fr 5fr; gap: 3rem; } }
.sl-badge { margin-bottom: 1rem; }
.sl-h1 { font-size: 1.9rem; line-height: 1.18; margin-bottom: 1.1rem; }
@media (min-width: 768px) { .sl-h1 { font-size: 2.6rem; } }
@media (min-width: 1280px) { .sl-h1 { font-size: 3rem; } }
.sl-lead { font-size: 1.075rem; line-height: 1.7; color: rgba(219,234,254,.92); margin: 0 0 1.75rem; max-width: 40rem; }
@media (min-width: 768px) { .sl-lead { font-size: 1.2rem; } }
.sl-acoes { display: flex; flex-direction: column; gap: .85rem; }
@media (min-width: 640px) { .sl-acoes { flex-direction: row; flex-wrap: wrap; align-items: center; } }
.sl-hero-foto { margin: 0; }
.sl-hero-foto img { width: 100%; height: auto; border-radius: 1.25rem; box-shadow: 0 20px 60px -15px rgba(0,0,0,.55); border: 1px solid rgba(255,255,255,.15); }
.sl-hero-foto figcaption { font-size: .78rem; color: rgba(219,234,254,.7); margin-top: .5rem; }
.sl-fatos { list-style: none; padding: 0; margin: 2.25rem 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
@media (min-width: 1024px) { .sl-fatos { grid-template-columns: repeat(4, auto); justify-content: start; gap: .75rem; } }
.sl-fatos li {
    font-size: .82rem; font-weight: 600; color: #fff; line-height: 1.35;
    background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14);
    border-radius: .75rem; padding: .55rem .8rem;
}

/* Seções --------------------------------------------------- */
.sl-sec { padding: 3.5rem 0; }
@media (min-width: 768px) { .sl-sec { padding: 5rem 0; } }
.sl-sec-curta { padding: 2rem 0 0; }
@media (min-width: 768px) { .sl-sec-curta { padding: 3rem 0 0; } }
.sl-sec-branca { background: #fff; }
.sl-sec-cinza { background: #F4F6F8; }
.sl-sec-azul { background: #0A1E3F; color: #fff; }
.sl-estreito { max-width: 52rem; margin-left: auto; margin-right: auto; }
.sl-centro { text-align: center; }
.sl-h2 { font-size: 1.6rem; line-height: 1.2; margin: 0 0 .9rem; }
@media (min-width: 768px) { .sl-h2 { font-size: 2.1rem; } }
.sl-h3 { font-size: 1.2rem; line-height: 1.3; margin: 0 0 .75rem; }
.sl-h4 { font-size: 1.05rem; line-height: 1.35; margin: 1.75rem 0 .6rem; }
.sl-intro { font-size: 1.02rem; line-height: 1.7; color: #475569; margin: 0 0 1.75rem; }
.sl-intro-claro { color: rgba(219,234,254,.88); }
.sl-sec p { font-size: 1rem; line-height: 1.7; }

/* Aviso (rede de incêndio) -------------------------------- */
.sl-aviso { border-left: 4px solid #F59E0B; background: #FFFBEB; border-radius: 1rem; padding: 1.25rem 1.25rem 1.25rem 1.4rem; }
.sl-aviso ul { margin: 0; padding-left: 1.1rem; color: #451A03; }
.sl-aviso li { margin: .45rem 0; line-height: 1.6; }

/* Sintomas ------------------------------------------------- */
.sl-sintomas { list-style: none; padding: 0; margin: 0; display: grid; gap: .75rem; }
@media (min-width: 768px) { .sl-sintomas { grid-template-columns: 1fr 1fr; } }
.sl-sintomas li {
    background: #fff; border: 1px solid #E2E8F0; border-radius: 1rem; padding: .9rem 1rem .9rem 2.6rem;
    position: relative; line-height: 1.55; color: #334155;
}
.sl-sintomas li::before {
    content: ""; position: absolute; left: 1rem; top: 1.15rem; width: .75rem; height: .75rem;
    border-radius: 999px; border: 2px solid #1E5BB8;
}
.sl-tags { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.sl-tags li { background: #DBEAFE; color: #163C7A; font-weight: 600; font-size: .85rem; border-radius: 999px; padding: .4rem .85rem; }

/* Passos --------------------------------------------------- */
.sl-passos { list-style: none; padding: 0; margin: 0; display: grid; gap: 1rem; }
.sl-passos li { display: flex; gap: 1rem; align-items: flex-start; border-bottom: 1px solid #E2E8F0; padding-bottom: 1rem; }
.sl-passos li:last-child { border-bottom: 0; }
.sl-passos .sl-h4 { margin: .2rem 0 .3rem; }
.sl-passos p { margin: 0; color: #475569; }
.sl-num {
    flex: 0 0 2.4rem; height: 2.4rem; border-radius: .8rem; background: #0A1E3F; color: #34D399;
    display: flex; align-items: center; justify-content: center; font-family: "Space Grotesk", Inter, sans-serif; font-weight: 700;
}

/* Entregáveis --------------------------------------------- */
.sl-entrega { list-style: none; padding: 0; margin: 0 0 2rem; display: grid; gap: .7rem; }
.sl-entrega li { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); border-radius: .9rem; padding: .85rem 1rem; line-height: 1.6; color: rgba(219,234,254,.92); }
.sl-entrega strong { display: block; color: #fff; font-family: "Space Grotesk", Inter, sans-serif; }
.sl-duas { display: grid; gap: 1rem; }
@media (min-width: 768px) { .sl-duas { grid-template-columns: 1fr 1fr; } }
.sl-nota { background: #fff; color: #334155; border-radius: 1rem; padding: 1.1rem 1.2rem; }
.sl-nota .sl-h4 { margin-top: 0; }
.sl-nota p { margin: 0; }
.sl-extra { margin: 1.25rem 0 0; color: #FDE68A; }
.sl-assina { margin: 1.5rem 0 0; color: rgba(219,234,254,.85); font-size: .95rem; }
.sl-assina strong { color: #fff; }

/* Caso real ----------------------------------------------- */
.sl-galeria { display: grid; gap: 1rem; margin: 1.5rem 0 1rem; }
@media (min-width: 640px) { .sl-galeria { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .sl-galeria { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 1fr; } }
.sl-galeria figure { margin: 0; }
.sl-galeria img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 1rem; background: #E2E8F0; }
.sl-galeria figcaption { font-size: .85rem; color: #64748B; line-height: 1.45; margin-top: .45rem; }
.sl-caso-texto .sl-h4:first-child { margin-top: .5rem; }
.sl-lista { margin: 0 0 1rem; padding-left: 1.2rem; color: #334155; }
.sl-lista li { margin: .3rem 0; line-height: 1.6; }
.sl-limite { font-size: .92rem !important; color: #64748B; border-left: 3px solid #CBD5E1; padding-left: .85rem; margin: 1rem 0 1.5rem; }
.sl-link { color: #1E5BB8; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.sl-link:hover { color: #0A1E3F; }

/* Orçamento / formulário ----------------------------------- */
.sl-orc { display: grid; gap: 2rem; max-width: 72rem; }
@media (min-width: 1024px) { .sl-orc { grid-template-columns: 1fr 1fr; gap: 3rem; align-items: start; } }
.sl-cobertura { font-size: .95rem !important; color: #475569; margin: .75rem 0 0; }
.sl-form { display: grid; gap: 1rem; }
.sl-form-2 { display: grid; gap: 1rem; }
@media (min-width: 640px) { .sl-form-2 { grid-template-columns: 1fr 1fr; } }
.sl-form textarea { resize: vertical; }
.sl-form .btn-primary { width: 100%; }
.sl-form-nota { font-size: .82rem !important; color: #64748B; margin: 0; text-align: center; }
.sl-form-erro { margin: 0; color: #B91C1C; font-size: .9rem !important; font-weight: 600; }

/* FAQ / relacionados -------------------------------------- */
.sl-faq { margin-bottom: .75rem; }
.sl-faq .faq-question { font-size: 1.02rem; padding: 1rem 1.15rem; gap: 1rem; }
.sl-faq .faq-answer { padding-left: 1.15rem; padding-right: 1.15rem; text-align: left; }
.sl-rel { display: grid; gap: 1rem; margin-top: 1.5rem; }
@media (min-width: 640px) { .sl-rel { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .sl-rel { grid-template-columns: repeat(4, 1fr); } }
.sl-rel-item { display: block; padding: 1.25rem; }
.sl-rel-item .sl-h4 { margin: 0 0 .4rem; color: #0A1E3F; }
.sl-rel-item p { margin: 0; font-size: .92rem; color: #64748B; text-align: left; }
.sl-rel-item:hover .sl-h4 { color: #1E5BB8; }

/* Leitura: nesta página os textos ficam alinhados à esquerda (melhor no celular) */
.sl-sec p, .sl-sec li { text-align: left; hyphens: manual; }
/* Chamada final: apoio curto e assinatura no eixo do título e dos botões */
.sl-sec-azul.sl-centro .sl-intro, .sl-sec-azul.sl-centro .sl-assina { text-align: center; max-width: 40rem; margin-left: auto; margin-right: auto; }

/* Marcadores de lista (o reset do Tailwind remove list-style) */
.sl-lista, .sl-aviso ul { list-style: disc; }
.sl-lista li::marker, .sl-aviso li::marker { color: #1E5BB8; }

/* Contraste do selo sobre o fundo azul do topo */
.sl-hero .sl-badge { color: #A7F3D0; background: rgba(16,185,129,.22); }

/* Tecnologia aplicada ---------------------------------------- */
.sl-tec-aviso { font-size: .95rem !important; color: #163C7A; background: #DBEAFE; border-radius: .75rem; padding: .7rem .9rem; margin: -.75rem 0 1.5rem; }
.sl-tec-grid { display: grid; gap: 1rem; }
@media (min-width: 768px) { .sl-tec-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1280px) { .sl-tec-grid { grid-template-columns: repeat(3, 1fr); } }
.sl-tec { background: #fff; border: 1px solid #E2E8F0; border-radius: 1rem; padding: 1.1rem 1.15rem; }
.sl-tec .sl-h4 { margin: 0 0 .6rem; color: #0A1E3F; }
.sl-tec dl { margin: 0; }
.sl-tec dt { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #1E5BB8; margin-top: .6rem; }
.sl-tec dd { margin: .15rem 0 0; font-size: .95rem; line-height: 1.55; color: #334155; }
.sl-tec-fotos { display: grid; gap: 1rem; margin: 1.75rem 0 .5rem; }
@media (min-width: 768px) { .sl-tec-fotos { grid-template-columns: 2fr 1fr; align-items: start; } }
.sl-tec-fotos figure { margin: 0; }
.sl-tec-fotos img { width: 100%; height: auto; border-radius: 1rem; background: #E2E8F0; }
.sl-tec-fotos .sl-retrato img { max-height: 30rem; object-fit: cover; }
.sl-tec-fotos figcaption { font-size: .85rem; color: #64748B; line-height: 1.45; margin-top: .45rem; }
.sl-decisao { list-style: none; padding: 0; margin: 0; display: grid; gap: .75rem; }
.sl-decisao li { display: flex; gap: .9rem; align-items: flex-start; background: #fff; border-radius: 1rem; padding: .9rem 1rem; border: 1px solid #E2E8F0; }
.sl-decisao strong { color: #0A1E3F; font-family: "Space Grotesk", Inter, sans-serif; }
.sl-decisao p { margin: .2rem 0 0; color: #475569; }

/* Subtítulo do topo */
.sl-sub { font-size: 1.15rem; font-weight: 600; line-height: 1.5; color: #fff; margin: 0 0 1rem; max-width: 40rem; }
@media (min-width: 768px) { .sl-sub { font-size: 1.3rem; } }

/* Legibilidade no celular: texto de leitura >= 16px, rótulos e notas >= 14px */
.sl-tec dd, .sl-decisao p, .sl-nota p, .sl-entrega li, .sl-lista li, .sl-passos p, .sl-sintomas li, .sl-rel-item p { font-size: 1rem !important; }
.sl-tec dt { font-size: .8rem; }
.sl-galeria figcaption, .sl-tec-fotos figcaption, .sl-hero-foto figcaption,
.sl-limite, .sl-cobertura, .sl-form-nota, .sl-tags li, .sl-fatos li, .sl-crumb { font-size: .9rem !important; }
.sl-tec-aviso { font-size: 1rem !important; }
.sl-limite, .sl-cobertura { font-size: 1rem !important; }

/* WhatsApp flutuante (global) — comportamento ajustado só nesta página via JS */
.wa-float.sl-wa { transition: opacity .18s ease, visibility 0s linear 0s, transform .3s; }
.wa-float.sl-wa-oculto { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .18s ease, visibility 0s linear .18s; }

/* Blocos específicos da página (ex.: hidrantes e trechos enterrados) */
.sl-blocos { display: grid; gap: 1rem; }
@media (min-width: 768px) { .sl-blocos { grid-template-columns: repeat(3, 1fr); } }
.sl-bloco { background: #F4F6F8; border-radius: 1rem; padding: 1.1rem 1.15rem; border-top: 3px solid #1E5BB8; }
.sl-bloco .sl-h4 { margin: 0 0 .5rem; color: #0A1E3F; }
.sl-bloco p { margin: 0; font-size: 1rem; color: #334155; }

/* Foco visível pelo teclado nos elementos desta página */
.sl-sec a:focus-visible, .sl-sec button:focus-visible, .sl-hero a:focus-visible,
.sl-sec input:focus-visible, .sl-sec select:focus-visible, .sl-sec textarea:focus-visible {
    outline: 3px solid #F59E0B; outline-offset: 2px;
}
.sl-sec-azulclaro { background: #EEF4FC; }
.sl-sec-azulclaro .sl-bloco { background: #fff; }
@media (min-width: 1024px) { .sl-rel { grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); } }

/* Exatamente 4 métodos: 2+2 no computador em vez de 3+1 */
@media (min-width: 1280px) { .sl-tec-grid:has(> .sl-tec:nth-child(4):last-child) { grid-template-columns: 1fr 1fr; } }

/* ============================================================
   Contraste WCAG 2.2 (1.4.3) — só nas páginas de serviço novas.
   O verde da marca (#10B981) com texto branco dá 2,54:1; nos CTAs
   destas páginas o fundo passa a #047857 (5,48:1). Home intocada.
   ============================================================ */
.sl-hero .btn-primary, .sl-sec .btn-primary { background-color: #047857; }
.sl-hero .btn-primary:hover, .sl-sec .btn-primary:hover { background-color: #065F46; }
.sl-crumb, .sl-crumb a, .sl-hero-foto figcaption { color: #DBEAFE; }
.sl-hero .sl-badge { color: #D1FAE5; background: #064E3B; }
.sl-galeria figcaption, .sl-tec-fotos figcaption, .sl-rel-item p, .sl-form-nota, .sl-limite { color: #475569; }

/* Foco visível com contraste nos dois tipos de fundo */
.sl-sec a:focus-visible, .sl-sec button:focus-visible, .sl-hero a:focus-visible,
.sl-sec input:focus-visible, .sl-sec select:focus-visible, .sl-sec textarea:focus-visible {
    outline: 3px solid #0A1E3F; outline-offset: 2px; box-shadow: 0 0 0 6px #FFFFFF;
}
.sl-hero a:focus-visible, .sl-sec-azul a:focus-visible, .sl-sec-azul button:focus-visible {
    outline-color: #FDE68A; box-shadow: 0 0 0 6px #0A1E3F;
}

/* Botão flutuante global do WhatsApp: oculto em celular e tablet (até 1024 px) nas
   páginas novas — os CTAs do conteúdo e o formulário garantem o contato.
   No computador continua visível só quando não cobre conteúdo (script da página). */
@media (max-width: 1024px) { .wa-float { display: none !important; } }

/* ============================================================
   Controles COMPARTILHADOS de WhatsApp (cabeçalho, menu do celular,
   rodapé e botão flutuante) — só nestas páginas, sem mexer no CSS
   global nem na home: mesmo verde escuro dos CTAs (#047857, 5,48:1)
   e foco visível com anel duplo (funciona em fundo claro e escuro).
   ============================================================ */
a[data-wa-id="header-desktop"], a[data-wa-id="header-mobile"], a[data-wa-id="footer-cta"], a.wa-float {
    background-color: #047857;
    color: #FFFFFF;
}
a[data-wa-id="header-desktop"]:hover, a[data-wa-id="header-mobile"]:hover, a[data-wa-id="footer-cta"]:hover, a.wa-float:hover {
    background-color: #065F46;
}
a.wa-float::before { background: rgba(4, 120, 87, .35); }
a[data-wa-id="header-desktop"]:focus-visible, a[data-wa-id="header-mobile"]:focus-visible, a.wa-float:focus-visible {
    outline: 3px solid #0A1E3F; outline-offset: 2px; box-shadow: 0 0 0 6px #FFFFFF;
}
a[data-wa-id="footer-cta"]:focus-visible {
    outline: 3px solid #FDE68A; outline-offset: 2px; box-shadow: 0 0 0 6px #0A1E3F;
}

/* Rodapé nas páginas novas: textos alinhados à esquerda (sem justificação) */
footer p, footer li { text-align: left !important; hyphens: manual; }

/* ============================================================
   Página Tecnologias (hub técnico) — prefixo .tg-
   ============================================================ */
.tg-indice { list-style: none; padding: 0; margin: 0; display: grid; gap: .75rem; }
@media (min-width: 768px) { .tg-indice { grid-template-columns: 1fr 1fr; } }
.tg-indice a { display: flex; gap: .9rem; align-items: flex-start; height: 100%; background: #fff; border: 1px solid #E2E8F0; border-radius: 1rem; padding: .95rem 1rem; color: #0A1E3F; }
.tg-indice a:hover { border-color: #1E5BB8; }
.tg-indice-q { display: block; color: #334155; line-height: 1.5; margin-bottom: .25rem; }
.tg-indice strong { color: #1E5BB8; font-family: "Space Grotesk", Inter, sans-serif; text-decoration: underline; text-underline-offset: 3px; }
.tg-metodo { scroll-margin-top: 96px; }
.tg-grid { display: grid; gap: 2rem; max-width: 72rem; margin: 0 auto; }
@media (min-width: 1024px) { .tg-grid { grid-template-columns: 7fr 5fr; gap: 3rem; align-items: start; } .tg-fig { position: sticky; top: 110px; } }
.tg-rotulo { display: inline-block; font-size: .9rem; font-weight: 700; color: #1E5BB8; margin-bottom: .5rem; }
.tg-pergunta { font-size: 1.1rem !important; font-weight: 600; color: #0A1E3F; border-left: 4px solid #F59E0B; padding-left: .9rem; margin: 0 0 1.25rem; }
.tg-dl { margin: 0; }
.tg-dl dt { font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #1E5BB8; margin-top: 1rem; }
.tg-dl dd { margin: .2rem 0 0; font-size: 1rem; line-height: 1.65; color: #334155; }
.tg-links { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.tg-links a { display: inline-block; background: #DBEAFE; color: #163C7A; font-weight: 600; font-size: .95rem; border-radius: 999px; padding: .45rem .9rem; text-decoration: underline; text-underline-offset: 3px; }
.tg-links a:hover { background: #BFDBFE; }
.tg-fig { margin: 0; }
.tg-col-foto { min-width: 0; }
.tg-col-foto .tg-fig { position: static; }
.tg-foto-real { margin-top: 1.5rem; }
.tg-fig img { width: 100%; height: auto; border-radius: 1rem; background: #E2E8F0; border: 1px solid #E2E8F0; }
.tg-fig figcaption { font-size: .9rem; color: #475569; line-height: 1.45; margin-top: .45rem; }
.sl-sec-azul .sl-decisao li { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.14); }
.sl-sec-azul .sl-decisao strong { color: #fff; }
.sl-sec-azul .sl-decisao p { color: rgba(219,234,254,.92); }
.sl-tec-link { margin: -.5rem 0 1.5rem; }
.tg-ancora { scroll-margin-top: 48px; }

/* Página Sobre — prefixo .sb- */
.sb-prof { display: grid; gap: 1.5rem; max-width: 60rem; margin: 0 auto 1rem; align-items: center; }
@media (min-width: 768px) { .sb-prof { grid-template-columns: 18rem 1fr; gap: 2.5rem; } }
.sb-prof-cartao { background: #0A1E3F; color: #fff; border-radius: 1.25rem; padding: 1.6rem 1.5rem; border-top: 4px solid #10B981; }
.sb-prof-rotulo { display: block; font-size: .9rem; font-weight: 600; color: #A7F3D0; margin-bottom: .6rem; }
.sb-prof-nome { display: block; font-family: "Space Grotesk", Inter, sans-serif; font-size: 1.6rem; line-height: 1.2; }
.sb-prof-cargo { display: block; font-size: 1rem; color: #DBEAFE; margin-top: .35rem; }
.sb-prof .sl-intro { margin: 0; }
.sb-sub { margin-top: 2.5rem; }
.sb-blocos { max-width: 60rem; margin: 0 auto; }

/* Página Casos — prefixo .cs- */
.cs-fotos { display: grid; gap: 1rem; }
@media (min-width: 640px) and (max-width: 1023px) { .cs-fotos { grid-template-columns: 1fr 1fr; } }
.cs-fotos figure { margin: 0; }
.cs-fotos img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 1rem; background: #E2E8F0; }
.cs-fotos figcaption { font-size: .9rem; color: #475569; line-height: 1.45; margin-top: .45rem; }
.tg-dl .sl-lista { margin: .2rem 0 0; }
.cs-registros { margin-top: 1.5rem; }
.cs-acervo { padding-bottom: 3rem; }
.cs-nota { border: 1px solid #E2E8F0; }
.cs-nota .sl-h3 { margin-top: 0; }
.cs-tel { color: rgba(219,234,254,.88) !important; margin-top: 1rem; text-align: center !important; }

/* Página Conta de água alta — prefixo .ca- */
.ca-caminhos-titulo { font-size: 1.1rem; color: #fff; margin: 0 0 .75rem; }
.ca-caminhos { display: grid; gap: .75rem; }
@media (min-width: 640px) { .ca-caminhos { grid-template-columns: 1fr 1fr; } }
.ca-caminho { display: block; background: #fff; color: #0A1E3F; border-radius: 1rem; padding: 1rem 1.1rem; border: 2px solid transparent; box-shadow: 0 10px 30px -12px rgba(0,0,0,.45); }
.ca-caminho:hover, .ca-caminho[aria-current] { border-color: #10B981; }
.ca-caminho strong { display: block; font-family: "Space Grotesk", Inter, sans-serif; font-size: 1.05rem; line-height: 1.3; color: #065F46; text-decoration: underline; text-underline-offset: 3px; margin-bottom: .3rem; }
.ca-caminho span { display: block; font-size: 1rem; line-height: 1.5; color: #334155; }
.ca-direto { margin: 1rem 0 0; color: #DBEAFE; font-size: 1rem; }
.ca-direto a { color: #fff; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.ca-leitura { margin-bottom: 1.5rem; }
@media (min-width: 768px) { .ca-leitura { grid-template-columns: 1fr 1fr; } }
.ca-nota { margin: 0 0 1rem !important; }
.ca-acao { margin-top: 1.75rem; }
.sl-sec-cinza .ca-bloco-branco { background: #fff; }
.ca-check { list-style: none; padding: 0; margin: 0; display: grid; gap: .6rem; }
.ca-check li { position: relative; padding: .8rem 1rem .8rem 2.7rem; background: #F4F6F8; border-radius: .9rem; font-size: 1rem; line-height: 1.55; color: #334155; }
.ca-check li::before { content: ""; position: absolute; left: 1rem; top: 1.05rem; width: 1rem; height: 1rem; border: 2px solid #047857; border-radius: .25rem; }
.tg-ancora.ca-form-sec { scroll-margin-top: 72px; }

/* Conta de água alta — avaliação inicial em etapas (.ca-wiz) */
.ca-wiz { gap: 1.1rem; }
.ca-wiz-progresso { margin: 0; font-size: .95rem !important; font-weight: 700; color: #1E5BB8; }
.ca-etapa { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; gap: 1rem; }
.ca-etapa[hidden], .ca-wiz [hidden] { display: none !important; }
.ca-etapa-titulo { font-family: "Space Grotesk", Inter, sans-serif; font-size: 1.2rem; font-weight: 700; color: #0A1E3F; padding: 0; margin-bottom: .25rem; }
.ca-etapa-titulo:focus { outline: none; }
.ca-etapa-titulo:focus-visible { outline: 3px solid #0A1E3F; outline-offset: 3px; }
.ca-bloco { display: grid; gap: .75rem; }
.ca-opcoes { display: grid; gap: .6rem; }
.ca-opcao { display: flex; gap: .7rem; align-items: flex-start; border: 1px solid #CBD5E1; border-radius: .9rem; padding: .8rem .9rem; background: #fff; cursor: pointer; line-height: 1.45; color: #334155; font-size: 1rem; }
.ca-opcao:hover { border-color: #1E5BB8; }
.ca-opcao:has(input:checked) { border-color: #047857; background: #ECFDF5; }
.ca-opcao:has(input:focus-visible) { outline: 3px solid #0A1E3F; outline-offset: 2px; }
.ca-opcao input { margin-top: .2rem; width: 1.15rem; height: 1.15rem; accent-color: #047857; flex: 0 0 auto; }
.ca-opcao strong { display: block; color: #0A1E3F; }
.ca-opcao small { display: block; font-size: .95rem; color: #475569; margin-top: .15rem; }
.ca-wiz-nav { display: flex; flex-wrap: wrap; gap: .75rem; }
.ca-wiz-nav > * { flex: 1 1 10rem; }
.ca-wiz .ca-wiz-nav .btn-primary, .ca-wiz .ca-wiz-nav .btn-outline-azul { width: auto; justify-content: center; }
.ca-resultado { border-radius: 1rem; padding: 1rem 1.1rem; border-left: 4px solid #1E5BB8; background: #EEF4FC; }
.ca-resultado strong { display: block; color: #0A1E3F; font-family: "Space Grotesk", Inter, sans-serif; font-size: 1.05rem; }
.ca-resultado p { margin: .35rem 0 0; color: #334155; }
.ca-res-indicios { border-left-color: #B45309; background: #FFFBEB; }
.ca-res-documental { border-left-color: #047857; background: #ECFDF5; }
.ca-resumo { margin: 0; display: grid; grid-template-columns: minmax(7rem, 38%) 1fr; gap: .35rem .9rem; font-size: 1rem; }
.ca-resumo dt { font-weight: 700; color: #0A1E3F; }
.ca-resumo dd { margin: 0; color: #334155; overflow-wrap: anywhere; }
@media (max-width: 480px) { .ca-resumo { grid-template-columns: 1fr; } .ca-resumo dd { margin-bottom: .4rem; } }
.ca-resp { margin: 0; font-size: .95rem !important; color: #475569; }
/* Conta de água alta — etapa 1: localização opcional e textos de apoio */
.ca-ajuda { margin: -.2rem 0 .45rem; font-size: .95rem !important; line-height: 1.45; color: #475569; }
.ca-geo { display: grid; gap: .6rem; margin-top: -.35rem; padding: .85rem .95rem; border: 1px dashed #CBD5E1; border-radius: .9rem; background: #F8FAFC; }
.ca-geo-texto { margin: 0; font-size: .95rem !important; line-height: 1.45; color: #475569; }
.ca-geo-botoes { display: flex; flex-wrap: wrap; gap: .6rem; }
.ca-wiz .ca-geo-btn { width: auto; flex: 1 1 12rem; justify-content: center; }
.ca-geo-btn:disabled { opacity: .6; cursor: progress; }
.ca-geo-status { margin: 0; font-size: .95rem !important; line-height: 1.45; color: #334155; }
.ca-geo-ok { color: #065F46; font-weight: 600; }
.ca-geo-erro { color: #B91C1C; font-weight: 600; }
.ca-wiz .form-field[aria-invalid="true"] { border-color: #B91C1C; }

/* Páginas de conteúdo e guias (.ct-) — includes/conteudo-landing.php */
.ct-hero { max-width: 52rem; }
.ct-h1 { max-width: 46rem; }
.ct-meta { margin: 1.5rem 0 0; font-size: .9rem; color: rgba(219,234,254,.8); }
.ct-resumo { border-left: 4px solid #047857; background: #ECFDF5; border-radius: 1rem; padding: 1rem 1.25rem; }
.ct-resumo .sl-h4 { margin-top: 0; }
.ct-resumo .sl-lista { margin: 0; }
.ct-cards { display: grid; gap: 1rem; }
@media (min-width: 768px) { .ct-cards { grid-template-columns: 1fr 1fr; } }
.ct-colunas { display: grid; gap: 1rem; }
@media (min-width: 768px) { .ct-colunas { grid-template-columns: 1fr 1fr; } }
.ct-coluna { background: #fff; border: 1px solid #E2E8F0; border-radius: 1rem; padding: 1rem 1.2rem; }
.sl-sec-branca .ct-coluna { background: #F8FAFC; }
.ct-coluna .sl-h4 { margin-top: 0; }
.ct-temas { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 2rem; }
.ct-temas a { background: #DBEAFE; color: #163C7A; font-weight: 600; font-size: .92rem; border-radius: 999px; padding: .45rem .95rem; }
.ct-temas a:hover { background: #BFDBFE; }
.ct-faq-grupo { margin-bottom: 2.25rem; scroll-margin-top: 104px; }
.ct-faq-grupo .sl-h3 { margin-bottom: .5rem; }
.ct-links { margin-top: 1.5rem; }
.ct-cta-acoes { justify-content: center; }
/* Orientação inicial por situação */
.oc { background: #fff; border: 1px solid #CBD5E1; border-radius: 1rem; padding: 1.25rem; }
.oc-progresso { margin: 0 0 .5rem; color: #475569; font-size: .9rem !important; font-weight: 600; }
.oc-grupo { border: 0; margin: 0 0 1rem; padding: 0; min-width: 0; }
.oc-grupo legend { padding: 0; }
.oc-grupo .sl-h4 { margin-bottom: .25rem; }
.oc-opcoes { display: grid; gap: 0 1rem; margin-top: .5rem; }
@media (min-width: 640px) { .oc-opcoes { grid-template-columns: 1fr 1fr; } }
.oc-erro { margin: .5rem 0 0; color: #B91C1C; font-weight: 600; font-size: .95rem !important; }
.oc-campos { display: grid; gap: 1rem; margin-top: .5rem; min-width: 0; }
@media (min-width: 640px) { .oc-campos { grid-template-columns: 1fr 1fr; } }
.oc-botoes { margin-top: 1.25rem; }
.oc-botoes button { white-space: normal; }
.oc [tabindex="-1"]:focus { outline: none; }
.oc-bloco { margin-top: 1.1rem; min-width: 0; }
.oc-resumo { display: grid; grid-template-columns: minmax(0, 1fr); gap: .1rem; margin: .4rem 0 0; }
.oc-resumo dt { font-weight: 600; color: #0A1E3F; margin-top: .4rem; }
.oc-resumo dd { margin: 0; color: #334155; overflow-wrap: anywhere; }
@media (min-width: 640px) { .oc-resumo { grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); gap: .35rem 1rem; } .oc-resumo dt, .oc-resumo dd { margin-top: 0; } }
.oc-passo { font-weight: 600; color: #0A1E3F; }
.oc-acoes-lista { list-style: decimal; padding-left: 1.25rem; }
.oc-ressalva { background: #FEF3C7; color: #78350F; font-weight: 600; border-radius: .5rem; padding: .5rem .75rem; }
.oc-copiado { margin: .75rem 0 0; color: #065F46; font-weight: 600; }
.ct-check-nota { margin: 0 0 .5rem; color: #475569; font-size: .95rem !important; }
.ct-check-item { display: flex; gap: .7rem; align-items: flex-start; padding: .45rem 0; line-height: 1.5; color: #334155; cursor: pointer; }
.ct-check-item input { margin-top: .25rem; width: 1.1rem; height: 1.1rem; accent-color: #047857; flex: 0 0 auto; }
#oc-impressao { display: none; }
@media print {
    @page { margin: 15mm; }
    html.oc-imprimindo body > *:not(#oc-impressao) { display: none !important; }
    html.oc-imprimindo #oc-impressao { display: block; color: #000; font-family: Arial, sans-serif; font-size: 11pt; line-height: 1.4; }
    #oc-impressao h1 { font-size: 16pt; color: #000; margin: 0 0 .5rem; }
    #oc-impressao h4 { font-size: 12pt; margin: .6rem 0 .2rem; color: #000; }
    #oc-impressao p, #oc-impressao li, #oc-impressao dd, #oc-impressao dt { font-size: 11pt; color: #000; }
    #oc-impressao .oc-bloco { break-inside: avoid; margin-top: .6rem; }
    #oc-impressao .oc-resumo { display: grid; grid-template-columns: 6cm 1fr; gap: .1rem .5rem; margin: 0; }
    #oc-impressao .oc-ressalva { background: none; color: #000; padding: 0; }
    #oc-impressao a { color: #000; text-decoration: none; }
}
/* Comparador de consumo */
.ct-comp { display: grid; gap: 1.1rem; }
.ct-comp-periodo { border: 0; margin: 0; padding: 0; min-width: 0; }
.ct-comp-periodo .sl-h4 { margin: 0 0 .5rem; padding: 0; }
.ct-comp-campos { display: grid; gap: .9rem; }
@media (min-width: 640px) { .ct-comp-campos { grid-template-columns: 1fr 1fr; } }
.ct-comp-erro { margin: .35rem 0 0; color: #B91C1C; font-size: .9rem !important; font-weight: 600; }
.ct-comp .form-field[aria-invalid="true"] { border-color: #B91C1C; }
.ct-comp-valores { border: 1px dashed #CBD5E1; border-radius: .9rem; padding: .75rem .95rem; background: #F8FAFC; }
.ct-comp-valores summary { cursor: pointer; font-weight: 600; color: #163C7A; }
.ct-comp-valores[open] summary { margin-bottom: .6rem; }
.ct-comp-ajuda { margin: 0 0 .8rem; font-size: .92rem !important; color: #475569; }
.ct-comp-botoes { display: flex; flex-wrap: wrap; gap: .75rem; }
.ct-comp-botoes > * { flex: 1 1 10rem; justify-content: center; }
.ct-comp-resultado { margin-top: 1.5rem; background: #fff; border-left: 4px solid #1E5BB8; border-radius: 1rem; padding: 1.1rem 1.25rem; }
.ct-comp-resultado:focus { outline: none; }
.ct-comp-resultado .sl-h4 { margin-top: 0; }
.ct-comp-dl { margin: 0 0 1rem; display: grid; grid-template-columns: minmax(9rem, 45%) 1fr; gap: .35rem .9rem; }
.ct-comp-dl dt { font-weight: 700; color: #0A1E3F; }
.ct-comp-dl dd { margin: 0; color: #334155; }
@media (max-width: 480px) { .ct-comp-dl { grid-template-columns: 1fr; } .ct-comp-dl dd { margin-bottom: .4rem; } }
.ct-comp-rs { color: #334155; }
.ct-comp-aviso { background: #FFFBEB; border-radius: .75rem; padding: .7rem .9rem; color: #78350F; }
.ct-comp-links { margin: .75rem 0 0; }
/* /blog — guias por tema (.bt-) */
.bt-temas { display: grid; gap: 1.25rem; }
@media (min-width: 768px) { .bt-temas { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1280px) { .bt-temas { grid-template-columns: 1fr 1fr 1fr; } }
.bt-tema { background: #fff; border: 1px solid #E2E8F0; border-radius: 1rem; padding: 1.1rem 1.25rem; scroll-margin-top: 96px; }
.bt-tema ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .55rem; }
.bt-tema li { line-height: 1.45; font-size: .98rem; }
.bt-tema a { color: #163C7A; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: #93C5FD; }
.bt-tema a:hover { color: #0A1E3F; text-decoration-color: currentColor; }
.bt-selo { display: inline-block; margin-left: .25rem; font-size: .72rem; font-weight: 700; color: #065F46; background: #D1FAE5; border-radius: 999px; padding: .1rem .45rem; vertical-align: middle; }
/* Conta de água alta — progresso salvo no aparelho (opcional) */
.ca-retomar { border: 1px solid #93C5FD; background: #EFF6FF; border-radius: .9rem; padding: .9rem 1rem; display: grid; gap: .7rem; }
.ca-retomar p { margin: 0; color: #163C7A; font-weight: 600; font-size: .98rem !important; }
.ca-retomar-botoes { display: flex; flex-wrap: wrap; gap: .6rem; }
.ca-wiz .ca-retomar-botoes > * { flex: 1 1 12rem; width: auto; justify-content: center; }
.ca-reparo-aviso { margin: .45rem 0 0; color: #92400E; font-weight: 600; }
.ca-opcao input:disabled + span { opacity: .5; }
.ca-salvo-aviso { margin: 0; font-size: .95rem !important; color: #065F46; font-weight: 600; }
.ca-salvar { border-top: 1px solid #E2E8F0; padding-top: .9rem; }
.ca-salvar-op { display: flex; gap: .6rem; align-items: flex-start; font-weight: 600; color: #0A1E3F; cursor: pointer; line-height: 1.45; }
.ca-salvar-op input { margin-top: .2rem; width: 1.15rem; height: 1.15rem; accent-color: #047857; flex: 0 0 auto; }
.ca-salvar .ca-ajuda { margin: .35rem 0 0 1.75rem; }
/* Âncoras das páginas de conteúdo: título abaixo do cabeçalho fixo (88px) com respiro */
.ct-ancora { scroll-margin-top: 40px; }
.ct-comp-resultado { scroll-margin-top: 104px; }
/* Páginas de conteúdo: sem renderização adiada, para âncoras e resultado pararem no lugar certo */
main > section.ct-sec { content-visibility: visible; contain-intrinsic-size: none; }