/* ==========================================================================
   FRETES PATRICK — design tokens
   Paleta e tipografia vêm do briefing (preto/amarelo/branco + verde só no
   WhatsApp). Direção: sinalização rodoviária — placas, faixas tracejadas,
   plaquetas rebitadas — porque é literalmente a paleta de uma placa de
   estrada, e o Patrick roda a cidade inteira numa picape.
   ========================================================================== */
:root{
  --asphalt:#141310;
  --asphalt-2:#211d16;
  --asphalt-3:#2c271c;
  --line-dark:#3c3527;
  --signal:#ffc72c;
  --signal-dark:#e2a600;
  --paper:#f7f3ea;
  --paper-pure:#ffffff;
  --paper-soft:#e9e2cf;
  --ink:#1c1912;
  --ink-soft:#4a4438;
  --ink-muted:#736a58;
  --line:#ddd4bc;
  --go:#25d366;
  --go-dark:#1cb659;
  --shadow-sm:0 2px 10px rgba(20,19,16,.10);
  --shadow-md:0 10px 28px rgba(20,19,16,.16);
  --shadow-lg:0 22px 54px rgba(20,19,16,.28);
  --radius-sm:6px;
  --radius-md:14px;
  --radius-lg:22px;
  --container:1220px;
  --font-display:'Barlow Condensed','Arial Narrow',sans-serif;
  --font-body:'Barlow',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --fs-hero:clamp(2.6rem, 2rem + 4vw, 5.4rem);
  --fs-h2:clamp(2rem, 1.5rem + 2vw, 3.1rem);
  --fs-h3:clamp(1.2rem, 1.05rem + .5vw, 1.5rem);
  --fs-lead:clamp(1.08rem, 1rem + .4vw, 1.32rem);
  --section-pad:clamp(3.6rem, 3rem + 3vw, 6.5rem);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font-body);font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
ul{list-style:none;margin:0;padding:0}
button{font:inherit;background:none;border:none;cursor:pointer;color:inherit}
input,textarea,select{font:inherit}
h1,h2,h3,h4,p,figure{margin:0}
.container{max-width:var(--container);margin:0 auto;padding:0 clamp(1.25rem,4vw,3rem)}
section{position:relative}
::selection{background:var(--signal);color:var(--asphalt)}

/* focus visibility — piso de qualidade */
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,summary:focus-visible{
  outline:3px solid var(--signal); outline-offset:3px; border-radius:4px;
}
.on-dark a:focus-visible,.on-dark button:focus-visible{outline-color:var(--signal)}

/* ---------- tipografia ---------- */
.eyebrow{
  font-family:var(--font-body);font-weight:700;text-transform:uppercase;
  letter-spacing:.16em;font-size:.78rem;color:var(--signal-dark);
  display:inline-flex;align-items:center;gap:.5em;
}
.eyebrow::before{content:"";width:22px;height:2px;background:currentColor;display:inline-block}
.on-dark .eyebrow{color:var(--signal)}
.section__head{max-width:640px;margin-bottom:clamp(2rem,4vw,3.2rem)}
.section__head.center{margin-left:auto;margin-right:auto;text-align:center}
.section__title{
  font-family:var(--font-display);font-weight:900;text-transform:uppercase;
  font-size:var(--fs-h2);line-height:.98;letter-spacing:-.01em;margin-top:.4rem;
}
.section__subtitle{font-size:var(--fs-lead);color:var(--ink-soft);margin-top:.85rem;max-width:52ch}
.on-dark .section__subtitle{color:var(--paper-soft)}
.on-dark{color:var(--paper-pure)}

