/* ==================================================
   CLAW DESIGN — STYLE.CSS v3.0
   Fixes: cookie bug, check overflow, cases images,
          processo animation, consent btn, mobile full
================================================== */

/* ─── FONTES: Neue Montreal (local, títulos) + Montserrat (corpo) ── */
/*
  Neue Montreal — coloque os arquivos em assets/fonts/:
    NeueMontreal-Regular.woff2 / NeueMontreal-Medium.woff2
    NeueMontreal-Bold.woff2    / NeueMontreal-ExtraBold.woff2
  Se os arquivos não existirem, o fallback Montserrat é usado automaticamente.
*/
@font-face {
  font-family: 'Neue Montreal';
  src: url('../assets/fonts/NeueMontreal-Regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Neue Montreal';
  src: url('../assets/fonts/NeueMontreal-Medium.woff2') format('woff2');
  font-weight: 500 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Neue Montreal';
  src: url('../assets/fonts/NeueMontreal-Bold.woff2') format('woff2');
  font-weight: 700 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Neue Montreal';
  src: url('../assets/fonts/NeueMontreal-ExtraBold.woff2') format('woff2');
  font-weight: 900; font-style: normal; font-display: swap;
}

/* Variáveis de fonte */
:root {
  --font-display: 'Neue Montreal', 'Montserrat', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  --font-body:    'Montserrat', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
}
:root {
  --bg0: #05060d;
  --bg1: #070a17;
  --bg2: #0b1430;
  --white:  #ffffff;
  --text:   #eef2ff;
  --muted:  #c9d2ff;
  --blue:   #2b6cff;
  --blue2:  #4aa3ff;
  --green:  #22c55e;
  --border:  rgba(255,255,255,.12);
  --border2: rgba(43,108,255,.28);
  --shadow:  0 22px 70px rgba(0,0,0,.45);
  --shadowB: 0 0 70px rgba(43,108,255,.22);
  --r12: 12px; --r16: 16px; --r20: 20px; --r24: 24px; --r28: 28px;
  --container: 1200px;
  --ease: cubic-bezier(.2,.8,.2,1);
  --ring: 0 0 0 4px rgba(43,108,255,.20);
}

/* ─── 2. RESET ───────────────────────────────────── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
html, body { min-height:100%; }
html, body, main { min-width:0; }

body {
  font-family: var(--font-body);
  color: var(--text);
  background-color: var(--bg0);
  background-image:
    radial-gradient(1200px 800px at 20% 10%, rgba(74,163,255,.14), transparent 60%),
    radial-gradient(900px 700px at 80% 30%,  rgba(43,108,255,.12), transparent 55%),
    radial-gradient(700px 600px at 50% 90%,  rgba(255,255,255,.06), transparent 60%),
    linear-gradient(135deg, #05060d 0%, #070a17 40%, #0b1430 100%);
  background-attachment: fixed;
  background-size: cover;
  overflow-x: hidden;
}

/* Títulos usam Neue Montreal (com fallback Montserrat) */
h1, h2, h3, h4, h5, h6,
.hero__title, .section__title, .cta__title,
.card__title, .modal__title, .hcard__title,
.impact__title, .tcard__name, .port-title {
  font-family: var(--font-display);
  letter-spacing: -0.02em;
}
body.is-locked { overflow:hidden; touch-action:none; }

/* Estrelas animadas */
body::before {
  content:""; position:fixed; inset:0; pointer-events:none; z-index:-1;
  background-image:
    radial-gradient(2px 2px at 10% 20%, rgba(255,255,255,.9),  transparent),
    radial-gradient(2px 2px at 20% 80%, rgba(255,255,255,.85), transparent),
    radial-gradient(3px 3px at 30% 40%, rgba(74,163,255,.9),   transparent),
    radial-gradient(2px 2px at 45% 65%, rgba(255,255,255,.8),  transparent),
    radial-gradient(4px 4px at 60% 30%, rgba(43,108,255,.95),  transparent),
    radial-gradient(3px 3px at 70% 75%, rgba(255,255,255,.85), transparent),
    radial-gradient(2px 2px at 85% 50%, rgba(74,163,255,.8),   transparent),
    radial-gradient(3px 3px at 95% 15%, rgba(255,255,255,.9),  transparent);
  background-size: 420px 420px;
  animation: starFast 25s linear infinite;
}
body::after {
  content:""; position:fixed; inset:0; pointer-events:none; z-index:-2;
  background-image:
    radial-gradient(1px   1px   at 15% 25%, rgba(255,255,255,.6),  transparent),
    radial-gradient(1.5px 1.5px at 35% 70%, rgba(74,163,255,.55),  transparent),
    radial-gradient(1px   1px   at 55% 10%, rgba(255,255,255,.6),  transparent),
    radial-gradient(1.5px 1.5px at 75% 90%, rgba(255,255,255,.5),  transparent),
    radial-gradient(1px   1px   at 90% 40%, rgba(74,163,255,.45),  transparent);
  background-size: 600px 600px;
  animation: starSlow 55s linear infinite;
}
@keyframes starFast { to { background-position: 0 2000px; } }
@keyframes starSlow { to { background-position: 0 3500px; } }

a    { color:inherit; text-decoration:none; }
img  { max-width:100%; height:auto; display:block; }
button, input, textarea, select { font-family:inherit; }
:focus         { outline:none; }
:focus-visible { box-shadow:var(--ring); border-radius:12px; }

.container { width:min(calc(100% - 28px), var(--container)); margin:0 auto; }

section, .cards, .portfolio, .testimonials, .impact, .cta, .footer__grid,
.hero__grid, .form__row, .modal__grid { min-width:0; }
.cards > *, .portfolio > *, .testimonials > *, .impact > *, .cta > *,
.footer__grid > *, .hero__grid > *, .form__row > *, .modal__grid > * { min-width:0; }

@media (prefers-reduced-motion:reduce) {
  *, ::before, ::after {
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
}

/* ─── 3. REVEAL ─────────────────────────────────── */
.js .reveal {
  opacity:0; transform:translateY(18px);
  transition: opacity .5s var(--ease), transform .5s var(--ease);
}
.js .reveal.is-visible { opacity:1; transform:translateY(0); }

/* ─── 4. HEADER ─────────────────────────────────── */
.header {
  position:sticky;
  top:max(10px, env(safe-area-inset-top));
  z-index:1200;
  padding:10px 0;
}
.header__row {
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  background:rgba(5,6,13,.55);
  border:1px solid rgba(255,255,255,.10);
  border-radius:var(--r28);
  padding:14px clamp(12px, 1.8vw, 18px);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  box-shadow:0 14px 45px rgba(0,0,0,.35);
  transition:.25s var(--ease);
}
.header.is-scrolled .header__row {
  border-color:rgba(43,108,255,.22);
  box-shadow:0 18px 65px rgba(0,0,0,.55);
}

/* Brand */
.brand { display:flex; align-items:center; gap:10px; flex-shrink:0; min-width:0; }
.brand__mark { display:grid; place-items:center; }
.brand__logo { height:32px; width:auto; }
.brand__sub  { font-weight:900; font-size:12px; color:rgba(231,234,242,.70); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* Nav desktop — centralizado, uma linha, sem quebra */
.nav {
  display:flex; align-items:center; gap:0; flex:1;
  justify-content:center; min-width:0; flex-wrap:nowrap; overflow:hidden;
}
.nav__link {
  padding:9px 14px; border-radius:999px; font-weight:700; font-size:13px;
  color:rgba(231,234,242,.78); transition:.2s var(--ease); white-space:nowrap; flex-shrink:0;
}
.nav__link:hover { color:var(--white); background:rgba(255,255,255,.06); }
.nav__sep {
  color:rgba(255,255,255,.25); font-size:13px; font-weight:300;
  flex-shrink:0; user-select:none; padding:0 2px;
}

/* Header actions */
.header__actions { display:flex; gap:10px; align-items:center; flex-shrink:0; min-width:0; }
.chip {
  display:inline-flex; align-items:center; justify-content:center;
  padding:9px 14px; border-radius:999px; border:1px solid rgba(255,255,255,.14);
  font-weight:900; font-size:12px; transition:.2s var(--ease); white-space:nowrap;
}
.chip--ghost { background:rgba(255,255,255,.04); color:rgba(231,234,242,.90); }
.chip--ghost:hover { border-color:rgba(43,108,255,.35); box-shadow:0 0 35px rgba(43,108,255,.18); }
.chip--primary {
  background:rgba(43,108,255,.95); border-color:rgba(43,108,255,.65);
  color:var(--white); box-shadow:0 0 28px rgba(43,108,255,.35);
}
.chip--primary:hover { transform:translateY(-1px); }

/* Hamburger */
.hamb {
  display:none; width:44px; height:44px; border-radius:12px;
  border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.04);
  cursor:pointer; flex-direction:column; align-items:center; justify-content:center; gap:5px;
}
.hamb span { display:block; width:20px; height:2px; background:rgba(255,255,255,.92); border-radius:10px; transition:.25s var(--ease); }
.hamb.is-active span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.hamb.is-active span:nth-child(2) { opacity:0; }
.hamb.is-active span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }

/* Mobile nav */
.mnav {
  position:fixed; inset:0; background:rgba(0,0,0,.55);
  opacity:0; pointer-events:none; transition:.25s var(--ease); z-index:1300;
}
.mnav.is-open { opacity:1; pointer-events:auto; }
.mnav__panel {
  position:absolute; right:14px;
  top:calc(max(10px, env(safe-area-inset-top)) + 74px);
  width:min(360px, calc(100% - 28px));
  max-height:min(calc(100dvh - 108px), 640px);
  overflow-y:auto; overscroll-behavior:contain;
  background:rgba(9,12,28,.96); border:1px solid rgba(255,255,255,.10);
  border-radius:18px; padding:14px; box-shadow:var(--shadow);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
}
.mnav__link {
  display:block; padding:12px; border-radius:14px; font-weight:700;
  color:rgba(231,234,242,.88); transition:.2s var(--ease);
}
.mnav__link:hover { background:rgba(255,255,255,.06); color:var(--white); }
.mnav__cta {
  width:100%; margin-top:6px; padding:12px; border-radius:14px;
  border:1px solid rgba(43,108,255,.35); background:rgba(43,108,255,.18);
  color:var(--white); font-weight:900; cursor:pointer;
}
.mnav__div { height:1px; background:rgba(255,255,255,.08); margin:10px 0; }

/* ─── 5. HERO ────────────────────────────────────── */
.hero { position:relative; padding:94px 0 66px; overflow:hidden; }
.hero__grid {
  display:grid; grid-template-columns:1.25fr .75fr; gap:22px; align-items:center;
}
.eyebrow {
  display:inline-flex; padding:8px 12px; border-radius:999px;
  border:1px solid rgba(43,108,255,.30); background:rgba(43,108,255,.14);
  color:rgba(255,255,255,.92); font-weight:900; font-size:12px; letter-spacing:.25px;
  box-shadow:0 0 35px rgba(43,108,255,.16);
}
.hero__title {
  margin-top:14px; font-weight:900; letter-spacing:-0.02em;
  line-height:1.06; font-size:clamp(36px, 4.8vw, 70px);
}
.hero__lead {
  margin-top:12px; font-size:clamp(15px, 2vw, 18px);
  color:rgba(231,234,242,.80); max-width:62ch; line-height:1.65;
}
.hero__actions { margin-top:18px; display:flex; gap:12px; flex-wrap:wrap; }

/* Buttons */
.btn {
  display:inline-flex; align-items:center; justify-content:center;
  padding:13px 20px; border-radius:999px; border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.04); font-weight:900; font-size:14px;
  cursor:pointer; transition:.2s var(--ease); color:rgba(255,255,255,.92); text-align:center;
}
.btn:hover { transform:translateY(-2px); }
.btn--primary {
  background:rgba(43,108,255,.95); border-color:rgba(43,108,255,.65);
  box-shadow:0 0 32px rgba(43,108,255,.38); color:var(--white);
}
.btn--primary:hover { box-shadow:0 0 48px rgba(43,108,255,.55); }
.btn--ghost:hover   { border-color:rgba(43,108,255,.35); box-shadow:0 0 40px rgba(43,108,255,.20); }
.btn--subtle        { background:rgba(0,0,0,.12); }
.btn--subtle:hover  { border-color:rgba(255,255,255,.24); }
.w100 { width:100%; }

