/* ═══════════════════════════════════════════════════════════════
   VELOMED — folha compartilhada (index.html · sobre.html · contato.html)
   HTML estático puro. Sem build, sem dependência.
   ═══════════════════════════════════════════════════════════════ */

/* ─────────────────────────── TOKENS ─────────────────────────── */
:root{
  /* Paleta fixa — design system Velomed. NÃO ALTERAR. */
  --green:#13973a;
  --green-deep:#0f7d30;
  --green-mist:#e9f5ec;
  --green-soft:#d9ecde;
  --yellow:#d9da08;
  --yellow-soft:#f4f5a8;
  --ink:#1f1f1f;
  --ink-2:#3a3a3a;
  --muted:#6b7167;
  --mist:#f5f5f5;
  --paper:#ffffff;
  --line:#eceae3;

  /* Derivados para ancoragem e contraste */
  --green-800:#0a5f24;
  --green-900:#073f18;
  --green-950:#052a10;
  --on-green:#ffffff;
  --on-green-2:#bfe0c9;
  --on-dark-2:#9fb3a5;

  /* Escala de espaço */
  --s2:8px; --s3:12px; --s4:16px; --s5:24px;
  --s6:32px; --s7:48px; --s8:64px; --s9:96px;
  /* Era clamp(64px,8.5vw,120px) = 240px de espaço morto entre seções no
     desktop. Apertado para ~144px: ainda respira, mas sem buraco. */
  --section-y: clamp(48px, 5vw, 80px);
  --gutter: clamp(20px, 5vw, 28px);
  --maxw: 1180px;

  /* Profundidade — tingida de verde, nunca cinza puro */
  --sh-1: 0 2px 4px rgba(12,48,24,.05), 0 8px 20px rgba(12,48,24,.06);
  --sh-2: 0 4px 10px rgba(12,48,24,.06), 0 18px 44px rgba(12,48,24,.10);

  --r-sm:12px; --r-md:18px; --r-lg:26px; --r-xl:38px;
  --ease-out: cubic-bezier(.16,1,.3,1);
  --header-h:84px;
}

/* ──────────────────────────── BASE ──────────────────────────── */
*{ box-sizing:border-box }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; scroll-padding-top:90px }
html,body{ margin:0; padding:0 }
body{
  font-family:'Poppins',system-ui,-apple-system,sans-serif;
  color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  font-size:16px;
  line-height:1.6;
  overflow-x:hidden;
}
img{ max-width:100%; display:block }

::selection{ background:var(--yellow); color:var(--ink) }
body{ caret-color:var(--green) }
:focus-visible{ outline:3px solid var(--green); outline-offset:3px; border-radius:4px }
.on-dark :focus-visible{ outline-color:var(--yellow) }

@supports (scrollbar-color: auto){
  html{ scrollbar-color: var(--green-soft) var(--mist); scrollbar-width:thin }
}
::-webkit-scrollbar{ width:11px; height:11px }
::-webkit-scrollbar-track{ background:var(--mist) }
::-webkit-scrollbar-thumb{ background:var(--green-soft); border-radius:99px; border:3px solid var(--mist) }
::-webkit-scrollbar-thumb:hover{ background:var(--green) }

h1,h2,h3,h4,h5,.display{
  font-family:'Garet','Poppins',system-ui,sans-serif;
  font-weight:700;
  line-height:1.08;
  letter-spacing:-.018em;
  margin:0;
  text-wrap:balance;
}
h1,.h1{ font-size:clamp(2.1rem, 1.25rem + 4.1vw, 4.1rem) }
h2,.h2{ font-size:clamp(1.65rem, 1.05rem + 2.6vw, 2.9rem) }
h3,.h3{ font-size:clamp(1.15rem, .98rem + .72vw, 1.5rem); letter-spacing:-.012em }
p{ margin:0 }
a{ color:inherit }

.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter) }
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
.lead{
  font-size:clamp(1.02rem, .97rem + .3vw, 1.2rem);
  color:var(--ink-2); line-height:1.72; max-width:62ch; text-wrap:pretty;
}

