/* ══════════════════════════════════════════════════════════
   VICTOR AMBROSIO — design system
   Troque as cores no bloco :root e o site inteiro acompanha.
══════════════════════════════════════════════════════════ */

:root{
  /* ---- paleta ---- */
  --ink:      #0B0B0D;   /* fundo principal (escuro)      */
  --ink-2:    #131317;   /* superfície elevada            */
  --ink-3:    #1D1D23;   /* borda / superfície 2          */
  --bone:     #F1EDE2;   /* seção clara + texto no escuro */
  --bone-2:   #DFD9C8;   /* clara alternativa             */
  --acid:     #C6F833;   /* acento                        */
  --acid-dim: #A5D318;

  --txt:      var(--bone);
  --txt-dim:  rgba(241,237,226,.52);
  --txt-dark: var(--ink);
  --txt-dark-dim: rgba(11,11,13,.56);

  /* ---- tipografia ---- */
  --f-disp: "Bricolage Grotesque", "Arial Black", sans-serif;
  --f-body: "Inter Tight", system-ui, sans-serif;
  --f-mono: "JetBrains Mono", ui-monospace, monospace;

  /* ---- espaço ---- */
  --pad:      clamp(1.25rem, 4vw, 5rem);
  --gap:      clamp(1rem, 2vw, 2rem);
  --sec:      clamp(6rem, 14vh, 12rem);
  --maxw:     92rem;
  --r:        .75rem;
  --r-lg:     1.5rem;

  --ease: cubic-bezier(.16,1,.3,1);
}

/* ══════════ RESET ══════════ */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0 }
html{ -webkit-text-size-adjust:100%; scroll-behavior:auto }
/* Sem o flash cinza padrão do toque em links/botões no mobile */
a,button,summary,[role="button"]{ -webkit-tap-highlight-color:transparent }
body{
  background:var(--ink); color:var(--txt);
  font-family:var(--f-body); font-size:clamp(.95rem,1.05vw,1.0625rem);
  line-height:1.55; letter-spacing:-.01em;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
body.is-locked{ overflow:hidden }
img,svg,canvas{ display:block; max-width:100% }
img{ height:auto; object-fit:cover }
a{ color:inherit; text-decoration:none }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer }
ul{ list-style:none }
::selection{ background:var(--acid); color:var(--ink) }

/* ══════════ UTIL ══════════ */
.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad) }

.h2{
  font-family:var(--f-disp); font-weight:700;
  font-size:clamp(2.5rem,6.2vw,5.25rem); line-height:.94;
  letter-spacing:-.035em;
}
.h2--dark{ color:var(--txt-dark) }

.eyebrow{
  display:inline-flex; align-items:center; gap:.5em;
  font-family:var(--f-mono); font-size:.6875rem; font-weight:500;
  text-transform:uppercase; letter-spacing:.16em;
  color:var(--txt-dim);
}
.eyebrow::before{
  content:""; width:.4em; height:.4em; border-radius:50%;
  background:var(--acid); flex:none;
}
.eyebrow b{ color:var(--acid); font-weight:500 }
.eyebrow--dark{ color:var(--txt-dark-dim) }

.lead{ max-width:44ch; color:var(--txt-dim); font-size:clamp(1rem,1.25vw,1.1875rem) }
.lead--dark{ color:var(--txt-dark-dim) }
.lead a{ color:var(--acid); text-decoration:underline; text-underline-offset:.25em }

/* ── split text ── */
.line-mask{ display:block; overflow:hidden }
.char,.word{ display:inline-block; will-change:transform }

/* ══════════ BOTÕES ══════════ */
.btn{
  --bg:transparent; --fg:var(--bone); --bd:rgba(241,237,226,.28);
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  height:3.25rem; padding-inline:1.75rem; border-radius:999px;
  background:var(--bg); color:var(--fg); border:1px solid var(--bd);
  font-family:var(--f-mono); font-size:.75rem; font-weight:500;
  text-transform:uppercase; letter-spacing:.1em; white-space:nowrap;
  overflow:hidden; isolation:isolate;
  transition:background .45s var(--ease), color .45s var(--ease), border-color .45s var(--ease);
}
/* 1.35em, não 1em: com overflow:hidden pro efeito de slide, uma caixa de 1em
   corta as descidas (o "g" de "Agendar") e o texto parece serrado na base. */
.btn__t{ position:relative; display:block; overflow:hidden; height:1.35em; line-height:1.35em }
.btn__t i{
  display:block; font-style:normal; height:1.35em; line-height:1.35em;
  transition:transform .5s var(--ease);
}
.btn__t i:last-child{ position:absolute; inset:0; transform:translateY(110%) }
.btn:hover .btn__t i{ transform:translateY(-110%) }
.btn:hover .btn__t i:last-child{ transform:translateY(0) }

.btn--acid{ --bg:var(--acid); --fg:var(--ink); --bd:var(--acid) }
.btn--acid:hover{ --bg:var(--bone); --bd:var(--bone) }
.btn--ghost:hover{ --bg:rgba(241,237,226,.08); --bd:rgba(241,237,226,.5) }
.btn--line{ --bd:rgba(241,237,226,.24) }
.btn--line:hover{ --bg:var(--bone); --fg:var(--ink); --bd:var(--bone) }
.btn--big{ height:4.25rem; padding-inline:2.75rem; font-size:.8125rem; --bg:var(--acid); --fg:var(--ink); --bd:var(--acid) }
.btn--wa{ gap:.7rem }
.btn__ico{ width:1.25em; height:1.25em; flex:none }
.btn--big:hover{ --bg:var(--bone); --bd:var(--bone) }