.hero__stats {
  margin-top:18px; display:grid; grid-template-columns:repeat(3,1fr); gap:12px;
}
.stat {
  padding:14px; border-radius:var(--r20);
  background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.10);
}
.stat strong { display:block; font-weight:900; font-size:14px; }
.stat span   { display:block; margin-top:6px; color:rgba(231,234,242,.70); font-size:12px; }

/* Hero card lateral */
.hero__card {
  padding:22px; border-radius:var(--r24);
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.10);
  box-shadow:var(--shadow); position:relative; overflow:hidden;
}
.hero__card::after {
  content:""; position:absolute; inset:-70px -80px auto auto;
  width:240px; height:240px;
  background:radial-gradient(circle, rgba(43,108,255,.25), transparent 60%);
  opacity:.9; pointer-events:none;
}
.hcard__pill {
  position:relative; z-index:1; display:inline-flex; padding:7px 10px;
  border-radius:999px; background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.12); font-weight:900; font-size:11px;
}
.hcard__title { position:relative; z-index:1; margin-top:10px; font-size:18px; font-weight:900; letter-spacing:-0.01em; }
.hcard__text  { position:relative; z-index:1; margin-top:8px; color:rgba(231,234,242,.74); font-size:14px; line-height:1.65; }
.hcard__mini  { position:relative; z-index:1; margin-top:12px; display:flex; gap:10px; flex-wrap:wrap; color:rgba(231,234,242,.78); font-weight:800; font-size:12px; }