/* ---------- botões ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55em;
  font-family:var(--font-body);font-weight:700;font-size:1rem;
  padding:.95em 1.6em;border-radius:999px;white-space:nowrap;
  transition:transform .18s ease, box-shadow .18s ease, background-color .18s ease;
  border:2px solid transparent;line-height:1;
}
.btn:active{transform:translateY(1px) scale(.98)}
.btn--signal{background:var(--signal);color:var(--asphalt);box-shadow:var(--shadow-sm)}
.btn--signal:hover{background:var(--signal-dark);box-shadow:var(--shadow-md);transform:translateY(-2px)}
.btn--go{background:var(--go);color:#fff;box-shadow:0 8px 22px rgba(37,211,102,.35)}
.btn--go:hover{background:var(--go-dark);transform:translateY(-2px);box-shadow:0 12px 28px rgba(37,211,102,.42)}
.btn--outline{background:transparent;border-color:currentColor;color:var(--paper-pure)}
.btn--outline:hover{background:rgba(247,243,234,.1);transform:translateY(-2px)}
.btn--outline.on-light{color:var(--ink)}
.btn--outline.on-light:hover{background:rgba(20,19,16,.06)}
.btn--dark{background:var(--asphalt);color:var(--paper-pure)}
.btn--dark:hover{background:var(--asphalt-2);transform:translateY(-2px)}
.btn--sm{padding:.68em 1.2em;font-size:.9rem}
.btn--block{width:100%}
.icon{width:1.4em;height:1.4em;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.icon--fill{fill:currentColor;stroke:none}

/* ---------- faixa tracejada (divisor "estrada") ---------- */
.road-divider{
  height:16px;background:var(--asphalt);
  background-image:repeating-linear-gradient(90deg, var(--signal) 0 26px, transparent 26px 52px);
  background-position:center; background-repeat:repeat-x;
}

/* ---------- header ---------- */
.header{position:fixed;top:0;left:0;right:0;z-index:100;background:rgba(20,19,16,.92);backdrop-filter:blur(6px);border-bottom:1px solid transparent;transition:box-shadow .25s ease, border-color .25s ease, padding .25s ease}
.header.is-scrolled{box-shadow:var(--shadow-md);border-bottom-color:var(--line-dark)}
.header__inner{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.85rem clamp(1.25rem,4vw,3rem)}
.logo{display:flex;align-items:center;gap:.6rem;color:var(--paper-pure)}
.logo-mark{
  height:12px;
  width:auto;
  max-width:90px;
  object-fit:contain;
  flex-shrink:0;
}
.logo-text{font-family:var(--font-display);font-weight:900;font-size:1.35rem;letter-spacing:.01em;line-height:1;text-transform:uppercase}
.logo-tag{display:block;font-family:var(--font-body);font-weight:700;font-size:.62rem;letter-spacing:.18em;color:var(--signal);text-transform:uppercase;margin-top:.2rem}
.nav{display:flex;align-items:center;gap:clamp(1rem,2vw,2rem)}
.nav__link{font-weight:600;font-size:.94rem;color:var(--paper-soft);position:relative;padding:.3rem 0}
.nav__link::after{content:"";position:absolute;left:0;right:100%;bottom:-2px;height:2px;background:var(--signal);transition:right .22s ease}
.nav__link:hover{color:var(--paper-pure)}
.nav__link:hover::after{right:0}
.header__actions{display:flex;align-items:center;gap:.75rem}
.nav-toggle{display:none;width:42px;height:42px;align-items:center;justify-content:center;color:var(--paper-pure)}
.nav-toggle .icon{width:26px;height:26px}
.header__cta{white-space:nowrap}

.mobile-nav{position:fixed;inset:0;z-index:150;visibility:hidden}
.mobile-nav__overlay{position:absolute;inset:0;background:rgba(20,19,16,.6);opacity:0;transition:opacity .25s ease}
.mobile-nav__panel{position:absolute;top:0;right:0;bottom:0;width:min(86vw,360px);background:var(--asphalt);
  transform:translateX(100%);transition:transform .3s ease;padding:1.4rem 1.5rem 2rem;display:flex;flex-direction:column;gap:.3rem;box-shadow:var(--shadow-lg)}