/* ══════════ PRELOADER ══════════ */
.preloader{
  position:fixed; inset:0; z-index:9999; background:var(--ink);
  display:grid; place-items:center;
}
.preloader__inner{ width:min(22rem,60vw); text-align:center }
.preloader__count{
  font-family:var(--f-disp); font-weight:700;
  font-size:clamp(3rem,10vw,6rem); line-height:1; letter-spacing:-.05em;
}
.preloader__count i{ font-style:normal; font-size:.3em; vertical-align:super; color:var(--acid) }
.preloader__bar{ margin-top:1.25rem; height:2px; background:rgba(241,237,226,.14); overflow:hidden }
.preloader__bar span{ display:block; height:100%; width:0; background:var(--acid) }
.preloader.is-done{ pointer-events:none }

/* ══════════ CURSOR ══════════ */
.cursor{
  position:fixed; top:0; left:0; z-index:9000; pointer-events:none;
  width:12px; height:12px; border-radius:999px; background:var(--acid);
  display:grid; place-items:center; mix-blend-mode:difference;
  transform:translate(-50%,-50%); opacity:0;
  transition:width .4s var(--ease), height .4s var(--ease), background .3s;
}
.cursor.is-on{ opacity:1 }
.cursor.is-big{ width:5.5rem; height:5.5rem; mix-blend-mode:normal }
.cursor__label{
  font-family:var(--f-mono); font-size:.625rem; text-transform:uppercase;
  letter-spacing:.08em; color:var(--ink); opacity:0; white-space:nowrap;
  transition:opacity .25s;
}
.cursor.is-big .cursor__label{ opacity:1 }
@media (hover:none){ .cursor{ display:none } }

/* ══════════ NAV ══════════ */
.nav{
  position:fixed; top:0; left:0; width:100%; z-index:500;
  padding:1rem var(--pad); pointer-events:none;
  opacity:0; transform:translateY(-100%);
}
.nav.is-on{ pointer-events:auto }
.nav__inner{
  display:flex; align-items:center; gap:1rem;
  padding:.5rem .5rem .5rem .5rem; border-radius:999px;
  background:rgba(19,19,23,.72); backdrop-filter:blur(18px);
  border:1px solid rgba(241,237,226,.09);
}
.nav__logo{
  display:inline-flex; align-items:center; flex:none;
  height:2.75rem; padding-inline:1.15rem; border-radius:999px;
  background:var(--acid); color:var(--ink);
  font-family:var(--f-disp); font-weight:800; font-size:.9375rem; letter-spacing:-.03em;
  white-space:nowrap; transition:transform .4s var(--ease);
}
.nav__logo:hover{ transform:scale(1.05) }
.nav__links{
  display:flex; align-items:center; gap:.75rem; margin-inline:auto;
  font-family:var(--f-mono); font-size:.6875rem; text-transform:uppercase; letter-spacing:.1em;
}
.nav__links a{ color:var(--txt-dim); transition:color .3s; padding:.25rem 0 }
.nav__links a:hover,.nav__links a.is-active{ color:var(--bone) }
.nav__links i{ width:3px; height:3px; border-radius:50%; background:rgba(241,237,226,.22) }
.nav__cta{
  flex:none; display:inline-flex; align-items:center; gap:.5rem;
  height:2.75rem; padding-inline:1.25rem; border-radius:999px;
  border:1px solid rgba(241,237,226,.2);
  font-family:var(--f-mono); font-size:.6875rem; text-transform:uppercase; letter-spacing:.08em;
  transition:background .35s var(--ease), color .35s var(--ease);
}
.nav__cta span{ transition:transform .35s var(--ease) }
.nav__cta:hover{ background:var(--bone); color:var(--ink) }
.nav__cta:hover span{ transform:translateX(4px) }
.nav__burger{ display:none; flex:none; width:2.75rem; height:2.75rem; border-radius:999px;
  border:1px solid rgba(241,237,226,.2); place-items:center; gap:5px; flex-direction:column }
.nav__burger i{ display:block; width:16px; height:1.5px; background:var(--bone); transition:transform .4s var(--ease) }
.nav__burger.is-x i:nth-child(1){ transform:translateY(3.25px) rotate(45deg) }
.nav__burger.is-x i:nth-child(2){ transform:translateY(-3.25px) rotate(-45deg) }

/* ══════════ MENU MOBILE ══════════ */
.menu{
  position:fixed; inset:0; z-index:490; background:var(--ink-2);
  display:flex; flex-direction:column; justify-content:center; gap:2rem;
  padding:var(--pad); clip-path:inset(0 0 100% 0); pointer-events:none;
}
.menu.is-open{ pointer-events:auto }
.menu__links{ display:flex; flex-direction:column; gap:.25rem }
.menu__links a{ overflow:hidden; display:block }
.menu__links a span{
  display:block; font-family:var(--f-disp); font-weight:700;
  font-size:clamp(2.25rem,11vw,4rem); line-height:1.05; letter-spacing:-.04em;
  transform:translateY(110%);
}
.menu__links a:hover span{ color:var(--acid) }
.menu__foot{ display:flex; flex-direction:column; gap:.35rem; font-family:var(--f-mono); font-size:.8125rem; color:var(--txt-dim) }