/* ─── 6. SECTIONS ───────────────────────────────── */
.section { padding:86px 0; }
.section--soft {
  background:rgba(255,255,255,.02);
  border-top:1px solid rgba(255,255,255,.06);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.section__head {
  text-align:center; display:flex; flex-direction:column;
  align-items:center; margin-bottom:36px;
}
.section__title {
  font-weight:900; letter-spacing:-0.02em;
  font-size:clamp(28px, 3.2vw, 44px); color:var(--white);
}
.section__sub {
  margin-top:8px; color:rgba(231,234,242,.76); font-size:16px;
  max-width:64ch; line-height:1.65;
}

/* ─── 7. CARDS (Serviços) ───────────────────────── */
.cards {
  display:grid; grid-template-columns:repeat(4, minmax(0,1fr));
  gap:clamp(14px, 1.6vw, 18px);
}
.card {
  text-align:left; border-radius:var(--r24);
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.10);
  box-shadow:0 14px 40px rgba(0,0,0,.30); padding:24px 22px;
  cursor:pointer; transition:.3s var(--ease);
  position:relative; overflow:hidden; color:var(--text);
}
.card:hover { transform:translateY(-8px); border-color:rgba(43,108,255,.32); box-shadow:var(--shadowB); }
.card__tag { display:inline-flex; padding:7px 10px; border-radius:999px; background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.12); font-weight:900; font-size:11px; color:rgba(231,234,242,.92); }
.card__title { margin-top:10px; font-weight:900; font-size:18px; color:var(--white); }
.card__text  { margin-top:8px; color:rgba(231,234,242,.76); font-size:14px; line-height:1.65; }
.card__more  { display:inline-flex; margin-top:14px; font-weight:900; font-size:13px; color:rgba(74,163,255,.92); }

/* ─── 8. CASES / PORTFÓLIO ─────────────────────── */
.portfolio {
  display:grid; grid-template-columns:repeat(4, minmax(0,1fr));
  gap:clamp(14px, 1.6vw, 18px);
}
/* Card com imagem de capa */
.pitem {
  text-align:left; border-radius:var(--r24);
  background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.10);
  box-shadow:0 14px 40px rgba(0,0,0,.26);
  cursor:pointer; transition:.3s var(--ease); color:var(--text);
  overflow:hidden; display:flex; flex-direction:column;
}
.pitem:hover { transform:translateY(-6px); border-color:rgba(43,108,255,.30); box-shadow:0 0 60px rgba(43,108,255,.18); }