/* Olho de seção — régua verde fina, elemento recorrente da identidade */
.eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-size:.75rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--green-deep); margin-bottom:var(--s4);
}
.eyebrow::before{ content:''; width:28px; height:2px; background:var(--green); border-radius:2px }
.on-dark .eyebrow{ color:var(--yellow) }
.on-dark .eyebrow::before{ background:var(--yellow) }

.section{ padding-block:var(--section-y) }
.section--mist{ background:var(--mist) }
.section--green{ background:var(--green-900); color:var(--on-green) }
.section--green p{ color:var(--on-green-2) }
.sec-head{ max-width:66ch; margin-bottom:clamp(26px,3vw,42px) }
.sec-head p{ margin-top:var(--s4) }

/* ─────────────────────────── BOTÕES ─────────────────────────── */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:52px; padding:0 26px;
  font-family:'Poppins',sans-serif; font-size:.97rem; font-weight:600;
  text-decoration:none; border-radius:99px; border:2px solid transparent;
  cursor:pointer; white-space:nowrap;
  transition:background-color .15s var(--ease-out), color .15s var(--ease-out),
             border-color .15s var(--ease-out), transform .15s var(--ease-out),
             box-shadow .15s var(--ease-out);
}
.btn svg{ width:19px; height:19px; flex:none; fill:currentColor }
.btn:hover{ transform:translateY(-2px) }
.btn:active{ transform:translateY(0) }