.mobile-nav.is-open{visibility:visible}
.mobile-nav.is-open .mobile-nav__overlay{opacity:1}
.mobile-nav.is-open .mobile-nav__panel{transform:translateX(0)}
.mobile-nav__top{display:flex;justify-content:flex-end;margin-bottom:1rem}
.mobile-nav__close{width:40px;height:40px;display:flex;align-items:center;justify-content:center;color:var(--paper-pure)}
.mobile-nav__link{display:block;padding:.85rem .2rem;font-family:var(--font-display);font-weight:700;font-size:1.4rem;text-transform:uppercase;color:var(--paper-pure);border-bottom:1px solid var(--line-dark)}
.mobile-nav__cta{margin-top:1.3rem}

/* ---------- hero ---------- */
.hero{background:var(--asphalt);color:var(--paper-pure);padding-top:calc(6.5rem);padding-bottom:0;overflow:hidden;position:relative}
.hero__skyline{position:absolute;left:0;right:0;bottom:16px;height:38%;opacity:.55;pointer-events:none}
.hero__grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,4vw,3rem);align-items:center;position:relative;z-index:2;padding-bottom:clamp(2.5rem,5vw,4rem)}
.hero__content{padding-top:clamp(1.5rem,4vw,2.5rem)}
.hero__title{font-family:var(--font-display);font-weight:900;text-transform:uppercase;font-size:var(--fs-hero);line-height:.94;letter-spacing:-.01em;margin-top:.6rem}
.hero__title em{font-style:normal;color:var(--signal)}
.hero__subtitle{font-size:var(--fs-lead);color:var(--paper-soft);margin-top:1.1rem;max-width:46ch}
.hero__text{color:var(--paper-soft);margin-top:.6rem;max-width:46ch;font-size:.98rem}
.hero__actions{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:1.8rem}
.hero__trust{display:grid;grid-template-columns:repeat(2,auto);gap:.6rem 1.6rem;margin-top:2.1rem}
.hero__trust li{display:flex;align-items:center;gap:.5rem;font-weight:600;font-size:.92rem;color:var(--paper-pure)}
.hero__trust .icon{color:var(--signal);width:1.2em;height:1.2em}
.hero__art{position:relative}
.hero__truck{width:100%;height:auto;filter:drop-shadow(0 30px 40px rgba(0,0,0,.45))}

/* ---------- serviços ---------- */
.services{background:var(--paper);padding:var(--section-pad) 0}
.service-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem}
.service-card{background:var(--paper-pure);border:1px solid var(--line);border-radius:var(--radius-md);padding:1.9rem 1.7rem;box-shadow:var(--shadow-sm);transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;display:flex;flex-direction:column;gap:.9rem}
.service-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-md);border-color:var(--signal)}
.service-card__icon{width:52px;height:52px;border-radius:50%;background:var(--asphalt);color:var(--signal);display:flex;align-items:center;justify-content:center}
.service-card__icon .icon{width:26px;height:26px}
.service-card__title{font-family:var(--font-display);font-weight:800;text-transform:uppercase;font-size:1.35rem;letter-spacing:.01em}
.service-card__desc{color:var(--ink-soft);font-size:.96rem;flex-grow:1}
.service-card__link{font-weight:700;font-size:.85rem;letter-spacing:.04em;text-transform:uppercase;color:var(--ink);display:inline-flex;align-items:center;gap:.4rem;margin-top:.3rem;border-top:1px dashed var(--line);padding-top:.9rem}
.service-card__link .icon{width:1.1em;height:1.1em;transition:transform .2s ease}
.service-card__link:hover{color:var(--signal-dark)}
.service-card__link:hover .icon{transform:translateX(4px)}

/* ---------- destaque da strada ---------- */
.strada{background:var(--asphalt);color:var(--paper-pure);padding:var(--section-pad) 0;overflow:hidden}
.strada__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4rem);align-items:center}
.strada__art{background:var(--asphalt-2);border-radius:var(--radius-lg);padding:clamp(1.5rem,3vw,2.5rem);border:1px solid var(--line-dark)}
.strada__title{font-size:var(--fs-h2);line-height:1}
.strada__text{color:var(--paper-soft);margin-top:1rem;max-width:48ch;font-size:1.02rem}
.strada__stats{display:grid;grid-template-columns:repeat(3,1fr);gap:.9rem;margin-top:2rem}
.stat-chip{background:var(--asphalt-2);border:1px solid var(--line-dark);border-radius:var(--radius-md);padding:1.1rem .9rem;text-align:center}
.stat-chip .icon{color:var(--signal);width:1.7em;height:1.7em;margin:0 auto .5rem}
.stat-chip__label{font-family:var(--font-display);font-weight:800;text-transform:uppercase;font-size:1rem;letter-spacing:.01em}
.stat-chip__desc{font-size:.78rem;color:var(--paper-soft);margin-top:.25rem}
.strada__cta{margin-top:2.1rem}

