/* =============================================================
   We Connect Locações | Landing Page
   Tokens de marca em :root. Para aplicar a identidade final,
   altere apenas o bloco abaixo.
   ============================================================= */

:root{
  /* ---- Cores da marca ---- */
  --ink:      #16245B;   /* azul de marca, fundos escuros */
  --ink-2:    #101B45;   /* footer e faixas               */
  --ink-3:    #2C3C78;   /* peças das ilustrações         */
  --ink-4:    #1E2E6B;   /* cards e badges escuros        */

  --g:        #5DB400;   /* verde de marca                */
  --g-dk:     #4A9100;
  --g-lt:     #6FCC0C;   /* verde sobre fundo azul        */
  --g-soft:   rgba(93,180,0,.14);

  --wa:       #25D366;   /* verde oficial do WhatsApp     */
  --wa-dk:    #1EBE5A;   /* hover                         */

  --gray:     #EFF1F5;   /* seções claras                 */
  --gray-2:   #E2E6EE;   /* fundo das ilustrações         */
  --line:     #D8DDE8;
  --line-dk:  rgba(255,255,255,.14);

  --txt:      #16245B;
  --txt-2:    #5A6484;
  --txt-lt:   #FFFFFF;
  --txt-lt-2: rgba(255,255,255,.74);

  /* ---- Tipografia ---- */
  --f-disp: 'Oswald', 'Arial Narrow', sans-serif;
  --f-txt:  'Barlow', system-ui, -apple-system, sans-serif;
  --f-mono: 'IBM Plex Mono', ui-monospace, monospace;

  --t-sm:   clamp(.875rem, .85rem + .1vw, .9375rem);
  --t-base: clamp(1rem, .96rem + .16vw, 1.0625rem);
  --t-lg:   clamp(1.0625rem, 1rem + .28vw, 1.1875rem);
  --t-h3:   clamp(1.125rem, 1.02rem + .45vw, 1.375rem);
  --t-h2:   clamp(1.75rem, 1.2rem + 2.2vw, 2.9rem);
  --t-h1:   clamp(2.1rem, 1.45rem + 2.9vw, 3.7rem);

  /* ---- Métricas ---- */
  --wrap: 1400px;
  --gut:  clamp(1.15rem, 3.6vw, 3.25rem);
  --sec:  clamp(3.5rem, 7vw, 7rem);
  --hdr:  86px;

  --r:    10px;          /* raio padrão dos botões/cards */
  --r-sm: 7px;

  --ease: cubic-bezier(.2,.6,.35,1);
}

/* ============================ BASE ============================ */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0 }

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--hdr) + 12px);
  /* trava o "efeito elástico": não dá mais para puxar além do topo/base */
  overscroll-behavior:none;
  /* reforço: se algum navegador ignorar a linha acima, o fundo que
     aparece ao esticar é o azul-marinho, nunca o branco */
  background:var(--ink);
}
body{ overscroll-behavior:none }

body{
  font-family:var(--f-txt);
  font-size:var(--t-base);
  line-height:1.6;
  color:var(--txt);
  background:#fff;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}

img,svg,iframe{ display:block; max-width:100% }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer }
ul,ol,dl{ list-style:none }
a{ color:inherit; text-decoration:none }

h1,h2,h3{
  font-family:var(--f-disp); font-weight:700;
  text-transform:uppercase; letter-spacing:.005em;
  /* 1.12 dá espaço para os acentos de Ã, É e Ç não baterem na linha de cima */
  line-height:1.12;
  text-wrap:balance;
}

:focus-visible{ outline:3px solid var(--g); outline-offset:3px; border-radius:var(--r-sm) }
::selection{ background:var(--g); color:var(--ink) }

.skip{
  position:absolute; left:50%; top:-100px; transform:translateX(-50%); z-index:3000;
  background:var(--g); color:var(--ink); font-weight:700;
  padding:.75rem 1.4rem; border-radius:0 0 var(--r) var(--r);
  transition:top .2s var(--ease);
}
.skip:focus{ top:0 }

.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gut) }

.sec{ padding-block:var(--sec) }
.sec--gray{ background:var(--gray) }
.sec--dark{ background:var(--ink); color:var(--txt-lt) }
/* CTA final compacto: precisa caber em uma tela sem rolagem */
.sec--dark{ padding-block:clamp(2.5rem,4.5vw,4rem) }
.sec--dark .h2{ margin-bottom:1rem }
.sec--dark .lead-light{ margin-bottom:1.75rem }

