/* Desentupidora Nova União — folha de estilos compartilhada */
:root{
  --ink:#101E28;
  --ink-2:#16293A;
  --surface:#ECEFEE;
  --surface-2:#FFFFFF;
  --accent:#E8572A;
  --accent-dark:#C7481F;
  --teal:#146B63;
  --teal-light:#1C8A80;
  --text:#12202A;
  --text-muted:#4B5B63;
  --line:#D7DBD9;
  --line-dark:#28404E;
  --radius-card:2px;
  --radius-chip:4px;
  --maxw:1180px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--surface-2);
  color:var(--text);
  font-family:'Public Sans', -apple-system, sans-serif;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important;}
}

h1,h2,h3{
  font-family:'Big Shoulders Display', sans-serif;
  font-weight:800;
  line-height:1.02;
  margin:0;
  color:var(--ink);
  letter-spacing:0.2px;
}
p{margin:0;}
a{color:inherit; text-decoration:none;}
ul{margin:0; padding:0; list-style:none;}
img,svg{display:block; max-width:100%;}
button{font-family:inherit; cursor:pointer;}

.wrap{max-width:var(--maxw); margin:0 auto; padding:0 24px;}

a:focus-visible, button:focus-visible, summary:focus-visible{
  outline:3px solid var(--teal-light);
  outline-offset:2px;
}