/* ---------- sobre ---------- */
.about{background:var(--paper);padding:var(--section-pad) 0}
.about__grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(2rem,5vw,3.5rem);align-items:center}
.about__badge{background:var(--paper-pure);border:1px solid var(--line);border-radius:var(--radius-lg);padding:2rem;text-align:center;box-shadow:var(--shadow-sm)}
.about__avatar{width:120px;height:120px;border-radius:50%;background:var(--asphalt);color:var(--signal);display:flex;align-items:center;justify-content:center;margin:0 auto 1rem;border:1px solid var(--signal)}
.about__avatar .icon{width:48px;height:48px}
.about__badge-name{font-family:var(--font-display);font-weight:900;text-transform:uppercase;font-size:1.5rem}
.about__badge-role{color:var(--ink-muted);font-size:.85rem;font-weight:600;margin-top:.15rem}
.about__content p{color:var(--ink-soft);margin-top:1rem;font-size:1.02rem;max-width:58ch}
.about__pill{display:inline-flex;align-items:center;gap:.5rem;background:var(--asphalt);color:var(--signal);font-family:var(--font-display);font-weight:800;text-transform:uppercase;letter-spacing:.02em;font-size:1rem;padding:.6em 1.2em;border-radius:999px;margin-top:1.4rem}
.about__pill .icon{width:1.2em;height:1.2em}

/* ---------- como funciona ---------- */
.how{background:var(--signal);color:var(--asphalt);padding:var(--section-pad) 0}
.how .eyebrow{color:var(--asphalt)}
.how .section__subtitle{color:var(--asphalt);opacity:.75}
.how__steps{display:grid;grid-template-columns:repeat(4,1fr);gap:1.3rem;margin-top:1rem}
.how-step{background:var(--asphalt);color:var(--paper-pure);border-radius:var(--radius-md);padding:1.8rem 1.5rem;position:relative;min-height:210px;display:flex;flex-direction:column}
.how-step__num{font-family:var(--font-display);font-weight:900;font-size:3rem;color:var(--signal);line-height:1}
.how-step__title{font-family:var(--font-display);font-weight:800;text-transform:uppercase;font-size:1.15rem;margin-top:.6rem;letter-spacing:.01em}
.how-step__desc{color:var(--paper-soft);font-size:.9rem;margin-top:.5rem}
.how-step::after{content:"";position:absolute;top:1.8rem;right:-.85rem;width:0;height:0;border-top:10px solid transparent;border-bottom:10px solid transparent;border-left:14px solid var(--asphalt);display:none}
@media(min-width:861px){.how-step:not(:last-child)::after{display:block}}

/* ---------- área de atendimento ---------- */
.area{background:var(--asphalt);color:var(--paper-pure);padding:var(--section-pad) 0}
.area__intro{max-width:640px}
.placard-board{margin-top:2.2rem;display:flex;flex-wrap:wrap;gap:.7rem}
.placard{display:inline-flex;align-items:center;gap:.5rem;background:var(--asphalt-2);border:2px solid var(--line-dark);border-radius:var(--radius-sm);padding:.6em 1.05em;font-family:var(--font-display);font-weight:700;text-transform:uppercase;letter-spacing:.02em;font-size:1.02rem;color:var(--paper-pure);transition:border-color .2s ease, transform .2s ease}
.placard:hover{border-color:var(--signal);transform:translateY(-3px)}
.placard .icon{width:1.1em;height:1.1em;color:var(--signal)}
.placard--more{background:transparent;border-style:dashed;color:var(--paper-soft)}

