/* ==========================================================================
   Dubai Garden Rapel — jardinagem e manutencao de floreiras em altura
   Paleta fiel a logo: LARANJA #E57D32 + PRETO dominantes, verde como apoio.
   Mobile-first. CSS puro, sem dependencias.
   ========================================================================== */

:root{
  /* PALETA — fiel a logo: laranja #E57D32 + preto dominantes, verde de apoio.
     Todos os pares abaixo foram conferidos em contraste WCAG AA.
       laranja sobre preto-900 .... 6,57:1
       verde-claro sobre preto-900  7,53:1
       preto-900 sobre laranja .... 6,57:1  (texto do botao)
       --laranja-texto sobre areia  4,98:1  (o #E57D32 puro da 2,87:1 e NAO serve)
       --verde sobre areia ........ 5,06:1  (o #7CB342 da 2,35:1 e NAO serve) */
  --preto-900:#121110;
  --preto-800:#1C1917;
  --preto-700:#2B2622;
  --preto-600:#3A332D;

  --laranja:#E57D32;        /* cor da marca — CTAs, destaques */
  --laranja-claro:#EE9350;  /* laranja sobre fundo escuro */
  --laranja-texto:#AE5010;  /* laranja como texto sobre fundo claro */

  --verde:#4E7522;          /* apoio: verde como TEXTO sobre fundo claro */
  --verde-claro:#7CB342;    /* apoio: verde das folhas da logo, sobre escuro */

  --areia:#FAF7F4;
  --branco:#FFFFFF;
  --tinta:#1A1614;
  --cinza:#6B625B;
  --cinza-claro:#E6E0DA;
  --sombra:0 4px 20px -4px rgba(18,17,16,.10);
  --sombra-forte:0 14px 40px -8px rgba(18,17,16,.24);
  --raio:16px;
  --raio-sm:10px;
  --container:1180px;
  --nav-h:74px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 12px);-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:16px;line-height:1.65;color:var(--tinta);background:var(--branco);
  overflow-x:hidden;-webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;height:auto}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{font-family:'Outfit',system-ui,sans-serif;line-height:1.15;margin:0 0 .5em;letter-spacing:-.02em}
h1{font-size:clamp(2rem,7vw,3.6rem);font-weight:700}
h2{font-size:clamp(1.65rem,4.6vw,2.6rem);font-weight:700}
h3{font-size:clamp(1.12rem,2.6vw,1.4rem);font-weight:600}
p{margin:0 0 1rem}
ul{margin:0;padding:0;list-style:none}
:focus-visible{outline:3px solid var(--laranja);outline-offset:3px;border-radius:4px}