/* ══════════════════════════════════════════════
   HERO
══════════════════════════════════════════════ */
.hero{
  position:relative; height:260vh;
  /* Largura da foto num único lugar: o título se posiciona a partir dela.
     No arquivo recortado o rosto termina a 40% da altura, e altura = largura
     / 0.8339 — então o queixo fica a (largura * 0.72) acima da base do hero. */
  --photo-w:min(72vh,56vw);
  --face-bottom:calc(100% - var(--photo-w) * 0.72);
}
.hero__sticky{
  position:sticky; top:0; height:100vh; overflow:hidden;
  display:flex; flex-direction:column;
}
.hero__gl{ position:absolute; inset:0; width:100%; height:100%; z-index:0 }
.hero__grain{
  position:absolute; inset:0; z-index:1; pointer-events:none; opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E");
  mix-blend-mode:overlay;
}

/* foto — ocupa a altura toda e fica centralizada, como no original.
   O rosto precisa terminar ACIMA do título: com altura 97% alinhada embaixo,
   a cabeça (10%–59% da imagem) cai entre 13% e 60% da altura do hero. */
.hero__photo-wrap{
  position:absolute; z-index:2; inset:0; pointer-events:none;
}
/* Escurece só o rodapé da foto, onde entram o título e os botões.
   Linear de baixo pra cima em vez de radial no meio: o rosto fica intacto. */
.hero__photo-wrap::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, transparent 46%, rgba(11,11,13,.55) 68%, rgba(11,11,13,.82) 100%);
}
/* Largura em vh (não height:%): dentro de um grid, `width:auto` + aspect-ratio
   deixa o tamanho intrínseco do PNG (1024px) dirigir a caixa e a altura estoura.
   64vh de largura → ~96vh de altura pela proporção 1024/1536. */
/* Absoluto em vez de item de grid: `place-items:end` não garantiu o encosto
   embaixo e a foto sobrava 7% pra fora do hero. */