.y{ color:var(--g-lt) }

/* ---- rótulos monoespaçados ---- */
.mono-eyebrow{
  font-family:var(--f-mono); font-size:.8125rem; font-weight:500;
  letter-spacing:.22em; text-transform:uppercase; color:var(--g);
  margin-bottom:1.15rem;
}
.mono-eyebrow--dark{ color:var(--txt-2) }
.mono-lbl{
  display:block; font-family:var(--f-mono); font-size:.75rem; font-weight:500;
  letter-spacing:.18em; text-transform:uppercase; color:var(--g);
  margin-bottom:.45rem;
}

.h2{ font-size:var(--t-h2); margin-bottom:1.25rem; max-width:20ch }
.h2--light{ color:var(--txt-lt) }
.sec__lead{ color:var(--txt-2); font-size:var(--t-lg); max-width:52ch; margin-bottom:2rem }
.lead-light{ color:var(--txt-lt-2); font-size:var(--t-lg); max-width:48ch; margin-bottom:2.25rem }

/* ============================ BOTÕES ============================ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  padding:.95rem 1.6rem; border-radius:var(--r);
  font-family:var(--f-disp); font-weight:600; font-size:.9375rem;
  letter-spacing:.05em; text-transform:uppercase; white-space:nowrap;
  border:2px solid transparent; cursor:pointer;
  transition:transform .16s var(--ease), background .2s var(--ease),
             color .2s var(--ease), border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.btn:hover{ transform:translateY(-2px) }
.btn:active{ transform:translateY(0) }
.btn .i{ width:1.2em; height:1.2em; flex:none }

.btn--wa{ background:var(--wa); color:#fff; box-shadow:0 6px 22px rgba(37,211,102,.34) }
.btn--wa:hover{ background:var(--wa-dk); box-shadow:0 10px 28px rgba(37,211,102,.45) }

.btn--outline{ border-color:rgba(255,255,255,.34); color:var(--txt-lt) }
.btn--outline:hover{ border-color:#fff; background:rgba(255,255,255,.07) }

.btn--dark{ background:var(--ink); color:#fff }
.btn--dark:hover{ background:#22357F }

.btn--ghost{ border-color:var(--ink); color:var(--ink) }
.btn--ghost:hover{ background:var(--ink); color:#fff }

.btn--lg{ padding:1.1rem 1.9rem; font-size:1rem }
.btn--sm{ padding:.7rem 1.15rem; font-size:.8125rem }
.btn--block{ width:100% }

.arrow{
  display:inline-flex; align-items:center; gap:.5rem;
  font-family:var(--f-disp); font-weight:600; font-size:.9375rem;
  letter-spacing:.05em; text-transform:uppercase; color:var(--ink);
}
.arrow span{ transition:transform .22s var(--ease) }
.arrow:hover span{ transform:translateX(5px) }
.arrow--light{ color:var(--txt-lt) }

/* ============================ HEADER ============================ */
.hdr{
  position:fixed; inset:0 0 auto 0; z-index:1000; height:var(--hdr);
  display:flex; align-items:center;
  background:var(--ink); border-bottom:1px solid transparent;
  transition:border-color .3s var(--ease);
}
.hdr.is-stuck{ border-bottom-color:var(--line-dk) }
.hdr__in{ display:flex; align-items:center; gap:1.5rem }

.logo{ display:inline-flex; align-items:center; gap:.7rem; margin-right:auto; flex:none }
/* logo sobre fundo branco, cantos suaves de 5px */
.logo__mark{
  flex:none; display:grid; place-items:center; line-height:0;
  background:#fff; border-radius:5px; padding:5px;
}
.logo__mark img{ width:auto; height:44px; display:block }
.logo__txt{
  font-family:var(--f-disp); font-weight:700; font-size:1.3rem;
  letter-spacing:.02em; color:#fff; white-space:nowrap;
}
.logo__txt b{ color:var(--g); font-weight:700 }

