/* ═══════════════════════════════════════════
   VERACI · BASE
   Extraído sem alteração de veraci-landing/css/main.css.
   É o que garante que portfólio, landing e proposta
   pareçam a mesma empresa. Não editar aqui: editar lá
   e reextrair, ou os três divergem.
   ═══════════════════════════════════════════ */

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }

body{
  font-family:var(--f-sans);
  background:var(--bg);
  color:var(--tx-body);
  font-size:var(--t-base);
  line-height:1.65;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

/* fundo vivo (js/bg.js) */
#bg{
  position:fixed; inset:0;
  width:100%; height:100%;
  z-index:0; pointer-events:none;
  display:block;
}

main,.ft{ position:relative; z-index:1; }
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }

.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gut); }
.wrap--tx{ max-width:calc(var(--maxw-tx) + var(--gut)*2); }

/* ── VIDRO (Apple-style) ─────────────────── */
.glass{
  position:relative;
  background:var(--glass);
  border:0;
  border-radius:var(--r-card);
  -webkit-backdrop-filter:var(--glass-blur);
  backdrop-filter:var(--glass-blur);
  box-shadow:var(--glass-inner), var(--glass-drop);
  overflow:hidden;
  isolation:isolate;
}

/* camada 1 — specular: o brilho que segue o cursor.
   Sem cursor (celular), fica um highlight fixo no canto superior. */
.glass::before{
  content:'';
  position:absolute; inset:0; z-index:0;
  border-radius:inherit;
  background:radial-gradient(
    420px circle at var(--mx,22%) var(--my,0%),
    rgba(255,255,255,.13), rgba(255,255,255,.04) 38%, transparent 62%);
  opacity:.9;
  transition:opacity var(--d-mid) var(--e-out);
  pointer-events:none;
}

/* camada 2 — borda em gradiente de 1px.
   O truque do mask-composite desenha só a moldura,
   deixando o miolo vazado: é isso que dá a aresta de vidro. */
.glass::after{
  content:'';
  position:absolute; inset:0; z-index:1;
  border-radius:inherit;
  padding:1px;
  background:var(--glass-edge);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
          mask-composite:exclude;
  pointer-events:none;
}

/* o conteúdo precisa subir acima das duas camadas */
.glass > *{ position:relative; z-index:2; }

.glass--hover{ transition:transform var(--d-mid) var(--e-out), box-shadow var(--d-mid) var(--e-out); }
.glass--hover:hover{
  transform:translateY(-5px);
  box-shadow:var(--glass-inner), 0 26px 64px rgba(0,0,0,.5), 0 0 0 1px var(--glass-brd-hi);
}
.glass--hover:hover::before{ opacity:1; }

/* ── rótulos com traço ───────────────────── */
.label{
  display:flex; align-items:center; gap:.85rem;
  font-size:var(--t-label);
  letter-spacing:.34em; text-transform:uppercase;
  color:var(--teal); font-weight:500;
  margin-bottom:1.2rem;
}
.label::before{
  content:''; width:clamp(22px,4vw,46px); height:1px;
  background:linear-gradient(90deg,transparent,var(--teal));
  flex-shrink:0;
}
.label--c{ justify-content:center; }
.label--c::after{
  content:''; width:clamp(22px,4vw,46px); height:1px;
  background:linear-gradient(90deg,var(--teal),transparent);
}

h1,h2,h3{ color:var(--tx-strong); font-weight:400; line-height:1.08; }
.ital{ font-family:var(--f-serif); font-style:italic; letter-spacing:-.02em; }
.sec__h2{ font-family:var(--f-serif); font-style:italic; font-size:var(--t-lg); letter-spacing:-.02em; margin-bottom:1rem; }
.sec__lead{ max-width:54ch; margin-bottom:2.8rem; }
.teal{ color:var(--teal); }

