/* ============================================================
   BASE — tokens, reset, header, botões, footer, utilitários
   ============================================================ */

:root{
  /* marca */
  --verde:        #72bf8d;
  --verde-esc:    #044a44;
  --verde-fundo:  #022623;
  --laranja:      #ff7512;
  --preto:        #000000;
  --grafite:      #1f1f1f;
  --papel:        #e9e8e4;
  --claro:        #f1f1f1;

  /* medidas (base de projeto: 1440px, conteúdo 1425) */
  --max:          1034px;   /* largura dos cards de serviço, como no original */
  --pad:          clamp(20px, 5vw, 72px);
  --raio-bloco:   50px;     /* raio dos blocos que vão de borda a borda */
  --raio-card:    clamp(20px, 2.2vw, 32px);
  --hdr-h:        78px;

  /* escala fluida: 1px @1440 ≈ 0.0694vw, com piso e teto */
  --easing:       cubic-bezier(.22,1,.36,1);
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; overflow-x:clip; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  font-family:'Houschka', 'Inter', system-ui, -apple-system, sans-serif;
  font-weight:500;
  color:var(--preto);
  background:var(--papel) url('../assets/img/textura-papel.jpg') center top / 100vw auto repeat-y;
  overflow-x:clip;
  -webkit-font-smoothing:antialiased;
}

img,video{ display:block; max-width:100%; }
/* o ol também entra aqui: sem isto ele guarda o recuo de 40px que o navegador
   reserva pro marcador, e a lista inteira sai do eixo dentro do próprio bloco */
ul,ol{ margin:0; padding:0; list-style:none; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
h1,h2,h3,h4,p,blockquote,figure{ margin:0; }

.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;
}
.skip{
  position:absolute; left:-999px; top:0; z-index:999;
  background:#000; color:#fff; padding:12px 20px; border-radius:0 0 12px 0;
}
.skip:focus{ left:0; }

:focus-visible{ outline:3px solid var(--verde); outline-offset:3px; border-radius:4px; }

/* ---------- BOTÕES ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.6em;
  font-weight:600; font-size:clamp(15px, 1.53vw, 22px); letter-spacing:.02em;
  min-height:48px; padding:.82em 1.6em; border-radius:999px;
  transition:transform .35s var(--easing), background-color .3s, color .3s, box-shadow .35s;
  will-change:transform;
}
.btn__arrow{ transition:transform .35s var(--easing); }
.btn:hover .btn__arrow{ transform:translateX(5px); }
.btn:hover{ transform:translateY(-2px); }
.btn:active{ transform:translateY(0); }

.btn--dark{
  background:#101418; color:#fff;
  box-shadow:0 6px 22px rgba(0,0,0,.28), inset 0 0 0 1px rgba(255,255,255,.08);
}
.btn--dark:hover{ background:#1b2129; box-shadow:0 10px 30px rgba(0,0,0,.4), inset 0 0 0 1px rgba(255,255,255,.16); }

.btn--ghost{
  background:#141414; color:#fff;
  box-shadow:inset 0 0 0 1.5px var(--laranja);
}
.btn--ghost:hover{ background:var(--laranja); color:#0d0d0d; box-shadow:inset 0 0 0 1.5px var(--laranja), 0 10px 28px rgba(255,117,18,.35); }

.btn--solid{
  background:var(--verde-esc); color:#fff;
  box-shadow:0 8px 26px rgba(4,74,68,.3);
}
.btn--solid:hover{ background:#066a61; }

/* ---------- HEADER ----------
   barra de borda a borda com os cantos de baixo arredondados (como no original) */
.hdr{
  position:fixed; inset:0 0 auto 0; z-index:120;
  transition:transform .45s var(--easing);
}
.hdr.is-hidden{ transform:translateY(-140%); }

.hdr__pill{
  height:var(--hdr-h);
  display:flex; align-items:center; gap:clamp(16px,3vw,54px);
  padding:12px clamp(20px,5vw,72px);
  background:#000;
  border-radius:0 0 var(--raio-bloco) var(--raio-bloco);
  transition:box-shadow .4s;
}
.hdr.is-scrolled .hdr__pill{ box-shadow:0 14px 44px rgba(0,0,0,.5); }

.hdr__logo img{ width:clamp(92px,8.3vw,120px); height:auto; }
.hdr__logo{ display:flex; align-items:center; min-height:44px; transition:opacity .3s; }
.hdr__logo:hover{ opacity:.75; }