/* primário: verde-profundo para garantir branco em AA (5,25:1) */
.btn--wa{ background:var(--green-deep); color:#fff; box-shadow:var(--sh-1) }
.btn--wa:hover{ background:var(--green-800); box-shadow:var(--sh-2) }

.btn--yellow{ background:var(--yellow); color:var(--ink) }
.btn--yellow:hover{ background:var(--yellow-soft) }

.btn--ghost{ background:transparent; color:var(--green-deep); border-color:var(--green-soft) }
.btn--ghost:hover{ background:var(--green-mist); border-color:var(--green) }

.on-dark .btn--ghost{ color:#fff; border-color:rgba(255,255,255,.4) }
.on-dark .btn--ghost:hover{ background:rgba(255,255,255,.12); border-color:#fff }

.btn--sm{ min-height:44px; padding:0 20px; font-size:.9rem }
.btn-row{ display:flex; flex-wrap:wrap; gap:var(--s3) }

/* ─────────────────────────── HEADER ─────────────────────────── */
.header{
  position:sticky; top:0; z-index:60;
  background:rgba(255,255,255,.92);
  border-bottom:1px solid var(--line);
  transition:box-shadow .2s var(--ease-out), padding .2s var(--ease-out);
  padding-block:12px;
}
@supports (backdrop-filter: blur(1px)){
  .header{ backdrop-filter:saturate(1.6) blur(12px) }
}
.header--scrolled{ box-shadow:var(--sh-1); padding-block:6px }
.header .wrap{ display:flex; align-items:center; gap:var(--s5) }
.brandmark{ display:flex; align-items:center; flex:none; text-decoration:none }
.brandmark img{
  height:58px; width:auto;
  transition:height .2s var(--ease-out);
}
.header--scrolled .brandmark img{ height:46px }

.nav-desk{ display:flex; align-items:center; gap:4px; margin-left:auto }
.nav-desk a{
  position:relative; padding:10px 14px; border-radius:10px;
  font-size:.95rem; font-weight:500; color:var(--ink-2); text-decoration:none;
  transition:color .15s var(--ease-out), background-color .15s var(--ease-out);
}
.nav-desk a:hover{ color:var(--green-deep); background:var(--green-mist) }
.nav-desk a[aria-current="page"]{ color:var(--green-deep); font-weight:600 }
.nav-desk a[aria-current="page"]::after{
  content:''; position:absolute; left:14px; right:14px; bottom:4px;
  height:2px; background:var(--green); border-radius:2px;
}
.header-cta{ display:flex; gap:var(--s2); margin-left:var(--s4) }

.burger{
  display:none; margin-left:auto;
  width:48px; height:48px; padding:0;
  align-items:center; justify-content:center;
  background:var(--green-mist); border:0; border-radius:14px; cursor:pointer;
}
.burger span{
  display:block; position:relative; width:21px; height:2px;
  background:var(--green-deep); border-radius:2px;
  transition:background-color .2s var(--ease-out);
}
.burger span::before,.burger span::after{
  content:''; position:absolute; left:0; width:21px; height:2px;
  background:var(--green-deep); border-radius:2px;
  transition:transform .25s var(--ease-out);
}
.burger span::before{ top:-7px }
.burger span::after{ top:7px }
.burger[aria-expanded="true"] span{ background:transparent }
.burger[aria-expanded="true"] span::before{ transform:translateY(7px) rotate(45deg) }
.burger[aria-expanded="true"] span::after{ transform:translateY(-7px) rotate(-45deg) }

/* Drawer mobile — FICA FORA DO <header>.
   O backdrop-filter do header cria bloco de contenção e colapsa position:fixed. */
.mobile-nav{
  position:fixed; inset:0; z-index:70;
  display:flex; flex-direction:column;
  background:var(--paper);
  padding:calc(var(--header-h) + 24px) var(--gutter) var(--gutter);
  transform:translateX(100%); visibility:hidden;
  transition:transform .3s var(--ease-out), visibility .3s;
  overflow-y:auto;
}
.mobile-nav.open{ transform:translateX(0); visibility:visible }
.mobile-nav a.mn-link{
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 4px; font-family:'Garet','Poppins',sans-serif;
  font-size:1.5rem; font-weight:700; letter-spacing:-.015em;
  color:var(--ink); text-decoration:none; border-bottom:1px solid var(--line);
}
.mobile-nav a.mn-link[aria-current="page"]{ color:var(--green-deep) }
.mobile-nav a.mn-link::after{ content:'\2192'; color:var(--green); font-size:1.1rem }
.mn-foot{ margin-top:auto; padding-top:var(--s6); display:grid; gap:var(--s3) }
.mn-foot .btn{ width:100% }
body.nav-open{ overflow:hidden }
/* Com o drawer aberto o header sobe acima dele: senão o próprio botão que
   vira X fica coberto e o único jeito de fechar no celular é clicar num link. */
body.nav-open .header{ z-index:80; background:var(--paper); box-shadow:none }

/* ──────────────────────────── HERO ──────────────────────────── */
/* Tipográfico. Sem fotografia: a beleza vem de escala, cor e respiro. */
.hero{
  position:relative; overflow:hidden;
  background:var(--green-900); color:var(--on-green);
  padding-block:clamp(60px,9vw,118px);
}
/* Um gradiente só: tira o verde chapado sem virar enfeite. */
.hero::before{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(900px 500px at 82% -10%, rgba(19,151,58,.55), transparent 62%);
}
.hero .wrap{ position:relative; z-index:1 }
.hero h1{ max-width:16ch }
.hero h1 em{ font-style:normal; color:var(--yellow) }
.hero .lead{ color:var(--on-green-2); margin-top:var(--s5); max-width:54ch }
.hero .btn-row{ margin-top:clamp(28px,4vw,40px) }
.hero-note{
  margin-top:var(--s5); font-size:.87rem; color:var(--on-dark-2);
  display:flex; align-items:center; gap:8px;
}
.hero-note::before{
  content:''; width:7px; height:7px; border-radius:99px;
  background:var(--yellow); flex:none;
}

/* Seta de rolagem — fecha o hero e puxa o olho para baixo */
.hero-cue{
  position:absolute; left:50%; bottom:22px; translate:-50% 0; z-index:2;
  display:flex; flex-direction:column; align-items:center; gap:6px;
  color:var(--on-dark-2); text-decoration:none;
  font-size:.72rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  transition:color .2s var(--ease-out);
}
.hero-cue:hover{ color:var(--yellow) }
.hero-cue svg{ width:20px; height:20px; fill:currentColor; animation:cue 2.1s var(--ease-out) infinite }
@keyframes cue{
  0%,100%{ transform:translateY(0);   opacity:.65 }
  50%    { transform:translateY(7px); opacity:1 }
}
@media (max-width:900px){ .hero-cue{ display:none } }

/* Hero interno (sobre / contato) — mesma linguagem, menos altura */
.hero--inner{ padding-block:clamp(48px,7vw,84px) }

/* ───────── ENTRADA: cortina com a logo ─────────
   Injetada por JS. Sem JS ela não existe e o site aparece direto —
   nunca há risco de o visitante ficar preso atrás de uma tela. */
.intro{
  position:fixed; inset:0; z-index:200;
  display:flex; align-items:center; justify-content:center;
  background:var(--green-900);
  animation:intro-sai .5s var(--ease-out) 1.15s both;
}
.intro img{
  width:min(260px, 52vw); height:auto;
  animation:intro-logo 1.15s var(--ease-out) both;
}
@keyframes intro-logo{
  0%   { opacity:0; transform:scale(.82) translateY(10px); filter:blur(6px) }
  55%  { opacity:1; transform:scale(1)   translateY(0);    filter:blur(0) }
  100% { opacity:1; transform:scale(1)   translateY(0);    filter:blur(0) }
}
@keyframes intro-sai{
  from{ opacity:1; clip-path:inset(0 0 0 0) }
  to  { opacity:0; clip-path:inset(0 0 100% 0) }
}
body.intro-on{ overflow:hidden }
.hero--inner h1{ max-width:20ch }
.crumb{
  font-size:.8rem; letter-spacing:.1em; text-transform:uppercase;
  font-weight:600; color:var(--yellow); margin-bottom:var(--s4);
}

/* ──────────────────────── FICHA / NÚMEROS ───────────────────── */
.stats{
  display:grid; gap:1px; background:rgba(255,255,255,.16);
  border:1px solid rgba(255,255,255,.16); border-radius:var(--r-md);
  overflow:hidden; margin-top:clamp(36px,5vw,56px);
  grid-template-columns:repeat(2,1fr);
}
.stats > div{ background:var(--green-900); padding:var(--s5) var(--s4) }
/* No hero as células são translúcidas para o gradiente atravessar.
   O gap de 1px continua visível porque o fundo do grid é branco a 16%. */
.hero .stats > div{ background:rgba(5,42,16,.42) }
.stat-n{
  font-family:'Garet','Poppins',sans-serif; font-weight:800;
  font-size:clamp(1.9rem,1.3rem + 2vw,2.9rem); line-height:1;
  color:var(--yellow); letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;
}
.stat-l{
  margin-top:8px; font-size:.84rem; line-height:1.4;
  color:var(--on-green-2); letter-spacing:.01em;
}
/* Variante clara, usada no Sobre */
.stats--light{ background:var(--line); border-color:var(--line) }
.stats--light > div{ background:var(--paper) }
.stats--light .stat-n{ color:var(--green-deep) }
.stats--light .stat-l{ color:var(--muted) }

/* ───────────────────── MARCAS — carrossel ──────────────────── */
/* Fundo branco, logo colorida. Funciona vazio: cai para card tipográfico. */
.marcas{ background:var(--paper); padding-block:var(--section-y) }
.marcas .sec-head{ text-align:center; margin-inline:auto; margin-bottom:clamp(24px,2.8vw,38px) }
.marcas .eyebrow{ justify-content:center }

.mq{
  position:relative; overflow:hidden;
  padding-block:var(--s3);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
}
.mq + .mq{ margin-top:var(--s4) }
/* Duas faixas em sentidos opostos: a de cima corre para a esquerda, a de
   baixo para a direita. A 46s/54s o contraste não era percebido — um card
   tem 192px e levava 3s para andar a própria largura. A 32s/40s fica
   evidente (~91 e ~68 px/s) e a logo ainda dá tempo de ser lida. */
.mq-track{
  display:flex; width:max-content; gap:var(--s4);
  animation:mq-run 32s linear infinite;
  will-change:transform;
}
.mq--rev .mq-track{ animation-direction:reverse; animation-duration:40s }
.mq:hover .mq-track,
.mq:focus-within .mq-track{ animation-play-state:paused }
@keyframes mq-run{ from{ transform:translateX(0) } to{ transform:translateX(-50%) } }

.mq-item{
  flex:none;
  display:flex; align-items:center; justify-content:center;
  width:192px; height:116px; padding:var(--s4);
  background:var(--paper); border:1px solid var(--line);
  border-radius:var(--r-sm);
  transition:border-color .2s var(--ease-out), box-shadow .2s var(--ease-out),
             transform .2s var(--ease-out);
}
.mq-item:hover{ border-color:var(--green-soft); box-shadow:var(--sh-1); transform:translateY(-2px) }
.mq-item img{
  max-height:68px; max-width:100%; width:auto; object-fit:contain;
}
/* Fallback tipográfico enquanto a logo não chegou */
.mq-item .mq-name{
  font-family:'Garet','Poppins',sans-serif; font-weight:700;
  font-size:1rem; letter-spacing:-.01em; color:var(--ink-2);
  text-align:center; line-height:1.25;
}
.marcas-foot{
  margin-top:clamp(28px,4vw,42px); text-align:center;
  font-size:.9rem; color:var(--muted);
}

/* ───────────────── CATEGORIAS — lista tipográfica ──────────── */
/* Sem fotografia: régua verde, número, título e descrição. */
.cats{ display:grid; gap:0; border-top:1px solid var(--line) }
.cat{
  display:grid; align-items:start; gap:var(--s3) var(--s5);
  grid-template-columns:auto 1fr;
  padding-block:clamp(22px,3vw,30px);
  border-bottom:1px solid var(--line);
  transition:background-color .2s var(--ease-out);
}
.cat:hover{ background:var(--green-mist) }
.cat-n{
  font-family:'Garet','Poppins',sans-serif; font-weight:700;
  font-size:.82rem; letter-spacing:.08em; color:var(--green);
  padding-top:6px; font-variant-numeric:tabular-nums;
}
.cat-b h3{ color:var(--ink) }
.cat-b p{ margin-top:8px; color:var(--muted); font-size:.95rem; max-width:64ch }

/* ───────────────────────── PILARES ─────────────────────────── */
.pillars{ display:grid; gap:0; margin-top:var(--s6) }
.pillar{
  padding:var(--s5) 0 var(--s5) var(--s5);
  border-left:2px solid var(--green-soft);
  transition:border-color .2s var(--ease-out);
}
.pillar:hover{ border-left-color:var(--green) }
.pillar h3{ font-size:1.08rem }
.pillar p{ margin-top:6px; color:var(--muted); font-size:.95rem }

/* ─────────────────── PASSOS — como comprar ─────────────────── */
.steps{ display:grid; gap:var(--s5); counter-reset:step }
.step{
  position:relative; padding-left:62px; counter-increment:step;
}
.step::before{
  content:counter(step); position:absolute; left:0; top:0;
  width:44px; height:44px; border-radius:99px;
  display:flex; align-items:center; justify-content:center;
  font-family:'Garet','Poppins',sans-serif; font-weight:700; font-size:1.05rem;
  background:var(--green-mist); color:var(--green-deep);
  border:1px solid var(--green-soft);
}
.on-dark .step::before{
  background:rgba(255,255,255,.1); color:var(--yellow);
  border-color:rgba(255,255,255,.22);
}
.step h3{ font-size:1.08rem; padding-top:9px }
.step p{ margin-top:6px; font-size:.95rem; color:var(--muted) }
.on-dark .step p{ color:var(--on-green-2) }

/* ──────────────────── VÍDEO (player próprio) ───────────────── */
/* Hospedado no próprio site. preload="none": zero byte de vídeo até o clique.
   O botão de play é injetado por JS — sem JS, sobram os controles nativos. */
.video{
  position:relative; aspect-ratio:16/9;
  border-radius:var(--r-lg); overflow:hidden;
  background:var(--green-950); box-shadow:var(--sh-2);
}
.video video{
  display:block; width:100%; height:100%;
  object-fit:cover; background:var(--green-950);
}
.video-play{
  position:absolute; inset:0; width:100%; height:100%;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:14px; padding:0;
  border:0; color:#fff; cursor:pointer;
  /* Véu escuro: a capa é movimentada e o rótulo não lê sem ele. */
  background:linear-gradient(180deg, rgba(5,42,16,.3) 0%, rgba(5,42,16,.55) 100%);
  transition:background-color .2s var(--ease-out), opacity .2s var(--ease-out);
}
.video-play:hover{ background:rgba(5,42,16,.62) }
.video-play .ic{
  width:clamp(62px,9vw,80px); height:clamp(62px,9vw,80px); border-radius:99px;
  display:flex; align-items:center; justify-content:center;
  background:var(--yellow); color:var(--green-950);
  box-shadow:0 10px 30px rgba(5,42,16,.45);
  transition:transform .2s var(--ease-out);
}
.video-play:hover .ic{ transform:scale(1.07) }
.video-play .ic svg{ width:42%; height:42%; fill:currentColor; margin-left:9% }
.video-play .txt{
  font-family:'Garet','Poppins',sans-serif;
  font-size:clamp(.95rem,.88rem + .35vw,1.15rem); font-weight:700;
  letter-spacing:-.01em; text-align:center; max-width:24ch;
  padding-inline:var(--s4);
  text-shadow:0 2px 14px rgba(5,42,16,.9);
}
.video-nota{
  margin-top:var(--s4); font-size:.84rem; color:var(--muted); text-align:center;
}

/* ───────────────────────── FIGURAS ─────────────────────────── */
.figure{
  border-radius:var(--r-lg); overflow:hidden;
  box-shadow:var(--sh-2); background:var(--mist);
}
.figure img{ width:100%; height:100%; object-fit:cover }
.split{ display:grid; gap:clamp(32px,5vw,64px); align-items:center }

/* ─────────────────────── CONTATO — cards ───────────────────── */
.contact-grid{ display:grid; gap:var(--s4) }
.ccard{
  display:block; padding:var(--s5);
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r-md);
  text-decoration:none; color:inherit;
  transition:border-color .2s var(--ease-out), box-shadow .2s var(--ease-out),
             transform .2s var(--ease-out);
}
a.ccard:hover{ border-color:var(--green-soft); box-shadow:var(--sh-2); transform:translateY(-3px) }
.ccard-ic{
  width:46px; height:46px; border-radius:14px; margin-bottom:var(--s4);
  display:flex; align-items:center; justify-content:center;
  background:var(--green-mist); color:var(--green-deep);
}
.ccard-ic svg{ width:22px; height:22px; fill:currentColor }
.ccard h3{ font-size:1.05rem }
.ccard-v{
  margin-top:6px; font-weight:600; color:var(--green-deep);
  font-size:1.02rem; word-break:break-word;
}
.ccard p{ margin-top:6px; font-size:.88rem; color:var(--muted) }

.map-embed{
  border-radius:var(--r-lg); overflow:hidden; border:1px solid var(--line);
  box-shadow:var(--sh-1); background:var(--mist);
}
.map-embed iframe{ display:block; width:100%; height:380px; border:0 }

/* ───────────── NAVEGAÇÃO CRUZADA entre páginas ─────────────── */
/* Pedido do cliente: cada página linka as outras por botão, não só pelo menu. */
.crosslinks{ display:grid; gap:var(--s4) }
.xlink{
  display:flex; align-items:center; justify-content:space-between; gap:var(--s4);
  padding:var(--s5); text-decoration:none; color:inherit;
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r-md);
  transition:border-color .2s var(--ease-out), box-shadow .2s var(--ease-out),
             transform .2s var(--ease-out);
}
.xlink:hover{ border-color:var(--green); box-shadow:var(--sh-2); transform:translateY(-3px) }
.xlink h3{ font-size:1.12rem }
.xlink p{ margin-top:4px; font-size:.9rem; color:var(--muted) }
.xlink-go{
  flex:none; width:44px; height:44px; border-radius:99px;
  display:flex; align-items:center; justify-content:center;
  background:var(--green-mist); color:var(--green-deep); font-size:1.05rem;
  transition:background-color .2s var(--ease-out), transform .2s var(--ease-out);
}
.xlink:hover .xlink-go{ background:var(--green); color:#fff; transform:translateX(3px) }

/* Faixa de conversão, fecha toda página */
.cta-band{ background:var(--green-900); color:var(--on-green); text-align:center }
.cta-band h2{ max-width:20ch; margin-inline:auto }
.cta-band p{ margin-top:var(--s4); margin-inline:auto; color:var(--on-green-2) }
.cta-band .lead{ max-width:56ch }
.cta-band .btn-row{ margin-top:clamp(28px,4vw,38px); justify-content:center }

/* ───────────────────────── RODAPÉ ──────────────────────────── */
.footer{ background:var(--green-950); color:var(--on-green); padding-block:var(--s8) var(--s6) }
.footer a{ color:var(--on-green-2); text-decoration:none; transition:color .15s var(--ease-out) }
.footer a:hover{ color:var(--yellow) }
.foot-grid{ display:grid; gap:var(--s7) }
.foot-grid img{ height:52px; width:auto }
.foot-grid h4{
  font-family:'Poppins',sans-serif; font-size:.76rem; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; color:var(--yellow);
  margin:0 0 var(--s4);
}
.foot-grid ul{ list-style:none; margin:0; padding:0; display:grid; gap:10px; font-size:.92rem }
.foot-about{ margin-top:var(--s4); font-size:.9rem; color:var(--on-dark-2); max-width:38ch }
.foot-bar{
  margin-top:var(--s8); padding-top:var(--s5);
  border-top:1px solid rgba(255,255,255,.12);
  display:flex; flex-wrap:wrap; gap:var(--s3); justify-content:space-between;
  font-size:.82rem; color:var(--on-dark-2);
}

/* ──────────────────── WHATSAPP FLUTUANTE ───────────────────── */
.wa-float{
  position:fixed; right:18px; bottom:18px; z-index:55;
  width:58px; height:58px; border-radius:99px;
  display:flex; align-items:center; justify-content:center;
  background:var(--green-deep); color:#fff;
  box-shadow:0 8px 28px rgba(12,48,24,.35);
  transition:transform .18s var(--ease-out), background-color .18s var(--ease-out);
}
.wa-float:hover{ transform:scale(1.07); background:var(--green-800) }
.wa-float svg{ width:30px; height:30px; fill:currentColor }
body.nav-open .wa-float{ display:none }

/* ─────────────────────── ANIMAÇÕES ─────────────────────────── */
[data-reveal]{
  opacity:0; transform:translateY(16px);
  transition:opacity .62s var(--ease-out), transform .62s var(--ease-out);
  transition-delay:var(--d,0ms);
}
[data-reveal].in{ opacity:1; transform:none }

/* Fade de entrada da página — transição percebida entre as 3 páginas */
@keyframes page-in{ from{ opacity:0 } to{ opacity:1 } }
body{ animation:page-in .2s var(--ease-out) both }

/* ───────────────────── BREAKPOINTS ─────────────────────────── */
@media (min-width:600px){
  .stats{ grid-template-columns:repeat(4,1fr) }
  .stats--light{ grid-template-columns:repeat(3,1fr) }
  .contact-grid{ grid-template-columns:repeat(2,1fr) }
  .pillars{ grid-template-columns:repeat(2,1fr); gap:var(--s5) }
  .foot-grid{ grid-template-columns:repeat(2,1fr); gap:var(--s6) var(--s5) }
}
@media (min-width:860px){
  .steps{ grid-template-columns:repeat(3,1fr); gap:var(--s6) }
  .crosslinks{ grid-template-columns:repeat(2,1fr) }
  .cat{ column-gap:var(--s6) }
}
/* Os 4 passos do portal: 2x2 no tablet, linha única no desktop.
   Vem depois de .steps de propósito — mesma especificidade, ganha por ordem. */
@media (min-width:600px){ .steps--4{ grid-template-columns:repeat(2,1fr) } }
@media (min-width:1024px){ .steps--4{ grid-template-columns:repeat(4,1fr); gap:var(--s5) } }
@media (min-width:901px){
  .split{ grid-template-columns:1fr 1fr }
  .split--narrow{ grid-template-columns:1.15fr .85fr }
  .contact-grid{ grid-template-columns:repeat(3,1fr) }
  .foot-grid{ grid-template-columns:1.6fr 1fr 1.2fr 1.2fr; gap:var(--s6) }
  .mobile-nav{ display:none }

  /* Ritmo interno do hero apertado no desktop: solto demais, o conteúdo
     passava de 880px e empurrava a próxima seção para fora da tela. */
  .hero:not(.hero--inner) .lead{ margin-top:var(--s4); max-width:60ch }
  .hero:not(.hero--inner) .btn-row{ margin-top:30px }
  .hero:not(.hero--inner) .hero-note{ margin-top:var(--s4) }
  .hero:not(.hero--inner) .stats{ margin-top:32px }
  .hero .stats > div{ padding:var(--s4) }
}

/* O hero ocupa a tela inteira MENOS uma sobra, que é onde a próxima seção
   aparece espiando. É essa borda cortada que diz "tem mais aqui embaixo"
   e puxa a rolagem sem precisar pedir.

   Só a partir de 780px de altura: num notebook de 768px a tela útil tem
   ~640px e forçar 100svh faria o conteúdo transbordar em vez de caber. */
@media (min-width:901px) and (min-height:780px){
  .hero:not(.hero--inner){
    display:flex; align-items:center;
    min-height:calc(100vh - var(--header-h) - 76px);
    min-height:calc(100svh - var(--header-h) - 76px);
    padding-block:clamp(28px,3vw,44px) clamp(60px,5.5vw,78px);
  }
}

/* Notebook de 768px de altura (a tela mais comum): a tela útil tem ~690px e
   o hero solto passava de 860px, jogando a próxima seção 180px abaixo da
   dobra. Aqui ele encolhe para caber em vez de transbordar. */
@media (min-width:901px) and (max-height:779px){
  /* 80px embaixo: a seta precisa de ~48px livres mais folga visual,
     senão fica encostada na ficha técnica */
  .hero:not(.hero--inner){ padding-block:26px 80px }
  .hero:not(.hero--inner) h1{ font-size:clamp(2rem, 1.1rem + 2.4vw, 3.05rem) }
  .hero:not(.hero--inner) .lead{ font-size:1rem; line-height:1.62; margin-top:var(--s3) }
  .hero:not(.hero--inner) .btn-row{ margin-top:24px }
  .hero:not(.hero--inner) .hero-note{ margin-top:var(--s3) }
  .hero:not(.hero--inner) .stats{ margin-top:24px }
  .hero:not(.hero--inner) .stat-n{ font-size:clamp(1.6rem,1.2rem + 1.2vw,2.1rem) }
  .hero-cue{ bottom:14px }
}
@media (max-width:900px){
  .nav-desk{ display:none }
  .header-cta{ display:none }
  .burger{ display:flex }
}

/* ────────────── MOVIMENTO REDUZIDO: desliga tudo ───────────── */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  [data-reveal]{ opacity:1; transform:none }
  .mq-track{ animation:none; transform:none }
  .mq{ overflow-x:auto; -webkit-mask-image:none; mask-image:none }
}