/* ── header ──────────────────────────────── */
.hdr{
  position:fixed; top:0; left:0; right:0; z-index:70;
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:.8rem var(--gut);
  transition:background var(--d-fast), border-color var(--d-fast);
  border-bottom:1px solid transparent;
}
.hdr.is-stuck{
  background:rgba(5,15,13,.72);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  backdrop-filter:blur(18px) saturate(140%);
  border-bottom-color:rgba(255,255,255,.12);
}
.hdr__brand{ display:flex; align-items:center; gap:.55rem; }
.hdr__wordmark{ font-family:var(--f-serif); font-style:italic; font-size:22px; color:#fff; }
.hdr__wordmark span,.ft__wordmark span{ color:var(--teal); }
.hdr__right{ display:flex; align-items:center; gap:.65rem; }

.lang{
  display:flex; align-items:center; gap:.35rem;
  background:var(--glass); border:1px solid rgba(255,255,255,.12);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  border-radius:var(--r-pill); padding:.36rem .78rem;
  font-family:var(--f-mono); font-size:11px;
  color:var(--tx-faint); cursor:pointer;
  transition:border-color var(--d-fast);
}
.lang:hover{ border-color:var(--glass-brd-hi); }
.lang__opt{ transition:color var(--d-fast); }
.lang__opt.is-on{ color:var(--teal); }
.lang__sep{ opacity:.3; }

/* ── botões ──────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  border-radius:var(--r-pill);
  font-size:var(--t-sm); font-weight:500;
  padding:.78rem 1.5rem;
  border:1px solid rgba(255,255,255,.14);
  background:var(--glass);
  -webkit-backdrop-filter:blur(20px) saturate(170%); backdrop-filter:blur(20px) saturate(170%);
  box-shadow:var(--glass-inner);
  color:var(--tx-strong);
  transition:transform var(--d-fast) var(--e-out), background var(--d-fast),
             border-color var(--d-fast), box-shadow var(--d-fast);
  white-space:nowrap;
}
.btn .ico{ width:1.15em; height:1.15em; }
.btn:hover{ transform:translateY(-2px); border-color:var(--glass-brd-hi); background:var(--glass-2); }

.btn--primary{
  background:linear-gradient(135deg,var(--teal-hi),var(--teal));
  color:#04120f; border-color:transparent; font-weight:600;
}
.btn--primary:hover{ box-shadow:0 10px 36px rgba(62,207,178,.32); background:linear-gradient(135deg,var(--teal-hi),var(--teal)); }
.btn--sm{ padding:.5rem 1.05rem; font-size:var(--t-label); letter-spacing:.08em; text-transform:uppercase; }
.btn--lg{ padding:1rem 2.2rem; font-size:var(--t-base); }
.btn--wide{ width:100%; justify-content:flex-start; gap:.85rem; padding:1.05rem 1.4rem; }

.pills{ display:flex; flex-wrap:wrap; gap:.5rem; justify-content:center; list-style:none; }
.pills li{
  display:inline-flex; align-items:center; gap:.45rem;
  background:var(--glass); border:1px solid rgba(255,255,255,.13);
  -webkit-backdrop-filter:blur(18px) saturate(170%); backdrop-filter:blur(18px) saturate(170%);
  box-shadow:var(--glass-inner);
  border-radius:var(--r-pill); padding:.44rem 1.05rem;
  font-size:var(--t-label); letter-spacing:.2em; text-transform:uppercase;
  color:var(--tx-faint);
}
.pills .ico{ color:var(--teal); }

/* ── seções ──────────────────────────────── */
.sec{ padding-block:var(--sec-y); }


/* ── rodapé ──────────────────────────────── */
.ft{ border-top:1px solid rgba(255,255,255,.12); padding-block:3.2rem 2rem; }
.ft__inner{ display:flex; flex-wrap:wrap; gap:2.6rem; justify-content:space-between; align-items:flex-start; }
.ft__brand{ display:flex; align-items:center; gap:.85rem; }
.ft__wordmark{ display:block; font-family:var(--f-serif); font-style:italic; font-size:24px; color:#fff; line-height:1; }
.ft__sub{ display:block; margin-top:6px; font-size:9px; letter-spacing:.24em; text-transform:uppercase; color:var(--teal); }
.ft__cols{ display:flex; flex-wrap:wrap; gap:3rem; }
.ft__col{ display:flex; flex-direction:column; gap:.5rem; }
.ft__lbl{ font-size:var(--t-label); letter-spacing:.24em; text-transform:uppercase; color:var(--tx-faint); }
.ft__val{ color:var(--tx-strong); font-size:var(--t-sm); }
.ft__col a{ display:inline-flex; align-items:center; gap:.45rem; font-size:var(--t-sm); transition:color var(--d-fast); }
.ft__col a:hover{ color:var(--teal); }
.ft__col a .ico{ color:var(--teal); width:15px; height:15px; }
.ft__legal{
  display:flex; flex-wrap:wrap; gap:.6rem 2rem; justify-content:space-between;
  margin-top:2.8rem; padding-top:1.5rem; border-top:1px solid rgba(255,255,255,.12);
  font-size:var(--t-label); letter-spacing:.08em; color:var(--tx-faint);
}

/* ── reveal ──────────────────────────────── */
.js .reveal{
  opacity:0; transform:translateY(24px);
  transition:opacity var(--d-slow) var(--e-out) var(--d,0s),
             transform var(--d-slow) var(--e-out) var(--d,0s);
}
.js .reveal.is-in{ opacity:1; transform:none; }

@media (prefers-reduced-motion: reduce){
  .js .reveal{ opacity:1; transform:none; }
  html{ scroll-behavior:auto; }
}


/* ── ícones ──────────────────────────────── */
/* SVG inline no lugar da webfont Tabler: eram 865 KB
   baixados de um CDN para desenhar 10 ícones. */
.sprite{ position:absolute; width:0; height:0; overflow:hidden; }
.ico{
  width:1.15em; height:1.15em;
  flex-shrink:0;
  display:inline-block;
  vertical-align:-.18em;
}