/* ==========================================================
   Aguativa Serviços Ambientais — CSS compartilhado (não crítico)
   Carregado de forma assíncrona (media="print" + onload).
   Variáveis, reset, tipografia, header, hero, botões e eyebrow
   já vêm no <style> crítico inline do <head> — não duplicar aqui.
   ========================================================== */

/* ---- seções ---- */
.section{ padding-block:var(--esp-5); }
@media (min-width:860px){ .section{ padding-block:calc(var(--esp-5) * 1.5); } }
.section--neutro{ background:var(--color-neutro); }
.section--petroleo{ background:var(--color-petroleo); }
.section--petroleo h2,
.section--petroleo .section__intro{ color:#fff; }
.section--petroleo .eyebrow{ color:var(--color-secundaria); }
.section--petroleo .eyebrow::before{ background:var(--color-secundaria); }
.section__head{ margin-bottom:var(--esp-4); }
.section__intro{ max-width:68ch; font-size:1.0625rem; }

/* ---- #problemas ---- */
.problemas-grid{
  display:grid; grid-template-columns:1fr; gap:var(--esp-3);
  margin-top:var(--esp-4);
}
@media (min-width:600px){ .problemas-grid{ grid-template-columns:1fr 1fr; } }
@media (min-width:860px){ .problemas-grid{ grid-template-columns:repeat(3,1fr); } }
.problema-card{ padding-top:var(--esp-2); border-top:1px solid var(--color-borda); }
.problema-card h3{ margin-bottom:8px; }
.problema-card--fechamento{
  background:var(--color-neutro); border-top:3px solid var(--color-primaria);
  padding:var(--esp-3); border-radius:8px;
}
.problema-card--fechamento .btn{ margin-top:12px; }

/* ---- #servicos ---- */
.servicos__grupo{
  font-family:var(--font-mono); font-size:.8125rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.05em; color:var(--color-texto-suave);
  margin:var(--esp-4) 0 var(--esp-2);
}
.servicos__grupo:first-of-type{ margin-top:var(--esp-3); }

.servicos-grid{ display:grid; grid-template-columns:1fr; gap:var(--esp-3); }
@media (min-width:600px){
  .servicos-grid{ grid-template-columns:repeat(2,1fr); }
  .servico-card--residuos{ grid-column:1 / -1; }
}
@media (min-width:860px){
  .servicos-grid{ grid-template-columns:repeat(6,1fr); }
  .servico-card--residuos,
  .servico-card--tanques,
  .servico-card--reservatorios,
  .servico-card--desentupidora{ grid-column:span 3; }
  .servico-card--hidro,
  .servico-card--ete-eta,
  .servico-card--tratamento-agua{ grid-column:span 2; }
}

.outros-grid{ display:grid; grid-template-columns:1fr; gap:var(--esp-3); }
@media (min-width:600px){ .outros-grid{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:860px){
  .outros-grid{ grid-template-columns:repeat(6,1fr); }
  .servico-card--pipa,
  .servico-card--motobombas,
  .servico-card--filtros{ grid-column:span 2; }
  .servico-card--pocos,
  .servico-card--impermeabilizacao{ grid-column:span 3; }
}

.servico-card{
  background:#fff; border:1px solid var(--color-borda); border-radius:6px;
  overflow:hidden; display:flex; flex-direction:column;
}
.servico-card__media{
  aspect-ratio:3/2; background:var(--color-neutro);
  display:flex; align-items:center; justify-content:center;
}
.servico-card__media img{ width:100%; height:100%; object-fit:cover; }
.servico-card__body{ padding:var(--esp-3); display:flex; flex-direction:column; gap:8px; flex:1; }
.servico-card__body h3{ margin:0; font-size:1.0625rem; }
.servico-card__body h3 a{ text-decoration:none; color:var(--color-grafite); }
.servico-card__body h3 a:hover,
.servico-card__body h3 a:focus-visible{ color:var(--color-primaria-escura); }
.servico-card__body p{ font-size:.9375rem; flex:1; margin:0; }
.servico-card .btn{ margin-top:8px; align-self:flex-start; }

.servico-card--compact .servico-card__body{ padding:var(--esp-2); }
.servico-card--compact .servico-card__cta{
  display:inline-flex; align-items:center; gap:6px; font-weight:700;
  color:var(--color-primaria-escura); text-decoration:none; font-size:.9375rem;
}
.servico-card--compact .servico-card__cta::after{ content:"→"; }
.servico-card--compact .servico-card__cta:hover,
.servico-card--compact .servico-card__cta:focus-visible{ text-decoration:underline; }

/* ---- #como-funciona ---- */
.processo{
  display:grid; grid-template-columns:1fr; gap:var(--esp-3);
  margin-top:var(--esp-4);
}
@media (min-width:860px){ .processo{ grid-template-columns:repeat(4,1fr); } }
.processo li{ padding-top:var(--esp-2); border-top:1px solid var(--color-borda); }
.processo__numero{
  display:block; font-family:var(--font-mono); font-weight:700;
  font-size:1.75rem; color:var(--color-primaria-escura); margin-bottom:8px;
}
.processo h3{ margin-bottom:6px; }
.processo p{ margin:0; }
.processo + .btn{ margin-top:var(--esp-4); }

/* ---- link discreto "Ver avaliações" (fim do #sobre e antes do FAQ) ---- */
.ver-avaliacoes{ margin:var(--esp-2) 0 0; font-size:.875rem; }
.ver-avaliacoes a{
  display:inline-block; padding-block:12px;
  color:var(--color-texto-suave); text-decoration:underline; text-underline-offset:3px;
}
.ver-avaliacoes a:hover{ color:var(--color-grafite); }

/* ---- #sobre ---- */
/* Segue #como-funciona, também branca: um espaçamento só entre as duas, não o dobro. */
#como-funciona + #sobre{ padding-top:0; }
.sobre-grid{ display:flex; flex-direction:column; gap:var(--esp-4); }
@media (min-width:860px){
  .sobre-grid{ flex-direction:row; gap:var(--esp-5); align-items:flex-start; }
  .sobre__texto{ flex:6; }
  .sobre__diferencial-wrap{ flex:5; }
}
.sobre__diferencial{
  background:var(--color-neutro); border-left:3px solid var(--color-primaria);
  padding:var(--esp-3); border-radius:0 8px 8px 0;
}
.sobre__diferencial h3{ margin-bottom:8px; }
.sobre__diferencial p{ margin:0; }
.sobre__imagem{
  margin-top:var(--esp-3); aspect-ratio:4/3; background:var(--color-neutro);
  border-radius:12px; overflow:hidden; display:flex; align-items:center; justify-content:center;
}
.sobre__imagem img{ width:100%; height:100%; object-fit:cover; }

/* ---- #faq ---- */
.faq-lista{ max-width:800px; margin-top:var(--esp-4); display:flex; flex-direction:column; gap:8px; }
.faq-item{ background:#fff; border:1px solid var(--color-borda); border-radius:8px; }
.faq-item summary{
  list-style:none; cursor:pointer; padding:14px 44px 14px 16px; font-weight:700;
  position:relative; min-height:44px; display:flex; align-items:center; color:var(--color-grafite);
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{
  content:"+"; position:absolute; right:16px; top:50%; transform:translateY(-50%);
  font-size:1.25rem; color:var(--color-primaria-escura); font-weight:700;
}
.faq-item[open] summary::after{ content:"\2013"; }
.faq-item p{ padding:0 16px 16px; margin:0; max-width:none; }

/* ---- #contato ---- */
.contato-card{
  max-width:900px; background:var(--color-neutro); border-radius:12px;
  padding:var(--esp-4); display:flex; flex-direction:column; gap:var(--esp-4);
}
@media (min-width:860px){
  .contato-card{ flex-direction:row; gap:var(--esp-5); }
  .contato__principal{ flex:6; }
  .contato__dados{ flex:5; }
}
.contato__ctas{ display:flex; flex-direction:column; gap:12px; margin-top:var(--esp-3); }
@media (min-width:600px){ .contato__ctas{ flex-direction:row; } }
.contato__dados dl{ margin:0; }
.contato__dados dt{
  font-family:var(--font-mono); font-size:.75rem; text-transform:uppercase;
  letter-spacing:.05em; font-weight:700; color:var(--color-secundaria-escura);
  margin-top:var(--esp-3);
}
.contato__dados dt:first-child{ margin-top:0; }
.contato__dados dd{ margin:4px 0 0; color:var(--color-grafite); }
.contato__dados a{ color:var(--color-primaria-escura); text-decoration:underline; }

/* ---- rodapé ---- */
.rodape{ background:var(--color-petroleo); color:#fff; padding-block:var(--esp-4); }
@media (max-width:767px){ .rodape{ padding-bottom:140px; } }
.rodape a{ color:#fff; text-decoration:none; }
.rodape a:hover,
.rodape a:focus-visible{ text-decoration:underline; }
.rodape-grid{ display:grid; grid-template-columns:1fr; gap:var(--esp-4); }
@media (min-width:600px){ .rodape-grid{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:860px){ .rodape-grid{ grid-template-columns:repeat(4,1fr); } }
.rodape-col img{ margin-bottom:12px; }
.rodape-col p{ color:rgba(255,255,255,.85); font-size:.9375rem; max-width:none; }
.footer__title{
  font-family:var(--font-mono); font-size:.8125rem; text-transform:uppercase;
  letter-spacing:.05em; color:var(--color-secundaria); margin:0 0 12px;
}
.rodape-col ul{ display:flex; flex-direction:column; gap:8px; }
.rodape-col ul li a{ font-size:.9375rem; color:rgba(255,255,255,.9); }
.rodape-base{
  border-top:1px solid rgba(255,255,255,.15); margin-top:var(--esp-4);
  padding-top:var(--esp-3); display:flex; flex-direction:column; gap:12px;
  font-size:.8125rem; color:rgba(255,255,255,.75);
}
.rodape-base p{ color:rgba(255,255,255,.85); max-width:none; margin:0; }
.rodape-base a{ color:rgba(255,255,255,.9); text-decoration:underline; }
.rodape-base__links{ display:flex; flex-direction:column; align-items:center; gap:8px; }
.rodape-base__legal,
.rodape-base__credito{ text-align:center; }
.rodape-base__copyright{ text-align:center; }
@media (min-width:600px){
  .rodape-base__links{ flex-direction:row; justify-content:space-between; align-items:center; }
  .rodape-base__legal{ text-align:left; }
  .rodape-base__credito{ text-align:right; }
}

/* ---- botão flutuante WhatsApp ---- */
.wa-float{
  position:fixed; right:16px; bottom:16px; z-index:900;
  width:56px; height:56px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:#25D366; box-shadow:0 4px 14px rgba(0,0,0,.28);
  transition:bottom .25s ease, transform .2s ease;
}
.wa-float:hover{ transform:scale(1.06); }
.wa-float svg{ width:32px; height:32px; fill:#fff; }
.wa-float::after{
  content:""; position:absolute; inset:0; border-radius:50%;
  border:2px solid #25D366; animation:wa-pulse 2.2s ease-out infinite;
}
@keyframes wa-pulse{
  0%{ transform:scale(1); opacity:.7; }
  100%{ transform:scale(1.7); opacity:0; }
}
body.has-cookie-banner .wa-float{ bottom:196px; }
@media (min-width:768px){
  .wa-float{ width:60px; height:60px; right:24px; bottom:24px; }
  body.has-cookie-banner .wa-float{ bottom:24px; }
}
@media (prefers-reduced-motion:reduce){ .wa-float::after{ animation:none; } }

/* ---- páginas de serviço: #o-servico ---- */
.servico-grid{ display:flex; flex-direction:column; gap:var(--esp-4); }
@media (min-width:860px){
  .servico-grid{ flex-direction:row; gap:var(--esp-5); align-items:flex-start; }
  .servico-grid__texto{ flex:7; }
  .servico-grid__card{ flex:5; }
}
.servico-grid__card{ background:var(--color-neutro); border-radius:8px; padding:var(--esp-3); }
.servico-grid__card h3{ margin-bottom:12px; }

.escopo-lista{ display:grid; grid-template-columns:1fr; gap:var(--esp-3); margin:0; }
@media (min-width:600px){ .escopo-lista{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:860px){ .escopo-lista{ grid-template-columns:repeat(3,1fr); } }
.escopo-lista > div{
  background:#fff; border:1px solid var(--color-borda); border-radius:8px; padding:var(--esp-3);
}
.escopo-lista h3{ margin:0 0 8px; font-size:1.0625rem; }
.escopo-lista p{ margin:0; font-size:.9375rem; }

/* ---- páginas de serviço: #como-fazemos ---- */
.etapas{ display:flex; flex-direction:column; margin-top:var(--esp-4); }
.etapas li{
  display:grid; grid-template-columns:56px 1fr; gap:var(--esp-2);
  padding-block:var(--esp-3); border-top:1px solid var(--color-borda);
}
.etapas li:first-child{ border-top:0; padding-top:0; }
.etapas__numero{ font-family:var(--font-mono); font-weight:700; font-size:1.5rem; color:var(--color-primaria-escura); }
.etapas h3{ margin-bottom:6px; }
.etapas p{ margin:0; }

/* ---- páginas de serviço: #seguranca-e-documentacao ---- */
.seguranca-lista{ display:flex; flex-direction:column; gap:var(--esp-3); margin-top:var(--esp-4); }
.seguranca-lista li{ border-left:3px solid var(--color-primaria); padding-left:var(--esp-2); }
.seguranca-lista strong{ display:block; color:var(--color-grafite); margin-bottom:2px; }
.seguranca-lista p{ margin:0; }

/* ---- banner de cookies / LGPD ---- */
.fl-cookie{
  position:fixed; left:0; right:0; bottom:0; z-index:950;
  background:#fff; border-top:1px solid var(--color-borda);
  box-shadow:0 -4px 18px rgba(0,0,0,.12);
  padding:16px; font-size:.875rem; line-height:1.5; color:var(--color-grafite);
}
.fl-cookie p{ margin:0 0 12px; max-width:none; }
.fl-cookie a{ color:var(--color-primaria-escura); text-decoration:underline; }
.fl-cookie-acoes{ display:flex; gap:8px; flex-wrap:wrap; }
.fl-cookie button{
  font:inherit; font-weight:700; cursor:pointer;
  padding:10px 18px; border-radius:6px; border:1px solid transparent;
}
#fl-accept{ background:var(--color-primaria-escura); color:#fff; }
#fl-reject{ background:#fff; color:var(--color-grafite); border-color:var(--color-borda); }
@media (min-width:768px){
  .fl-cookie{
    left:24px; right:auto; bottom:24px; max-width:380px;
    border:1px solid var(--color-borda); border-radius:10px;
    box-shadow:0 8px 28px rgba(0,0,0,.16);
  }
}