/* =========================================================
   VERTENCE STUDIO — landing page
   Paleta: bg #0b1120 · texto #eef2ff · gradiente #00e8b4 → #ff9f43
   Fonte: Outfit (400 / 700)
   ========================================================= */

@font-face {
  font-family: 'Outfit';
  src: url('/assets/fonts/outfit-latin.woff2') format('woff2');
  font-weight: 400 700; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
                 U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
                 U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Outfit';
  src: url('/assets/fonts/outfit-latin-ext.woff2') format('woff2');
  font-weight: 400 700; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
                 U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
                 U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root{
  --bg:#0b1120;
  --fg:#eef2ff;
  --teal:#00e8b4;
  --orange:#ff9f43;
  --muted:#8e97b4;
  --line:rgba(238,242,255,.20);
  --line-soft:rgba(238,242,255,.10);
  --hexbg:rgba(238,242,255,.045);
  --grad:linear-gradient(90deg,var(--teal),var(--orange));
  --ease:cubic-bezier(.16,1,.3,1);
  --pad-x:clamp(22px,4.6vw,84px);
  --vh:100vh;
}
@supports (height:100svh){ :root{ --vh:100svh } }

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--fg);
  font-family:'Outfit',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-weight:400; line-height:1.45; letter-spacing:-.005em;
  overflow:hidden; overscroll-behavior:none;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{margin:0;font-weight:700;line-height:1.02;letter-spacing:-.035em}
p{margin:0}
ul{margin:0;padding:0;list-style:none}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
svg{display:block}
:focus-visible{outline:2px solid var(--teal);outline-offset:3px;border-radius:4px}

.sprite{position:absolute;width:0;height:0;overflow:hidden}
.seo-only,.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.skip-link{position:fixed;top:8px;left:8px;z-index:200;padding:10px 16px;border-radius:8px;
  background:var(--fg);color:var(--bg);font-weight:700;transform:translateY(-160%);transition:transform .2s}
.skip-link:focus{transform:none}

/* gradiente em texto */
.grad-text{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}

/* =========================================================
   TELA 1 — LOADER
   ========================================================= */
.loader{
  position:fixed;inset:0;z-index:150;background:var(--bg);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(34px,5vh,58px);
  transition:opacity .7s var(--ease),visibility .7s;
}
body:not(.is-loading) .loader{opacity:0;visibility:hidden;pointer-events:none}
.loader__cham{width:min(30vw,330px);height:auto}
.loader__bar{display:flex;align-items:center;gap:22px;width:min(72vw,880px)}
/* cantos retos — a identidade da marca não usa pílula aqui */
.bar{flex:1;height:44px;padding:4px;position:relative;
  background:var(--bg);
  border:2px solid transparent;
  background-image:linear-gradient(var(--bg),var(--bg)),var(--grad);
  background-origin:border-box;background-clip:padding-box,border-box;
}
.bar__fill{display:block;height:100%;width:0;background:var(--grad);
  transition:width .25s linear}
.bar__pct{font-weight:400;font-size:clamp(20px,2vw,30px);min-width:4ch;text-align:right;
  font-variant-numeric:tabular-nums}
.loader__text{font-size:clamp(17px,1.7vw,25px);color:var(--fg);opacity:.95}
.dots{display:inline-block;width:1.6ch;text-align:left}

/* =========================================================
   HEADER / NAV FIXOS
   ========================================================= */
.brandbar{
  position:fixed;left:var(--pad-x);bottom:clamp(22px,3.6vh,40px);z-index:60;
  display:flex;align-items:center;gap:clamp(18px,3vw,46px);
  opacity:0;transform:translateY(14px);pointer-events:none;
  transition:opacity .55s var(--ease),transform .55s var(--ease);
}
.brandbar.is-on{opacity:1;transform:none;pointer-events:auto}
.logo{display:flex;align-items:center;color:var(--fg)}
/* altura fixa em px: o logo não cresce junto com a tela */
.logo__img{
  width:auto!important;height:34px!important;max-height:34px!important;
  opacity:.96;transition:opacity .3s;
}
.logo:hover .logo__img{opacity:1}