.hdr__nav{ display:flex; align-items:center; gap:clamp(18px,3.3vw,54px); margin-left:auto; }
.hdr__nav a{
  position:relative; color:#fff; font-size:15px; font-weight:500;
  padding:6px 2px;
}
.hdr__nav a::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:1.5px;
  background:var(--verde); transform:scaleX(0); transform-origin:right;
  transition:transform .4s var(--easing);
}
.hdr__nav a:hover::after, .hdr__nav a.is-active::after{ transform:scaleX(1); transform-origin:left; }
.hdr__nav a.is-active{ color:var(--verde); }

.hdr__cta{ font-size:15px; padding:.72em 1.3em; }

.hdr__burger{ display:none; width:44px; height:44px; margin-left:auto; position:relative; }
.hdr__burger span{
  position:absolute; left:11px; width:22px; height:2px; background:#fff; border-radius:2px;
  transition:transform .35s var(--easing), opacity .25s;
}
.hdr__burger span:nth-child(1){ top:19px; }
.hdr__burger span:nth-child(2){ top:25px; }
.hdr__burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(3px) rotate(45deg); }
.hdr__burger[aria-expanded="true"] span:nth-child(2){ transform:translateY(-3px) rotate(-45deg); }

@media (max-width:860px){
  .hdr__burger{ display:block; }
  .hdr__cta{ display:none; }
  .hdr__nav{
    position:absolute; top:calc(100% + 10px); left:0; right:0;
    flex-direction:column; align-items:stretch; gap:0;
    background:rgba(8,8,8,.97); backdrop-filter:blur(16px);
    border-radius:24px; padding:10px; margin:0;
    opacity:0; visibility:hidden; transform:translateY(-10px);
    transition:opacity .3s, transform .35s var(--easing), visibility .3s;
  }
  .hdr__nav.is-open{ opacity:1; visibility:visible; transform:none; }
  .hdr__nav a{ padding:16px 18px; font-size:17px; border-radius:16px; }
  .hdr__nav a:hover{ background:rgba(255,255,255,.06); }
  .hdr__nav a::after{ display:none; }
}

/* ---------- FOOTER ---------- */
.ft{ padding:0; }
.ft__box{
  background:var(--preto); color:#fff;
  border-radius:var(--raio-bloco) var(--raio-bloco) 0 0;
  padding:clamp(44px,5.6vw,80px) clamp(20px,5vw,72px) clamp(44px,4.8vw,68px);
  /* colunas nas mesmas posições do original: marca | EMPRESA | CONTATO */
  display:grid; grid-template-columns:minmax(0,652fr) minmax(0,334fr) minmax(0,295fr);
  gap:0 clamp(20px,2vw,28px);
}
.ft__brand img{ width:clamp(96px,7.8vw,112px); height:auto; }
.ft__brand p{
  margin-top:18px; font-size:14px; font-weight:500; line-height:1.5;
  letter-spacing:.04em; color:#fff;
}
.ft__brand i{ font-weight:700; font-style:italic; }

.ft__social{ display:flex; gap:10px; margin-top:26px; flex-wrap:wrap; }
.ft__social a{
  display:inline-flex; align-items:center;
  font-size:15px; font-weight:600; letter-spacing:.02em;
  min-height:44px; padding:.5em 1.35em;
  border-radius:999px; background:var(--verde-esc);
  transition:background-color .3s, transform .35s var(--easing);
}
.ft__social a:hover{ background:var(--verde); color:#04201d; transform:translateY(-2px); }

.ft__col h4{
  font-size:14px; letter-spacing:.1em; font-weight:700;
  color:#a1a1a1; margin-bottom:18px;
}
.ft__col a{
  display:flex; align-items:center; min-height:44px;
  font-size:17px; font-weight:600; letter-spacing:.04em;
  transition:color .3s, transform .35s var(--easing);
}
.ft__col a:hover{ color:var(--verde); transform:translateX(4px); }
.ft__mail{ color:var(--verde) !important; }
.ft__mail:hover{ color:#fff !important; }

.ft__legal{
  background:var(--verde-fundo); color:#cfe9dd;
  text-align:center; font-size:clamp(13px,.9vw,12px); line-height:1.5;
  padding:16px clamp(20px,5vw,72px);
}
@media (min-width:1000px){ .ft__legal{ font-size:12px; } }

@media (max-width:900px){
  .ft__box{ grid-template-columns:1fr 1fr; gap:36px clamp(20px,3vw,40px); }
  .ft__brand{ grid-column:1 / -1; }
}
@media (max-width:520px){
  .ft__box{ grid-template-columns:1fr; }
}

/* ---------- BARRA DE PROGRESSO ---------- */
.progresso{
  position:fixed; top:0; left:0; right:0; height:3px; z-index:200;
  pointer-events:none;
}
.progresso span{
  display:block; height:100%; width:0;
  background:linear-gradient(90deg, var(--verde) 0%, var(--verde) 55%, var(--laranja) 100%);
  box-shadow:0 0 12px rgba(114,191,141,.55);
  transition:width .12s linear;
}

/* ---------- MICRO-INTERAÇÕES ---------- */
/* botão que "puxa" levemente na direção do cursor */
.btn{ --mx:0px; --my:0px; }
@media (hover:hover){
  .btn{ transform:translate(var(--mx), var(--my)); }
  .btn:hover{ transform:translate(var(--mx), calc(var(--my) - 2px)); }
}

/* cartão que inclina de leve seguindo o mouse */
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  .tilt{ transform:perspective(1100px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)); transition:transform .25s var(--easing); }
  .tilt.is-solto{ transition:transform .7s var(--easing); }
}

