/* ==========================================================================
   Cuidando com Amor Home Care — style.css
   Sistema visual da marca. Paleta azul da logo. Sem dependência externa.
   ========================================================================== */

:root{
  --azul:#1B5AA0;
  --azul-esc:#123C6B;
  --azul-claro:#29ABE2;
  --azul-bb:#EAF6FB;
  --fundo:#F4F9FC;
  --branco:#FFFFFF;
  --texto:#2B3A48;
  --texto-suave:#5A6B7B;
  --linha:#DCE8F1;
  --wa:#25D366;
  --wa-esc:#1EBE5A;
  --sombra:0 8px 30px rgba(18,60,107,.08);
  --sombra-sm:0 3px 12px rgba(18,60,107,.06);
  --raio:14px;
  --raio-sm:10px;
  --container:1120px;
  --fonte-t:'Poppins',system-ui,sans-serif;
  --fonte-c:'Inter',system-ui,sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }

/* Transição suave entre páginas (cross-fade nativo) — acaba com o "corte seco"/pisca
   ao trocar de página. Navegadores sem suporte simplesmente ignoram e navegam normal. */
@view-transition{ navigation:auto; }
::view-transition-old(root), ::view-transition-new(root){ animation-duration:.22s; }

html{ scroll-behavior:smooth; overflow-y:scroll; }   /* barra de rolagem sempre presente: evita tremor horizontal ao trocar de página */
body{ font-family:var(--fonte-c); color:var(--texto); background:var(--fundo); line-height:1.65; font-size:16px; -webkit-font-smoothing:antialiased; padding-top:74px; }  /* espaço reservado para o cabeçalho fixo: evita salto vertical na injeção */
[id]{ scroll-margin-top:88px; }   /* âncoras não ficam escondidas atrás do cabeçalho fixo */
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,h4{ font-family:var(--fonte-t); color:var(--azul-esc); line-height:1.2; font-weight:600; }

.container{ width:100%; max-width:var(--container); margin:0 auto; padding:0 20px; }
.secao{ padding:72px 0; }
.secao--azul{ background:var(--azul-bb); }
.secao__eyebrow{ display:inline-block; font-family:var(--fonte-t); font-weight:600; font-size:13px; letter-spacing:.12em; text-transform:uppercase; color:var(--azul-claro); margin-bottom:12px; }
.secao__titulo{ font-size:clamp(26px,4vw,36px); margin-bottom:14px; }
.secao__intro{ color:var(--texto-suave); font-size:17px; max-width:640px; margin-bottom:40px; }
.centro{ text-align:center; }
.centro .secao__intro{ margin-left:auto; margin-right:auto; }

/* ---------- Botões ---------- */
.btn{ display:inline-flex; align-items:center; gap:9px; font-family:var(--fonte-t); font-weight:600; font-size:15.5px;
  padding:13px 26px; border-radius:999px; border:2px solid transparent; cursor:pointer; transition:.18s; white-space:nowrap; }
