/* Central de Eletricistas — CSS do site (31/10/2026): cópia do design system do Mestre dos Aquecedores (~/mestre-dos-aquecedores/assets/css/site.css),
   com as cores do logo da Central (azul #013469 e amarelo #feb202). Ajustes próprios da Central no fim do arquivo. */
/* Fontes hospedadas no próprio site (SIL Open Font License). font-display: optional evita que o texto "pule" quando a fonte chega. */
/* Fonte do site: Montserrat (31/10/2026, pedido do usuário; antes era a Outfit do Mestre). Arquivo variável só com latim
   (pesos 100 a 900 num arquivo, 38 KB), auto-hospedado, licença SIL OFL (assets/fonts/montserrat-OFL.txt).
   font-display: optional + substituta com as medidas da Montserrat sobre a Arial: o texto não pula quando a fonte chega (CLS). */
@font-face { font-family: Montserrat; src: url(/assets/fonts/montserrat-latin.woff2) format("woff2"); font-weight: 100 900; font-style: normal; font-display: optional; }
@font-face { font-family: "Montserrat Fallback"; src: local("Arial"), local("Arimo"), local("Liberation Sans"), local("Helvetica"); size-adjust: 113.95%; ascent-override: 84.95%; descent-override: 22.03%; line-gap-override: 0%; }
:root {
  /* Paleta da marca (cores tiradas do logo em 2026-10-15) */
  --navy-900: #013469;   /* azul-marinho do nome "Aquecedores": faixas, formulário, rodapé */
  --navy-800: #073b75;   /* azul do "M" */
  --blue-600: #1b4a94;   /* links e destaques */
  --orange-500: #feb202; /* laranja da chama (decorativo; não usar com texto branco) */
  --orange-600: #013469; /* botões e chamadas principais (contraste AA com texto branco) */
  --orange-700: #0b4a8c; /* hover e textos pequenos de ação */
  --orange-50: #fff6db;
  --orange-200: #fde39a;
  --flame-amber: #feb202;
  --flame-red: #f5a800;
  --flame-wine: #013469;
  --blue-100: #e8edf6;
  --blue-200: #c9d4ea;
  --blue-250: #d3dcee;
  --bg-soft: #f5f7fb;
  --bg-card: #f8f9fc;
  --border: #e3e8f1;
  --ink: #013469;
  --ink-2: #1f2f4f;
  --ink-3: #44536e;
  --muted: #5c6a82;
  /* Tons claros usados sobre fundos escuros */
  --on-dark: #c9d3e8;
  --on-dark-soft: #b6c2dc;
  --on-dark-muted: #8c9abb;
  --on-dark-line: #1e3466;
  --font-display: Montserrat, "Montserrat Fallback", sans-serif;
  --font-body: Montserrat, "Montserrat Fallback", sans-serif;
  --font-mono: Montserrat, "Montserrat Fallback", sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; }
body { margin: 0; font-family: var(--font-body); color: var(--ink); background: #fff; -webkit-font-smoothing: antialiased; }
h1, h2, h3 { font-family: var(--font-display); margin: 0; letter-spacing: -0.02em; text-wrap: balance; }
p { text-wrap: pretty; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: var(--blue-600); text-decoration: none; }
a:hover { color: var(--navy-800); text-decoration: underline; }
ul, ol { margin: 0; padding: 0; list-style: none; }
input, select, textarea, button { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--blue-600); outline-offset: 2px; }

.container { max-width: 1240px; margin: 0 auto; padding-left: 24px; padding-right: 24px; }