/* pulso quando o número termina de contar */
@keyframes bateu{ 0%{transform:scale(1)} 40%{transform:scale(1.09)} 100%{transform:scale(1)} }
.bateu{ animation:bateu .5s var(--easing); }

/* ---------- REVEAL (entrada por scroll) ---------- */
.reveal{
  opacity:0; transform:translateY(34px);
  transition:opacity .8s var(--easing), transform .8s var(--easing);
}
.reveal.is-in{ opacity:1; transform:none; }

.split-w{ display:inline-block; overflow:hidden; vertical-align:bottom; }
.split-w > span{
  display:inline-block;
  transform:translateY(105%);
  transition:transform .78s var(--easing);
}
.is-in .split-w > span{ transform:none; }

@media (prefers-reduced-motion:reduce){
  .reveal, .split-w > span{ opacity:1 !important; transform:none !important; transition:none !important; }
}

/* ============================================================
   LUPA — abrir imagem em tamanho grande para examinar de perto.
   Mora aqui, e não em sections.css, porque as páginas de CASE e de
   SERVIÇO também usam: só a home carrega o sections.css.
   ============================================================ */
/* dá para abrir e ler de perto */
[data-zoom]{ cursor:zoom-in; }
.zoom-dica{
  display:none;
  margin-top:8px; text-align:center;
  font-size:13px; font-weight:600; color:#4a4a4a;
}
.zoom-dica svg{ width:15px; height:15px; vertical-align:-2px; margin-right:.35em; }
@media (max-width:760px){ .zoom-dica{ display:block; } }

/* a lupa: a imagem entra maior que a tela e a pessoa arrasta para ler */
.lupa{
  position:fixed; inset:0; z-index:120;
  overflow:auto; -webkit-overflow-scrolling:touch;
  background:rgba(0,0,0,.94);
  display:flex; align-items:center;
  padding:56px 0;
}
.lupa[hidden]{ display:none; }
.lupa img{
  width:260%; max-width:none; height:auto; display:block;
  margin:auto;
}
/* No celular a imagem entra maior que a tela porque o problema é LER (texto de
   print, número de peça). Na tela grande isso vira um exagero: ali basta ver a
   imagem inteira, sem o recorte que a célula da galeria impõe. */
@media (min-width:761px){
  .lupa{ padding:40px; }
  .lupa img{ width:auto; max-width:100%; max-height:calc(100vh - 80px); }
  .lupa__ler{ display:none; }
}
/* rótulo que muda com o aparelho (o mesmo par usado nos cartões de case) */
.so-toque{ display:none; }
@media (hover:none){
  .so-mouse{ display:none; }
  .so-toque{ display:inline; }
}
.lupa__x{
  position:fixed; top:12px; right:12px; z-index:2;
  width:44px; height:44px; border-radius:50%;
  background:rgba(255,255,255,.16); color:#fff;
  font-size:26px; line-height:1;
  display:grid; place-items:center;
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
}
.lupa__ler{
  position:fixed; left:50%; bottom:16px; transform:translateX(-50%); z-index:2;
  font-size:13px; font-weight:600; color:rgba(255,255,255,.7);
  background:rgba(0,0,0,.5); padding:.5em 1em; border-radius:999px;
  pointer-events:none;
}