.nav ul{ display:flex; align-items:center; gap:clamp(1rem,2vw,2.15rem) }
.nav__cta{ display:none }   /* só no menu mobile */
.nav a{
  position:relative; font-size:1rem; color:rgba(255,255,255,.82);
  padding-block:.35rem; transition:color .2s var(--ease);
}
.nav a::after{
  content:''; position:absolute; left:0; bottom:0; height:2px; width:0;
  background:var(--g); transition:width .25s var(--ease);
}
.nav a:hover, .nav a.is-current{ color:#fff }
.nav a:hover::after, .nav a.is-current::after{ width:100% }

.burger{ display:none; width:44px; height:44px; flex-direction:column; align-items:center; justify-content:center; gap:5px }
.burger span{ display:block; width:23px; height:2px; background:#fff; border-radius:2px; transition:.28s var(--ease) }
.nav-open .burger span:nth-child(1){ transform:translateY(7px) rotate(45deg) }
.nav-open .burger span:nth-child(2){ opacity:0 }
.nav-open .burger span:nth-child(3){ transform:translateY(-7px) rotate(-45deg) }

@media (max-width:1080px){
  .burger{ display:flex }
  .hdr__cta{ display:none }
  .nav{
    position:fixed; inset:var(--hdr) 0 auto 0; background:var(--ink);
    border-bottom:1px solid var(--line-dk);
    max-height:0; overflow:hidden; transition:max-height .35s var(--ease);
  }
  .nav-open .nav{ max-height:75vh; overflow-y:auto }
  .nav ul{ flex-direction:column; align-items:stretch; gap:0; padding:.25rem var(--gut) 1.25rem }
  .nav a{ display:block; padding:1rem 0; font-size:1.1rem; border-bottom:1px solid var(--line-dk) }
  .nav a::after{ display:none }

  /* botão de WhatsApp dentro do menu */
  .nav__cta{ display:block; margin-top:1.15rem }
  .nav__cta a{
    display:flex; padding:.95rem 1.2rem; border-bottom:0;
    font-size:.95rem; color:#fff;
  }
}

/* ============================ HERO ============================ */
/* altura definida pelo conteúdo: nada estica verticalmente */
.hero{
  background:var(--ink); color:var(--txt-lt);
  padding-top:calc(var(--hdr) + clamp(1.5rem,3.2vw,2.75rem));
  padding-bottom:clamp(1.75rem,3.2vw,2.75rem);
  overflow:hidden;
}
.hero__in{
  display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(2rem,5vw,4rem);
  align-items:center;          /* sem stretch */
}
.hero__txt{ align-self:center; min-width:0 }

.hero__h1{
  font-size:var(--t-h1); margin-bottom:1.35rem; letter-spacing:-.005em;
  line-height:1.1;          /* acentos livres, sem sobreposição */
  text-wrap:initial;        /* as quebras são manuais, via <br> */
}
.hero__lead{
  color:var(--txt-lt-2); font-size:var(--t-lg); max-width:44ch; margin-bottom:1.75rem;
}
.hero__lead strong{ color:#fff; font-weight:600 }

.hero__btns{ display:flex; flex-wrap:wrap; gap:.85rem }

.hero__stats{
  display:flex; flex-wrap:wrap; gap:clamp(1.25rem,3.2vw,2.75rem);
  margin-top:1.85rem; padding-top:1.4rem; border-top:1px solid var(--line-dk);
}
.hero__stats b{ font-weight:500; font-size:var(--t-base); color:var(--txt-lt-2) }

/* coluna da ilustração: fluxo normal, sem sobreposição e sem corte */
.hero__art{
  align-self:center; min-width:0;
  display:flex; flex-direction:column; align-items:center; gap:1.25rem;
}
/* foto da frota no hero */
.hero__img{
  width:100%; max-width:620px; height:auto;
  border-radius:var(--r);
  box-shadow:0 24px 60px rgba(0,0,0,.35);
}


@media (max-width:1024px){
  .hero__in{ grid-template-columns:1fr; gap:clamp(1.5rem,3.5vw,2.5rem) }
  /* sem order: a foto segue a ordem do HTML, depois dos CTAs */
  .hero__art{ max-width:100%; margin-inline:auto; margin-top:.25rem }
  .hero__img{ max-width:100% }   /* ocupa a largura toda, sem sobrar margem */
}

/* TABLET: aproveita a largura sem esticar as linhas de texto */
@media (min-width:721px) and (max-width:1024px){
  .hero{
    padding-top:calc(var(--hdr) + 2.25rem);
    padding-bottom:2.5rem;
  }
  .hero__lead{ max-width:52ch }
  .hero__stats{ gap:2.5rem }
  /* a foto é panorâmica: limita a altura para o hero não virar uma torre */
  .hero__img{
    aspect-ratio:16/9; object-fit:cover; object-position:center;
    max-height:44vh;
  }
}
@media (max-width:560px){
  .hero__btns .btn{ width:100% }
  /* evita a quebra feia do eyebrow em duas linhas desalinhadas */
  .mono-eyebrow{ letter-spacing:.14em; font-size:.75rem }
}

/* ---- faixa zebrada ---- */
.hazard{
  height:18px;
  background:repeating-linear-gradient(-45deg,
    var(--g) 0 16px, var(--ink) 16px 32px);
}

/* ============================ FRENTES ============================ */
.fronts{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,330px),1fr));
  gap:clamp(1.15rem,2.4vw,1.85rem); margin-top:2.5rem;
}
.front{
  background:#fff; border-radius:var(--r);
  border-top:5px solid var(--ink);
  padding:clamp(1.6rem,3vw,2.4rem);
  box-shadow:0 1px 3px rgba(22,36,91,.06);
  display:flex; flex-direction:column;
}
/* card em destaque: borda verde mais grossa, tag verde e leve elevação */
.front--g{
  border-top-color:var(--g); border-top-width:7px;
  box-shadow:0 8px 26px rgba(22,36,91,.10);
}
.front--g .front__tag{ color:var(--g-dk) }
.front--g .arrow{ color:var(--g-dk) }