/* ---------- por que escolher ---------- */
.why{background:var(--paper);padding:var(--section-pad) 0}
.why__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.3rem}
.why-card{padding:1.6rem 1.4rem;border-radius:var(--radius-md);background:var(--paper-pure);border:1px solid var(--line);display:flex;gap:1rem;align-items:flex-start;transition:box-shadow .2s ease, transform .2s ease}
.why-card:hover{box-shadow:var(--shadow-md);transform:translateY(-4px)}
.why-card__icon{width:46px;height:46px;border-radius:var(--radius-sm);background:var(--signal);color:var(--asphalt);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.why-card__icon .icon{width:24px;height:24px}
.why-card__title{font-family:var(--font-display);font-weight:800;text-transform:uppercase;font-size:1.05rem;letter-spacing:.01em}
.why-card__desc{color:var(--ink-soft);font-size:.92rem;margin-top:.3rem}

/* ---------- galeria ---------- */
.gallery{background:var(--asphalt-2);color:var(--paper-pure);padding:var(--section-pad) 0}
.gallery__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
.gallery__item{position:relative;border-radius:var(--radius-md);overflow:hidden;background:var(--asphalt);border:1px solid var(--line-dark);cursor:pointer;aspect-ratio:4/3}
.gallery__item svg{width:100%;height:100%;transition:transform .5s ease}
.gallery__item:hover svg{transform:scale(1.08)}
.gallery__caption{position:absolute;left:0;right:0;bottom:0;padding:.9rem 1rem .8rem;background:linear-gradient(0deg,rgba(20,19,16,.92),transparent);font-family:var(--font-display);font-weight:700;text-transform:uppercase;letter-spacing:.02em;font-size:.95rem}
.gallery__zoom{position:absolute;top:.6rem;right:.6rem;width:32px;height:32px;border-radius:50%;background:rgba(20,19,16,.65);display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .2s ease}
.gallery__item:hover .gallery__zoom{opacity:1}
.gallery__zoom .icon{width:16px;height:16px}
.gallery__note{margin-top:1.4rem;color:var(--paper-soft);font-size:.85rem;max-width:60ch}

.lightbox{position:fixed;inset:0;z-index:200;display:none;align-items:center;justify-content:center;padding:2rem}
.lightbox.is-open{display:flex}
.lightbox__overlay{position:absolute;inset:0;background:rgba(12,11,8,.9)}
.lightbox__inner{position:relative;max-width:640px;width:100%;background:var(--asphalt);border:1px solid var(--line-dark);border-radius:var(--radius-lg);padding:1.6rem;z-index:2}
.lightbox__inner svg{width:100%;border-radius:var(--radius-md)}
.lightbox__caption{color:var(--paper-pure);font-family:var(--font-display);font-weight:700;text-transform:uppercase;font-size:1.1rem;margin-top:1rem;text-align:center}
.lightbox__close{position:absolute;top:-46px;right:0;width:38px;height:38px;background:var(--signal);color:var(--asphalt);border-radius:50%;display:flex;align-items:center;justify-content:center}
.lightbox__nav{position:absolute;top:50%;transform:translateY(-50%);width:42px;height:42px;background:rgba(247,243,234,.12);color:var(--paper-pure);border-radius:50%;display:flex;align-items:center;justify-content:center}
.lightbox__nav:hover{background:var(--signal);color:var(--asphalt)}
.lightbox__prev{left:-1rem}
.lightbox__next{right:-1rem}
@media(max-width:640px){.lightbox__nav{display:none}}

/* ---------- depoimentos ---------- */
.testimonials{background:var(--paper);padding:var(--section-pad) 0}
.demo-badge{display:inline-flex;align-items:center;gap:.4rem;background:var(--paper-soft);color:var(--ink-muted);font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;padding:.3em .7em;border-radius:999px;margin-bottom:.9rem}
.testimonial-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.3rem}
.testimonial-card{background:var(--paper-pure);border:1px dashed var(--line);border-radius:var(--radius-md);padding:1.6rem;display:flex;flex-direction:column;gap:.3rem}
.testimonial-card__stars{display:flex;gap:.15rem;color:var(--ink-muted)}
.testimonial-card__stars .icon{width:1.1em;height:1.1em}
.testimonial-card__quote{color:var(--ink-muted);font-style:italic;margin-top:.6rem;font-size:.96rem}
.testimonial-card__name{font-weight:700;margin-top:.9rem;font-size:.9rem;color:var(--ink-soft)}

