/* ==========================================================================
   site.css — navegação, heros de página interna, tipografia de artigo,
   callouts, FAQ, CTA, cards e rodapé de links. Complementa main-0813.css.
   Paleta: marrom #4D301E (topo) · verde #4eb980 (acento) · azul #05396A (links)
   ========================================================================== */

:root{
  --marrom:#4D301E; --marrom-2:#3a2416; --verde:#127c4a; --verde-2:#4eb980; --verde-escuro:#0e6b3f;
  --azul:#05396A; --laranja:#A63100; --borda:rgba(224,224,224,.85);
  --tinta:#2b2b2b; --tinta-2:#555; --bg-suave:#faf8f6;
}

/* Acessibilidade ---------------------------------------------------------- */
.skip-link{position:absolute;left:-9999px;top:0;background:#fff;color:var(--azul);
  padding:.6em 1em;z-index:1000;border-radius:0 0 4px 0}
.skip-link:focus{left:0}

/* Foco visível global (WCAG 2.4.7) — antes não existia em lugar nenhum ----- */
a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible,
label:focus-visible,.card:focus-visible{outline:3px solid #ffbf47;outline-offset:2px;
  border-radius:3px}
.topnav a:focus-visible,.topnav .nav-burger:focus-visible,
#site-footer a:focus-visible{outline-color:#ffd166}

/* Barra de navegação ------------------------------------------------------ */
.topnav{position:sticky;top:0;z-index:200;background:var(--marrom);
  box-shadow:0 2px 10px rgba(0,0,0,.18);text-align:left;text-transform:none}
.topnav-inner{display:flex;align-items:center;gap:1em;max-width:72em;margin:0 auto;
  padding:.55em 1.1em}
.topnav .brand{display:inline-flex;align-items:center;gap:.5em;color:#fff;font-size:1.05em;
  letter-spacing:.02em;text-decoration:none;white-space:nowrap;flex:0 0 auto}