.nav{display:flex;gap:clamp(8px,1vw,14px);flex-wrap:wrap}
.nav a{
  padding:.62em 1.35em;border-radius:999px;border:1.5px solid var(--line);
  font-size:clamp(14px,1.35vw,21px);color:var(--muted);
  transition:color .3s,border-color .3s,background .3s;
}
.nav a:hover{color:var(--fg);border-color:rgba(238,242,255,.5)}
.nav a.is-current{
  color:var(--fg);border-color:transparent;
  background-image:linear-gradient(var(--bg),var(--bg)),var(--grad);
  background-origin:border-box;background-clip:padding-box,border-box;
  border:1.5px solid transparent;
}

.quote-btn{
  position:fixed;right:var(--pad-x);top:clamp(20px,3.2vh,40px);z-index:60;
  padding:.55em 1.5em;border:1.5px solid var(--fg);font-size:clamp(15px,1.5vw,24px);
  opacity:0;transform:translateY(-12px);pointer-events:none;
  transition:opacity .55s var(--ease),transform .55s var(--ease),color .3s,border-color .3s;
  position:fixed;
}
.quote-btn.is-on{opacity:1;transform:none;pointer-events:auto}
.quote-btn:hover{border-color:var(--teal);color:var(--teal)}

.progress{position:fixed;left:0;top:0;height:2px;width:100%;z-index:70;background:var(--line-soft)}
.progress span{display:block;height:100%;width:0;background:var(--grad);transition:width .45s var(--ease)}

/* =========================================================
   TRILHO HORIZONTAL
   ========================================================= */
.track{
  display:flex;height:var(--vh);width:100%;
  overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;-ms-overflow-style:none;
  overscroll-behavior-x:contain;
}
.track::-webkit-scrollbar{display:none}
.panel{
  flex:0 0 100vw;width:100vw;height:var(--vh);
  scroll-snap-align:start;scroll-snap-stop:always;
  position:relative;overflow:hidden;
  padding:clamp(74px,10vh,120px) var(--pad-x) clamp(112px,16vh,168px);
  display:flex;
}

/* =========================================================
   CAMALEÃO
   ========================================================= */
.cham{display:block;height:auto}
.cham-eye{will-change:transform}

/* =========================================================
   TELA 2 — HERO
   ========================================================= */
.panel--hero{padding-bottom:clamp(74px,10vh,120px);align-items:center}
/* o camaleão é ancorado pelo OLHO: left/top marcam onde a pupila cai na tela
   e o translate em % do próprio elemento faz o resto — funciona em qualquer proporção */
.hero__art{
  position:absolute;left:28.5vw;top:43.5vh;
  width:min(99vw,1720px);
  transform:translate(-83.4%,-27.8%);
  pointer-events:none;z-index:0;
}
.cham--hero{width:100%;opacity:.98}
.hero__copy{position:relative;z-index:2;margin-left:auto;width:min(47vw,690px);text-align:left}
.hero__copy h1{
  font-size:clamp(42px,9.3vw,158px);line-height:.92;letter-spacing:-.05em;
}
.ast--inline{display:inline-block;vertical-align:super;width:.34em;height:.34em;margin-left:.02em}
.hero__sub{margin-top:clamp(24px,3.6vh,50px);font-size:clamp(13px,1.05vw,17px);
  color:var(--muted);max-width:34ch;line-height:1.5}
/* o "scroll →" é um botão de verdade: leva para o próximo painel */
.hero__scroll{
  position:absolute;right:var(--pad-x);bottom:clamp(26px,4vh,50px);z-index:3;
  font:inherit;font-size:clamp(15px,1.5vw,24px);
  display:flex;align-items:center;gap:.5em;color:var(--fg);
  padding:.35em .1em .35em .6em;background:none;border:0;cursor:pointer;
  transition:color .3s,gap .3s var(--ease);
}
.hero__scroll:hover,.hero__scroll:focus-visible{color:var(--teal);gap:.85em}
.hero__scroll i{font-style:normal;animation:nudge 1.8s var(--ease) infinite}
.hero__scroll:hover i{animation-play-state:paused;transform:translateX(4px)}
@keyframes nudge{0%,100%{transform:translateX(0)}50%{transform:translateX(9px)}}