/* ---------- faq ---------- */
.faq{background:var(--paper);padding:var(--section-pad) 0}
.faq-list{max-width:820px}
.faq-item{border-bottom:1px solid var(--line)}
.faq-item__q{width:100%;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1.3rem 0;text-align:left;font-family:var(--font-display);font-weight:700;text-transform:uppercase;letter-spacing:.01em;font-size:1.1rem}
.faq-item__q .icon{transition:transform .25s ease;flex-shrink:0;color:var(--signal-dark)}
.faq-item.is-open .faq-item__q .icon{transform:rotate(180deg)}
.faq-item__a{max-height:0;overflow:hidden;transition:max-height .3s ease}
.faq-item__a p{color:var(--ink-soft);padding-bottom:1.3rem;max-width:70ch}
.faq-item.is-open .faq-item__a{max-height:220px}

/* ---------- formulário de orçamento ---------- */
.quote{background:var(--asphalt);color:var(--paper-pure);padding:var(--section-pad) 0}
.quote__grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(2rem,5vw,3.5rem);align-items:start}
.quote__text{color:var(--paper-soft);margin-top:1rem;max-width:42ch}
.quote__points{margin-top:1.6rem;display:flex;flex-direction:column;gap:.7rem}
.quote__points li{display:flex;gap:.6rem;align-items:flex-start;font-size:.92rem;color:var(--paper-soft)}
.quote__points .icon{color:var(--signal);flex-shrink:0;margin-top:.15rem}
.quote__panel{background:var(--asphalt-2);border:1px solid var(--line-dark);border-radius:var(--radius-lg);padding:clamp(1.6rem,3vw,2.4rem);position:relative}
.quote__panel::before,.quote__panel::after{content:"";position:absolute;width:9px;height:9px;border-radius:50%;background:var(--line-dark);top:16px}
.quote__panel::before{left:16px}
.quote__panel::after{right:16px}
.quote__panel-bolt-b1,.quote__panel-bolt-b2{position:absolute;width:9px;height:9px;border-radius:50%;background:var(--line-dark);bottom:16px}
.quote__panel-bolt-b1{left:16px}
.quote__panel-bolt-b2{right:16px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.form-field{margin-bottom:1rem}
.form-field label{display:block;font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--signal);margin-bottom:.4rem}
.form-field input,.form-field textarea{width:100%;background:var(--asphalt);border:1px solid var(--line-dark);border-radius:var(--radius-sm);padding:.8em .9em;color:var(--paper-pure);font-size:.96rem}
.form-field input::placeholder,.form-field textarea::placeholder{color:var(--ink-muted)}
.form-field input:focus,.form-field textarea:focus{border-color:var(--signal)}
.form-field textarea{resize:vertical;min-height:90px}
.form-note{font-size:.78rem;color:var(--ink-muted);margin-top:.9rem}

/* ---------- cta final ---------- */
.final-cta{background:var(--signal);color:var(--asphalt);padding:clamp(3.4rem,6vw,6rem) 0;text-align:center;position:relative;overflow:hidden}
.final-cta__title{font-family:var(--font-display);font-weight:900;text-transform:uppercase;font-size:clamp(2.4rem,2rem+3vw,4.5rem);line-height:.96}
.final-cta__text{font-size:var(--fs-lead);margin-top:.8rem;max-width:44ch;margin-left:auto;margin-right:auto}
.final-cta__badges{font-family:var(--font-display);font-weight:800;text-transform:uppercase;letter-spacing:.03em;font-size:1.05rem;margin-top:1.4rem;opacity:.85}
.final-cta__actions{display:flex;flex-wrap:wrap;justify-content:center;gap:1rem;margin-top:2rem}
.final-cta .btn--outline{color:var(--asphalt)}
.final-cta .btn--outline:hover{background:rgba(20,19,16,.08)}