/* Imagem de capa do case */
.pitem__cover {
  width:100%; aspect-ratio:16/10;
  object-fit:cover; display:block;
  transition:transform .45s var(--ease), filter .45s var(--ease);
  filter:brightness(.88) saturate(1.1);
  flex-shrink:0;
}
.pitem:hover .pitem__cover { transform:scale(1.04); filter:brightness(1) saturate(1.2); }

.pitem__body { padding:16px 18px 18px; display:flex; flex-direction:column; flex:1; }
.pitem__badge {
  display:inline-flex; padding:7px 10px; border-radius:999px;
  background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.12);
  font-weight:900; font-size:11px; margin-bottom:10px; color:rgba(231,234,242,.92);
  width:fit-content;
}
.pitem strong  { display:block; font-weight:900; font-size:16px; margin-bottom:6px; color:var(--white); }
.pitem__sub    { color:rgba(231,234,242,.72); font-size:13px; }
.pitem__arrow  { margin-top:auto; padding-top:12px; color:rgba(74,163,255,.80); font-size:13px; font-weight:800; }

/* ─── 9. DEPOIMENTOS ────────────────────────────── */
.testimonials {
  display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:clamp(14px, 1.6vw, 18px);
}
.tcard {
  padding:22px; border-radius:var(--r24);
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.10);
  display:flex; flex-direction:column; gap:14px;
}
.tcard__stars  { color:#f59e0b; font-size:16px; letter-spacing:2px; }
.tcard__text   { color:rgba(231,234,242,.82); font-size:14px; line-height:1.7; flex:1; }
.tcard__author { display:flex; align-items:center; gap:10px; }
.tcard__avatar {
  width:40px; height:40px; border-radius:50%; display:grid; place-items:center;
  font-weight:900; font-size:14px; flex-shrink:0;
}
.tcard__avatar--blue   { background:rgba(43,108,255,.25);  color:var(--blue2); }
.tcard__avatar--green  { background:rgba(34,197,94,.20);   color:var(--green); }
.tcard__avatar--purple { background:rgba(139,92,246,.20);  color:#a78bfa; }
.tcard__name { font-weight:900; font-size:13px; color:var(--white); }
.tcard__role { font-size:12px; color:rgba(231,234,242,.60); }

/* ─── 10. PROCESSO — animação divertida ─────────── */
.process {
  position:relative; display:grid;
  grid-template-columns:repeat(5, 1fr);
  gap:12px; padding-top:24px;
}
.process__rail {
  position:absolute; left:10px; right:10px; top:40px;
  height:3px; background:rgba(255,255,255,.10); border-radius:999px; pointer-events:none;
}
.process__progress {
  height:100%; width:0%;
  background:linear-gradient(90deg, rgba(43,108,255,0), rgba(43,108,255,.95), rgba(74,163,255,.95));
  box-shadow:0 0 35px rgba(43,108,255,.45); border-radius:999px;
  transition:width .55s var(--ease);
}
.step {
  border-radius:var(--r20); background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.10); padding:18px 14px 16px;
  display:flex; flex-direction:column; gap:6px;
  cursor:pointer; transition:transform .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease);
  color:var(--text); position:relative; overflow:hidden;
}
/* Onda de ripple ao clicar */
.step::after {
  content:""; position:absolute; inset:0; border-radius:var(--r20);
  background:radial-gradient(circle at 50% 50%, rgba(43,108,255,.35) 0%, transparent 70%);
  opacity:0; transition:opacity .4s var(--ease); pointer-events:none;
}
.step.is-active::after { opacity:1; }
.step:hover { transform:translateY(-5px) scale(1.02); border-color:rgba(43,108,255,.28); box-shadow:0 0 55px rgba(43,108,255,.14); }

/* Ícones/emojis de cada etapa */
.step__icon {
  font-size:22px; line-height:1; margin-bottom:2px;
  display:block;
  transition:transform .4s cubic-bezier(.34,1.56,.64,1);
}
.step:hover .step__icon, .step.is-active .step__icon { transform:scale(1.25) rotate(-5deg); }
.step.is-done .step__icon { transform:scale(1.1); filter:grayscale(0); }

.step__dot {
  width:14px; height:14px; border-radius:50%;
  background:rgba(255,255,255,.18); border:1px solid rgba(255,255,255,.18);
  transition:background .3s, box-shadow .3s, transform .35s cubic-bezier(.34,1.56,.64,1);
}
.step__title { font-weight:900; font-size:14px; color:var(--white); }
.step__sub   { color:rgba(231,234,242,.70); font-weight:700; font-size:12px; }

.step.is-active {
  border-color:rgba(43,108,255,.38);
  box-shadow:0 0 60px rgba(43,108,255,.22);
  transform:translateY(-4px) scale(1.03);
}
.step.is-active .step__dot {
  background:rgba(43,108,255,.95); border-color:rgba(43,108,255,.75);
  box-shadow:0 0 18px rgba(43,108,255,.65);
  transform:scale(1.35);
}
.step.is-done { border-color:rgba(34,197,94,.32); }
.step.is-done .step__dot {
  background:rgba(34,197,94,.95); border-color:rgba(34,197,94,.75);
  box-shadow:0 0 16px rgba(34,197,94,.45);
  transform:scale(1.2);
}

/* Descrição do passo selecionado */
.process__detail {
  margin-top:18px; padding:20px 22px;
  border-radius:var(--r24); border:1px solid rgba(43,108,255,.22);
  background:rgba(43,108,255,.07);
  min-height:80px;
  display:flex; align-items:center; gap:16px;
  animation:slideIn .35s var(--ease);
}
@keyframes slideIn {
  from { opacity:0; transform:translateY(8px); }
  to   { opacity:1; transform:translateY(0); }
}
.process__detail-icon { font-size:32px; flex-shrink:0; }
.process__detail-text strong { display:block; font-weight:900; font-size:16px; color:var(--white); margin-bottom:4px; }
.process__detail-text span   { color:rgba(231,234,242,.75); font-size:14px; line-height:1.65; }

