/* =====================================================================
   ESTACAS IN LOCO — Sistema visual corporativo
   Blocos sólidos de verde institucional · vermelho de sinal · cartões
   Tipografia: Poppins (títulos) + Inter (texto) + JetBrains Mono (rótulos)
   ===================================================================== */

/* ---------------------------------------------------------------
   1. TOKENS
   --------------------------------------------------------------- */
:root{
  /* Verde institucional (do logotipo) */
  --g-950:#05190F;
  --g-900:#082616;
  --g-850:#0A311D;
  --g-800:#0D4227;   /* bloco escuro principal */
  --g-700:#125533;
  --g-600:#186B40;
  --g-500:#2E8B4E;   /* verde do logotipo */
  --g-400:#4CA86A;
  --g-300:#7FC796;
  --g-200:#B4E2C3;
  --g-100:#DCF2E4;
  --g-50:#EFF8F2;

  /* Vermelho de sinal (a seta do "N") */
  --r-700:#96231A;
  --r-600:#B72A1F;
  --r-500:#D2372A;
  --r-400:#E85443;
  --r-100:#FCE8E5;

  /* Blocos escuros — verde quase preto, com profundidade.
     O verde saturado (--g-500/600) fica reservado para detalhes. */
  --dark-1:#0B2719;   /* topo do gradiente */
  --dark-2:#071A12;   /* meio */
  --dark-3:#04100B;   /* base, quase preta */
  --brilho:rgba(46,139,78,.20);

  --bg-escuro:
    radial-gradient(118% 82% at 84% -4%, var(--brilho), transparent 56%),
    linear-gradient(168deg, var(--dark-1) 0%, var(--dark-2) 52%, var(--dark-3) 100%);
  --bg-escuro-fundo:
    radial-gradient(90% 70% at 15% 0%, rgba(46,139,78,.14), transparent 60%),
    linear-gradient(180deg, var(--dark-2) 0%, var(--dark-3) 100%);

  /* Neutros */
  --ink:#0F1A14;
  --ink-2:#33413A;
  --muted:#647167;
  --faint:#95A29A;
  --line:#E1E8E3;
  --line-2:#EDF2EE;
  --paper:#FFFFFF;
  --paper-2:#F4F7F5;
  --paper-3:#E9EFEB;

  /* Papéis semânticos */
  --bg:var(--paper);
  --fg:var(--ink);
  --fg-2:var(--ink-2);
  --dim:var(--muted);
  --rule:var(--line);
  --card:var(--paper);
  --accent:var(--r-500);
  --ghost-hover:var(--paper-2);
  --ghost-hover-borda:var(--faint);

  /* Tipografia */
  --f-head:'Poppins',system-ui,-apple-system,'Segoe UI',sans-serif;
  --f-body:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --f-mono:'JetBrains Mono',ui-monospace,Consolas,monospace;

  --t-hero:clamp(2.25rem,4.3vw,3.9rem);
  --t-h1:clamp(2rem,3.8vw,3.3rem);
  --t-h2:clamp(1.75rem,3vw,2.7rem);
  --t-h3:clamp(1.2rem,1.7vw,1.55rem);
  --t-h4:1.05rem;
  --t-lead:clamp(1rem,1.15vw,1.12rem);
  --t-body:1rem;
  --t-sm:.9rem;
  --t-xs:.82rem;
  --t-micro:.6875rem;

  /* Ritmo */
  --sec-y:clamp(4.5rem,8vw,8rem);
  --gut:clamp(1.15rem,4vw,3.5rem);
  --maxw:1320px;

  /* Formas */
  --rad-sm:10px;
  --rad:16px;
  --rad-lg:22px;
  --rad-xl:30px;
  --pill:999px;

  --sh-1:0 2px 6px rgba(13,66,39,.05);
  --sh-2:0 14px 34px -16px rgba(13,66,39,.24);
  --sh-3:0 30px 70px -28px rgba(5,25,15,.45);

  --ease:cubic-bezier(.22,1,.36,1);
  --ease-io:cubic-bezier(.65,0,.35,1);

  --header-h:82px;
}

/* Blocos escuros — trocam apenas os papéis semânticos */
.on-dark,
.cta,
.card--green,
.aside-card--green{
  --bg:var(--bg-escuro);
  --fg:#FFFFFF;
  --fg-2:rgba(255,255,255,.88);
  --dim:rgba(255,255,255,.68);
  --rule:rgba(255,255,255,.13);
  --card:rgba(255,255,255,.055);
  --ghost-hover:rgba(255,255,255,.1);
  --ghost-hover-borda:rgba(255,255,255,.5);
  color:var(--fg);
}
/* fio fino onde o bloco escuro encosta no claro */
.on-dark{box-shadow:inset 0 1px 0 rgba(255,255,255,.07)}
.on-tint{--bg:var(--paper-2)}

/* ---------------------------------------------------------------
   2. RESET
   --------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
.lenis.lenis-smooth{scroll-behavior:auto!important}

body{
  background:var(--paper);
  color:var(--ink);
  font:400 var(--t-body)/1.7 var(--f-body);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  /* clip, e não hidden: hidden faria o navegador calcular overflow-y:auto
     aqui, transformando o body em contêiner de rolagem. Quem rola é a
     janela, então position:sticky e as animações ligadas à rolagem
     ficariam presas num contêiner que nunca se move. */
  overflow-x:clip;
}
body.is-locked{overflow:hidden}

img,svg,video,canvas,iframe{display:block;max-width:100%}
img{height:auto;object-fit:cover}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
ul,ol{list-style:none}
table{border-collapse:collapse;width:100%}

::selection{background:var(--r-500);color:#fff}
:focus-visible{outline:2px solid var(--r-500);outline-offset:3px;border-radius:4px}

::-webkit-scrollbar{width:12px}
::-webkit-scrollbar-track{background:var(--paper-2)}
::-webkit-scrollbar-thumb{background:var(--paper-3);border:3px solid var(--paper-2);border-radius:99px}
::-webkit-scrollbar-thumb:hover{background:var(--g-500)}

.skip-link{position:absolute;left:-9999px;top:0;z-index:999;background:var(--g-800);color:#fff;padding:14px 22px;border-radius:0 0 var(--rad-sm) 0;font:600 var(--t-sm) var(--f-body)}
.skip-link:focus{left:0}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------------------------------------------------------------
   3. TIPOGRAFIA
   --------------------------------------------------------------- */
h1,h2,h3,h4,h5{
  font-family:var(--f-head);
  font-weight:600;
  line-height:1.14;
  letter-spacing:-.022em;
  color:var(--fg);
  text-wrap:balance;
}
h1{font-size:var(--t-h1);line-height:1.08}
h2{font-size:var(--t-h2);line-height:1.1}
h3{font-size:var(--t-h3)}
h4{font-size:var(--t-h4);line-height:1.35}
.t-hero{font-size:var(--t-hero);line-height:1.07;font-weight:600;letter-spacing:-.028em}

/* Palavra destacada dentro do título */
.hl{color:var(--r-500)}
.on-dark .hl,.cta .hl,.card--green .hl{color:var(--r-400)}
.hl-g{color:var(--g-500)}

p{color:var(--dim)}
p + p{margin-top:1em}
strong{color:var(--fg);font-weight:600}

.lead{font-size:var(--t-lead);line-height:1.72;color:var(--fg-2);max-width:56ch}
.sm{font-size:var(--t-sm)}
.xs{font-size:var(--t-xs)}

/* Rótulo de seção — pílula com ponto vermelho */
.eyebrow{
  display:inline-flex;align-items:center;gap:.6em;
  padding:.5em 1.05em .5em .8em;
  border:1px solid var(--rule);border-radius:var(--pill);
  background:var(--card);
  font:600 var(--t-micro)/1 var(--f-mono);
  letter-spacing:.16em;text-transform:uppercase;color:var(--dim);
  margin-bottom:1.2rem;
}
.eyebrow::before{
  content:'';width:7px;height:7px;border-radius:50%;background:var(--r-500);flex:none;
}
.on-dark .eyebrow,.cta .eyebrow,.card--green .eyebrow,.aside-card--green .eyebrow{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.16);color:rgba(255,255,255,.82)}

.mono{font:500 var(--t-micro)/1.5 var(--f-mono);letter-spacing:.14em;text-transform:uppercase}

/* ---------------------------------------------------------------
   4. LAYOUT
   --------------------------------------------------------------- */
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut)}
.wrap--wide{max-width:1480px}
.wrap--text{max-width:920px}

.sec{position:relative;padding-block:var(--sec-y);background:var(--bg);color:var(--fg)}
.sec--tight{padding-block:clamp(3rem,5.5vw,5rem)}
.sec--top0{padding-top:0}
.sec--bot0{padding-bottom:0}

.g12{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(1.1rem,2.2vw,2rem)}
.c1-4{grid-column:1/5}  .c1-5{grid-column:1/6}  .c1-6{grid-column:1/7}
.c1-7{grid-column:1/8}  .c1-8{grid-column:1/9}  .c1-12{grid-column:1/-1}
.c5-12{grid-column:5/-1} .c6-12{grid-column:6/-1} .c7-12{grid-column:7/-1}
.c8-12{grid-column:8/-1} .c9-12{grid-column:9/-1}

.row{display:flex;flex-wrap:wrap;gap:.75rem;align-items:center}
.row--between{justify-content:space-between}
.row--end{align-items:flex-end}
.stack{display:grid;gap:clamp(1rem,1.8vw,1.5rem)}

