/* Esgomafra Água Potável — Design exclusivo (não baseado no site principal)
   Autor: ChatGPT
*/
:root{
  --bg: #071821;
  --bg2:#0B2B3A;
  --card:#0E3346;
  --ink:#EAF6FF;
  --muted:#B9D3E3;
  --line: rgba(234,246,255,.12);
  --aqua:#14C8D6;
  --cyan:#2BE4B8;
  --blue:#2D7FF9;
  --warn:#F8D35E;
  --shadow: 0 28px 70px rgba(0,0,0,.45);
  --shadow2: 0 14px 40px rgba(0,0,0,.28);
  --radius: 18px;
  --radius2: 26px;
  --container: 1160px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family: "Manrope", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: radial-gradient(1200px 650px at 15% 10%, rgba(20,200,214,.18), transparent 55%),
              radial-gradient(900px 600px at 88% 16%, rgba(45,127,249,.16), transparent 60%),
              linear-gradient(180deg, #06131B 0%, #071821 35%, #06131B 100%);
  color:var(--ink);
  overflow-x:hidden;
}

a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.skip{
  position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden;
}
.skip:focus{left:12px;top:12px;width:auto;height:auto;padding:10px 12px;background:#fff;color:#000;border-radius:10px;z-index:9999}

.container{
  width:min(var(--container), calc(100% - 40px));
  margin-inline:auto;
}

.topbar{
  position:sticky; top:0; z-index:1000;
  background: rgba(6,19,27,.55);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(234,246,255,.08);
}
.topbar__inner{
  display:flex; align-items:center; justify-content:space-between;
  padding: 14px 0;
}

.brand{
  display:flex; align-items:center; gap:8px;
}
.brand__mark{
  width:38px; height:38px; border-radius:14px;
  background: linear-gradient(135deg, rgba(20,200,214,.22), rgba(45,127,249,.18));
  border:1px solid rgba(234,246,255,.12);
  position:relative;
  box-shadow: 0 14px 30px rgba(0,0,0,.25);
  overflow:hidden;
}
.brand__mark .dot{
  width:10px; height:10px; border-radius:999px;
  background: linear-gradient(135deg, var(--aqua), var(--cyan));
  position:absolute; left:10px; top:10px;
  filter: drop-shadow(0 10px 18px rgba(20,200,214,.3));
}
.brand__mark .ring{
  width:26px; height:26px; border-radius:999px;
  border: 2px solid rgba(20,200,214,.35);
  position:absolute; right:-6px; bottom:-8px;
  transform: rotate(14deg);
}
.brand__text{display:flex;flex-direction:column;line-height:1.05}
.brand__name{font-weight:800; letter-spacing:.2px}
.brand__sub{font-weight:700; color: var(--muted); font-size: 12.5px}

.nav{display:flex; align-items:center; gap:8px}
.nav__toggle{
  display:none;
  width:44px;height:44px;border-radius:14px;
  background: rgba(234,246,255,.06);
  border:1px solid rgba(234,246,255,.12);
  cursor:pointer;
}
.nav__toggle span{
  display:block; height:2px; margin:6px 10px;
  background: rgba(234,246,255,.92);
  border-radius:999px;
}
.nav__panel{
  display:flex; align-items:center; gap:8px;
}
.nav__link{
  font-size:14px;
  color: rgba(234,246,255,.86);
  padding:10px 10px;
  border-radius: 12px;
  transition: background .2s ease, color .2s ease;
}
.nav__link:hover{background: rgba(234,246,255,.06); color: #fff}

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:8px;
  padding: 12px 16px;
  border-radius: 14px;
  border: 1px solid rgba(234,246,255,.12);
  background: rgba(234,246,255,.06);
  color:#fff;
  font-weight:800;
  letter-spacing:.2px;
  box-shadow: 0 12px 28px rgba(0,0,0,.18);
  transition: transform .15s ease, background .2s ease, border-color .2s ease;
}
.btn:hover{transform: translateY(-1px); background: rgba(234,246,255,.08)}
.btn:active{transform: translateY(0px)}
.btn--primary{
  background: linear-gradient(135deg, #133351 0%, #0772a6 100%);
  border-color: rgba(20,200,214,.35);
  color:#041318;
}
.btn--primary:hover{background: linear-gradient(135deg, #133351 0%, #0772a6 100%)}
.btn--ghost{
  background: transparent;
  border-color: rgba(234,246,255,.18);
  box-shadow:none;
}
.btn--full{width:100%}

.hero{
  position:relative;
  padding: 62px 0 0;
}
.hero__bg{
  position:absolute; inset:0;
  background:
    radial-gradient(1000px 540px at 70% 30%, rgba(20,200,214,.20), transparent 60%),
    radial-gradient(800px 520px at 92% 52%, rgba(45,127,249,.18), transparent 62%),
    radial-gradient(700px 500px at 25% 10%, rgba(248,211,94,.10), transparent 62%);
  pointer-events:none;
}
.hero__grid{
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 8px;
  align-items:center;
  padding-bottom: 34px;
}
.badge{
  display:inline-flex; align-items:center; gap:8px;
  padding: 10px 12px;
  border-radius: 999px;
  background: rgba(234,246,255,.06);
  border:1px solid rgba(234,246,255,.12);
}
.badge__pulse{
  width:10px;height:10px;border-radius:999px;
  background: linear-gradient(135deg, var(--aqua), var(--cyan));
  box-shadow: 0 0 0 0 rgba(20,200,214,.55);
  animation:pulse 2.2s infinite;
}
@keyframes pulse{
  0%{box-shadow: 0 0 0 0 rgba(20,200,214,.55)}
  70%{box-shadow: 0 0 0 14px rgba(20,200,214,0)}
  100%{box-shadow: 0 0 0 0 rgba(20,200,214,0)}
}
.badge__text{font-weight:800;font-size:13px;color:rgba(234,246,255,.90)}

.hero__h1{
  margin: 14px 0 14px;
  font-size: clamp(34px, 4vw, 56px);
  line-height: 1.02;
  letter-spacing: -0.9px;
}
.grad{
  background: linear-gradient(135deg, var(--aqua), var(--cyan), var(--blue));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.hero__p{
  margin:0 0 20px;
  color: rgba(234,246,255,.82);
  font-size: 16.5px;
  line-height: 1.55;
  max-width: 52ch;
}
.hero__actions{display:flex; gap:8px; flex-wrap:wrap; margin-bottom: 8px}

.hero__facts{
  display:flex; gap:8px; flex-wrap:wrap;
}
.fact{
  background: rgba(234,246,255,.05);
  border: 1px solid rgba(234,246,255,.10);
  border-radius: 16px;
  padding: 12px 14px;
  min-width: 160px;
}
.fact__k{font-size:12px; color: rgba(234,246,255,.72); font-weight:700}
.fact__v{font-size:14px; font-weight:900; margin-top:4px}

.hero__visual{
  position:relative;
  min-height: 420px;
  border-radius: var(--radius2);
  background: linear-gradient(135deg, rgba(234,246,255,.06), rgba(234,246,255,.02));
  border:1px solid rgba(234,246,255,.10);
  box-shadow: var(--shadow);
  overflow: visible;
}
.truck{
  position:absolute;
  right: -120px;
  bottom: -18px;
  width: min(720px, 62vw);
  filter: drop-shadow(0 28px 60px rgba(0,0,0,.55));
  transform: translateZ(0);
}
.hero__glow{
  position:absolute;
  inset:-30px -60px -80px -40px;
  background: radial-gradient(420px 240px at 65% 55%, rgba(20,200,214,.30), transparent 60%),
              radial-gradient(420px 260px at 70% 40%, rgba(45,127,249,.22), transparent 60%);
  filter: blur(6px);
  pointer-events:none;
}
.hero__card{
  position:absolute;
  left: 18px;
  bottom: 18px;
  width: min(330px, 70%);
  background: rgba(6,19,27,.55);
  border: 1px solid rgba(234,246,255,.14);
  border-radius: 18px;
  padding: 14px 14px 14px;
  backdrop-filter: blur(12px);
  box-shadow: var(--shadow2);
}
.hero__cardTitle{font-weight:900; letter-spacing:-0.2px}
.hero__cardText{margin-top:6px; color:rgba(234,246,255,.78); font-size:13.5px; line-height:1.45}

.hero__wave svg{display:block;width:100%;height:110px}
.hero__wave path{
  fill: rgba(234,246,255,.03);
  stroke: rgba(234,246,255,.06);
  stroke-width: 1px;
}

.section{
  padding: 72px 0;
}
.section--alt{
  background: linear-gradient(180deg, rgba(234,246,255,.03), rgba(234,246,255,.02));
  border-top:1px solid rgba(234,246,255,.06);
  border-bottom:1px solid rgba(234,246,255,.06);
}
.section__head{margin-bottom: 8px}
.h2{
  margin:0 0 10px;
  font-size: clamp(24px, 2.2vw, 34px);
  letter-spacing: -0.5px;
}
.h3{
  margin:0 0 8px;
  font-size: 17px;
  letter-spacing: -0.2px;
}
.lead{
  margin:0;
  color: rgba(234,246,255,.80);
  line-height:1.6;
  max-width: 74ch;
}

.grid-4{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-top: 20px;
}
.tile{
  background: rgba(234,246,255,.04);
  border:1px solid rgba(234,246,255,.10);
  border-radius: var(--radius);
  padding: 18px;
  box-shadow: 0 16px 42px rgba(0,0,0,.20);
  transition: transform .18s ease, border-color .2s ease;
}
.tile:hover{transform: translateY(-2px); border-color: rgba(20,200,214,.30)}
.tile__icon{
  width:44px;height:44px;border-radius:16px;
  display:flex;align-items:center;justify-content:center;
  background: linear-gradient(135deg, rgba(20,200,214,.20), rgba(45,127,249,.16));
  border: 1px solid rgba(234,246,255,.12);
  margin-bottom: 8px;
}

.callout{
  margin-top: 18px;
  display:flex; align-items:center; justify-content:space-between;
  gap: 8px;
  padding: 18px 18px;
  border-radius: 22px;
  background: linear-gradient(135deg, rgba(20,200,214,.14), rgba(45,127,249,.10));
  border: 1px solid rgba(20,200,214,.22);
}
.callout__text{display:flex; flex-direction:column; gap:8px}
.callout__text strong{font-size: 15px}
.callout__text span{color: rgba(234,246,255,.80); font-size: 14px; line-height:1.4}

.steps{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 18px;
}
.step{
  position:relative;
  padding: 18px;
  border-radius: var(--radius);
  background: rgba(234,246,255,.04);
  border:1px solid rgba(234,246,255,.10);
  box-shadow: 0 16px 40px rgba(0,0,0,.18);
}
.step__n{
  width:42px;height:42px;border-radius:16px;
  display:flex;align-items:center;justify-content:center;
  background: linear-gradient(135deg, rgba(20,200,214,.95), rgba(45,127,249,.92));
  color:#041318;
  font-weight:900;
  box-shadow: 0 18px 44px rgba(20,200,214,.18);
}
.step__body{margin-top: 12px}
.step p{margin:0; color: rgba(234,246,255,.80); line-height:1.55; font-size: 14.5px}

.split{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 18px;
}
.panel{
  border-radius: var(--radius2);
  background: rgba(234,246,255,.04);
  border:1px solid rgba(234,246,255,.10);
  padding: 18px;
  box-shadow: 0 18px 50px rgba(0,0,0,.20);
}
.panel--dark{
  background: linear-gradient(135deg, rgba(11,43,58,.92), rgba(7,24,33,.85));
  border-color: rgba(20,200,214,.18);
}
.check{list-style:none; padding:0; margin: 10px 0 0; display:grid; gap:8px}
.check li{
  position:relative;
  padding-left: 30px;
  color: rgba(234,246,255,.82);
  line-height:1.45;
}
.check li::before{
  content:"";
  position:absolute; left:0; top:4px;
  width:18px;height:18px;border-radius:7px;
  background: linear-gradient(135deg, rgba(20,200,214,.95), rgba(45,127,249,.92));
}
.check--light li{color: rgba(234,246,255,.90)}
.check--light li::before{background: linear-gradient(135deg, rgba(43,228,184,.96), rgba(20,200,214,.90))}

.grid-3{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 18px;
}
.card{
  padding: 18px;
  border-radius: var(--radius);
  background: rgba(234,246,255,.04);
  border:1px solid rgba(234,246,255,.10);
  box-shadow: 0 16px 40px rgba(0,0,0,.18);
}
.card p{margin:0;color: rgba(234,246,255,.80); line-height:1.6}

.note{
  margin-top: 18px;
  display:flex; gap: 8px;
  padding: 16px 18px;
  border-radius: 20px;
  background: rgba(248,211,94,.08);
  border: 1px solid rgba(248,211,94,.18);
}
.note__icon{font-size:20px}
.note__text{color: rgba(234,246,255,.86); line-height:1.55}

.services{
  display:grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
  margin-top: 18px;
}
.service{
  padding: 18px;
  border-radius: var(--radius2);
  background: rgba(234,246,255,.04);
  border: 1px solid rgba(234,246,255,.10);
  box-shadow: 0 16px 44px rgba(0,0,0,.18);
}
.service__tag{
  display:inline-flex;
  padding: 6px 10px;
  border-radius: 999px;
  font-weight:900;
  font-size: 12px;
  background: rgba(20,200,214,.14);
  border: 1px solid rgba(20,200,214,.22);
  color: rgba(234,246,255,.92);
  margin-bottom: 8px;
}
.service p{margin:0;color: rgba(234,246,255,.80); line-height:1.6}

.mini-cta{
  margin-top: 18px;
  display:flex;align-items:center;justify-content:space-between;
  gap: 8px;
  padding: 16px 18px;
  border-radius: 20px;
  background: rgba(234,246,255,.03);
  border: 1px solid rgba(234,246,255,.08);
}
.mini-cta__copy{display:flex;flex-direction:column;gap:8px}
.mini-cta__copy span{color: rgba(234,246,255,.78); font-size: 14px}

.contact{
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 8px;
  align-items:stretch;
}
.contact__actions{display:flex;gap:8px;flex-wrap:wrap;margin: 14px 0 12px}
.contact__meta{display:grid;gap:8px;margin-top: 10px}
.meta{
  display:flex;justify-content:space-between; gap: 8px;
  padding: 12px 14px;
  border-radius: 16px;
  background: rgba(234,246,255,.04);
  border: 1px solid rgba(234,246,255,.10);
}
.meta__k{color: rgba(234,246,255,.72); font-weight:800; font-size: 13px}
.meta__v a{color: rgba(234,246,255,.92); font-weight:900}

.contactCard{
  border-radius: 26px;
  background: linear-gradient(135deg, rgba(20,200,214,.12), rgba(45,127,249,.08));
  border: 1px solid rgba(20,200,214,.20);
  box-shadow: var(--shadow);
  padding: 16px;
}
.contactCard__badge{
  display:inline-flex;
  padding: 6px 10px;
  border-radius: 999px;
  font-weight:900;
  font-size: 12px;
  background: rgba(234,246,255,.07);
  border: 1px solid rgba(234,246,255,.12);
}
.contactCard__title{margin-top:10px;font-weight:1000;letter-spacing:-0.3px}
.contactCard__list{margin-top: 12px; display:grid; gap: 8px}
.ck{
  display:flex; align-items:center; gap: 8px;
  padding: 10px 12px;
  border-radius: 16px;
  background: rgba(6,19,27,.45);
  border: 1px solid rgba(234,246,255,.10);
  color: rgba(234,246,255,.86);
  font-weight:800;
  font-size: 13px;
}
.ck input{accent-color: var(--aqua)}
.contactCard__bottom{margin-top: 12px}
.micro{margin:10px 0 0;color: rgba(234,246,255,.72); font-size: 12.5px}

.footer{
  padding: 44px 0 24px;
  border-top: 1px solid rgba(234,246,255,.06);
  background: rgba(6,19,27,.55);
}
.footer__grid{
  display:grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 8px;
}
.brand--footer .brand__mark{box-shadow:none}
.footer__p{margin:12px 0 0;color: rgba(234,246,255,.76); line-height:1.6; max-width: 48ch}
.footer__col{
  display:flex; flex-direction:column; gap: 8px;
}
.footer__h{font-weight:1000; letter-spacing:-0.2px}
.footer__col a{
  color: rgba(234,246,255,.78);
  font-weight:800;
  font-size: 13.5px;
}
.footer__col a:hover{color:#fff}
.footer__small{margin:0;color: rgba(234,246,255,.70); line-height:1.55; font-size: 13px}
.footer__bottom{
  margin-top: 18px;
  padding-top: 6px;
  border-top: 1px solid rgba(234,246,255,.06);
  color: rgba(234,246,255,.66);
  display:flex; gap:8px; flex-wrap:wrap;
  font-size: 12.5px;
}
.sep{opacity:.6}

/* Responsive */
@media (max-width: 980px){
  .hero__grid{grid-template-columns: 1fr; padding-bottom: 22px}
  .hero__visual{min-height: 380px}
  .truck{right: -80px; width: min(760px, 92vw)}
  .grid-4{grid-template-columns: 1fr 1fr}
  .steps{grid-template-columns: 1fr}
  .split{grid-template-columns: 1fr}
  .grid-3{grid-template-columns: 1fr}
  .services{grid-template-columns: 1fr}
  .contact{grid-template-columns: 1fr}
  .footer__grid{grid-template-columns: 1fr 1fr}
}
@media (max-width: 640px){
  .container{width:min(var(--container), calc(100% - 28px))}
  .nav__toggle{display:inline-flex; align-items:center; justify-content:center}
  .nav__panel{
    position: fixed;
    left: 14px; right: 14px;
    top: 72px;
    display:none;
    flex-direction:column;
    gap: 8px;
    padding: 14px;
    border-radius: 22px;
    background: rgba(6,19,27,.82);
    border:1px solid rgba(234,246,255,.12);
    backdrop-filter: blur(14px);
    box-shadow: var(--shadow);
  }
  .nav__panel.is-open{display:flex}
  .nav__link{width:100%; text-align:left; padding: 12px 12px}
  .nav__cta{width:100%}

  .hero{padding-top: 6px}
  .hero__p{font-size: 15.5px}
  .fact{min-width: 148px}
  .hero__visual{min-height: 330px}
  .truck{right: -120px; bottom: -10px; width: 118vw}
  .hero__card{left: 14px; right: 14px; width:auto}
  .callout{flex-direction:column; align-items:flex-start}
  .mini-cta{flex-direction:column; align-items:flex-start}
  .footer__grid{grid-template-columns: 1fr}
}

/* reveal animation */
.will-reveal{
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .55s ease, transform .55s ease;
}
.reveal{
  opacity: 1;
  transform: translateY(0);
}


/* Ajuste de clareza sem branco puro */
body {
  background-color: #f4f8fb;
}

.section-light {
  background: linear-gradient(180deg, #f8fbfd 0%, #eef4f8 100%);
}

.hero {
  background: linear-gradient(135deg, #e6f4f9 0%, #dff1eb 100%);
  position: relative;
  overflow: hidden;
}

/* HERO – caminhão como elemento de cena */
.hero {
  position: relative;
  min-height: 90vh;
  overflow: hidden;
}

.hero-content {
  position: relative;
  z-index: 2;
  max-width: 620px;
}

@media (max-width: 768px) {
  }


/* =========================
   HERO (limpa + caminhão como cena)
   ========================= */
.hero{
  position:relative;
  min-height:90vh;
  overflow:hidden;
}

.hero__grid{
  position:relative;
  z-index:2;
}

.hero-truck{
  position:absolute;
  left:-14%;
  bottom:-6%;
  width:67vw;            /* reduzido de 78vw */
  max-width:1110px;      /* escalado proporcionalmente */
  z-index:1;
  pointer-events:none;
  user-select:none;
  transform: translateX(6%) translateY(-10%);
  filter:drop-shadow(0 38px 75px rgba(0,0,0,.28));
}

@media (max-width: 768px){
  .hero{
    min-height: 88vh;
  }
  .hero-truck{
  position:absolute;
  left:-14%;
  bottom:-6%;
  width:67vw;            /* reduzido de 78vw */
  max-width:1110px;      /* escalado proporcionalmente */
  z-index:1;
  pointer-events:none;
  user-select:none;
  transform: translateX(6%) translateY(-10%);
  filter:drop-shadow(0 38px 75px rgba(0,0,0,.28));
}
}


/* =========================
   HERO (layout tipo concorrente: caminhão à esquerda invadindo a tela)
   ========================= */
.hero{
  position:relative;
  min-height:90vh;
  overflow:hidden;
}

/* Garante que o texto comece "da metade pra direita" */
.hero__grid{
  position:relative;
  z-index:2;
  display:flex;
  justify-content:flex-end;
}

.hero__copy{
  transform: translateX(5%);
}

/* Caminhão como elemento de cena (metade da página) */
.hero-truck{
  position:absolute;
  left:-14%;
  bottom:-6%;
  width:67vw;            /* reduzido de 78vw */
  max-width:1110px;      /* escalado proporcionalmente */
  z-index:1;
  pointer-events:none;
  user-select:none;
  
  filter:drop-shadow(0 38px 75px rgba(0,0,0,.28));
}

/* Ajuste fino para telas grandes */
@media (min-width: 1200px){
  .hero-truck{
  position:absolute;
  left:-14%;
  bottom:-6%;
  width:67vw;            /* reduzido de 78vw */
  max-width:1110px;      /* escalado proporcionalmente */
  z-index:1;
  pointer-events:none;
  user-select:none;
  transform: translateX(6%) translateY(-10%);
  filter:drop-shadow(0 38px 75px rgba(0,0,0,.28));
}
  .hero__copy{
  transform: translateX(4%); width: 600px; }
}

/* Mobile: caminhão vira fundo parcial e texto sobe */
@media (max-width: 768px){
  .hero{ min-height: 92vh; }
  .hero__grid{ justify-content:flex-start; }
  .hero__copy{
  transform: translateX(4%); width: 100%; padding-left: 0; }
  .hero-truck{
  position:absolute;
  left:-14%;
  bottom:-6%;
  width:67vw;            /* reduzido de 78vw */
  max-width:1110px;      /* escalado proporcionalmente */
  z-index:1;
  pointer-events:none;
  user-select:none;
  
  filter:drop-shadow(0 38px 75px rgba(0,0,0,.28));
}
}



/* AJUSTE FORÇADO – deslocar texto da HERO 5% para a direita (desktop) */
@media (min-width: 1024px){
  .hero .hero__copy{
    transform: translateX(5%) !important;
  }
}

/* Override hero text to black */
.hero__copy, .hero__p, .badge__text { color: #000; }


/* Cards - blue gradient background */
.card{
  background: linear-gradient(135deg, #133351 0%, #0772a6 100%);
  }


/* Hero facts (cards) - blue gradient background */
.fact{
  background: linear-gradient(135deg, #133351 0%, #0772a6 100%);
  border-color: rgba(234,246,255,.14);
}


/* Cards - darker blue gradient + white text */
.fact{
  background: linear-gradient(135deg, #133351 0%, #0772a6 100%);
  }
.fact__k,
.fact__v{
  color:#FFFFFF;
}

/* CTA water drop icon */
.btn--primary{
  position: relative;
  padding-left: 48px;
}
.btn--primary::before{
  content:"";
  position:absolute;
  left:-26px;
  top:50%;
  transform:translateY(-50%);
  width:56px;
  height:56px;
  background: url('assets/drop.svg') no-repeat center/contain;
}


/* === Unified gradients (forced) === */
.card,
.fact,
.btn--primary{
  background: linear-gradient(135deg, #133351 0%, #0772a6 100%) !important;
}
.btn--primary:hover{
  background: linear-gradient(135deg, #133351 0%, #0772a6 100%) !important;
}


/* === CTA text color override === */
.btn--primary,
.btn--primary span,
.btn--primary:hover,
.btn--primary:focus {
  color: #FFFFFF !important;
}

/* Ajuste fino: reduzir espaço entre ícone de gota e texto nos botões/cards */
.btn, .button, .cta, .card, a {
  --icon-gap: 8px;
}
.btn img, .btn svg,
.button img, .button svg,
.cta img, .cta svg,
.card img, .card svg {
  margin-right: var(--icon-gap) !important;
}


/* FIX: Como funciona o abastecimento */
#como-funciona {
  background: #ffffff !important;
}
#como-funciona .h2,
#como-funciona .lead,
#como-funciona p,
#como-funciona li {
  color: #000000 !important;
}
/* mantém cards/steps como estão */


/* FIX: Cards escuros na seção Como funciona */
#como-funciona .step,
#como-funciona .box,
#como-funciona .card {
  background: linear-gradient(180deg, #0f2e38, #0b2027) !important;
  color: #ffffff !important;
}

#como-funciona .step p,
#como-funciona .step h3,
#como-funciona .card p,
#como-funciona .card h3,
#como-funciona .box p,
#como-funciona .box h3 {
  color: #ffffff !important;
}


/* PRECISE FIX — Como funciona */

#como-funciona .panel:not(.panel--dark) .h3 {
  color: #000000 !important;
}

#como-funciona .panel--dark,
#como-funciona .panel--dark .h3,
#como-funciona .panel--dark li {
  color: #ffffff !important;
}


/* Form WhatsApp (Contato) */
.contactCard--form{padding-bottom: 16px}
.cform{display:grid; gap: 12px; margin-top: 10px}
.cform__field{display:grid; gap: 8px}
.cform__label{font-weight: 900; color: rgba(234,246,255,.80); font-size: 13px}
.cform__input, .cform__textarea{
  width: 100%;
  padding: 14px 16px;
  border-radius: 20px;
  background: rgba(6,19,27,.40);
  border: 1px solid rgba(234,246,255,.12);
  color: rgba(234,246,255,.92);
  outline: none;
}
.cform__input::placeholder, .cform__textarea::placeholder{color: rgba(234,246,255,.50)}
.cform__input:focus, .cform__textarea:focus{
  border-color: rgba(71, 196, 188, .65);
  box-shadow: 0 0 0 4px rgba(71, 196, 188, .10);
}
.cform select.cform__input{appearance:none}
.cform__textarea{resize: vertical; min-height: 110px}


/* === Cidades atendidas – cards em azul claro com degradê === */
.section__cities {
  margin-top: 3rem;
}

.cities__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.2rem;
  margin-top: 1.2rem;
}

.city__card {
  padding: 1.4rem 1.2rem;
  border-radius: 14px;
  background: linear-gradient(135deg, #cfefff 0%, #9ad9ff 100%);
  color: #0b3558;
  font-weight: 600;
  text-align: center;
  box-shadow: 0 10px 25px rgba(0, 120, 180, 0.15);
  transition: transform .2s ease, box-shadow .2s ease;
}

.city__card:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 35px rgba(0, 120, 180, 0.22);
}



/* === Cidades atendidas – cards em azul claro com degradê (aplicado ao HTML atual) === */
.cidades-atendidas-wrap{
  margin: 1rem 0 0;
}

.cidades-atendidas-title{
  font-weight: 700;
  letter-spacing: .2px;
  margin-bottom: .75rem;
}

.cidades-atendidas{
  display: grid;
  grid-template-columns: repeat(2, minmax(180px, 1fr));
  gap: 12px;
}

@media (max-width: 640px){
  .cidades-atendidas{
    grid-template-columns: 1fr;
  }
}

.cidades-atendidas span{
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px 14px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(210,240,255,1) 0%, rgba(150,215,255,1) 55%, rgba(120,200,255,1) 100%);
  color: #0b3558;
  font-weight: 650;
  box-shadow: 0 10px 22px rgba(0, 120, 180, 0.16);
  border: 1px solid rgba(11, 53, 88, 0.08);
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}

.cidades-atendidas span:hover{
  transform: translateY(-2px);
  box-shadow: 0 16px 34px rgba(0, 120, 180, 0.22);
  filter: saturate(1.05);
}


/* Título Cidades atendidas em preto */
.cidades-atendidas-title, .cidades-atendidas h3, .cidades-atendidas h2 { color: #000000 !important; }


/* Logo oficial Esgomafra */
.brand__logo {
  height: 48px;
  width: auto;
}

@media (max-width: 768px) {
  .brand__logo {
    height: 40px;
  }
}


/* Footer: use logo oficial */
.brand__logo--footer{height:44px; width:auto; display:block}

@media (max-width: 768px) {
  .hero-truck {
    width: 87vw;
    left: 50%;
    transform: translateX(-50%);
  }
}