.process__caption {
  margin-top:14px; padding:16px; border-radius:var(--r24);
  border:1px solid rgba(255,255,255,.10); background:rgba(0,0,0,.14);
  display:flex; gap:10px; flex-wrap:wrap; align-items:center;
}
.process__caption strong { font-weight:900; color:var(--white); }
.process__caption span   { color:rgba(231,234,242,.72); }

/* ─── 11. IMPACTO ───────────────────────────────── */
.impact {
  display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:clamp(14px, 1.6vw, 18px);
}
.impact__card {
  text-align:left; border-radius:var(--r24);
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.10);
  box-shadow:0 14px 40px rgba(0,0,0,.30); padding:22px;
  cursor:pointer; transition:.3s var(--ease); color:var(--white);
}
.impact__card:hover { transform:translateY(-6px); border-color:rgba(43,108,255,.30); box-shadow:0 0 60px rgba(43,108,255,.18); }
.impact__kicker { display:block; font-weight:900; font-size:12px; color:var(--blue2); margin-bottom:10px; }
.impact__title  { display:block; font-weight:900; font-size:18px; margin-bottom:10px; color:var(--white); }
.impact__hint   { color:rgba(231,234,242,.70); font-size:13px; }

/* ─── 12. CTA / FORMULÁRIO ──────────────────────── */
.cta {
  display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(16px, 2vw, 22px); align-items:start;
}
.cta__title {
  font-weight:900; letter-spacing:-0.02em;
  font-size:clamp(28px, 3.2vw, 44px); color:var(--white);
}
.cta__lead { margin-top:10px; font-size:16px; color:rgba(231,234,242,.80); line-height:1.7; }
.cta__checks { margin-top:14px; display:grid; gap:10px; }
.check {
  display:flex; gap:10px; align-items:center;
  padding:14px; border-radius:var(--r20);
  border:1px solid rgba(255,255,255,.10); background:rgba(255,255,255,.03);
  font-weight:700; color:rgba(231,234,242,.88);
}
.check > span:first-child {
  width:22px; height:22px; border-radius:8px;
  display:grid; place-items:center;
  background:rgba(34,197,94,.18); border:1px solid rgba(34,197,94,.35);
  color:rgba(34,197,94,.95); font-weight:900; flex-shrink:0;
}

/* Formulário */
.form {
  padding:22px; border-radius:var(--r24);
  border:1px solid rgba(255,255,255,.10); background:rgba(255,255,255,.04);
  box-shadow:0 14px 40px rgba(0,0,0,.28);
}
.form__row { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.field { display:grid; gap:8px; margin-top:12px; }
.field span { font-weight:900; font-size:12px; color:rgba(231,234,242,.92); }
.field input, .field textarea {
  width:100%; padding:13px 14px; border-radius:14px;
  border:1px solid rgba(255,255,255,.10); background:rgba(0,0,0,.18);
  color:var(--white); font-size:14px; transition:.2s var(--ease);
}
.field input:focus, .field textarea:focus {
  outline:none; border-color:rgba(43,108,255,.45); box-shadow:0 0 40px rgba(43,108,255,.18);
}
.field input::placeholder, .field textarea::placeholder { color:rgba(231,234,242,.45); }
.form__note {
  margin-top:12px; color:rgba(231,234,242,.70); font-size:12px; text-align:center;
}

/* ── Checkbox de consentimento — redesenhado ─────── */
.consent-check {
  display:flex; align-items:center; gap:12px;
  margin-top:16px; padding:14px 16px; border-radius:var(--r16);
  border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.03);
  cursor:pointer; user-select:none; transition:.2s var(--ease);
}
.consent-check:hover { border-color:rgba(43,108,255,.28); background:rgba(43,108,255,.05); }
.consent-check input[type="checkbox"] { display:none; }
.consent-check__box {
  width:22px; height:22px; border-radius:8px; flex-shrink:0;
  border:2px solid rgba(255,255,255,.22); background:rgba(0,0,0,.20);
  display:grid; place-items:center; transition:.2s var(--ease);
  position:relative;
}
.consent-check__box::after {
  content:""; width:11px; height:7px;
  border-left:2.5px solid #fff; border-bottom:2.5px solid #fff;
  transform:rotate(-45deg) scale(0);
  transition:transform .2s cubic-bezier(.34,1.56,.64,1);
  margin-top:-2px;
}
.consent-check input:checked ~ .consent-check__box,
.consent-check.is-checked .consent-check__box {
  background:rgba(34,197,94,.85); border-color:rgba(34,197,94,.95);
  box-shadow:0 0 16px rgba(34,197,94,.35);
}
.consent-check input:checked ~ .consent-check__box::after,
.consent-check.is-checked .consent-check__box::after {
  transform:rotate(-45deg) scale(1);
}
.consent-check__text {
  font-size:13px; color:rgba(231,234,242,.80); line-height:1.5;
  flex:1; min-width:0;
}
.consent-check__text a { color:var(--blue2); text-decoration:underline; text-underline-offset:3px; }