/* Trama de pontos para blocos escuros */
.dots{
  position:absolute;inset:0;pointer-events:none;opacity:.42;
  background-image:radial-gradient(rgba(255,255,255,.13) 1px,transparent 1px);
  background-size:24px 24px;
  mask-image:radial-gradient(ellipse 70% 65% at 82% 2%,#000,transparent 72%);
  -webkit-mask-image:radial-gradient(ellipse 70% 65% at 82% 2%,#000,transparent 72%);
}
.dots--light{background-image:radial-gradient(rgba(13,66,39,.12) 1px,transparent 1px)}
.sec > .wrap{position:relative;z-index:2}

/* ---------------------------------------------------------------
   5. BOTÕES
   --------------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6em;
  padding:.95em 1.6em;border-radius:var(--pill);
  background:var(--r-500);color:#fff;border:1px solid var(--r-500);
  font:600 .925rem/1 var(--f-body);white-space:nowrap;
  box-shadow:0 10px 24px -12px rgba(210,55,42,.8);
  transition:background .25s var(--ease),border-color .25s,transform .25s var(--ease),box-shadow .25s,color .25s;
}
.btn svg{width:16px;height:16px;flex:none;transition:transform .3s var(--ease)}
.btn:hover{background:var(--r-600);border-color:var(--r-600);transform:translateY(-2px);box-shadow:0 14px 30px -12px rgba(210,55,42,.9)}
.btn:hover svg{transform:translateX(3px)}
.btn:active{transform:translateY(0)}

.btn--green{background:var(--g-600);border-color:var(--g-600);box-shadow:0 10px 24px -12px rgba(24,107,64,.75)}
.btn--green:hover{background:var(--g-700);border-color:var(--g-700)}

.btn--dark{background:var(--g-700);border-color:var(--g-700);box-shadow:0 10px 24px -14px rgba(7,26,18,.8)}
.btn--dark:hover{background:var(--g-600);border-color:var(--g-600)}

.btn--light{background:#fff;color:var(--g-800);border-color:#fff;box-shadow:0 10px 26px -14px rgba(0,0,0,.4)}
.btn--light:hover{background:var(--g-50);border-color:var(--g-50);color:var(--g-800)}

.btn--ghost{background:transparent;color:var(--fg);border-color:var(--rule);box-shadow:none}
.btn--ghost:hover{background:var(--ghost-hover);border-color:var(--ghost-hover-borda);transform:translateY(-2px);box-shadow:none}

.btn--wa{background:#25D366;border-color:#25D366;color:#04180C;box-shadow:0 10px 24px -12px rgba(37,211,102,.7)}
.btn--wa:hover{background:#1FBA59;border-color:#1FBA59}

.btn--sm{padding:.7em 1.15em;font-size:.85rem}
.btn--block{width:100%}

/* Link com seta */
.link{
  display:inline-flex;align-items:center;gap:.5em;
  font:600 .9rem/1 var(--f-body);color:var(--r-500);
  transition:gap .25s var(--ease),color .25s;
}
.link svg{width:15px;height:15px;transition:transform .3s var(--ease)}
.link:hover{gap:.8em}
.link:hover svg{transform:translateX(2px)}
.link--dark{color:var(--g-700)}
.on-dark .link,.cta .link,.card--green .link,.aside-card--green .link{color:var(--r-400)}
.on-dark .link--dark,.cta .link--dark{color:#fff}

/* Chip */
.chip{
  display:inline-flex;align-items:center;gap:.5em;
  padding:.5em 1em .5em .8em;border-radius:var(--pill);
  border:1px solid var(--rule);background:var(--card);
  font:500 .82rem/1 var(--f-body);color:var(--fg-2);
}
.chip::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--r-500);flex:none}
.chip--plain::before{display:none}
.chip b{font-weight:600;color:var(--fg)}
.on-dark .chip,.cta .chip,.card--green .chip{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.16)}

/* ---------------------------------------------------------------
   6. CARTÕES
   --------------------------------------------------------------- */
.card{
  background:var(--card);border:1px solid var(--rule);border-radius:var(--rad-lg);
  padding:clamp(1.4rem,2.3vw,2rem);
}
.card--pad-lg{padding:clamp(1.7rem,3vw,2.6rem)}
.card--white{background:#fff;box-shadow:var(--sh-2);border-color:transparent}
.card--tint{background:var(--paper-2);border-color:transparent}
.card--green{
  background:linear-gradient(158deg,var(--dark-1),var(--dark-3));
  color:#fff;border-color:transparent;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
}
.card--outline{background:transparent}

.card h4{margin-bottom:.5rem}

/* Painel translúcido dentro de bloco escuro */
.panel{
  background:rgba(255,255,255,.065);
  border:1px solid rgba(255,255,255,.12);
  border-radius:var(--rad-lg);
  padding:clamp(1.4rem,2.3vw,2rem);
  backdrop-filter:blur(6px);
}
.panel h5{
  font:600 var(--t-micro)/1 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;
  color:rgba(255,255,255,.6);margin-bottom:1rem;
}
.panel + .panel{margin-top:.85rem}

/* Lista com marcador vermelho */
.dot-list{display:grid;gap:.7rem}
.dot-list li{
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:.75rem;align-items:baseline;
  font-size:.94rem;line-height:1.6;color:var(--fg-2);
}
.dot-list li::before{
  content:'';width:7px;height:7px;border-radius:50%;background:var(--r-500);
  transform:translateY(-1px);
}
.dot-list li b{color:var(--fg);font-weight:600}

/* Lista em caixas (padrão de atuação) */
.box-list{display:grid;gap:.55rem}
.box-list li{
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:.8rem;align-items:baseline;
  padding:.8rem 1rem;border-radius:var(--rad-sm);
  background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.08);
  font-size:.9rem;line-height:1.55;color:rgba(255,255,255,.78);
}
.box-list li::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--r-500);transform:translateY(-1px)}
.box-list li b{color:#fff;font-weight:600}
.box-list--light li{background:var(--paper-2);border-color:var(--line-2);color:var(--muted)}
.box-list--light li b{color:var(--ink)}

/* Grade de números */
.stat-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.6rem}
.stat-grid > div{
  padding:1.05rem .9rem;border-radius:var(--rad-sm);
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);
}
.stat-grid b{
  display:block;font:600 clamp(1.35rem,2.1vw,1.8rem)/1 var(--f-head);
  letter-spacing:-.03em;color:#fff;margin-bottom:.35rem;
}
.stat-grid b i{font-style:normal;color:var(--r-400);font-size:.62em}
.stat-grid span{display:block;font:500 var(--t-micro)/1.4 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.55)}
.stat-grid--light > div{background:#fff;border-color:var(--line);box-shadow:var(--sh-1)}
.stat-grid--light b{color:var(--g-800)}
.stat-grid--light b i{color:var(--r-500)}
.stat-grid--light span{color:var(--muted)}

/* ---------------------------------------------------------------
   7. PRELOADER
   --------------------------------------------------------------- */
#preloader{
  position:fixed;inset:0;z-index:9999;background:var(--bg-escuro);
  display:grid;place-items:center;transition:opacity .6s var(--ease),visibility .6s;
}
#preloader.is-done{opacity:0;visibility:hidden}
.pl-inner{width:min(280px,62vw);text-align:center}
.pl-mark{width:62px;margin:0 auto 1.6rem}
.pl-mark path,.pl-mark ellipse{stroke-dasharray:1;stroke-dashoffset:1}
.pl-bar{height:2px;background:rgba(255,255,255,.16);border-radius:99px;position:relative;overflow:hidden}
.pl-bar i{position:absolute;inset:0 auto 0 0;width:0;background:var(--r-500);transition:width .28s linear}
.pl-num{display:block;margin-top:.85rem;font:600 var(--t-micro) var(--f-mono);letter-spacing:.22em;color:rgba(255,255,255,.6)}

/* ---------------------------------------------------------------
   8. CABEÇALHO
   --------------------------------------------------------------- */
.hdr{
  position:fixed;top:0;left:0;right:0;z-index:900;height:var(--header-h);
  display:flex;align-items:center;
  transition:background .4s var(--ease),height .35s var(--ease),box-shadow .4s,transform .45s var(--ease);
}
.hdr.is-stuck{
  height:68px;background:rgba(255,255,255,.96);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  box-shadow:0 1px 0 var(--line),0 10px 30px -22px rgba(13,66,39,.5);
}
.hdr.is-hidden{transform:translateY(-102%)}
.hdr .wrap{display:flex;align-items:center;justify-content:space-between;gap:1.6rem}