/* entrada do hero */
body.is-loading .hero__copy h1{opacity:0;transform:translateY(26px)}
.hero__copy h1{transition:opacity .8s .15s var(--ease),transform .8s .15s var(--ease)}
body.is-loading .hero__art{opacity:0;transform:translate(-89%,-27.8%)}
.hero__art{transition:opacity 1s var(--ease),transform 1.1s var(--ease)}

/* =========================================================
   TELA 3 — SOBRE
   ========================================================= */
.panel--sobre{flex-direction:column;align-items:center;justify-content:center;gap:clamp(22px,3.4vh,44px);text-align:center}
.sobre__stage{position:relative;width:100%;display:flex;flex-direction:column;align-items:center}
.sobre__icons{
  position:relative;width:min(78vw,1120px);height:clamp(96px,15vh,168px);
  display:flex;align-items:flex-end;justify-content:center;gap:clamp(60px,14vw,240px);
  margin-bottom:clamp(-14px,-1.4vh,-8px);pointer-events:none;
}
.gears{width:auto;height:100%;color:var(--teal)}
.brushes{width:auto;height:100%;color:var(--orange)}
.gear{transform-box:fill-box;transform-origin:center;animation:spin 9s linear infinite}
.gear--b{animation-duration:7s;animation-direction:reverse}
.gear--c{animation-duration:5.5s}
@keyframes spin{to{transform:rotate(360deg)}}

.drop{
  position:absolute;left:calc(50% + clamp(46px,10.5vw,182px));top:38%;
  width:9px;height:9px;border-radius:50% 50% 55% 55%/45% 45% 60% 60%;
  background:var(--orange);opacity:0;
  animation:drip 4.6s var(--d,0s) cubic-bezier(.5,0,.9,.5) infinite;
}
.drop:nth-of-type(2){left:calc(50% + clamp(64px,13.4vw,232px));width:7px;height:7px}
.drop:nth-of-type(3){left:calc(50% + clamp(36px,8.4vw,146px));width:6px;height:6px}
@keyframes drip{
  0%{opacity:0;transform:translateY(0) scaleY(.6)}
  8%{opacity:1;transform:translateY(6px) scaleY(1.25)}
  55%{opacity:1;transform:translateY(clamp(70px,11vh,128px)) scaleY(1.5)}
  70%{opacity:0;transform:translateY(clamp(84px,13vh,152px)) scaleY(.9)}
  100%{opacity:0}
}

.plates{
  display:flex;align-items:center;justify-content:center;
  font-size:clamp(30px,5.6vw,88px);letter-spacing:-.045em;
}
.plate{
  background:var(--fg);color:var(--bg);
  padding:.10em .28em .16em;
  box-shadow:0 .14em 0 0 var(--bg),0 .155em 0 .012em var(--fg);
}
.plates .plate:first-of-type{padding-right:.42em}
.plates .plate:last-of-type{padding-left:.42em}
.ast-btn{
  position:relative;z-index:2;margin:0 -.30em;
  width:1.02em;height:1.02em;border-radius:50%;
  background:#1c2434;border:.055em solid var(--fg);
  display:grid;place-items:center;flex:none;
}
.ast--knot{width:62%;height:62%;transition:transform .45s var(--ease)}
.ast-btn:hover .ast--knot,.ast-btn:focus-visible .ast--knot{transform:scale(1.42) rotate(28deg)}

.sobre__lead{font-size:clamp(16px,2.1vw,32px);color:var(--fg);margin-top:clamp(20px,3vh,42px)}
.sobre__text{
  display:flex;gap:clamp(24px,4vw,64px);max-width:min(92vw,1040px);
  font-size:clamp(13px,1.05vw,16.5px);color:var(--muted);line-height:1.6;text-align:left;
}
.sobre__text strong{color:var(--fg)}
.sobre__text em{font-style:normal;color:var(--teal)}

/* =========================================================
   TELA 4 e 5 — SERVIÇOS (favo + detalhe)
   ========================================================= */
.panel--servicos{
  align-items:center;justify-content:space-between;gap:clamp(20px,3vw,60px);
  padding-top:clamp(56px,8vh,96px);padding-bottom:clamp(96px,13vh,136px);
}