/* ─── 13. FOOTER ────────────────────────────────── */
.footer {
  padding:clamp(54px,7vw,72px) 0 32px;
  border-top:1px solid rgba(255,255,255,.08);
}
.footer .container { min-width:0; }
.footer__grid {
  display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) minmax(0,1fr);
  gap:clamp(24px,3vw,48px); align-items:start;
}
.footer__col { min-width:0; }
.footer__logo, .footer__brand {
  display:inline-flex; padding:10px 16px; border-radius:999px;
  border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.04);
  font-weight:900; letter-spacing:.18em; width:fit-content; margin-bottom:12px;
}
.footer__desc, .footer__text {
  color:rgba(231,234,242,.70); font-size:14px; line-height:1.65; max-width:46ch;
}
.footer__meta { margin-top:12px; display:grid; gap:4px; font-size:13px; color:rgba(231,234,242,.65); }
.footer__col h4 { font-size:14px; font-weight:900; margin-bottom:14px; color:var(--white); }
.footer__col h4::after {
  content:""; display:block; width:32px; height:2px;
  background:rgba(43,108,255,.55); margin-top:8px; border-radius:999px;
}
.footer__col a {
  display:block; margin:6px 0; font-size:13px; font-weight:700;
  color:rgba(231,234,242,.76); transition:.2s var(--ease); cursor:pointer;
}
.footer__col a:hover { color:var(--white); transform:translateX(2px); }
.social-links { display:flex; flex-direction:column; gap:8px; }
.social-item {
  display:flex; align-items:center; gap:10px; font-size:13px; font-weight:700;
  color:rgba(231,234,242,.76); transition:.2s var(--ease); cursor:pointer;
}
.social-item:hover { color:var(--white); }
.social-icon { width:18px; height:18px; flex-shrink:0; }
.footer__copy {
  margin-top:clamp(28px,4vw,42px); padding-top:18px;
  border-top:1px solid rgba(255,255,255,.08);
  display:flex; justify-content:center; align-items:center;
  text-align:center; font-size:12px; color:rgba(231,234,242,.55);
}
.footer__legal {
  display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin:20px 0 12px;
}
.footer__legal a, .footer-cookie-btn {
  color:rgba(231,234,242,.72); background:transparent; border:0;
  cursor:pointer; font:inherit; text-decoration:none;
}
.footer-cookie-btn:hover, .footer__legal a:hover { color:#fff; }

/* ─── 14. MODAIS ────────────────────────────────── */
.modal {
  position:fixed; inset:0; display:grid; place-items:center;
  background:rgba(0,0,0,.62); opacity:0; pointer-events:none;
  transition:.25s var(--ease); z-index:3000; padding:14px; overflow-y:auto;
}
.modal.is-open { opacity:1; pointer-events:auto; }
.modal__box {
  width:min(560px, calc(100% - 28px)); border-radius:var(--r24);
  background:rgba(9,12,28,.97); border:1px solid rgba(255,255,255,.12);
  box-shadow:var(--shadow); padding:22px; position:relative;
  animation:pop .35s var(--ease);
  max-height:calc(100dvh - 40px); overflow-y:auto;
}
.modal__box--wide { width:min(980px, calc(100% - 28px)); }
@keyframes pop {
  from { transform:translateY(10px) scale(.985); opacity:0; }
  to   { transform:translateY(0) scale(1); opacity:1; }
}
.modal__x {
  position:absolute; top:10px; right:12px; width:42px; height:42px;
  border-radius:12px; border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.04); color:var(--white); font-size:22px;
  cursor:pointer; display:grid; place-items:center; line-height:1;
}
.modal__title   { font-size:22px; font-weight:900; color:var(--white); padding-right:40px; }
.modal__sub     { margin-top:8px; color:rgba(231,234,242,.74); font-size:14px; line-height:1.65; }
.modal__list    { margin-top:10px; padding-left:18px; display:grid; gap:8px; color:rgba(231,234,242,.82); font-size:14px; line-height:1.65; }
.modal__actions { display:flex; gap:10px; flex-wrap:wrap; margin-top:14px; }
.modal__grid    { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:12px; }
.mblock {
  padding:16px; border-radius:var(--r20);
  border:1px solid rgba(255,255,255,.10); background:rgba(255,255,255,.03);
}
.mblock h4 { font-weight:900; font-size:14px; margin-bottom:8px; color:var(--white); }
.muted { color:rgba(231,234,242,.74); line-height:1.65; font-size:14px; }

/* Galeria */
.gallery { display:grid; grid-template-columns:44px 1fr 44px; gap:10px; align-items:center; margin-top:10px; }
.gallery__frame {
  border-radius:var(--r24); border:1px solid rgba(255,255,255,.10);
  background:rgba(0,0,0,.18); overflow:hidden; box-shadow:0 18px 55px rgba(0,0,0,.55);
  position:relative;
}
.gallery__frame img {
  width:100%; height:360px; object-fit:cover;
  opacity:0; transform:scale(1.01);
  transition:opacity .35s var(--ease), transform .35s var(--ease);
}
.gallery__frame img.is-on { opacity:1; transform:scale(1); }
.gallery__nav {
  width:44px; height:44px; border-radius:14px;
  border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.04);
  color:var(--white); cursor:pointer; font-size:22px; display:grid; place-items:center; flex-shrink:0;
}
.gallery__nav:hover { border-color:rgba(43,108,255,.35); box-shadow:0 0 35px rgba(43,108,255,.20); }
.gallery__frame--landing { position:relative; }
.landing-models { position:absolute; left:16px; bottom:16px; display:flex; gap:10px; z-index:6; flex-wrap:wrap; }
.landing-btn {
  display:inline-flex; align-items:center; padding:8px 14px;
  font-size:13px; font-weight:700; border-radius:999px;
  color:#fff; background:rgba(0,0,0,.65); backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.18); transition:transform .2s ease, background .2s ease, box-shadow .2s ease; white-space:nowrap;
}
.landing-btn:hover { transform:translateY(-2px); background:rgba(43,108,255,.75); box-shadow:0 6px 20px rgba(43,108,255,.35); }