.front__tag{
  font-family:var(--f-mono); font-size:.75rem; font-weight:500;
  letter-spacing:.18em; text-transform:uppercase; color:var(--txt-2); margin-bottom:1rem;
}
.front h3{ font-size:var(--t-h3); margin-bottom:.9rem }
.front p{ color:var(--txt-2) }
.front .arrow{ margin-top:auto; padding-top:1.5rem; align-self:flex-start }

/* ============================ CARDS DE EQUIPAMENTO ============================ */
/* 3 por linha no desktop, 2 por linha no mobile.
   Cards da mesma linha têm a mesma altura (stretch padrão do grid). */
.cards{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(.85rem,2.4vw,1.85rem); margin-top:2.5rem;
}
@media (max-width:960px){ .cards{ grid-template-columns:repeat(2,minmax(0,1fr)) } }
.card{
  display:flex; flex-direction:column;
  border:1px solid var(--line); border-radius:var(--r); overflow:hidden;
  background:#fff; transition:box-shadow .28s var(--ease), transform .28s var(--ease);
}
.card:hover{ transform:translateY(-4px); box-shadow:0 14px 34px rgba(22,36,91,.12) }

/* área da foto: quadrada e com respiro mínimo, para o equipamento
   aparecer grande. Fundo branco uniforme (as fotos têm fundos variados). */
.card__art{
  aspect-ratio:1/1; display:grid; place-items:center; padding:.5rem;
  background:#fff; border-bottom:1px solid var(--line); overflow:hidden;
}
.card__art img{ width:100%; height:100%; object-fit:contain }

/* ajustes por foto (composições diferentes na imagem de origem) */
.art--tesoura img{ transform:scale(1.38) }       /* maior */
/* rádio: foto muito estreita e alta (279x893). Fixa pela altura e deixa a
   largura seguir a proporção, garantindo que sempre apareça. */
.art--radio img{ width:auto; max-width:100%; height:74%; object-fit:contain; transform:translateY(-92%) }
.art--unifilas img{ width:66%; height:66% }       /* quadrada: estava grande demais */
.art--articulada img{ transform:translateY(-22%) scale(.86) } /* menor, mais acima */
.art--extintor img{ height:74%; transform:translateY(-24%) } /* menor, um pouco mais acima */

.card__body{
  display:flex; flex-direction:column; flex:1;
  padding:1.15rem clamp(1.1rem,2vw,1.5rem) 1.3rem;
  border-top:4px solid var(--g);
}
.card__body h3{ font-size:1.2rem; margin-bottom:.45rem }
.card__body > p{ color:var(--txt-2); font-size:var(--t-sm); margin-bottom:1rem }

.spec{ margin-bottom:1.15rem; border-top:1px dashed var(--line) }
.spec > div{
  display:flex; justify-content:space-between; align-items:baseline; gap:1rem;
  padding:.5rem 0; border-bottom:1px dashed var(--line);
}
.spec dt{
  font-family:var(--f-mono); font-size:.7rem; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase; color:var(--txt-2); flex:none;
}
.spec dd{ font-size:var(--t-sm); font-weight:600; text-align:right }

.card .btn{ margin-top:auto }

/* MOBILE: 1 card por linha, foto em cima e grande.
   A moldura é quadrada para o equipamento aparecer inteiro. */