.serv__intro{flex:0 1 42%;max-width:640px;transition:opacity .45s var(--ease),transform .5s var(--ease)}
.serv__intro h2{
  font-size:clamp(44px,6.6vw,104px);letter-spacing:-.05em;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;
}
.serv__intro p{margin-top:clamp(16px,2.4vh,32px);font-size:clamp(15px,1.7vw,27px);color:#c3cbe4;line-height:1.35}

/* --- favo --- */
.comb{
  position:relative;flex:0 0 auto;
  /* o favo também acompanha a ALTURA da janela: assim ele nunca invade o menu de baixo */
  --hw:clamp(84px,min(15.4vw,24vh),238px);
  --hh:calc(var(--hw)*1.1547);
  --gap:7px;
  --stepx:calc(var(--hw) + var(--gap));
  --stepy:calc(var(--hh)*.75 + var(--gap)*.86);
  width:calc(var(--stepx)*3);height:calc(var(--stepy)*2 + var(--hh));
  transition:opacity .5s var(--ease);
}
[data-key="branding"]    {--cx:-.5;--cy:-1}
[data-key="strategy"]    {--cx:.5;--cy:-1}
[data-key="conversion"]  {--cx:-1;--cy:0}
[data-key="product"]     {--cx:1;--cy:0}
[data-key="intelligence"]{--cx:-.5;--cy:1}
[data-key="growth"]      {--cx:.5;--cy:1}
.comb__cell--center{--cx:0;--cy:0}

.hex{
  --clip:polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%);
  position:relative;display:grid;place-items:center;
}
.hex::before{
  content:"";position:absolute;inset:0;clip-path:var(--clip);
  background:var(--line);
  transition:background .35s;
}
.hex::after{
  content:"";position:absolute;inset:1.6px;clip-path:var(--clip);
  background:#111a2c;
  transition:background .35s;
}
.cham--hex{position:relative;z-index:2;width:70%}

/* posicionamento do favo — depois de .hex para vencer o position:relative */
.comb .comb__cell{
  position:absolute;left:50%;top:50%;width:var(--hw);height:var(--hh);
  margin:calc(var(--hh)/-2) 0 0 calc(var(--hw)/-2);
  transform:translate(calc(var(--cx)*var(--stepx)),calc(var(--cy)*var(--stepy)));
}

.hex--btn{color:var(--fg);transition:transform .4s var(--ease),opacity .4s var(--ease)}
.hex--btn>*{position:relative;z-index:2}
.hex__icon{width:32%;height:auto;stroke-width:1;transition:transform .4s var(--ease),color .35s}
.hex__label{
  position:absolute;bottom:16%;font-size:clamp(10px,.92vw,14px);letter-spacing:-.01em;
  opacity:0;transform:translateY(6px);transition:opacity .3s,transform .35s var(--ease);color:var(--fg)
}
.comb .hex--btn:hover,.comb .hex--btn:focus-visible{transform:translate(calc(var(--cx)*var(--stepx)),calc(var(--cy)*var(--stepy))) scale(1.055)}
.hex--btn:hover::before,.hex--btn:focus-visible::before{background:linear-gradient(160deg,var(--teal),var(--orange))}
.hex--btn:hover::after,.hex--btn:focus-visible::after{background:#161f33}
.hex--btn:hover .hex__icon,.hex--btn:focus-visible .hex__icon{transform:translateY(-14%) scale(1.06)}
.hex--btn:hover .hex__label,.hex--btn:focus-visible .hex__label{opacity:1;transform:none}

/* --- estado detalhe --- */
.serv__detail{
  position:absolute;left:var(--pad-x);top:50%;transform:translateY(-50%);
  width:min(40vw,560px);z-index:5;
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .45s var(--ease),visibility .45s;
}
.panel--servicos.is-detail .serv__detail{opacity:1;visibility:visible;pointer-events:auto}
.panel--servicos.is-detail .serv__intro{opacity:0;transform:translateY(-18px);pointer-events:none}
.panel--servicos.is-detail .comb{opacity:.42}
.panel--servicos.is-detail .hex--btn{pointer-events:auto}
.hex--btn.is-active{opacity:1}
.panel--servicos.is-detail .comb .hex--btn:not(.is-active),
.panel--servicos.is-detail .comb__cell--center{opacity:.55}
.hex--btn.is-active::before{background:linear-gradient(160deg,var(--teal),var(--orange))}

.detail__hex{
  --clip:polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%);
  width:clamp(140px,15vw,224px);aspect-ratio:1/1.1547;
  display:grid;place-items:center;position:relative;
  background:var(--gradHexBg,linear-gradient(180deg,var(--teal),var(--orange)));
  clip-path:var(--clip);
  margin:0 auto clamp(18px,2.8vh,34px);
  backface-visibility:hidden;transform-style:preserve-3d;
}
.detail__hex::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,var(--teal) 0%,var(--orange) 55%,var(--teal) 100%);
  background-size:100% 260%;
  animation:hexslide 6s var(--ease) infinite;
}
@keyframes hexslide{0%,100%{background-position:0 0}50%{background-position:0 100%}}
.detail__hex span{position:relative;z-index:2;color:#0b1120;font-weight:400;
  font-size:clamp(15px,1.5vw,23px);letter-spacing:-.02em;text-shadow:0 1px 0 rgba(255,255,255,.18)}