/* ─── 15. BOTÃO WA FLUTUANTE ────────────────────── */
.wa-float {
  position:fixed; bottom:24px; right:24px; z-index:900;
  display:flex; align-items:center; gap:10px; background:#25d366; color:#fff;
  border-radius:999px; padding:14px 18px; font-weight:900; font-size:14px;
  box-shadow:0 8px 32px rgba(37,211,102,.45); transition:transform .2s var(--ease), box-shadow .2s;
  text-decoration:none;
}
.wa-float:hover { transform:translateY(-3px); box-shadow:0 12px 40px rgba(37,211,102,.55); }
.wa-float svg   { width:22px; height:22px; flex-shrink:0; }
@keyframes waPulse {
  0%,100% { box-shadow:0 8px 32px rgba(37,211,102,.45); }
  50%      { box-shadow:0 8px 52px rgba(37,211,102,.75); }
}
.wa-float { animation:waPulse 2.5s ease-in-out infinite; }
.wa-float:hover { animation:none; }

/* ─── 16. COOKIE BANNER — fixed/correto ─────────── */
/* A flag `hidden` no HTML esconde; JS manipula somente a classe .is-visible */
.cookie-banner {
  position:fixed; left:16px; right:16px; bottom:16px; z-index:9998;
  display:grid; grid-template-columns:1.8fr 1fr; gap:16px; align-items:center;
  padding:18px; border-radius:22px;
  background:rgba(7,10,18,.96); border:1px solid rgba(255,255,255,.1);
  box-shadow:0 20px 50px rgba(0,0,0,.35);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  /* Começa escondido via atributo hidden — mas garantimos via display:none */
}
.cookie-banner[hidden] { display:none !important; }
/* Quando JS remove hidden, o banner aparece com transição */
.cookie-banner:not([hidden]) {
  animation: cookieSlide .35s var(--ease);
}
@keyframes cookieSlide {
  from { transform:translateY(20px); opacity:0; }
  to   { transform:translateY(0); opacity:1; }
}
.cookie-banner p { margin:8px 0 0; color:rgba(231,234,242,.78); font-size:14px; line-height:1.55; }
.cookie-banner__actions { display:flex; gap:10px; justify-content:flex-end; flex-wrap:wrap; }

/* ─── 17. UTILITÁRIOS ───────────────────────────── */
.skip-link {
  position:fixed; left:16px; top:-56px; z-index:9999;
  padding:12px 16px; border-radius:12px; background:#fff; color:#08101f;
  font-weight:800; box-shadow:0 10px 30px rgba(0,0,0,.25);
}
.skip-link:focus { top:16px; }
:focus-visible { outline:3px solid rgba(74,163,255,.95); outline-offset:3px; }
.sr-only {
  position:absolute !important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
.lang-switch {
  display:inline-flex; align-items:center; gap:6px; padding:4px;
  border-radius:999px; border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.05);
}
.lang-btn {
  border:0; background:transparent; color:rgba(255,255,255,.72);
  padding:8px 10px; border-radius:999px; font-weight:800; cursor:pointer;
}
.lang-btn.is-active { background:rgba(74,163,255,.18); color:#fff; }

html { scroll-behavior:smooth; }
body { text-rendering:optimizeLegibility; }
img  { max-width:100%; height:auto; }
.section, .footer, .port-section { content-visibility:auto; contain-intrinsic-size:1px 800px; }
.hero, .header, .port-hero { content-visibility:visible; }

/* ─── 18. RESPONSIVO ────────────────────────────── */
@media (max-width:1100px) {
  .cards        { grid-template-columns:repeat(2, minmax(0,1fr)); }
  .portfolio    { grid-template-columns:repeat(2, minmax(0,1fr)); }
  .impact       { grid-template-columns:repeat(2, minmax(0,1fr)); }
  .testimonials { grid-template-columns:repeat(2, minmax(0,1fr)); }
  .hero__grid   { grid-template-columns:1fr; }
  .hero__stats  { grid-template-columns:repeat(3, minmax(0,1fr)); }
  .cta          { grid-template-columns:1fr; }
  .modal__grid  { grid-template-columns:1fr; }
  .footer__grid { grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); }
  .footer__col:last-child { grid-column:1 / -1; }
  .footer__desc, .footer__text { max-width:100%; }
  .process      { grid-template-columns:repeat(3, minmax(0,1fr)); }
  .process__rail { display:none; }
}

@media (max-width:920px) {
  .nav              { display:none; }
  .header__actions  { display:none; }
  .hamb             { display:flex; }
  .header__row      { padding:12px 14px; }
  .brand__sub       { max-width:120px; }
  .form__row        { grid-template-columns:1fr; }
  .gallery__frame img { height:240px; }
  .process          { grid-template-columns:repeat(2, minmax(0,1fr)); }
  .footer__grid     { grid-template-columns:1fr; }
  .cookie-banner    { grid-template-columns:1fr; }
  .lang-switch      { display:none; }
}