/* ---------- rodapé ---------- */
.footer{background:var(--asphalt);color:var(--paper-soft);padding:clamp(2.6rem,4vw,3.6rem) 0 1.6rem}
.footer__grid{display:grid;grid-template-columns:1.3fr .8fr 1fr;gap:2rem;padding-bottom:2rem;border-bottom:1px solid var(--line-dark)}
.footer__logo{display:flex;align-items:center;gap:.6rem;color:var(--paper-pure);margin-bottom:.8rem}
.footer__logo .logo-mark{height:38px;width:auto;max-width:78px}
.footer__logo-text{font-family:var(--font-display);font-weight:900;font-size:1.2rem;text-transform:uppercase}
.footer__tagline{font-size:.92rem;max-width:32ch}
.footer__title{font-family:var(--font-display);font-weight:800;text-transform:uppercase;letter-spacing:.03em;font-size:.95rem;color:var(--paper-pure);margin-bottom:.9rem}
.footer__links{display:flex;flex-direction:column;gap:.55rem}
.footer__links a:hover{color:var(--signal)}
.footer__contact{display:flex;flex-direction:column;gap:.6rem;font-size:.92rem}
.footer__contact li{display:flex;align-items:center;gap:.55rem}
.footer__contact .icon{width:1.1em;height:1.1em;color:var(--signal)}
.footer__bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.6rem;padding-top:1.4rem;font-size:.8rem;color:var(--ink-muted)}

/* ---------- whatsapp flutuante + barra mobile ---------- */
.whatsapp-float{position:fixed;right:20px;bottom:20px;z-index:90;display:flex;align-items:center;gap:.6rem;background:var(--go);color:#fff;padding:.85rem 1.1rem;border-radius:999px;box-shadow:0 10px 26px rgba(37,211,102,.4);transition:transform .2s ease, box-shadow .2s ease, opacity .25s ease}
.whatsapp-float:hover{transform:translateY(-3px) scale(1.03);box-shadow:0 14px 32px rgba(37,211,102,.5)}
/* enquanto o hero (com seus próprios botões) ainda está na tela, o botão
   flutuante fica invisível e sem clique — evita que ele fique por cima do
   título em telas pequenas, onde o hero é mais alto que a viewport */
.whatsapp-float.is-hidden{opacity:0;pointer-events:none;transform:translateY(10px)}
.whatsapp-float .icon{width:26px;height:26px}
.whatsapp-float__label{font-weight:700;font-size:.9rem;white-space:nowrap}

.mobile-bar{position:fixed;left:0;right:0;bottom:0;z-index:95;display:none;background:var(--asphalt);border-top:2px solid var(--signal);padding:.7rem .9rem calc(.7rem + env(safe-area-inset-bottom,0px));transition:transform .25s ease, opacity .25s ease}
.mobile-bar.is-hidden{transform:translateY(100%);opacity:0;pointer-events:none}
.mobile-bar a{display:flex;align-items:center;justify-content:center;gap:.5rem;background:var(--signal);color:var(--asphalt);font-family:var(--font-display);font-weight:800;text-transform:uppercase;letter-spacing:.02em;font-size:1.05rem;padding:.85em;border-radius:999px}

/* ---------- reveal / animações ----------
   Regra de ouro: o conteúdo é VISÍVEL por padrão. Só fica oculto se o
   JavaScript rodar com sucesso e adicionar a classe "pre-anim" — assim,
   se o script falhar por qualquer motivo no celular do usuário, o texto
   nunca fica invisível; ele só deixa de ter a animação de entrada. */
.reveal,.reveal-child{opacity:1;transform:none;transition:opacity .7s ease, transform .7s ease}
.reveal.pre-anim{opacity:0;transform:translateY(26px)}
.reveal-child.pre-anim{opacity:0;transform:translateY(20px)}
.reveal-child.pre-anim:nth-child(1){transition-delay:.03s}
.reveal-child.pre-anim:nth-child(2){transition-delay:.1s}
.reveal-child.pre-anim:nth-child(3){transition-delay:.17s}
.reveal-child.pre-anim:nth-child(4){transition-delay:.24s}
.reveal-child.pre-anim:nth-child(5){transition-delay:.31s}
.reveal-child.pre-anim:nth-child(6){transition-delay:.38s}
.hero__content.reveal.pre-anim{transform:translateX(-24px)}
.hero__art .reveal.pre-anim{transition:opacity .9s ease .15s, transform .9s ease .15s}
.reveal.is-visible,.reveal-child.is-visible{opacity:1;transform:translateY(0)}
/* a classe "pre-anim" nunca é removida pelo JS (só "is-visible" é adicionada),
   então a regra acima (2 classes) perdia em especificidade para a regra
   ".hero__content.reveal.pre-anim" (3 classes) e o deslocamento de -24px
   ficava permanente, cortando o início do título/texto contra o
   overflow:hidden do .hero. Esta regra, mais específica, corrige isso. */
.hero__content.reveal.pre-anim.is-visible{transform:translateX(0)}
.reveal-group.is-visible .reveal-child{opacity:1;transform:translateY(0)}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .reveal,.reveal-child{opacity:1!important;transform:none!important;transition:none!important}
  *{animation-duration:.001ms!important;transition-duration:.001ms!important}
}