/* ---------- Top strip ---------- */
.topstrip{background:var(--ink); color:#CBD6DA; font-size:13.5px;}
.topstrip .wrap{
  display:flex; justify-content:space-between; align-items:center;
  padding-top:8px; padding-bottom:8px; gap:12px; flex-wrap:wrap;
}
.topstrip a{color:#EDEFEE;}
.topstrip a:hover{color:var(--accent);}

/* ---------- Header ---------- */
header.site{position:sticky; top:0; z-index:50; background:var(--surface-2); border-bottom:1px solid var(--line);}
header.site .wrap{display:flex; align-items:center; justify-content:space-between; padding-top:12px; padding-bottom:12px; gap:16px;}
.brand{display:flex; align-items:center; gap:10px;}
.brand img.logo{height:40px; width:auto;}
nav.primary{display:flex; gap:26px;}
nav.primary a{font-size:15px; font-weight:600; color:var(--text);}
nav.primary a:hover{color:var(--teal);}
.header-actions{display:flex; align-items:center; gap:12px;}
.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:12px 20px; font-weight:700; font-size:15px;
  border-radius:var(--radius-card); border:2px solid transparent;
  transition:background-color .15s ease, color .15s ease, border-color .15s ease;
  white-space:nowrap;
}
.btn svg{width:18px; height:18px; flex:none;}
.btn-accent{background:var(--accent); color:#fff;}
.btn-accent:hover{background:var(--accent-dark);}
.btn-outline{background:transparent; color:var(--ink); border-color:var(--ink);}
.btn-outline:hover{background:var(--ink); color:#fff;}
.btn-ghost-light{background:transparent; color:#fff; border-color:rgba(255,255,255,.5);}
.btn-ghost-light:hover{border-color:#fff;}

/* ---------- Breadcrumb (bairro pages) ---------- */
.breadcrumb{background:var(--surface); border-bottom:1px solid var(--line);}
.breadcrumb .wrap{padding-top:12px; padding-bottom:12px; display:flex; gap:8px; flex-wrap:wrap; font-size:13.5px; color:var(--text-muted);}
.breadcrumb a{color:var(--teal); font-weight:600;}
.breadcrumb a:hover{text-decoration:underline;}

/* ---------- Hero ---------- */
.hero{background:var(--ink); color:#fff; overflow:hidden;}
.hero .wrap{display:grid; grid-template-columns:1.1fr 0.9fr; gap:48px; align-items:center; padding-top:64px; padding-bottom:56px;}
.hero h1{color:#fff; font-size:clamp(34px,5vw,58px);}
.hero .lede{margin-top:20px; max-width:48ch; font-size:18px; color:#C9D3D6;}
.hero .cta-row{margin-top:30px; display:flex; gap:14px; flex-wrap:wrap;}
.trust-list{margin-top:34px; display:flex; flex-direction:column; gap:10px;}
.trust-list li{display:flex; align-items:center; gap:10px; font-size:14.5px; color:#DCE3E4;}
.trust-list svg{width:18px; height:18px; color:var(--teal-light); flex:none;}
.hero-art{position:relative;}
.hero-art svg{width:100%; height:auto;}
.hero-art .flow{stroke-dasharray:900; stroke-dashoffset:900; animation:draw 1.8s ease-out forwards .2s;}
@keyframes draw{ to{stroke-dashoffset:0;} }
@media (prefers-reduced-motion: reduce){ .hero-art .flow{animation:none; stroke-dashoffset:0;} }

/* smaller hero for bairro pages */
.hero.hero-compact .wrap{padding-top:48px; padding-bottom:40px; grid-template-columns:1fr;}
.hero.hero-compact h1{font-size:clamp(28px,4.4vw,44px); max-width:22ch;}

/* ---------- Section shell ---------- */
section{padding:76px 0;}
section.compact{padding:56px 0;}
.section-head{max-width:640px; margin-bottom:44px;}
.section-head h2{font-size:clamp(28px,3.4vw,40px);}
.section-head p{margin-top:14px; font-size:16.5px; color:var(--text-muted);}
.tag{display:inline-block; font-size:13px; font-weight:700; color:var(--teal); border:1.5px solid var(--teal); border-radius:var(--radius-chip); padding:4px 10px; margin-bottom:14px;}

/* ---------- Services ---------- */
.service-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line);}
.service-grid.compact{grid-template-columns:repeat(4,1fr);}
.service-card{background:var(--surface-2); padding:26px 22px; border-left:4px solid var(--teal);}
.service-card svg{width:30px; height:30px; color:var(--teal); margin-bottom:16px;}
.service-card h3{font-family:'Public Sans', sans-serif; font-weight:700; font-size:17px; color:var(--ink); margin-bottom:8px;}
.service-card p{font-size:14.5px; color:var(--text-muted);}

/* ---------- Diferenciais (dark band) ---------- */
.band-dark{background:var(--ink-2); color:#fff;}
.band-dark .section-head h2{color:#fff;}
.band-dark .section-head p{color:#B7C3C7;}
.diff-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:32px 28px;}
.diff-item{display:flex; gap:14px;}
.diff-item svg{width:26px; height:26px; color:var(--accent); flex:none; margin-top:2px;}
.diff-item h3{font-family:'Public Sans',sans-serif; font-weight:700; font-size:16.5px; color:#fff; margin-bottom:4px;}
.diff-item p{font-size:14.5px; color:#B7C3C7;}

/* ---------- Área de atendimento / bairros ---------- */
.area-wrap{display:grid; grid-template-columns:0.9fr 1.1fr; gap:48px; align-items:start;}
.chip-list{display:flex; flex-wrap:wrap; gap:10px;}
.chip{font-size:14px; font-weight:600; color:var(--ink); border:1.5px solid var(--line); background:var(--surface); padding:9px 14px; border-radius:var(--radius-chip);}
.chip.is-main{background:var(--teal); border-color:var(--teal); color:#fff;}
.chip.is-link:hover{border-color:var(--teal); color:var(--teal);}

/* ---------- Como funciona ---------- */
.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:28px;}
.step{border-top:3px solid var(--accent); padding-top:20px;}
.step .num{font-family:'Big Shoulders Display', sans-serif; font-weight:800; font-size:44px; color:var(--accent); line-height:1;}
.step h3{font-family:'Public Sans',sans-serif; font-weight:700; font-size:18px; margin-top:10px; margin-bottom:8px;}
.step p{font-size:14.5px; color:var(--text-muted);}

/* ---------- Bairro info block ---------- */
.local-block{display:grid; grid-template-columns:1.1fr 0.9fr; gap:40px; align-items:start;}
.local-block .card{background:var(--surface); border-left:4px solid var(--accent); padding:26px 24px;}
.local-block .card h3{font-family:'Public Sans',sans-serif; font-weight:700; font-size:16px; margin-bottom:10px; color:var(--ink);}
.local-block .card p{font-size:14.5px; color:var(--text-muted);}
.nearby-list{display:flex; flex-wrap:wrap; gap:10px; margin-top:14px;}

/* ---------- FAQ ---------- */
.faq-list{max-width:760px; border-top:1px solid var(--line);}
details{border-bottom:1px solid var(--line);}
details summary{list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:20px 4px; font-weight:700; font-size:16.5px; color:var(--ink);}
details summary::-webkit-details-marker{display:none;}
.faq-icon{flex:none; width:22px; height:22px; position:relative;}
.faq-icon::before, .faq-icon::after{content:''; position:absolute; background:var(--teal); top:50%; left:50%; transform:translate(-50%,-50%);}
.faq-icon::before{width:14px; height:2px;}
.faq-icon::after{width:2px; height:14px; transition:transform .18s ease;}
details[open] .faq-icon::after{transform:translate(-50%,-50%) rotate(90deg); opacity:0;}
details p{padding:0 4px 22px; max-width:64ch; font-size:15px; color:var(--text-muted);}

/* ---------- Final CTA ---------- */
.cta-band{background:var(--accent); color:#101010; text-align:left;}
.cta-band .wrap{display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;}
.cta-band h2{color:#161000; font-size:clamp(24px,3.2vw,34px); max-width:22ch;}
.cta-band .cta-row{display:flex; gap:14px; flex-wrap:wrap;}
.cta-band .btn-outline{border-color:#161000; color:#161000;}
.cta-band .btn-outline:hover{background:#161000; color:var(--accent);}
.cta-band .btn-dark{background:#161000; color:#fff;}
.cta-band .btn-dark:hover{background:#000;}

/* ---------- Bairros index page ---------- */
.bairros-index{columns:4; column-gap:32px;}
.bairros-index .letter-group{break-inside:avoid; margin-bottom:26px;}
.bairros-index .letter-group h3{font-family:'Public Sans',sans-serif; font-weight:700; font-size:15px; color:var(--teal); margin-bottom:10px; border-bottom:1px solid var(--line); padding-bottom:6px;}
.bairros-index .letter-group ul li{margin-bottom:7px;}
.bairros-index .letter-group a{font-size:14.5px; color:var(--text);}
.bairros-index .letter-group a:hover{color:var(--accent);}

/* ---------- Footer ---------- */
footer{background:var(--ink); color:#AEBBC0; padding:52px 0 28px;}
.footer-grid{display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:32px; padding-bottom:32px; border-bottom:1px solid var(--line-dark);}
footer h4{font-family:'Public Sans',sans-serif; font-weight:700; font-size:14.5px; color:#fff; margin-bottom:14px;}
.footer-logo{display:inline-block; background:#fff; padding:10px 14px; border-radius:4px; margin-bottom:14px;}
.footer-logo img{height:30px; width:auto;}
footer p.desc{font-size:14px; max-width:38ch;}
footer ul li{margin-bottom:9px; font-size:14px;}
footer a:hover{color:var(--accent);}
.footer-bottom{padding-top:20px; display:flex; justify-content:space-between; font-size:13px; color:#7E8E94; flex-wrap:wrap; gap:8px;}

/* ---------- WhatsApp float ---------- */
.wa-float{
  position:fixed; right:20px; bottom:20px; z-index:60;
  background:var(--teal); color:#fff; width:58px; height:58px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 6px 18px rgba(0,0,0,.28);
  transition:transform .15s ease, background-color .15s ease;
}
.wa-float:hover{background:var(--teal-light); transform:translateY(-2px);}
.wa-float svg{width:28px; height:28px;}

/* ---------- Photo placeholder (marked clearly — replace with real photos) ---------- */
.photo-slot{
  border:2px dashed var(--line-dark, #B9C3C1);
  background:repeating-linear-gradient(135deg, #F4F5F4, #F4F5F4 10px, #ECEFEE 10px, #ECEFEE 20px);
  color:var(--text-muted); font-size:13px; font-weight:600;
  display:flex; align-items:center; justify-content:center; text-align:center;
  min-height:220px; padding:16px; border-radius:2px;
}

/* ---------- Responsive ---------- */
@media (max-width:980px){
  .hero .wrap{grid-template-columns:1fr; padding-top:44px;}
  .hero-art{order:-1; max-width:360px;}
  .service-grid{grid-template-columns:repeat(2,1fr);}
  .diff-grid{grid-template-columns:repeat(2,1fr);}
  .area-wrap{grid-template-columns:1fr;}
  .steps{grid-template-columns:1fr;}
  .footer-grid{grid-template-columns:1fr 1fr;}
  .local-block{grid-template-columns:1fr;}
  .bairros-index{columns:2;}
}
@media (max-width:720px){
  nav.primary{display:none;}
  .header-actions .btn-outline{display:none;}
  .service-grid{grid-template-columns:1fr;}
  .diff-grid{grid-template-columns:1fr;}
  .cta-band .wrap{flex-direction:column; align-items:flex-start;}
  .footer-grid{grid-template-columns:1fr;}
  .topstrip .wrap{font-size:12.5px;}
  .bairros-index{columns:1;}
}