@media (max-width:640px) {
  .container      { width:min(calc(100% - 20px), var(--container)); }
  .header__row    { padding:10px 12px; gap:10px; border-radius:22px; }
  .brand__logo    { height:28px; }
  .brand__sub     { font-size:11px; max-width:104px; }
  .hero           { padding:82px 0 54px; }
  .section        { padding:54px 0; }
  .cards          { grid-template-columns:1fr; }
  .portfolio      { grid-template-columns:1fr; }
  .impact         { grid-template-columns:1fr; }
  .testimonials   { grid-template-columns:1fr; }
  .hero__stats    { grid-template-columns:1fr; }
  .process        { grid-template-columns:1fr; }
  .footer__grid   { gap:28px; }
  .footer__copy   { font-size:11px; line-height:1.6; }
  .gallery__frame img { height:200px; }
  .gallery        { grid-template-columns:36px 1fr 36px; }
  .gallery__nav   { width:36px; height:36px; font-size:18px; }
  .landing-models { flex-direction:column; left:12px; bottom:12px; }
  .landing-btn    { font-size:12px; padding:7px 12px; }
  .modal__box     { padding:16px; }
  .modal__grid    { grid-template-columns:1fr; }
  .cta__title     { font-size:28px; }
  .wa-float span  { display:none; }
  .wa-float       { padding:14px; border-radius:50%; right:14px; bottom:14px; }
  .cookie-banner  { left:12px; right:12px; bottom:12px; padding:16px; }
  .cookie-banner .btn { width:100%; justify-content:center; }
  .process__detail { flex-direction:column; text-align:center; }
}

@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *, *::before, *::after {
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important; scroll-behavior:auto !important;
  }
}

/* ─── 19. MODAL PORTFÓLIO — SEM GALERIA ─────────── */
.modal__box--port {
  width: min(560px, calc(100% - 28px));
}
.port-modal__head { margin-bottom: 18px; }
.port-modal__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 4px;
}
.port-modal__list {
  padding-left: 0;
  list-style: none;
  display: grid;
  gap: 10px;
}
.port-modal__list li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(43,108,255,.06);
  border: 1px solid rgba(43,108,255,.14);
  font-size: 14px;
  color: rgba(231,234,242,.88);
}
.port-modal__list li::before {
  content: "✓";
  width: 20px; height: 20px;
  border-radius: 6px;
  background: rgba(34,197,94,.18);
  border: 1px solid rgba(34,197,94,.30);
  color: rgba(34,197,94,.95);
  font-weight: 900;
  font-size: 11px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.port-modal__cta {
  display: flex;
  flex-direction: column;
}
@media (max-width: 540px) {
  .port-modal__grid { grid-template-columns: 1fr; }
}

/* ─── 20. MODAL PRIVACIDADE — scroll obrigatório ── */
.modal__box--privacy {
  width: min(580px, calc(100% - 28px));
  display: flex;
  flex-direction: column;
  max-height: min(85dvh, 700px);
  overflow: hidden; /* o scroll fica no conteúdo interno */
}
.privacy-modal__header {
  flex-shrink: 0;
  padding-right: 40px;
}
.privacy-modal__icon {
  font-size: 24px;
  display: block;
  margin-bottom: 6px;
}

/* Barra de progresso de leitura */
.privacy-progress {
  flex-shrink: 0;
  margin: 14px 0 0;
  height: 6px;
  background: rgba(255,255,255,.08);
  border-radius: 999px;
  overflow: hidden;
  position: relative;
}
.privacy-progress__bar {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--blue), var(--blue2));
  border-radius: 999px;
  transition: width .2s ease;
}
.privacy-progress__label {
  position: absolute;
  right: 0; top: 10px;
  font-size: 11px;
  font-weight: 700;
  color: rgba(231,234,242,.60);
  white-space: nowrap;
}

/* Área de scroll do conteúdo */
.privacy-modal__content {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 16px 4px 16px 0;
  margin: 10px 0 0;
  border-top: 1px solid rgba(255,255,255,.08);
  border-bottom: 1px solid rgba(255,255,255,.08);
  scroll-behavior: smooth;
}
.privacy-modal__content::-webkit-scrollbar { width: 5px; }
.privacy-modal__content::-webkit-scrollbar-track { background: rgba(255,255,255,.04); border-radius: 999px; }
.privacy-modal__content::-webkit-scrollbar-thumb { background: rgba(43,108,255,.40); border-radius: 999px; }
.privacy-modal__content h4 {
  font-weight: 900;
  font-size: 14px;
  color: var(--white);
  margin: 16px 0 8px;
}
.privacy-modal__content h4:first-child { margin-top: 0; }
.privacy-modal__content p {
  font-size: 14px;
  color: rgba(231,234,242,.76);
  line-height: 1.7;
  margin-bottom: 8px;
}

/* Ações */
.privacy-modal__actions {
  flex-shrink: 0;
  padding-top: 14px;
}
.privacy-modal__hint {
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  color: rgba(74,163,255,.80);
  margin-bottom: 10px;
  transition: opacity .3s ease;
}
.privacy-modal__hint.is-done {
  color: rgba(34,197,94,.80);
}
#privAcceptBtn {
  transition: opacity .3s ease, background .2s ease, box-shadow .2s ease;
}
#privAcceptBtn:disabled {
  opacity: .38;
  cursor: not-allowed;
  pointer-events: none;
}
#privAcceptBtn:not(:disabled) {
  animation: pulseAccept .6s var(--ease);
}
@keyframes pulseAccept {
  0%  { transform: scale(1); }
  40% { transform: scale(1.03); box-shadow: 0 0 60px rgba(34,197,94,.45); background: rgba(34,197,94,.90); }
  100%{ transform: scale(1); }
}

/* Link estilizado dentro do checkbox */
.consent-link {
  color: var(--blue2);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  font-weight: 700;
}
.consent-link:hover { color: #fff; }