.container{width:100%;max-width:var(--container);margin:0 auto;padding:0 20px}
.section{padding:clamp(56px,9vw,104px) 0}
.section--areia{background:var(--areia)}
.section--escura{background:var(--preto-800);color:#EAF1E6}
.section--escura h2,.section--escura h3{color:#fff}
.section--escura p{color:#C7D6C4}

.section-header{max-width:720px;margin:0 auto clamp(32px,5vw,56px);text-align:center}
.section-header p{color:var(--cinza);font-size:1.05rem;margin:0}
.section--escura .section-header p{color:#C7D6C4}

.eyebrow{
  display:inline-block;font-family:'Outfit',sans-serif;font-size:.8rem;font-weight:600;
  letter-spacing:.15em;text-transform:uppercase;color:var(--laranja-texto);margin-bottom:14px;
}
.section--escura .eyebrow{color:var(--laranja-claro)}
.destaque{color:var(--laranja-texto)}
.section--escura .destaque,.hero .destaque{color:var(--laranja-claro)}

/* ---------- Botoes ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:52px;padding:14px 26px;border-radius:999px;border:2px solid transparent;
  font-family:'Outfit',sans-serif;font-weight:600;font-size:1rem;line-height:1.2;
  cursor:pointer;transition:transform .18s ease,box-shadow .18s ease,background .18s ease,color .18s ease;
  text-align:center;
}
.btn svg{flex:0 0 auto}
.btn--primario{background:var(--laranja);color:var(--preto-900);box-shadow:0 8px 22px -8px rgba(229,125,50,.55)}
.btn--primario:hover{background:var(--laranja-claro);transform:translateY(-2px);box-shadow:0 12px 28px -8px rgba(229,125,50,.7)}
.btn--fantasma{background:rgba(255,255,255,.14);color:#fff;border-color:rgba(255,255,255,.72);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.btn--fantasma:hover{background:rgba(255,255,255,.12);border-color:#fff;transform:translateY(-2px)}
.btn--escuro{background:var(--preto-700);color:#fff}
.btn--escuro:hover{background:var(--preto-600);transform:translateY(-2px)}
.btn:active{transform:scale(.98)}

/* ---------- Navbar ---------- */
.nav{
  position:fixed;inset:0 0 auto 0;z-index:100;height:var(--nav-h);
  display:flex;align-items:center;background:rgba(18,17,16,.62);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  transition:background .28s ease,box-shadow .28s ease;
}
/* Com fundo solido o blur nao muda nada visualmente, mas continuaria
   repintando a cada frame do scroll — por isso e desligado aqui. */
.nav.is-solid{background:var(--preto-900);box-shadow:0 4px 20px rgba(0,0,0,.22);
  backdrop-filter:none;-webkit-backdrop-filter:none}
.nav .container{display:flex;align-items:center;justify-content:space-between;gap:16px}
.nav-logo{display:flex;align-items:center;gap:10px;min-width:0}
.nav-logo img{height:44px;width:auto}
.nav-logo span{
  font-family:'Outfit',sans-serif;font-weight:700;font-size:1.02rem;color:#fff;
  line-height:1.1;letter-spacing:-.01em;
}
.nav-logo small{display:block;font-size:.66rem;font-weight:400;color:var(--laranja-claro);letter-spacing:.06em;text-transform:uppercase}
.nav-links{display:none;align-items:center;gap:26px}
.nav-links a{font-size:.94rem;font-weight:500;color:rgba(255,255,255,.86);transition:color .18s ease}
.nav-links a:hover{color:var(--laranja-claro)}
.nav-cta{display:none}
.nav-cta.btn{min-height:44px;padding:10px 20px;font-size:.92rem}

.nav-toggle{
  display:inline-flex;flex-direction:column;justify-content:center;gap:5px;
  width:46px;height:46px;padding:11px;background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.22);border-radius:12px;cursor:pointer;
}
.nav-toggle span{display:block;height:2px;width:100%;background:#fff;border-radius:2px;transition:transform .25s ease,opacity .2s ease}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

.nav-drawer{
  position:fixed;top:var(--nav-h);left:0;right:0;z-index:99;
  background:var(--preto-900);border-top:1px solid rgba(255,255,255,.10);
  max-height:0;overflow:hidden;transition:max-height .32s ease;
}
.nav-drawer.is-open{max-height:75vh;overflow-y:auto}
.nav-drawer ul{padding:8px 20px 24px}
.nav-drawer a{
  display:block;padding:15px 4px;font-size:1.05rem;font-weight:500;color:#fff;
  border-bottom:1px solid rgba(255,255,255,.09);
}
.nav-drawer .btn{width:100%;margin-top:18px}

/* ---------- Hero ---------- */
/* A imagem vive no ::before (e nao no .hero) para poder receber parallax via
   transform, que roda na GPU e nao dispara layout. O hero troca de arquivo por
   viewport: vertical no celular, horizontal do tablet pra cima. */
.hero{
  position:relative;padding:calc(var(--nav-h) + 56px) 0 60px;
  background:var(--preto-900);color:#fff;overflow:hidden;
  contain:paint;          /* isola a repintura do parallax do resto da pagina */
  --py:0px;
}
.hero::before{
  content:"";position:absolute;inset:-10% 0;z-index:0;
  background:
    linear-gradient(165deg,rgba(18,17,16,.90) 0%,rgba(32,25,19,.84) 45%,rgba(74,44,18,.76) 100%),
    url('../assets/images/hero-mobile.jpg') center 30%/cover no-repeat;
  transform:translate3d(0,var(--py),0);
  will-change:transform;
}
@supports (background-image:image-set(url("x.webp") type("image/webp"))){
  .hero::before{
    background:
      linear-gradient(165deg,rgba(18,17,16,.90) 0%,rgba(32,25,19,.84) 45%,rgba(74,44,18,.76) 100%),
      image-set(url('../assets/images/hero-mobile.webp') type('image/webp'),
                url('../assets/images/hero-mobile.jpg') type('image/jpeg')) center 30%/cover no-repeat;
  }
}
.hero::after{
  content:"";position:absolute;inset:auto 0 0 0;height:120px;z-index:1;
  background:linear-gradient(to bottom,transparent,rgba(18,17,16,.62));pointer-events:none;
}
.hero .container{position:relative;z-index:2;max-width:900px}
.hero-badge{
  display:inline-flex;align-items:center;gap:8px;padding:7px 16px;border-radius:999px;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.24);
  backdrop-filter:blur(6px);font-size:.8rem;font-weight:500;letter-spacing:.02em;margin-bottom:22px;
}
/* Tom mais claro so aqui: o badge fica sobre pilula translucida + foto, entao
   o fundo varia e o --laranja-claro nao garante contraste em toda situacao. */
.hero-badge b{color:var(--laranja-claro);font-weight:600}
.hero h1{color:#fff;margin-bottom:18px;text-wrap:balance}
.hero-sub{font-size:clamp(1rem,2.4vw,1.2rem);color:#D9D2CB;max-width:660px;margin-bottom:30px}
.hero-acoes{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:38px}
.hero-acoes .btn{flex:1 1 240px}
.hero-trust{display:grid;gap:14px;padding-top:26px;border-top:1px solid rgba(255,255,255,.18)}
.hero-trust li{display:flex;align-items:flex-start;gap:11px;font-size:.92rem;color:#D9D2CB}
.hero-trust svg{flex:0 0 auto;margin-top:2px;color:var(--verde-claro)}

/* ---------- Faixa cinematografica ---------- */
.faixa{position:relative;line-height:0;background:var(--preto-900)}
.faixa img{width:100%;aspect-ratio:16/9;object-fit:cover;object-position:center;image-rendering:auto}

/* ---------- Numeros ---------- */
.numeros{display:grid;gap:26px;grid-template-columns:repeat(2,1fr);text-align:center}
.numeros b{
  display:block;font-family:'Outfit',sans-serif;font-size:clamp(1.9rem,6vw,2.9rem);
  font-weight:700;color:var(--laranja-claro);line-height:1;margin-bottom:8px;
}
.numeros span{font-size:.9rem;color:#C7D6C4;display:block}

/* ---------- Cards genericos ---------- */
.grid{display:grid;gap:20px}
.grid--2{grid-template-columns:1fr}
.grid--3{grid-template-columns:1fr}

.card{
  background:var(--branco);border:1px solid var(--cinza-claro);border-radius:var(--raio);
  padding:28px 24px;box-shadow:var(--sombra);
  transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease;
}
.card:hover{transform:translateY(-4px);box-shadow:var(--sombra-forte);border-color:rgba(229,125,50,.55)}
.card h3{margin-bottom:10px}
.card p{color:var(--cinza);font-size:.96rem;margin:0}
.card-icone{
  display:inline-flex;align-items:center;justify-content:center;width:52px;height:52px;
  border-radius:14px;background:rgba(124,179,66,.16);color:var(--verde);margin-bottom:18px;
  transition:background .22s ease,color .22s ease;
}
.card:hover .card-icone{background:var(--laranja);color:var(--preto-900)}

/* problema */
.problema-card{background:var(--branco);border-left:4px solid var(--verde-claro);border-radius:var(--raio-sm);padding:24px}
.problema-card h3{font-size:1.08rem}
.problema-card p{color:var(--cinza);font-size:.95rem;margin:0}

/* ---------- Como funciona ---------- */
.passos{counter-reset:passo;display:grid;gap:22px}
.passo{
  position:relative;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.13);
  border-radius:var(--raio);padding:26px 24px 24px;
}
.passo::before{
  counter-increment:passo;content:"0" counter(passo);
  font-family:'Outfit',sans-serif;font-size:2.1rem;font-weight:700;color:var(--laranja);
  display:block;line-height:1;margin-bottom:14px;
}
.passo h3{font-size:1.1rem;margin-bottom:8px}
.passo p{font-size:.94rem;margin:0}

/* ---------- Split (seguranca) ---------- */
.split{display:grid;gap:34px;align-items:center}
.split-midia img{border-radius:var(--raio);box-shadow:var(--sombra-forte);aspect-ratio:16/10;object-fit:cover;width:100%;max-width:100%}
.lista-check{display:grid;gap:14px;margin-top:22px}
.lista-check li{display:flex;align-items:flex-start;gap:12px;font-size:.97rem;color:var(--cinza)}
.lista-check svg{flex:0 0 auto;margin-top:3px;color:var(--verde)}
.section--escura .lista-check li{color:#C7D6C4}
.section--escura .lista-check svg{color:var(--verde-claro)}

/* ---------- Galeria ---------- */
/* 2 colunas ja no celular: sao 8 fotos verticais e em coluna unica o scroll
   da secao ficava longo demais. */
.galeria{display:grid;gap:10px;grid-template-columns:repeat(2,1fr)}
.galeria figure{margin:0;border-radius:var(--raio-sm);overflow:hidden;background:var(--preto-900);
  border:1px solid rgba(255,255,255,.08)}
.galeria img{width:100%;aspect-ratio:16/10;object-fit:cover;transition:transform .5s ease}
/* Variante retrato: as fotos reais do cliente sao verticais (WhatsApp) e ficam
   melhores em 3/4; as antigas, 1080x400, entram no mesmo grid sem esticar. */
.galeria--retrato img{aspect-ratio:3/4}
.galeria figure:hover img{transform:scale(1.05)}

/* ---------- Atendimento ---------- */
.bairros{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:26px}
.bairros li{
  padding:9px 18px;border-radius:999px;background:var(--branco);
  border:1px solid var(--cinza-claro);font-size:.9rem;color:var(--cinza);
}

/* ---------- FAQ ---------- */
.faq{max-width:820px;margin:0 auto;display:grid;gap:12px}
.faq details{
  background:var(--branco);border:1px solid var(--cinza-claro);border-radius:var(--raio-sm);
  overflow:hidden;transition:border-color .2s ease,box-shadow .2s ease;
}
.faq details[open]{border-color:rgba(229,125,50,.65);box-shadow:var(--sombra)}
.faq summary{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:20px 22px;cursor:pointer;list-style:none;
  font-family:'Outfit',sans-serif;font-weight:600;font-size:1.02rem;color:var(--tinta);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";flex:0 0 auto;width:11px;height:11px;
  border-right:2px solid var(--laranja-texto);border-bottom:2px solid var(--laranja-texto);
  transform:rotate(45deg);transition:transform .25s ease;margin-top:-4px;
}
.faq details[open] summary::after{transform:rotate(-135deg);margin-top:4px}
.faq-corpo{padding:0 22px 22px;color:var(--cinza);font-size:.97rem}
.faq-corpo p:last-child{margin:0}

/* ---------- Contato ---------- */
.contato-grid{display:grid;gap:30px}
.contato-item{display:flex;gap:14px;align-items:flex-start;padding:18px 0;border-bottom:1px solid var(--cinza-claro)}
.contato-item:last-of-type{border-bottom:0}
.contato-item svg{flex:0 0 auto;margin-top:3px;color:var(--laranja-texto)}
.contato-item h3{font-size:1rem;margin-bottom:4px}
.contato-item p,.contato-item a{color:var(--cinza);font-size:.96rem;margin:0}
.contato-item a{display:inline-block;padding:10px 0}
.contato-item a:hover{color:var(--laranja-texto)}
.mapa{border-radius:var(--raio);overflow:hidden;box-shadow:var(--sombra);line-height:0;background:var(--cinza-claro)}
.mapa iframe{width:100%;height:340px;border:0;display:block}

/* ---------- CTA final ---------- */
.cta-final{
  background:linear-gradient(150deg,var(--preto-800),var(--preto-600));
  color:#fff;text-align:center;border-radius:var(--raio);padding:clamp(38px,7vw,64px) 24px;
}
.cta-final h2{color:#fff}
.cta-final p{color:#C7D6C4;max-width:560px;margin:0 auto 28px}
.cta-final .btn{min-width:260px}

/* ---------- Footer ---------- */
.footer{background:var(--preto-900);color:#A9BCA6;padding:56px 0 28px;font-size:.92rem}
.footer-grid{display:grid;gap:32px;margin-bottom:36px}
.footer h4{font-family:'Outfit',sans-serif;color:#fff;font-size:1rem;font-weight:600;margin:0 0 14px}
.footer a{color:#A9BCA6;transition:color .18s ease}
.footer a:hover{color:var(--laranja-claro)}
.footer-logo img{height:64px;width:auto;margin-bottom:14px}
/* Os links do rodape tinham ~18px de altura — pequeno demais para o dedo.
   O padding leva a area tocavel a ~40px sem mudar o espacamento visual.
   NAO usar display:flex no <li>: o texto vira item flex anonimo com
   min-width:auto, nao encolhe, e o e-mail longo estoura a largura da pagina. */
.footer-links{display:grid;gap:2px}
.footer-links li{padding:0}
.footer-links a{display:block;padding:11px 0}
.footer-social{display:flex;gap:12px;margin-top:16px}
.footer-social a{
  display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;
  border-radius:12px;background:rgba(255,255,255,.08);color:#fff;transition:background .2s ease,transform .2s ease;
}
.footer-social a:hover{background:var(--laranja);color:var(--preto-900);transform:translateY(-2px)}
.footer-base{
  border-top:1px solid rgba(255,255,255,.10);padding-top:22px;
  display:flex;flex-direction:column;gap:10px;font-size:.85rem;text-align:center;
}
.footer-base a{color:var(--laranja-claro);font-weight:500;display:inline-block;padding:10px 0}

/* ---------- WhatsApp flutuante ---------- */
.wpp-float{
  position:fixed;right:16px;bottom:16px;z-index:98;
  display:inline-flex;align-items:center;justify-content:center;width:60px;height:60px;
  border-radius:50%;background:#25D366;color:#fff;
  box-shadow:0 8px 24px rgba(37,211,102,.45);transition:transform .2s ease,box-shadow .2s ease;
}
.wpp-float:hover{transform:scale(1.07);box-shadow:0 12px 30px rgba(37,211,102,.6)}
.wpp-float svg{width:32px;height:32px}

/* ---------- Movimento ---------- */
/* Tudo em CSS puro (sem GSAP/AOS) e sempre em opacity/transform, que rodam na
   GPU. O reveal so esconde quando o JS esta ativo (classe .js no <html>): sem
   JS — ou se o script falhar — o conteudo inteiro aparece normalmente. */

.js .reveal{
  opacity:0;
  transform:translateY(24px);
  transition:opacity .7s cubic-bezier(.22,.61,.36,1) var(--d,0ms),
             transform .7s cubic-bezier(.22,.61,.36,1) var(--d,0ms);
}
.js .reveal.is-visivel{opacity:1;transform:none}

/* Variantes direcionais — o JS le o data-anim e nao precisa saber de CSS */
.js .reveal[data-anim="left"]{transform:translateX(-34px)}
.js .reveal[data-anim="right"]{transform:translateX(34px)}
.js .reveal[data-anim="scale"]{transform:scale(.94)}
.js .reveal[data-anim="up"]{transform:translateY(40px)}

/* Esta regra e obrigatoria: `.js .reveal.is-visivel` e `.js .reveal[data-anim]`
   tem a MESMA especificidade (0-3-0), entao a variante venceria por vir depois
   e o translateX nunca sairia — o elemento ficava deslocado para fora da tela
   e criava scroll horizontal no mobile. Aqui a especificidade sobe para 0-4-0. */
.js .reveal[data-anim].is-visivel{transform:none}

/* Cortina: a imagem entra revelada de baixo para cima.
   O clip fica no FILHO, nunca no elemento observado: um elemento com
   clip-path zerado nao gera interseccao, o observer nao dispara e a cortina
   nunca abriria. */
.js .reveal[data-anim="cortina"]{opacity:1;transform:none}
.js .reveal[data-anim="cortina"] img{
  clip-path:inset(0 0 100% 0);
  transition:clip-path 1s cubic-bezier(.22,.61,.36,1) var(--d,0ms);
}
.js .reveal[data-anim="cortina"].is-visivel img{clip-path:inset(0 0 0 0)}

/* Entrada do hero: cascata ao carregar, nao no scroll */
.js .hero-anim{opacity:0;transform:translateY(26px);animation:heroSobe .9s cubic-bezier(.22,.61,.36,1) forwards;animation-delay:var(--d,0ms)}
@keyframes heroSobe{to{opacity:1;transform:none}}

/* Barra de progresso de leitura */
.progresso{
  position:fixed;top:0;left:0;height:3px;width:100%;z-index:101;
  transform:scaleX(var(--p,0));transform-origin:0 50%;
  background:linear-gradient(90deg,var(--laranja),var(--laranja-claro));
  transition:transform .1s linear;pointer-events:none;
}

/* Navbar encolhe ao rolar */
.nav{transition:background .28s ease,box-shadow .28s ease,height .28s ease}
.nav.is-solid{height:62px}
.nav-logo img,.nav-logo span{transition:height .28s ease,font-size .28s ease}
.nav.is-solid .nav-logo img{height:38px}

/* Sublinhado que cresce no menu */
.nav-links a{position:relative}
.nav-links a::after{
  content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;
  background:var(--laranja);transform:scaleX(0);transform-origin:100% 50%;
  transition:transform .3s cubic-bezier(.22,.61,.36,1);
}
.nav-links a:hover::after{transform:scaleX(1);transform-origin:0 50%}

/* Dica de rolagem no hero */
.scroll-hint{
  position:absolute;left:50%;bottom:18px;z-index:2;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:6px;
  font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.62);
}
.scroll-hint span{
  display:block;width:22px;height:34px;border:2px solid rgba(255,255,255,.4);border-radius:12px;position:relative;
}
.scroll-hint span::after{
  content:"";position:absolute;left:50%;top:7px;width:3px;height:7px;border-radius:2px;
  background:var(--laranja-claro);transform:translateX(-50%);animation:rolinha 1.9s ease-in-out infinite;
}
@keyframes rolinha{0%,100%{opacity:0;transform:translate(-50%,0)}35%{opacity:1}70%{opacity:0;transform:translate(-50%,11px)}}

/* Micro-interacoes */
.card-icone{transition:background .22s ease,color .22s ease,transform .3s cubic-bezier(.34,1.56,.64,1)}
.card:hover .card-icone{transform:translateY(-3px) rotate(-6deg)}
.passo::before{transition:transform .3s ease,color .3s ease}
.passo:hover::before{transform:translateY(-3px);color:var(--laranja-claro)}
.numeros b{font-variant-numeric:tabular-nums}
.contato-item svg{transition:transform .25s ease}
.contato-item:hover svg{transform:scale(1.14)}
.bairros li{transition:transform .2s ease,border-color .2s ease,color .2s ease}
.bairros li:hover{transform:translateY(-2px);border-color:var(--laranja);color:var(--laranja-texto)}

/* Brilho que atravessa o botao principal */
.btn--primario{position:relative;overflow:hidden}
.btn--primario::after{
  content:"";position:absolute;top:0;left:-120%;width:60%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.42),transparent);
  transform:skewX(-18deg);transition:left .6s ease;
}
.btn--primario:hover::after{left:140%}

/* WhatsApp flutuante: entra depois do primeiro scroll e pulsa de leve */
.wpp-float{transition:transform .3s cubic-bezier(.34,1.56,.64,1),box-shadow .2s ease,opacity .3s ease}
.js .wpp-float{opacity:0;transform:scale(.6);pointer-events:none}
.js .wpp-float.is-visivel{opacity:1;transform:scale(1);pointer-events:auto}
.js .wpp-float.is-visivel::before{
  content:"";position:absolute;inset:0;border-radius:50%;border:2px solid #25D366;
  animation:pulso 2.6s ease-out infinite;
}
@keyframes pulso{0%{opacity:.6;transform:scale(1)}100%{opacity:0;transform:scale(1.5)}}

/* Respeita quem pediu menos movimento — desliga tudo, nada fica escondido */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
  .js .reveal,.js .hero-anim,.js .reveal[data-anim],.js .reveal[data-anim] img{opacity:1!important;transform:none!important;clip-path:none!important}
  .js .wpp-float{opacity:1;transform:none;pointer-events:auto}
  .hero::before{transform:none!important}
  .progresso{display:none}
  .scroll-hint{display:none}
}

/* ---------- Breakpoints ---------- */
@media (min-width:600px){
  .galeria{gap:14px}
  .grid--2{grid-template-columns:repeat(2,1fr)}
  .numeros{grid-template-columns:repeat(4,1fr)}
  .footer-base{flex-direction:row;justify-content:space-between;text-align:left}
}
@media (min-width:860px){
  .grid--3{grid-template-columns:repeat(3,1fr)}
  .passos{grid-template-columns:repeat(2,1fr)}
  .split{grid-template-columns:1fr 1fr;gap:52px}
  .split--inverso .split-midia{order:2}
  .contato-grid{grid-template-columns:1fr 1.15fr;align-items:start}
  .footer-grid{grid-template-columns:1.4fr 1fr 1.2fr}
  .hero-trust{grid-template-columns:repeat(3,1fr);gap:20px}
  .hero-acoes .btn{flex:0 0 auto}
  .galeria{grid-template-columns:repeat(3,1fr)}
  .mapa iframe{height:100%;min-height:420px}
}
@media (min-width:860px){
  .hero::before{
    background:
      linear-gradient(160deg,rgba(18,17,16,.90) 0%,rgba(32,25,19,.84) 45%,rgba(74,44,18,.74) 100%),
      url('../assets/images/hero-desktop.jpg') center 45%/cover no-repeat;
  }
  @supports (background-image:image-set(url("x.webp") type("image/webp"))){
    /* Duas resolucoes por densidade: tela comum baixa 1600px (376KB), retina
       baixa 2400px. Evita mandar 716KB para quem nao vai enxergar diferenca. */
    .hero::before{
      background:
        linear-gradient(160deg,rgba(18,17,16,.90) 0%,rgba(32,25,19,.84) 45%,rgba(74,44,18,.74) 100%),
        image-set(url('../assets/images/hero-desktop.webp') type('image/webp') 1x,
                  url('../assets/images/hero-desktop@2x.webp') type('image/webp') 2x,
                  url('../assets/images/hero-desktop.jpg') type('image/jpeg') 1x,
                  url('../assets/images/hero-desktop@2x.jpg') type('image/jpeg') 2x) center 45%/cover no-repeat;
    }
  }
}
@media (min-width:1000px){
  .nav-links,.nav-cta{display:inline-flex}
  .nav-toggle{display:none}
  .passos{grid-template-columns:repeat(4,1fr)}
  /* Altura contida de proposito: a foto de origem tem 800px de altura (2x de
     1080x400). Hero mais baixo = o navegador REDUZ a imagem em vez de ampliar,
     que e o que causava o serrilhado. */
  .hero{padding:calc(var(--nav-h) + 72px) 0 80px}
  .faixa img{aspect-ratio:27/10;max-height:600px}
}


/* ---------- Faixa da equipe (11/09/2026) ----------
   3 fotos REAIS do cliente, verticais e de baixa resolucao (celular/WhatsApp):
   nenhuma aguenta largura total, por isso viram tripe lado a lado.
   Especificidade 0-2-1 vence o .faixa img (0-1-1) inclusive dentro do media 1000px. */
.faixa.faixa--equipe{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:3px}
.faixa--equipe figure{position:relative;margin:0;overflow:hidden}
.faixa.faixa--equipe img{display:block;width:100%;height:100%;aspect-ratio:3/5;max-height:none;object-fit:cover;object-position:center 30%}
/* ANEAC: capacete fica no topo da foto — com 30% ele encostava na borda em telas >=1440px (02/10/2026) */
.faixa.faixa--equipe figure:nth-child(3) img{object-position:center 10%}
.faixa--equipe figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:26px 10px 10px;line-height:1.2;
  font:600 .62rem/1.2 'Outfit',sans-serif;letter-spacing:.03em;overflow-wrap:anywhere;text-transform:uppercase;color:#fff;
  background:linear-gradient(to top,rgba(18,17,16,.82),rgba(18,17,16,0));
}
@media (min-width:1000px){
  .faixa.faixa--equipe img{aspect-ratio:9/10;max-height:560px}
  .faixa--equipe figcaption{padding:40px 22px 18px;font-size:.9rem;letter-spacing:.06em}
}