.btn svg{ width:19px; height:19px; }
.btn--wa{ background:var(--wa); color:#fff; }
.btn--wa:hover{ background:var(--wa-esc); transform:translateY(-2px); }
.btn--primary{ background:var(--azul); color:#fff; }
.btn--primary:hover{ background:var(--azul-esc); transform:translateY(-2px); }
.btn--ghost{ background:transparent; color:var(--azul); border-color:var(--azul); }
.btn--ghost:hover{ background:var(--azul); color:#fff; }
.btn--ghost-light{ background:transparent; color:#fff; border-color:rgba(255,255,255,.6); }
.btn--ghost-light:hover{ background:#fff; color:var(--azul-esc); border-color:#fff; }
.btn--lg{ padding:16px 32px; font-size:16.5px; }

/* ---------- Header ---------- */
.header{ position:fixed; top:0; left:0; right:0; z-index:100; background:#fff; border-bottom:1px solid var(--linha); }
#site-header{ display:block; }
.header__in{ display:flex; align-items:center; justify-content:space-between; height:74px; }
.brand{ display:flex; align-items:center; gap:11px; }
/* O logotipo real e um pouco mais alto que largo. Fixa-se a altura e deixa a
   largura livre: travar os dois esmagaria o desenho. */
.brand__mark{ height:42px; width:auto; flex-shrink:0; }
.brand__txt{ font-family:var(--fonte-t); line-height:1.05; }
.brand__txt b{ display:block; font-weight:700; font-size:18px; color:var(--azul-esc); letter-spacing:-.2px; }
.brand__txt b span{ color:var(--azul-claro); }
.brand__txt small{ font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--texto-suave); }
.nav{ display:flex; align-items:center; gap:6px; }
.nav a{ font-weight:500; font-size:15px; color:var(--texto); padding:9px 13px; border-radius:8px; transition:.15s; }
.nav a:hover, .nav a.ativo{ color:var(--azul); background:var(--azul-bb); }
.header .btn--wa{ padding:10px 20px; font-size:14.5px; margin-left:8px; }
.burger{ display:none; background:none; border:none; cursor:pointer; width:44px; height:44px; color:var(--azul-esc); }
.burger svg{ width:28px; height:28px; }

/* ---------- Hero ---------- */
.hero{ position:relative; background:linear-gradient(135deg,var(--azul-esc),var(--azul) 70%); color:#fff; overflow:hidden; }
.hero::after{ content:""; position:absolute; right:-120px; top:-120px; width:420px; height:420px; border-radius:50%;
  background:radial-gradient(circle,rgba(41,171,226,.35),transparent 70%); }
.hero__in{ position:relative; z-index:1; padding:84px 0 90px; max-width:720px; }
.hero h1{ color:#fff; font-size:clamp(30px,5vw,46px); font-weight:700; letter-spacing:-.5px; }
.hero__sub{ font-size:clamp(17px,2.3vw,20px); color:rgba(255,255,255,.92); margin:20px 0 14px; }
.hero__apoio{ font-size:15px; color:rgba(255,255,255,.8); margin-bottom:30px; }
.hero__ctas{ display:flex; flex-wrap:wrap; gap:14px; }

/* Topo com foto ao lado — Opção A, escolhida pelo fundador em 2026-07-31.
   O texto fica numa coluna e a foto na outra: nada passa por baixo do texto,
   e o enquadramento da foto não depende de corte. */
.hero-a__grid{ position:relative; z-index:1; display:grid; grid-template-columns:1.05fr .95fr; gap:46px;
  align-items:center; padding:70px 20px 76px; }
.hero-a__grid .hero__ctas{ margin-top:4px; }
.hero-a__foto img{ width:100%; height:auto; aspect-ratio:4/3; object-fit:cover; border-radius:var(--raio);
  box-shadow:0 20px 50px rgba(0,0,0,.28); }

/* ---------- Barra de credibilidade ---------- */
.cred{ background:#fff; border-bottom:1px solid var(--linha); }
.cred__in{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; padding:26px 0; }
.cred__item{ display:flex; align-items:center; gap:12px; justify-content:center; text-align:left; }
.cred__item svg{ width:30px; height:30px; color:var(--azul-claro); flex-shrink:0; }
.cred__item b{ font-family:var(--fonte-t); font-size:15px; color:var(--azul-esc); font-weight:600; line-height:1.25; }

/* ---------- Quem somos ---------- */
/* Duas colunas quando há um bloco ao lado (foto). Sozinho, o texto ocupa a
   largura de leitura — a foto do Quem somos saiu em 2026-07-31 por repetir a do topo. */
.sobre-grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:48px; align-items:center; }
.sobre-grid:has(> :only-child){ grid-template-columns:1fr; max-width:760px; }
.sobre-grid img{ border-radius:var(--raio); box-shadow:var(--sombra); width:100%; aspect-ratio:4/3; object-fit:cover; }
/* placeholder de foto (enquanto a foto real da cliente não chega) */
.foto-ph{ border-radius:var(--raio); background:var(--branco); border:1px dashed var(--azul-claro); aspect-ratio:4/3;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; text-align:center; padding:24px;
  color:var(--texto-suave); font-size:14px; box-shadow:var(--sombra-sm); }
.foto-ph svg{ width:46px; height:46px; color:var(--azul-claro); }
.prosa p{ margin-bottom:16px; color:var(--texto-suave); }
.prosa p:first-of-type{ color:var(--texto); }

/* ---------- Cards de serviço ---------- */
.grid-serv{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.card-serv{ background:#fff; border:1px solid var(--linha); border-radius:var(--raio); padding:28px 26px; box-shadow:var(--sombra-sm);
  transition:.2s; display:flex; flex-direction:column; }
.card-serv:hover{ transform:translateY(-4px); box-shadow:var(--sombra); border-color:var(--azul-claro); }
.card-serv__ic{ width:52px; height:52px; border-radius:12px; background:var(--azul-bb); display:flex; align-items:center; justify-content:center; margin-bottom:16px; }
.card-serv__ic svg{ width:28px; height:28px; color:var(--azul); }
.card-serv h3{ font-size:19px; margin-bottom:9px; }
.card-serv p{ color:var(--texto-suave); font-size:15px; margin-bottom:16px; flex:1; }
.card-serv a{ font-family:var(--fonte-t); font-weight:600; font-size:14.5px; color:var(--azul); display:inline-flex; align-items:center; gap:6px; }
.card-serv a:hover{ color:var(--azul-claro); }
.card-serv a svg{ width:16px; height:16px; }

/* ---------- Por que escolher ---------- */
.grid-benef{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
.benef{ display:flex; gap:15px; }
.benef__ic{ width:46px; height:46px; flex-shrink:0; border-radius:11px; background:var(--azul); display:flex; align-items:center; justify-content:center; }
.benef__ic svg{ width:24px; height:24px; color:#fff; }
.benef h3{ font-size:17px; margin-bottom:5px; }
.benef p{ color:var(--texto-suave); font-size:14.5px; }

/* ---------- Como funciona ---------- */
.passos{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; counter-reset:passo; }
.passo{ position:relative; padding-top:8px; }
.passo__n{ font-family:var(--fonte-t); font-weight:700; font-size:40px; color:var(--azul-claro); opacity:.4; line-height:1; margin-bottom:8px; }
.passo h3{ font-size:17px; margin-bottom:6px; }
.passo p{ color:var(--texto-suave); font-size:14.5px; }

/* ---------- Bloco local ---------- */
/* Duas colunas quando há um segundo bloco ao lado (mapa, foto). Sozinho, ocupa
   a largura de leitura inteira — os mapas foram removidos em 2026-07-29. */
.local-grid{ display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:center; }
.local-grid:has(> :only-child){ grid-template-columns:1fr; max-width:760px; }
.local-info li{ list-style:none; display:flex; gap:12px; align-items:flex-start; margin-bottom:14px; }
.local-info li svg{ width:22px; height:22px; color:var(--azul-claro); flex-shrink:0; margin-top:2px; }
.local-mapa{ background:var(--azul-bb); border:1px dashed var(--azul-claro); border-radius:var(--raio); min-height:280px;
  display:flex; align-items:center; justify-content:center; color:var(--texto-suave); text-align:center; padding:20px; font-size:14px; }
/* mapa provisório: mesma marcação vermelha dos dados fictícios */
/* .mapa-real = endereço confirmado pela cliente (sem tarja).
   .mapa-prov = endereço ainda provisório, com a tarja vermelha por cima.
   As duas dividem a mesma caixa; só a tarja difere. */
.mapa-prov, .mapa-real{ position:relative; border-radius:var(--raio); overflow:hidden; box-shadow:var(--sombra); min-height:300px; }
.mapa-prov iframe, .mapa-real iframe{ width:100%; height:100%; min-height:300px; border:0; display:block; }
.mapa-prov::after{ content:"mapa provisório — trocar pelo endereço oficial"; position:absolute; left:0; right:0; bottom:0;
  background:rgba(217,48,37,.92); color:#fff; font-size:12px; font-weight:600; text-align:center; padding:6px 10px; }

/* ---------- FAQ acordeão ---------- */
.faq{ max-width:800px; margin:0 auto; }
.faq__item{ background:#fff; border:1px solid var(--linha); border-radius:var(--raio-sm); margin-bottom:12px; overflow:hidden; }
.faq__q{ width:100%; text-align:left; background:none; border:none; cursor:pointer; padding:18px 22px; font-family:var(--fonte-t);
  font-weight:600; font-size:16px; color:var(--azul-esc); display:flex; justify-content:space-between; align-items:center; gap:14px; }
.faq__q svg{ width:20px; height:20px; color:var(--azul-claro); flex-shrink:0; transition:transform .2s; }
.faq__item.aberto .faq__q svg{ transform:rotate(180deg); }
.faq__a{ max-height:0; overflow:hidden; transition:max-height .25s ease; }
.faq__a p{ padding:0 22px 20px; color:var(--texto-suave); font-size:15px; }
.faq__grupo-tit{ font-family:var(--fonte-t); font-weight:600; color:var(--azul); font-size:14px; text-transform:uppercase; letter-spacing:.06em; margin:28px 0 12px; }

/* ---------- CTA final ---------- */
.cta{ background:linear-gradient(135deg,var(--azul),var(--azul-esc)); color:#fff; text-align:center; }
.cta h2{ color:#fff; font-size:clamp(24px,3.5vw,32px); margin-bottom:12px; }
.cta p{ color:rgba(255,255,255,.9); max-width:560px; margin:0 auto 28px; }
.cta__ctas{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }

/* ---------- Footer ---------- */
.footer{ background:var(--azul-esc); color:rgba(255,255,255,.8); padding:56px 0 26px; }
.footer__grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:36px; margin-bottom:38px; }
.footer__brand b{ font-family:var(--fonte-t); font-size:19px; color:#fff; display:block; }
.footer__brand b span{ color:var(--azul-claro); }
.footer__brand small{ color:rgba(255,255,255,.65); }
/* Titulo de coluna do rodape. Nao e heading de proposito: o rodape nao faz parte
   da linha de raciocinio da pagina, e como heading ele entrava no indice de titulos
   pulando do H2 direto para o H4. Estilo replicado do antigo `.footer h4`. */
.footer__tit{ font-family:var(--fonte-t); font-weight:600; line-height:1.2; color:#fff; font-size:15px; margin-bottom:14px; }
.footer ul{ list-style:none; }
.footer li{ margin-bottom:9px; }
.footer a{ color:rgba(255,255,255,.78); font-size:14.5px; }
.footer a:hover{ color:var(--azul-claro); }
.footer__contato li{ display:flex; gap:9px; align-items:flex-start; }
.footer__contato svg{ width:18px; height:18px; color:var(--azul-claro); flex-shrink:0; margin-top:2px; }
/* Rótulo do número secundário. Discreto de propósito: se tiver o mesmo peso do
   principal, a pessoa escolhe qualquer um dos dois — e o WhatsApp é o canal que
   a cliente atende. */
.footer__obs{ font-size:12px; color:rgba(255,255,255,.5); margin-left:6px; white-space:nowrap; }
.footer__sociais{ display:flex; gap:12px; margin-top:6px; }
.footer__sociais a{ width:38px; height:38px; border-radius:50%; background:rgba(255,255,255,.1); display:flex; align-items:center; justify-content:center; }
.footer__sociais a:hover{ background:var(--azul-claro); }
.footer__sociais svg{ width:19px; height:19px; color:#fff; }
.footer__base{ border-top:1px solid rgba(255,255,255,.14); padding-top:22px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; font-size:13.5px; }
.footer__base a{ color:var(--azul-claro); }

/* ---------- WhatsApp flutuante ---------- */
.wa-float{ position:fixed; right:20px; bottom:20px; z-index:90; width:60px; height:60px; border-radius:50%; background:var(--wa);
  box-shadow:0 6px 20px rgba(37,211,102,.5); display:flex; align-items:center; justify-content:center; transition:.2s; }
.wa-float:hover{ transform:scale(1.08); }
.wa-float svg{ width:34px; height:34px; color:#fff; }

/* Voltar ao topo — canto inferior esquerdo, azuis da marca, aparece ao rolar */
.to-top{ position:fixed; left:20px; bottom:20px; z-index:90; width:60px; height:60px; border-radius:50%; border:none; cursor:pointer;
  background:linear-gradient(135deg,var(--azul),var(--azul-esc)); color:#fff; box-shadow:0 6px 20px rgba(18,60,107,.42);
  display:flex; align-items:center; justify-content:center; opacity:0; visibility:hidden; transform:translateY(12px); transition:opacity .25s, transform .25s, visibility .25s; }
.to-top.show{ opacity:1; visibility:visible; transform:translateY(0); }
.to-top:hover{ transform:translateY(-3px); box-shadow:0 8px 24px rgba(18,60,107,.5); }
.to-top svg{ width:26px; height:26px; }

/* ---------- Breadcrumb + hero curto (páginas internas) ---------- */
.pagehero{ background:linear-gradient(135deg,var(--azul-esc),var(--azul)); color:#fff; padding:48px 0 52px; }
.pagehero h1{ color:#fff; font-size:clamp(26px,4vw,38px); }
.crumb{ font-size:13.5px; color:rgba(255,255,255,.78); margin-bottom:12px; }
.crumb a:hover{ color:#fff; text-decoration:underline; }

/* páginas de serviço / conteúdo */
.conteudo{ max-width:760px; }
.conteudo h2{ font-size:23px; margin:34px 0 12px; }
.conteudo p{ margin-bottom:15px; color:var(--texto-suave); }
.lista-check{ list-style:none; }
.lista-check li{ display:flex; gap:11px; align-items:flex-start; margin-bottom:11px; color:var(--texto); }
.lista-check li svg{ width:21px; height:21px; color:var(--azul-claro); flex-shrink:0; margin-top:3px; }
/* ==========================================================================
   DESTAQUE DE PALAVRAS-CHAVE — CAMADA TEMPORARIA DE REVISAO
   Some junto com assets/js/destaque-kw.js. Remover antes de publicar.
   ========================================================================== */
mark.kw-hit{ background:transparent; color:#d21f1f; font-weight:600; padding:0; }
.kw-off mark.kw-hit{ color:inherit; font-weight:inherit; }

.kw-painel{ position:fixed; left:16px; bottom:16px; z-index:9998; width:min(320px,calc(100vw - 32px));
  font-family:var(--fonte-c); font-size:13px; }
.kw-painel__tog{ width:100%; text-align:left; background:#d21f1f; color:#fff; border:0; cursor:pointer;
  padding:11px 15px; border-radius:var(--raio); box-shadow:0 8px 24px rgba(0,0,0,.25);
  font-family:inherit; font-size:13px; }
.kw-painel__tog b{ font-size:15px; }
.kw-painel__lista{ display:none; background:#fff; border:1px solid #f0c9c9; border-radius:var(--raio);
  margin-top:8px; max-height:44vh; overflow:auto; box-shadow:0 8px 24px rgba(0,0,0,.18); }
.kw-painel.aberto .kw-painel__lista{ display:block; }
.kw-painel__nota{ margin:0; padding:11px 14px; border-bottom:1px solid #f4e2e2; color:var(--texto-suave); font-size:12px; }
.kw-painel__off{ display:block; width:100%; text-align:left; background:none; border:0; cursor:pointer;
  border-top:1px solid #f4e2e2; padding:10px 14px; color:#d21f1f; font-family:inherit; font-size:12px;
  font-weight:600; }
.kw-painel__lista ul{ list-style:none; margin:0; padding:6px 0; }
.kw-painel__lista li{ display:flex; justify-content:space-between; gap:12px; padding:5px 14px; }
.kw-painel__lista li span{ color:var(--texto); }
.kw-painel__lista li b{ color:#d21f1f; }

/* foto de abertura de secao. Proporcao 3/2, a nativa do arquivo: nao corta
   ninguem. O height:auto e obrigatorio — a <img> tem width e height como
   atributo, e com os dois definidos o aspect-ratio do CSS e descartado. */
.foto-destaque{ margin:0 0 26px; }
/* Sem aspect-ratio fixo de proposito: cada foto guarda a sua proporcao pelos
   atributos width/height da <img>, e nada e cortado. O height:auto continua
   obrigatorio — com width e height nos atributos, o navegador so respeita a
   altura automatica se ela for pedida no CSS. */
.foto-destaque img{ width:100%; height:auto;
  border-radius:var(--raio); box-shadow:var(--sombra); display:block; }
.foto-destaque figcaption{ margin-top:8px; font-size:12.5px; color:var(--texto-suave); }

/* fecho do post — amarra o assunto ao servico correspondente */
.post-fecho{ background:var(--azul-bb); border-left:4px solid var(--azul-claro); border-radius:var(--raio);
  padding:16px 18px; margin:26px 0 4px; }
.post-fecho a{ color:var(--azul); font-weight:600; text-decoration:underline; }

/* reforco de praca nas paginas de servico — Guarulhos e Sao Paulo */
.serv-praca{ background:var(--azul-bb); border-left:4px solid var(--azul-claro); border-radius:var(--raio);
  padding:14px 18px; margin:18px 0 6px; font-size:15px; }
.serv-praca a{ color:var(--azul); font-weight:600; text-decoration:underline; }

.serv-vizinhos{ display:flex; gap:14px; flex-wrap:wrap; margin-top:14px; }
.serv-vizinhos a{ font-family:var(--fonte-t); font-weight:600; font-size:14px; color:var(--azul); background:var(--azul-bb); padding:9px 16px; border-radius:999px; }
.serv-vizinhos a:hover{ background:var(--azul); color:#fff; }

/* barra de consentimento LGPD */
.consent{ position:fixed; left:0; right:0; bottom:0; z-index:120; background:var(--azul-esc); color:#fff; padding:16px 20px;
  display:flex; align-items:center; gap:16px; flex-wrap:wrap; justify-content:center; box-shadow:0 -4px 20px rgba(0,0,0,.2); }
.consent p{ font-size:14px; max-width:640px; }
.consent a{ color:var(--azul-claro); text-decoration:underline; }
.consent__btns{ display:flex; gap:10px; }
.consent button{ font-family:var(--fonte-t); font-weight:600; font-size:14px; padding:9px 18px; border-radius:999px; border:none; cursor:pointer; }
.consent .aceitar{ background:var(--wa); color:#fff; }
.consent .recusar{ background:transparent; color:#fff; border:1px solid rgba(255,255,255,.5); }
.consent.oculto{ display:none; }

/* blog */
.grid-posts{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
.post-card{ background:#fff; border:1px solid var(--linha); border-radius:var(--raio); overflow:hidden; box-shadow:var(--sombra-sm); transition:.2s; display:flex; flex-direction:column; }
.post-card:hover{ transform:translateY(-4px); box-shadow:var(--sombra); }
.post-card__img{ aspect-ratio:16/9; background:var(--azul-bb); display:flex; align-items:center; justify-content:center; color:var(--azul-claro); overflow:hidden; }
.post-card__img svg{ width:46px; height:46px; }
.post-card__img img{ width:100%; height:100%; object-fit:cover; display:block; }
.post-card__body{ padding:22px; display:flex; flex-direction:column; flex:1; }
.post-card__tag{ font-size:12px; font-weight:600; color:var(--azul-claro); text-transform:uppercase; letter-spacing:.05em; margin-bottom:8px; }
.post-card h3{ font-size:18px; margin-bottom:10px; }
.post-card p{ color:var(--texto-suave); font-size:14.5px; flex:1; margin-bottom:14px; }
.post-corpo{ max-width:720px; margin:0 auto; }
.post-corpo h2{ font-size:22px; margin:30px 0 12px; }
.post-corpo p{ margin-bottom:15px; color:var(--texto); }
.post-toc{ background:var(--azul-bb); border-radius:var(--raio); padding:20px 24px; margin:24px 0; }
.post-toc b{ font-family:var(--fonte-t); color:var(--azul-esc); }
.post-toc ul{ margin:8px 0 0 18px; color:var(--texto-suave); font-size:14.5px; }
.author-box{ display:flex; gap:16px; align-items:center; background:#fff; border:1px solid var(--linha); border-radius:var(--raio); padding:20px; margin-top:30px; }
.author-box__av{ width:56px; height:56px; border-radius:50%; background:var(--azul-bb); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.author-box__av svg{ width:28px; height:28px; color:var(--azul); }

/* utilitários */
.mt-cta{ margin-top:36px; text-align:center; }
.oculto{ display:none !important; }

/* ---------- DADO PROVISÓRIO (fictício) ----------
   Tudo em vermelho no site é dado de exemplo, só para dimensionar o espaço.
   Substituir pelos dados oficiais da cliente e remover a classe .fake.
   Enquanto existir .fake no site, manter o noindex nas páginas.            */
.fake{ color:#D93025 !important; font-weight:600; }
/* imagem provisória de banco: foto real da cliente entra no lugar */
/* .img-foto = foto definitiva (sem tarja). .img-prov = ainda provisória, com a
   tarja vermelha por cima. As duas dividem a mesma caixa. */
.img-prov, .img-foto{ position:relative; display:block; border-radius:var(--raio); overflow:hidden; box-shadow:var(--sombra); }
.img-prov img, .img-foto img{ width:100%; height:100%; object-fit:cover; display:block; }
.img-prov::after{ content:"imagem provisória — trocar pela foto da empresa"; position:absolute; left:0; right:0; bottom:0;
  background:rgba(217,48,37,.92); color:#fff; font-size:12px; font-weight:600; text-align:center; padding:6px 10px; }
.sobre-grid .img-prov, .sobre-grid .img-foto{ aspect-ratio:4/3; }
.serv-foto{ margin:0 0 26px; aspect-ratio:4/3; max-width:520px; }
.footer .fake, .pagehero .fake, .hero .fake, .cta .fake{ color:#FF7A70 !important; }
.fake-bloco{ background:rgba(217,48,37,.06); border-left:3px solid #D93025; border-radius:8px; padding:14px 18px; color:#D93025; }

/* ---------- Abertura (splash) — só na 1ª visita da sessão, na home ---------- */
.splash{ position:fixed; inset:0; z-index:9999; background:#fff; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:20px; animation:splashOut .6s ease 3.5s forwards; }
.splash__heart{ width:118px; height:118px; transform-origin:center; animation:heartBeat .75s ease 2.7s 1; }
.splash__heart svg{ width:100%; height:100%; overflow:visible; }
.splash__heart .outer{ fill:none; stroke:#1B5AA0; stroke-width:6; stroke-linejoin:round; stroke-linecap:round;
  stroke-dasharray:1; stroke-dashoffset:1; animation:draw 1.7s ease .3s forwards; }
.splash__heart .inner{ fill:none; stroke:#29ABE2; stroke-width:5; stroke-linecap:butt; opacity:0;
  stroke-dasharray:1; stroke-dashoffset:1; animation:draw 1s ease 1.8s forwards, innerOn .01s linear 1.8s forwards; }
@keyframes innerOn{ to{ opacity:1; } }
.splash__word{ font-family:var(--fonte-t); font-weight:600; font-size:23px; color:#123C6B; letter-spacing:-.2px;
  opacity:0; animation:splashWord .6s ease 1.7s forwards; }
.splash__word span{ color:#29ABE2; }
@keyframes draw{ to{ stroke-dashoffset:0; } }
@keyframes heartBeat{ 0%,100%{ transform:scale(1); } 35%{ transform:scale(1.1); } 60%{ transform:scale(.98); } }
@keyframes splashWord{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:translateY(0); } }
@keyframes splashOut{ to{ opacity:0; visibility:hidden; } }
.no-splash .splash{ display:none !important; }
@media (prefers-reduced-motion:reduce){
  .splash{ animation-delay:.4s; }
  .splash__heart, .splash__word{ animation:none; opacity:1; }
  .splash__heart .outer, .splash__heart .inner{ animation:none; stroke-dashoffset:0; }
}

/* ==========================================================================
   Responsivo
   ========================================================================== */
@media (max-width:900px){
  .nav{ position:fixed; inset:74px 0 auto 0; flex-direction:column; align-items:stretch; background:#fff; border-bottom:1px solid var(--linha);
    padding:14px 20px 22px; gap:2px; box-shadow:var(--sombra); transform:translateY(-140%); transition:transform .25s; }
  .nav.aberto{ transform:translateY(0); }
  .nav a{ padding:13px; font-size:16px; }
  .header .btn--wa{ margin:10px 0 0; justify-content:center; }
  .burger{ display:flex; align-items:center; justify-content:center; }
  .sobre-grid, .local-grid{ grid-template-columns:1fr; gap:28px; }
  .hero-a__grid{ grid-template-columns:1fr; gap:28px; padding:56px 20px 62px; }
  .grid-serv, .grid-benef, .passos, .grid-posts{ grid-template-columns:1fr 1fr; }
  .cred__in{ grid-template-columns:1fr 1fr; gap:16px; }
  .footer__grid{ grid-template-columns:1fr 1fr; gap:28px; }
}
@media (max-width:600px){
  .container{ padding-left:26px; padding-right:26px; }   /* respiro lateral no mobile SEM zerar o padding vertical (hero também usa .container) */
  .hero__in{ padding-top:64px; padding-bottom:68px; }    /* só vertical: a lateral vem do .container acima */
  .secao{ padding:52px 0; }
  .grid-serv, .grid-benef, .passos, .grid-posts, .cred__in{ grid-template-columns:1fr; }
  /* credibilidade no mobile: bloco centralizado, ícones alinhados à esquerda */
  .cred__in{ display:flex; flex-direction:column; align-items:flex-start; gap:16px; width:fit-content; }
  .cred__item{ justify-content:flex-start; }
  .footer__grid{ grid-template-columns:1fr; }
  .hero__ctas .btn, .cta__ctas .btn{ width:100%; justify-content:center; }
  .footer__base{ flex-direction:column; }
}