/* ---------- responsivo ---------- */
@media(max-width:1080px){
  .service-grid{grid-template-columns:repeat(2,1fr)}
  .why__grid{grid-template-columns:repeat(2,1fr)}
  .gallery__grid{grid-template-columns:repeat(3,1fr)}
  .how__steps{grid-template-columns:repeat(2,1fr)}
  .testimonial-grid{grid-template-columns:1fr}
}
@media(max-width:860px){
  .nav,.header__cta{display:none}
  .nav-toggle{display:flex}
  .hero__grid{grid-template-columns:1fr;text-align:left}
  .hero__art{order:-1;max-width:260px;margin:0 auto}
  .hero{padding-top:4.8rem}
  .hero__content{padding-top:.6rem}
  .hero__title{margin-top:.3rem}
  .hero__subtitle{margin-top:.6rem}
  .hero__text{margin-top:.4rem}
  .hero__actions{margin-top:1rem}
  .hero__trust{margin-top:1.1rem}
  .hero__grid{padding-bottom:1.6rem}
  .strada__grid,.about__grid,.quote__grid{grid-template-columns:1fr}
  .about__badge{max-width:280px;margin:0 auto}
  .footer__grid{grid-template-columns:1fr;gap:2rem}
  .form-row{grid-template-columns:1fr}
  body{padding-bottom:74px}
  .mobile-bar{display:block}
  .whatsapp-float{bottom:92px}
  .whatsapp-float__label{display:none}
  .whatsapp-float{padding:.85rem}
}
@media(max-width:480px){
  .hero__art{max-width:190px}
  .hero{padding-top:4.2rem}
  .hero__content{padding-top:.3rem}
}
@media(max-width:640px){
  .service-grid,.why__grid{grid-template-columns:1fr}
  .strada__stats{grid-template-columns:1fr}
  .hero__trust{grid-template-columns:1fr}
  .how__steps{grid-template-columns:1fr}
  .placard{font-size:.9rem;padding:.55em .85em}
  .final-cta__title{font-size:clamp(2.1rem,10vw,3rem)}
  /* carrossel no celular: rolagem horizontal com snap em vez de grade */
  .gallery__grid{
    display:flex;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    gap:.9rem;
    padding-bottom:.6rem;
    margin:0 -1.25rem;
    padding-left:1.25rem;
    padding-right:1.25rem;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .gallery__grid::-webkit-scrollbar{display:none}
  .gallery__item{flex:0 0 74%;scroll-snap-align:center}
}