@media (max-width:720px){
  .cards{ grid-template-columns:1fr; gap:.8rem }

  .card{ flex-direction:column }

  .card__art{
    aspect-ratio:1/1;                   /* espaço cheio: equipamento inteiro */
    padding:.75rem;
    border-bottom:0; border-right:0;
  }
  /* anula os ajustes finos do desktop: no mobile todo equipamento
     aparece inteiro, centralizado e no mesmo enquadramento.
     Precisa listar as classes para vencer a especificidade delas. */
  .card__art img,
  .art--tesoura img, .art--articulada img, .art--radio img,
  .art--unifilas img, .art--extintor img{
    width:100%; max-width:100%; height:100%;
    object-fit:contain; transform:none;
  }

  /* enquadramento por equipamento no mobile
     (vem depois do reset acima para prevalecer) */
  .art--tesoura img{ transform:scale(1.5) }                     /* 1 · maior ainda */
  .art--articulada img{ transform:scale(.68) translateY(-20%) }  /* 2 · menor e acima */
  .art--radio img{ transform:scale(.3) translateY(-115%) }       /* 3 · bem menor e bem acima */
  .art--unifilas img{ transform:scale(.78) }                     /* 5 · menor */
  .art--extintor img{ transform:scale(.66) translateY(-20%) }    /* 6 · menor e acima */

  .card__body{
    padding:.8rem 1rem 1rem;
    border-top:4px solid var(--g); border-left:0;
  }
  .card__body h3{ font-size:1.05rem; margin-bottom:.3rem }
  .card__body > p{ font-size:.8125rem; margin-bottom:.7rem }

  .spec{ margin-bottom:.8rem }
  .spec > div{ padding:.4rem 0; gap:.75rem }
  .spec dt{ font-size:.64rem; letter-spacing:.1em }
  .spec dd{ font-size:.8rem }

  /* botão sempre em uma única linha */
  .card .btn{
    padding:.72rem .6rem; font-size:.78rem; gap:.45rem;
    white-space:nowrap; line-height:1;
  }
}



/* ============================ COMBO (texto + peça) ============================ */
.combo{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.85fr);
  gap:clamp(2rem,5vw,4.5rem); align-items:center;
}
.combo--map{ grid-template-columns:minmax(0,1fr) minmax(0,1.05fr) }
@media (max-width:960px){
  .combo, .combo--map{ grid-template-columns:1fr }
}

.combo__txt{ min-width:0 }   /* evita overflow do grid em telas estreitas */

.sq{ display:grid; gap:1rem; margin-bottom:2.25rem }
.sq li{ position:relative; padding-left:2.1rem; font-size:var(--t-lg) }
.sq li::before{
  content:''; position:absolute; left:0; top:.42em;
  width:14px; height:14px; border-radius:3px; background:var(--g);
}

.oncall{
  background:var(--ink); color:var(--txt-lt); border-radius:var(--r);
  border-left:6px solid var(--g);
  padding:clamp(1.75rem,3.4vw,2.6rem);
}
.oncall__big{
  font-family:var(--f-disp); font-weight:600; font-size:clamp(2.4rem,5vw,3.6rem);
  line-height:1; margin:.35rem 0 1.15rem;
}
.oncall p:last-child{ color:var(--txt-lt-2) }

/* ============================ DIFERENCIAIS ============================ */
.why{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(.85rem,2.2vw,1.6rem); margin-top:2.5rem;
}
@media (max-width:1080px){ .why{ grid-template-columns:repeat(2,minmax(0,1fr)) } }
.why article{
  background:var(--gray); border-radius:var(--r);
  padding:clamp(1.4rem,2.6vw,1.9rem);
}
.chip{
  display:inline-block; margin-bottom:1.15rem;
  background:var(--ink); color:var(--g); border-radius:var(--r-sm);
  padding:.4rem .7rem;
  font-family:var(--f-mono); font-size:.75rem; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase;
}
.why h3{ font-size:1.15rem; margin-bottom:.7rem }
.why p{ color:var(--txt-2); font-size:var(--t-sm) }

/* ============================ REGIÃO ============================ */
.pills{ display:flex; flex-wrap:wrap; gap:.6rem; margin-bottom:1.85rem }
.pills li{
  padding:.65rem 1.15rem; border-radius:999px;
  border:1px solid var(--line); background:#fff;
  font-family:var(--f-mono); font-size:.8125rem; letter-spacing:.04em;
}
.pills .is-on{ background:var(--ink); border-color:var(--ink); color:var(--g) }

.note{ color:var(--txt-2); font-size:var(--t-sm) }
.note a{ color:var(--ink); font-weight:600; border-bottom:2px solid var(--g) }