/* Sobre bloco escuro (topo da home) o cabeçalho é claro */
.hdr--over{--hd-fg:#fff}
.hdr--over:not(.is-stuck) .nav a{color:rgba(255,255,255,.78)}
.hdr--over:not(.is-stuck) .nav a:hover,
.hdr--over:not(.is-stuck) .nav a.is-on{color:#fff}
.hdr--over:not(.is-stuck) .brand-txt b{color:#fff}
.hdr--over:not(.is-stuck) .brand-txt span{color:rgba(255,255,255,.6)}
.hdr--over:not(.is-stuck) .hdr-phone{color:rgba(255,255,255,.8)}
.hdr--over:not(.is-stuck) .burger{border-color:rgba(255,255,255,.32)}
.hdr--over:not(.is-stuck) .burger i,
.hdr--over:not(.is-stuck) .burger i::before,
.hdr--over:not(.is-stuck) .burger i::after{background:#fff}
.hdr--over:not(.is-stuck) .brand .lg-ring{stroke:#fff}
.hdr--over:not(.is-stuck) .brand .lg-txt{fill:#fff}

.brand{display:flex;align-items:center;gap:.75rem;flex:none}
.brand svg,
.brand .lg-img{height:38px;width:auto;transition:height .35s var(--ease)}
.hdr.is-stuck .brand svg,
.hdr.is-stuck .brand .lg-img{height:33px}
.brand-txt{display:flex;flex-direction:column;gap:3px;line-height:1}
.brand-txt b{font:600 1.02rem/1 var(--f-head);letter-spacing:-.02em;color:var(--g-800);transition:color .3s}
.brand-txt span{font:500 8.5px/1 var(--f-mono);letter-spacing:.17em;text-transform:uppercase;color:var(--faint);transition:color .3s}

.nav{display:flex;align-items:center;gap:.1rem}
.nav a{
  position:relative;padding:.6rem .85rem;border-radius:var(--pill);
  font:500 .9rem/1 var(--f-body);color:var(--muted);transition:color .25s,background .25s;
}
.nav a:hover{color:var(--ink)}
.nav a.is-on{color:var(--g-700);font-weight:600}
.nav a.is-on::after{
  content:'';position:absolute;left:50%;bottom:.15rem;transform:translateX(-50%);
  width:5px;height:5px;border-radius:50%;background:var(--r-500);
}
.hdr--over:not(.is-stuck) .nav a.is-on::after{background:var(--r-400)}

.hdr-cta{display:flex;align-items:center;gap:.9rem;flex:none}
.hdr-phone{
  display:flex;align-items:center;gap:.45rem;
  font:600 .875rem/1 var(--f-body);color:var(--ink-2);transition:color .25s;
}
.hdr-phone svg{width:15px;height:15px;color:var(--r-500)}
.hdr-phone:hover{color:var(--r-500)}

.burger{
  display:none;width:44px;height:44px;border-radius:var(--rad-sm);
  align-items:center;justify-content:center;flex:none;
  border:1px solid var(--line);transition:border-color .25s;
}
.burger i{display:block;width:18px;height:2px;background:var(--ink);border-radius:2px;position:relative}
.burger i::before,.burger i::after{
  content:'';position:absolute;left:0;width:18px;height:2px;background:var(--ink);border-radius:2px;
  transition:transform .38s var(--ease),top .28s;
}
.burger i::before{top:-6px}
.burger i::after{top:6px}
.is-menu .burger i{background:transparent!important}
.is-menu .burger i::before{top:0;transform:rotate(45deg)}
.is-menu .burger i::after{top:0;transform:rotate(-45deg)}

/* Menu mobile */
.mobile-menu{
  position:fixed;inset:0;z-index:880;background:var(--bg-escuro);color:#fff;
  padding:calc(var(--header-h) + 1.5rem) var(--gut) 2rem;
  display:flex;flex-direction:column;justify-content:space-between;overflow-y:auto;
  clip-path:circle(0% at 92% 5%);transition:clip-path .7s var(--ease);
}
.is-menu .mobile-menu{clip-path:circle(150% at 92% 5%)}
.mm-nav{display:flex;flex-direction:column;gap:.15rem;margin-bottom:2rem}
.mm-nav a{
  display:flex;align-items:center;gap:1rem;padding:.75rem 0;
  border-bottom:1px solid rgba(255,255,255,.12);
  font:600 clamp(1.5rem,6.5vw,2.2rem)/1.2 var(--f-head);letter-spacing:-.025em;color:#fff;
  opacity:0;transform:translateY(18px);
}
.is-menu .mm-nav a{opacity:1;transform:none;transition:opacity .45s var(--ease),transform .55s var(--ease)}
.is-menu .mm-nav a:nth-child(1){transition-delay:.2s}
.is-menu .mm-nav a:nth-child(2){transition-delay:.26s}
.is-menu .mm-nav a:nth-child(3){transition-delay:.32s}
.is-menu .mm-nav a:nth-child(4){transition-delay:.38s}
.is-menu .mm-nav a:nth-child(5){transition-delay:.44s}
.mm-nav a span{font:600 .68rem var(--f-mono);letter-spacing:.14em;color:var(--r-400)}
.mm-foot{display:grid;gap:.9rem;font-size:.92rem;color:rgba(255,255,255,.75)}
.mm-foot a:hover{color:#fff}


/* Logo enviada pelo painel: duas versões, uma por tipo de fundo.
   Por padrão vale a clara; a escura entra sobre bloco escuro — o topo
   da página antes da rolagem e o rodapé. */
.lg-img{display:block;height:100%}
/* sem display aqui: '.lg-img img' tem especificidade maior que as
   classes abaixo e sobrescreveria a alternância das duas versões */
.lg-img img{height:100%;width:auto}
.lg-img__claro{display:block}
.lg-img__escuro{display:none}
.hdr--over:not(.is-stuck) .lg-img__claro,
.ftr .lg-img__claro,
.mobile-menu .lg-img__claro{display:none}
.hdr--over:not(.is-stuck) .lg-img__escuro,
.ftr .lg-img__escuro,
.mobile-menu .lg-img__escuro{display:block}

/* ---------------------------------------------------------------
   9. HERO
   --------------------------------------------------------------- */
.hero{
  position:relative;overflow:hidden;
  background:
    radial-gradient(112% 85% at 86% -6%,rgba(46,139,78,.26),transparent 56%),
    radial-gradient(70% 60% at 4% 96%,rgba(18,85,51,.22),transparent 62%),
    linear-gradient(168deg,var(--dark-1) 0%,var(--dark-2) 50%,var(--dark-3) 100%);
  color:#fff;
  padding-top:calc(var(--header-h) + clamp(2.5rem,5vw,4.5rem));
  /* folga normal: os 7-10rem de antes serviam para o cartão de números
     se sobrepor, e ele não existe mais */
  padding-bottom:clamp(3.5rem,7vw,6rem);
}
.hero__grid{
  position:relative;z-index:2;
  display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);
  gap:clamp(2rem,4.5vw,4rem);align-items:center;
}
.hero h1{color:#fff;max-width:16ch}
.hero h1 .ln{display:block;overflow:hidden}
.hero h1 .ln > span{display:block}
.hero__lead{color:rgba(255,255,255,.78);font-size:var(--t-lead);line-height:1.72;max-width:50ch;margin-top:1.4rem}
.hero__chips{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.8rem}
.hero__cta{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:2rem}

.hero__media{position:relative}
.hero__shot{
  border-radius:var(--rad-xl);overflow:hidden;
  box-shadow:var(--sh-3);border:1px solid rgba(255,255,255,.14);
}
.hero__shot img{width:100%;aspect-ratio:4/4.4;object-position:center 55%}


/* ---------------------------------------------------------------
   10. LETREIRO DE CLIENTES
   --------------------------------------------------------------- */
.marquee{position:relative;overflow:hidden;padding-block:clamp(1.6rem,2.6vw,2.2rem);background:var(--paper-2)}
.marquee__label{text-align:center;margin-bottom:1.1rem;font:600 var(--t-micro) var(--f-mono);letter-spacing:.2em;text-transform:uppercase;color:var(--faint)}
.marquee__track{display:flex;width:max-content;animation:slide 55s linear infinite}
.marquee:hover .marquee__track{animation-play-state:paused}
.marquee__track > div{display:flex;align-items:center}
.marquee__track span{
  padding-inline:clamp(1.3rem,2.6vw,2.4rem);
  font:600 clamp(1rem,1.5vw,1.3rem)/1 var(--f-head);letter-spacing:-.02em;
  color:var(--faint);white-space:nowrap;transition:color .3s;
}
.marquee__track span:hover{color:var(--g-600)}
@keyframes slide{to{transform:translateX(-50%)}}
.marquee::before,.marquee::after{content:'';position:absolute;top:0;bottom:0;width:clamp(45px,9vw,130px);z-index:2;pointer-events:none}
.marquee::before{left:0;background:linear-gradient(90deg,var(--paper-2),transparent)}
.marquee::after{right:0;background:linear-gradient(270deg,var(--paper-2),transparent)}

/* ---------------------------------------------------------------
   11. CABEÇA DE SEÇÃO
   --------------------------------------------------------------- */
.sec-head{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(1.2rem,3vw,3rem);align-items:end;margin-bottom:clamp(2.2rem,4vw,3.4rem)}
.sec-head--center{grid-template-columns:1fr;text-align:center;justify-items:center}
.sec-head--center .lead{margin-inline:auto}
.sec-head p.lead{font-size:1.02rem}

/* ---------------------------------------------------------------
   12. SERVIÇOS
   --------------------------------------------------------------- */
.svc-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1rem,1.6vw,1.4rem)}
.svc{
  display:flex;flex-direction:column;overflow:hidden;
  background:#fff;border:1px solid var(--line);border-radius:var(--rad-lg);
  transition:transform .4s var(--ease),box-shadow .4s var(--ease),border-color .3s;
}
.svc:hover{transform:translateY(-5px);box-shadow:var(--sh-2);border-color:transparent}
.svc__img{position:relative;overflow:hidden;background:var(--paper-3)}
.svc__img img{width:100%;aspect-ratio:16/10;transition:transform .8s var(--ease)}
.svc:hover .svc__img img{transform:scale(1.05)}
.svc__no{
  position:absolute;top:.9rem;left:.9rem;z-index:2;
  width:34px;height:34px;border-radius:50%;background:var(--r-500);color:#fff;
  display:grid;place-items:center;font:600 .78rem/1 var(--f-mono);
  box-shadow:0 6px 16px -6px rgba(210,55,42,.9);
}
.svc__body{padding:clamp(1.3rem,2vw,1.7rem);display:flex;flex-direction:column;flex:1}
.svc__kicker{font:600 var(--t-micro) var(--f-mono);letter-spacing:.13em;text-transform:uppercase;color:var(--g-600);display:block;margin-bottom:.55rem}
.svc h3{margin-bottom:.6rem;font-size:1.24rem}
.svc > .svc__body > p{font-size:.93rem;margin-bottom:1.1rem}
.svc__list{display:grid;gap:.5rem;padding-top:1.1rem;margin-bottom:1.3rem;border-top:1px solid var(--line-2)}
.svc__list li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.6rem;align-items:baseline;font-size:.86rem;line-height:1.5;color:var(--muted)}
.svc__list li::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--r-500);transform:translateY(-1px)}
.svc__foot{margin-top:auto}

/* Ícone circular */
.ico-circle{
  width:48px;height:48px;border-radius:50%;display:grid;place-items:center;flex:none;
  background:var(--g-50);border:1px solid var(--g-100);
}
.ico-circle svg{width:22px;height:22px;color:var(--g-600)}
.ico-circle--red{background:var(--r-100);border-color:#F6D5D0}
.ico-circle--red svg{color:var(--r-500)}
.on-dark .ico-circle{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.14)}
.on-dark .ico-circle svg{color:var(--g-300)}

/* ---------------------------------------------------------------
   13. SOBRE — bloco escuro com painel
   --------------------------------------------------------------- */
.about{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(1.6rem,3.5vw,3.2rem);align-items:start}
.about h2{color:#fff;max-width:18ch}
.about__note{
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:.85rem;align-items:baseline;
  padding:1rem 1.2rem;border-radius:var(--rad-sm);
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.11);
  font-size:.92rem;line-height:1.6;color:rgba(255,255,255,.78);margin-top:1.5rem;
}
.about__note::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--r-500);transform:translateY(-1px)}
.about__note b{color:#fff;font-weight:600}
.about__media{border-radius:var(--rad-lg);overflow:hidden;margin-top:1.7rem;border:1px solid rgba(255,255,255,.14)}
.about__media img{width:100%;aspect-ratio:16/10}

.founders{display:grid;gap:.85rem;margin-top:1.5rem}
.founder{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.85rem;align-items:center}
.founder i{
  width:36px;height:36px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);
  font:600 .72rem/1 var(--f-mono);color:var(--g-300);font-style:normal;
}
.founder b{display:block;font-size:.95rem;font-weight:600;color:#fff}
.founder span{font-size:.85rem;color:rgba(255,255,255,.6)}

/* ---------------------------------------------------------------
   14. DIFERENCIAIS
   --------------------------------------------------------------- */
/* ---------------------------------------------------------------
   13b. O QUE ESTÁ EM JOGO
   Bloco de consequência. Fica em papel branco com sinal vermelho:
   precisa de peso sem virar mais um bloco escuro numa página que
   já tem quatro. --------------------------------------------- */
.risk__grid{
  display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);
  gap:clamp(1.8rem,4vw,3.4rem);align-items:start;
}
.risk__grid h2{max-width:14ch}