.skip-link { position: absolute; left: -9999px; top: 0; background: var(--navy-800); color: #fff; padding: 12px 16px; z-index: 50; }
.skip-link:focus { left: 12px; top: 12px; }

/* Buttons */
.btn { display: inline-block; font-weight: 700; border-radius: 10px; text-align: center; cursor: pointer; border: 0; transition: background .15s, border-color .15s; }
.btn:hover { text-decoration: none; }
.btn-sm { font-size: 15px; padding: 12px 20px; border-radius: 8px; }
.btn-primary { background: var(--orange-600); color: #fff; }
.btn-primary:hover { background: var(--orange-700); color: #fff; }
.btn-outline { border: 1.5px solid var(--blue-200); background: #fff; color: var(--navy-800); padding: 15px 24px; }
.btn-outline:hover { border-color: var(--blue-600); color: var(--navy-800); }

/* Check icons */
.check-soft, .check-solid { width: 20px; height: 20px; flex: none; }
.check-soft circle { fill: var(--blue-100); }
.check-soft polyline { fill: none; stroke: var(--blue-600); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.check-solid circle { fill: var(--blue-600); }
.check-solid polyline { fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

/* Header */
.site-header { position: sticky; top: 0; z-index: 40; background: #fff; border-bottom: 1px solid var(--border); }
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-top: 14px; padding-bottom: 14px; }
.brand { display: flex; align-items: center; gap: 12px; color: inherit; }
.brand:hover { text-decoration: none; color: inherit; }
.main-nav { display: flex; align-items: center; gap: 28px; }
.nav-links { display: flex; align-items: center; gap: 26px; font-size: 15px; font-weight: 600; }
.nav-links a { color: var(--ink-2); }
.nav-links a:hover { color: var(--blue-600); text-decoration: none; }

/* Hero */
.hero { background: linear-gradient(180deg, var(--bg-soft) 0%, #fff 100%); border-bottom: 1px solid var(--border); }
.hero h1 { font-size: 58px; line-height: 1.02; font-weight: 800; color: var(--navy-900); }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 34px; }

/* Strip */
.strip { background: var(--navy-900); color: #fff; }

/* Sections */
.section { padding: 80px 0; background: #fff; }
.section h2 { font-size: 40px; font-weight: 800; color: var(--navy-900); }

.card { height: 100%; display: flex; flex-direction: column; background: var(--bg-card); border: 1px solid var(--border); border-radius: 14px; padding: 28px; margin: 0; }

/* Why */

/* Offer */
.offer-section { padding: 44px 0; background: #fff; }

/* Steps */

/* Testimonials */

/* Form */
.was-validated :invalid { border-color: #c62828; }
.consent { display: flex; gap: 10px; align-items: flex-start; margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--ink-3); }
.consent input { margin-top: 3px; width: 18px; height: 18px; accent-color: var(--blue-600); flex: none; }
.form-error { margin: 0; padding: 10px 12px; background: #fdecec; border: 1px solid #f3c1c1; border-radius: 8px; color: #a21b1b; font-size: 14.5px; }
.form-success { text-align: center; padding: 24px 8px; }
.form-success h3 { font-size: 24px; color: var(--navy-900); }
.form-success p { margin: 10px 0 0; font-size: 16.5px; line-height: 1.6; color: var(--ink-3); }
.form-success .btn { margin-top: 8px; display: inline-flex; align-items: center; gap: 8px; padding: 14px 22px; }

/* Regions */

/* FAQ */
.faq { display: grid; gap: 14px; margin: 0; }
.faq > div { padding: 24px 26px; background: #fff; border: 1px solid var(--border); border-radius: 12px; }

/* Footer */
.site-footer { background: var(--navy-900); color: var(--on-dark); padding: 56px 0 28px; }
.site-footer h3 { font-size: 14px; letter-spacing: .08em; text-transform: uppercase; color: #fff; margin-bottom: 14px; }
.site-footer ul { display: grid; gap: 9px; font-size: 15.5px; }
.site-footer a { color: var(--on-dark); }
.site-footer a:hover { color: #fff; }
.site-footer address { font-style: normal; display: grid; gap: 9px; font-size: 15.5px; overflow-wrap: anywhere; }

.mobile-bar { display: none; }

/* Responsive */

@media (max-width: 1080px) {
  .hero h1 { font-size: 48px; }
}

@media (max-width: 900px) {
  .section { padding: 60px 0; }
  .section h2 { font-size: 34px; }
}

@media (max-width: 600px) {
  .container { padding-left: 16px; padding-right: 16px; }
  .header-inner { gap: 12px; }
  .btn-sm { padding: 10px 14px; font-size: 14px; }
  .hero h1 { font-size: 38px; }
  .hero-actions .btn { width: 100%; }
  .section h2 { font-size: 29px; }
  .site-footer { padding-bottom: 96px; }
}

/* Hero: foto de fundo com degradê */
/* Hero com imagem de fundo e degradê (somente o fundo muda) */

/* Botões + card: o card acompanha a largura dos botões, com o mesmo espaçamento entre eles */
@media (max-width: 760px) {
  /* Celular: a foto fica atrás dos textos, bem coberta pelo degradê, para o texto aparecer logo de cara */
}

/* Logo oficial */
.brand-logo { display: block; height: 52px; width: auto; }
@media (max-width: 600px) {
  .brand-logo { height: 40px; }
}

/* Destaques na cor laranja da marca */
.check-soft circle { fill: var(--orange-50); }
.check-soft polyline { stroke: var(--orange-600); }
.check-solid circle { fill: var(--orange-600); }

/* Botões de WhatsApp (ícone no início) */
.btn-wa { display: inline-flex; align-items: center; justify-content: center; gap: 10px; }
.wa-icon { width: 20px; height: 20px; flex: none; }
.btn-sm .wa-icon { width: 18px; height: 18px; }

/* Trilha de navegação (páginas de serviço) */
.breadcrumb { margin: 0 0 16px; font-size: 14px; color: var(--muted); }
.breadcrumb ol { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.breadcrumb li + li::before { content: "›"; margin-right: 6px; color: var(--muted); }
.breadcrumb a { color: var(--ink-3); }
.breadcrumb a:hover { color: var(--orange-700); }
.breadcrumb [aria-current="page"] { color: var(--navy-900); font-weight: 600; }

/* Link do título do card de serviço */

/* Menu principal + menu hambúrguer */
.main-nav { gap: 24px; }
.nav-links { gap: 22px; }
.nav-links a { position: relative; display: block; padding: 6px 0; white-space: nowrap; }
.nav-links a[aria-current="page"] { color: var(--navy-900); }
.nav-links a[aria-current="page"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 3px; border-radius: 3px; background: var(--orange-600); }
.nav-links a:hover { color: var(--orange-700); }
.menu-toggle { display: none; flex-direction: column; align-items: center; justify-content: center; gap: 5px; width: 44px; height: 44px; flex: none; padding: 0; border: 1.5px solid var(--border); border-radius: 10px; background: #fff; cursor: pointer; }
.menu-toggle span { display: block; width: 20px; height: 2px; border-radius: 2px; background: var(--navy-900); transition: transform .2s, opacity .2s; }
.menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menu-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 1100px) {
  .main-nav { gap: 12px; }
  .menu-toggle { display: flex; }
  .nav-links { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0; padding: 6px 24px 18px; background: #fff; border-bottom: 1px solid var(--border); box-shadow: 0 16px 30px rgba(1, 52, 105, .12); }
  .nav-links.is-open { display: flex; }
  .nav-links a { padding: 14px 0; font-size: 16px; border-bottom: 1px solid var(--border); }
  .nav-links li:last-child a { border-bottom: 0; }
  .nav-links a[aria-current="page"]::after { display: none; }
  .nav-links a[aria-current="page"] { color: var(--orange-700); }
}
@media (max-width: 600px) {
  .nav-links { padding: 4px 16px 14px; }
  .site-header .btn-wa { padding: 10px 12px; }
}

/* Submenu de Serviços */
.has-sub { position: relative; display: flex; align-items: center; gap: 2px; }
.sub-toggle { display: grid; place-items: center; width: 24px; height: 24px; padding: 0; border: 0; background: none; color: var(--ink-2); cursor: pointer; border-radius: 6px; }
.sub-toggle svg { width: 16px; height: 16px; transition: transform .2s; }
.sub-toggle:hover { color: var(--orange-700); }
.has-sub.is-open .sub-toggle svg { transform: rotate(180deg); }
.submenu { display: none; position: absolute; top: 100%; left: -14px; z-index: 50; min-width: 230px; margin: 10px 0 0; padding: 8px; list-style: none; background: #fff; border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 16px 30px rgba(1, 52, 105, .14); }
.submenu::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; }
.has-sub:hover .submenu, .has-sub:focus-within .submenu, .has-sub.is-open .submenu { display: block; }
.submenu a { padding: 10px 12px; border-radius: 8px; font-size: 15px; }
.submenu a:hover { background: var(--bg-soft); }
.submenu a[aria-current="page"] { color: var(--orange-700); background: var(--orange-50); }
.nav-links .submenu a[aria-current="page"]::after { display: none; }
.has-sub.is-current > a { color: var(--navy-900); }
.has-sub.is-current > a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 3px; border-radius: 3px; background: var(--orange-600); }

@media (max-width: 1100px) {
  .has-sub { flex-wrap: wrap; border-bottom: 1px solid var(--border); }
  .has-sub > a { flex: 1; border-bottom: 0; }
  .has-sub.is-current > a::after { display: none; }
  .sub-toggle { width: 44px; height: 44px; }
  .sub-toggle svg { width: 20px; height: 20px; }
  .has-sub:hover .submenu, .has-sub:focus-within .submenu { display: none; }
  .submenu, .has-sub.is-open .submenu { position: static; width: 100%; min-width: 0; margin: 0 0 8px; padding: 0 0 0 16px; border: 0; border-left: 2px solid var(--orange-200); border-radius: 0; box-shadow: none; }
  .has-sub.is-open .submenu { display: block; }
  .submenu a { padding: 12px 0 12px 4px; border-radius: 0; border-bottom: 1px solid var(--border); }
  .submenu li:last-child a { border-bottom: 0; }
  .submenu a:hover { background: none; }
  .submenu a[aria-current="page"] { background: none; }
}

/* Barra fixa do celular: WhatsApp + Ligar */
@media (max-width: 600px) {
  .mobile-bar { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); background: #fff; box-shadow: 0 -6px 20px rgba(1, 52, 105, .12); }
  .mb-btn { display: flex; align-items: center; justify-content: center; gap: 8px; height: 52px; border-radius: 10px; color: #fff; font-size: 15px; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; }
  .mb-btn svg { width: 20px; height: 20px; flex: none; }
  .mb-btn:hover { color: #fff; text-decoration: none; }
  .mb-wa { background: var(--orange-600); }
  .mb-wa:hover { background: var(--orange-700); }
  .mb-call { background: var(--navy-900); }
  .mb-call:hover { background: var(--navy-800); }
  .site-footer { padding-bottom: 100px; }
}

/* Frase abaixo dos botões da hero */

/* Aviso de cookies (LGPD) */
.cookie-banner { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 60; max-width: 980px; margin: 0 auto; background: #fff; border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 14px 40px rgba(1, 52, 105, .18); }
.cookie-banner[hidden] { display: none; }
.cookie-inner { display: flex; align-items: center; gap: 20px 28px; padding: 18px 22px; }
.cookie-text { margin: 0; flex: 1; font-size: 15.5px; line-height: 1.5; color: var(--ink-2); }
.cookie-text strong { color: var(--navy-900); }
.cookie-text a { font-weight: 700; text-decoration: underline; }
.cookie-actions { display: flex; gap: 10px; flex: none; }
.cookie-actions .btn { min-width: 112px; min-height: 44px; }
.cookie-actions .btn-outline { padding: 10.5px 18px; }
@media (max-width: 760px) {
  .cookie-inner { flex-direction: column; align-items: stretch; padding: 16px; }
  .cookie-actions { display: grid; grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .cookie-banner { left: 10px; right: 10px; bottom: calc(82px + env(safe-area-inset-bottom)); }
  .cookie-text { font-size: 14.5px; }
}

/* Links legais no rodapé */

/* Página de Política de Privacidade */

/* Botão de envio do formulário com ícone do WhatsApp: uma linha só no celular */

/* =====================================================================
   Componentes do site completo (2026-10-10): topbar, mega menu, ícones,
   tabelas, FAQ em details, grades de sinais e diferenciais, bairros,
   resumo, responsável técnico, guias.
   ===================================================================== */
.ico { width: 24px; height: 24px; flex: none; }

/* Topbar */

/* Mega menu */
.has-mega { position: static; display: flex; align-items: center; gap: 2px; }
.site-header .header-inner { position: relative; }
.mega { display: none; position: absolute; left: 24px; right: 24px; top: 100%; z-index: 50; padding: 22px; background: #fff; border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 16px 30px rgba(1, 52, 105, .14); }
.mega::before { content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px; }
.has-mega:hover > .mega, .has-mega:focus-within > .mega, .has-mega.is-open > .mega { display: block; }
.has-mega.is-open .sub-toggle svg { transform: rotate(180deg); }
.mega-servicos { display: grid; grid-template-columns: 1fr 280px; gap: 22px; }
.mega-destaque { display: flex; flex-direction: column; gap: 10px; padding: 16px; border-radius: 12px; background: var(--navy-900); color: var(--on-dark); }
.mega-destaque img { border-radius: 8px; aspect-ratio: 16 / 10; object-fit: cover; width: 100%; }
.mega-destaque strong { font-family: var(--font-display); font-size: 18px; color: #fff; }
.mega-destaque p { margin: 0; font-size: 14.5px; line-height: 1.5; }
.mega-destaque .btn { margin-top: auto; padding: 12px 14px; font-size: 14.5px; color: #fff; }
.mega-destaque .btn::after { display: none; }
.mega a[aria-current="page"]::after { display: none; }
@media (max-width: 1100px) {
  .has-mega { flex-wrap: wrap; border-bottom: 1px solid var(--border); }
  .has-mega > a { flex: 1; border-bottom: 0; }
  .has-mega:hover > .mega, .has-mega:focus-within > .mega { display: none; }
  .mega, .has-mega.is-open > .mega { position: static; width: 100%; padding: 0 0 12px; border: 0; box-shadow: none; border-radius: 0; }
  .has-mega.is-open > .mega { display: block; }
  .mega-servicos { grid-template-columns: 1fr; gap: 6px; }
   .mega-destaque { display: none; }
  .nav-links .mega a { border-bottom: 0; }
}

/* Header CTA no celular */
@media (max-width: 600px) { .site-header .btn-wa .cta-txt { display: none; } .site-header .btn-wa { white-space: nowrap; } }

/* Hero: selos e números verdadeiros */

/* Resumo */

/* Texto corrido das seções */
dfn { font-style: normal; font-weight: 700; color: var(--navy-900); }

/* Cards de serviço: ícone + link descritivo */

/* Tabelas */
.data-table { width: 100%; border-collapse: collapse; font-size: 16px; min-width: 640px; }
.data-table caption { text-align: left; padding: 16px 18px; font-family: var(--font-display); font-weight: 700; font-size: 17px; color: var(--navy-900); border-bottom: 1px solid var(--border); }
.data-table th, .data-table td { padding: 14px 18px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--border); line-height: 1.5; }
.data-table thead th { background: var(--bg-soft); font-size: 13.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); font-family: var(--font-body); }
.data-table tbody th { font-weight: 700; color: var(--navy-900); }
.data-table tbody tr:last-child > * { border-bottom: 0; }
.data-table td a { font-weight: 700; }

/* Etapas com 4 colunas */

/* Grade de itens com ícone (sinais, diferenciais) */

/* Responsável técnico */

/* Checklist em duas colunas */

/* Bairros por região */

/* FAQ em details/summary */
.faq-item { background: #fff; border: 1px solid var(--border); border-radius: 12px; }
.faq-item summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 24px; cursor: pointer; list-style: none; font-family: var(--font-display); font-size: 18.5px; font-weight: 700; color: var(--navy-900); }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary .ico { width: 20px; height: 20px; color: var(--orange-700); transition: transform .2s; }
.faq-item[open] summary .ico { transform: rotate(180deg); }
.faq-answer { padding: 0 24px 22px; }
.faq-answer p { margin: 0; font-size: 16.5px; line-height: 1.65; color: var(--ink-3); }
.faq-answer a { text-decoration: underline; }

/* Cards de guia (blog) */

/* Imagem ainda não produzida (placeholder) */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* Rodapé do site completo: 4 colunas simétricas, selos e regiões */

/* Campo anti-spam (honeypot): invisível para pessoas */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.mega-servicos { align-items: start; }
.mega-destaque img { aspect-ratio: 16 / 9; }
.has-mega.force-close > .mega { display: none !important; }

/* Ajuste 2026-10-10 (pedido do usuário): no computador, títulos e textos das seções
   ocupam toda a largura do conteúdo, sem sobra à direita. */
/* Títulos de seção: preencher a linha inteira antes de quebrar (sem "balance", que encurtava as linhas) */

/* Mega menu no computador: não fecha ao descer o mouse do item até o painel.
   Ponte invisível cobrindo o vão + pequena espera antes de fechar. */
@media (min-width: 1101px) {
  .mega { display: block; visibility: hidden; opacity: 0; transform: translateY(6px); pointer-events: none;
    transition: opacity .15s ease, transform .15s ease, visibility 0s linear .2s; }
  .mega::before { top: -24px; height: 24px; } /* cobre exatamente o vão entre o item do menu e o painel, sem tapar Sobre/Blog/Contato */
  .has-mega:hover > .mega, .has-mega:focus-within > .mega, .has-mega.is-open > .mega {
    visibility: visible; opacity: 1; transform: none; pointer-events: auto; transition-delay: 0s, 0s, 0s; }
  .has-mega.force-close > .mega { visibility: hidden !important; opacity: 0 !important; pointer-events: none !important; display: block !important; }
}
@media (prefers-reduced-motion: reduce) { .mega { transition: none; transform: none; } }

/* Bloco de destaque do mega menu: respiro e botão em uma linha */
.mega-destaque { gap: 12px; padding: 20px; }
.mega-destaque strong { line-height: 1.25; }
.mega-destaque .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: 100%; white-space: nowrap; padding: 13px 16px; margin-top: 4px; }
/* Menu do celular: sem linha dupla depois do último item de "Áreas atendidas" */
/* Menu do celular: ícone e nome do serviço centralizados na mesma linha */

/* Tabelas no celular: barra de rolagem lateral visível, sombra indicando que há mais conteúdo
   à direita e aviso "deslize para o lado". */
.data-table thead th, .data-table caption { background-clip: padding-box; }

/* =====================================================================
   Páginas internas (2026-10-10): topo com formulário, listas de links,
   guia por jornada, bairros, artigo.
   ===================================================================== */
.page-hero { background: linear-gradient(180deg, var(--bg-soft) 0%, #fff 100%); border-bottom: 1px solid var(--border); }
.page-hero h1 { font-size: clamp(2.1rem, 1.5rem + 2.2vw, 3.1rem); line-height: 1.05; font-weight: 800; color: var(--navy-900); margin-top: 6px; }

/* Artigo */
.form-success-titulo { margin: 0; font-family: var(--font-display); font-size: 24px; font-weight: 700; color: var(--navy-900); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Links dentro de texto corrido: sublinhados, para não depender só da cor (WCAG 1.4.1) */
main p a:not(.btn), main td a, main address a, main li span a:not(.btn):not(.m-btn), main dd a { text-decoration: underline; text-underline-offset: 2px; }  /* listas com texto em <span>: link sublinhado, não só pela cor (acessibilidade, 22/10/2026) */

/* Preferências de cookies (Personalizar) */
.cookie-prefs { display: grid; gap: 12px; padding: 0 22px 18px; border-top: 1px solid var(--border); padding-top: 16px; }
.cookie-prefs[hidden] { display: none; }
.cookie-cat { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; line-height: 1.5; color: var(--ink-2); cursor: pointer; }
.cookie-cat input { width: 20px; height: 20px; margin-top: 2px; flex: none; accent-color: var(--navy-800); }
.cookie-cat strong { display: block; color: var(--navy-900); }
.cookie-prefs .btn { justify-self: start; min-height: 44px; }
@media (max-width: 760px) { .cookie-prefs { padding: 14px 16px 16px; } .cookie-prefs .btn { justify-self: stretch; } }

/* Caixa de chamada dos artigos: texto ocupa o espaço e o botão tem tamanho próprio (2026-10-11) */

/* ---------- Ferramentas (2026-10-11): funcionam só com HTML; o JavaScript é extra ---------- */
.calc { max-width: 820px; padding: 22px 24px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 14px; }
.calc[hidden] { display: none; }
.calc label { display: block; font-weight: 600; color: var(--ink-2); margin-bottom: 6px; font-size: 15px; }
.calc input, .calc select { width: 100%; padding: 12px 14px; border: 1px solid var(--blue-250); border-radius: 10px; font-size: 16px; font-family: inherit; background: #fff; }
@media print {
  .site-header, .site-footer, .mobile-bar, .breadcrumb, .cookie-banner, .cookie, [class^="cookie"], .offer-section, .btn { display: none !important; }
  body { background: #fff; font-size: 11.5pt; }
  .section, .page-hero { padding: 8px 0 !important; }
}

/* Correções de 2026-10-11: botão do mega menu sem sumir no hover; aviso de cookies compacto com "Personalizar" em texto */
.nav-links .mega-destaque .btn, .nav-links .mega-destaque .btn:hover, .nav-links .mega-destaque .btn:focus-visible { color: #fff; }
.nav-links .mega-destaque .btn:hover { background: var(--orange-700); }
.cookie-lado { display: flex; flex-direction: column; align-items: center; gap: 6px; flex: none; }
.cookie-personalizar { background: none; border: 0; padding: 4px 6px; font: inherit; font-size: 14px; color: var(--ink-3); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.cookie-personalizar:hover { color: var(--navy-900); }
@media (max-width: 760px) {
  .cookie-lado { align-items: stretch; }
  .cookie-personalizar { align-self: center; }
}

/* Imagem própria da página (assets/images/pg-*.jpg), logo abaixo do topo */

/* ===== Mestre dos Aquecedores: componentes próprios (2026-10-15) ===== */
/* Hero sem foto: gradiente suave da marca e cartão "o que o técnico confere" */

/* Cartões de serviço sem foto (até as imagens do ChatGPT chegarem) */

/* Bloco de segurança: cheiro de gás */

/* Marcas atendidas */
.mega-destaque .mega-h { color: #fff; font-family: var(--font-display); font-size: 16px; margin: 0; }

/* Rodapé com 5 colunas */

.brand-logo { mix-blend-mode: multiply; }

/* ===================================================================================
   Home no layout aprovado em 2026-10-15 (referência: assets/brand/referencias/layout-home-v2.webp, 1024 px de largura).
   No computador (acima de 1100 px) as medidas usam --u = 1/1024 da largura (até 1440 px), então a página fica
   proporcional ao layout. Abaixo disso, layout responsivo com a foto no fundo e véu branco (mesma lógica da Central).
   =================================================================================== */
.mi { display: block; flex: none; --ic-laranja: #feb202; color: #013469; }
.m-faixa .mi { color: #fff; --ic-laranja: #feb202; }
.m-wrap { width: min(100% - 32px, 1254px); margin: 0 auto; }
.btn-orcamento, .m-btn { display: inline-flex; align-items: center; justify-content: center; gap: .5em; border-radius: 999px; color: #fff; font-weight: 600; background: linear-gradient(90deg, #feb202 0%, #f5a800 100%); box-shadow: 0 8px 20px rgba(254, 178, 2, .28); white-space: nowrap; transition: transform .15s, box-shadow .15s; }
.btn-orcamento:hover, .m-btn:hover { color: #fff; text-decoration: none; transform: translateY(-1px); box-shadow: 0 12px 26px rgba(254, 178, 2, .36); }
.btn-orcamento .chev, .m-btn .chev { width: .9em; height: .9em; }
.m-traco { display: block; background: linear-gradient(90deg, #feb202, #f5a800); border-radius: 2px; }

/* Hero */
.m-hero { position: relative; overflow: hidden; background: #fdfdfa; }
.m-hero h1 { font-weight: 800; color: #013469; letter-spacing: -0.035em; }
.m-hero h1 span, .m-hero-lead span { display: block; }
.m-hero-lead { margin: 0; color: #131d41; font-weight: 400; }
.m-hero-media picture, .m-hero-media img { display: block; width: 100%; height: 100%; }
.m-hero-media img { object-fit: cover; object-position: left center; }
.m-hero-media img.m-hero-foto { object-position: center; } /* foto própria da página (fonte/imagens_paginas.py) */
.foto-pagina { margin: 0; padding: 8px 0 0; background: #fdfdfa; }
.foto-pagina .container { max-width: 808px; }
.foto-pagina img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; border-radius: 16px; object-fit: cover; }
.foto-artigo { margin: 0 0 26px; }
.foto-artigo img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; border-radius: 16px; object-fit: cover; }

/* Faixa azul */
.m-faixa { background: linear-gradient(90deg, #073b75 0%, #013469 100%); color: #fff; }
.m-faixa-lista { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.m-faixa-lista li { display: flex; align-items: center; justify-content: center; }
.m-faixa-lista li + li { position: relative; }
.m-faixa-lista li + li::before { content: ""; position: absolute; left: 0; top: 50%; width: 1px; transform: translateY(-50%); background: #feb202; }
.m-faixa-lista li > span > span { display: block; }

/* Água quente com mais tranquilidade */
.m-tranquilidade { position: relative; overflow: hidden; background: #fefcfb; }
.m-tranquilidade::after, .m-card::after { content: ""; position: absolute; pointer-events: none; }
.m-tranquilidade::after { opacity: .5; }
.m-tranquilidade h2 { font-weight: 800; color: #013469; letter-spacing: -0.012em; }
.m-tranquilidade h2 span, .m-tranquilidade p span { display: block; }
.m-tranquilidade p { margin: 0; color: #252842; }
.m-checks li { display: flex; align-items: center; color: #1f2a4a; }
.m-checks .ico { color: #feb202; stroke-width: 3.4; flex: none; }

/* Nossos serviços */
.m-servicos { background: #fcf9f5; }
.m-titulo { text-align: center; }
.m-titulo h2 { font-weight: 800; color: #013469; letter-spacing: -0.03em; }
.m-titulo p { margin: 0; color: #2a3050; }
.m-titulo .m-traco { margin-left: auto; margin-right: auto; }
.m-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.m-card { position: relative; overflow: hidden; background: #fefefe; box-shadow: 0 2px 14px rgba(120, 90, 60, .07); }
.m-card > * { position: relative; z-index: 1; }
.m-card::after { z-index: 0; opacity: .32; }
.m-card h3 { font-weight: 800; letter-spacing: -0.02em; }
.m-card h3 a { color: #013469; }
.m-card h3 a:hover { color: var(--orange-700); text-decoration: none; }
.m-card p { margin: 0; color: #272742; }
.m-card p span { display: block; }
.m-card-link { display: inline-flex; align-items: center; color: #013469; font-weight: 600; }
.m-card-link:hover { color: var(--orange-700); text-decoration: none; }
.m-card-link .seta { flex: none; }

/* Qual é o defeito */
.m-defeitos { background: linear-gradient(180deg, #fcf9f5 0%, #fbf8f2 100%); }
.m-tabela-wrap { overflow-x: auto; }
.m-tabela { width: 100%; border-collapse: separate; border-spacing: 0; background: #fff; box-shadow: 0 6px 22px rgba(20, 30, 60, .06); }
.m-tabela thead th { color: #fff; font-weight: 600; text-align: left; }
.m-tabela thead th:first-child { background: linear-gradient(90deg, #012a55 0%, #073b75 100%); }
.m-tabela thead th:last-child { background: linear-gradient(90deg, #f5a800 0%, #feb202 100%); }
.m-tabela tbody th { color: #013469; font-weight: 600; text-align: left; }
.m-tabela tbody td { color: #31314f; }
.m-tabela tbody tr:nth-child(even) th, .m-tabela tbody tr:nth-child(even) td { background: #f8f8f8; }

/* ---------- Computador: proporção exata do layout ---------- */
@media (min-width: 1101px) {
  :root { --u: calc(min(100vw, 1440px) / 1024); }
  /* cabeçalho em todas as páginas: logo, menu e botão nas posições do layout */
  .site-header .header-inner { max-width: calc(var(--u) * 1024); margin: 0 auto; padding: calc(var(--u) * 12) calc(var(--u) * 36) calc(var(--u) * 12) calc(var(--u) * 64); justify-content: flex-start; align-items: flex-start; gap: 0; }
  .site-header .brand-logo-slogan { width: calc(var(--u) * 223); height: auto; }
  .site-header .brand { margin-right: calc(var(--u) * 117); }
  .site-header .main-nav { flex: 1; display: flex; align-items: center; margin-top: calc(var(--u) * 17); gap: 0; }
  .site-header .nav-links { display: flex; gap: calc(var(--u) * 34.5); margin-top: calc(var(--u) * -16); }
  .site-header .nav-links > li > a { font-size: calc(var(--u) * 11.3); font-weight: 500; color: #013469; padding: 0; }
  .site-header .nav-links a[aria-current="page"]::after { bottom: calc(var(--u) * -9); height: calc(var(--u) * 2); }
  .site-header .sub-toggle { width: 1px; height: 1px; padding: 0; margin: 0; overflow: hidden; opacity: 0; }
  .btn-orcamento { margin-left: auto; width: calc(var(--u) * 149); height: calc(var(--u) * 36); font-size: calc(var(--u) * 11.5); }
  .site-header.header-home { position: absolute; left: 0; right: 0; top: 0; background: transparent; border: 0; }

  .m-wrap { width: calc(var(--u) * 892); }
  /* hero: 441 px do layout */
  .m-hero { height: calc(var(--u) * 441); }
  .m-hero-media { position: absolute; top: 0; right: 0; height: calc(var(--u) * 440); width: calc(var(--u) * 568 + (100% - var(--u) * 1024) / 2); }
  .m-hero-media::before { content: ""; position: absolute; inset: 0 auto 0 0; width: calc(var(--u) * 100); z-index: 1; background: linear-gradient(90deg, #fdfdfa 0%, rgba(253, 253, 250, .98) 18%, rgba(253, 253, 250, .84) 42%, rgba(253, 253, 250, .5) 68%, rgba(253, 253, 250, .16) 90%, rgba(253, 253, 250, 0) 100%); }
  .m-hero-texto { position: relative; z-index: 2; padding-top: calc(var(--u) * 125.2); }
  .m-hero h1 { margin-left: calc(var(--u) * -5); font-size: calc(var(--u) * 53.5); line-height: calc(var(--u) * 48); }
  .m-hero-lead { margin: calc(var(--u) * 10.5) 0 0 calc(var(--u) * -4); font-size: calc(var(--u) * 14.3); line-height: calc(var(--u) * 20); }
  .m-btn { margin: calc(var(--u) * 15.3) 0 0 calc(var(--u) * -5); width: calc(var(--u) * 217); height: calc(var(--u) * 43); font-size: calc(var(--u) * 15); }
  /* faixa azul: 82 px */
  .m-faixa-lista { height: calc(var(--u) * 82); }
  .m-faixa-lista li { gap: calc(var(--u) * 16); font-size: calc(var(--u) * 13.5); line-height: calc(var(--u) * 19); }
  .m-faixa-lista li + li::before { height: calc(var(--u) * 40); }
  .m-faixa .mi { width: calc(var(--u) * 36); height: calc(var(--u) * 36); }
  /* tranquilidade: 206 px */
  .m-tranquilidade { height: calc(var(--u) * 206); }
  .m-tranquilidade::after { right: calc(var(--u) * -40); top: calc(var(--u) * 6); width: calc(var(--u) * 230); height: calc(var(--u) * 230); }
  .m-tranquilidade-grid { display: grid; grid-template-columns: calc(var(--u) * 447) 1fr; padding: calc(var(--u) * 29) 0 0 calc(var(--u) * 47); position: relative; z-index: 1; }
  .m-tranquilidade .m-traco { width: calc(var(--u) * 33); height: calc(var(--u) * 3); }
  .m-tranquilidade h2 { margin-top: calc(var(--u) * 12.3); font-size: calc(var(--u) * 37); line-height: calc(var(--u) * 36); }
  .m-tranquilidade p { margin-top: calc(var(--u) * 6.3); font-size: calc(var(--u) * 14.5); line-height: calc(var(--u) * 20); }
  .m-checks { padding-top: calc(var(--u) * 12); }
  .m-checks li { gap: calc(var(--u) * 23); font-size: calc(var(--u) * 14); height: calc(var(--u) * 29); }
  .m-checks .ico { width: calc(var(--u) * 18); height: calc(var(--u) * 18); margin-left: calc(var(--u) * -1); }
  /* serviços */
  .m-servicos { padding: calc(var(--u) * 9.4) 0 calc(var(--u) * 27); }
  .m-titulo h2 { font-size: calc(var(--u) * 34); line-height: calc(var(--u) * 38); }
  .m-titulo p { margin-top: calc(var(--u) * 2.4); font-size: calc(var(--u) * 14); line-height: calc(var(--u) * 20); }
  .m-titulo .m-traco { width: calc(var(--u) * 33); height: calc(var(--u) * 3); margin-top: calc(var(--u) * 9.2); }
  .m-cards { gap: calc(var(--u) * 17); margin-top: calc(var(--u) * 15); }
  .m-card { height: calc(var(--u) * 183); padding: calc(var(--u) * 16) calc(var(--u) * 20) 0 calc(var(--u) * 26); border-radius: calc(var(--u) * 8); }
  .m-card::after { right: calc(var(--u) * -18); top: calc(var(--u) * 18); width: calc(var(--u) * 120); height: calc(var(--u) * 170); }
  .m-card-ico .mi { width: calc(var(--u) * 48); height: calc(var(--u) * 48); }
  .m-card h3 { margin-top: calc(var(--u) * 5.7); font-size: calc(var(--u) * 17); line-height: calc(var(--u) * 22); }
  .m-card p { margin-top: calc(var(--u) * 3.6); font-size: calc(var(--u) * 12); line-height: calc(var(--u) * 16.5); }
  .m-card-link { position: absolute; left: calc(var(--u) * 26); top: calc(var(--u) * 153.75); gap: calc(var(--u) * 10); font-size: calc(var(--u) * 11.5); line-height: calc(var(--u) * 16); }
  .m-card-link .seta { width: calc(var(--u) * 15); height: calc(var(--u) * 15); }
  /* tabela */
  .m-defeitos { padding: 0 0 calc(var(--u) * 40); }
  .m-defeitos .m-titulo h2 { font-size: calc(var(--u) * 32.4); line-height: calc(var(--u) * 36); }
  .m-defeitos .m-titulo p { margin-top: calc(var(--u) * 3); font-size: calc(var(--u) * 12); line-height: calc(var(--u) * 17); }
  .m-defeitos .m-titulo .m-traco { width: calc(var(--u) * 30); margin-top: calc(var(--u) * 9); }
  .m-tabela-wrap { width: calc(var(--u) * 889); margin: calc(var(--u) * 9) auto 0; }
  .m-tabela { border-radius: calc(var(--u) * 6); }
  .m-tabela thead th { height: calc(var(--u) * 34); font-size: calc(var(--u) * 12.5); padding: 0 0 0 calc(var(--u) * 28); }
  .m-tabela thead th:first-child { width: calc(var(--u) * 347); border-top-left-radius: calc(var(--u) * 6); }
  .m-tabela thead th:last-child { padding-left: calc(var(--u) * 30); border-top-right-radius: calc(var(--u) * 6); }
  .m-tabela tbody th, .m-tabela tbody td { height: calc(var(--u) * 26.5); font-size: calc(var(--u) * 11.5); padding: 0 0 0 calc(var(--u) * 29); }
  .m-tabela tbody td { padding-left: calc(var(--u) * 31); }
}

/* ---------- Tablet e celular ---------- */
@media (max-width: 1100px) {
  .btn-orcamento { margin-left: auto; height: 44px; padding: 0 18px; font-size: 15px; }
  .m-hero { padding: 40px 0 44px; }
  .m-hero-media { position: absolute; inset: 0; }
  .m-hero-media img { object-position: 70% center; }
  .m-hero-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(253, 253, 250, .97) 0%, rgba(253, 253, 250, .9) 55%, rgba(253, 253, 250, .55) 100%); }
  .m-hero-texto { position: relative; z-index: 1; }
  .m-hero h1 { font-size: clamp(40px, 7vw, 60px); line-height: 1; }
  .m-hero-lead { margin-top: 14px; font-size: 18px; line-height: 1.45; max-width: 520px; }
  .m-hero-lead span { display: inline; }
  .m-btn { margin-top: 22px; height: 52px; padding: 0 28px; font-size: 17px; }
  .m-faixa-lista { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 18px 0; row-gap: 18px; }
  .m-faixa-lista li { justify-content: flex-start; gap: 12px; padding-left: 16px; font-size: 15px; line-height: 1.3; }
  .m-faixa-lista li + li::before { display: none; }
  .m-faixa .mi { width: 34px; height: 34px; }
  .m-tranquilidade { padding: 44px 0; }
  .m-tranquilidade::after { right: -60px; top: 20px; width: 220px; height: 260px; opacity: .6; }
  .m-tranquilidade-grid { position: relative; z-index: 1; display: grid; gap: 26px; }
  .m-tranquilidade .m-traco { width: 40px; height: 4px; }
  .m-tranquilidade h2 { margin-top: 14px; font-size: clamp(32px, 5vw, 42px); line-height: 1.05; }
  .m-tranquilidade p { margin-top: 12px; font-size: 18px; line-height: 1.45; }
  .m-tranquilidade p span { display: inline; }
  .m-checks { display: grid; gap: 12px; }
  .m-checks li { gap: 14px; font-size: 18px; }
  .m-checks .ico { width: 20px; height: 20px; }
  .m-servicos { padding: 48px 0 28px; }
  .m-titulo h2 { font-size: clamp(30px, 4.6vw, 40px); line-height: 1.1; }
  .m-titulo p { margin-top: 8px; font-size: 17px; line-height: 1.45; }
  .m-titulo .m-traco { width: 40px; height: 4px; margin-top: 14px; }
  .m-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 26px; }
  .m-card { padding: 22px 22px 24px; border-radius: 12px; }
  .m-card::after { right: -24px; top: 20px; width: 120px; height: 170px; }
  .m-card-ico .mi { width: 52px; height: 52px; }
  .m-card h3 { margin-top: 10px; font-size: 22px; }
  .m-card p { margin-top: 6px; font-size: 16px; line-height: 1.45; }
  .m-card p span { display: inline; }
  .m-card-link { margin-top: 12px; gap: 10px; font-size: 16px; }
  .m-card-link .seta { width: 18px; height: 18px; }
  .m-defeitos { padding: 24px 0 48px; }
  .m-defeitos .m-titulo h2 { font-size: clamp(28px, 4.4vw, 38px); }
  .m-tabela-wrap { margin-top: 22px; border-radius: 10px; }
  .m-tabela thead th { padding: 14px 18px; font-size: 16px; }
  .m-tabela thead th:first-child { border-top-left-radius: 10px; }
  .m-tabela thead th:last-child { border-top-right-radius: 10px; }
  .m-tabela tbody th, .m-tabela tbody td { padding: 12px 18px; font-size: 15px; line-height: 1.4; vertical-align: top; }
}
@media (max-width: 640px) {
  .btn-orcamento { display: none; }
  .m-hero { padding: 30px 0 34px; }
  .m-hero-media::after { background: linear-gradient(180deg, rgba(253, 253, 250, .9) 0%, rgba(253, 253, 250, .8) 45%, rgba(253, 253, 250, .62) 100%); }
  .m-btn { width: 100%; }
  .m-faixa-lista { grid-template-columns: 1fr; }
  .m-cards { grid-template-columns: 1fr; }
  .m-tabela thead th, .m-tabela tbody th, .m-tabela tbody td { padding-left: 12px; padding-right: 12px; }
  .m-tabela tbody th { width: 38%; }
}

/* Botões de ação (padrão da Central: WhatsApp + Ligar agora) no estilo do Mestre dos Aquecedores */
.m-acoes { display: flex; align-items: center; flex-wrap: wrap; }
.m-btn .wa-icon, .btn-orcamento .wa-icon { width: 1.25em; height: 1.25em; flex: none; }
.m-btn-sec { display: inline-flex; align-items: center; justify-content: center; gap: .5em; border-radius: 999px; border: 1.5px solid #013469; color: #013469; background: rgba(255, 255, 255, .85); font-weight: 600; white-space: nowrap; transition: background .15s, color .15s; }
.m-btn-sec:hover { background: #013469; color: #fff; text-decoration: none; }
.m-btn-sec .ico { width: 1.05em; height: 1.05em; }
@media (min-width: 1101px) {
  .m-acoes { gap: calc(var(--u) * 12); margin: calc(var(--u) * 15.3) 0 0 calc(var(--u) * -5); }
  .m-acoes .m-btn { margin: 0; width: auto; padding: 0 calc(var(--u) * 24); }
  .m-btn-sec { height: calc(var(--u) * 43); padding: 0 calc(var(--u) * 22); font-size: calc(var(--u) * 15); }
  .btn-orcamento { width: auto; padding: 0 calc(var(--u) * 18); }
}
@media (max-width: 1100px) {
  .m-acoes { gap: 12px; margin-top: 22px; }
  .m-acoes .m-btn { margin-top: 0; }
  .m-btn-sec { height: 52px; padding: 0 26px; font-size: 17px; }
}
@media (max-width: 640px) {
  .m-acoes .m-btn, .m-btn-sec { width: 100%; }
}

/* ===================== Seções 6 a 15 + rodapé (pranchas 02 e 03, 1024 px) ===================== */
.m-w959, .m-w936, .m-w943, .m-w915 { width: min(100% - 32px, 1254px); }
.m-gas, .m-poa { position: relative; overflow: hidden; }
.m-gas { background: #fdfcfa; }
.m-gas h2, .m-preco h2, .m-poa h2, .m-faq h2 { font-weight: 800; color: #013469; letter-spacing: -0.025em; }
.m-gas h2 span, .m-gas p span, .m-poa h2 span, .m-form h2 span { display: block; }
.m-gas p, .m-resp-lead, .m-preco-lead, .m-preco-nota { margin: 0; color: #252a48; }
.m-gas-media picture, .m-gas-media img, .m-poa-media picture, .m-poa-media img { display: block; width: 100%; height: 100%; }
.m-gas-media img, .m-poa-media img { object-fit: cover; }
.m-btn .seta { width: 1.05em; height: 1.05em; flex: none; }
.m-num { display: grid; place-items: center; border-radius: 50%; color: #fff; font-weight: 700; background: linear-gradient(135deg, #feb202, #f5a800); box-shadow: 0 4px 10px rgba(254, 178, 2, .3); }
.m-como { background: #fbf8f4; }
.m-etapas { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); counter-reset: none; }
.m-etapas li { position: relative; background: #fdfcfb; box-shadow: 0 3px 16px rgba(120, 90, 60, .08); }
.m-etapas li + li::before { content: ""; position: absolute; top: 50%; border-right: 2px solid #feb202; border-top: 2px solid #feb202; transform: translateY(-50%) rotate(45deg); }
.m-etapas h3 { font-weight: 700; color: #013469; letter-spacing: -0.01em; }
.m-etapas p { margin: 0; color: #2a2f4d; }
.m-etapas p span, .m-preco-lead span, .m-preco-nota span, .m-resp-lead span { display: block; }
.m-preco { background: #fffefe; }
.m-preco-tabela { width: 100%; border-collapse: separate; border-spacing: 0; background: #fff; box-shadow: 0 6px 22px rgba(20, 30, 60, .07); overflow: hidden; }
.m-preco-tabela thead th { background: #f5f5f4; color: #013469; font-weight: 600; text-align: left; }
.m-preco-tabela thead th:last-child { text-align: center; }
.m-preco-tabela tbody th { color: #013469; font-weight: 500; text-align: left; }
.m-preco-tabela tbody td { color: #203462; text-align: center; }
.m-preco-tabela th + th, .m-preco-tabela th + td { border-left: 1px solid #ececea; }
.m-preco-tabela tbody tr > * { border-top: 1px solid #ececea; }
.m-marcas { position: relative; overflow: hidden; background: #fefdfc; }
.m-marcas::before, .m-marcas::after { content: ""; position: absolute; pointer-events: none; opacity: .5; }
.m-chips { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); position: relative; z-index: 1; }
.m-chips a { display: grid; place-items: center; background: #fff; color: #013469; font-weight: 600; box-shadow: 0 3px 14px rgba(120, 90, 60, .08); }
.m-chips a:hover { color: var(--orange-700); text-decoration: none; }
.m-marcas-nota { position: relative; z-index: 1; text-align: center; color: #6a7189; margin: 0; }
.m-provas { display: flex; }
.m-provas li { display: flex; align-items: center; color: #1f2a4a; }
.m-provas li + li { border-left: 1px solid #fdd76b; }
.m-provas li > span > span { display: block; }
.m-provas-col li { flex-direction: column; align-items: flex-start; }
.m-poa .m-provas li.laranja .mi { color: #feb202; }
.m-poa { background: #fefcf8; }
.m-bairros summary { cursor: pointer; color: #013469; font-weight: 600; }
.m-faq { position: relative; overflow: hidden; background: #fcf8f4; }
.m-faq .faq-item { background: #fff; box-shadow: 0 2px 12px rgba(120, 90, 60, .07); border: 0; }
.m-faq .faq-item summary { display: flex; align-items: center; justify-content: space-between; cursor: pointer; list-style: none; color: #013469; font-weight: 600; }
.m-faq .faq-item summary::-webkit-details-marker { display: none; }
.m-faq .faq-item[open] .mi { transform: rotate(45deg); }
.m-faq .faq-answer { color: #2a2f4d; }
.m-faq .faq-answer p { margin: 0; }
.m-form { position: relative; overflow: hidden; background: linear-gradient(180deg, #013469 0%, #012a55 100%); color: #fff; }
.m-form h2 { font-weight: 800; color: #fff; letter-spacing: -0.025em; }
.m-form .m-resp-lead { color: #dfe6f3; }
.m-form .m-provas li { color: #dfe6f3; }
.m-form .mi { color: #fff; }
.m-form .m-provas li + li { border-left-color: #feb202; }
.m-form-painel { background: #0a3d78; }
.m-form-painel fieldset { border: 0; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; }
.m-campo { margin: 0; }
.m-campo label { display: block; color: #fff; }
.m-campo input, .m-campo select { width: 100%; background: #fff; border: 1px solid #fff; color: #013469; }
.m-campo input::placeholder { color: #8a90a3; }
.m-form-painel .m-btn-form, .m-form-painel .form-error, .m-consent { grid-column: 1 / -1; }
.m-btn-form { border: 0; cursor: pointer; width: 100%; }
.m-consent { margin: 0; color: #b9c4da; }
.m-consent a { color: #fff; text-decoration: underline; }
.m-form-painel .form-success { color: #fff; }
/* calculadora de litros: resultado dentro do painel do formulário (papel tipográfico h4) */
.m-calc-resultado { grid-column: 1 / -1; margin: 0; color: #fff; font-size: var(--t-h4); line-height: 1.4; }
.m-calc-resultado strong { color: #feb202; }
/* rodapé */
.site-footer.m-rodape { background: #fefcf8; color: #013469; padding: 0; }
.m-rodape-topo { display: flex; align-items: center; }
.m-rodape-logo img { display: block; width: 100%; height: auto; }
.m-rodape nav ul { display: flex; }
.m-rodape nav a { color: #013469; }
.m-rodape nav a:hover { color: var(--orange-700); text-decoration: none; }
.m-rodape .btn-orcamento { margin-left: auto; }
.m-rodape-base { border-top: 1px solid #e6e2dc; text-align: center; color: #7a7f93; }
.m-rodape-base p { margin: 0; }
.m-rodape-legal { display: flex; justify-content: center; flex-wrap: wrap; }
.m-rodape-legal a { color: #7a7f93; }

@media (min-width: 1101px) {
  .m-w959 { width: calc(var(--u) * 959); }
  .m-w936 { width: calc(var(--u) * 936); }
  .m-w943 { width: calc(var(--u) * 943); }
  .m-w915 { width: calc(var(--u) * 915); }
  /* 6. Cheiro de gás (426 px) */
  .m-gas { height: calc(var(--u) * 426); }
  .m-gas-media { position: absolute; top: 0; right: 0; height: 100%; width: calc(var(--u) * 594 + (100% - var(--u) * 1024) / 2); }
  .m-gas-media::before { content: ""; position: absolute; inset: 0 auto 0 0; width: calc(var(--u) * 30); z-index: 1; background: linear-gradient(90deg, #fdfcfa, rgba(253, 252, 250, 0)); }
  .m-gas-media img { object-position: left center; }
  .m-gas-texto { position: relative; z-index: 2; padding-top: calc(var(--u) * 104.9); }
  .m-gas h2 { margin-left: calc(var(--u) * -1); font-size: calc(var(--u) * 53.5); line-height: calc(var(--u) * 48.5); }
  .m-gas p { margin-top: calc(var(--u) * 14.6); font-size: calc(var(--u) * 17.5); line-height: calc(var(--u) * 25); }
  .m-btn-lg { margin-top: calc(var(--u) * 24); height: calc(var(--u) * 51); padding: 0 calc(var(--u) * 32); font-size: calc(var(--u) * 16.5); }
  /* 7. Como funciona (325 px) */
  .m-como { padding: calc(var(--u) * 12.9) 0 calc(var(--u) * 25); }
  .m-como .m-titulo h2, .m-marcas .m-titulo h2 { font-size: calc(var(--u) * 43.5); line-height: calc(var(--u) * 48); }
  .m-marcas .m-titulo h2 { font-size: calc(var(--u) * 41.5); line-height: calc(var(--u) * 46); }
  .m-como .m-titulo p { margin-top: calc(var(--u) * .85); font-size: calc(var(--u) * 15.5); line-height: calc(var(--u) * 21); }
  .m-como .m-titulo .m-traco, .m-marcas .m-titulo .m-traco { width: calc(var(--u) * 39); margin-top: calc(var(--u) * 11.25); }
  .m-etapas { gap: calc(var(--u) * 27); margin-top: calc(var(--u) * 15); }
  .m-etapas li { height: calc(var(--u) * 188); padding: calc(var(--u) * 19) calc(var(--u) * 14) 0 calc(var(--u) * 22); border-radius: calc(var(--u) * 12); }
  .m-etapas li + li::before { left: calc(var(--u) * -17); width: calc(var(--u) * 8); height: calc(var(--u) * 8); }
  .m-num { position: absolute; left: calc(var(--u) * 15); top: calc(var(--u) * 13); width: calc(var(--u) * 31); height: calc(var(--u) * 31); font-size: calc(var(--u) * 15); }
  .m-etapas .mi { width: calc(var(--u) * 57); height: calc(var(--u) * 57); margin-left: calc(var(--u) * 67); }
  .m-etapas h3 { margin-top: calc(var(--u) * 10.7); font-size: calc(var(--u) * 17); line-height: calc(var(--u) * 22); }
  .m-etapas p { margin-top: calc(var(--u) * 5.5); font-size: calc(var(--u) * 13.5); line-height: calc(var(--u) * 19.5); }
  /* 8. Preço (240 px) */
  .m-preco { padding: calc(var(--u) * 22) 0 calc(var(--u) * 16); }
  .m-preco-grid { display: grid; grid-template-columns: calc(var(--u) * 447) 1fr; }
  .m-preco h2 { margin-top: calc(var(--u) * 2.4); font-size: calc(var(--u) * 39.5); line-height: calc(var(--u) * 44); }
  .m-preco-lead { margin-top: calc(var(--u) * 6.8); font-size: calc(var(--u) * 15); line-height: calc(var(--u) * 20.5); }
  .m-preco .m-traco { width: calc(var(--u) * 38); height: calc(var(--u) * 3); margin-top: calc(var(--u) * 12.8); }
  .m-preco-nota { margin-top: calc(var(--u) * 20.25); font-size: calc(var(--u) * 13.5); line-height: calc(var(--u) * 19.5); }
  .m-preco-tabela { border-radius: calc(var(--u) * 8); }
  .m-preco-tabela thead th { height: calc(var(--u) * 43); font-size: calc(var(--u) * 13.5); padding: 0 calc(var(--u) * 16) 0 calc(var(--u) * 37); }
  .m-preco-tabela tbody th, .m-preco-tabela tbody td { height: calc(var(--u) * 36); font-size: calc(var(--u) * 13); padding: 0 calc(var(--u) * 16) 0 calc(var(--u) * 37); }
  .m-preco-tabela th:first-child { width: calc(var(--u) * 237); }
  .m-preco-tabela td, .m-preco-tabela thead th:last-child { padding-left: calc(var(--u) * 16); }
  /* 9. Marcas (205 px) */
  .m-marcas { padding: calc(var(--u) * 22.65) 0 calc(var(--u) * 16); }
  .m-marcas::before { left: calc(var(--u) * -40); top: calc(var(--u) * 10); width: calc(var(--u) * 140); height: calc(var(--u) * 190); }
  .m-marcas::after { right: calc(var(--u) * -30); top: calc(var(--u) * 10); width: calc(var(--u) * 140); height: calc(var(--u) * 190); }
  .m-marcas .m-titulo p { margin-top: calc(var(--u) * 1); font-size: calc(var(--u) * 14.5); line-height: calc(var(--u) * 20); }
  .m-chips { gap: calc(var(--u) * 11); margin-top: calc(var(--u) * 17); }
  .m-chips a { height: calc(var(--u) * 53); border-radius: calc(var(--u) * 6); font-size: calc(var(--u) * 19.5); }
  .m-marcas-nota { margin-top: calc(var(--u) * 8); font-size: calc(var(--u) * 10.5); }
  /* 10. Por que (321 px) */
  /* blocos editoriais 11 a 15 */
  .m-traco { width: calc(var(--u) * 36); height: calc(var(--u) * 3); }
  .m-resp-lead { font-size: calc(var(--u) * 17); line-height: calc(var(--u) * 22); }
  .m-provas li { gap: calc(var(--u) * 10); padding: 0 calc(var(--u) * 20); font-size: calc(var(--u) * 13); line-height: calc(var(--u) * 16); }
  .m-provas li:first-child { padding-left: 0; }
  .m-provas .mi { width: calc(var(--u) * 37); height: calc(var(--u) * 37); }
  /* 11. Responsável (340 px) */
  .m-provas-col { margin-top: calc(var(--u) * 25.3); }
  .m-provas-col li { gap: calc(var(--u) * 9); padding: 0 calc(var(--u) * 22); }
  .m-provas-col .mi { width: calc(var(--u) * 40); height: calc(var(--u) * 40); }
  /* 12. Manutenção (277 px) */
   .m-poa .m-provas, .m-form .m-provas { margin-top: calc(var(--u) * 29.3); }
  /* 13. Porto Alegre (283 px) */
  .m-poa { min-height: calc(var(--u) * 284); padding: calc(var(--u) * 27) 0 calc(var(--u) * 24); }
  .m-poa-media { position: absolute; top: 0; right: 0; height: calc(var(--u) * 284); width: calc(var(--u) * 532 + (100% - var(--u) * 1024) / 2); }
  .m-poa-media img { object-position: left center; }
  .m-poa .m-wrap { position: relative; z-index: 1; }
  .m-poa h2 { margin-top: calc(var(--u) * 7.85); font-size: calc(var(--u) * 41); line-height: calc(var(--u) * 38); }
  .m-poa .m-resp-lead { margin-top: calc(var(--u) * 8.05); font-size: calc(var(--u) * 16.5); line-height: calc(var(--u) * 22); max-width: calc(var(--u) * 420); }
  .m-poa .m-provas { margin-top: calc(var(--u) * 20); }
  .m-bairros { margin-top: calc(var(--u) * 14); font-size: calc(var(--u) * 12.5); }
  .m-bairros[open] { background: #fff; padding: calc(var(--u) * 14); border-radius: calc(var(--u) * 10); position: relative; z-index: 2; margin-right: calc(var(--u) * -10); }
  /* 14. FAQ */
  .m-faq { padding: calc(var(--u) * 34) 0 calc(var(--u) * 24); }
  .m-faq-grid { display: grid; grid-template-columns: calc(var(--u) * 427) 1fr; }
  .m-faq h2 { margin-top: calc(var(--u) * 7.85); font-size: calc(var(--u) * 41); line-height: calc(var(--u) * 46); }
  .m-faq .m-resp-lead { margin-top: calc(var(--u) * 7.05); font-size: calc(var(--u) * 16.5); line-height: calc(var(--u) * 22); }
  .m-faq-lista { display: grid; gap: calc(var(--u) * 5); margin-top: calc(var(--u) * -1); }
  .m-faq .faq-item { border-radius: calc(var(--u) * 6); }
  .m-faq .faq-item summary { min-height: calc(var(--u) * 44); padding: 0 calc(var(--u) * 20); font-size: calc(var(--u) * 13); gap: calc(var(--u) * 12); }
  .m-faq .faq-item .mi { width: calc(var(--u) * 14); height: calc(var(--u) * 14); }
  .m-faq .faq-answer { padding: 0 calc(var(--u) * 20) calc(var(--u) * 14); font-size: calc(var(--u) * 13); line-height: calc(var(--u) * 19); }
  /* 15. Formulário (285 px) */
  .m-form { padding: calc(var(--u) * 28) 0 calc(var(--u) * 28); }
  .m-form-grid { display: grid; grid-template-columns: calc(var(--u) * 393) 1fr; }
  .m-form h2 { margin-top: calc(var(--u) * 11.25); font-size: calc(var(--u) * 38.5); line-height: calc(var(--u) * 37); }
  .m-form .m-resp-lead { margin-top: calc(var(--u) * 7.65); font-size: calc(var(--u) * 16.5); line-height: calc(var(--u) * 22); }
  .m-form .m-provas .mi { width: calc(var(--u) * 31); height: calc(var(--u) * 31); }
  .m-form-painel { border-radius: calc(var(--u) * 12); padding: calc(var(--u) * 22) calc(var(--u) * 22) calc(var(--u) * 18); }
  .m-form-painel fieldset { column-gap: calc(var(--u) * 18); row-gap: calc(var(--u) * 14); }
  .m-campo label { font-size: calc(var(--u) * 11.5); margin-bottom: calc(var(--u) * 6); }
  .m-campo input, .m-campo select { height: calc(var(--u) * 32); padding: 0 calc(var(--u) * 10); border-radius: calc(var(--u) * 4); font-size: calc(var(--u) * 11.5); }
  .m-btn-form { height: calc(var(--u) * 44); margin-top: calc(var(--u) * 6); font-size: calc(var(--u) * 15.5); }
  .m-consent { font-size: calc(var(--u) * 10); line-height: calc(var(--u) * 14); }
  /* rodapé (151 px) */
  .m-rodape-topo { padding: calc(var(--u) * 20) 0 calc(var(--u) * 18); gap: 0; }
  .m-rodape-logo { width: calc(var(--u) * 213); margin-right: calc(var(--u) * 125); }
  .m-rodape nav ul { gap: calc(var(--u) * 34); }
  .m-rodape nav a { font-size: calc(var(--u) * 12); }
  .m-rodape-base { padding: calc(var(--u) * 14) 0 calc(var(--u) * 16); font-size: calc(var(--u) * 10); line-height: calc(var(--u) * 16); }
  .m-rodape-legal { gap: calc(var(--u) * 16); margin-top: calc(var(--u) * 2) !important; }
}

@media (max-width: 1100px) {
  .m-gas { padding: 40px 0 44px; }
  .m-gas-media { position: absolute; inset: 0; }
  .m-gas-media img { object-position: 70% center; }
  .m-gas-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(253, 252, 250, .97) 0%, rgba(253, 252, 250, .88) 60%, rgba(253, 252, 250, .55) 100%); }
  .m-gas-texto { position: relative; z-index: 1; }
  .m-gas h2 { font-size: clamp(36px, 6.4vw, 54px); line-height: 1.02; }
  .m-gas h2 span { display: inline; }
  .m-gas p { margin-top: 14px; font-size: 18px; line-height: 1.45; }
  .m-gas p span { display: inline; }
  .m-btn-lg { margin-top: 22px; height: 52px; padding: 0 26px; font-size: 17px; }
  .m-como, .m-marcas { padding: 48px 0; }
  .m-etapas { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 26px; }
  .m-etapas li { padding: 22px; border-radius: 14px; }
  .m-etapas li + li::before { display: none; }
  .m-num { position: absolute; left: 16px; top: 16px; width: 34px; height: 34px; font-size: 16px; }
  .m-etapas .mi { width: 52px; height: 52px; margin-left: auto; margin-right: auto; }
  .m-etapas h3 { margin-top: 12px; font-size: 20px; }
  .m-etapas p { margin-top: 6px; font-size: 16px; line-height: 1.45; }
  .m-etapas p span { display: inline; }
  .m-preco { padding: 48px 0; }
  .m-preco-grid { display: grid; gap: 26px; }
  .m-preco h2, .m-poa h2, .m-faq h2 { font-size: clamp(30px, 5vw, 42px); line-height: 1.08; margin-top: 12px; }
  .m-form h2 { font-size: clamp(30px, 5vw, 42px); line-height: 1.08; margin-top: 12px; }
  .m-preco-lead, .m-preco-nota, .m-resp-lead { margin-top: 12px; font-size: 18px; line-height: 1.45; }
  .m-preco-lead span, .m-preco-nota span, .m-resp-lead span { display: inline; }
  .m-preco .m-traco, .m-traco { width: 40px; height: 4px; }
  .m-preco .m-traco { margin-top: 16px; }
  .m-preco-tabela { border-radius: 12px; }
  .m-preco-tabela th, .m-preco-tabela td { padding: 13px 14px; font-size: 15px; }
  .m-chips { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 24px; }
  .m-chips a { height: 54px; border-radius: 10px; font-size: 18px; }
  .m-marcas::before, .m-marcas::after { width: 120px; height: 170px; top: 20px; }
  .m-marcas::before { left: -60px; } .m-marcas::after { right: -60px; }
  .m-marcas-nota { margin-top: 12px; font-size: 13px; }
   .m-poa, .m-faq, .m-form { padding: 48px 0; }
   .m-faq-grid, .m-form-grid { display: grid; gap: 28px; }
  .m-provas { flex-wrap: wrap; row-gap: 14px; margin-top: 22px; }
  .m-provas li { gap: 10px; padding: 0 14px; font-size: 14px; line-height: 1.3; }
  .m-provas li:first-child { padding-left: 0; }
  .m-provas .mi { width: 34px; height: 34px; }
  .m-poa { display: flex; flex-direction: column-reverse; padding-top: 0; }
  .m-poa-media { position: relative; height: clamp(220px, 50vw, 380px); margin-top: 28px; }
  .m-poa-media img { object-position: 60% center; }
  .m-poa > .m-wrap { padding-top: 40px; }
  .m-bairros { margin-top: 18px; font-size: 16px; }
  .m-faq-lista { display: grid; gap: 8px; }
  .m-faq .faq-item { border-radius: 10px; }
  .m-faq .faq-item summary { min-height: 56px; padding: 12px 18px; font-size: 16px; gap: 12px; }
  .m-faq .faq-item .mi { width: 18px; height: 18px; }
  .m-faq .faq-answer { padding: 0 18px 16px; font-size: 16px; line-height: 1.5; }
  .m-form-painel { border-radius: 16px; padding: 22px; }
  .m-form-painel fieldset { gap: 14px; }
  .m-campo label { font-size: 15px; margin-bottom: 6px; }
  .m-campo input, .m-campo select { height: 48px; padding: 0 12px; border-radius: 8px; font-size: 16px; }
  .m-btn-form { height: 52px; font-size: 17px; }
  .m-consent { font-size: 13px; }
  .m-rodape-topo { flex-wrap: wrap; gap: 18px; padding: 28px 0 20px; }
  .m-rodape-logo { width: 190px; }
  .m-rodape nav ul { flex-wrap: wrap; gap: 8px 22px; }
  .m-rodape nav a { font-size: 16px; }
  .m-rodape .btn-orcamento { margin-left: 0; }
  .m-rodape-base { padding: 16px 0 96px; font-size: 13px; line-height: 1.6; }
  .m-rodape-legal { gap: 6px 16px; margin-top: 6px !important; }
}
@media (max-width: 640px) {
  .m-etapas { grid-template-columns: 1fr; }
  .m-chips { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .m-form-painel fieldset { grid-template-columns: 1fr; }
  .m-btn-lg { width: 100%; }
  .m-provas li { padding: 0 10px; font-size: 13px; }
}
@media (min-width: 1101px) {
  .m-gas .m-btn-lg { width: auto; gap: calc(var(--u) * 10); }
}
@media (min-width: 1101px) {
  .m-form .m-provas li { padding: 0 calc(var(--u) * 13); font-size: calc(var(--u) * 12.4); gap: calc(var(--u) * 9); }
  .m-form .m-provas li:first-child { padding-left: 0; }
  .m-form-painel .m-btn-form { margin: calc(var(--u) * 6) 0 0; width: 100%; height: calc(var(--u) * 44); }
}

/* chama de fundo = símbolo do logo oficial (assets/images/chama-logo-fundo.png), bem apagada */
.m-card::after { opacity: .3; }
.m-tranquilidade::after { opacity: .45; }
.m-marcas::before, .m-marcas::after { opacity: .4; }
@media (min-width: 1101px) {
  .m-card::after { right: calc(var(--u) * -6); top: calc(var(--u) * 26); width: calc(var(--u) * 140); height: calc(var(--u) * 150); background-position: right top; }
}
/* Formulário: campo "Descreva o problema (opcional)", largura total, como na Central */
.m-campo-largo { grid-column: 1 / -1; }
.m-campo textarea { width: 100%; background: #fff; border: 1px solid #fff; color: #013469; resize: vertical; font: inherit; }
.m-campo textarea::placeholder { color: #8a90a3; }
.m-opcional { color: #b9c4da; font-weight: 400; }
@media (min-width: 1101px) {
  .m-campo textarea { min-height: calc(var(--u) * 64); padding: calc(var(--u) * 8) calc(var(--u) * 10); border-radius: calc(var(--u) * 4); font-size: calc(var(--u) * 11.5); line-height: calc(var(--u) * 16); }
}
@media (max-width: 1100px) {
  .m-campo textarea { min-height: 96px; padding: 12px; border-radius: 8px; font-size: 16px; line-height: 1.4; }
}
/* Rodapé claro: o botão de WhatsApp mantém o texto branco (a regra antiga ".site-footer a" era para fundo escuro) */
.site-footer.m-rodape .btn-orcamento, .site-footer.m-rodape .btn-orcamento:hover { color: #fff; }
.site-footer.m-rodape .m-rodape-legal a:hover { color: var(--orange-700); }

/* ===== Menu "Serviços" (mega menu) no design system do Mestre dos Aquecedores ===== */
.mega.mega-m { padding: 22px; background: #fff; border: 1px solid #eae7e1; border-radius: 18px; box-shadow: 0 24px 50px rgba(1, 52, 105, .16); }
.mm-grid { display: grid; grid-template-columns: 1fr 290px; gap: 20px; }
.mm-servicos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.mm-item { display: flex; align-items: center; gap: 14px; padding: 12px; border-radius: 14px; color: #013469; white-space: normal !important; }
.mm-item:hover { background: #f7f3ec; text-decoration: none; color: #013469; }
.mm-item[aria-current="page"] { background: #f7f3ec; }
.mm-item::after { display: none !important; }
.mm-ico { display: grid; place-items: center; flex: none; width: 48px; height: 48px; border-radius: 12px; background: #f7f3ec; }
.mm-item:hover .mm-ico { background: #fff; }
.mm-ico .mi { width: 30px; height: 30px; }
.mm-item strong { display: block; font-size: 15.5px; font-weight: 700; line-height: 1.25; color: #013469; }
.mm-item small { display: block; margin-top: 2px; font-size: 13.5px; line-height: 1.35; font-weight: 400; color: #425574; }
.mm-lado { display: flex; flex-direction: column; gap: 12px; padding: 18px; border-radius: 14px; background: #f7f3ec; }
.mm-rotulo { margin: 0; font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: #feb202; }
.mm-chips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.mm-chips a { display: grid; place-items: center; height: 38px; border-radius: 10px; background: #fff; color: #013469 !important; font-size: 14px; font-weight: 600; box-shadow: 0 2px 8px rgba(120, 90, 60, .08); padding: 0 !important; }
.mm-chips a:hover { color: #feb202 !important; text-decoration: none; }
.mm-chips a::after { display: none !important; }
.mm-cta { margin-top: auto !important; width: 100% !important; height: 44px !important; font-size: 14.5px !important; padding: 0 14px !important; }
.mm-cta .wa-icon { width: 18px; height: 18px; }
.mm-faixa { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 20px; margin-top: 16px; padding-top: 14px; border-top: 1px solid #eae7e1; font-size: 13.5px; color: #425574; }
.mm-faixa a { color: #feb202 !important; font-weight: 700; padding: 0 !important; }
.mm-faixa a::after { display: none !important; }
@media (min-width: 1101px) {
  .site-header .mega.mega-m { left: 50%; right: auto; width: 960px; margin-left: -480px; top: calc(100% - 6px); }
}
@media (max-width: 1100px) {
  .mega.mega-m { padding: 0 0 12px; border: 0; box-shadow: none; border-radius: 0; }
  .mm-grid { grid-template-columns: 1fr; gap: 10px; }
  .mm-servicos { grid-template-columns: 1fr; gap: 2px; }
  .mm-item { padding: 8px 0; border-radius: 0; }
  .mm-ico { width: 40px; height: 40px; }
  .mm-ico .mi { width: 26px; height: 26px; }
  .mm-item small { display: none; }
  .mm-lado { padding: 14px; }
  .mm-faixa { display: none; }
}
.site-header .mega .mm-item { display: flex; }
.site-header .mega .mm-cta { display: inline-flex; align-items: center; justify-content: center; gap: 8px; margin: auto 0 0 !important; width: 100% !important; max-width: none; color: #fff !important; }
.site-header .mega .mm-chips a { display: grid; }
.site-header .mega .mm-ico .mi { width: 30px; height: 30px; }
/* Menu Serviços: o painel fica ~65 px abaixo da palavra "Serviços". Ponte invisível do tamanho do vão
   + o JavaScript mantém o painel aberto por 0,4 s depois que o mouse sai, para dar tempo de chegar nele. */
@media (min-width: 1101px) {
  .mega.mega-m::before { top: -54px; height: 54px; left: 25%; right: 25%; }
  .has-mega.hover-aberto > .mega { visibility: visible; opacity: 1; transform: none; pointer-events: auto; transition-delay: 0s, 0s, 0s; }
}
/* Item do menu Serviços: respiro dos dois lados no destaque do hover (a regra ".nav-links a" zerava o recuo lateral) */
.site-header .mega .mm-item { padding: 12px 14px; }
@media (max-width: 1100px) { .site-header .mega .mm-item { padding: 8px 0; } }
/* Cabeçalho: menu e botão do WhatsApp centralizados na altura do logo */
@media (min-width: 1101px) {
  .site-header .header-inner { align-items: center; }
  .site-header .main-nav { margin-top: 0; }
  .site-header .nav-links { margin-top: 0; }
}
/* Primeira dobra: mais respiro entre o texto de apoio e os botões (boa prática de leitura e toque) */
@media (min-width: 1101px) {
  .m-hero-lead { margin-top: calc(var(--u) * 14); }
  .m-acoes { margin-top: calc(var(--u) * 28); }
}
@media (max-width: 1100px) {
  .m-hero-lead { margin-top: 18px; }
  .m-acoes { margin-top: 30px; }
}
/* Foto da primeira dobra encostada na faixa azul (sem a linha clara de 1 px do fundo) */
@media (min-width: 1101px) {
  .m-hero-media { top: 0; bottom: -1px; height: auto; }
}

/* ===== Grade única: todas as seções, o cabeçalho e o rodapé alinhados na mesma margem (contêiner de 892/1024 da largura) ===== */
@media (min-width: 1101px) {
  .m-w959, .m-w936, .m-w943, .m-w915 { width: calc(var(--u) * 892); }
  .site-header .header-inner { max-width: none; width: calc(var(--u) * 892); padding-left: 0; padding-right: 0; }
  /* primeira dobra: sem recuos negativos */
  .m-hero h1, .m-hero-lead, .m-acoes { margin-left: 0; }
  /* faixa azul: itens começam na margem, separadores entre eles */
  .m-faixa-lista li { justify-content: flex-start; padding-left: calc(var(--u) * 26); }
  .m-faixa-lista li:first-child { padding-left: 0; }
  /* água quente: sem recuo interno */
  .m-tranquilidade-grid { padding-left: 0; grid-template-columns: calc(var(--u) * 494) 1fr; }
  /* como funciona e diferenciais: 4 cartões dentro da mesma largura */
  .m-etapas { gap: calc(var(--u) * 22); }
  .m-etapas li { height: auto; min-height: calc(var(--u) * 188); padding-bottom: calc(var(--u) * 18); }
  .m-etapas li + li::before { left: calc(var(--u) * -14.5); }
  .m-etapas .mi { margin-left: auto; margin-right: auto; }
  /* responsável: o cartão ocupa a coluna da direita até a margem */
  .m-rodape-logo { margin-right: auto; }
  .m-rodape nav { margin-right: calc(var(--u) * 60); }
}
@media (min-width: 1101px) {
  .m-tabela-wrap { width: calc(var(--u) * 892); }
  .m-gas h2 { margin-left: 0; }
}
@media (min-width: 1101px) {
  .m-gas .m-btn { margin-left: 0; }
  .m-preco-tabela th:first-child { width: 42%; }
  .m-preco-tabela td { white-space: nowrap; }
}
@media (max-width: 1100px) { .m-faixa-lista li { padding-left: 0; } }
/* Faixa do menu Serviços: cada garantia como um item separado, com respiro e um check laranja */
.mm-selos { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 28px; }
.mm-selos li { display: flex; align-items: center; gap: 8px; font-weight: 500; color: #425574; }
.mm-selos .ico { width: 16px; height: 16px; color: #feb202; stroke-width: 3; flex: none; }
.site-header .mega .mm-faixa { padding-top: 16px; margin-top: 18px; }
/* Primeira dobra: selos com a mesma largura dos dois botões (começam no WhatsApp e terminam no "Ligar agora") */
.m-cta-bloco { display: inline-flex; flex-direction: column; max-width: 100%; }
@media (max-width: 640px) {
  .m-cta-bloco { display: flex; width: 100%; }
}
/* Rodapé: logo à esquerda, menu centralizado na página, botão à direita; os três no mesmo centro vertical */
@media (min-width: 1101px) {
  .m-rodape-topo { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; }
  .m-rodape-logo { margin-right: 0; justify-self: start; }
  .m-rodape nav { margin-right: 0; justify-self: center; }
  .m-rodape .btn-orcamento { margin-left: 0; justify-self: end; }
  .m-rodape nav ul { align-items: center; }
}
/* Barra fixa do celular no design system do Mestre: cápsulas, WhatsApp laranja em degradê e "Ligar agora" com contorno azul-marinho */
@media (max-width: 1100px) {
  .mobile-bar { background: rgba(255, 252, 247, .97); border-top: 1px solid #eae7e1; box-shadow: 0 -8px 24px rgba(1, 52, 105, .08); padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); }
  .mb-btn { height: 50px; border-radius: 999px; font-size: 16px; font-weight: 600; letter-spacing: 0; text-transform: none; }
  .mb-wa { background: linear-gradient(90deg, #feb202 0%, #f5a800 100%); box-shadow: 0 8px 18px rgba(254, 178, 2, .28); }
  .mb-wa:hover { background: linear-gradient(90deg, #f5a800 0%, #e89f00 100%); }
  .mb-call { background: #fff; color: #013469; border: 1.5px solid #013469; }
  .mb-call:hover { background: #013469; color: #fff; }
  .mb-call svg { width: 18px; height: 18px; }
}
/* "Ligar agora" da barra do celular: azul-marinho cheio; ao passar o dedo/mouse, um azul um pouco mais escuro (mesma animação do WhatsApp) */
@media (max-width: 1100px) {
  .mb-btn { transition: background .15s ease, box-shadow .15s ease; }
  .mb-call { background: #013469; color: #fff; border: 0; box-shadow: 0 8px 18px rgba(1, 52, 105, .22); }
  .mb-call:hover, .mb-call:active { background: #012a55; color: #fff; }
  .mb-wa:active { background: linear-gradient(90deg, #f5a800 0%, #e89f00 100%); }
}

/* ===== Cabeçalho no celular/tablet (padrão da Central): faixa azul em cima, logo sem slogan maior, botão WhatsApp e menu ===== */
.m-topbar { display: none; }
@media (max-width: 1100px) {
  .m-topbar { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 8px 16px; background: #013469; color: #dfe6f3; font-size: 14px; font-weight: 500; }
  .m-topbar .ico { width: 16px; height: 16px; color: #feb202; flex: none; }
  .site-header .header-inner { padding-top: 10px; padding-bottom: 10px; gap: 12px; align-items: center; }
  .site-header .brand-logo-slogan { width: auto; height: 46px; }
  .site-header .main-nav { gap: 10px; }
  .site-header .btn-orcamento { display: inline-flex; height: 42px; padding: 0 16px; font-size: 15px; gap: 8px; margin-left: 0; }
  .site-header .btn-orcamento .wa-icon { width: 18px; height: 18px; }
  .site-header .btn-orcamento .cta-txt { display: none; }
  .site-header .menu-toggle { width: 44px; height: 44px; border-radius: 12px; border-color: #eae7e1; }
}
@media (max-width: 640px) {
  .site-header .btn-orcamento { display: inline-flex; }
}
@media (max-width: 340px) {
  .site-header .brand-logo-slogan { height: 40px; }
  .site-header .btn-orcamento { padding: 0 12px; font-size: 14px; }
}
@media (max-width: 1100px) { .site-header .brand-logo-slogan { height: 54px; } }
@media (max-width: 340px) { .site-header .brand-logo-slogan { height: 46px; } }

/* ===== Contraste (WCAG AA, 4,5:1) — 2026-10-15 =====
   Laranja vivo (#feb202/#feb202) fica só em ícones, chamas, traços e detalhes (não têm texto).
   Onde há texto: degradê #feb202 → #f5a800 com texto branco (4,6 a 5,8:1) e #013469 para texto laranja (5,0:1). */
:root { --laranja-texto: #013469; --laranja-btn-a: #feb202; --laranja-btn-b: #f5a800; --cinza-texto: #5e6478; }
.btn-orcamento, .m-btn, .mb-wa, .m-num { background: linear-gradient(90deg, var(--laranja-btn-a) 0%, var(--laranja-btn-b) 100%); }
.btn-orcamento:hover, .m-btn:hover, .mb-wa:hover, .mb-wa:active { background: linear-gradient(90deg, #b8420a 0%, #a2320a 100%); }
.btn-orcamento, .m-btn { box-shadow: 0 8px 20px rgba(184, 58, 11, .26); }
.m-tabela thead th:last-child { background: linear-gradient(90deg, var(--laranja-btn-b) 0%, var(--laranja-btn-a) 100%); }
.m-card-link, .m-card-link:hover, .m-bairros summary, .mm-rotulo { color: var(--laranja-texto); }
.mm-faixa a, .mm-chips a:hover { color: var(--laranja-texto) !important; }
.m-card-link:hover, .mm-faixa a:hover { color: #0b4a8c !important; }
/* cinzas: rodapé, selo do responsável e exemplos dos campos */
.m-rodape-base, .m-rodape-legal a { color: var(--cinza-texto); }
.m-campo input::placeholder, .m-campo textarea::placeholder { color: #6b7186; }

/* ===== Opção C aprovada (2026-10-15): laranja vivo da chama com texto branco GRANDE e em NEGRITO =====
   WCAG: texto a partir de 18,66 px em negrito (700) precisa de contraste 3:1. #feb202 = 3,2:1 e #f5a800 = 3,9:1 com branco.
   Por isso todo texto branco sobre laranja tem no mínimo 19 px e peso 700, em qualquer tamanho de tela. */
:root { --laranja-btn-a: #feb202; --laranja-btn-b: #f5a800; }
.btn-orcamento, .m-btn, .mb-wa, .m-num { background: linear-gradient(90deg, #feb202 0%, #f5a800 100%); font-weight: 700; }
.btn-orcamento:hover, .m-btn:hover, .mb-wa:hover, .mb-wa:active { background: linear-gradient(90deg, #e8530f 0%, #d8410f 100%); }
.btn-orcamento, .m-btn { box-shadow: 0 8px 20px rgba(254, 178, 2, .28); }
.m-tabela thead th:last-child { background: linear-gradient(90deg, #f5a800 0%, #feb202 100%); }
.m-tabela thead th { font-weight: 700; }
/* tamanhos mínimos do texto branco sobre laranja */
.btn-orcamento, .m-btn, .mb-wa, .m-num, .m-tabela thead th, .site-header .mega .mm-cta { font-size: max(19px, 1em) !important; }
@media (min-width: 1101px) {
  .m-acoes .m-btn, .m-btn-sec { font-size: max(19px, calc(var(--u) * 15)) !important; }
  .m-gas .m-btn-lg { font-size: max(19px, calc(var(--u) * 16.5)) !important; }
  .m-form-painel .m-btn-form { font-size: max(19px, calc(var(--u) * 15.5)) !important; height: max(52px, calc(var(--u) * 44)); }
  .btn-orcamento { font-size: 19px !important; height: max(46px, calc(var(--u) * 36)); padding: 0 22px; }
  .m-num { font-size: max(19px, calc(var(--u) * 15)) !important; width: max(36px, calc(var(--u) * 31)); height: max(36px, calc(var(--u) * 31)); }
  .m-tabela thead th { font-size: max(19px, calc(var(--u) * 12.5)) !important; height: max(52px, calc(var(--u) * 34)); }
  .site-header .mega .mm-cta { height: 50px !important; }
}
@media (max-width: 1100px) {
  .site-header .btn-orcamento { font-size: 19px !important; padding: 0 14px; height: 44px; gap: 6px; }
  .mb-btn { font-size: 19px; }
  .mb-call { font-weight: 700; }
  .m-tabela thead th { font-size: 19px !important; }
  .m-num { width: 38px; height: 38px; font-size: 19px !important; }
  .site-header .brand-logo-slogan { height: 46px; }
}
@media (max-width: 370px) {
  .site-header .brand-logo-slogan { height: 40px; }
  .site-header .btn-orcamento { padding: 0 12px; }
  .site-header .main-nav { gap: 8px; }
}

/* ===== Home reestruturada pelo plano docs/03 (2026-10-15) ===== */
/* Resumo (GEO): altura livre e data de atualização */
.m-tranquilidade { height: auto; }
.m-atualizado { margin-top: 12px; font-size: 13px; color: var(--cinza-texto); }
.m-checks li { line-height: 1.35; }
/* Guia de decisão: tabela de 3 colunas e critérios de consertar ou trocar */
.m-tabela-guia thead th:nth-child(2) { background: linear-gradient(90deg, #f5a800 0%, #fcae00 100%); }
.m-tabela-guia thead th:last-child { background: linear-gradient(90deg, #fcae00 0%, #feb202 100%); }
.m-tabela-guia td a { color: var(--laranja-texto); font-weight: 600; }
.m-tabela-guia td a:hover { color: #0b4a8c; }
.m-trocar h3 { font-weight: 800; color: #013469; letter-spacing: -0.015em; }
.m-criterios { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.m-criterios li { display: flex; flex-direction: column; gap: 6px; background: #fff; box-shadow: 0 3px 14px rgba(120, 90, 60, .08); border-top: 3px solid #feb202; }
.m-criterios strong { color: #013469; font-weight: 700; }
.m-criterios span { color: #2a2f4d; }
.m-trocar-nota { margin: 0; color: #2a2f4d; }
.m-trocar-nota a { color: var(--laranja-texto); font-weight: 600; }
/* Segurança: lista dos 4 passos */
.m-passos-gas { list-style: none; counter-reset: passo; display: grid; }
.m-passos-gas li { counter-increment: passo; display: grid; grid-template-columns: auto 1fr; align-items: start; color: #1f2a4a; }
.m-passos-gas li::before { content: counter(passo); display: grid; place-items: center; border-radius: 50%; background: #013469; color: #fff; font-weight: 700; }
/* Preço: tabela de fatores com texto à esquerda */
.m-preco-tabela td { white-space: normal !important; text-align: left; }
.m-preco-tabela thead th:last-child { text-align: left; }
.m-preco h2 span { display: block; }
/* Área atendida: cartão em HTML sobre o mapa e lista de bairros em texto */
.m-poa-media { position: relative; }
.m-mapa-cartao { position: absolute; left: 51.5%; top: 58%; right: 6.5%; bottom: 7%; margin: 0; display: flex; align-items: center; background: #fff; border-radius: 14px; box-shadow: 0 10px 28px rgba(1, 52, 105, .14); color: #2a3550; }
.m-mapa-cartao strong { display: block; color: #013469; font-weight: 700; }
.m-mapa-cartao .mi { color: #feb202; --ic-laranja: #feb202; flex: none; }
.m-bairros-lista p { margin: 0 0 8px; color: #2a2f4d; line-height: 1.5; }
.m-bairros-lista strong { color: #013469; }
/* FAQ: título mais longo (palavra-chave) em tamanho menor */
.m-faq h2 span, .m-form h2 span { display: block; }

@media (min-width: 1101px) {
  .m-tranquilidade { padding-bottom: calc(var(--u) * 30); }
  .m-tranquilidade p { max-width: calc(var(--u) * 450); }
  .m-checks li { min-height: calc(var(--u) * 29); height: auto; padding: calc(var(--u) * 4) 0; }
  .m-tabela-guia thead th:first-child { width: 26%; }
  .m-tabela-guia thead th:nth-child(2) { width: 50%; padding-left: calc(var(--u) * 30); }
  .m-tabela-guia td { padding-left: calc(var(--u) * 30); }
  .m-trocar { margin-top: calc(var(--u) * 28); }
  .m-trocar h3 { font-size: calc(var(--u) * 20); margin-bottom: calc(var(--u) * 12); }
  .m-criterios { gap: calc(var(--u) * 14); }
  .m-criterios li { padding: calc(var(--u) * 14) calc(var(--u) * 16); border-radius: calc(var(--u) * 10); }
  .m-criterios strong { font-size: calc(var(--u) * 14); }
  .m-criterios span { font-size: calc(var(--u) * 12.5); line-height: calc(var(--u) * 17.5); }
  .m-trocar-nota { margin-top: calc(var(--u) * 14); font-size: calc(var(--u) * 12.5); }
  .m-gas { height: auto; min-height: calc(var(--u) * 426); padding-bottom: calc(var(--u) * 36); }
  .m-gas-texto { padding-top: calc(var(--u) * 52); max-width: calc(var(--u) * 892); }
  .m-gas h2 { font-size: calc(var(--u) * 46); line-height: calc(var(--u) * 44); }
  .m-gas h2 span { display: block; }
  .m-passos-gas { gap: calc(var(--u) * 9); margin: calc(var(--u) * 18) 0 0; max-width: calc(var(--u) * 380); }
  .m-passos-gas li { gap: calc(var(--u) * 10); font-size: calc(var(--u) * 13.5); line-height: calc(var(--u) * 19); }
  .m-passos-gas li::before { width: calc(var(--u) * 20); height: calc(var(--u) * 20); font-size: calc(var(--u) * 11); }
  .m-gas .m-btn-lg { margin-top: calc(var(--u) * 22); }
  .m-preco-tabela tbody th, .m-preco-tabela tbody td { height: auto; padding-top: calc(var(--u) * 9); padding-bottom: calc(var(--u) * 9); line-height: calc(var(--u) * 17); }
  .m-mapa-cartao { gap: calc(var(--u) * 12); padding: 0 calc(var(--u) * 16); font-size: calc(var(--u) * 11.5); line-height: calc(var(--u) * 15); }
  .m-mapa-cartao strong { font-size: calc(var(--u) * 15); margin-bottom: calc(var(--u) * 3); }
  .m-mapa-cartao .mi { width: calc(var(--u) * 30); height: calc(var(--u) * 30); }
  .m-poa-media { height: calc(var(--u) * 284); width: calc(var(--u) * 532 + (100% - var(--u) * 1024) / 2); }
  .m-faq h2 { font-size: calc(var(--u) * 32); line-height: calc(var(--u) * 36); }
}
@media (max-width: 1100px) {
  .m-tranquilidade { padding: 44px 0; }
  .m-tabela-guia thead th, .m-tabela-guia td, .m-tabela-guia tbody th { padding: 12px 14px; }
  .m-trocar { margin-top: 28px; }
  .m-trocar h3 { font-size: 22px; margin-bottom: 14px; }
  .m-criterios { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .m-criterios li { padding: 16px; border-radius: 12px; }
  .m-criterios strong { font-size: 17px; }
  .m-criterios span { font-size: 15.5px; line-height: 1.45; }
  .m-trocar-nota { margin-top: 16px; font-size: 16px; line-height: 1.5; }
  .m-gas h2 span { display: inline; }
  .m-passos-gas { gap: 10px; margin: 18px 0 0; }
  .m-passos-gas li { gap: 12px; font-size: 17px; line-height: 1.45; }
  .m-passos-gas li::before { width: 28px; height: 28px; font-size: 15px; }
  .m-mapa-cartao { left: auto; right: 12px; top: auto; bottom: 12px; padding: 12px 16px; gap: 10px; font-size: 14px; line-height: 1.35; max-width: 280px; }
  .m-mapa-cartao strong { font-size: 16px; }
  .m-mapa-cartao .mi { width: 28px; height: 28px; }
  .m-faq h2 { font-size: clamp(28px, 4.6vw, 38px); }
}
@media (max-width: 640px) {
  .m-criterios { grid-template-columns: 1fr; }
  .m-tabela-guia { min-width: 560px; }
}
@media (min-width: 1101px) {
  .m-poa .m-poa-media { position: absolute; top: 0; right: 0; }
  .m-etapas p span { display: inline; }
}
.m-preco-tabela tbody td { text-align: left; }
@media (min-width: 1101px) {
  .m-poa h2 { font-size: calc(var(--u) * 37); line-height: calc(var(--u) * 37); }
}
/* Guia de decisão no celular: tabela de 2 colunas no estilo da tabela de preço.
   Coluna 1 = situação; coluna 2 = causas possíveis + serviço indicado (link) logo abaixo. */
@media (max-width: 640px) {
  .m-tabela-wrap:has(.m-tabela-guia) { overflow: visible; }
  .m-tabela-guia { display: block; min-width: 0 !important; width: 100% !important; background: #fff; box-shadow: 0 6px 22px rgba(20, 30, 60, .07); border-radius: 12px; overflow: hidden; }
  .m-tabela-guia thead, .m-tabela-guia tbody { display: block; }
  .m-tabela-guia tr { display: grid; grid-template-columns: 38% 62%; }
  .m-tabela-guia thead th, .m-tabela-guia tbody th, .m-tabela-guia tbody td { width: auto !important; height: auto !important; background: #fff !important; padding: 12px 14px !important; vertical-align: top; }
  .m-tabela-guia thead th { background: #f5f5f4 !important; color: #013469 !important; border-radius: 0 !important; }
  .m-tabela-guia thead th:nth-child(2) { grid-column: 2; }
  .m-tabela-guia thead th:nth-child(3) { display: none; }
  .m-tabela-guia tbody th { grid-column: 1; grid-row: 1 / span 2; display: flex; align-items: center; border-top: 1px solid #ececea; }
  .m-tabela-guia tbody td:nth-child(2) { grid-column: 2; padding-bottom: 2px !important; border-top: 1px solid #ececea; border-left: 1px solid #ececea; }
  .m-tabela-guia tbody td:nth-child(3) { grid-column: 2; padding-top: 0 !important; border-left: 1px solid #ececea; }
  .m-tabela-guia thead th + th { border-left: 1px solid #ececea; }
  .m-tabela-guia tbody td:nth-child(3)::before { content: "Serviço: "; color: #5e6478; }
  .m-tabela-guia tbody td[data-rotulo]:nth-child(3)::before { content: attr(data-rotulo) ": "; }
  .m-tabela-guia tbody td:nth-child(3) a { font-weight: 600; }
}
@media (max-width: 1100px) {
   .m-faq-grid, .m-form-grid { grid-template-columns: minmax(0, 1fr); }
}
/* Consertar ou trocar: cada cartão dá a resposta */
.m-trocar-lead { color: #2a2f4d; margin: 0 0 14px; }
.m-veredito { align-self: flex-start; font-style: normal; font-weight: 700; color: #013469; background: #fff3cc; border-radius: 999px; padding: 3px 12px; font-size: 14px; }
.m-veredito-conserte { color: #073b75; background: #e6ecf7; }
@media (min-width: 1101px) {
  .m-trocar-lead { font-size: calc(var(--u) * 13.5); line-height: calc(var(--u) * 19); max-width: calc(var(--u) * 720); margin-bottom: calc(var(--u) * 14); }
  .m-veredito { font-size: max(14px, calc(var(--u) * 11.5)); padding: calc(var(--u) * 2) calc(var(--u) * 10); }
}
@media (max-width: 1100px) { .m-trocar-lead { font-size: 16.5px; line-height: 1.5; } }
/* Topo: frase abaixo dos botões + etiqueta de números (como na Central) */
.m-hero-micro { margin: 0; color: #4a5470; font-weight: 600; }
.m-hero-numeros { display: flex; justify-content: space-between; align-items: center; margin: 0; background: #013469; color: #c9d3e6; }
.m-hero-numeros span { display: flex; flex-direction: column; }
.m-hero-numeros span + span { text-align: right; }
.m-hero-numeros strong { color: #fff; font-weight: 800; letter-spacing: -0.01em; }
@media (min-width: 1101px) {
  .m-hero { height: auto; min-height: calc(var(--u) * 441); }
  .m-hero-texto { padding-top: calc(var(--u) * 125.2); padding-bottom: calc(var(--u) * 34); }
  .m-cta-bloco { width: max-content; }
  .m-hero-micro { margin-top: calc(var(--u) * 11); font-size: max(14px, calc(var(--u) * 11.5)); }
  .m-hero-numeros { margin-top: calc(var(--u) * 18); padding: calc(var(--u) * 11) calc(var(--u) * 18); border-radius: calc(var(--u) * 10); font-size: max(13px, calc(var(--u) * 10.5)); }
  .m-hero-numeros strong { font-size: calc(var(--u) * 19); line-height: 1.15; }
}
@media (max-width: 1100px) {
  .m-hero-micro { margin-top: 12px; font-size: 15px; }
  .m-hero-numeros { margin-top: 20px; padding: 14px 18px; border-radius: 12px; font-size: 14px; max-width: 520px; }
  .m-hero-numeros strong { font-size: 24px; line-height: 1.15; }
}
.m-hero-numeros { gap: 16px; }
@media (max-width: 640px) {
  .m-hero-numeros { font-size: 13px; line-height: 1.3; padding: 14px 16px; }
  .m-hero-numeros strong { font-size: 22px; }
}
/* Etiqueta de números com o mesmo arredondamento dos botões (pílula) */
.m-hero-numeros { border-radius: 999px !important; }
@media (min-width: 1101px) { .m-hero-numeros { padding-left: calc(var(--u) * 26) !important; padding-right: calc(var(--u) * 26) !important; } }
@media (max-width: 1100px) { .m-hero-numeros { padding-left: 24px !important; padding-right: 24px !important; } }
/* Faixa azul no celular: 2 colunas, ícone à esquerda do texto */
@media (max-width: 640px) {
  .m-faixa-lista { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 12px; row-gap: 18px; padding: 20px 0; }
  .m-faixa-lista li { flex-direction: row; align-items: center; gap: 8px; padding-left: 0; font-size: 13.5px; line-height: 1.3; }
  .m-faixa .mi { width: 26px; height: 26px; flex: none; }
}
@media (max-width: 380px) {
  .m-faixa-lista { column-gap: 10px; }
  .m-faixa-lista li { gap: 7px; font-size: 12.5px; }
  .m-faixa .mi { width: 24px; height: 24px; }
}
/* "Atualizado em": menor e mais discreto (cinza no limite do contraste AA) */
.m-tranquilidade p.m-atualizado, p.m-atualizado { font-size: 12.5px !important; line-height: 1.4 !important; color: #6b7185 !important; font-weight: 400; margin-top: 10px; }

/* =====================================================================
   ESCALA TIPOGRÁFICA ÚNICA (15/10/2026) — regra do design system.
   Cada tipo de texto tem UM tamanho e UM peso no site inteiro.
   Computador: unidades da prancha (--u; valores em px a 1440 px de largura).
   Celular/tablet: px fixos. Botões ficam fora (regra de contraste ≥ 19 px/700).
   ===================================================================== */
:root {
  --t-h1: calc(var(--u) * 53.5);   /* 75 px — título da página (H1)            */
  --t-h2: calc(var(--u) * 37);     /* 52 px — título de seção (H2)             */
  --t-h3: calc(var(--u) * 17);     /* 24 px — título de cartão/etapa (H3)      */
  --t-h4: calc(var(--u) * 14);     /* 20 px — subtítulo, pergunta, destaque    */
  --t-lead: calc(var(--u) * 15);   /* 21 px — texto de abertura da seção       */
  --t-body: calc(var(--u) * 12.5); /* 17,6 px — texto corrido, listas, tabelas */
  --t-small: calc(var(--u) * 11);  /* 15,5 px — links de cartão, notas, rótulos */
  --t-caption: max(13px, calc(var(--u) * 9.5)); /* 13,4 px — data, legal, consentimento */
}
@media (max-width: 1100px) {
  :root { --t-h1: clamp(38px, 9vw, 56px); --t-h2: clamp(28px, 6.4vw, 38px); --t-h3: 21px; --t-h4: 18px; --t-lead: 18px; --t-body: 16px; --t-small: 14.5px; --t-caption: 13px; }
}

/* H1 e H2: peso 800 */
main .m-hero h1 { font-size: var(--t-h1) !important; font-weight: 800 !important; line-height: 1.02 !important; }
main section h2 { font-size: var(--t-h2) !important; font-weight: 800 !important; line-height: 1.08 !important; }

/* H3: títulos de cartão, etapa e subseção — peso 700 */
main .m-card h3, main .m-card h3 a, main .m-etapas h3, main .m-trocar h3, main .m-hero-numeros strong {
  font-size: var(--t-h3) !important; font-weight: 700 !important; line-height: 1.2 !important; }
main .m-hero-numeros strong { font-weight: 800 !important; }

/* H4: perguntas do FAQ, critérios, faixa azul, marcas, cabeçalhos de tabela */
main .faq-item summary, main .faq-item summary span, main .m-criterios strong, main .m-mapa-cartao strong, main .m-chips a {
  font-size: var(--t-h4) !important; line-height: 1.3 !important; }
main .faq-item summary span { font-weight: 600 !important; }
main .m-criterios strong, main .m-mapa-cartao strong, main .m-chips a { font-weight: 700 !important; }
main .m-faixa-lista li { font-size: var(--t-h4) !important; font-weight: 400 !important; line-height: 1.35 !important; }

/* Lead: o parágrafo que abre cada seção — peso 400 */
main .m-hero-lead, main .m-titulo p, main .m-resp-lead, main .m-preco-lead, main .m-tranquilidade-grid > div > p:not(.m-atualizado) {
  font-size: var(--t-lead) !important; font-weight: 400 !important; line-height: 1.5 !important; }

/* Corpo: texto corrido, listas, tabelas, respostas — peso 400 */
main .m-card p, main .m-etapas p, main .m-checks li, main .m-criterios span, main .m-trocar-lead, main .m-trocar-nota,
main .m-tabela td, main .m-tabela tbody th, main .m-preco-tabela td, main .m-preco-tabela tbody th, main .m-passos-gas li,
main .faq-answer p, main .m-provas li, main .m-preco-nota, main .m-bairros, main .m-bairros p, main .m-mapa-cartao span,
main .m-form-painel label, main .m-form-painel input, main .m-form-painel select, main .m-form-painel textarea {
  font-size: var(--t-body) !important; font-weight: 400 !important; line-height: 1.55 !important; }
main .m-tabela tbody th, main .m-preco-tabela tbody th, main .m-form-painel label { font-weight: 600 !important; }
main .m-mapa-cartao span strong { display: block; }

/* Pequeno: links de cartão, frase do topo, notas, selos de veredito, rótulos */
main .m-card-link, main .m-hero-micro, main .m-marcas-nota, main .m-veredito, main .m-hero-numeros span, main .m-bairros summary {
  font-size: var(--t-small) !important; line-height: 1.4 !important; }
main .m-card-link, main .m-hero-micro, main .m-veredito, main .m-bairros summary { font-weight: 600 !important; }
main .m-marcas-nota, main .m-hero-numeros span { font-weight: 400 !important; }

/* Legenda: data de atualização, consentimento, rodapé legal */
main .m-atualizado, main .m-consent, .site-footer p {
  font-size: var(--t-caption) !important; font-weight: 400 !important; line-height: 1.45 !important; }
main .m-tranquilidade p.m-atualizado, main .m-tranquilidade p.m-atualizado time { font-size: var(--t-caption) !important; }
main .m-tabela thead th, main .m-preco-tabela thead th { font-size: max(19px, var(--t-h4)) !important; font-weight: 700 !important; }
/* Botões de ação: um só tamanho (≥ 19 px, 700 — contraste do texto branco no laranja) */
:root { --t-btn: max(19px, calc(var(--u) * 15)); }
@media (max-width: 1100px) { :root { --t-btn: 19px; } }
main .m-btn, main .m-btn-sec { font-size: var(--t-btn) !important; font-weight: 700 !important; }
/* Exceção: faixa azul em 2 colunas no celular usa tamanho compacto para caber em 2 linhas */
@media (max-width: 640px) { main .m-faixa-lista li { font-size: 13.5px !important; } }
@media (max-width: 380px) { main .m-faixa-lista li { font-size: 12.5px !important; } }
/* Guia no celular: cabeçalho com as mesmas cores do computador (azul + laranja, texto branco) */
@media (max-width: 640px) {
  .m-tabela-guia thead th { color: #fff !important; }
  .m-tabela-guia thead th:first-child { background: linear-gradient(90deg, #012a55 0%, #073b75 100%) !important; }
  .m-tabela-guia thead th:nth-child(2) { background: linear-gradient(90deg, #f5a800 0%, #feb202 100%) !important; border-left: 0 !important; }
}
/* Consertar ou trocar: cartões no mesmo padrão dos cartões de serviço
   (fundo branco, sombra leve, chama do logo no fundo, ícone de duas cores; indicação no fim) */
.m-criterios li { position: relative; overflow: hidden; border-top: 0 !important; background: #fefefe; box-shadow: 0 2px 14px rgba(120, 90, 60, .07); }
.m-criterios li::after { content: ""; position: absolute; pointer-events: none; z-index: 0; opacity: .32; }
.m-criterios li > * { position: relative; z-index: 1; }
.m-criterios .m-criterio-ico { display: block; line-height: 0; }
.m-criterios .m-veredito { margin-top: auto; }
@media (min-width: 1101px) {
  .m-criterios li { padding: calc(var(--u) * 16) calc(var(--u) * 18) calc(var(--u) * 18) calc(var(--u) * 20) !important; border-radius: calc(var(--u) * 8) !important; gap: calc(var(--u) * 6); }
  .m-criterios li::after { right: calc(var(--u) * -18); top: calc(var(--u) * 18); width: calc(var(--u) * 110); height: calc(var(--u) * 150); }
  .m-criterios .m-criterio-ico .mi { width: calc(var(--u) * 40); height: calc(var(--u) * 40); }
  .m-criterios .m-veredito { margin-top: calc(var(--u) * 6); }
}
@media (max-width: 1100px) {
  .m-criterios li { padding: 20px !important; border-radius: 12px !important; gap: 8px; }
  .m-criterios li::after { right: -20px; top: 20px; width: 120px; height: 160px; }
  .m-criterios .m-criterio-ico .mi { width: 44px; height: 44px; }
  .m-criterios .m-veredito { margin-top: 6px; }
}
/* Indicação sempre alinhada no pé do cartão */
.m-criterios li > span:not(.m-criterio-ico) { margin-bottom: 8px; }
main .m-criterios .m-veredito { margin-top: auto !important; }
/* Crédito do desenvolvedor no rodapé */
.site-footer .m-rodape-credito { width: 100%; text-align: center; margin: 6px 0 0; color: #5e6478; }
.site-footer .m-rodape-credito a { color: var(--laranja-texto); font-weight: 700; }
.site-footer .m-rodape-credito a:hover { color: #0b4a8c; text-decoration: underline; }
/* Rodapé no celular/tablet: logo, menu e botão centralizados */
@media (max-width: 1100px) {
  .m-rodape-topo { flex-direction: column; align-items: center; text-align: center; }
  .m-rodape-logo { margin: 0 auto !important; }
  .m-rodape nav { margin: 0 !important; }
  .m-rodape nav ul { justify-content: center; }
  .m-rodape .btn-orcamento { margin: 0 auto; }
}
/* Resumo com frases completas (bloco GEO, como na Central) */
.m-checks-resumo { display: grid; align-content: start; }
.m-checks-resumo li { height: auto !important; align-items: flex-start !important; }
.m-checks-resumo .ico { margin-top: .3em; }
.m-tranquilidade dfn { font-style: normal; font-weight: 700; color: #013469; }
@media (min-width: 1101px) {
  .m-checks-resumo { gap: calc(var(--u) * 10); padding-top: calc(var(--u) * 6); }
  .m-checks-resumo li { gap: calc(var(--u) * 14) !important; }
}
@media (max-width: 1100px) {
  .m-checks-resumo { gap: 12px; }
  .m-checks-resumo li { gap: 12px !important; }
}
/* Área atendida no celular: 3 provas lado a lado (ícone em cima, texto embaixo) */
@media (max-width: 640px) {
  main .m-poa .m-provas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; row-gap: 0; }
  main .m-poa .m-provas li { flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 0 6px !important; font-size: 13.5px !important; line-height: 1.3 !important; }
  main .m-poa .m-provas li + li { border-left: 1px solid #fdd76b; }
  main .m-poa .m-provas li > span > span { display: block; }
  main .m-poa .m-provas .mi { width: 34px; height: 34px; }
}
@media (max-width: 380px) { main .m-poa .m-provas li { font-size: 12.5px !important; } }
@media (max-width: 640px) { main .m-poa .m-provas { grid-template-columns: 1fr 1.25fr 1fr; } }
@media (max-width: 640px) {
  main .m-poa .m-provas { grid-template-columns: repeat(3, max-content); justify-content: space-between; }
  main .m-poa .m-provas li { padding: 0 !important; }
  main .m-poa .m-provas li + li { border-left: 0; }
}
/* Formulário: o fieldset não pode forçar largura mínima em telas estreitas */
.m-form-painel fieldset { min-width: 0; margin: 0; }
.m-form-painel input, .m-form-painel select, .m-form-painel textarea { max-width: 100%; box-sizing: border-box; }
@media (max-width: 1100px) { .m-form-painel fieldset { grid-template-columns: minmax(0, 1fr) !important; } .m-form-painel .m-campo { min-width: 0; } }
.m-etapas p a { color: var(--laranja-texto); font-weight: 600; }
.m-etapas p a:hover { color: #0b4a8c; }
/* Títulos das etapas em uma linha no computador ("Você entra em contato" passava 1 px da coluna) */
/* Etapas: o título quebra linha quando não cabe (com 4 cartões, "nowrap" fazia o texto sair do cartão; 31/10/2026)
   e o cartão tem o mesmo respiro dos dois lados. */
@media (min-width: 1101px) {
  .m-etapas h3 { white-space: normal; text-wrap: balance; }
  .m-etapas li { padding-right: calc(var(--u) * 22); }
}
/* Auditoria SSP (16/10/2026): figure do mapa, abertura da seção de segurança e parágrafos de fechamento */
figure.m-poa-media { margin: 0; }
main .m-gas-lead { color: #272742; font-size: var(--t-body) !important; line-height: 1.55 !important; margin: 0; }
main .m-fecho { text-align: center; color: #2a2f4d; font-size: var(--t-body) !important; line-height: 1.55 !important; margin: 0; }
main .m-fecho a { color: var(--laranja-texto); font-weight: 600; }
main .m-titulo p { max-width: 62ch; margin-left: auto; margin-right: auto; }
@media (min-width: 1101px) {
  main .m-gas-lead { margin-top: calc(var(--u) * 12); max-width: calc(var(--u) * 390); }
  main .m-fecho { margin-top: calc(var(--u) * 22); }
}
@media (max-width: 1100px) {
  main .m-gas-lead { margin-top: 14px; }
  main .m-fecho { margin-top: 22px; }
}
@media (min-width: 1101px) {
  .m-preco-grid > div:first-child, .m-faq-grid > div:first-child, .m-form-grid > div:first-child { padding-right: calc(var(--u) * 30); }
}
@media (min-width: 1101px) { #bairros .m-resp-lead { max-width: calc(var(--u) * 360); } }

/* Aviso de cookies (LGPD) no design system do Mestre: botões em pílula, laranja da chama com texto
   branco grande e em negrito, botão secundário com contorno azul-marinho, links e caixas em laranja. */
.cookie-banner { font-family: var(--font-body, Montserrat), sans-serif; border: 1px solid #ece6dc; border-radius: 18px; background: #fefcf8; box-shadow: 0 14px 40px rgba(1, 52, 105, .16); }
.cookie-banner .cookie-text { font-size: 15.5px; line-height: 1.5; color: #2a2f4d; }
.cookie-banner .cookie-text strong { color: #013469; font-weight: 700; }
.cookie-banner .cookie-text a { color: var(--laranja-texto); font-weight: 600; text-underline-offset: 2px; }
.cookie-banner .cookie-text a:hover { color: #0b4a8c; }
.cookie-banner .btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 24px; border-radius: 999px; font-family: inherit; font-size: 19px; font-weight: 700; line-height: 1; letter-spacing: 0; box-shadow: none; transition: background .15s, color .15s, border-color .15s; }
.cookie-banner .btn-primary { background: linear-gradient(90deg, #feb202 0%, #f5a800 100%); border: 0; color: #fff; box-shadow: 0 6px 16px rgba(254, 178, 2, .25); }
.cookie-banner .btn-primary:hover { background: linear-gradient(90deg, #f5a800 0%, #e89f00 100%); color: #fff; }
.cookie-banner .btn-outline { background: #fff; border: 1.5px solid #013469; color: #013469; }
.cookie-banner .btn-outline:hover { background: #013469; color: #fff; }
.cookie-banner .cookie-personalizar { font-family: inherit; font-size: 14.5px; color: #5e6478; }
.cookie-banner .cookie-personalizar:hover { color: var(--laranja-texto); }
.cookie-banner .cookie-prefs { border-top-color: #ece6dc; }
.cookie-banner .cookie-cat { font-size: 15px; color: #2a2f4d; }
.cookie-banner .cookie-cat strong { color: #013469; font-weight: 700; }
.cookie-banner .cookie-cat input { accent-color: #f5a800; }
@media (max-width: 760px) { .cookie-banner .btn { padding: 0 16px; } }
/* Formulário (computador): 3 provas em grade na largura do texto, ícone à esquerda e texto em 2 linhas */
@media (min-width: 1101px) {
  main .m-form .m-provas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: calc(var(--u) * 26); }
  main .m-form .m-provas li { padding: 0 0 0 calc(var(--u) * 14) !important; gap: calc(var(--u) * 10); font-size: max(14px, calc(var(--u) * 11.5)) !important; line-height: 1.35 !important; white-space: nowrap; }
  main .m-form .m-provas li:first-child { padding-left: 0 !important; border-left: 0; }
  main .m-form .m-provas li > span > span { display: block; }
  main .m-form .m-provas .mi { width: calc(var(--u) * 30); height: calc(var(--u) * 30); flex: none; }
}
@media (min-width: 1101px) {
  main .m-form-grid > div:first-child { padding-right: 0 !important; }
  main #formulario .m-resp-lead { max-width: calc(var(--u) * 362); }
  main .m-form .m-provas { grid-template-columns: repeat(3, auto); justify-content: space-between; width: calc(var(--u) * 393); max-width: calc(100% - var(--u) * 8); }
  main .m-form .m-provas li { padding-left: calc(var(--u) * 13) !important; padding-right: 0 !important; }
}
@media (min-width: 1101px) {
  main #formulario .m-resp-lead { max-width: calc(var(--u) * 374); }
  main .m-form .m-provas { width: calc(var(--u) * 374); max-width: none; }
  main .m-form .m-provas li { font-size: max(13.5px, calc(var(--u) * 11.5)) !important; }
}
/* Formulário (celular): as 3 provas em uma linha, na largura do texto, ícone à esquerda e texto em 2 linhas */
@media (max-width: 1100px) {
  main .m-form .m-provas { display: grid; grid-template-columns: repeat(3, max-content); justify-content: space-between; column-gap: 0; row-gap: 0; }
  main .m-form .m-provas li { padding: 0 0 0 10px !important; gap: 7px; font-size: 13.5px !important; line-height: 1.3 !important; white-space: nowrap; }
  main .m-form .m-provas li:first-child { padding-left: 0 !important; border-left: 0; }
  main .m-form .m-provas li + li { border-left: 1px solid #feb202; }
  main .m-form .m-provas li > span > span { display: block; }
  main .m-form .m-provas .mi { width: 26px; height: 26px; flex: none; }
}
@media (max-width: 380px) {
  main .m-form .m-provas li { font-size: 12.5px !important; gap: 5px; padding-left: 8px !important; }
  main .m-form .m-provas .mi { width: 22px; height: 22px; }
}
/* Campos do formulário no arredondamento do design system: pílula nos campos de uma linha (como os botões)
   e 18 px na caixa de texto (como os cartões). Seta própria no select para não encostar na curva. */
main .m-form-painel input, main .m-form-painel select { border-radius: 999px !important; padding-left: 20px !important; padding-right: 20px !important; }
main .m-form-painel textarea { border-radius: 18px !important; padding: 14px 20px !important; }
main .m-form-painel select { -webkit-appearance: none; appearance: none; padding-right: 46px !important; cursor: pointer;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6' fill='none' stroke='%23013469' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 18px center / 16px 16px; }
@media (min-width: 1101px) {
  main .m-form-painel input, main .m-form-painel select { height: max(44px, calc(var(--u) * 34)) !important; }
}
/* Cabeçalho no celular/tablet: sem botão de WhatsApp (já está no topo da página e na barra fixa) e logo maior */
@media (max-width: 1100px) {
  .site-header .nav-actions .btn-orcamento, .site-header .btn-orcamento { display: none !important; }
  .site-header .brand-logo-slogan { height: 74px !important; }
}
@media (max-width: 340px) { .site-header .brand-logo-slogan { height: 62px !important; } }
/* Primeira dobra no celular: frase e etiqueta de números mais discretas (legenda da escala) */
@media (max-width: 640px) {
  main .m-hero-micro { font-size: 13px !important; line-height: 1.4 !important; text-align: center; text-wrap: balance; margin-top: 14px; }
  main .m-hero-numeros { margin-top: 18px; padding: 12px 22px !important; gap: 10px; }
  main .m-hero-numeros strong { font-size: 20px !important; }
  main .m-hero-numeros span { font-size: 12px !important; line-height: 1.25 !important; white-space: nowrap; }
}
@media (max-width: 380px) {
  main .m-hero-numeros { padding: 11px 18px !important; }
  main .m-hero-numeros span { font-size: 11.5px !important; }
}
/* Frase da primeira dobra em uma linha, na largura exata dos botões (largura da tela menos 2 × 16 px) */
@media (max-width: 640px) {
  main .m-hero-micro { white-space: nowrap; text-align: center; font-size: min(14px, calc((100vw - 32px) / 28.3)) !important; text-wrap: nowrap; }
}
/* Frase da primeira dobra: tamanho calculado pela largura do próprio bloco dos botões (container query),
   não pela janela, para não passar do botão quando há barra de rolagem. Etiqueta na mesma largura dos botões. */
@media (max-width: 640px) {
  main .m-cta-bloco { container-type: inline-size; }
  main .m-hero-micro { font-size: min(14px, calc(100cqw / 28.6)) !important; }
  main .m-hero-numeros { max-width: none !important; }
}
/* Celular/tablet: títulos de seção que eram centralizados ficam alinhados à esquerda, como os demais blocos,
   com o traço laranja acima do título (mesmo padrão das seções de duas colunas). */
@media (max-width: 1100px) {
  main .m-titulo { text-align: left; display: flex; flex-direction: column; align-items: flex-start; }
  main .m-titulo .m-traco { order: -1; margin: 0 0 12px !important; }
  main .m-titulo p { margin-left: 0 !important; margin-right: 0 !important; max-width: none; }
  main .m-fecho { text-align: left; }
}
/* Chamas decorativas sempre atrás do conteúdo (texto e marcas por cima) */
.m-marcas::before, .m-marcas::after { z-index: 0; }
.m-marcas > .m-wrap { position: relative; z-index: 1; }
/* Mapa no celular: encostado no fim da seção (sem faixa vazia embaixo) e mais alto, para o pino e o cartão respirarem */
@media (max-width: 1100px) {
  main #bairros { padding-bottom: 0 !important; }
  main #bairros .m-poa-media { height: auto !important; aspect-ratio: 1064 / 566; max-height: none; margin-top: 28px; }
  main #bairros .m-poa-media img { object-position: center; }
}
/* Fechamento do resumo: na coluna da lista, abaixo dela */
main .m-resumo-fecho { grid-column: 2; margin: 14px 0 0; color: #2a2f4d; font-size: var(--t-body) !important; line-height: 1.55 !important; }
main .m-resumo-fecho a { color: var(--laranja-texto); font-weight: 600; }
@media (max-width: 1100px) { main .m-resumo-fecho { grid-column: auto; margin-top: 4px; } }

/* ===== Páginas de serviço (16/10/2026): mesmo design system da home ===== */
.m-migalhas .breadcrumb { padding: 10px 0; font-size: 13px; }
.m-migalhas .breadcrumb ol { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; color: #5e6478; }
.m-migalhas .breadcrumb li + li::before { content: "›"; margin-right: 6px; color: #9aa0b2; }
.m-migalhas .breadcrumb a { color: #5e6478; }
.m-migalhas .breadcrumb a:hover { color: var(--laranja-texto); }
.m-migalhas .breadcrumb [aria-current] { color: #013469; font-weight: 600; }
/* Topo do serviço: o cabeçalho não fica por cima da foto como na home */
@media (min-width: 1101px) {
  .m-hero-servico .m-hero-texto { padding-top: calc(var(--u) * 52) !important; padding-bottom: calc(var(--u) * 40); }
  .m-hero-servico h1 span { display: block; }
}
/* "O que verificar antes": cartões numerados */
.m-verificar { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; counter-reset: v; }
.m-verificar li { counter-increment: v; position: relative; display: flex; flex-direction: column; gap: 4px; background: #fff; border-radius: 14px; box-shadow: 0 2px 14px rgba(120, 90, 60, .07); padding: 16px 18px 16px 62px; }
.m-verificar li::before { content: counter(v); position: absolute; left: 18px; top: 16px; width: 30px; height: 30px; border-radius: 50%; background: #013469; color: #fff; font-weight: 700; font-size: 15px; display: grid; place-items: center; }
main .m-verificar strong { color: #013469; font-size: var(--t-h4) !important; font-weight: 700; line-height: 1.3; }
main .m-verificar span { color: #2a2f4d; font-size: var(--t-body) !important; line-height: 1.5 !important; }
/* Área atendida sem mapa */
.m-area { background: #fdfdfa; }
@media (min-width: 1101px) { .m-area { padding: calc(var(--u) * 40) 0 calc(var(--u) * 36); } .m-area .m-resp-lead { max-width: calc(var(--u) * 700); margin-top: calc(var(--u) * 10); } .m-area .m-traco { display: block; width: calc(var(--u) * 33); height: calc(var(--u) * 3); margin-bottom: calc(var(--u) * 10); } }
@media (max-width: 1100px) { .m-area { padding: 44px 0; } .m-area .m-resp-lead { margin-top: 12px; } }
.m-area .m-bairros { margin-top: 18px; }
/* Etapas no celular: número e ícone na mesma linha à esquerda, título e texto alinhados embaixo (sem vazio no topo) */
@media (max-width: 640px) {
  main .m-etapas { gap: 14px; }
  main .m-etapas li { display: grid; grid-template-columns: auto auto 1fr; align-items: center; column-gap: 14px; padding: 18px 20px 20px !important; min-height: 0 !important; height: auto !important; }
  main .m-etapas .m-num { position: static !important; transform: none !important; margin: 0 !important; grid-column: 1; }
  main .m-etapas .mi { grid-column: 2; width: 40px !important; height: 40px !important; margin: 0 !important; }
  main .m-etapas h3, main .m-etapas p { grid-column: 1 / -1; }
  main .m-etapas h3 { margin-top: 14px !important; }
}
/* Títulos no celular/tablet: sem quebras forçadas (os <span> em bloco são para a prancha do computador);
   o navegador equilibra as linhas para não sobrar espaço vazio no fim de nenhuma. */
@media (max-width: 1100px) {
  main h1 span, main h2 span { display: inline !important; }
  main h1, main h2, main h3 { text-wrap: pretty; }
}
/* Computador: títulos de seção (H2) também sem quebra forçada, preenchendo a linha (o H1 do topo mantém a quebra da prancha) */
@media (min-width: 1101px) {
  main h2 span { display: inline !important; }
  main h2 { text-wrap: pretty; }
}
@media (min-width: 1101px) {
  main .m-gas h2 { max-width: calc(var(--u) * 340); }
  main .m-poa h2 { max-width: calc(var(--u) * 400); }
}

/* ===== Modelos novos (17/10/2026): subserviço, ferramenta, blog, artigo, Sobre, Contato, legais ===== */
/* Topo sem foto (subserviço, ferramenta, blog, Sobre, Contato, obrigado, 404) */
.m-hero-sub { background: linear-gradient(180deg, #fdfdfa 0%, #faf6f0 100%); }
.m-hero-sub::after { content: ""; position: absolute; right: -40px; top: 20px; width: 260px; height: 340px; opacity: .25; pointer-events: none; }
@media (min-width: 1101px) {
  .m-hero.m-hero-sub { min-height: 0 !important; height: auto !important; }
  .m-hero-sub .m-hero-texto { padding-top: calc(var(--u) * 40) !important; padding-bottom: calc(var(--u) * 44) !important; max-width: calc(var(--u) * 640); }
}
@media (max-width: 1100px) { .m-hero.m-hero-sub { padding: 30px 0 36px; } .m-hero-sub::after { display: none; } }

/* Cartões em 3 colunas (junker) */
@media (min-width: 1101px) { .m-cards.m-cards-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Diagnóstico por sintoma */
.m-diag { display: grid; gap: 12px; margin-top: 24px; }
.m-diag-item { background: #fff; border-radius: 16px; box-shadow: 0 2px 14px rgba(120, 90, 60, .07); overflow: hidden; }
.m-diag-item summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 22px; font-weight: 700; color: #013469; font-size: var(--t-h4); }
.m-diag-item summary::-webkit-details-marker { display: none; }
.m-diag-item summary::after { content: "+"; color: var(--laranja-texto); font-size: 26px; line-height: 1; font-weight: 600; }
.m-diag-item[open] summary::after { content: "–"; }
.m-diag-urgente summary { color: #b3261e; }
.m-diag-corpo { padding: 0 22px 20px; }
.m-diag-testes { margin: 0 0 12px; padding-left: 22px; color: #2a2f4d; font-size: var(--t-body); line-height: 1.55; }
.m-diag-testes li + li { margin-top: 6px; }
.m-diag-resultado { margin: 0; color: #2a2f4d; font-size: var(--t-body); line-height: 1.6; }
.m-diag-resultado .m-veredito { display: inline-block; margin: 0 4px 0 0; }
.m-diag-resultado a, .m-artigo a, .m-canais a, .m-dados a { color: var(--laranja-texto); font-weight: 600; }
.m-artigo a.m-btn { color: #fff; } /* botão laranja dentro do artigo: texto sempre branco */

/* Artigo e páginas legais */
.m-artigo { background: #fdfdfa; padding: 28px 0 56px; }
.m-artigo-wrap { max-width: 760px !important; }
.m-artigo-topo { margin: 18px 0 18px; }
.m-artigo-cat { margin: 0 0 8px; font-size: var(--t-small); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.m-artigo-cat a { color: var(--laranja-texto); text-decoration: none; }
.m-artigo h1 { margin: 0; font-size: var(--t-h2); line-height: 1.08; font-weight: 800; color: #013469; letter-spacing: -0.025em; }
.m-artigo-meta { margin: 12px 0 0; color: #6b7185; font-size: var(--t-caption); }
.m-artigo-resposta { font-size: var(--t-lead); line-height: 1.55; color: #131d41; border-left: 4px solid #feb202; padding: 4px 0 4px 18px; margin: 0 0 26px; }
.m-artigo section { margin-top: 34px; }
.m-artigo h2 { font-size: var(--t-h3) !important; line-height: 1.25 !important; font-weight: 800; color: #013469; margin: 0 0 12px; }
.m-artigo p { color: #2a2f4d; font-size: var(--t-body); line-height: 1.65; margin: 0 0 14px; }
.m-artigo ul:not(.m-checks), .m-legal ol:not(.m-sumario ol) { color: #2a2f4d; font-size: var(--t-body); line-height: 1.65; padding-left: 22px; }
.m-artigo .m-tabela-wrap { margin: 16px 0; }
.m-artigo .m-verificar { margin: 14px 0 16px; }
.m-artigo-lista li { align-items: flex-start !important; }
.m-sumario { background: #fff; border-radius: 16px; box-shadow: 0 2px 14px rgba(120, 90, 60, .07); padding: 18px 22px; }
.m-sumario h2 { font-size: var(--t-h4) !important; margin: 0 0 8px !important; }
.m-sumario ol { margin: 0; padding-left: 20px; display: grid; gap: 4px; font-size: var(--t-body); }
.m-artigo-cta { background: #fff4ec; border-radius: 14px; padding: 14px 18px; }
.m-artigo-faq .m-faq-lista { margin-top: 14px; }
.m-artigo-final { margin-top: 40px; background: #013469; border-radius: 20px; padding: 26px; color: #dfe6f3; }
.m-artigo-final h2 { color: #fff !important; }
.m-artigo-final p { color: #dfe6f3; }
.m-artigo-final .m-acoes { margin: 16px 0 14px; display: flex; flex-wrap: wrap; gap: 12px; }
.m-artigo-final .m-btn-sec { background: #fff; color: #013469; border-color: #fff; }
.m-artigo-final .m-btn-sec:hover { background: #e8edf6; color: #013469; border-color: #e8edf6; }
.m-artigo-final .m-artigo-relacionados { font-size: var(--t-small); margin: 0; }
.m-artigo-final .m-artigo-relacionados a { color: #ffb48a; }
@media (max-width: 640px) { .m-artigo-final .m-acoes .m-btn, .m-artigo-final .m-acoes .m-btn-sec { width: 100%; } }

/* Blog: destaque */
.m-destaque { display: flex; flex-direction: column; gap: 8px; background: #fff; border-radius: 18px; box-shadow: 0 6px 22px rgba(120, 90, 60, .1); padding: 24px; text-decoration: none; color: #2a2f4d; align-self: start; }
.m-destaque strong { font-size: var(--t-h3); line-height: 1.2; color: #013469; }
.m-destaque:hover strong { color: var(--laranja-texto); }
.m-destaque .m-card-link { position: static !important; margin-top: 6px; }

/* Contato: canais */
.m-canais { font-style: normal; display: grid; gap: 12px; align-content: start; }
.m-canal { display: flex; align-items: center; gap: 14px; margin: 0; background: #fff; border-radius: 16px; box-shadow: 0 2px 14px rgba(120, 90, 60, .07); padding: 16px 18px; text-decoration: none; color: #2a2f4d; font-size: var(--t-body); }
.m-canal .mi { width: 34px; height: 34px; flex: none; color: #013469; --ic-laranja: #feb202; }
.m-canal span { display: flex; flex-direction: column; }
.m-canal strong { color: #013469; font-size: var(--t-h4); }
a.m-canal:hover strong { color: var(--laranja-texto); }

/* Sobre: dados da empresa */
.m-dados { display: grid; grid-template-columns: max-content 1fr; gap: 10px 22px; margin: 20px 0 0; font-size: var(--t-body); }
.m-dados dt { font-weight: 700; color: #013469; }
.m-dados dd { margin: 0; color: #2a2f4d; }
@media (max-width: 640px) { .m-dados { grid-template-columns: 1fr; gap: 2px; } .m-dados dd { margin-bottom: 10px; } }

/* 404 */
.m-links-404 { list-style: none; padding: 0; margin: 18px 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; }
.m-links-404 a { display: block; background: #fff; border-radius: 999px; padding: 12px 20px; box-shadow: 0 2px 14px rgba(120, 90, 60, .07); color: #013469; font-weight: 600; text-decoration: none; }
.m-links-404 a:hover { color: var(--laranja-texto); }
.m-area .m-acoes { margin-top: 18px; display: flex; flex-wrap: wrap; gap: 12px; }
/* Artigo: FAQ e tabela no tamanho da coluna de texto */
.m-artigo .m-faq-lista { display: grid; gap: 8px; }
.m-artigo .faq-item { background: #fff; box-shadow: 0 2px 12px rgba(120, 90, 60, .07); border: 0; border-radius: 12px; }
.m-artigo .faq-item summary { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 16px 20px; color: #013469; font-weight: 600; font-size: var(--t-h4); line-height: 1.3; }
.m-artigo .faq-item .mi { width: 18px !important; height: 18px !important; flex: none; color: #feb202; }
.m-artigo .faq-item[open] .mi { transform: rotate(45deg); }
.m-artigo .faq-answer { padding: 0 20px 16px; }
.m-artigo .faq-answer p { margin: 0; }
.m-artigo .m-tabela-wrap { width: 100% !important; margin: 16px 0 !important; }
.m-artigo .m-tabela { width: 100%; }
.m-artigo .m-tabela thead th, .m-artigo .m-tabela tbody th, .m-artigo .m-tabela tbody td { padding: 10px 14px !important; height: auto !important; font-size: var(--t-body) !important; }
.m-artigo .m-tabela thead th { font-size: max(19px, var(--t-h4)) !important; }
@media (min-width: 641px) { .m-artigo .m-tabela thead th:first-child { width: 30% !important; } } /* no celular a tabela vira grade de 2 colunas */
/* H1 das páginas de serviço com foto: quebra natural dentro da coluna de texto (não invade a foto) */
@media (min-width: 1101px) {
  main .m-hero-servico:not(.m-hero-sub) h1 { max-width: calc(var(--u) * 385); text-wrap: balance; }
  main .m-hero-servico:not(.m-hero-sub) h1 span { display: inline !important; }
}
/* Topo sem foto: alinhado à margem esquerda do conteúdo, com largura limitada só no texto */
@media (min-width: 1101px) {
  .m-hero-sub .m-hero-texto { max-width: none !important; }
  .m-hero-sub h1, .m-hero-sub .m-hero-lead { max-width: calc(var(--u) * 640); }
}
/* Menu com 7 itens (Ferramentas e Blog): logo sem encolher e espaço garantido antes do botão */
@media (min-width: 1101px) {
  .site-header .brand { flex: none; width: calc(var(--u) * 223); margin-right: auto !important; }
  .site-header .brand picture, .site-header .brand img { width: 100%; height: auto; }
  .site-header .nav-links { gap: calc(var(--u) * 22) !important; margin-right: calc(var(--u) * 20); }
}
@media (min-width: 1101px) {
  .site-header .brand { margin-right: calc(var(--u) * 30) !important; }
  .site-header .main-nav { flex: 1; display: flex; align-items: center; justify-content: flex-end; }
  .site-header .nav-links { margin-left: auto; }
}
/* Rodapé (computador) com 7 itens: logo e botão com largura fixa, menu centralizado no espaço entre eles */
@media (min-width: 1101px) {
  .m-rodape-topo { display: flex; align-items: center; gap: calc(var(--u) * 24); }
  .m-rodape-logo { flex: none; width: calc(var(--u) * 190) !important; margin-right: 0 !important; }
  .m-rodape nav { flex: 1; margin: 0 !important; display: flex; justify-content: center; }
  .m-rodape nav ul { gap: calc(var(--u) * 22) !important; }
  .m-rodape nav a { font-size: max(14px, calc(var(--u) * 11.5)) !important; white-space: nowrap; }
  .m-rodape .btn-orcamento { flex: none; margin-left: 0 !important; }
}
/* Bloco de resumo (computador): título na largura do parágrafo, sem invadir a lista da direita */
@media (min-width: 1101px) { main .m-tranquilidade-grid > div > h2 { max-width: calc(var(--u) * 430); } }

/* Cartões de serviço com foto (home): foto em cima, ícone de duas cores num selo branco sobreposto à foto */
.m-card.m-card-foto { height: auto !important; padding: 0 !important; display: flex; flex-direction: column; border-radius: 16px; }
.m-card.m-card-foto::after { top: auto; bottom: -10px; }
.m-card-img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.m-card-foto .m-card-ico { position: relative; z-index: 2; display: grid; place-items: center; width: 64px; height: 64px; margin: -32px 0 0 22px; background: #fff; border-radius: 16px; box-shadow: 0 6px 18px rgba(1, 52, 105, .14); }
.m-card-foto .m-card-ico .mi { width: 40px !important; height: 40px !important; }
.m-card-foto h3 { margin: 14px 22px 0 !important; }
.m-card-foto p { margin: 6px 22px 0 !important; flex: 1; }
.m-card-foto p span { display: inline !important; }
.m-card-foto .m-card-link { position: static !important; margin: 14px 22px 22px !important; }
@media (min-width: 1101px) { .m-cards { align-items: stretch; } }
.m-card-foto picture { display: block; }

/* Celular e tablet: cabeçalho e barra de botões translúcidos, efeito vidro (parecido com o "liquid glass" da Apple). */
@media (max-width: 1100px) {
  .site-header { background: rgba(255, 255, 255, .7); -webkit-backdrop-filter: saturate(180%) blur(18px); backdrop-filter: saturate(180%) blur(18px); border-bottom: 0; box-shadow: 0 4px 18px rgba(1, 52, 105, .06); }
  .site-header .menu-toggle { background: transparent; border-color: rgba(1, 52, 105, .14); }
  .mobile-bar { background: #fff; -webkit-backdrop-filter: saturate(180%) blur(18px); backdrop-filter: saturate(180%) blur(18px); border-top: 0; box-shadow: 0 -8px 24px rgba(1, 52, 105, .08); transition: background-color .35s ease; }
  .mobile-bar.rolando { background: rgba(255, 252, 247, .62); }
}

/* =====================================================================
   PÁGINAS LOCAIS (região, bairro, serviço na região) — 21/10/2026
   Painel de números do IBGE, gráfico de barras (bairro x cidade) e lista de bairros.
   ===================================================================== */
.m-numeros { background: #fdfdfa; }
.m-num-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 22px 0 0; padding: 0; list-style: none; }
.m-num-grid li { background: #fff; border-radius: 12px; box-shadow: 0 2px 12px rgba(120, 90, 60, .07); padding: 16px 18px; }
.m-num-grid strong { display: block; font-size: var(--t-h3); font-weight: 800; line-height: 1.1; color: var(--navy-900); }
.m-num-grid span { display: block; margin-top: 6px; font-size: var(--t-small); line-height: 1.35; color: var(--ink-3); }
.m-barras { margin: 26px 0 0; background: #fff; border-radius: 12px; box-shadow: 0 2px 12px rgba(120, 90, 60, .07); padding: 18px 20px; }
.m-barras figcaption { font-size: var(--t-h4); font-weight: 700; color: var(--navy-900); margin: 0 0 4px; }
.m-barras-leg { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0 0 12px; padding: 0; list-style: none; font-size: var(--t-caption); color: var(--ink-3); }
.m-barras-leg li::before { content: ""; display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; background: var(--orange-600); }
.m-barras-leg li + li::before { background: var(--blue-200); }
.m-barra { display: grid; grid-template-columns: minmax(0, 11em) minmax(0, 1fr); gap: 4px 14px; align-items: center; padding: 8px 0; border-top: 1px solid var(--border); }
.m-barra:first-of-type { border-top: 0; }
.m-barra > span:first-child { font-size: var(--t-small); font-weight: 600; color: var(--ink-2); }
.m-barra-par { display: grid; gap: 4px; }
.m-barra-linha { display: grid; grid-template-columns: minmax(0, 1fr) 4.2em; gap: 10px; align-items: center; }
.m-barra-trilho { height: 12px; border-radius: 6px; background: var(--bg-soft); overflow: hidden; }
.m-barra-valor { display: block; height: 100%; border-radius: 6px; background: var(--orange-600); }
.m-barra-linha + .m-barra-linha .m-barra-valor { background: var(--blue-200); }
.m-barra-num { font-size: var(--t-small); font-weight: 700; color: var(--navy-900); text-align: right; }
.m-barra-linha + .m-barra-linha .m-barra-num { font-weight: 400; color: var(--ink-3); }
.m-numeros .m-fonte, .m-links .m-fonte { margin: 14px 0 0; font-size: var(--t-caption); color: #5f6b80; line-height: 1.5; }
.m-links { background: #fff; }
.m-links-lista { display: flex; flex-wrap: wrap; gap: 10px; margin: 20px 0 0; padding: 0; list-style: none; }
.m-links-lista a { display: inline-block; padding: 10px 16px; border-radius: 999px; background: var(--bg-soft); color: var(--navy-900); font-size: var(--t-small); font-weight: 600; box-shadow: inset 0 0 0 1px var(--border); }
.m-links-lista a:hover { color: var(--orange-700); text-decoration: none; box-shadow: inset 0 0 0 1px var(--orange-200); }
@media (min-width: 1101px) { .m-numeros, .m-links { padding: calc(var(--u) * 40) 0 calc(var(--u) * 36); } .m-numeros .m-traco, .m-links .m-traco { display: block; width: calc(var(--u) * 33); height: calc(var(--u) * 3); margin-bottom: calc(var(--u) * 10); } }
@media (max-width: 1100px) { .m-numeros, .m-links { padding: 44px 0; } .m-num-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .m-barra { grid-template-columns: minmax(0, 1fr); } .m-barras { padding: 16px 14px; } }

/* 31/10/2026 (aprovado): transição do fundo claro para a foto, longa e suave (curva smoothstep), em todas as páginas com foto no topo */
@media (min-width: 1101px) {
  .m-hero-media::before { width: calc(var(--u) * 230); background: linear-gradient(90deg, #fdfdfa 0%, rgba(253,253,250,.97) 10%, rgba(253,253,250,.9) 20%, rgba(253,253,250,.78) 30%, rgba(253,253,250,.65) 40%, rgba(253,253,250,.5) 50%, rgba(253,253,250,.35) 60%, rgba(253,253,250,.22) 70%, rgba(253,253,250,.1) 80%, rgba(253,253,250,.03) 90%, rgba(253,253,250,0) 100%); }
}

/* =====================================================================================
   CENTRAL DE ELETRICISTAS (31/10/2026) — ajustes sobre o design system do Mestre.
   1) Amarelo do logo (#feb202) é a cor de ação: texto em cima dele é sempre azul #013469
      (branco no amarelo não passa no contraste AA; azul no amarelo dá 7,6:1).
   2) Ícones Lucide do sprite (<use href="#i-...">): traço, sem preenchimento.
   3) Menu do celular em <details> (sem JavaScript).
   4) Componentes da Central que o Mestre não tem: 8 serviços, 5 regiões, 3 etapas,
      preço com chamada, mini cartões, ficha do responsável técnico.
   ===================================================================================== */
svg.mi, svg.ico, svg.seta, svg.wa-icon { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
svg.ico { stroke-width: 2.2; }
.m-checks svg.ico { stroke-width: 3; }
.mi { color: #013469; }
.m-faixa .mi { color: #feb202; }

/* botões amarelos: texto e ícone azuis */
.btn-orcamento, .m-btn, .mb-wa, .m-num, .btn-orcamento:hover, .m-btn:hover, .mb-wa:hover { color: #013469 !important; }
.m-tabela thead th:not(:first-child) { color: #013469; }
.m-btn-azul { background: #013469 !important; color: #fff !important; box-shadow: 0 8px 20px rgba(1, 52, 105, .22) !important; }
.m-btn-azul:hover { background: #0b4a8c !important; color: #fff !important; }
.wa-icon { width: 1.1em; height: 1.1em; flex: none; }

/* links de texto: azul sublinhado com traço amarelo */
.m-card-link, .m-fecho a, .m-tabela-guia td a { color: #013469 !important; }
.m-fecho a, .m-tabela-guia td a { text-decoration: underline; text-decoration-color: #feb202; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.m-card-link .seta { color: #f5a800; }

/* menu do celular em <details> */
.menu-celular { display: none; }
.menu-celular summary { list-style: none; }
.menu-celular summary::-webkit-details-marker { display: none; }
.menu-celular[open] .menu-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-celular[open] .menu-toggle span:nth-child(2) { opacity: 0; }
.menu-celular[open] .menu-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
@media (max-width: 1100px) {
  .main-nav > .nav-links { display: none !important; }
  .menu-celular { display: block; }
  .menu-celular .menu-toggle { display: flex; }
  .menu-celular[open] > .nav-links { display: flex; }
  .site-header .header-inner { position: relative; }
}

/* cabeçalho no computador: o logo da Central é mais largo que alto */
@media (min-width: 1101px) {
  .site-header .brand-logo-slogan { width: calc(var(--u) * 170); }
  .site-header .brand { margin-right: auto; }
  .site-header .main-nav { flex: none; }
  .site-header .nav-links { gap: calc(var(--u) * 28); margin-right: calc(var(--u) * 28); }
  .m-hero-lead { max-width: calc(var(--u) * 420); }
}
@media (max-width: 1100px) { .site-header .brand-logo-slogan { height: 48px; width: auto; } }

/* serviços: 8 cartões sem foto (4 colunas) e 5 regiões */
.m-cards-4, .m-cards-5 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.m-cards-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.m-card { display: flex; flex-direction: column; height: auto !important; }
.m-card-link { position: static !important; margin-top: auto; padding: 16px 0 20px; }
.m-card-ico { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: #fff3cc; }
.m-card-ico .mi { width: 28px !important; height: 28px !important; }
.m-card-foto .m-card-ico { margin-top: -28px; border: 4px solid #fff; position: relative; }
.m-card-foto { padding: 0 !important; }
.m-card-foto > :not(img) { margin-left: 24px; margin-right: 24px; }
.m-card-foto .m-card-img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.m-bairros-curto { display: grid; gap: 4px; margin-top: 8px; font-size: var(--t-small); }
.m-bairros-curto a { color: #44536e; font-weight: 400; }
@media (min-width: 1101px) {
  .m-servicos { padding: calc(var(--u) * 48) 0 !important; }
  .m-card { padding: calc(var(--u) * 20) calc(var(--u) * 20) 0 !important; }
  .m-card-foto { padding: 0 !important; }
  .m-cards { margin-top: calc(var(--u) * 24); }
}
@media (max-width: 1100px) { .m-cards-4, .m-cards-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .m-cards-4, .m-cards-5 { grid-template-columns: 1fr; } }

/* seções com conteúdo diferente do Mestre: altura pelo conteúdo */
.m-tranquilidade, .m-gas, .m-poa, .m-preco, .m-como, .m-defeitos { height: auto !important; }
@media (min-width: 1101px) {
  .m-tranquilidade { padding: calc(var(--u) * 40) 0 !important; }
  .m-tranquilidade-grid { padding: 0 !important; align-items: center; gap: calc(var(--u) * 40); }
  .m-checks li { height: auto !important; padding: calc(var(--u) * 5) 0; }
  .m-manutencao .m-btn { margin: calc(var(--u) * 16) 0 0 !important; width: auto !important; padding: 0 calc(var(--u) * 24); }
  .m-defeitos { padding: calc(var(--u) * 48) 0 !important; }
  .m-gas { min-height: calc(var(--u) * 426); padding: calc(var(--u) * 48) 0 !important; }
  .m-gas-texto { padding-top: 0 !important; }
  .m-gas-texto > * { max-width: calc(var(--u) * 400); }
  .m-como { padding: calc(var(--u) * 48) 0 !important; }
  .m-preco { padding: calc(var(--u) * 48) 0 !important; }
  .m-poa { min-height: calc(var(--u) * 360); padding: calc(var(--u) * 48) 0 !important; }
  .m-cuidado .m-poa-media { height: 100% !important; width: calc(var(--u) * 420 + (100% - var(--u) * 1024) / 2) !important; }
  .m-cuidado .m-wrap > * { max-width: calc(var(--u) * 440); }
}

/* segurança: lista de passos e alerta */
.m-gas-alerta { display: flex; align-items: center; gap: 12px; margin-top: 24px !important; padding: 12px 16px; border-radius: 12px; background: #fff3cc; color: #013469 !important; font-weight: 600; }
.m-gas-alerta .ico { width: 22px; height: 22px; color: #013469; }
.m-passos-gas strong { color: #013469; }

/* como funciona: 3 etapas */
.m-etapas-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
@media (max-width: 1100px) { .m-etapas-3 { grid-template-columns: 1fr !important; } }

/* preço: chamada ao lado do texto */
.m-preco-acao { display: grid; justify-items: center; gap: 16px; padding: 32px 24px; border-radius: 16px; background: #fff; box-shadow: 0 6px 22px rgba(20, 30, 60, .07); text-align: center; }
.m-preco-acao .mi { width: 48px; height: 48px; color: #013469; }
.m-preco-acao-titulo { margin: 0; color: #013469; font-weight: 700; font-size: var(--t-h4); }
.m-preco-acao .m-btn { margin: 0 !important; width: 100% !important; padding: 0 16px; }
@media (min-width: 1101px) { .m-preco-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: calc(var(--u) * 48); align-items: center; } }
@media (max-width: 1100px) { .m-preco-acao { margin-top: 24px; } .m-preco-acao .m-btn { height: 52px; } }

/* cuidado e clareza: mini cartões */
.m-mini { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 24px; }
.m-mini li { display: flex; gap: 12px; padding: 16px; border-radius: 12px; background: #fff; box-shadow: 0 3px 14px rgba(120, 90, 60, .08); }
.m-mini .mi { width: 28px; height: 28px; }
.m-mini h3 { font-size: var(--t-body); font-weight: 700; color: #013469; }
.m-mini p { margin: 4px 0 0; font-size: var(--t-small); line-height: 1.45; color: #2a2f4d; }
@media (max-width: 640px) { .m-mini { grid-template-columns: 1fr; } }

/* responsável técnico: ficha no painel azul */
.m-ficha { padding: 32px; border-radius: 16px; }
.m-ficha-avatar { display: grid; place-items: center; width: 80px; height: 80px; margin: 0 auto 24px; border-radius: 50%; background: #fff3cc; }
.m-ficha-avatar .mi { width: 36px; height: 36px; color: #013469 !important; }
.m-ficha dl { display: grid; gap: 16px; margin: 0; }
.m-ficha dt { color: #fff; font-weight: 600; margin-bottom: 8px; }
.m-ficha dd { margin: 0; padding: 12px 16px; border-radius: 8px; background: #fff; color: #44536e; }
@media (min-width: 1101px) { .m-responsavel { padding: calc(var(--u) * 48) 0 !important; height: auto !important; } }

/* formulário: textarea igual aos campos; canais com o dado faltando */
.m-campo textarea { width: 100%; background: #fff; border: 1px solid #fff; color: #013469; border-radius: 8px; padding: 12px 16px; }
.m-campo-largo { grid-column: 1 / -1; }
.m-canais { flex-direction: column; gap: 16px; }
.m-canais li { border-left: 0 !important; padding-left: 0 !important; gap: 12px; }
.m-canais li > span > span { display: block; }

/* dado faltando ({{PREENCHER}}) */
.pendente { background: #fff1c2; outline: 1px dashed #b7791f; border-radius: 4px; padding: 0 4px; color: #6b4a00; font-weight: 600; }

/* tabela de sinais: linhas com respiro (o texto da Central é mais longo que o do Mestre) */
.m-tabela tbody th, .m-tabela tbody td { height: auto !important; padding-top: 12px !important; padding-bottom: 12px !important; padding-right: 16px !important; vertical-align: middle; }
@media (min-width: 1101px) { .m-tabela thead th:first-child { width: calc(var(--u) * 220) !important; } .m-tabela-guia td:last-child { width: calc(var(--u) * 330); } }
main .m-gas-alerta { font-size: var(--t-body) !important; line-height: 1.45 !important; }
main .m-form .m-canais { display: grid !important; gap: 16px; margin-top: 24px; }
main .m-form .m-canais li { flex-direction: row !important; align-items: center !important; text-align: left !important; }
main .m-form .m-canais .mi { width: 28px; height: 28px; color: #feb202; }
/* celular: sem rolagem lateral (textos da Central mais longos que os do Mestre) */
@media (max-width: 1100px) {
  .m-preco-grid { grid-template-columns: minmax(0, 1fr); }
  .m-preco-acao .m-btn { white-space: normal; text-align: center; line-height: 1.2; }
  main .m-form .m-canais li { white-space: normal !important; padding-left: 0 !important; font-size: var(--t-body) !important; }
}
@media (max-width: 640px) {
  main .m-hero-micro { white-space: normal !important; text-wrap: balance !important; font-size: 14px !important; }
}
main .m-form .m-canais { grid-template-columns: minmax(0, 1fr) !important; width: auto !important; max-width: none !important; }
/* bairros nos cartões das regiões: alvo de toque ≥ 24 px (WCAG 2.5.8) */
.m-bairros-curto { gap: 0; }
.m-bairros-curto a { display: block; padding: 4px 0; }

/* Botões menos redondos (pedido do usuário, 31/10/2026): mesmo raio da Central de Encanadores (10 px),
   no lugar da "pílula" do Mestre, para combinar com a identidade da marca. */
.btn-orcamento, .m-btn, .m-btn-sec, .mb-btn { border-radius: 10px !important; }

/* Bloco de segurança (pedido do usuário, 31/10/2026): degradê longo e suave e mais fundo claro para o texto.
   A foto começa mais à direita; o creme vai sumindo em quase metade da foto, sem faixa dura; o texto não encosta na foto. */
@media (min-width: 1101px) {
  .m-gas-media { width: calc(var(--u) * 470 + (100% - var(--u) * 1024) / 2) !important; }
  .m-gas-media::before { width: 55% !important; background: linear-gradient(90deg, #fdfcfa 0%, rgba(253, 252, 250, .94) 14%, rgba(253, 252, 250, .78) 30%, rgba(253, 252, 250, .52) 48%, rgba(253, 252, 250, .26) 66%, rgba(253, 252, 250, .08) 84%, rgba(253, 252, 250, 0) 100%) !important; }
  .m-gas-texto > * { max-width: calc(var(--u) * 430) !important; }
}

/* Logo oficial do WhatsApp nos botões de WhatsApp (pedido do usuário, 31/10/2026): é um desenho preenchido
   em uma cor, não traço como os ícones Lucide. Herda a cor do texto do botão (azul no amarelo). */
svg.wa-icon { fill: currentColor; stroke: none; }

/* =====================================================================================
   Cabeçalho branco + herói azul (pedido do usuário, 31/10/2026, referência: print do ChatGPT 1)
   - Computador: cabeçalho branco fixo no topo (antes ficava transparente por cima da foto).
   - Herói: foto de fundo à direita com degradê azul da marca vindo da esquerda; texto branco,
     rótulo amarelo, botão principal amarelo e "Ligar agora" com contorno branco.
   - Celular: foto de fundo inteira com véu azul; cabeçalho translúcido (vidro) que fica mais
     transparente ao rolar a página (só CSS, nos navegadores que suportam animação por rolagem).
   ===================================================================================== */
@media (min-width: 1101px) {
  .site-header.header-home { position: sticky; top: 0; background: #fff; border-bottom: 1px solid #e6ebf2; box-shadow: 0 2px 12px rgba(1, 52, 105, .05); }
  .site-header .header-inner { padding-top: calc(var(--u) * 14); padding-bottom: calc(var(--u) * 14); }
}

.m-hero { background: #013469 !important; }
.m-hero h1 { color: #fff !important; }
.m-hero-lead { color: #dfe6f3 !important; }
.m-hero-micro { color: #dfe6f3 !important; }
.m-hero-rotulo { display: flex; align-items: center; gap: 12px; margin: 0 0 12px; color: #feb202; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; font-size: var(--t-small); line-height: 1.4; }
.m-hero-rotulo::before, .m-hero-rotulo::after { content: ""; flex: none; width: 32px; height: 3px; border-radius: 2px; background: #feb202; }
.m-hero .m-btn-sec { background: transparent; border-color: #fff; color: #fff; }
.m-hero .m-btn-sec:hover { background: #fff; color: #013469; }
.m-hero :focus-visible { outline-color: #feb202; }

@media (min-width: 1101px) {
  .m-hero { height: auto !important; min-height: calc(var(--u) * 400); display: flex; align-items: center; }
  .m-hero-texto { padding-top: calc(var(--u) * 56) !important; padding-bottom: calc(var(--u) * 56) !important; }
  .m-hero-media { width: 62% !important; }
  .m-hero-media img { object-position: center 25% !important; }
  /* degradê azul longo e suave: cobre o lado do texto e some dentro da foto */
  .m-hero-media::before { width: 70% !important; background: linear-gradient(90deg, #013469 0%, rgba(1, 52, 105, .94) 18%, rgba(1, 52, 105, .78) 36%, rgba(1, 52, 105, .5) 56%, rgba(1, 52, 105, .2) 78%, rgba(1, 52, 105, 0) 100%) !important; }
  .m-hero-texto > * { max-width: calc(var(--u) * 470); }
}
@media (max-width: 1100px) {
  .m-hero-media::after { background: linear-gradient(180deg, rgba(1, 52, 105, .9) 0%, rgba(1, 52, 105, .82) 55%, rgba(1, 52, 105, .7) 100%) !important; }
  .m-hero-micro { text-align: left !important; }
}

/* celular: cabeçalho e barra de botões ficam mais transparentes conforme a página rola (sem JavaScript) */
@media (max-width: 1100px) {
  @supports (animation-timeline: scroll()) {
    @keyframes cabecalho-vidro { from { background-color: rgba(255, 255, 255, .96); } to { background-color: rgba(255, 255, 255, .62); } }
    @keyframes barra-vidro { from { background-color: rgba(255, 255, 255, 1); } to { background-color: rgba(255, 252, 247, .62); } }
    .site-header { animation: cabecalho-vidro linear both; animation-timeline: scroll(root); animation-range: 0 120px; }
    .mobile-bar { animation: barra-vidro linear both; animation-timeline: scroll(root); animation-range: 0 120px; }
  }
}
main .m-hero .m-btn-sec { background: transparent !important; border-color: #fff !important; color: #fff !important; }
main .m-hero .m-btn-sec:hover { background: #fff !important; color: #013469 !important; }
@media (max-width: 640px) { .m-hero-rotulo::after { display: none; } }
/* Rótulo do herói no celular: menor e em uma linha (pedido do usuário, 31/10/2026) */
@media (max-width: 640px) { main .m-hero-rotulo { font-size: 12px; letter-spacing: .04em; gap: 8px; margin-bottom: 8px; } main .m-hero-rotulo::before { width: 24px; } }
/* Botões amarelos ao passar o mouse/dedo: amarelo um pouco mais escuro (antes ficava laranja, sobra do Mestre) */
.btn-orcamento:hover, .m-btn:hover, .mb-wa:hover, .mb-wa:active { background: linear-gradient(90deg, #f0a800 0%, #e39d00 100%); }
.cookie-banner .btn-primary:hover { background: linear-gradient(90deg, #f0a800 0%, #e39d00 100%); }

/* =====================================================================================
   Tabela de sinais no layout do print 5 do ChatGPT (pedido do usuário, 31/10/2026):
   cabeçalho azul inteiro com rótulos em caixa alta, ícone em círculo amarelo + nome do sinal
   em negrito, colunas separadas por linhas finas e linhas alternadas. No celular vira lista.
   ===================================================================================== */
.m-sinais-wrap { border-radius: 16px; overflow: hidden; background: #fff; box-shadow: 0 8px 28px rgba(20, 30, 60, .08); }
.m-sinais { width: 100%; border-collapse: collapse; }
.m-sinais thead th { padding: 16px 24px; background: #013469; color: #fff; text-align: left; font-size: var(--t-small); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.m-sinais thead th + th { border-left: 1px solid rgba(255, 255, 255, .16); }
.m-sinais tbody th, .m-sinais tbody td { padding: 16px 24px; text-align: left; vertical-align: middle; font-size: var(--t-body); line-height: 1.5; }
.m-sinais tbody th { width: 34%; color: #013469; font-weight: 700; }
.m-sinais tbody td { color: #4a5470; font-weight: 400; }
.m-sinais tbody tr + tr > * { border-top: 1px solid #e6ebf2; }
.m-sinais tbody th + td, .m-sinais tbody td + td { border-left: 1px solid #e6ebf2; }
.m-sinais tbody tr:nth-child(even) > * { background: #f5f7fa; }
.m-sinal { display: flex; align-items: center; gap: 16px; }
.m-sinal-ico { display: grid; place-items: center; flex: none; width: 48px; height: 48px; border-radius: 50%; background: linear-gradient(135deg, #feb202, #f5a800); box-shadow: 0 4px 10px rgba(254, 178, 2, .3); }
.m-sinal-ico .mi { width: 24px; height: 24px; color: #013469; }
.m-sinais td a { color: #013469; font-weight: 600; text-decoration: underline; text-decoration-color: #feb202; text-decoration-thickness: 2px; text-underline-offset: 3px; }
@media (min-width: 1101px) {
  .m-sinais-wrap { width: calc(var(--u) * 892); margin: calc(var(--u) * 24) auto 0; }
  .m-sinais thead th { padding: calc(var(--u) * 13) calc(var(--u) * 24); }
  .m-sinais tbody th, .m-sinais tbody td { padding: calc(var(--u) * 13) calc(var(--u) * 24); }
}
@media (max-width: 1100px) { .m-sinais-wrap { margin-top: 24px; } }
/* celular: cada sinal vira um bloco com os rótulos das colunas */
@media (max-width: 767.98px) {
  .m-sinais thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .m-sinais, .m-sinais tbody, .m-sinais tr, .m-sinais th, .m-sinais td { display: block; width: auto !important; }
  .m-sinais tbody tr { padding: 16px; }
  .m-sinais tbody tr:nth-child(even) { background: #f5f7fa; }
  .m-sinais tbody tr + tr { border-top: 1px solid #e6ebf2; }
  .m-sinais tbody tr > * { padding: 0; border: 0 !important; background: none !important; }
  .m-sinais tbody th { margin-bottom: 12px; }
  .m-sinais tbody td { padding-left: 64px; }
  .m-sinais tbody td + td { margin-top: 8px; }
  .m-sinais td::before { content: attr(data-rotulo); display: block; font-size: var(--t-small); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #013469; }
}
/* Ajustes para a Montserrat (mais larga que a Outfit) no celular */
@media (max-width: 640px) { main .m-hero-rotulo { letter-spacing: 0; } }
@media (max-width: 1100px) {
  .m-tranquilidade-grid { grid-template-columns: minmax(0, 1fr); }
  main .m-btn, main .m-btn-sec { white-space: normal; text-align: center; line-height: 1.2; }
  main .m-btn-form { padding-left: 16px; padding-right: 16px; }
}
/* Celular: botões em 16 px para os textos caberem em uma linha com a Montserrat
   (o mínimo de 19 px do Mestre era para texto branco no laranja; aqui o texto é azul no amarelo, 7,6:1) */
@media (max-width: 640px) {
  main .m-btn, main .m-btn-sec { font-size: 16px !important; padding-left: 12px !important; padding-right: 12px !important; }
  main .m-preco-acao { padding-left: 12px !important; padding-right: 12px !important; }
  main .m-form-painel { padding-left: 16px !important; padding-right: 16px !important; }
}

/* =====================================================================================
   Perguntas frequentes no layout do print 14 do ChatGPT (pedido do usuário, 31/10/2026):
   lista com linhas finas (sem cartões), pergunta em negrito azul, círculo amarelo com "+"
   que vira "−" quando a pergunta está aberta, resposta em cinza logo abaixo.
   ===================================================================================== */
main .m-faq-lista { display: block; gap: 0; margin-top: 0; border-top: 1px solid #e6ebf2; }
main .m-faq .faq-item { background: transparent; box-shadow: none; border: 0; border-bottom: 1px solid #e6ebf2; border-radius: 0; }
main .m-faq .faq-item summary { min-height: 64px; padding: 16px 8px 16px 16px; gap: 16px; }
main .m-faq .faq-item summary span:first-child { font-weight: 700 !important; color: #013469; }
main .m-faq .faq-item summary:hover span:first-child { color: #0b4a8c; }
.faq-ico { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 50%; background: linear-gradient(135deg, #feb202, #f5a800); color: #013469; box-shadow: 0 4px 10px rgba(254, 178, 2, .28); }
.faq-ico .ico { width: 18px; height: 18px; stroke-width: 2.5; }
.faq-ico .menos, .faq-item[open] .faq-ico .mais { display: none; }
.faq-item[open] .faq-ico .menos { display: block; }
main .m-faq .faq-answer { padding: 0 64px 24px 16px; color: #4a5470; }
@media (max-width: 640px) {
  main .m-faq .faq-item summary { padding-left: 0; padding-right: 0; }
  main .m-faq .faq-answer { padding: 0 0 24px; }
}

/* =====================================================================================
   Área de atendimento no layout do print 13 do ChatGPT (pedido do usuário, 31/10/2026).
   O mapa é ILUSTRAÇÃO (não é o mapa real de Porto Alegre): sem nomes de bairros, só pontos
   decorativos, e marcado como enfeite (aria-hidden). Etiquetas "Bairro 01/02/03" e o selo
   "Cidade / UF a confirmar" do print foram apagados da imagem; o selo verdadeiro é texto.
   Os 5 cartões das regiões, com os links, continuam logo abaixo (a função da seção não muda).
   ===================================================================================== */
.m-area { position: relative; display: grid; overflow: hidden; border-radius: 20px; background: #fff; box-shadow: 0 8px 28px rgba(20, 30, 60, .07); }
.m-area::before, .m-area::after { content: ""; position: absolute; z-index: 0; border-radius: 50%; border: 28px solid #feb202; opacity: .28; pointer-events: none; }
.m-area::before { width: 220px; height: 220px; right: -96px; top: -110px; }
.m-area::after { width: 280px; height: 280px; left: -120px; bottom: -190px; }
.m-area-texto { position: relative; z-index: 2; padding: 32px 24px; }
.m-area-rotulo { display: flex; align-items: center; gap: 12px; margin: 0 0 12px; color: #013469; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; font-size: var(--t-small); }
.m-area-rotulo::before { content: ""; width: 32px; height: 3px; border-radius: 2px; background: #feb202; }
.m-area h2 { color: #013469; }
.m-area h2 span { display: inline; }
.m-area-texto > p:not(.m-area-rotulo) { margin: 16px 0 0; color: #2a3050; font-size: var(--t-lead); line-height: 1.5; }
.m-area-pino { display: grid; place-items: center; width: 72px; height: 72px; margin-top: 24px; border-radius: 50%; background: #fff3cc; }
.m-area-pino .mi { width: 36px; height: 36px; color: #013469; stroke-width: 1.4; }
.m-area-mapa { position: relative; z-index: 1; margin: 0; min-height: 260px; }
.m-area-mapa img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.m-area-selo { position: absolute; right: 16px; bottom: 16px; display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 12px 20px; border-radius: 10px; background: linear-gradient(90deg, #feb202, #f5a800); color: #013469; font-weight: 700; box-shadow: 0 8px 18px rgba(254, 178, 2, .3); }
.m-area-selo .ico { width: 20px; height: 20px; }
.m-regioes .m-cards { margin-top: 32px; }
@media (min-width: 1101px) {
  .m-area { grid-template-columns: 5fr 7fr; min-height: calc(var(--u) * 300); }
  .m-area-texto { padding: calc(var(--u) * 40) calc(var(--u) * 16) calc(var(--u) * 40) calc(var(--u) * 40); align-self: center; }
  .m-area-mapa { min-height: 100%; }
  /* o mapa some suavemente no lado do texto */
  .m-area-mapa::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 22%; z-index: 1; background: linear-gradient(90deg, #fff 0%, rgba(255, 255, 255, .6) 45%, rgba(255, 255, 255, 0) 100%); }
  .m-area-selo { right: calc(var(--u) * 20); bottom: calc(var(--u) * 20); }
}
@media (max-width: 1100px) {
  .m-area-mapa { aspect-ratio: 4 / 3; min-height: 0; }
  .m-area-mapa::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 18%; z-index: 1; background: linear-gradient(180deg, #fff, rgba(255, 255, 255, 0)); }
}
/* Traço amarelo acima do título do bloco de segurança (pedido do usuário, 31/10/2026), igual às outras seções */
.m-gas .m-traco { width: 40px; height: 4px; margin-bottom: 14px; }
@media (min-width: 1101px) { .m-gas .m-traco { width: calc(var(--u) * 36); height: calc(var(--u) * 3); margin-bottom: calc(var(--u) * 12); } }
/* Menu do computador: página atual sublinhada em amarelo (pedido do usuário, 31/10/2026). O traço tem 3 px,
   para o amarelo ficar bem visível sobre o branco. */
@media (min-width: 1101px) {
  .site-header .nav-links a[aria-current="page"]::after { background: linear-gradient(90deg, #feb202, #f5a800); height: 3px; border-radius: 3px; }
}
/* Logo do cabeçalho no computador (pedidos do usuário, 31/10/2026): ~267 px de largura a 1440 px (era 314 no Mestre; 229 ficou pequeno demais) */
@media (min-width: 1101px) { .site-header .brand-logo-slogan { width: calc(var(--u) * 190) !important; height: auto !important; } }
/* Cabeçalho no computador: botão do WhatsApp encostado na margem direita da página (pedido do usuário, 31/10/2026) */
@media (min-width: 1101px) {
  .site-header .main-nav { flex: 1 1 auto !important; }
  .site-header .main-nav > .btn-orcamento { margin-left: auto !important; }
}
/* Cabeçalho no computador equilibrado em 3 partes (pedido do usuário, 31/10/2026):
   logo encostado à esquerda, menu exatamente no centro da página, botão encostado à direita. */
@media (min-width: 1101px) {
  .site-header .header-inner { display: grid !important; grid-template-columns: 1fr auto 1fr; align-items: center !important; column-gap: calc(var(--u) * 24); }
  .site-header .brand { justify-self: start; margin: 0 !important; }
  .site-header .main-nav { display: contents !important; }
  .site-header .main-nav > .nav-links { justify-self: center; margin: 0 !important; }
  .site-header .main-nav > .btn-orcamento { justify-self: end; margin: 0 !important; }
}
/* Menu centralizado ENTRE o logo e o botão (folgas iguais dos dois lados), pedido do usuário, 31/10/2026.
   Com o logo maior, centralizar na página deixava o menu colado no logo. */
@media (min-width: 1101px) {
  .site-header .header-inner { grid-template-columns: auto 1fr auto !important; }
}
@media (min-width: 1101px) { .site-header .brand { width: max-content !important; } }

/* Traço amarelo SEMPRE acima do título (pedido do usuário, 31/10/2026). Nas seções com título centralizado
   e no preço ele vinha depois do texto; agora vem antes do título, com o mesmo espaço das outras seções. */
main .m-titulo .m-traco { margin: 0 auto 14px !important; width: 40px; height: 4px; }
main .m-preco .m-traco { margin: 0 0 14px !important; width: 40px; height: 4px; }
@media (min-width: 1101px) {
  main .m-titulo .m-traco, main .m-preco .m-traco { width: calc(var(--u) * 36) !important; height: calc(var(--u) * 3) !important; margin-bottom: calc(var(--u) * 12) !important; }
}
/* Traço amarelo igual em todas as seções: mesmo tamanho e mesma distância até o título */
main .m-traco { width: 40px !important; height: 4px !important; margin-top: 0 !important; margin-bottom: 14px !important; }
main .m-traco + h2 { margin-top: 0 !important; }
@media (min-width: 1101px) {
  main .m-traco { width: calc(var(--u) * 36) !important; height: calc(var(--u) * 3) !important; margin-bottom: calc(var(--u) * 12) !important; }
}

/* =====================================================================================
   Peças de layout pedidas pelo SSP (Etapa 15), 31/10/2026:
   trilha de navegação visível, mega menu de Serviços (sem JavaScript), guias do blog e rodapé completo.
   ===================================================================================== */
/* trilha de navegação no herói (fundo azul) */
.m-trilha { margin: 0 0 16px; }
.m-trilha ol { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; padding: 0; list-style: none; font-size: var(--t-small); color: #dfe6f3; }
.m-trilha li + li::before { content: "›"; margin-right: 8px; color: #feb202; font-weight: 700; }
.m-trilha a { display: inline-flex; align-items: center; min-height: 24px; color: #fff; font-weight: 600; text-decoration: underline; text-decoration-color: rgba(254, 178, 2, .7); text-underline-offset: 3px; }
.m-trilha a:hover { text-decoration-color: #feb202; }
.m-trilha [aria-current="page"] { color: #dfe6f3; }

/* mega menu de Serviços (abre ao passar o mouse ou ao chegar pelo teclado) */
.mm-rotulo { color: #013469 !important; }
.mm-selos .ico { color: #f5a800 !important; }
.mm-faixa a { color: #013469 !important; text-decoration: underline; text-decoration-color: #feb202; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.mm-chips a { color: #013469; }
.mm-cta { width: 100%; margin: 4px 0 0 !important; height: 48px !important; font-size: 16px !important; }
.mm-item strong { font-weight: 600; }
@media (min-width: 1101px) {
  .site-header .has-mega > a::after { content: ""; display: inline-block; width: 6px; height: 6px; margin-left: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-3px) rotate(45deg); position: static; background: none; }
  .site-header .mega { left: 50%; right: auto; width: min(960px, calc(100vw - 48px)); transform: translate(-50%, 6px); top: 100%; }
  .site-header .has-mega:hover > .mega, .site-header .has-mega:focus-within > .mega { transform: translate(-50%, 0); }
}

/* guias do blog: 3 cartões */
.m-guias { background: #fefcf8; }
.m-cards-guias { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.m-guia-cat { margin: 16px 0 0 !important; font-size: var(--t-small) !important; font-weight: 600 !important; letter-spacing: .1em; text-transform: uppercase; color: #4a5470 !important; }
.m-cards-guias .m-card h3 { margin-top: 8px !important; }
@media (max-width: 1100px) { .m-cards-guias { grid-template-columns: 1fr; } }

/* rodapé completo: marca + dados, Serviços, Regiões, A Central */
.site-footer.m-rodape { padding: 48px 0 112px; }
.m-rodape-colunas { display: grid; gap: 32px; }
.m-rodape-marca { display: grid; justify-items: start; gap: 16px; }
.m-rodape-marca .m-rodape-logo img { width: 200px; height: auto; }
.m-rodape-marca p { margin: 0; color: #4a5470; }
.m-rodape address { display: grid; gap: 4px; font-style: normal; color: #1f2a4a; }
.m-rodape address strong { color: #013469; }
.m-rodape-marca .btn-orcamento { height: 48px; padding: 0 24px; font-size: 16px; }
.m-rodape-colunas nav h2 { margin: 0 0 12px; font-size: var(--t-small) !important; font-weight: 700 !important; letter-spacing: .12em; text-transform: uppercase; color: #013469; line-height: 1.4 !important; }
.m-rodape-colunas nav ul { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.m-rodape-colunas nav a { display: inline-flex; align-items: center; min-height: 36px; color: #1f2a4a; font-weight: 400; }
.m-rodape-colunas nav a:hover { color: #013469; text-decoration: underline; text-decoration-color: #feb202; }
.m-rodape-base { margin-top: 32px; padding-top: 24px; }
@media (min-width: 768px) { .m-rodape-colunas { grid-template-columns: repeat(3, minmax(0, 1fr)); } .m-rodape-marca { grid-column: 1 / -1; } }
@media (min-width: 1101px) {
  .site-footer.m-rodape { padding: 64px 0 32px; }
  .m-rodape-colunas { grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 48px; }
  .m-rodape-marca { grid-column: auto; }
}
@media (min-width: 1101px) {
  .site-header .header-inner, .site-header .nav-links, .site-header .has-mega { position: static !important; }
}
@media (min-width: 1101px) { .site-header .mega { margin-left: 0 !important; margin-right: 0 !important; } }
/* rodapé novo: neutraliza as regras do rodapé antigo do Mestre (que era uma linha só) */
.m-rodape .m-rodape-colunas nav { display: block !important; justify-content: initial !important; height: auto !important; }
.m-rodape .m-rodape-colunas nav ul { display: grid !important; gap: 0 !important; justify-content: initial !important; height: auto !important; align-content: start; }
.m-rodape .m-rodape-colunas { align-items: start; }
.m-rodape .m-rodape-marca .btn-orcamento { margin-left: 0 !important; }
.m-rodape .m-rodape-marca .m-rodape-logo { justify-self: start; margin: 0 !important; width: auto !important; }

/* =====================================================================================
   Troca de cores pedida pelo usuário (31/10/2026) para melhorar a transição depois do herói azul:
   - faixa de diferenciais (Equipe especializada...) com fundo BRANCO, texto azul e ícones amarelos;
   - bloco "Por que chamar um eletricista pela Central" com fundo AZUL, título branco, texto claro
     e checks amarelos. O bloco de manutenção (mesmo componente) continua claro.
   ===================================================================================== */
main .m-faixa { background: #fff !important; color: #013469 !important; border-bottom: 1px solid #e6ebf2; box-shadow: 0 6px 18px rgba(1, 52, 105, .06); position: relative; z-index: 1; }
main .m-faixa .mi { color: #f5a800 !important; }
main .m-faixa-lista li { color: #013469; }
main .m-faixa-lista li + li::before { background: #e6ebf2 !important; }
main .m-faixa :focus-visible { outline-color: #013469; }

main .m-tranquilidade:not(.m-manutencao) { background: linear-gradient(180deg, #013469 0%, #012a55 100%) !important; }
main .m-tranquilidade:not(.m-manutencao) h2 { color: #fff !important; }
main .m-tranquilidade:not(.m-manutencao) .m-tranquilidade-grid > div > p { color: #dfe6f3 !important; }
main .m-tranquilidade:not(.m-manutencao) p strong { color: #fff; }
main .m-tranquilidade:not(.m-manutencao) .m-checks li { color: #dfe6f3 !important; }
main .m-tranquilidade:not(.m-manutencao) .m-checks strong { color: #fff !important; }
main .m-tranquilidade:not(.m-manutencao) .m-checks .ico { color: #feb202 !important; }

/* =====================================================================================
   Herói (pedido do usuário, 31/10/2026, padrão do SSP e dos projetos irmãos):
   - botões "Chamar no WhatsApp agora" e "Ligar agora" lado a lado em qualquer tela de computador e tablet;
   - cartão abaixo dos botões com anos de experiência e atendimentos realizados (números a preencher,
     nada inventado), na mesma largura dos dois botões; translúcido para o fundo azul.
   ===================================================================================== */
main .m-hero .m-btn-sec { transition: background-color .15s; }
@media (min-width: 641px) {
  .m-hero .m-acoes { flex-wrap: nowrap !important; }
  .m-hero .m-acoes .m-btn, .m-hero .m-acoes .m-btn-sec { width: auto !important; flex: none; }
  .m-hero .m-cta-bloco { width: max-content !important; max-width: 100%; }
  .m-hero-texto > .m-cta-bloco { max-width: none !important; }
}
main .m-hero .m-hero-numeros { display: flex; justify-content: space-between; align-items: center; gap: 24px; margin-top: 20px; padding: 14px 24px !important; border-radius: 12px !important; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .2); color: #dfe6f3; font-size: var(--t-small) !important; line-height: 1.35; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
main .m-hero .m-hero-numeros > span { display: flex; flex-direction: column; gap: 2px; }
main .m-hero .m-hero-numeros > span + span { text-align: right; }
main .m-hero .m-hero-numeros strong { color: #feb202; font-size: 22px !important; font-weight: 800 !important; line-height: 1.15; }
main .m-hero .m-hero-numeros .pendente { font-size: 13px; }
@media (max-width: 640px) { main .m-hero .m-hero-numeros { padding: 12px 16px !important; } main .m-hero .m-hero-numeros strong { font-size: 20px !important; } }
main .m-hero .m-hero-numeros, main .m-hero .m-hero-numeros span { white-space: normal !important; min-width: 0; }
main .m-hero .m-hero-numeros > span { flex: 1 1 0; }

/* Botões amarelos sem sombra/brilho (pedido do usuário, 31/10/2026): botão chapado, só a cor.
   Vale para os de WhatsApp, o de enviar o formulário, o da barra do celular e o do selo do mapa. */
.btn-orcamento, .m-btn, .mb-wa, .m-area-selo,
.btn-orcamento:hover, .m-btn:hover, .mb-wa:hover, .mb-wa:active { box-shadow: none !important; }
.btn-orcamento:hover, .m-btn:hover { transform: none !important; }

/* =====================================================================================
   Raio deitado no lugar do traço amarelo acima dos títulos (pedido do usuário, 31/10/2026).
   Desenho inspirado no raio do logo: lasca inclinada com um "degrau" no meio
   (arquivo: assets/images/marca/raio-deitado.svg; aqui embutido para não carregar arquivo extra).
   Mesmo lugar e mesma distância até o título; centralizado quando o título é centralizado.
   ===================================================================================== */
main .m-traco, main section .m-titulo .m-traco, main section.m-preco .m-traco {
  width: 52px !important; height: 18px !important; border-radius: 0 !important;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 16'%3E%3Cpolygon fill='%23feb202' points='0,15 29,2 25,7.5 48,1 19,14 23,8.5'/%3E%3C/svg%3E") no-repeat center / contain !important;
  margin-bottom: 10px !important;
}
@media (min-width: 1101px) { main .m-traco, main section .m-titulo .m-traco, main section.m-preco .m-traco { width: 60px !important; height: 20px !important; margin-bottom: calc(var(--u) * 9) !important; } }
/* no celular os títulos de seção ficam à esquerda: o raio acompanha */
@media (max-width: 1100px) { main section .m-titulo .m-traco { margin-left: 0 !important; margin-right: 0 !important; } }

/* Rótulo do herói: raios deitados no lugar dos traços amarelos dos lados (pedido do usuário, 31/10/2026) */
.m-hero-rotulo::before, .m-hero-rotulo::after {
  width: 36px !important; height: 12px !important; border-radius: 0 !important;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 16'%3E%3Cpolygon fill='%23feb202' points='0,15 29,2 25,7.5 48,1 19,14 23,8.5'/%3E%3C/svg%3E") no-repeat center / contain !important;
}
/* celular: os dois raios, menores, para o rótulo continuar em uma linha */
@media (max-width: 640px) {
  main .m-hero-rotulo { gap: 5px !important; letter-spacing: -0.02em !important; }
  main .m-hero-rotulo::before, main .m-hero-rotulo::after { display: block !important; width: 18px !important; height: 6px !important; }
}

/* Rodapé de baixo igual ao do Mestre (pedido do usuário, 31/10/2026): direitos, links legais e crédito do desenvolvedor */
.m-rodape .m-rodape-base { display: grid; justify-items: center; gap: 8px; text-align: center; font-size: var(--t-small); color: #4a5470; }
.m-rodape .m-rodape-base p { margin: 0 !important; }
.m-rodape .m-rodape-legal { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 24px; }
.m-rodape .m-rodape-legal a { display: inline-flex; align-items: center; min-height: 32px; color: #4a5470; font-weight: 400; }
.m-rodape .m-rodape-legal a:hover { color: #013469; text-decoration: underline; text-decoration-color: #feb202; }
.site-footer .m-rodape-credito { color: #4a5470; }
.site-footer .m-rodape-credito a { color: #013469 !important; font-weight: 700; text-decoration: underline; text-decoration-color: #feb202; text-decoration-thickness: 2px; text-underline-offset: 3px; }
@media (max-width: 640px) { .m-rodape .m-rodape-legal { gap: 0 16px; } }

/* =====================================================================================
   "Como escolher um eletricista de confiança" (pedido do usuário, 31/10/2026: estava desorganizado).
   Só CSS, sem mexer no texto: em cima, título à esquerda e explicação à direita; embaixo, dois cartões
   iguais lado a lado (checklist com borda amarela e ✓; sinais de alerta com borda vermelha e ✕);
   fechando, o aviso do disjuntor numa caixa amarela clara. No celular, tudo empilhado.
   ===================================================================================== */
main .m-escolher .m-tranquilidade-grid { grid-template-columns: minmax(0, 1fr) !important; gap: 32px !important; align-items: start !important; }
main .m-escolher .m-tranquilidade-grid > div:last-child { display: grid; grid-template-columns: minmax(0, 1fr); }
main .m-escolher h3 { margin: 0 !important; padding: 24px 24px 12px; background: #fff; border: 1px solid #ece8e1; border-bottom: 0; border-top: 4px solid #feb202; border-radius: 16px 16px 0 0; font-size: var(--t-h3) !important; line-height: 1.3; color: #013469; }
main .m-escolher h3 ~ h3 { border-top-color: #d92d20; margin-top: 16px !important; }
main .m-escolher .m-checks { margin: 0 !important; padding: 4px 24px 24px !important; background: #fff; border: 1px solid #ece8e1; border-top: 0; border-radius: 0 0 16px 16px; gap: 12px !important; }
main .m-escolher .m-checks li { height: auto !important; padding: 0 !important; align-items: flex-start !important; }
main .m-escolher .m-checks ~ .m-checks .ico { color: #d92d20 !important; }
main .m-escolher .m-tranquilidade-grid > div:last-child > p { margin: 24px 0 0 !important; padding: 16px 24px; border-radius: 12px; background: #fff3cc; color: #013469 !important; font-weight: 600; }
main .m-escolher .m-tranquilidade-grid > div:first-child > p + p { margin-top: 16px !important; }
@media (min-width: 768px) {
  main .m-escolher .m-tranquilidade-grid > div:last-child { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; }
  main .m-escolher .m-tranquilidade-grid > div:last-child > h3:nth-of-type(1) { grid-column: 1; grid-row: 1; }
  main .m-escolher .m-tranquilidade-grid > div:last-child > ul:nth-of-type(1) { grid-column: 1; grid-row: 2; }
  main .m-escolher .m-tranquilidade-grid > div:last-child > h3:nth-of-type(2) { grid-column: 2; grid-row: 1; margin-top: 0 !important; }
  main .m-escolher .m-tranquilidade-grid > div:last-child > ul:nth-of-type(2) { grid-column: 2; grid-row: 2; }
  main .m-escolher .m-tranquilidade-grid > div:last-child > p { grid-column: 1 / -1; grid-row: 3; }
}
@media (min-width: 1101px) {
  main .m-escolher .m-tranquilidade-grid > div:first-child { display: grid; grid-template-columns: 5fr 6fr; column-gap: 64px; align-items: start; }
  main .m-escolher .m-tranquilidade-grid > div:first-child > .m-traco { grid-column: 1; grid-row: 1; }
  main .m-escolher .m-tranquilidade-grid > div:first-child > h2 { grid-column: 1; grid-row: 2 / span 2; }
  main .m-escolher .m-tranquilidade-grid > div:first-child > p { grid-column: 2; margin-top: 0 !important; }
  main .m-escolher .m-tranquilidade-grid > div:first-child > p:nth-of-type(1) { grid-row: 1 / span 2; }
  main .m-escolher .m-tranquilidade-grid > div:first-child > p:nth-of-type(2) { grid-row: 3; margin-top: 16px !important; }
}
main .m-escolher .m-tranquilidade-grid > div:last-child > p { max-width: none !important; width: auto !important; }
/* número de telefone escrito: legível em cada fundo */
main .m-form .m-canais a[href^="tel:"] { display: block; color: #fff !important; font-weight: 600; text-decoration: underline; text-decoration-color: #feb202; text-underline-offset: 3px; }
.m-rodape address a[href^="tel:"] { color: #013469 !important; font-weight: 600; text-decoration: underline; text-decoration-color: #feb202; text-underline-offset: 3px; }

/* Lista dos 94 bairros no rodapé, fechada (pedido do usuário, 31/10/2026): saiu da seção das regiões
   para não repetir os cartões; continua no HTML com todos os links para o Google. */
.m-rodape .m-rodape-bairros { margin-top: 32px; padding-top: 24px; border-top: 1px solid #e6ebf2; }
.m-rodape .m-rodape-bairros summary { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; cursor: pointer; list-style: none; color: #013469; font-weight: 700; font-size: var(--t-small); letter-spacing: .12em; text-transform: uppercase; }
.m-rodape .m-rodape-bairros summary::-webkit-details-marker { display: none; }
.m-rodape .m-rodape-bairros summary::after { content: ""; width: 7px; height: 7px; border-right: 2px solid #f5a800; border-bottom: 2px solid #f5a800; transform: translateY(-2px) rotate(45deg); transition: transform .2s; }
.m-rodape .m-rodape-bairros[open] summary::after { transform: translateY(2px) rotate(-135deg); }
.m-rodape .m-rodape-bairros .m-bairros-lista { display: grid; gap: 12px; margin-top: 12px; font-size: var(--t-small); line-height: 1.6; color: #4a5470; }
.m-rodape .m-rodape-bairros .m-bairros-lista p { margin: 0; }
.m-rodape .m-rodape-bairros .m-bairros-lista a { color: #4a5470; font-weight: 400; }
.m-rodape .m-rodape-bairros .m-bairros-lista strong a { color: #013469; font-weight: 700; }
.m-rodape .m-rodape-bairros .m-bairros-lista a:hover { color: #013469; text-decoration: underline; text-decoration-color: #feb202; }

/* =====================================================================================
   "Todos os serviços elétricos em Porto Alegre" (pedido do usuário, 31/10/2026; referência: bloco de
   todos os serviços de um site de desentupidora). Índice de navegação: etiqueta de cada serviço principal
   (link para o hub) e, embaixo, os serviços específicos em "pílulas" brancas (link para cada página).
   Colunas: 3 no computador, 2 no tablet, 1 no celular. Só serviços que já estão na arquitetura.
   ===================================================================================== */
main .m-todos { background: #f4f7fb; }
.m-todos-grade { columns: 1; column-gap: 48px; }
.m-todos-grupo { break-inside: avoid; margin: 0 0 32px; }
.m-todos-grupo h3 { margin: 0 0 12px; }
.m-todos-grupo h3 a { display: inline-flex; align-items: center; min-height: 36px; padding: 4px 12px; border-radius: 8px; background: #fff; color: #013469; font-size: var(--t-small) !important; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; line-height: 1.3; box-shadow: 0 1px 2px rgba(1, 52, 105, .06); }
.m-todos-grupo h3 a:hover { background: #fff3cc; text-decoration: none; }
.m-todos-grupo ul { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin: 0; padding: 0; list-style: none; }
.m-todos-grupo li a { display: inline-flex; align-items: center; min-height: 36px; padding: 6px 12px; border-radius: 8px; background: #fff; color: #2a3050; font-size: var(--t-body); font-weight: 400; line-height: 1.35; }
.m-todos-grupo li a:hover { color: #013469; background: #fff3cc; text-decoration: none; }
@media (min-width: 768px) { .m-todos-grade { columns: 2; } }
@media (min-width: 1101px) { .m-todos-grade { columns: 3; } .m-todos .m-titulo { margin-bottom: calc(var(--u) * 24); } }
/* celular: pílulas lado a lado (quebram linha) para a seção não ficar comprida demais */
@media (max-width: 767.98px) {
  .m-todos-grupo ul { flex-direction: row; flex-wrap: wrap; }
  .m-todos-grupo { margin-bottom: 24px; }
  .m-todos-grupo li a { font-size: var(--t-small); }
}
@media (max-width: 767.98px) {
  .m-todos-grupo ul { gap: 6px; }
  .m-todos-grupo li a { min-height: 32px; padding: 4px 10px; }
  .m-todos-grupo h3 { margin-bottom: 8px; }
  .m-todos-grupo h3 a { min-height: 32px; }
}

/* "Todos os serviços" dentro da seção de serviços, fechado num botão que expande (pedido do usuário,
   31/10/2026: a seção separada ficou redundante). Sem JavaScript: <details>. */
main .m-todos { background: none; margin-top: 32px; }
main .m-todos > summary { display: flex; align-items: center; justify-content: center; gap: 8px; width: max-content; max-width: 100%; min-height: 48px; margin: 0 auto; padding: 0 24px; border: 2px solid #013469; border-radius: 10px; background: #fff; color: #013469; font-weight: 600; font-size: var(--t-body); text-align: center; cursor: pointer; list-style: none; }
main .m-todos > summary::-webkit-details-marker { display: none; }
main .m-todos > summary:hover { background: #013469; color: #fff; }
main .m-todos > summary .ico { width: 20px; height: 20px; transition: transform .2s; }
main .m-todos[open] > summary .ico { transform: rotate(180deg); }
main .m-todos .m-todos-fechar, main .m-todos[open] .m-todos-abrir { display: none; }
main .m-todos[open] .m-todos-fechar { display: inline; }
main .m-todos .m-todos-grade { margin-top: 32px; padding: 32px; border-radius: 16px; background: #fff; box-shadow: 0 4px 16px rgba(120, 90, 60, .08); }
main .m-todos .m-todos-grupo h3 a { background: #fff3cc; box-shadow: none; }
main .m-todos .m-todos-grupo h3 a:hover { background: #feb202; }
main .m-todos .m-todos-grupo li a { background: #f4f7fb; }
main .m-todos .m-todos-grupo li a:hover { background: #fff3cc; }
main .m-todos + .m-fecho { margin-top: 24px; }
@media (max-width: 767.98px) {
  main .m-todos > summary { width: 100%; padding: 0 16px; }
  main .m-todos .m-todos-grade { padding: 20px 16px; }
}
/* Botão do mega menu: só "WhatsApp" + ícone, em azul, dentro do botão (pedido do usuário, 31/10/2026) */
.site-header .mega .mm-cta, .site-header .mega .mm-cta:hover, .nav-links .mega .mm-cta, .nav-links .mega .mm-cta:hover { color: #013469 !important; }
.site-header .mega .mm-cta { gap: 8px; padding: 0 16px !important; font-size: 16px !important; font-weight: 700 !important; white-space: nowrap; overflow: hidden; }
.site-header .mega .mm-cta .wa-icon { width: 20px; height: 20px; color: #013469; fill: currentColor; }

/* =====================================================================================
   Menu do computador (pedido do usuário, 31/10/2026):
   - ao passar o mouse: o item fica amarelo (fundo amarelo-claro e texto azul, para continuar legível);
   - item da página atual: raio deitado embaixo, no lugar da barrinha amarela.
   ===================================================================================== */
@media (min-width: 1101px) {
  .site-header .main-nav > .nav-links > li > a { position: relative; padding: 6px 12px !important; margin: 0 -12px; border-radius: 8px; transition: background-color .15s, color .15s; }
  .site-header .main-nav > .nav-links > li > a:hover,
  .site-header .main-nav > .nav-links > li.has-mega:hover > a,
  .site-header .main-nav > .nav-links > li > a:focus-visible { background: #feb202; color: #013469 !important; text-decoration: none; }
  .site-header .main-nav > .nav-links > li > a[aria-current="page"]::after {
    content: ""; position: absolute; left: 50% !important; right: auto !important; bottom: -14px !important;
    width: 30px !important; height: 10px !important; border-radius: 0 !important; transform: translateX(-50%);
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 16'%3E%3Cpolygon fill='%23feb202' points='0,15 29,2 25,7.5 48,1 19,14 23,8.5'/%3E%3C/svg%3E") no-repeat center / contain !important;
  }
}

/* Bloco de preço: subtítulos (H3) com respiro em cima e embaixo. Antes ficavam colados no parágrafo e na lista (31/10/2026) */
main .m-preco-grid > div > h3 { margin: 32px 0 12px !important; }
main .m-preco-grid > div > h3 + .m-checks { margin-top: 0 !important; }
main .m-preco-grid > div > h3 + .m-preco-lead { margin-top: 0 !important; }

/* Duas colunas texto + cartão ("Quem responde pelos serviços" e o formulário final): 64 px entre o texto e o cartão
   no computador. Antes o gap era 0 e o texto encostava no cartão (31/10/2026). */
@media (min-width: 1101px) {
  main .m-form-grid { column-gap: 64px !important; }
}

/* ---------- Página de serviço (modelo: /porto-alegre/quadro-de-luz/, SSP Etapa 18; 31/10/2026) ---------- */
/* Primeira dobra azul em 2 colunas: texto largo à esquerda, formulário branco e estreito à direita (distribuição da Central de Encanadores, cores do pilar) */
main .m-hero-servico { padding: 24px 0 48px; background: linear-gradient(180deg, #013469 0%, #012a55 100%); color: #fff; }
.m-hero-servico-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; }
main .m-hero-servico .breadcrumb { margin: 0 0 16px; color: #c9d4e8; font-size: var(--t-small); }
main .m-hero-servico .breadcrumb a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
main .m-hero-servico .breadcrumb li + li::before { color: #c9d4e8; }
main .m-hero-servico .breadcrumb [aria-current="page"] { color: #feb202; font-weight: 700; }
main .m-hero-servico h1 { margin: 0; color: #fff; font-weight: 800; letter-spacing: -0.025em; font-size: clamp(34px, 8vw, 48px); line-height: 1.08; }
main .m-hero-servico .m-resp-lead { margin-top: 16px !important; color: #dfe6f3; }
main .m-hero-servico .m-resp-lead strong { color: #fff; }
.m-hero-checks { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; margin: 24px 0 0; padding: 0; list-style: none; }
.m-hero-checks li { display: flex; align-items: center; gap: 12px; color: #fff; font-weight: 600; font-size: 16px; line-height: 1.3; }
.m-hero-checks .ico { flex: none; width: 24px; height: 24px; padding: 4px; border-radius: 50%; background: rgba(254, 178, 2, .18); color: #feb202; }
main .m-hero-servico .m-acoes { margin-top: 32px; }
main .m-hero-servico .m-hero-micro { color: #dfe6f3 !important; }
main .m-hero-servico .m-btn-sec { background: transparent; color: #fff; border-color: #fff; }
main .m-hero-servico .m-btn-sec:hover { background: #fff; color: #013469; }
/* Formulário claro e estreito, campos em uma coluna */
main .m-form-claro { background: #fff; border: 0; border-radius: 16px; padding: 28px 24px; box-shadow: 0 16px 40px rgba(0, 0, 0, .25); }
main .m-form-claro fieldset { grid-template-columns: minmax(0, 1fr) !important; gap: 16px !important; }
.m-form-titulo { margin: 0 0 16px; color: #fff; font-size: var(--t-h4); font-weight: 700; line-height: 1.3; }
main .m-form-claro .m-form-titulo { color: #013469; font-size: 24px; font-weight: 800; }
main .m-form-claro .m-campo label { color: #013469; }
main .m-form-claro .m-opcional { color: #5e6478; }
main .m-form-claro input, main .m-form-claro select, main .m-form-claro textarea { background: #f8f9fc; border: 1px solid #d9deea; color: #013469; border-radius: 10px !important; }
main .m-form-claro input:focus, main .m-form-claro select:focus, main .m-form-claro textarea:focus { border-color: #013469; outline: 2px solid #feb202; outline-offset: 1px; }
main .m-form-claro .m-consent { color: #5e6478; }
main .m-form-claro .m-consent strong { color: #013469; }
@media (min-width: 640px) { .m-hero-checks { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; } }
@media (min-width: 1101px) {
  main .m-hero-servico { padding: 32px 0 64px; }
  .m-hero-servico-grid { grid-template-columns: minmax(0, 1fr) 420px; column-gap: 64px; align-items: start; }
  main .m-hero-servico h1 { font-size: calc(var(--u) * 40); }
  main .m-hero-servico .m-acoes { flex-wrap: nowrap; }
}
/* Subtítulo (H3) solto dentro de uma seção: tabela de proteções, "cobra visita?" e "três medos" */
main .m-sub { margin: 32px 0 12px !important; color: #013469; font-size: var(--t-h4); font-weight: 700; line-height: 1.3; }
main .m-medos-h3 .m-sub { margin-top: 0 !important; }

/* Faixa de diferenciais no computador: cada item ocupa a largura do seu conteúdo, o espaço entre os itens é sempre o mesmo
   e o divisor fica no meio desse espaço. Antes eram 4 colunas iguais e o item de texto mais longo quase tocava o divisor (01/11/2026). */
@media (min-width: 1101px) {
  main .m-faixa-lista { grid-template-columns: repeat(4, max-content); justify-content: center; column-gap: clamp(40px, 4.5vw, 64px); }
  main .m-faixa-lista li, main .m-faixa-lista li:first-child { justify-content: flex-start; padding-left: 0; padding-right: 0; }
  main .m-faixa-lista li + li::before { left: calc(clamp(40px, 4.5vw, 64px) / -2); }
}

/* Faixa de chamada: pergunta que toca na dor do cliente + botão de WhatsApp, com frase própria de cada página.
   Padrão para páginas de serviço, bairro e artigo (inspirada na Central de Encanadores; 01/11/2026). */
.m-chamada-sec { padding: 32px 0; }
.m-chamada { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; padding: 28px 24px; border-radius: 16px; background: #feb202; color: #013469; }
.m-chamada-rotulo { margin: 0; font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.m-chamada-titulo { margin: 8px 0 0; font-size: clamp(24px, 5.5vw, 32px); font-weight: 800; line-height: 1.15; letter-spacing: -0.02em; }
.m-chamada-texto { margin: 8px 0 0; font-size: 16px; line-height: 1.45; }
.m-btn-chamada { display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 52px; padding: 0 28px; border-radius: 999px; background: #013469; color: #fff !important; font-weight: 700; font-size: 17px; text-decoration: none; }
.m-btn-chamada:hover { background: #0b4a8c; text-decoration: none; }
.m-btn-chamada:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.m-btn-chamada .wa-icon { width: 1.25em; height: 1.25em; flex: none; }
@media (min-width: 900px) {
  .m-chamada-sec { padding: 48px 0; }
  .m-chamada { flex-direction: row; align-items: center; justify-content: space-between; gap: 32px; padding: 32px 40px; }
  .m-btn-chamada { width: auto; flex: none; white-space: nowrap; }
}