.detail__title{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.detail__pills{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-bottom:clamp(14px,2.2vh,26px)}
.detail__pills li{
  padding:.42em 1.05em;border:1.4px solid var(--line);border-radius:999px;
  font-size:clamp(11px,.92vw,14.5px);color:#c3cbe4;
  transition:color .3s,border-color .3s,transform .3s var(--ease);cursor:default;
}
.detail__pills li:hover{color:var(--fg);border-color:var(--teal);transform:translateY(-2px)}
.detail__body{
  border:1.4px solid var(--line);padding:clamp(16px,2vw,26px);
  font-size:clamp(12.5px,1.02vw,16px);line-height:1.62;color:#dbe1f5;
  display:grid;gap:1em;font-family:'Outfit',sans-serif;letter-spacing:.005em;
}
/* o botão de fechar existe só para teclado e leitor de tela —
   visualmente o detalhe fecha com Esc, clicando fora ou rolando */

/* =========================================================
   TELA 6 — CASES · ECO
   o mesmo print aparece duas vezes: atrás, lavado em preto e branco e
   coberto de azul Vertence, virando o ambiente do painel; e na frente,
   nítido e colorido dentro da moldura. o fundo é o que faz a moldura
   parar de flutuar, porque a imagem passa a estar dentro do mundo dela
   ========================================================= */
.panel--cases{padding:0;display:block}
.cases{position:absolute;inset:0;overflow:hidden}
.cases__stage{position:absolute;inset:0}

.case{
  position:absolute;inset:0;
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .6s var(--ease),visibility .6s;
}
.case.is-active{opacity:1;visibility:visible;pointer-events:auto}

/* --- o eco: o print virando atmosfera --- */
.case__echo{
  position:absolute;inset:0;z-index:0;
  background-size:cover;background-position:top center;
  filter:grayscale(1) contrast(1.12) brightness(.9) blur(5px);
  transform:scale(1.08);
  opacity:.26;
  will-change:transform;
}
.case__scrim{
  position:absolute;inset:0;z-index:1;
  background:
    radial-gradient(90% 75% at 76% 26%,rgba(0,232,180,.13),transparent 60%),
    radial-gradient(80% 70% at 6% 96%,rgba(255,159,67,.10),transparent 62%),
    linear-gradient(96deg,var(--bg) 16%,rgba(11,17,32,.86) 46%,rgba(11,17,32,.7) 100%);
}

/* --- composição: duas colunas, sem posicionamento absoluto --- */
.case__inner{
  position:relative;z-index:2;height:100%;
  display:grid;grid-template-columns:minmax(0,1fr) auto;
  align-items:center;gap:clamp(24px,4vw,72px);
  padding:clamp(70px,10vh,116px) var(--pad-x) clamp(112px,16vh,168px);
}
.case__copy{display:flex;flex-direction:column;gap:clamp(12px,2.1vh,26px);max-width:min(42em,46vw)}
.case__num{
  font-size:clamp(11px,.88vw,14px);letter-spacing:.2em;text-transform:uppercase;color:var(--teal);
}
.case__title{font-size:clamp(38px,5.4vw,86px);letter-spacing:-.05em;line-height:.95}
.case__lead{font-size:clamp(13px,1.12vw,17.5px);line-height:1.55;color:#b9c1da;max-width:44ch}

.case__pills{display:flex;flex-wrap:wrap;gap:8px}
.case__pills li{
  padding:.44em 1.05em;border:1.4px solid var(--line);border-radius:999px;
  font-size:clamp(10.5px,.82vw,13px);letter-spacing:.05em;text-transform:uppercase;color:#c3cbe4;
}
.case__stats{display:flex;flex-wrap:wrap;gap:clamp(20px,2.8vw,44px)}
.case__stats li{display:flex;flex-direction:column;gap:.22em}
.case__stats b{
  font-size:clamp(24px,2.6vw,42px);font-weight:700;letter-spacing:-.045em;line-height:1;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;
}
.case__stats span{font-size:clamp(9.5px,.76vw,12px);letter-spacing:.11em;text-transform:uppercase;color:var(--dim,#5f6884)}

/* --- o print nítido, reto, dentro do painel ---
   a largura é limitada também pela ALTURA disponível (16:10 = fator 1.6),
   então em tela baixa a moldura encolhe em vez de estourar o painel */
.case__shot{
  width:min(46vw,620px,calc((var(--vh) - clamp(300px,42vh,400px)) * 1.6));
  min-width:230px;
  transform:translateY(16px);opacity:0;
  transition:transform .85s .1s var(--ease),opacity .6s .1s var(--ease);
  perspective:1300px;              /* o tilt acontece no .browser, aqui só a profundidade */
}
.case.is-active .case__shot{transform:none;opacity:1}

.browser{
  transform-style:preserve-3d;will-change:transform;
  border-radius:13px;overflow:hidden;background:#0e1626;
  border:1px solid transparent;
  background-image:linear-gradient(#0e1626,#0e1626),var(--grad);
  background-origin:border-box;background-clip:padding-box,border-box;
  box-shadow:0 42px 96px -44px rgba(0,0,0,.98);
}
.browser__bar{
  display:flex;align-items:center;gap:6px;
  padding:clamp(7px,.72vw,11px) clamp(11px,1.05vw,16px);
  background:#161f33;border-bottom:1px solid rgba(238,242,255,.07);
}
.browser__bar i{
  width:clamp(7px,.6vw,9px);aspect-ratio:1;border-radius:50%;
  background:rgba(238,242,255,.22);flex:none;
}
.case__shot img{
  width:100%;height:auto;aspect-ratio:16/10;
  object-fit:cover;object-position:top center;
}

/* --- navegação do painel --- */
.cases__nav{
  position:absolute;right:var(--pad-x);bottom:clamp(30px,5vh,54px);z-index:6;
  display:flex;align-items:center;gap:clamp(12px,1.4vw,20px);
}
.carousel__dots{display:flex;gap:9px}
.carousel__dots button{width:9px;height:9px;border-radius:50%;background:var(--line);transition:background .3s,width .3s}
.carousel__dots button[aria-selected="true"]{width:30px;border-radius:999px;background:linear-gradient(90deg,var(--teal),var(--orange))}
.carousel__hint{font-size:clamp(11px,.9vw,14px);color:var(--muted)}

/* =========================================================
   TELA 7 — CONTATO
   ========================================================= */
.panel--contato{align-items:center}
.contato__eyebrow{position:absolute;left:var(--pad-x);top:clamp(24px,4vh,50px);
  font-size:clamp(13px,1.1vw,17px);font-weight:400;color:var(--muted);letter-spacing:.06em}
/* colunas: campos à esquerda, contatos à direita */
.form{width:100%;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  column-gap:clamp(34px,7vw,130px);row-gap:clamp(14px,3.2vh,40px);align-items:center}
.form .field{grid-column:1;flex:none}
.form__error{grid-column:1;color:var(--orange);font-size:14px;min-height:1.2em}
.form__side{grid-column:2;grid-row:1 / span 4;display:flex;flex-direction:column;
  gap:clamp(20px,3.4vh,44px);align-items:flex-start;justify-content:center}

.field{position:relative;border-bottom:2.5px solid rgba(238,242,255,.42)}
.field input{
  width:100%;background:none;border:0;outline:none;color:var(--fg);
  font:inherit;font-size:clamp(30px,4.6vw,74px);font-weight:400;letter-spacing:-.045em;
  padding:.06em 0 .1em;
}
.field label{
  position:absolute;left:0;bottom:.1em;pointer-events:none;
  font-size:clamp(30px,4.6vw,74px);font-weight:400;letter-spacing:-.045em;color:#7d879f;
  transition:transform .35s var(--ease),font-size .35s var(--ease),color .35s;transform-origin:left bottom;
}
.field input:focus + label,
.field input:not(:placeholder-shown) + label{
  transform:translateY(-1.55em) scale(.28);color:var(--teal);
}
.field:focus-within{border-color:var(--teal)}
.field.has-error{border-color:var(--orange)}

.fill-btn{
  position:relative;overflow:hidden;isolation:isolate;
  padding:.62em 2.2em;border:2px solid transparent;
  background-image:linear-gradient(var(--bg),var(--bg)),var(--grad);
  background-origin:border-box;background-clip:padding-box,border-box;
  width:min(100%,420px);
}
.fill-btn__bg{
  position:absolute;inset:0;z-index:-1;background:var(--grad);
  transform:scaleX(0);transform-origin:left center;
  transition:transform .55s var(--ease);
}
.fill-btn:hover .fill-btn__bg,.fill-btn:focus-visible .fill-btn__bg{transform:scaleX(1)}
.fill-btn__label{
  font-size:clamp(22px,2.6vw,42px);font-weight:700;letter-spacing:-.04em;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;
  transition:color .3s .12s,-webkit-text-fill-color .3s .12s;
}
.fill-btn:hover .fill-btn__label,.fill-btn:focus-visible .fill-btn__label{
  color:var(--bg);-webkit-text-fill-color:var(--bg);
}

.contacts{display:flex;flex-direction:column;gap:clamp(12px,1.9vh,24px)}
.contacts li{display:flex;align-items:center;gap:14px;font-size:clamp(14px,1.28vw,21px)}
.contacts svg{width:clamp(24px,2.1vw,34px);height:auto;flex:none;color:var(--fg)}
.contacts a{transition:color .3s}
.contacts a:hover{color:var(--teal)}
.legal{font-size:clamp(11px,.86vw,13.5px);color:#5f6884;line-height:1.55}

/* =========================================================
   TELA 8 — SUCESSO
   ========================================================= */
.success{
  position:fixed;inset:0;z-index:160;background:var(--bg);
  display:flex;align-items:center;justify-content:center;
  gap:clamp(30px,6vw,110px);padding:var(--pad-x);
  opacity:0;transition:opacity .5s var(--ease);
}
.success[hidden]{display:none}
.success.is-on{opacity:1}
.ast--success{width:min(22vw,270px);height:auto;flex:none;
  transform:rotate(-30deg) scale(.6);opacity:0;
  transition:transform .95s cubic-bezier(.2,1.1,.3,1),opacity .5s}
.success.is-on .ast--success{transform:rotate(360deg) scale(1);opacity:1}
.success__copy{max-width:min(52vw,720px)}
.success__copy h2{font-size:clamp(30px,4.4vw,68px);letter-spacing:-.045em;line-height:1.06}
.success__copy h2 span{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.success__copy>p{margin-top:clamp(16px,2.4vh,32px);font-size:clamp(15px,1.6vw,26px);color:#d5dbf0;line-height:1.35}
.bar--success{height:5px;padding:0;border:0;background:var(--line-soft);margin-top:clamp(28px,5vh,64px)}
.bar--success .bar__fill{transition:width .1s linear}
.success__count{margin-top:clamp(14px,2.2vh,26px);font-size:clamp(14px,1.3vw,20px);color:var(--muted);
  font-variant-numeric:tabular-nums}
.success__manual{display:inline-block;margin-top:1.2em;font-size:clamp(13px,1.05vw,16px);
  color:var(--teal);border-bottom:1px solid currentColor}

/* =========================================================
   RESPONSIVO
   ========================================================= */
@media (max-width:1180px){
  .sobre__text{flex-direction:column;gap:12px}
  .serv__detail{width:min(46vw,470px)}
}

@media (max-width:900px){
  .panel{padding:clamp(66px,9vh,96px) var(--pad-x) clamp(128px,18vh,176px)}
  .panel--hero{padding-bottom:clamp(96px,12vh,120px)}

  .hero__art{left:56vw;top:29vh;width:215vw;opacity:.28}
  body.is-loading .hero__art{transform:translate(-90%,-27.8%)}
  .hero__copy{width:100%;margin:0;text-align:left}
  .hero__copy h1{font-size:clamp(46px,13.5vw,86px)}
  .hero__sub{max-width:none}

  .brandbar{gap:14px;flex-direction:column;align-items:flex-start;bottom:18px}
  .nav{gap:6px}
  .nav a{padding:.5em 1em;font-size:13px}
  .logo__img{height:28px}

  .panel--servicos{flex-direction:column;justify-content:center;gap:clamp(16px,3vh,32px)}
  .serv__intro{flex:none;text-align:center;max-width:none}
  .serv__intro h2{font-size:clamp(38px,10vw,64px)}
  .serv__intro p{font-size:clamp(14px,3.6vw,20px)}
  .comb{--hw:clamp(72px,min(20vw,15vh),124px);--gap:6px}
  .serv__detail{
    position:absolute;left:var(--pad-x);right:var(--pad-x);top:auto;bottom:clamp(112px,16vh,150px);
    width:auto;transform:none;background:rgba(11,17,32,.94);backdrop-filter:blur(6px);
    padding:16px;border-radius:12px;
  }
  .detail__hex{width:96px;margin-bottom:12px}

  /* cases: uma coluna só. a moldura sai e o eco sobe de opacidade,
     virando o próprio plano de fundo do texto */
  .case__inner{grid-template-columns:minmax(0,1fr);gap:0}
  .case__copy{max-width:none}
  .case__title{font-size:clamp(34px,11vw,58px)}
  .case__lead{max-width:none;font-size:14px}
  .case__stats{gap:20px}
  .case__stats b{font-size:26px}
  .case__shot{display:none}
  .case__echo{opacity:.42;filter:grayscale(1) contrast(1.1) brightness(.85) blur(4px)}
  .case__scrim{background:
    radial-gradient(90% 55% at 80% 10%,rgba(0,232,180,.12),transparent 62%),
    linear-gradient(172deg,rgba(11,17,32,.62) 0%,rgba(11,17,32,.86) 46%,var(--bg) 100%)}
  .cases__nav{bottom:clamp(88px,13vh,120px)}

  .panel--servicos.is-detail .comb{opacity:.32}

  .form{grid-template-columns:1fr;row-gap:clamp(10px,2.4vh,22px)}
  .form .field{grid-column:1}
  .form__side{grid-column:1;grid-row:auto;gap:18px}
  .field input,.field label{font-size:clamp(28px,9vw,44px)}
  .fill-btn__label{font-size:clamp(20px,6vw,30px)}
  .contacts li{font-size:15px}
  .contacts svg{width:22px}

  .success{flex-direction:column;text-align:center;gap:24px}
  .ast--success{width:min(34vw,150px)}
  .success__copy{max-width:none}
  .loader__cham{width:44vw}
  .loader__bar{width:82vw;gap:14px}
  .bar{height:34px}
}

@media (max-width:560px){
  .plates{flex-direction:column;gap:6px;font-size:clamp(28px,9.6vw,46px)}
  .ast-btn{margin:.1em 0}
  .plates .plate{padding:.1em .3em .16em!important}
  .sobre__icons{gap:22vw;height:clamp(74px,12vh,110px)}
  .hero__scroll{font-size:13px}
  .quote-btn{font-size:13px;padding:.5em 1.1em}
}

@media (max-height:620px) and (min-width:901px){
  .panel{padding-top:64px;padding-bottom:104px}
  .comb{--hw:clamp(80px,11vw,140px)}
}

/* =========================================================
   MOVIMENTO REDUZIDO
   ========================================================= */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important;
  }
  .track{scroll-behavior:auto}
  .drop{display:none}
}