.risk__list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--line)}
.risk__list li{
  position:relative;background:var(--paper);
  padding:clamp(1.2rem,2vw,1.6rem) clamp(1.1rem,1.8vw,1.4rem);
}
.risk__list li::before{
  content:'';position:absolute;left:0;top:clamp(1.2rem,2vw,1.6rem);
  width:3px;height:22px;border-radius:0 2px 2px 0;background:var(--r-500);
}
.risk__list h4{margin-bottom:.4rem;padding-left:.75rem}
.risk__list p{font-size:.89rem;padding-left:.75rem}

/* Fechamento do bloco: afirmação, não aviso.
   A caixa rosa com ícone de alerta era visualmente idêntica ao
   .alert--err do formulário — a frase mais importante da seção lia
   como erro de sistema. Agora o peso vem da tipografia e o vermelho
   fica no fio lateral, o mesmo marcador dos quatro itens acima. */
.risk__note{
  margin-top:clamp(2rem,4vw,3.2rem);
  padding:clamp(.5rem,1vw,.7rem) 0 clamp(.5rem,1vw,.7rem) clamp(1.1rem,2vw,1.6rem);
  border-left:3px solid var(--r-500);
  font:600 clamp(1.12rem,2vw,1.52rem)/1.4 var(--f-head);
  letter-spacing:-.022em;color:var(--ink);max-width:52ch;text-wrap:balance;
}

/* O caminho alternativo é uma frase longa. Como item flex, a seta ficava
   pendurada no fim da caixa quando o texto quebrava em duas linhas —
   longe da última palavra. Em fluxo de texto ela acompanha a frase. */
.risk .link{display:inline;gap:0}
.risk .link svg{display:inline-block;vertical-align:-.18em;margin-left:.45em}
.risk .link:hover svg{transform:translateX(3px)}

@media (max-width:980px){
  .risk__grid{grid-template-columns:1fr}
}
@media (max-width:560px){
  .risk__list{grid-template-columns:1fr}
}

/* Um painel só, dividido por fios — e não seis cartões flutuando.
   Os papéis semânticos (--card, --rule) fazem o bloco funcionar tanto
   sobre fundo claro quanto dentro de uma seção escura, sem estilo solto
   no template. */
.diffs{
  --diff-hover:rgba(13,66,39,.04);
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  background:var(--card);border:1px solid var(--rule);
  border-radius:var(--rad-lg);overflow:hidden;
}
.on-dark .diffs{--diff-hover:rgba(255,255,255,.05)}

/* Poucos itens não merecem três colunas estreitas. */
.diffs[data-n="1"]{grid-template-columns:1fr}
.diffs[data-n="2"]{grid-template-columns:repeat(2,minmax(0,1fr))}

.diff{
  position:relative;padding:clamp(1.5rem,2.4vw,2.15rem);
  border-left:1px solid var(--rule);border-top:1px solid var(--rule);
  transition:background .3s var(--ease);
}
.diff:hover{background:var(--diff-hover)}

/* fio de sinal que corre no topo da célula ao passar o mouse */
.diff::before{
  content:'';position:absolute;left:0;right:0;top:0;height:2px;
  background:var(--r-500);transform:scaleX(0);transform-origin:left center;
  transition:transform .45s var(--ease);
}
.diff:hover::before{transform:scaleX(1)}

.diff__no{
  position:absolute;top:clamp(1.5rem,2.4vw,2.15rem);right:clamp(1.3rem,2.2vw,1.9rem);
  font:600 var(--t-micro)/1 var(--f-mono);letter-spacing:.14em;
  color:var(--faint);transition:color .3s;
}
.on-dark .diff__no{color:rgba(255,255,255,.34)}
.diff:hover .diff__no{color:var(--r-500)}