.hero__photo{
  /* margin-inline:auto em vez de translateX(-50%): o GSAP anima o transform
     desta caixa e sobrescreveria a centralização. */
  position:absolute; bottom:0; left:0; right:0; margin-inline:auto;
  /* Proporção do arquivo já recortado (1024x1228). */
  width:var(--photo-w); aspect-ratio:1024/1228;
  -webkit-mask-image:linear-gradient(180deg,#000 88%,transparent 100%);
          mask-image:linear-gradient(180deg,#000 88%,transparent 100%);
}
.hero__photo picture{ display:block; width:100%; height:100% }
/* Sem grayscale: a luz de contorno laranja é o que a foto tem de melhor e faz
   o contraste quente contra o verde do acento. Dessaturar jogaria isso fora. */
.hero__photo img{ width:100%; height:100%; object-fit:contain; object-position:bottom center }
.hero__photo-fallback{
  display:none; position:absolute; inset:0; place-content:center; text-align:center; gap:.35rem;
  border:1px dashed rgba(241,237,226,.2); border-radius:var(--r-lg);
  font-family:var(--f-mono); font-size:.6875rem; color:var(--txt-dim); padding:1rem;
}
.hero__photo-fallback b{ color:var(--acid); font-weight:500; word-break:break-all }
.hero__photo.is-empty picture{ display:none }
.hero__photo.is-empty .hero__photo-fallback{ display:grid }

/* marca d'água gigante — ocupa a largura inteira, atrás da foto.
   textLength no SVG garante que "AMBROSIO" preencha exatamente a caixa em
   qualquer viewport, sem precisar acertar font-size em vw no chute. */
.hero__wordmark{
  position:absolute; z-index:1; left:var(--pad); right:var(--pad);
  top:clamp(1rem,4vh,3rem); pointer-events:none;
}
/* Largura total sempre: é o que faz a palavra passar por trás da cabeça.
   Limitar a altura aqui encolhia e centralizava a marca, matando o efeito. */
.hero__wordmark svg{ width:100%; height:auto; overflow:visible }
/* 207px é a medida em que "AMBROSIO" já ocupa ~1000 naturalmente, então o
   textLength do SVG não precisa esticar glifo nenhum pra encaixar. */
.hero__wordmark-t{
  font-family:var(--f-disp); font-weight:800; font-size:207px;
  fill:var(--acid);
}

/* banda do meio: nav fantasma e cards contornando a foto */
/* Ancorada embaixo: mantém os cards e a nav na altura do rosto, não empurrados
   pra baixo junto com o título. */
.hero__band{
  position:absolute; z-index:4; bottom:22%; left:var(--pad); right:var(--pad);
  display:flex; align-items:flex-start; justify-content:space-between; gap:2rem;
  pointer-events:none;
}
.hero__band-side{ display:flex; flex-direction:column; gap:.75rem; align-items:flex-start }
.hero__band-side--r{ align-items:flex-end }
/* A banda é pointer-events:none pra não bloquear a foto; os filhos interativos
   reativam. */
.hero__band .stat,.hero__band .traits{ pointer-events:auto }

/* título — bem menor que antes e posicionado abaixo do rosto */
.hero__center{
  /* Ancorado no queixo, não numa % fixa: em janela mais estreita a foto encolhe
     e o rosto desce — com top fixo o título subia por cima da cara. */
  position:absolute; z-index:5; top:calc(var(--face-bottom) + 7vh);
  left:var(--pad); right:var(--pad);
  /* Respiro maior entre título e botões: empurra o CTA pra baixo e deixa mais
     espaço livre em volta do rosto e do pescoço. */
  display:grid; gap:clamp(1.25rem,4.5vh,3rem); justify-items:center; text-align:center;
  pointer-events:none;
}
.hero__title{
  font-family:var(--f-disp); font-weight:800;
  font-size:clamp(1.75rem,4.2vw,4.25rem); line-height:.92;
  letter-spacing:-.045em;
}
/* Filho direto só: `.hero__title span` pegaria também os .char do split e,
   com especificidade maior que .char, os tornaria block (uma letra por linha). */
.hero__title > span{ display:block; white-space:nowrap }
.hero__actions{ display:flex; flex-wrap:wrap; gap:.75rem; justify-content:center; pointer-events:auto }

/* rodapé do hero */
.hero__foot{
  position:absolute; z-index:5; bottom:clamp(1rem,3.5vh,2.25rem);
  left:var(--pad); right:var(--pad);
  /* flex-end: sobrou só o texto da direita, e com space-between ele iria
     parar do lado esquerdo. */
  display:flex; align-items:flex-end; justify-content:flex-end; gap:2rem;
}
.hero__side{ min-width:0; max-width:24ch; font-size:.875rem; line-height:1.5; color:var(--txt-dim) }
.hero__side--r{ text-align:right; max-width:32ch }

/* cards */
.stat{
  position:relative; width:clamp(6rem,8.5vw,7.5rem); min-height:clamp(6rem,8.5vw,7.5rem);
  border-radius:var(--r-lg); overflow:hidden; padding:.9rem;
  display:flex; flex-direction:column; justify-content:space-between; gap:.75rem;
  border:1px solid rgba(241,237,226,.1);
  transition:transform .5s var(--ease);
}
.stat__bg{ position:absolute; inset:0; background:rgba(241,237,226,.05); backdrop-filter:blur(14px) }
.stat--alt .stat__bg{ background:var(--acid) }
.stat--alt{ color:var(--ink); border-color:var(--acid) }
.stat__icon{ position:relative; font-size:1.125rem; opacity:.5 }
.stat__txt{ position:relative; font-family:var(--f-disp); font-weight:700; font-size:clamp(.9rem,1.15vw,1.0625rem); line-height:1.1; letter-spacing:-.02em }
.stat__txt b{ display:block; font-size:clamp(1.75rem,3vw,2.75rem); line-height:.9; letter-spacing:-.04em }
.stat:hover{ transform:translateY(-6px) }

.traits{
  display:grid; gap:.45rem; padding:1rem 1.25rem; border-radius:var(--r-lg);
  border:1px solid rgba(241,237,226,.1); background:rgba(241,237,226,.05);
  backdrop-filter:blur(14px);
}
.traits li{
  display:flex; align-items:center; gap:.6rem;
  font-family:var(--f-disp); font-weight:700;
  font-size:clamp(.8125rem,1.05vw,1rem); letter-spacing:-.02em; line-height:1;
}
.traits li i{ font-style:normal; color:var(--acid); font-size:.8em; flex:none }

/* ══════════ MARQUEE ══════════ */
.marquee{
  position:relative; z-index:6; overflow:hidden; background:var(--acid); color:var(--ink);
  padding:.85rem 0; border-block:1px solid var(--ink);
}
.marquee__track{ display:flex; width:max-content }
.marquee__track span{
  font-family:var(--f-disp); font-weight:700; font-size:clamp(1rem,1.8vw,1.5rem);
  letter-spacing:-.02em; text-transform:uppercase; white-space:nowrap; padding-right:1rem;
}
.marquee__track b{ font-size:.6em; vertical-align:middle; opacity:.55; padding-inline:.4em }

/* ══════════════════════════════════════════════
   SOBRE / JORNADA
══════════════════════════════════════════════ */
.about{ position:relative; z-index:6; background:var(--ink); padding-block:var(--sec) }
.about__head{ display:grid; gap:1.25rem; max-width:60rem; margin-bottom:clamp(3rem,8vh,6rem) }

.timeline{ position:relative; display:grid; gap:clamp(2rem,5vh,4rem); padding-left:clamp(2.5rem,7vw,7rem) }
.timeline__line{
  position:absolute; left:clamp(.75rem,2.4vw,2.5rem); top:.5rem; bottom:.5rem; width:1px;
  background:rgba(241,237,226,.12);
}
.timeline__line i{ position:absolute; inset:0 auto 0 0; width:100%; height:0; background:var(--acid); display:block }

.tl{ position:relative; display:grid; grid-template-columns:auto 1fr; gap:clamp(1rem,3vw,2.5rem); align-items:start }
.tl__year{
  position:absolute; left:calc(-1 * clamp(2.5rem,7vw,7rem)); top:0;
  width:clamp(1.5rem,4.8vw,5rem); display:grid; place-items:center;
}
.tl__year span{
  font-family:var(--f-disp); font-weight:700; font-size:clamp(1rem,2vw,1.75rem);
  letter-spacing:-.03em; color:var(--txt-dim); transition:color .4s;
}
.tl.is-in .tl__year span{ color:var(--acid) }

.tl__card{
  grid-column:1/-1; position:relative; padding:clamp(1.25rem,2.5vw,2rem);
  border-radius:var(--r-lg); background:var(--ink-2);
  border:1px solid rgba(241,237,226,.08);
  max-width:46rem; transition:border-color .4s, transform .5s var(--ease);
}
.tl__card:hover{ border-color:rgba(198,248,51,.4) }
.tl__card h3{
  font-family:var(--f-disp); font-weight:700; font-size:clamp(1.25rem,2.2vw,1.875rem);
  letter-spacing:-.03em; line-height:1.05; margin-bottom:.5rem;
}
.tl__card > p{ color:var(--txt-dim); max-width:48ch }
.tl__meta{
  display:flex; align-items:center; gap:.75rem; margin-top:1rem;
  font-family:var(--f-mono); font-size:.6875rem; color:var(--txt-dim);
}
.tag{
  display:inline-block; padding:.2rem .6rem; border-radius:999px;
  background:rgba(198,248,51,.12); color:var(--acid);
  font-family:var(--f-mono); font-size:.6875rem; letter-spacing:.02em;
}
.tl__more{
  display:inline-flex; align-items:center; gap:.4rem; margin-top:1rem;
  font-family:var(--f-mono); font-size:.6875rem; text-transform:uppercase; letter-spacing:.1em;
  color:var(--txt-dim); transition:color .3s;
}
.tl__more:hover{ color:var(--acid) }
.tl__more i{ font-style:normal; transition:transform .4s var(--ease) }
.tl__card.is-open .tl__more i{ transform:rotate(45deg) }
.tl__body{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .55s var(--ease) }
.tl__body > p{ overflow:hidden; color:var(--txt-dim); max-width:56ch }
.tl__card.is-open .tl__body{ grid-template-rows:1fr }
.tl__card.is-open .tl__body > p{ padding-top:1rem; border-top:1px solid rgba(241,237,226,.1); margin-top:1rem }
.tl__body b{ color:var(--bone); font-weight:600 }

/* ══════════════════════════════════════════════
   PROJETOS (claro)
══════════════════════════════════════════════ */
/* Arredondado nas quatro pontas: o bloco claro vira um cartão sobre o escuro,
   em vez de terminar num corte reto. */
.work{
  position:relative; z-index:6; background:var(--bone); color:var(--txt-dark);
  padding-block:var(--sec); border-radius:clamp(1.5rem,3vw,2.5rem);
}
.work__head{ display:grid; gap:1.25rem; max-width:56rem; margin-bottom:clamp(3rem,8vh,5rem) }
.work__head .eyebrow::before{ background:var(--ink) }

.work__list{ border-top:1px solid rgba(11,11,13,.14) }
.wk{
  position:relative; display:grid; align-items:center; gap:.35rem 2rem;
  grid-template-columns:auto 1fr auto; grid-template-areas:"num title tags" "num desc go";
  padding:clamp(1.5rem,3vw,2.25rem) 0;
  border-bottom:1px solid rgba(11,11,13,.14);
  isolation:isolate; overflow:hidden;
}
.wk::before{
  content:""; position:absolute; inset:0; z-index:-1; background:var(--ink);
  transform:translateY(101%); transition:transform .6s var(--ease);
}
.wk:hover::before{ transform:translateY(0) }
.wk:hover{ color:var(--bone) }
.wk:hover .wk__num,.wk:hover .wk__desc{ color:rgba(241,237,226,.55) }
.wk:hover .wk__tags i{ border-color:rgba(241,237,226,.3); color:rgba(241,237,226,.8) }
.wk:hover .wk__go{ color:var(--acid) }
.wk > *{ padding-inline:clamp(.5rem,1.5vw,1.5rem) }

.wk__num{ grid-area:num; font-family:var(--f-mono); font-size:.75rem; color:var(--txt-dark-dim); align-self:start; padding-top:.35rem }
.wk__title{ grid-area:title; font-family:var(--f-disp); font-weight:700; font-size:clamp(1.75rem,4.5vw,3.5rem); line-height:1; letter-spacing:-.04em }
.wk__desc{ grid-area:desc; color:var(--txt-dark-dim); max-width:52ch; font-size:.9375rem }
.wk__desc i{ font-style:italic }
.wk__tags{ grid-area:tags; display:flex; gap:.4rem; justify-self:end; flex-wrap:wrap; justify-content:flex-end }
.wk__tags i{
  font-style:normal; padding:.25rem .7rem; border-radius:999px;
  border:1px solid rgba(11,11,13,.2); font-family:var(--f-mono); font-size:.6875rem;
  transition:border-color .4s,color .4s;
}
.wk__go{
  grid-area:go; justify-self:end; align-self:end;
  font-family:var(--f-mono); font-size:.6875rem; text-transform:uppercase; letter-spacing:.1em;
  display:inline-flex; gap:.5rem; align-items:center; white-space:nowrap;
}
.wk__go b{ transition:transform .4s var(--ease) }
.wk:hover .wk__go b{ transform:translateX(5px) }

.wk-preview{
  position:fixed; z-index:400; top:0; left:0; width:22rem; aspect-ratio:16/9;
  border-radius:var(--r); overflow:hidden; pointer-events:none;
  opacity:0; transform:translate(-50%,-50%) scale(.9);
}
.wk-preview img{ width:100%; height:100%; object-fit:cover }
@media (hover:none){ .wk-preview{ display:none } }

/* ══════════════════════════════════════════════
   O QUE VOCÊ RECEBE
══════════════════════════════════════════════ */
.cap{ position:relative; z-index:6; background:var(--bone); color:var(--txt-dark); padding-block:var(--sec) }
.cap__top{ display:flex; align-items:flex-end; justify-content:space-between; gap:2rem; flex-wrap:wrap }
.cap__top .eyebrow::before{ background:var(--ink) }
.cap__top .eyebrow{ color:var(--txt-dark-dim) }
.cap__big{
  font-family:var(--f-disp); font-weight:800;
  font-size:clamp(3rem,10vw,9rem); line-height:.85; letter-spacing:-.055em;
}
.cap__statement{
  margin-block:clamp(2.5rem,7vh,5rem);
  font-family:var(--f-disp); font-weight:500;
  font-size:clamp(1.375rem,3.4vw,2.75rem); line-height:1.18; letter-spacing:-.035em;
  max-width:34ch;
}
.cap__statement .word{ transition:color .3s }

.cap__list{ display:grid; gap:0; border-top:1px solid rgba(11,11,13,.14) }
.cap__item{
  display:grid; grid-template-columns:auto minmax(0,18rem) 1fr; gap:1rem 2rem; align-items:baseline;
  padding-block:clamp(1.25rem,2.4vw,1.75rem); border-bottom:1px solid rgba(11,11,13,.14);
  transition:padding-left .5s var(--ease);
}
.cap__item:hover{ padding-left:1rem }
.cap__idx{ font-family:var(--f-mono); font-size:.75rem; color:var(--txt-dark-dim) }
.cap__item h3{ font-family:var(--f-disp); font-weight:700; font-size:clamp(1.125rem,2vw,1.625rem); letter-spacing:-.03em; line-height:1.1 }
.cap__item p{ color:var(--txt-dark-dim); max-width:52ch; font-size:.9375rem }

/* ══════════════════════════════════════════════
   SERVIÇOS
══════════════════════════════════════════════ */
/* Sem raio no topo e sem sobreposição: senão a curva daqui brigaria com a
   curva de baixo da seção clara e as duas se cancelariam visualmente. */
.svc{
  position:relative; z-index:6; background:var(--ink); padding-block:var(--sec);
}
.svc__head{ display:grid; gap:1.25rem; max-width:56rem; margin-bottom:clamp(3rem,8vh,5rem) }
.svc__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; align-items:start }

.plan{
  position:relative; display:flex; flex-direction:column; gap:1.5rem;
  padding:clamp(1.5rem,2.5vw,2.25rem); border-radius:var(--r-lg);
  background:var(--ink-2); border:1px solid rgba(241,237,226,.08);
  transition:border-color .5s var(--ease), transform .6s var(--ease);
  height:100%;
}
.plan:hover{ border-color:rgba(241,237,226,.22); transform:translateY(-6px) }
.plan--feature{ background:var(--ink-3); border-color:rgba(198,248,51,.35) }
.plan--feature:hover{ border-color:var(--acid) }
.plan__flag{
  position:absolute; top:1rem; right:1rem;
  padding:.25rem .7rem; border-radius:999px; background:var(--acid); color:var(--ink);
  font-family:var(--f-mono); font-size:.625rem; text-transform:uppercase; letter-spacing:.1em;
}
.plan__head h3{ font-family:var(--f-disp); font-weight:700; font-size:clamp(1.25rem,2vw,1.625rem); letter-spacing:-.03em }
.plan__price{ margin-top:1rem; display:flex; align-items:baseline; gap:.5rem; flex-wrap:wrap }
.plan__price b{ font-family:var(--f-disp); font-weight:800; font-size:clamp(2rem,3.6vw,3rem); letter-spacing:-.045em; line-height:1 }
.plan__price span{ font-family:var(--f-mono); font-size:.6875rem; color:var(--txt-dim) }
.plan__desc{ color:var(--txt-dim); font-size:.9375rem }
.plan__list{ display:grid; gap:.65rem; padding-top:1.25rem; border-top:1px solid rgba(241,237,226,.1) }
.plan__list li{ position:relative; padding-left:1.5rem; font-size:.9375rem; color:var(--txt-dim) }
.plan__list li::before{
  content:"→"; position:absolute; left:0; top:0; color:var(--acid);
  font-family:var(--f-mono); font-size:.8125rem;
}
.plan__foot{ margin-top:auto; display:grid; gap:1rem; padding-top:1.25rem; border-top:1px solid rgba(241,237,226,.1) }
.plan__foot p{ font-size:.8125rem; color:var(--txt-dim) }
.plan__foot .btn{ width:100% }

/* ══════════════════════════════════════════════
   CTA
══════════════════════════════════════════════ */
.cta{ position:relative; z-index:6; background:var(--ink); padding-block:var(--sec); overflow:hidden }
.cta__gl{ position:absolute; inset:0; width:100%; height:100%; opacity:.85 }
.cta .wrap{ position:relative; z-index:2; display:grid; gap:2rem; justify-items:center; text-align:center }
.cta__title{
  font-family:var(--f-disp); font-weight:800;
  font-size:clamp(2.5rem,8vw,7rem); line-height:.9; letter-spacing:-.05em;
}
.cta__title > span{ display:block; white-space:nowrap }
.cta__title em{
  font-style:normal; color:var(--acid); display:inline-block; min-width:5ch;
}
.cta__desc{ max-width:52ch; color:var(--txt-dim) }
.cta__actions{ display:grid; gap:1rem; justify-items:center; margin-top:1rem }
.cta__hint{ font-family:var(--f-mono); font-size:.6875rem; text-transform:uppercase; letter-spacing:.14em; color:var(--txt-dim) }

/* ══════════════════════════════════════════════
   DEPOIMENTOS
══════════════════════════════════════════════ */
/* Arredondado só no topo, sobre o CTA. Uma superfície um passo acima do fundo
   pra curva ter contra o que aparecer — no mesmo tom ela seria invisível. */
.tst{
  position:relative; z-index:6; background:var(--ink-2); padding-block:var(--sec);
  border-radius:clamp(1.5rem,3vw,2.5rem) clamp(1.5rem,3vw,2.5rem) 0 0;
}
.tst__head{ display:grid; gap:1.25rem; margin-bottom:clamp(2.5rem,6vh,4rem) }
.tst__viewport{ overflow:hidden; cursor:grab; padding-inline:var(--pad) }
.tst__viewport.is-drag{ cursor:grabbing }
.tst__track{ display:flex; gap:1rem; width:max-content; will-change:transform }
.quote{
  width:min(26rem,80vw); flex:none; display:flex; flex-direction:column; gap:1.25rem;
  padding:clamp(1.5rem,2.5vw,2rem); border-radius:var(--r-lg);
  background:var(--ink-2); border:1px solid rgba(241,237,226,.08);
  transition:border-color .4s;
}
.quote:hover{ border-color:rgba(198,248,51,.35) }
.quote h3{
  font-family:var(--f-disp); font-weight:700; font-size:clamp(1.125rem,1.9vw,1.5rem);
  letter-spacing:-.03em; line-height:1.1; color:var(--acid);
}
.quote blockquote{ color:var(--txt-dim); font-size:.9375rem; flex:1 }
.quote figcaption{ display:grid; gap:.15rem; padding-top:1.25rem; border-top:1px solid rgba(241,237,226,.1) }
.quote figcaption b{ font-weight:600; font-size:.9375rem }
.quote figcaption span,.quote figcaption i{ font-style:normal; font-family:var(--f-mono); font-size:.6875rem; color:var(--txt-dim) }
.tst__hint{
  display:flex; align-items:center; justify-content:center; gap:.75rem; margin-top:2rem;
  font-family:var(--f-mono); font-size:.625rem; text-transform:uppercase; letter-spacing:.16em; color:var(--txt-dim);
}
.tst__hint i{ width:2rem; height:1px; background:currentColor }

/* ══════════════════════════════════════════════
   FAQ
══════════════════════════════════════════════ */
/* Mesmo tom da seção de clientes: as duas formam um painel único elevado
   até o rodapé, em vez de alternar tom a cada bloco. */
.faq{ position:relative; z-index:6; background:var(--ink-2); padding-block:var(--sec) }
.faq__wrap{ display:grid; grid-template-columns:minmax(0,22rem) 1fr; gap:clamp(2rem,6vw,5rem); align-items:start }
.faq__head{ display:grid; gap:1.25rem; position:sticky; top:7rem }
.faq__list{ border-top:1px solid rgba(241,237,226,.12) }

.ac{ border-bottom:1px solid rgba(241,237,226,.12) }
.ac summary{
  display:flex; align-items:center; justify-content:space-between; gap:1.5rem;
  padding-block:clamp(1.1rem,2vw,1.5rem); cursor:pointer; list-style:none;
  transition:color .3s;
}
.ac summary::-webkit-details-marker{ display:none }
.ac summary span{
  font-family:var(--f-disp); font-weight:500; font-size:clamp(1rem,1.7vw,1.375rem);
  letter-spacing:-.025em; line-height:1.2;
}
.ac summary:hover{ color:var(--acid) }
.ac summary i{
  position:relative; flex:none; width:1.25rem; height:1.25rem;
}
.ac summary i::before,.ac summary i::after{
  content:""; position:absolute; inset:50% 0 auto 0; height:1.5px; background:currentColor;
  transition:transform .45s var(--ease);
}
.ac summary i::after{ transform:rotate(90deg) }
.ac[open] summary i::after{ transform:rotate(0) }
.ac[open] summary{ color:var(--acid) }
.ac__body{ overflow:hidden }
.ac__body p{ padding-bottom:1.5rem; color:var(--txt-dim); max-width:60ch }

/* ══════════════════════════════════════════════
   FOOTER
══════════════════════════════════════════════ */
.foot{ position:relative; z-index:6; background:var(--ink-2); padding-top:var(--sec) }
.foot__top{ display:grid; grid-template-columns:1fr auto; gap:3rem; align-items:start; padding-bottom:clamp(3rem,8vh,5rem) }
.foot__mail{
  font-family:var(--f-disp); font-weight:700;
  font-size:clamp(1.375rem,3.6vw,3rem); letter-spacing:-.04em; line-height:1.1;
  background-image:linear-gradient(var(--acid),var(--acid));
  background-size:0% 1px; background-position:0 100%; background-repeat:no-repeat;
  transition:background-size .5s var(--ease), color .35s;
  word-break:break-word;
}
.foot__mail:hover{ color:var(--acid); background-size:100% 1px }
.foot__cols{ display:flex; gap:clamp(2rem,5vw,4rem) }
.foot__cols div{ display:grid; gap:.5rem; align-content:start }
.foot__cols h4{
  font-family:var(--f-mono); font-size:.625rem; font-weight:500;
  text-transform:uppercase; letter-spacing:.16em; color:var(--txt-dim); margin-bottom:.35rem;
}
.foot__cols a{ font-size:.9375rem; color:var(--txt-dim); transition:color .3s, transform .3s var(--ease) }
.foot__cols a:hover{ color:var(--acid) }

.foot__mark{ padding-block:1rem; opacity:.9 }
.foot__mark svg{ width:100%; height:auto; overflow:visible }
/* 160px é onde "AMBROSIOMKT" já ocupa ~1000 naturalmente, então o textLength
   não comprime os glifos pra caber. */
.foot__mark-t{
  font-family:var(--f-disp); font-weight:800; font-size:160px;
  letter-spacing:-.05em; fill:none; stroke:rgba(241,237,226,.16); stroke-width:1;
}
.foot__bottom{
  display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  padding-block:2rem; border-top:1px solid rgba(241,237,226,.1);
  font-family:var(--f-mono); font-size:.6875rem; color:var(--txt-dim);
}

/* ══════════════════════════════════════════════
   RESPONSIVO
══════════════════════════════════════════════ */
@media (max-width:1100px){
  .svc__grid{ grid-template-columns:1fr; max-width:34rem }
  .faq__wrap{ grid-template-columns:1fr }
  .faq__head{ position:static }
  .cap__item{ grid-template-columns:auto 1fr; grid-template-areas:none }
  .cap__item p{ grid-column:2 }
}

/* Também pega janela em pé: o hero sobreposto é uma composição de paisagem —
   em retrato a foto fica limitada pela largura, o rosto desce e nada encaixa. */
@media (max-width:900px), (max-aspect-ratio:1/1){
  .nav__links{ display:none }
  .nav__cta{ display:none }
  .nav__burger{ display:flex; margin-left:auto }

  /* Reduz o respiro vertical: 113px por lado em cada seção viram ~64px,
     cortando rolagem morta no celular. */
  :root{ --sec:clamp(3.75rem,9vh,5.5rem); --pad:1.25rem }

  /* HERO EM FLUXO — no mobile o empilhamento de camadas absolutas colocava o
     título em cima do rosto. Aqui vira uma coluna simples, sem sobreposição,
     e sem o sticky de 200vh (nada de scroll-parallax travando no toque). */
  .hero{ height:auto }
  .hero__sticky{
    position:relative; height:auto; min-height:100svh;
    display:flex; flex-direction:column; justify-content:center; gap:1.25rem;
    padding:6rem var(--pad) 2.5rem;
  }
  .hero__wordmark,
  .hero__photo-wrap,
  .hero__band,
  .hero__center,
  .hero__foot{ position:static; inset:auto; transform:none; }

  .hero__wordmark{ order:1 }
  .hero__center{ order:2; display:grid; gap:1.25rem; justify-items:start; text-align:left }
  .hero__photo-wrap{ order:3; height:auto; display:flex; justify-content:center }
  .hero__band{ order:4; justify-content:flex-start; gap:1rem }
  .hero__foot{ order:5 }

  .hero__title{ font-size:clamp(2rem,9vw,3.25rem) }
  .hero__actions{ justify-content:flex-start }

  /* Foto em fluxo: largura contida, sem estourar as laterais, fade só na base.
     Um pouco mais larga que antes porque o plano é mais aberto e o rosto
     ocupa menos quadro — sem isso a cara fica pequena demais no celular. */
  .hero__photo{
    position:relative; left:auto; right:auto; bottom:auto; margin:0;
    width:min(78vw,21.5rem); height:auto;
    -webkit-mask-image:linear-gradient(180deg,#000 90%,transparent 100%);
            mask-image:linear-gradient(180deg,#000 90%,transparent 100%);
  }
  .hero__photo img{ position:relative }
  /* Sem scrim: em fluxo nada de texto cai sobre o rosto, o gradiente só sujaria */
  .hero__photo-wrap::after{ display:none }

  .hero__band-side--r{ display:none }
  .hero__band-side{ flex-direction:row; gap:.6rem; width:100% }
  .hero__side--r{ display:none }
  .hero__side{ max-width:38ch; text-align:left }

  .wk{ grid-template-columns:auto 1fr; grid-template-areas:"num title" "num tags" "num desc" "num go"; gap:.5rem 1rem }
  .wk__tags{ justify-self:start; justify-content:flex-start }
  .wk__go{ justify-self:start }

  .foot__top{ grid-template-columns:1fr }
  .foot__cols{ flex-wrap:wrap; gap:2rem }
  .tl__year{ position:static; width:auto; justify-content:start; margin-bottom:.5rem }
  .timeline{ padding-left:0 }
  .timeline__line{ display:none }
  .tl{ grid-template-columns:1fr }
}

/* Janela baixa (notebook pequeno, landscape, tela larga e baixa): o hero é
   sticky em 100vh, então tudo precisa caber na altura disponível. 780px porque
   em 760 o título ainda batia no rodapé com os tamanhos cheios. */
@media (max-height:680px){
  .hero__title{ font-size:clamp(1.5rem,4.2vw,2.75rem) }
  /* Mantém a âncora no queixo; só comprime os tamanhos. */
  .hero__center{ gap:clamp(.75rem,2.5vh,1.25rem) }
  .hero__band-side{ flex-direction:row; gap:.5rem }
  .stat{ width:clamp(4.5rem,7vw,6rem) }
  .hero__wordmark{ top:clamp(.5rem,2vh,1.5rem) }
  /* Pela variável: `height` sobrescreveria o aspect-ratio e distorceria, e
     mexer em width direto desalinharia o título, que deriva de --photo-w. */
  .hero{ --photo-w:min(66vh,44vw) }
}

@media (max-width:560px){
  .hero__band-side{ width:100% }
  /* Sem aspect-ratio fixo: o texto "produtos próprios" estoura um quadrado. */
  .stat{ flex:1; width:auto; min-height:0 }
  .hero__center{ left:var(--pad); right:var(--pad) }
  /* Empilhado: o .btn tem overflow:hidden pro hover, então lado a lado em tela
     estreita ele corta o próprio texto em vez de estourar o layout. */
  .hero__actions{ width:100%; flex-direction:column }
  .hero__actions .btn{ width:100%; padding-inline:1.25rem }
  .foot__bottom{ flex-direction:column }
}

/* ══════════ ACESSIBILIDADE ══════════ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; transition-duration:.01ms !important }
  .hero{ height:auto }
  .hero__sticky{ position:relative; height:auto; min-height:100vh; padding-block:6rem }
  .hero__gl,.cta__gl{ display:none }
}
:focus-visible{ outline:2px solid var(--acid); outline-offset:3px; border-radius:4px }