.topnav .brand img{width:28px;height:28px;border-radius:50%;border:1px solid var(--verde-2);
  background:#fff;flex:0 0 auto}
.topnav .brand strong{color:var(--verde-2);font-weight:700}
.topnav .mainmenu{display:flex;flex:1 1 auto;gap:.2em;overflow-x:auto;
  -webkit-overflow-scrolling:touch;scrollbar-width:none}
.topnav .mainmenu::-webkit-scrollbar{display:none}
.topnav .mainmenu a{display:flex;align-items:center;min-height:44px;
  color:rgba(255,255,255,.92);text-decoration:none;font-size:.82em;
  text-transform:uppercase;letter-spacing:.08em;padding:.7em .8em;border-radius:4px;
  white-space:nowrap;transition:background .15s,color .15s}
.topnav .mainmenu a:hover{color:#fff;background:rgba(255,255,255,.08)}
.topnav .mainmenu a.is-active{color:#fff;box-shadow:inset 0 -2px 0 var(--verde-2)}
.topnav .nav-cta{display:inline-flex;align-items:center;flex:0 0 auto;background:var(--verde);
  color:#fff;text-decoration:none;font-size:.8em;font-weight:700;text-transform:uppercase;
  letter-spacing:.06em;padding:.7em 1.1em;min-height:44px;border-radius:4px;
  transition:background .15s}
.topnav .nav-cta:hover{background:var(--verde-escuro)}
/* Botão "hambúrguer" — só aparece no mobile (menu vira disclosure sem JS) -- */
.nav-burger{display:none}
@media screen and (max-width:736px){
  .topnav-inner{flex-wrap:wrap;padding:.5em .7em}
  .nav-burger{display:inline-flex;flex-direction:column;justify-content:center;gap:5px;
    margin-left:.4em;padding:.5em;min-width:44px;min-height:44px;cursor:pointer;border-radius:4px}
  .nav-burger span{width:24px;height:2px;background:#fff;border-radius:2px}
  .topnav .nav-cta{margin-left:auto}
  .topnav .mainmenu{order:3;width:100%;flex-basis:100%;display:none;flex-direction:column;
    overflow:visible;gap:0;padding-top:.4em}
  .nav-toggle:checked~.mainmenu{display:flex}
  .topnav .mainmenu a{width:100%;font-size:.95em;letter-spacing:.04em;
    border-bottom:1px solid rgba(255,255,255,.08)}
}

/* Hero das páginas internas ---------------------------------------------- */
.page-hero{background:linear-gradient(135deg,var(--marrom),var(--marrom-2));
  color:rgba(255,255,255,.9);text-align:center;padding:3.2em 1.2em 3.4em}
.page-hero .container{width:54em;max-width:100%}
.page-hero h1{color:#fff;font-size:2.1em;text-transform:none;letter-spacing:.01em;
  line-height:1.2;margin:.2em 0 .5em}
.page-hero p.lead{color:rgba(255,255,255,.92);font-size:1.15em;line-height:1.6;
  text-transform:none;letter-spacing:0;max-width:40em;margin:0 auto 1.4em}
.page-hero .hero-cta{display:inline-block;background:var(--verde);color:#fff;
  text-decoration:none;font-weight:700;padding:.8em 1.6em;border-radius:5px;
  text-transform:uppercase;letter-spacing:.05em;font-size:.9em}
.page-hero .hero-cta:hover{background:var(--verde-escuro)}
@media screen and (max-width:736px){.page-hero h1{font-size:1.5em}.page-hero p.lead{font-size:1em}}

/* Breadcrumbs ------------------------------------------------------------- */
.breadcrumbs{font-size:.8em;text-transform:none;letter-spacing:0;margin-bottom:.6em}
.breadcrumbs ol{display:flex;flex-wrap:wrap;justify-content:center;gap:.4em;margin:0;padding:0}
.breadcrumbs li{display:flex;align-items:center}
.breadcrumbs li:not(:last-child)::after{content:"›";margin-left:.4em;opacity:.6}
.breadcrumbs a{color:rgba(255,255,255,.75);text-decoration:none;border:0}
.breadcrumbs a:hover{color:#fff;text-decoration:underline}
.breadcrumbs span{color:#fff;opacity:.9}

/* Corpo de artigo --------------------------------------------------------- */
.article-wrap{max-width:50em;margin:0 auto;padding:3em 1.2em 2em}
.article{text-align:left;color:var(--tinta);font-size:1.02em;line-height:1.8}
.article h2,.article h3,.article h4{text-align:left;text-transform:none;letter-spacing:0;
  color:var(--marrom);line-height:1.3}
.article h2{font-size:1.5em;margin:1.8em 0 .6em;padding-bottom:.25em;
  border-bottom:2px solid var(--borda)}
.article h3{font-size:1.2em;margin:1.5em 0 .5em;color:#3a2416}
.article p{margin:0 0 1.1em}
.article a{color:var(--azul);text-decoration:underline;text-underline-offset:2px}
.article a:hover{color:var(--laranja)}
.article ul,.article ol{margin:0 0 1.3em;padding-left:1.4em}
.article ul{list-style:disc}.article ol{list-style:decimal}
.article li{margin:.35em 0;display:list-item;width:auto;text-align:left}
.article strong{color:#1f1f1f}
.article blockquote{border-left:4px solid var(--verde-2);background:var(--bg-suave);
  padding:1em 1.2em;margin:1.4em 0;font-style:italic;color:var(--tinta-2)}
.article .intro{font-size:1.12em;color:#3a3a3a}
.article table{margin:1.4em 0;font-size:.95em}
.article th,.article td{border:1px solid var(--borda);padding:.55em .7em;text-align:left;vertical-align:top}
.article th{background:var(--bg-suave);font-weight:700}
.article img{max-width:100%;height:auto;border-radius:6px}
.toc{background:var(--bg-suave);border:1px solid var(--borda);border-radius:6px;
  padding:1em 1.2em 1em 2.4em;margin:0 0 2em}
.toc strong{display:block;margin:0 0 .4em 0;color:var(--marrom)}

/* Código inline e blocos de código */
.article code,.faq-a code{background:#f1efed;padding:.12em .38em;border-radius:3px;
  font-family:Menlo,Consolas,"Courier New",monospace;font-size:.88em;color:var(--laranja);
  word-break:break-word}
.article pre,.faq-a pre{background:#241a12;color:#f3eee9;padding:1em 1.2em;border-radius:6px;
  overflow-x:auto;margin:1.3em 0;font-size:.86em;line-height:1.6}
.article pre code,.faq-a pre code{background:none;padding:0;color:inherit;font-size:1em;word-break:normal}

/* Callouts ---------------------------------------------------------------- */
.callout{border-left:4px solid var(--verde-2);background:var(--bg-suave);
  padding:1em 1.2em;border-radius:0 6px 6px 0;margin:1.4em 0}
.callout :last-child{margin-bottom:0}
.callout--warn{border-left-color:#d9534f;background:#fdf3f2}
.callout--tip{border-left-color:var(--verde);background:#eef9f2}
.callout--info{border-left-color:var(--azul);background:#eef3f8}
.callout b,.callout strong{color:inherit}

/* Lista de sintomas / checklist ------------------------------------------ */
.checklist{list-style:none!important;padding-left:0!important}
.checklist li{position:relative;padding-left:1.8em;margin:.5em 0}
.checklist li::before{content:"\2713";font-family:inherit;color:var(--verde);font-weight:700;
  position:absolute;left:0;top:.15em;font-size:.95em;line-height:1}

/* Passos numerados -------------------------------------------------------- */
.steps{counter-reset:step;list-style:none!important;padding-left:0!important}
.steps>li{position:relative;padding:0 0 1.1em 3em;margin:0}
.steps>li::before{counter-increment:step;content:counter(step);position:absolute;left:0;top:0;
  width:2em;height:2em;line-height:2em;text-align:center;border-radius:50%;
  background:var(--marrom);color:#fff;font-weight:700;font-size:.85em}

/* FAQ (acordeão CSS) ------------------------------------------------------ */
.faq{max-width:50em;margin:2.4em auto 0;text-align:left}
.faq h2{text-align:left;text-transform:none;letter-spacing:0;color:var(--marrom);
  font-size:1.5em;border-bottom:2px solid var(--borda);padding-bottom:.25em}
.faq details{border:1px solid var(--borda);border-radius:6px;margin:.6em 0;background:#fff}
.faq summary{cursor:pointer;padding:.9em 1.1em;font-weight:600;color:#222;list-style:none;
  position:relative;padding-right:2.4em}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:1em;top:.75em;font-size:1.3em;
  color:var(--verde);transition:transform .2s}
.faq details[open] summary::after{content:"\2212"}
.faq .faq-a{padding:0 1.1em 1.1em;color:var(--tinta);line-height:1.75}
.faq .faq-a p{margin:.2em 0 .8em}
.faq .faq-a a{color:var(--azul)}

/* Referências ------------------------------------------------------------- */
.references{font-size:.92em;color:var(--tinta-2);border-top:1px solid var(--borda);
  margin-top:2.4em;padding-top:1.2em}
.references h2{font-size:1.15em;text-align:left;text-transform:uppercase;letter-spacing:.08em;
  color:var(--tinta-2)}
.references ol{padding-left:1.3em}
.references a{color:var(--azul);word-break:break-word}

/* CTA banner -------------------------------------------------------------- */
.cta-banner{background:linear-gradient(135deg,var(--verde),var(--verde-2));color:#fff;
  text-align:center;border-radius:8px;padding:2.2em 1.4em;margin:2.6em auto;max-width:50em}
.cta-banner h2{color:#fff;text-transform:none;letter-spacing:0;margin:0 0 .4em;font-size:1.4em}
.cta-banner p{margin:0 0 1em;color:rgba(255,255,255,.95)}
.cta-banner .button-cta{display:inline-block;background:#fff;color:var(--verde);font-weight:700;
  text-decoration:none;padding:.8em 1.7em;border-radius:5px;font-size:1.05em}
.cta-banner .button-cta:hover{background:#f1f1f1}
.cta-banner .cta-alt{font-size:.9em;margin:.9em 0 0}
.cta-banner .cta-alt a{color:#fff;text-decoration:underline}

/* Cards (pilares / serviços) e páginas relacionadas ----------------------- */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(15em,1fr));gap:1.1em;
  margin:1.6em 0;text-align:left}
.card{display:block;border:1px solid var(--borda);border-radius:8px;padding:1.3em;
  text-decoration:none;color:var(--tinta);background:#fff;transition:box-shadow .15s,transform .15s}
.card:hover{box-shadow:0 8px 24px rgba(0,0,0,.08);transform:translateY(-2px)}
.card h3{margin:0 0 .4em;color:var(--marrom);font-size:1.1em;text-align:left;text-transform:none;letter-spacing:0}
.card p{margin:0;font-size:.92em;color:var(--tinta-2);line-height:1.6}
.card .card-go{display:inline-block;margin-top:.7em;color:var(--verde);font-weight:700;font-size:.9em}

.related{margin:2.6em 0 0}
.related h2{text-align:left;text-transform:none;letter-spacing:0;color:var(--marrom);font-size:1.3em}

/* ==========================================================================
   Rodapé unificado (#site-footer) — único em todo o site (home + internas).
   Substitui o antigo mapa de links E a "onda" verde do tema legado.
   1) faixa de contato (CTA)  2) marca + NAP + redes  3) mapa de links
   curado (top N + "Ver todos")  4) sub-rodapé com copyright único.
   ========================================================================== */
#site-footer{background:#241a12;color:rgba(255,255,255,.82);font-size:16px;
  line-height:1.5;text-align:left;text-transform:none}
#site-footer a{border:0;text-decoration:none;color:rgba(255,255,255,.82)}
#site-footer a:hover,#site-footer a:focus-visible{color:var(--verde-2);text-decoration:underline}

/* 1. Faixa de contato (lead) — assume o papel da antiga onda verde -------- */
.sf-lead{background:linear-gradient(135deg,var(--verde-escuro) 0%,var(--verde) 100%);
  color:#fff;padding:2.4em 1.2em}
.sf-lead-inner{max-width:72em;margin:0 auto;display:flex;align-items:center;
  justify-content:space-between;gap:1.6em 2.4em;flex-wrap:wrap}
.sf-lead-text{flex:1 1 24em;min-width:0}
.sf-lead-text h2{color:#fff;margin:0 0 .35em;font-size:1.5em;line-height:1.2;
  letter-spacing:.01em;text-transform:none;text-align:left}
.sf-lead-text p{color:rgba(255,255,255,.95);margin:0;font-size:1em;max-width:42em}
.sf-lead-cta{flex:0 0 auto;display:flex;flex-direction:column;align-items:flex-start;gap:.55em}
.sf-zap{display:inline-flex;align-items:center;gap:.5em;background:#fff;color:var(--marrom);
  font-weight:700;padding:.85em 1.6em;border-radius:6px;font-size:1.02em;
  min-height:48px;box-shadow:0 4px 14px rgba(0,0,0,.18)}
.sf-zap:hover,.sf-zap:focus-visible{background:var(--marrom);color:#fff;text-decoration:none}
.sf-zap-ic{font-size:1.15em;line-height:1}
.sf-mail{color:rgba(255,255,255,.95);font-size:.9em}
.sf-mail:hover,.sf-mail:focus-visible{color:#fff}

/* 2 + 3. Corpo: marca + colunas ------------------------------------------ */
.sf-body{max-width:72em;margin:0 auto;padding:2.8em 1.2em 1.4em;display:grid;
  grid-template-columns:minmax(15em,22em) 1fr;gap:2.4em 2.2em;align-items:start}

/* Bloco de marca / NAP */
.sf-brand{min-width:0}
.sf-brand-lockup{display:inline-flex;align-items:center;gap:.6em;font-size:1.18em;
  letter-spacing:.01em;color:#fff}
.sf-brand-lockup:hover,.sf-brand-lockup:focus-visible{text-decoration:none;color:#fff}
.sf-avatar{border-radius:50%;flex:0 0 auto;border:2px solid var(--verde-2);background:#fff}
.sf-wordmark strong{color:var(--verde-2);font-weight:700}
.sf-pitch{margin:.9em 0 0;font-size:.92em;color:rgba(255,255,255,.74);max-width:30em}
.sf-pitch strong{color:rgba(255,255,255,.92);font-weight:600}
.sf-nap{font-style:normal;margin:1em 0 0;display:flex;flex-direction:column;gap:.3em;font-size:.92em}
.sf-nap-zap{font-weight:700;color:var(--verde-2)!important}
.sf-nap-meta{color:rgba(255,255,255,.6);font-size:.88em}
.sf-social{list-style:none;margin:1.1em 0 0;padding:0;display:flex;flex-wrap:wrap;gap:.5em}
.sf-social a{display:inline-flex;align-items:center;min-height:36px;padding:.35em .8em;
  font-size:.82em;border:1px solid rgba(255,255,255,.18);border-radius:999px;
  color:rgba(255,255,255,.82)}
.sf-social a:hover,.sf-social a:focus-visible{border-color:var(--verde-2);color:var(--verde-2);
  text-decoration:none;background:rgba(78,185,128,.1)}

/* Colunas de links (clusters) */
.sf-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(11em,1fr));
  gap:1.6em 1.8em;align-content:start}
.sf-col h3{color:#fff;font-size:.78em;text-transform:uppercase;letter-spacing:.1em;
  text-align:left;margin:0 0 .7em;padding-bottom:.5em;border-bottom:1px solid rgba(255,255,255,.14)}
.sf-col ul{margin:0;padding:0;list-style:none}
.sf-col li{margin:0}
.sf-col li a{display:block;padding:.32em 0;font-size:.9em;color:rgba(255,255,255,.74)}
.sf-col li a:hover,.sf-col li a:focus-visible{color:var(--verde-2)}
.sf-all a{font-weight:700;color:var(--verde-2)!important;margin-top:.2em}

/* 4. Sub-rodapé ----------------------------------------------------------- */
.sf-bar{max-width:72em;margin:0 auto;padding:1.1em 1.2em 1.6em;
  border-top:1px solid rgba(255,255,255,.12);display:flex;justify-content:space-between;
  align-items:center;gap:.6em 1.5em;flex-wrap:wrap}
.sf-copy,.sf-bar-zap{margin:0;font-size:.82em;color:rgba(255,255,255,.6)}
.sf-bar-zap a{color:rgba(255,255,255,.72)}
.sf-bar-zap a:hover,.sf-bar-zap a:focus-visible{color:var(--verde-2)}

/* Responsivo -------------------------------------------------------------- */
@media screen and (max-width:980px){
  .sf-body{grid-template-columns:1fr;gap:2em}
}
@media screen and (max-width:736px){
  .sf-lead{padding:2em 1em;text-align:center}
  .sf-lead-inner{justify-content:center}
  .sf-lead-text h2{font-size:1.3em;text-align:center}
  .sf-lead-cta{align-items:stretch;width:100%}
  .sf-zap{justify-content:center;width:100%}
  .sf-mail{text-align:center}
  .sf-body{padding:2.2em 1em 1.2em}
  .sf-cols{grid-template-columns:1fr 1fr;gap:1.4em}
  .sf-brand{text-align:center}
  .sf-brand-lockup{justify-content:center}
  .sf-nap{align-items:center}
  .sf-social{justify-content:center}
  .sf-bar{justify-content:center;text-align:center;flex-direction:column}
}
@media screen and (max-width:460px){
  .sf-cols{grid-template-columns:1fr}
  .sf-col li a{padding:.5em 0}
}

/* Botão CTA reutilizável (hero da home, seções) ------------------------- */
.btn-zap{display:inline-block;background:var(--verde);color:#fff;text-decoration:none;
  font-weight:700;padding:.8em 1.7em;border-radius:5px;text-transform:uppercase;
  letter-spacing:.05em;font-size:.85em;border:0;margin-top:1em}
.btn-zap:hover{background:var(--verde-escuro);color:#fff}
#header .btn-zap{color:#fff;border-bottom:0}
#header .btn-zap:hover{color:#fff;border-bottom:0}

/* Grade de serviços na home (usa .cards/.card) — centraliza títulos do tema */
#main .cards .card h3{margin-bottom:.4em}

/* Botão flutuante e camada-base agora vivem em base.css (compartilhado). --- */

/* Impressão: abre todos os FAQs (details) para não esconder respostas ----- */
@media print{.faq details>*{display:block!important}}

/* Data visível de atualização (render_updated) --------------------------- */
.updated{margin:0 0 1.4em;color:var(--tinta-2)}
.updated small{font-size:.82em;text-transform:none;letter-spacing:0}

/* Largura total das tabelas de conteúdo (ex.: .data-table em /performance/) */
.article table{width:100%}