/* Ícone em bloco cheio: some o círculo lavado que não se lia */
.diff__ico{
  display:grid;place-items:center;width:46px;height:46px;border-radius:13px;
  background:var(--g-800);color:#fff;margin-bottom:1.15rem;
  transition:background .3s var(--ease),transform .3s var(--ease);
}
.diff__ico svg{display:block;width:21px;height:21px}
.on-dark .diff__ico{background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.14);color:var(--g-300)}
.diff:hover .diff__ico{background:var(--r-500);color:#fff;transform:translateY(-3px)}
.on-dark .diff:hover .diff__ico{border-color:var(--r-500)}

.diff h4{margin-bottom:.45rem;padding-right:2.4rem}
.diff p{font-size:.91rem}

/* Cartão sem descrição vira uma linha só: ícone e título lado a lado,
   em vez de um título curto sozinho no alto de um cartão alto. */
.diffs--seco .diff{
  display:flex;align-items:center;gap:1rem;
  padding:clamp(1.05rem,1.7vw,1.4rem) clamp(1.3rem,2.2vw,1.8rem);
}
.diffs--seco .diff__ico{
  flex:0 0 auto;width:42px;height:42px;border-radius:12px;margin-bottom:0;
}
.diffs--seco .diff h4{margin-bottom:0;padding-right:2rem}
.diffs--seco .diff__no{top:50%;transform:translateY(-50%)}

/* As divisórias mudam com o número de colunas: cada faixa zera a borda
   de quem passa a abrir linha ou coluna. E o último item estica o quanto
   faltar para a linha fechar, para não sobrar célula vazia no canto. */
@media (min-width:900px){
  .diff:nth-child(3n+1){border-left:0}
  .diff:nth-child(-n+3){border-top:0}
  .diffs[data-n="4"] .diff:last-child,
  .diffs[data-n="7"] .diff:last-child{grid-column:span 3}
  .diffs[data-n="5"] .diff:last-child,
  .diffs[data-n="8"] .diff:last-child{grid-column:span 2}
}
@media (min-width:560px) and (max-width:899px){
  .diffs[data-n]{grid-template-columns:repeat(2,minmax(0,1fr))}
  .diffs[data-n="1"]{grid-template-columns:1fr}
  .diff:nth-child(2n+1){border-left:0}
  .diff:nth-child(-n+2){border-top:0}
  .diffs[data-n="3"] .diff:last-child,
  .diffs[data-n="5"] .diff:last-child,
  .diffs[data-n="7"] .diff:last-child{grid-column:span 2}
}
@media (max-width:559px){
  .diffs[data-n]{grid-template-columns:1fr}
  .diff{border-left:0}
  .diff:first-child{border-top:0}
  .diff:last-child{grid-column:auto}
}

/* Linhas alternadas da lista de serviços.
   A inversão troca a coluna de verdade, e não a ordem: os dois blocos
   têm grid-column explícito, e nesse caso o `order` só muda a ordem em
   que a grade os coloca — o segundo não cabe mais à esquerda do cursor
   e desce para a linha seguinte, abrindo um vão. Só vale acima de
   1024px; abaixo disso as colunas viram uma só e empilham. */
@media (min-width:1025px){
  /* A linha precisa ser fixada junto: só trocar a coluna não basta,
     porque a grade continua colocando cada bloco numa linha nova assim
     que a coluna pedida fica atrás do cursor de colocação. */
  .svc-row > .c1-6,
  .svc-row > .c7-12{grid-row:1}
  .svc-row--flip > .c1-6{grid-column:7/-1}
  .svc-row--flip > .c7-12{grid-column:1/7}
}

/* ---------------------------------------------------------------
   15. OBRAS
   --------------------------------------------------------------- */
.works{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1rem,1.6vw,1.4rem)}
.work{
  position:relative;display:block;overflow:hidden;border-radius:var(--rad-lg);
  background:var(--paper-3);box-shadow:var(--sh-1);
  transition:transform .4s var(--ease),box-shadow .4s;
}
.work:hover{transform:translateY(-5px);box-shadow:var(--sh-2)}
.work__img{position:relative;overflow:hidden}
.work__img img{width:100%;aspect-ratio:4/3;transition:transform .9s var(--ease)}
.work:hover .work__img img{transform:scale(1.06)}
.work__img::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(to top,rgba(5,25,15,.9) 0%,rgba(5,25,15,.25) 42%,transparent 68%);
}
.work__tag{
  position:absolute;top:.85rem;left:.85rem;z-index:3;
  padding:.4em .8em;border-radius:var(--pill);
  background:rgba(255,255,255,.92);color:var(--g-800);
  font:600 var(--t-micro)/1 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;
}
.work__year{
  position:absolute;top:.85rem;right:.85rem;z-index:3;
  padding:.4em .75em;border-radius:var(--pill);
  background:rgba(5,25,15,.6);backdrop-filter:blur(6px);color:#fff;
  font:600 var(--t-micro)/1 var(--f-mono);letter-spacing:.08em;
}
.work__body{position:absolute;left:0;right:0;bottom:0;z-index:3;padding:1.1rem 1.2rem}
.work__body h4{color:#fff;font-size:1.02rem;margin-bottom:.25rem}
.work__body span{display:block;font:500 var(--t-micro)/1.5 var(--f-mono);letter-spacing:.08em;color:rgba(255,255,255,.68)}
.work.is-hidden{display:none}

/* Obra sem foto */
.work--data{background:#fff;border:1px dashed var(--line)}
.work--data .work__box{padding:1.4rem 1.5rem;display:flex;flex-direction:column;gap:.5rem;min-height:200px}
.work--data .grow{flex:1}
.work--data h4{color:var(--ink);font-size:1rem}
.work--data .meta{display:flex;flex-wrap:wrap;gap:.35rem .9rem;font:500 var(--t-micro) var(--f-mono);letter-spacing:.08em;color:var(--faint)}

/* Filtros */
.filters{display:flex;flex-wrap:wrap;gap:.45rem;margin-bottom:clamp(1.6rem,3vw,2.4rem)}
.filters button{
  padding:.6em 1.1em;border-radius:var(--pill);border:1px solid var(--line);
  font:500 .85rem/1 var(--f-body);color:var(--muted);background:#fff;
  transition:all .25s var(--ease);
}
.filters button:hover{border-color:var(--faint);color:var(--ink)}
.filters button.is-on{background:var(--g-800);border-color:var(--g-800);color:#fff}
.filters sup{font-size:.72em;margin-left:.3em;opacity:.7}

/* Tabela */
.tbl{background:#fff;border:1px solid var(--line);border-radius:var(--rad-lg);overflow:hidden}
.tbl__scroll{overflow-x:auto}
.tbl table{min-width:660px;font-size:.9rem}
.tbl th{
  text-align:left;padding:.95rem 1.1rem;background:var(--paper-2);border-bottom:1px solid var(--line);
  font:600 var(--t-micro) var(--f-mono);letter-spacing:.13em;text-transform:uppercase;color:var(--muted);white-space:nowrap;
}
.tbl td{padding:.9rem 1.1rem;border-bottom:1px solid var(--line-2);color:var(--muted)}
.tbl tr:last-child td{border-bottom:0}
.tbl tbody tr:hover td{background:var(--paper-2);color:var(--ink)}
.tbl td:first-child{color:var(--ink);font-weight:500}
.tbl td.y{font-family:var(--f-mono);font-size:.8rem;white-space:nowrap}

/* ---------------------------------------------------------------
   15b. OBRA EM DESTAQUE
   Mosaico de fotos do canteiro: a primeira ocupa a coluna inteira,
   as demais se dividem. As fotos são retrato (780x1040), por isso o
   recorte é feito por aspect-ratio e não pelo tamanho do arquivo.
   --------------------------------------------------------------- */
.caso__grid{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  gap:clamp(1.8rem,4vw,3.4rem);align-items:center;
}
.caso__grid h2{color:#fff;max-width:14ch}

.caso__ficha{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;
  margin-top:1.8rem;background:rgba(255,255,255,.13);
  border:1px solid rgba(255,255,255,.13);border-radius:var(--rad);overflow:hidden;
}
.caso__ficha > div{background:var(--g-950);padding:.95rem 1.1rem}
.caso__ficha dt{
  font:600 var(--t-micro)/1 var(--f-mono);letter-spacing:.13em;text-transform:uppercase;
  color:var(--r-400);margin-bottom:.4rem;
}
.caso__ficha dd{font-size:.92rem;line-height:1.5;color:#fff}

/* Trilho rolável com encaixe. A barra de rolagem some, mas a rolagem
   continua: no celular é o gesto natural, no desktop ficam as setas. */
.caso__track{
  display:flex;gap:clamp(.5rem,1vw,.75rem);
  overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;scroll-behavior:smooth;
  scrollbar-width:none;-ms-overflow-style:none;
  padding-bottom:2px;
}
.caso__track::-webkit-scrollbar{display:none}
@media (prefers-reduced-motion:reduce){
  .caso__track{scroll-behavior:auto}
}

.caso__foto{
  position:relative;flex:0 0 clamp(190px,44%,268px);scroll-snap-align:start;
  display:block;padding:0;overflow:hidden;cursor:zoom-in;
  border-radius:var(--rad);border:1px solid rgba(255,255,255,.13);
  background:rgba(255,255,255,.04);
}
.caso__foto img{width:100%;aspect-ratio:3/4;transition:transform .7s var(--ease)}
.caso__foto:hover img{transform:scale(1.05)}

/* legenda sobre a foto, para o carrossel não precisar de linha extra */
.caso__cap{
  position:absolute;left:0;right:0;bottom:0;padding:1.6rem .85rem .8rem;
  background:linear-gradient(0deg,rgba(4,16,11,.92),transparent);
  font:500 .76rem/1.4 var(--f-body);color:rgba(255,255,255,.9);text-align:left;
}

.caso__nav{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  margin-top:.9rem;
}
.caso__conta{font:600 var(--t-micro)/1 var(--f-mono);letter-spacing:.14em;color:rgba(255,255,255,.6)}
.caso__setas{display:flex;gap:.4rem}
.caso__setas button{
  width:38px;height:38px;border-radius:50%;display:grid;place-items:center;
  border:1px solid rgba(255,255,255,.2);color:#fff;transition:all .25s var(--ease);
}
.caso__setas button svg{width:17px;height:17px}
/* o ícone chev já aponta para a direita: só o anterior precisa girar */
.caso__setas button:first-child svg{transform:rotate(180deg)}
.caso__setas button:hover:not(:disabled){background:var(--r-500);border-color:var(--r-500)}
.caso__setas button:disabled{opacity:.3;cursor:default}

@media (max-width:980px){
  .caso__grid{grid-template-columns:1fr}
}
@media (max-width:480px){
  .caso__ficha{grid-template-columns:1fr}
}

/* ---------------------------------------------------------------
   16. PROCESSO
   --------------------------------------------------------------- */
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(.9rem,1.5vw,1.2rem)}
.step{
  position:relative;padding:clamp(1.4rem,2.2vw,1.9rem);
  border-radius:var(--rad-lg);background:var(--card);border:1px solid var(--rule);
  transition:transform .35s var(--ease),background .35s,border-color .35s;
}
.step.is-on{border-color:rgba(255,255,255,.28)}
.on-dark .step.is-on{background:rgba(255,255,255,.09)}
.step__no{
  width:38px;height:38px;border-radius:50%;display:grid;place-items:center;margin-bottom:1rem;
  background:var(--r-500);color:#fff;font:600 .78rem/1 var(--f-mono);
}
.step h4{margin-bottom:.4rem}
.step p{font-size:.9rem}

/* Prancha técnica */
.plate{background:#fff;border:1px solid var(--line);border-radius:var(--rad-lg);padding:clamp(1.2rem,2.2vw,2rem)}
.plate svg{width:100%;height:auto}
.plate__cap{
  display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  margin-top:1rem;padding-top:.85rem;border-top:1px solid var(--line-2);
  font:600 var(--t-micro) var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--faint);
}
.plate__cap b{color:var(--ink);font-weight:600}

/* ---------------------------------------------------------------
   16b. LINHA DO TEMPO
   Um eixo vertical com marcos. No celular o eixo fica à esquerda;
   a partir de 900px ele vai ao centro e os cartões se alternam.
   A posição do eixo é uma variável só, então marcador e linha
   nunca saem do lugar um do outro.
   --------------------------------------------------------------- */
.tl{--tl-x:15px;position:relative}

/* Trilho e linha que se preenche.
   Sem overflow:hidden aqui de propósito: isso faria do trilho um contêiner
   de rolagem, e o view() abaixo passaria a medir um elemento que nunca rola,
   deixando a linha travada em zero. O arredondamento vai no próprio
   preenchimento, que é o que aparece. */
.tl__spine{
  position:absolute;left:var(--tl-x);top:.4rem;bottom:.4rem;width:2px;
  transform:translateX(-50%);background:var(--line);border-radius:2px;
}
.tl__spine i{
  display:block;width:100%;height:100%;transform-origin:top center;border-radius:2px;
  background:linear-gradient(180deg,var(--g-400),var(--g-600) 55%,var(--r-500));
}

.tl__list{display:grid;gap:clamp(1rem,2.2vw,1.6rem)}
.tl__item{position:relative;padding-left:calc(var(--tl-x) + 30px)}

.tl__dot{
  position:absolute;left:var(--tl-x);top:1.65rem;z-index:2;
  width:15px;height:15px;border-radius:50%;
  background:var(--paper);border:2px solid var(--g-500);
  box-shadow:0 0 0 4px var(--bg,var(--paper-2));
  transform:translate(-50%,-50%);
}
.tl__dot::after{
  content:'';position:absolute;inset:3px;border-radius:50%;background:var(--r-500);
  transform:scale(0);transition:transform .45s var(--ease) .18s;
}
.tl__item.is-in .tl__dot::after{transform:scale(1)}

.tl__card{
  position:relative;background:#fff;border:1px solid var(--line);
  border-radius:var(--rad-lg);padding:clamp(1.15rem,2vw,1.6rem);
  box-shadow:var(--sh-1);transition:box-shadow .35s var(--ease);
}
.tl__card:hover{box-shadow:var(--sh-2)}
/* bico do balão, apontando para o eixo */
.tl__card::before{
  content:'';position:absolute;top:1.35rem;left:-6px;width:10px;height:10px;background:#fff;
  border-left:1px solid var(--line);border-bottom:1px solid var(--line);transform:rotate(45deg);
}
.tl__year{
  display:inline-flex;align-items:center;padding:.45em 1.05em;border-radius:var(--pill);
  background:var(--g-600);color:#fff;margin-bottom:.7rem;
  font:600 var(--t-micro)/1 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;
}
.tl__card h4{margin-bottom:.4rem}
.tl__card p{font-size:.92rem}

/* Entrada dos marcos — só quando o JS está no ar */
.js .tl__card{opacity:0;transform:translateX(-16px)}
.js .tl__dot{opacity:0;transform:translate(-50%,-50%) scale(.4)}
.js .tl__item.is-in .tl__card{
  opacity:1;transform:none;
  transition:opacity .7s var(--ease),transform .8s var(--ease);
}
.js .tl__item.is-in .tl__dot{
  opacity:1;transform:translate(-50%,-50%) scale(1);
  transition:opacity .4s var(--ease),transform .5s var(--ease);
}

/* Preenchimento do eixo pela rolagem, sem JS.
   Onde não houver suporte, a linha simplesmente já fica cheia. */
/* O preenchimento é comandado pelo JS (ver site.js), que escreve scaleY
   conforme a rolagem. Sem JS, ou com movimento reduzido, a linha já
   nasce cheia — nunca fica um trilho vazio na tela. */
.js .tl__spine i{transform:scaleY(0);will-change:transform}
@media (prefers-reduced-motion:reduce){
  .js .tl__spine i{transform:scaleY(1)}
}

/* Dois lados a partir de 900px */
@media (min-width:900px){
  .tl{--tl-x:50%}
  .tl__list{gap:clamp(1.2rem,2.5vw,2rem)}
  .tl__item{
    padding-left:0;display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    column-gap:clamp(2.6rem,5.5vw,4.5rem);align-items:start;
  }
  .tl__item:nth-child(odd) .tl__card{grid-column:1;text-align:right}
  .tl__item:nth-child(even) .tl__card{grid-column:2}
  /* o bico troca de lado junto com o cartão */
  .tl__item:nth-child(odd) .tl__card::before{left:auto;right:-6px;transform:rotate(-135deg)}
  .js .tl__item:nth-child(odd) .tl__card{transform:translateX(16px)}
  .js .tl__item.is-in .tl__card{transform:none}
}

/* ---------------------------------------------------------------
   17. ATUAÇÃO
   --------------------------------------------------------------- */
.coverage{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(1.6rem,3.5vw,3.2rem);align-items:center}
/* O SVG e os alfinetes usam a mesma caixa de posicionamento (a caixa de
   preenchimento do .map), por isso o mapa não leva padding: qualquer
   folga aqui deslocaria um sem deslocar o outro. O respiro já vem da
   margem interna embutida no viewBox. */
.map{
  position:relative;border-radius:var(--rad-lg);overflow:hidden;aspect-ratio:1;
  background:
    radial-gradient(75% 60% at 62% 22%,rgba(46,139,78,.16),transparent 62%),
    linear-gradient(160deg,rgba(255,255,255,.05),rgba(0,0,0,.20));
  border:1px solid rgba(255,255,255,.11);
}
.map svg{position:absolute;inset:0;width:100%;height:100%}

/* Estados: fora da área de atuação o país afunda no fundo, dentro dela
   acende. A sede é o tom mais claro, para o olho cair nela primeiro. */
.uf{fill:rgba(2,10,6,.42);stroke:rgba(255,255,255,.07);stroke-width:.15}
.uf--on{fill:rgba(46,139,78,.30);stroke:rgba(127,199,150,.30)}
.uf--pa{fill:rgba(76,168,106,.55);stroke:rgba(180,226,195,.75);stroke-width:.34}

.map__pin{position:absolute;transform:translate(-50%,-50%);z-index:3}
.map__pin b{
  display:block;width:7px;height:7px;border-radius:50%;position:relative;
  background:var(--g-200);box-shadow:0 0 0 2px rgba(4,16,11,.55);
  transition:transform .25s var(--ease),background .25s;
}
.map__pin.is-hq{z-index:4}
.map__pin.is-hq b{width:11px;height:11px;background:var(--r-500);box-shadow:0 0 0 3px rgba(4,16,11,.6)}
.map__pin.is-hq b::after{
  content:'';position:absolute;inset:-4px;border-radius:50%;
  border:1px solid var(--r-500);animation:ping 3s var(--ease-io) infinite;
}
/* realce ao passar o mouse no alfinete ou no item da lista ao lado */
.map__pin:hover b,.map__pin.is-on b{transform:scale(1.5);background:#fff}

/* Rótulo: sai à esquerda para não cair em cima do aglomerado de
   cidades que fica a leste de Belém. */
.map__pin span{
  position:absolute;right:calc(100% + 9px);top:50%;transform:translateY(-50%);
  white-space:nowrap;padding:.32em .6em;border-radius:var(--pill);
  background:rgba(4,16,11,.82);border:1px solid rgba(255,255,255,.14);
  font:600 var(--t-micro)/1 var(--f-mono);letter-spacing:.09em;text-transform:uppercase;
  color:#fff;opacity:0;transition:opacity .25s;pointer-events:none;
}
.map__pin:hover span,.map__pin.is-on span,.map__pin.is-hq span{opacity:1}
.map__pin.is-hq span{border-color:rgba(232,84,67,.5)}

.map__leg{
  position:absolute;left:0;right:0;bottom:0;z-index:3;
  display:flex;flex-wrap:wrap;gap:.35rem 1.1rem;align-items:center;
  padding:.7rem clamp(.9rem,2vw,1.2rem);
  background:linear-gradient(0deg,rgba(4,16,11,.72),transparent);
  font:600 var(--t-micro)/1 var(--f-mono);letter-spacing:.11em;text-transform:uppercase;
  color:rgba(255,255,255,.62);
}
.map__leg i{display:inline-block;width:9px;height:9px;border-radius:2px;margin-right:.45rem;vertical-align:-1px}
.map__leg-on{background:rgba(46,139,78,.55);border:1px solid rgba(127,199,150,.5)}
.map__leg-hq{background:var(--r-500);border-radius:50%!important}
@keyframes ping{0%{transform:scale(1);opacity:.85}70%,100%{transform:scale(3);opacity:0}}

.city-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.45rem;margin-top:1.6rem}
.city-grid li{
  display:flex;justify-content:space-between;gap:.75rem;align-items:center;
  padding:.65rem .9rem;border-radius:var(--rad-sm);
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);
  font-size:.87rem;color:rgba(255,255,255,.8);
}
.city-grid li b{font-weight:600;color:#fff}
.city-grid li span{font:500 var(--t-micro) var(--f-mono);letter-spacing:.1em;color:rgba(255,255,255,.5)}
.city-grid li.is-hq{border-color:rgba(232,84,67,.42);background:rgba(255,255,255,.06);box-shadow:inset 3px 0 0 var(--r-500)}
.city-grid li.is-hq span{color:var(--r-400)}

/* ---------------------------------------------------------------
   18. FAQ
   --------------------------------------------------------------- */
.faq{display:grid;gap:.65rem}
.faq details{
  background:#fff;border:1px solid var(--line);border-radius:var(--rad);
  transition:border-color .3s,box-shadow .3s;
}
.faq details[open]{border-color:var(--g-200);box-shadow:var(--sh-1)}
.faq summary{
  list-style:none;cursor:pointer;position:relative;
  padding:1.1rem 3.2rem 1.1rem 1.3rem;
  font:600 1rem/1.5 var(--f-head);letter-spacing:-.015em;color:var(--ink);
  transition:color .25s;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--r-500)}
.faq summary::after{
  content:'';position:absolute;right:1.15rem;top:50%;transform:translateY(-50%);
  width:26px;height:26px;border-radius:50%;background:var(--g-50);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D2372A' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:center;background-size:13px;
  transition:transform .35s var(--ease),background-color .3s;
}
.faq details[open] summary::after{transform:translateY(-50%) rotate(135deg);background-color:var(--r-100)}
.faq__a{padding:0 3.2rem 1.3rem 1.3rem}
.faq__a p{font-size:.94rem}

/* ---------------------------------------------------------------
   19. CHAMADA FINAL
   --------------------------------------------------------------- */
.cta{
  position:relative;overflow:hidden;color:#fff;border-radius:var(--rad-xl);
  background:
    radial-gradient(90% 120% at 88% 0%,rgba(46,139,78,.24),transparent 58%),
    linear-gradient(150deg,var(--dark-1) 0%,var(--dark-2) 55%,var(--dark-3) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
}
.cta__inner{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(1.6rem,3.5vw,3rem);align-items:center;padding:clamp(2rem,4.5vw,3.6rem)}
.cta h2{color:#fff;max-width:18ch}
.cta p{color:rgba(255,255,255,.76);max-width:44ch;margin-top:.9rem}
.cta__act{display:flex;flex-wrap:wrap;gap:.7rem;justify-content:flex-end}
.cta__strip{
  position:relative;z-index:2;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  border-top:1px solid rgba(255,255,255,.13);
}
.cta__strip > div{
  padding:clamp(1.1rem,2vw,1.6rem) clamp(1.3rem,2.5vw,2.2rem);
  border-left:1px solid rgba(255,255,255,.13);
}
.cta__strip > div:first-child{border-left:0}
.cta__strip h5{font:600 var(--t-micro) var(--f-mono);letter-spacing:.15em;text-transform:uppercase;color:var(--r-400);margin-bottom:.55rem}
.cta__strip p,.cta__strip a{color:rgba(255,255,255,.82);font-size:.93rem;line-height:1.65;margin:0}
.cta__strip a:hover{color:#fff}

/* ---------------------------------------------------------------
   20. RODAPÉ
   --------------------------------------------------------------- */
.ftr{
  background:var(--bg-escuro-fundo);color:#fff;
  padding-top:clamp(3rem,6vw,5rem);position:relative;overflow:hidden;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07);
}
.ftr__top{display:grid;grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr));gap:clamp(1.8rem,3.5vw,3rem);padding-bottom:clamp(2.2rem,4vw,3.2rem)}
.ftr__brand svg,
.ftr__brand .lg-img{height:48px;width:auto;margin-bottom:1.2rem}
.ftr .lg-ring{stroke:#fff}
.ftr .lg-txt{fill:#fff}
.ftr__brand p{font-size:.92rem;color:rgba(255,255,255,.62);max-width:34ch;margin-bottom:1.5rem}
.ftr h5{font:600 var(--t-micro) var(--f-mono);letter-spacing:.15em;text-transform:uppercase;color:#fff;margin-bottom:1rem}
.ftr ul{display:grid;gap:.6rem}
.ftr ul a,.ftr address{font-size:.91rem;color:rgba(255,255,255,.62);font-style:normal;line-height:1.7;transition:color .25s}
.ftr ul a:hover,.ftr address a:hover{color:var(--r-400)}
.ftr address strong{color:#fff}
/* Contato direto: botão com rótulo, não ícone solto */
.ftr__acao{display:flex;flex-wrap:wrap;gap:.5rem}
.ftr__pill{
  display:inline-flex;align-items:center;gap:.55rem;
  padding:.6rem 1.05rem;border-radius:var(--pill);
  border:1px solid rgba(255,255,255,.18);color:rgba(255,255,255,.82);
  font:600 .855rem/1 var(--f-body);transition:all .28s var(--ease);
}
.ftr__pill svg{width:16px;height:16px;flex:none}
.ftr__pill:hover{background:var(--r-500);border-color:var(--r-500);color:#fff;transform:translateY(-2px)}

.ftr__soc{display:flex;gap:.45rem;margin-top:.7rem}
.ftr__soc a{
  width:38px;height:38px;border-radius:50%;display:grid;place-items:center;
  border:1px solid rgba(255,255,255,.16);color:rgba(255,255,255,.7);transition:all .3s var(--ease);
}
.ftr__soc a:hover{background:var(--r-500);border-color:var(--r-500);color:#fff;transform:translateY(-2px)}
.ftr__soc svg{width:16px;height:16px}
.ftr__bot{
  border-top:1px solid rgba(255,255,255,.12);padding-block:1.4rem;
  display:flex;flex-wrap:wrap;gap:.7rem 1.8rem;align-items:center;justify-content:space-between;
  font-size:.82rem;color:rgba(255,255,255,.5);
}
.ftr__bot nav{display:flex;flex-wrap:wrap;gap:.35rem 1.4rem}
.ftr__bot a:hover{color:#fff}

.wa-float{
  position:fixed;right:clamp(1rem,2.5vw,1.7rem);bottom:clamp(1rem,2.5vw,1.7rem);z-index:800;
  width:56px;height:56px;border-radius:50%;display:grid;place-items:center;
  background:#25D366;color:#04180C;box-shadow:0 12px 30px -8px rgba(37,211,102,.6);
  opacity:0;transform:translateY(16px) scale(.9);pointer-events:none;
  transition:opacity .4s var(--ease),transform .4s var(--ease);
}
.wa-float.is-on{opacity:1;transform:none;pointer-events:auto}
.wa-float:hover{transform:translateY(-3px) scale(1.05)}
.wa-float svg{width:27px;height:27px}
.wa-float::after{content:'';position:absolute;inset:0;border-radius:50%;border:2px solid #25D366;animation:ping 2.8s var(--ease-io) infinite}

/* ---------------------------------------------------------------
   21. TOPO DE PÁGINAS INTERNAS
   --------------------------------------------------------------- */
.phero{
  position:relative;overflow:hidden;color:#fff;
  background:
    radial-gradient(105% 88% at 88% -8%,rgba(46,139,78,.24),transparent 58%),
    linear-gradient(166deg,var(--dark-1) 0%,var(--dark-2) 58%,var(--dark-3) 100%);
  padding-top:calc(var(--header-h) + clamp(2.5rem,5vw,4.5rem));
  padding-bottom:clamp(2.8rem,5vw,4.5rem);
}
.phero h1{color:#fff}
.phero .lead{color:rgba(255,255,255,.78)}
.crumbs{display:flex;align-items:center;gap:.55rem;margin-bottom:1.2rem;
  font:600 var(--t-micro) var(--f-mono);letter-spacing:.13em;text-transform:uppercase;color:rgba(255,255,255,.5)}
.crumbs a:hover{color:#fff}
.crumbs i{font-style:normal;opacity:.5}
.crumbs span{color:var(--r-400)}
.phero__side{border-radius:var(--rad-lg);overflow:hidden;border:1px solid rgba(255,255,255,.15);box-shadow:var(--sh-3)}
.phero__side img{width:100%;aspect-ratio:4/3}

/* ---------------------------------------------------------------
   22. PÁGINA DE SERVIÇO
   --------------------------------------------------------------- */
.prose > * + *{margin-top:1.05rem}
.prose h2{font-size:clamp(1.5rem,2.4vw,2.05rem);margin-top:2.8rem;margin-bottom:1.1rem}
.prose h2:first-child{margin-top:0}
.prose p{font-size:1.01rem;line-height:1.78;color:var(--ink-2)}

.spec-list{display:grid;gap:.5rem}
.spec-list div{
  display:flex;justify-content:space-between;gap:1rem;align-items:center;
  padding:.8rem 1rem;border-radius:var(--rad-sm);background:var(--paper-2);
}
.spec-list dt{font:600 var(--t-micro) var(--f-mono);letter-spacing:.11em;text-transform:uppercase;color:var(--muted)}
.spec-list dd{font-weight:600;font-size:.93rem;color:var(--g-800);text-align:right}

.check-list{display:grid;gap:.65rem}
.check-list li{
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:.75rem;align-items:baseline;
  font-size:.96rem;line-height:1.65;color:var(--ink-2);
}
.check-list li::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--r-500);transform:translateY(-1px)}

.app-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(.8rem,1.4vw,1.1rem)}
.app-grid > div{padding:clamp(1.2rem,2vw,1.6rem);border-radius:var(--rad);background:var(--paper-2)}
.app-grid h4{margin-bottom:.4rem;font-size:1rem}
.app-grid p{font-size:.9rem}

.norms{display:grid;gap:.55rem}
.norms div{padding:.85rem 1rem;border-radius:var(--rad-sm);background:var(--g-50);border:1px solid var(--g-100)}
.norms b{display:block;font:600 .84rem var(--f-mono);color:var(--g-700);margin-bottom:.18rem}
.norms span{font-size:.88rem;color:var(--muted);line-height:1.55}

.aside-card{background:#fff;border:1px solid var(--line);border-radius:var(--rad-lg);padding:clamp(1.3rem,2.2vw,1.8rem)}
.aside-card + .aside-card{margin-top:1rem}
.aside-card h5{font:600 var(--t-micro) var(--f-mono);letter-spacing:.15em;text-transform:uppercase;color:var(--muted);margin-bottom:1rem}
.aside-card--green{
  background:linear-gradient(158deg,var(--dark-1),var(--dark-3));
  border-color:transparent;color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
}
.aside-card--green h5{color:var(--r-400)}
.aside-card--green p{color:rgba(255,255,255,.75)}
.sticky{position:sticky;top:calc(var(--header-h) + 20px)}

/* ---------------------------------------------------------------
   23. CONTATO
   --------------------------------------------------------------- */
.form{display:grid;gap:1rem}
.form__row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.field{display:grid;gap:.45rem}
.field label{font:600 var(--t-micro) var(--f-mono);letter-spacing:.13em;text-transform:uppercase;color:var(--muted)}
.field label em{color:var(--r-500);font-style:normal}
.field input,.field select,.field textarea{
  width:100%;padding:.9rem 1.05rem;border-radius:var(--rad-sm);
  background:var(--paper-2);border:1px solid transparent;color:var(--ink);
  font:400 .97rem var(--f-body);transition:.2s;
}
.field textarea{min-height:130px;resize:vertical;line-height:1.6}
.field select{
  appearance:none;cursor:pointer;padding-right:2.6rem;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23647167' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 1rem center;background-size:16px;
}
.field input::placeholder,.field textarea::placeholder{color:var(--faint)}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;background:#fff;border-color:var(--g-400);box-shadow:0 0 0 3px rgba(46,139,78,.14);
}
.field.has-error input,.field.has-error textarea{border-color:var(--r-500);background:var(--r-100)}
.field__err{font-size:.8rem;color:var(--r-600)}
.hp{position:absolute!important;left:-9999px;opacity:0;height:0;width:0}
.form__note{font-size:.83rem;color:var(--muted);line-height:1.6}
.form__note a{color:var(--g-700);font-weight:500;text-decoration:underline;text-underline-offset:3px}

.alert{display:flex;gap:.85rem;align-items:flex-start;padding:1.05rem 1.2rem;border-radius:var(--rad);font-size:.93rem;line-height:1.6;margin-bottom:1.6rem}
.alert svg{width:19px;height:19px;flex:none;margin-top:.12rem}
.alert--ok{background:var(--g-50);border:1px solid var(--g-200);color:var(--g-700)}
.alert--err{background:var(--r-100);border:1px solid #F3C9C3;color:var(--r-700)}
.alert b{display:block;margin-bottom:.15rem;font-weight:600}

.info-list{display:grid;gap:.65rem}
.info{
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:1rem;align-items:start;
  padding:1.1rem 1.2rem;border-radius:var(--rad);background:var(--card);border:1px solid var(--rule);
}
.info h5{font:600 var(--t-micro) var(--f-mono);letter-spacing:.13em;text-transform:uppercase;color:var(--dim);margin-bottom:.35rem}
.info p,.info a{font-size:.96rem;color:var(--fg);line-height:1.6}
.info a:hover{color:var(--r-500)}

/* Bloco de triagem do formulário: visualmente mais leve que os campos
   obrigatórios, porque responder é opcional e não pode parecer barreira. */
.qual{
  border:1px solid var(--line);border-radius:var(--rad);
  padding:clamp(1rem,2vw,1.35rem);background:var(--paper-2);
}
.qual legend{
  padding:0 .5rem;margin-left:-.5rem;
  font:600 var(--t-micro)/1 var(--f-mono);letter-spacing:.13em;text-transform:uppercase;color:var(--ink-2);
}
.qual legend span{
  display:block;margin-top:.5rem;max-width:46ch;
  font:400 .78rem/1.5 var(--f-body);letter-spacing:0;text-transform:none;color:var(--muted);
}
.qual__grid{display:grid;grid-template-columns:1fr 1fr;gap:.85rem;margin-top:1rem}
.qual .field select{background:#fff}

.qual__veio{
  display:flex;align-items:flex-start;gap:.6rem;
  padding:.8rem 1rem;border-radius:var(--rad-sm);
  background:var(--g-50);border:1px solid var(--g-200);
  font-size:.86rem;line-height:1.5;color:var(--g-700);
}
.qual__veio svg{width:16px;height:16px;flex:none;margin-top:.15rem}
.qual__veio b{font-weight:600;color:var(--g-800)}

@media (max-width:620px){
  .qual__grid{grid-template-columns:1fr}
}

.map-embed{margin-top:1rem;border-radius:var(--rad-lg);overflow:hidden;border:1px solid var(--line)}
.map-embed iframe{width:100%;height:300px;border:0;display:block;filter:grayscale(.85) contrast(.95)}

/* ---------------------------------------------------------------
   24. LEGAL / 404
   --------------------------------------------------------------- */
.legal h3{font-size:clamp(1.15rem,1.9vw,1.4rem);margin:2.2rem 0 .7rem}
.legal h3:first-child{margin-top:0}
.legal p{font-size:.99rem;line-height:1.8}

.e404{text-align:center;padding-block:clamp(4rem,9vw,7rem)}
.e404 b{
  display:block;font:600 clamp(5rem,15vw,11rem)/1 var(--f-head);letter-spacing:-.05em;
  color:var(--g-800);opacity:.12;margin-bottom:-1.5rem;
}

/* ---------------------------------------------------------------
   25. ANIMAÇÕES
   --------------------------------------------------------------- */
[data-anim]{will-change:transform,opacity}
.no-js [data-anim]{opacity:1!important;transform:none!important}
.js [data-anim="up"]{opacity:0;transform:translateY(26px);transition:opacity .8s var(--ease),transform .9s var(--ease)}
.js [data-anim="fade"]{opacity:0;transition:opacity .9s var(--ease)}
.js [data-anim="left"]{opacity:0;transform:translateX(-24px);transition:opacity .8s var(--ease),transform .9s var(--ease)}
.js [data-anim="right"]{opacity:0;transform:translateX(24px);transition:opacity .8s var(--ease),transform .9s var(--ease)}
.js [data-anim="scale"]{opacity:0;transform:scale(.96);transition:opacity .8s var(--ease),transform .9s var(--ease)}
.js [data-anim].is-in{opacity:1;transform:none}

/* ---------------------------------------------------------------
   26. RESPONSIVO
   --------------------------------------------------------------- */
@media (max-width:1180px){
  .hero__grid{grid-template-columns:minmax(0,1fr) minmax(0,.8fr)}
  .about,.coverage{grid-template-columns:1fr}
  .svc-grid,.works,.steps{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:1024px){
  :root{--header-h:70px}
  .nav,.hdr-phone{display:none}
  .burger{display:flex}
  .c1-4,.c1-5,.c1-6,.c1-7,.c1-8,.c5-12,.c6-12,.c7-12,.c8-12,.c9-12{grid-column:1/-1}
  .hero__grid{grid-template-columns:1fr;gap:2.5rem}
  .hero__media{max-width:520px}
    .sec-head{grid-template-columns:1fr;align-items:start}
  .cta__inner{grid-template-columns:1fr}
  .cta__act{justify-content:flex-start}
  .cta__strip{grid-template-columns:1fr}
  .ftr__top{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ftr__brand{grid-column:1/-1}
  .stat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:720px){
  :root{--sec-y:clamp(3.5rem,10vw,5rem)}
  .svc-grid,.works,.steps,.app-grid,.form__row,.city-grid{grid-template-columns:1fr}
  .ftr__top{grid-template-columns:1fr}
  .ftr__bot{flex-direction:column;align-items:flex-start}
  .hero__cta .btn,.cta__act .btn{width:100%}
  .hdr-cta .btn{display:none}
  .brand-txt span{display:none}
    }
@media (max-width:430px){
  .brand-txt{display:none}
  .stat-grid{grid-template-columns:1fr 1fr}
}

/* ---------------------------------------------------------------
   27. MOVIMENTO REDUZIDO / IMPRESSÃO
   --------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .js [data-anim]{opacity:1!important;transform:none!important}
  .marquee__track{animation:none}
  #preloader{display:none}
}
@media print{
  .hdr,.wa-float,.mobile-menu,#preloader,.marquee,.cta{display:none!important}
  body{background:#fff;color:#000}
  .sec{padding-block:1.5rem}
  a{text-decoration:underline}
}

/* ---------------------------------------------------------------
   28. TRANSIÇÃO ENTRE PÁGINAS (View Transitions API)
   Navegadores sem suporte simplesmente navegam do jeito normal.
   --------------------------------------------------------------- */
@view-transition{navigation:auto}
::view-transition-old(root){animation:vt-sai .24s var(--ease-io) both}
::view-transition-new(root){animation:vt-entra .34s var(--ease) both}
@keyframes vt-sai{to{opacity:0}}
@keyframes vt-entra{from{opacity:0;transform:translateY(10px)}}
.hdr{view-transition-name:cabecalho}
.ftr{view-transition-name:rodape}

/* ---------------------------------------------------------------
   29. BARRA DE PROGRESSO DA ROLAGEM (animação nativa, sem JS)
   --------------------------------------------------------------- */
.progresso{
  position:fixed;top:0;left:0;right:0;height:3px;z-index:950;
  background:linear-gradient(90deg,var(--r-500),var(--r-400));
  transform:scaleX(0);transform-origin:0 50%;display:none;
}
@supports (animation-timeline:scroll()){
  .progresso{display:block;animation:progresso-rola linear;animation-timeline:scroll(root block)}
}
@keyframes progresso-rola{to{transform:scaleX(1)}}

@media (prefers-reduced-motion:reduce){
  @view-transition{navigation:none}
  .progresso{display:none}
}

/* ---------------------------------------------------------------
   30. PRANCHA TÉCNICA COMPARATIVA
   --------------------------------------------------------------- */
.prancha__ctrl{
  display:flex;gap:4px;padding:4px;margin-bottom:1.1rem;
  background:var(--paper-2);border-radius:var(--pill);
}
.prancha__ctrl button{
  flex:1;padding:.6em 1em;border-radius:var(--pill);
  font:600 .82rem/1 var(--f-body);color:var(--muted);
  transition:background .3s var(--ease),color .3s,box-shadow .3s;
}
.prancha__ctrl button:hover{color:var(--ink)}
.prancha__ctrl button.is-on{background:#fff;color:var(--g-800);box-shadow:var(--sh-1)}

.prancha svg{transition:opacity .25s var(--ease)}
.prancha.is-trocando svg{opacity:.35}

/* estado hélice: some a armadura, aparece a espiral */
.prancha .pl-helice{opacity:0;transition:opacity .45s var(--ease)}
.prancha .pl-armadura{opacity:1;transition:opacity .45s var(--ease)}
.prancha[data-estado="helice"] .pl-helice{opacity:1}
.prancha[data-estado="helice"] .pl-armadura{opacity:0}
.prancha[data-estado="helice"] .pl-cham-2a,
.prancha[data-estado="helice"] .pl-cham-2b{opacity:.35}

.prancha__dados{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.5rem;
  margin-top:1.1rem;padding-top:1rem;border-top:1px solid var(--line-2);
}
.prancha__dados > div{padding:.65rem .85rem;border-radius:var(--rad-sm);background:var(--paper-2)}
.prancha__dados dt{font:600 var(--t-micro) var(--f-mono);letter-spacing:.11em;text-transform:uppercase;color:var(--muted);margin-bottom:.2rem}
.prancha__dados dd{font-weight:600;font-size:.88rem;color:var(--g-800);line-height:1.35}

/* ---------------------------------------------------------------
   31. SELETOR "QUAL ESTACA PARA MINHA OBRA?"
   --------------------------------------------------------------- */
.guia{background:#fff;border:1px solid var(--line);border-radius:var(--rad-lg);overflow:hidden}
.guia__topo{
  display:flex;flex-wrap:wrap;gap:1rem;align-items:center;justify-content:space-between;
  padding:clamp(1.2rem,2.2vw,1.8rem);border-bottom:1px solid var(--line-2);
}
.guia__passos{display:flex;gap:6px;align-items:center}
.guia__passos i{
  width:26px;height:4px;border-radius:99px;background:var(--paper-3);
  transition:background .35s var(--ease);display:block;
}
.guia__passos i.is-on{background:var(--r-500)}
.guia__corpo{padding:clamp(1.3rem,2.4vw,2rem)}
.guia__pergunta{display:none}
.guia__pergunta.is-on{display:block;animation:guia-entra .35s var(--ease)}
@keyframes guia-entra{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.guia h4{font-size:1.15rem;margin-bottom:.3rem}
.guia__dica{font-size:.88rem;color:var(--muted);margin-bottom:1.2rem}
.guia__ops{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.6rem}
.guia__ops button{
  text-align:left;padding:1rem 1.1rem;border-radius:var(--rad);
  border:1px solid var(--line);background:#fff;transition:all .25s var(--ease);
}
.guia__ops button:hover{border-color:var(--g-400);background:var(--g-50);transform:translateY(-2px)}
.guia__ops b{display:block;font:600 .93rem/1.3 var(--f-body);color:var(--ink);margin-bottom:.22rem}
.guia__ops span{font-size:.8rem;color:var(--muted);line-height:1.45}

.guia__resultado{display:none}
.guia__resultado.is-on{display:block;animation:guia-entra .4s var(--ease)}
.guia__badge{
  display:inline-flex;align-items:center;gap:.5em;padding:.45em .95em;border-radius:var(--pill);
  background:var(--g-50);border:1px solid var(--g-200);
  font:600 var(--t-micro) var(--f-mono);letter-spacing:.13em;text-transform:uppercase;color:var(--g-700);
  margin-bottom:.9rem;
}
.guia__aviso{
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:.7rem;align-items:start;
  margin-top:1.2rem;padding:.9rem 1.1rem;border-radius:var(--rad-sm);
  background:var(--r-100);font-size:.84rem;line-height:1.55;color:var(--r-700);
}
.guia__aviso svg{width:17px;height:17px;flex:none;margin-top:.15rem}
.guia__refazer{margin-top:1rem;font:600 .85rem var(--f-body);color:var(--muted);text-decoration:underline;text-underline-offset:3px}
.guia__refazer:hover{color:var(--r-500)}

/* ---------------------------------------------------------------
   32. GALERIA (lightbox) E BUSCA NAS OBRAS
   --------------------------------------------------------------- */
.busca-obras{
  display:flex;flex-wrap:wrap;gap:.6rem;align-items:center;
  margin-bottom:1rem;
}
.busca-obras input{
  flex:1;min-width:220px;padding:.8rem 1.05rem;border-radius:var(--pill);
  background:#fff;border:1px solid var(--line);font:400 .93rem var(--f-body);color:var(--ink);
  transition:.2s;
}
.busca-obras input:focus{outline:none;border-color:var(--g-400);box-shadow:0 0 0 3px rgba(46,139,78,.13)}
.busca-obras select{
  padding:.8rem 2.4rem .8rem 1.05rem;border-radius:var(--pill);
  background:#fff;border:1px solid var(--line);font:500 .88rem var(--f-body);color:var(--ink);
  appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23647167' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 1rem center;background-size:15px;
}
.busca-obras .conta{font:600 var(--t-micro) var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}

.lb{
  position:fixed;inset:0;z-index:1000;display:none;
  background:rgba(5,25,15,.94);backdrop-filter:blur(8px);
  align-items:center;justify-content:center;padding:clamp(1rem,4vw,3rem);
}
.lb.is-on{display:flex;animation:lb-abre .3s var(--ease)}
@keyframes lb-abre{from{opacity:0}to{opacity:1}}
.lb__fig{max-width:min(1100px,92vw);max-height:86vh;display:flex;flex-direction:column;gap:.9rem}
.lb__fig img{max-height:74vh;width:auto;max-width:100%;border-radius:var(--rad);object-fit:contain;margin-inline:auto}
.lb__cap{color:#fff;text-align:center}
.lb__cap b{display:block;font:600 1.05rem var(--f-head);margin-bottom:.2rem}
.lb__cap span{font:500 var(--t-micro) var(--f-mono);letter-spacing:.11em;text-transform:uppercase;color:rgba(255,255,255,.6)}
.lb button{
  position:absolute;width:48px;height:48px;border-radius:50%;
  background:rgba(255,255,255,.12);color:#fff;display:grid;place-items:center;
  transition:background .25s,transform .25s;
}
.lb button:hover{background:rgba(255,255,255,.24);transform:scale(1.06)}
.lb button svg{width:20px;height:20px}
.lb__prev{left:clamp(.6rem,3vw,2rem);top:50%;transform:translateY(-50%)}
.lb__prev:hover{transform:translateY(-50%) scale(1.06)}
.lb__next{right:clamp(.6rem,3vw,2rem);top:50%;transform:translateY(-50%)}
.lb__next:hover{transform:translateY(-50%) scale(1.06)}
.lb__fecha{top:clamp(.6rem,3vw,1.6rem);right:clamp(.6rem,3vw,1.6rem)}
.lb__n{
  position:absolute;bottom:clamp(.8rem,3vw,1.6rem);left:50%;transform:translateX(-50%);
  font:600 var(--t-micro) var(--f-mono);letter-spacing:.14em;color:rgba(255,255,255,.65);
}

@media (max-width:720px){
  .guia__ops{grid-template-columns:1fr}
  .prancha__dados{grid-template-columns:1fr}
  .lb__prev,.lb__next{bottom:clamp(.8rem,3vw,1.6rem);top:auto;transform:none}
  .lb__prev{left:22%}
  .lb__next{right:22%}
  .lb__n{bottom:auto;top:clamp(.8rem,3vw,1.6rem);left:1.2rem;transform:none}
}