.radar{ display:flex; justify-content:center }
.radar svg{ width:100%; max-width:480px; height:auto }
.radar__t{ font-family:var(--f-mono); font-size:17px; letter-spacing:.04em }

/* ============================ CONTATO ============================ */
.info{ margin-top:1.85rem; border-top:1px solid var(--line-dk) }
.info > div{ padding:.8rem 0; border-bottom:1px solid var(--line-dk) }
.info dt{
  font-family:var(--f-mono); font-size:.7rem; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase; color:var(--g); margin-bottom:.15rem;
}
.info dd{ color:#fff }
.info dd a{ border-bottom:2px solid var(--g) }

/* título em largura cheia; as colunas começam abaixo dele e o mapa
   estica até o fim da lista de contato */
.contato__h2{ max-width:26ch; margin-bottom:clamp(1.5rem,3vw,2.25rem) }
.combo--top{ align-items:stretch }

.mapbox{ align-self:stretch; display:flex; flex-direction:column }
.mapbox iframe{
  width:100%; flex:1; min-height:340px; border:0; border-radius:var(--r);
  border-top:5px solid var(--g);
  background:var(--ink-4);
}
.mapbox figcaption{
  margin-top:.9rem; text-align:left;
  font-size:var(--t-sm); color:var(--txt-lt-2);
}
@media (max-width:960px){
  .mapbox iframe{ flex:none; aspect-ratio:4/3; min-height:0 }
}

/* ============================ FOOTER ============================ */
/* colunas alinhadas ao topo: nada estica verticalmente */
.ft{ background:var(--ink-2); color:var(--txt-lt-2) }
.ft__in{
  display:grid; grid-template-columns:minmax(0,1.4fr) repeat(2,minmax(0,1fr));
  gap:clamp(1.75rem,4vw,3.5rem);
  align-items:start;
  padding-block:clamp(2.75rem,5vw,4rem);
}
@media (max-width:820px){ .ft__in{ grid-template-columns:1fr } }

.ft__brand .logo{ margin-bottom:1.15rem }
.ft__brand p{ max-width:38ch }
.ft__col p{ margin-bottom:.5rem }
.ft__col .arrow{ margin-top:.75rem }

.ft__bar{
  padding-block:1.4rem; border-top:1px solid var(--line-dk);
  font-size:var(--t-sm);
}

/* ============================ FAB ============================ */
.wafab{
  position:fixed; z-index:900;
  right:clamp(1rem,2.5vw,1.75rem);
  bottom:calc(clamp(1rem,2.5vw,1.75rem) + env(safe-area-inset-bottom,0px));
  width:62px; height:62px; display:grid; place-items:center;
  border-radius:50%; background:var(--wa); color:#fff;
  box-shadow:0 10px 28px rgba(37,211,102,.45);
  transition:transform .2s var(--ease), box-shadow .2s var(--ease);
}
.wafab:hover{ transform:translateY(-3px) scale(1.04); background:var(--wa-dk); box-shadow:0 16px 36px rgba(37,211,102,.55) }
.wafab svg{ width:31px; height:31px }
@media (max-width:560px){ .wafab{ width:56px; height:56px } .wafab svg{ width:28px; height:28px } }

/* ============================ REVEAL ============================ */
/* NÃO existe nenhuma regra que deixe conteúdo invisível.
   A entrada é só uma animação disparada quando o JS adiciona .in.
   Sem JS, com JS quebrado ou com JS lento, tudo aparece normalmente. */
@keyframes rvIn{
  from{ opacity:0; transform:translateY(18px) }
  to  { opacity:1; transform:none }
}
.rv.in{ animation:rvIn .55s var(--ease) both }
.rv.in[data-d="1"]{ animation-delay:.06s }
.rv.in[data-d="2"]{ animation-delay:.12s }
.rv.in[data-d="3"]{ animation-delay:.18s }

@media (prefers-reduced-motion:reduce){
  .rv.in{ animation:none }
}

/* ============================ A11Y / PRINT ============================ */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto }
  *,*::before,*::after{
    animation-duration:.01ms !important; transition-duration:.01ms !important;
  }
}
@media (prefers-contrast:more){
  :root{ --txt-2:#4A505C; --line:#B5B5B5; --txt-lt-2:rgba(255,255,255,.92) }
}
@media print{
  .hdr,.wafab,.hazard,.mapbox{ display:none !important }
  body,.sec--dark,.hero,.ft{ background:#fff !important; color:#000 !important }
  .sec{ padding-block:1.25rem }
}