/* =========================================================
   NOMMA WEALTH — folha de estilo
   Base: Figma "Site" + protótipo Framer (1440)
   ========================================================= */

/* ---------- 1. FONTES ---------- */
@font-face{font-family:"Tobias";src:url("../assets/fonts/Tobias-Light.woff2") format("woff2");font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:"Tobias";src:url("../assets/fonts/Tobias-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Tobias";src:url("../assets/fonts/Tobias-RegularItalic.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Tobias";src:url("../assets/fonts/Tobias-Medium.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}

/* Instrument Sans é carregada pelo Google Fonts, no <head> do index.html */

/* ---------- 2. TOKENS ---------- */
:root{
  /* cor */
  --cream:#F5F3ED;
  --cream-hi:#FCFBF8;
  --cream-lo:#EBE8DE;
  --sand-bg:#D9D4C4;      /* fundo da seção do método, do Figma */
  --sand-panel:#E3E0D4;   /* painel da direita, do Figma */
  --green:#004C45;
  --green-deep:#142828;
  --green-ink:#172D2E;
  --ink:#172D2E;
  --ink-soft:#5B5749;
  --ink-mute:#76746E;
  --sand:#BDB599;
  --sand-soft:#AAA38A;
  --sand-deep:#938D77;
  --line:rgba(23,45,46,.14);
  --line-light:rgba(245,243,237,.18);

  /* medidas */
  --gut:8px;
  --radius:16px;
  --shell:1248px;
  --pad:24px;
  --nav-h:72px;

  /* tipografia fluida */
  --fs-display:clamp(2.25rem,1.05rem + 5.35vw,4.5rem);   /* 36 → 72 */
  --fs-h2:clamp(1.75rem,1.05rem + 3.1vw,3rem);            /* 28 → 48 */
  --fs-h3:clamp(1.5rem,1.1rem + 1.8vw,2.5rem);            /* 24 → 40 */
  --fs-lead:clamp(1.375rem,1.05rem + 1.45vw,2rem);        /* 22 → 32 */
  --fs-sub:clamp(1.25rem,1.05rem + .9vw,1.875rem);        /* 20 → 30 */
  --fs-quote:clamp(1.375rem,.95rem + 1.9vw,2.25rem);      /* 22 → 36 */
  --fs-body:clamp(.9375rem,.9rem + .17vw,1rem);           /* 15 → 16 */
  --fs-body-lg:clamp(1rem,.94rem + .28vw,1.125rem);       /* 16 → 18 */
  --fs-eyebrow:clamp(.6875rem,.65rem + .17vw,.8125rem);   /* 11 → 13 */
  --fs-marquee:clamp(3rem,.5rem + 11vw,8.75rem);          /* 48 → 140 */

  /* seção */
  --sec-y:clamp(72px,8vw,120px);

  /* movimento */
  --ease:cubic-bezier(.22,.61,.36,1);
  --dur:.55s;
}

/* ---------- 3. RESET ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  padding:var(--gut);
  background:var(--cream);
  color:var(--ink);
  font-family:"Instrument Sans",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  font-size:var(--fs-body);
  line-height:1.6;
  font-synthesis-weight:none;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img,picture,svg{display:block;max-width:100%}
img{height:auto}
h1,h2,h3,h4,p,ul,ol,figure,table{margin:0;padding:0}
ul,ol{list-style:none}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
table{border-collapse:collapse;width:100%}
::selection{background:var(--green);color:var(--cream)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- 4. UTILITÁRIOS ---------- */
.shell{width:100%;max-width:var(--shell);margin-inline:auto;padding-inline:var(--pad)}

.h2{
  font-family:"Tobias",Georgia,"Times New Roman",serif;
  font-feature-settings:"titl" 0;font-variant-ligatures:common-ligatures;
  font-weight:400;
  font-size:var(--fs-h2);
  line-height:1.04;
  letter-spacing:-.02em;
  color:var(--ink);
  text-wrap:balance;
}
.h2--light{color:var(--cream-hi)}

.eyebrow{
  font-size:var(--fs-eyebrow);
  font-weight:500;
  letter-spacing:.11em;
  text-transform:uppercase;
  color:var(--sand-deep);
  line-height:1.2;
}
.eyebrow--sm{font-size:clamp(.625rem,.6rem + .13vw,.75rem)}
.eyebrow--light{color:var(--sand)}

.body{font-size:var(--fs-body);line-height:1.6;color:var(--ink-soft)}
.body--lg{font-size:var(--fs-body-lg);line-height:1.55}
.body--light{color:rgba(245,243,237,.72)}

.dot{
  display:inline-block;width:8px;height:8px;border-radius:50%;
  background:var(--sand);margin-right:16px;vertical-align:.32em;flex:0 0 auto;
}

/* ---------- 5. BOTÕES ---------- */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  height:48px;padding:0 24px;border-radius:999px;
  font-size:var(--fs-body);font-weight:400;line-height:1;
  white-space:nowrap;
  transition:background-color .4s var(--ease),color .4s var(--ease),
             border-color .4s var(--ease),transform .4s var(--ease);
}
.btn--sm{height:40px;padding:0 18px;font-size:clamp(.8125rem,.78rem + .13vw,.875rem);font-weight:600}
.btn__ico{width:16px;height:16px;flex:0 0 auto;transition:transform .4s var(--ease)}
.btn:hover .btn__ico{transform:translateX(4px)}

.btn--light{background:var(--cream-hi);color:var(--green)}
.btn--light:hover{background:#fff;transform:translateY(-1px)}

.btn--ghost{border:1px solid rgba(245,243,237,.35);color:var(--cream-hi)}
.btn--ghost:hover{background:rgba(245,243,237,.12)}

.btn--outline-light{border:1px solid rgba(245,243,237,.4);color:var(--cream-hi)}
.btn--outline-light:hover{background:rgba(245,243,237,.1);transform:translateY(-1px)}

.btn--outline{border:1px solid rgba(23,45,46,.26);color:var(--ink)}
.btn--outline:hover{background:rgba(23,45,46,.05);transform:translateY(-1px)}

/* ---------- 6. REVEALS ---------- */
.js [data-reveal]{opacity:0;transform:translateY(22px);
  transition:opacity .9s var(--ease) var(--d,0s),transform .9s var(--ease) var(--d,0s)}
.js [data-reveal].is-in{opacity:1;transform:none}

/* títulos que sobem linha a linha por trás de uma máscara */
[data-split] .l{display:block;overflow:hidden;padding-bottom:.1em;margin-bottom:-.1em}
[data-split] .li{text-wrap:balance}
.js [data-split] .li{display:block;transform:translateY(108%);
  transition:transform 1s var(--ease) var(--ld,0s)}
.js [data-split].is-in .li{transform:none}

/* blocos grandes entram com um respiro de escala */
.js [data-block]{opacity:0;transform:translateY(28px) scale(.988);transform-origin:50% 0;
  transition:opacity 1s var(--ease),transform 1.1s var(--ease)}
.js [data-block].is-in{opacity:1;transform:none}

/* escalonamento automático de grades */
.vision__grid li{transition-delay:calc((var(--n,0) - 1) * .06s)}
.pillars__grid .pillar{transition-delay:calc((var(--n,0) - 1) * .09s)}

[data-parallax]{will-change:transform}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js [data-reveal],.js [data-block]{opacity:1;transform:none;transition:none}
  .js [data-split] .li{transform:none;transition:none}
  [data-parallax]{transform:none!important}
  .marquee__track{animation:none!important}
  .step__bar{display:none}
}

/* =========================================================
   MENU
   ========================================================= */
.nav{position:fixed;inset:var(--gut) var(--gut) auto;z-index:60;pointer-events:none}
.nav__inner{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  height:var(--nav-h);padding:16px 16px 16px 24px;
  border-radius:1000px;
  background:rgba(23,45,45,0);
  backdrop-filter:blur(0px);-webkit-backdrop-filter:blur(0px);
  pointer-events:auto;
  transition:background-color .5s var(--ease),backdrop-filter .5s var(--ease),
             -webkit-backdrop-filter .5s var(--ease),padding .5s var(--ease);
}
.nav.is-stuck .nav__inner{
  background:rgba(23,45,45,.2);
  backdrop-filter:blur(10px) saturate(1.1);
  -webkit-backdrop-filter:blur(10px) saturate(1.1);
}
.nav__logo{display:flex;align-items:center;color:var(--cream-hi)}
/* o lockup abre no hover e revela o "wealth", como no Framer */
.nav__lockup{
  --mark:113px; --word:67px; --lg:10px;
  display:flex;align-items:center;gap:var(--lg);
  width:var(--mark);overflow:hidden;
  transition:width .45s var(--ease);
}
.nav__logo:hover .nav__lockup,
.nav__logo:focus-visible .nav__lockup{width:calc(var(--mark) + var(--lg) + var(--word))}
.nav__logomark{width:var(--mark);height:21px;flex:0 0 auto;fill:currentColor}
.nav__wordmark{width:var(--word);height:9px;flex:0 0 auto;fill:currentColor;opacity:.9}
@media (prefers-reduced-motion:reduce){.nav__lockup{transition:none}}
.nav__actions{display:flex;align-items:center;gap:8px}
.nav__toggle{display:none}

/* =========================================================
   01 · HERO
   ========================================================= */
.hero{
  position:relative;isolation:isolate;overflow:hidden;
  min-height:max(768px,calc(100vh - (var(--gut) * 2)));
  min-height:max(768px,calc(100svh - (var(--gut) * 2)));
  border-radius:var(--radius);
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:clamp(88px,10vw,140px) var(--pad) clamp(40px,4.5vw,56px);
  color:var(--cream-hi);
}
.hero__media{position:absolute;inset:-100px 0;z-index:-2}
.hero__slide{position:absolute;inset:0;opacity:0;transition:opacity 1.4s var(--ease)}
.hero__slide.is-on{opacity:1}
.hero__slide img{width:100%;height:100%;object-fit:cover;object-position:center 32%}
.hero__veil{
  position:absolute;inset:0;
  background:
    linear-gradient(180deg,rgba(10,26,25,.44) 0%,rgba(10,26,25,0) 24%,rgba(10,26,25,.2) 46%,rgba(10,26,25,.78) 100%),
    radial-gradient(130% 78% at 50% 104%,rgba(0,40,36,.62) 0%,rgba(0,40,36,0) 68%);
}

.hero__body{max-width:900px;margin-inline:auto;text-align:center;width:100%}
.hero__title{
  font-family:"Tobias",Georgia,serif;font-feature-settings:"titl" 0;font-variant-ligatures:common-ligatures;
  font-weight:400;font-size:var(--fs-display);line-height:1;letter-spacing:-.035em;
  text-wrap:balance;
}
.hero__sub{
  margin-top:clamp(20px,2.4vw,34px);
  font-size:var(--fs-body);line-height:1.6;color:rgba(252,251,248,.88);
  text-wrap:pretty;
}
.hero__cta{
  margin-top:clamp(26px,3vw,40px);
  display:flex;flex-wrap:wrap;gap:8px;justify-content:center;
}

/* etiquetas flutuantes */
.hero__tags{position:absolute;inset:0;z-index:1;pointer-events:none}
/* a etiqueta da foto no ar fica acesa; as outras seguem à mostra em opacidade baixa,
   sempre no mesmo lugar, para dar para ir direto em qualquer uma com o mouse */
.tag{
  position:absolute;
  display:inline-flex;align-items:center;gap:8px;
  height:36px;padding:0 16px;border-radius:200px;
  background:rgba(0,76,69,.28);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  border:1px solid rgba(245,243,237,.14);
  font-size:12px;font-weight:500;line-height:1;color:var(--cream-hi);
  white-space:nowrap;cursor:pointer;
  opacity:.3;transform:none;
  transition:opacity .7s var(--ease);
}
.tag.is-on{opacity:1}
.tag.is-on::after{transform:scaleX(1)}
@media (hover:hover){ .tag:hover{opacity:1} }
/* foto de abertura: o quadro completo, com todas as etiquetas e todas as linhas */
.hero__tags.is-all .tag{opacity:1}
.hero__tags.is-all .tag::after{transform:scaleX(1)}
.tag::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--cream-hi);opacity:.85;flex:0 0 auto}
.tag::after{
  content:"";position:absolute;top:50%;width:48px;height:1px;
  background:rgba(245,243,237,.4);
  transform:scaleX(0);transition:transform .8s var(--ease) .15s;
}
.tag--l1::after,.tag--l2::after,.tag--l3::after{transform-origin:left center}
.tag--r1::after,.tag--r2::after,.tag--r3::after{transform-origin:right center}
.tag--l1,.tag--l2,.tag--l3{right:auto}
.tag--l1::after,.tag--l2::after,.tag--l3::after{left:calc(100% + 24px)}
.tag--r1::after,.tag--r2::after,.tag--r3::after{right:calc(100% + 24px)}

.tag--l1{left:28.8%;top:16.2%}
.tag--l2{left:19%;top:27%}
.tag--l3{left:26.5%;top:37.8%}
.tag--r1{left:58.6%;top:16.2%}
.tag--r2{left:60.8%;top:27%}
.tag--r3{left:58%;top:37.8%}



/* =========================================================
   02 · DECLARAÇÃO
   ========================================================= */
.claim{
  position:relative;isolation:isolate;overflow:hidden;
  margin-top:var(--gut);
  background:var(--green);
  border-radius:var(--radius) var(--radius) 0 0;
  min-height:clamp(520px,66vw,900px);
  display:flex;align-items:flex-start;
  padding-block:clamp(104px,10vw,140px) clamp(72px,7vw,104px);
  color:var(--cream-hi);
}
.claim__pattern{position:absolute;right:0;bottom:0;width:min(88%,1089px);z-index:-1}
.claim__pattern img{width:100%;height:auto}
.claim__inner{width:100%;max-width:var(--shell);margin-inline:auto;padding-inline:var(--pad)}
.claim__title{
  font-family:"Tobias",Georgia,serif;font-feature-settings:"titl" 0;font-variant-ligatures:common-ligatures;
  font-weight:400;font-size:var(--fs-h2);line-height:1.08;letter-spacing:-.02em;
  color:var(--cream-hi);max-width:22ch;
}
.claim__kicker{
  margin-top:clamp(20px,2.2vw,30px);
  font-family:"Tobias",Georgia,serif;font-feature-settings:"titl" 0;
  font-size:var(--fs-h3);line-height:1.1;letter-spacing:-.02em;color:var(--sand);
}
.claim .btn{margin-top:clamp(28px,3vw,40px)}

/* =========================================================
   03 · POR QUE EXISTIMOS
   ========================================================= */
.why{padding-block:var(--sec-y) clamp(80px,8vw,120px);background:var(--cream)}
.why__head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:clamp(24px,4vw,64px);align-items:start}
.why__rows{margin-top:clamp(56px,6vw,96px);display:grid;gap:0}
.why__row{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);
  gap:clamp(24px,4vw,64px);
  padding-block:clamp(28px,3vw,40px);
  border-top:1px solid var(--line);
}
.why__label{position:relative}
.why__bar{
  position:absolute;top:calc(-1 * clamp(28px,3vw,40px) - 1px);left:0;
  height:2px;width:0;background:var(--green);
  transition:width 1.1s var(--ease) .1s;
}
.why__row.is-in .why__bar{width:96px}
.why__lead{font-size:var(--fs-body-lg);font-weight:400;line-height:1.67;color:var(--ink);letter-spacing:-.005em}
.why__text .body{margin-top:14px;max-width:62ch}
.why__close{
  margin-top:clamp(64px,7vw,110px);
  display:flex;align-items:flex-start;
  font-family:"Tobias",Georgia,serif;font-feature-settings:"titl" 0;font-variant-ligatures:common-ligatures;
  font-weight:400;font-size:var(--fs-quote);line-height:1.2;letter-spacing:-.015em;
  color:var(--ink);max-width:56ch;
}

/* divisor de padrão */
.rule{
  position:relative;overflow:hidden;
  margin-inline:calc(-1 * var(--gut));
}
.rule img{width:100%;height:auto;display:block}

/* =========================================================
   04 · PILARES
   ========================================================= */
.pillars{padding-block:clamp(48px,5vw,80px) var(--gut)}
.pillars__head{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(24px,4vw,64px);align-items:end;
}
.pillars__head .h2{margin-top:14px}
.pillars__head .body{max-width:48ch;justify-self:end}
.pillars__grid{
  margin-top:clamp(48px,6vw,96px);
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:24px;
}
.pillar{
  position:relative;isolation:isolate;
  display:flex;flex-direction:column;
  padding:clamp(28px,2.8vw,40px);
  border-radius:var(--radius);
}
.pillar::before{
  content:"";position:absolute;top:0;bottom:0;left:-12px;width:1px;background:var(--line);
  transition:opacity .45s var(--ease);
}
.pillar:first-child::before{display:none}

/* imagem que aparece no hover */
.pillar__media{
  position:absolute;inset:0;z-index:-1;border-radius:var(--radius);overflow:hidden;
  opacity:0;transition:opacity .55s var(--ease);
}
.pillar__media picture{display:block;width:100%;height:100%}
.pillar__media img{width:100%;height:100%;object-fit:cover;object-position:center;
  transform:scale(1.06);transition:transform 1.2s var(--ease)}
.pillar__veil{position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(23,45,45,0) 0%,rgb(23,45,45) 100%)}

.pillar:hover .pillar__media,.pillar:focus-within .pillar__media{opacity:1}
.pillar:hover .pillar__media img,.pillar:focus-within .pillar__media img{transform:scale(1)}
.pillar:hover::before,.pillar:focus-within::before{opacity:0}
.pillar:hover + .pillar::before,.pillar:focus-within + .pillar::before{opacity:0}
.pillar:hover .pillar__title,.pillar:hover .pillar__body .body,
.pillar:focus-within .pillar__title,.pillar:focus-within .pillar__body .body{color:var(--cream)}
.pillar__n{
  font-family:"Tobias",Georgia,serif;font-feature-settings:"titl" 0;font-variant-ligatures:common-ligatures;
  font-size:clamp(2rem,1.3rem + 2.2vw,3rem);line-height:1.2;color:var(--sand);
}
.pillar__body{margin-top:clamp(120px,30vw,480px)}
.pillar__title{
  margin-top:20px;
  font-size:var(--fs-sub);font-weight:400;line-height:1.02;letter-spacing:-.033em;
  color:var(--ink);text-wrap:balance;
  transition:color .45s var(--ease);
}
.pillar__body .body{margin-top:20px;transition:color .45s var(--ease)}

/* =========================================================
   05 · COMO VOCÊ É ATENDIDO
   ========================================================= */
.team{
  position:relative;isolation:isolate;overflow:hidden;
  border-radius:var(--radius);
  min-height:clamp(600px,64vw,908px);
  display:flex;align-items:stretch;
  color:var(--cream-hi);
}
.team__bg{position:absolute;inset:0;z-index:-2}
.team__bg img{width:100%;height:100%;object-fit:cover;object-position:60% center}
.team__veil{
  position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(90deg,rgba(8,26,25,.86) 0%,rgba(8,26,25,.6) 34%,rgba(8,26,25,.14) 62%,rgba(8,26,25,.28) 100%),
    linear-gradient(180deg,rgba(8,26,25,.4) 0%,rgba(8,26,25,0) 30%,rgba(8,26,25,.72) 100%);
}
.team__inner{
  width:100%;max-width:var(--shell);margin-inline:auto;
  padding:clamp(104px,10vw,128px) var(--pad) clamp(40px,4vw,56px);
  display:flex;flex-direction:column;justify-content:space-between;gap:clamp(48px,6vw,80px);
}
.team__head{max-width:520px}
.team__head .h2{margin-top:14px}
.team__head .body{margin-top:22px;max-width:40ch}

.team__roles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,3.5vw,58px)}
.role{position:relative;padding-top:28px;cursor:default}
.role__rule{position:absolute;top:0;left:0;height:3px;width:56px;background:rgba(245,243,237,.5);
  transition:width .6s var(--ease),background-color .6s var(--ease)}
.role.is-open .role__rule{width:100%;background:var(--cream-hi)}
.role__title{
  font-size:var(--fs-lead);font-weight:400;line-height:1.02;letter-spacing:-.032em;
  color:var(--cream-hi);text-wrap:balance;
  transition:transform .6s var(--ease);
}
.role__text{
  margin-top:18px;font-size:var(--fs-body);line-height:1.6;color:rgba(245,243,237,.76);
  max-height:0;opacity:0;overflow:hidden;
  transition:max-height .6s var(--ease),opacity .5s var(--ease),margin-top .6s var(--ease);
}
.role.is-open .role__text{max-height:260px;opacity:1}

/* controles do carrossel: só aparecem onde o carrossel existe */
.carousel-nav{display:none}
.carousel-dots{display:flex;align-items:center;gap:8px}
.carousel-dot{
  width:8px;height:8px;border-radius:99px;padding:0;
  background:rgba(245,243,237,.3);
  transition:background-color .35s var(--ease),width .35s var(--ease);
}
.carousel-dot.is-on{width:24px;background:var(--sand)}
.carousel-arrows{display:flex;gap:8px}
.carousel-btn{
  width:44px;height:44px;border-radius:50%;
  display:grid;place-items:center;
  border:1px solid rgba(245,243,237,.3);color:var(--cream-hi);
  transition:background-color .3s var(--ease),opacity .3s var(--ease),border-color .3s var(--ease);
}
.carousel-btn:active{background:rgba(245,243,237,.12)}
.carousel-btn[disabled]{opacity:.28;pointer-events:none}
.carousel-btn svg{width:17px;height:17px}
.carousel-btn--prev svg{transform:rotate(180deg)}

/* =========================================================
   06 · O MÉTODO
   ========================================================= */
.method{
  margin-top:var(--gut);
  display:grid;grid-template-columns:minmax(0,44%) minmax(0,1fr);
  align-items:stretch;
  background:var(--sand-bg);
  border-radius:var(--radius);
  overflow:hidden;
}
.method__aside{
  padding:clamp(48px,7.5vw,120px) clamp(24px,4vw,64px) clamp(48px,5vw,80px) clamp(24px,8vw,120px);
}
.method__aside .h2{margin-top:16px}
.method__aside .body{margin-top:22px}

.steps{margin-top:clamp(32px,3.6vw,52px)}
.step{
  position:relative;
  display:flex;align-items:center;gap:20px;width:100%;
  padding:14px 0;border-top:1px solid rgba(23,45,46,.13);
  text-align:left;color:var(--ink-mute);
  transition:color .35s var(--ease);
}
.step__bar{
  position:absolute;left:0;bottom:-1px;height:2px;width:0;
  background:var(--green);pointer-events:none;
}
.step.is-active .step__bar{width:100%}
.steps.is-auto .step.is-active .step__bar{width:0;animation:stepBar var(--auto,6s) linear forwards}
@keyframes stepBar{from{width:0}to{width:100%}}
.steps li:last-child .step{border-bottom:1px solid rgba(23,45,46,.13)}
.step__n{
  font-family:"Tobias",Georgia,serif;font-feature-settings:"titl" 0;font-variant-ligatures:common-ligatures;
  font-size:1.125rem;line-height:1.2;flex:0 0 auto;width:clamp(34px,3.5vw,50px);color:var(--sand-deep);
  transition:color .35s var(--ease);
}
.step__t{font-size:var(--fs-body-lg);line-height:1.2;flex:1 1 auto}
.step__ico{width:16px;height:16px;flex:0 0 auto;opacity:0;transform:translateX(-6px);
  transition:opacity .35s var(--ease),transform .35s var(--ease)}
.step:hover{color:var(--ink)}
.step.is-active{color:var(--ink)}
.step.is-active .step__n{color:var(--ink)}
.step.is-active .step__ico{opacity:1;transform:none}

.method__panel{
  position:relative;isolation:isolate;overflow:hidden;
  margin:var(--gut) var(--gut) var(--gut) 0;
  border-radius:var(--radius);
  background:var(--sand-panel);
}
.method__pattern{position:absolute;inset:0;z-index:-1;overflow:hidden}
.method__pattern img{
  position:absolute;left:4.9%;top:-16.8%;width:120%;max-width:none;height:auto;
  transform:translateY(calc(var(--shift,0) * -1px));
  transition:transform 1.1s var(--ease);
  will-change:transform;
}
.method__stage{padding:clamp(48px,7.5vw,120px) clamp(28px,4vw,64px) clamp(48px,5vw,80px)}

.panel{animation:panelIn .5s var(--ease) both}
.panel[hidden]{display:none}
@keyframes panelIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.panel__n{
  font-family:"Tobias",Georgia,serif;font-feature-settings:"titl" 0;font-variant-ligatures:common-ligatures;
  font-size:clamp(2.5rem,1.6rem + 2.8vw,4rem);line-height:1.2;letter-spacing:-.02em;color:var(--sand-soft);
}
.panel__title{
  margin-top:18px;
  font-family:"Tobias",Georgia,serif;font-feature-settings:"titl" 0;font-variant-ligatures:common-ligatures;
  font-weight:400;font-size:var(--fs-h3);line-height:1.2;letter-spacing:-.02em;color:var(--ink);
  max-width:20ch;
}
.panel .body{margin-top:22px;max-width:56ch}
.panel__label{margin-top:34px;font-size:var(--fs-body);color:var(--ink)}
.panel__list{margin-top:8px;max-width:60ch}
.panel__list li{display:flex;gap:16px;align-items:flex-start;padding:18px 0;border-top:1px solid rgba(23,45,46,.13)}
.panel__list svg{width:18px;height:18px;flex:0 0 auto;margin-top:2px;color:var(--green);opacity:.7}
.panel__list p{font-size:var(--fs-body);line-height:1.55;color:var(--ink-soft)}

/* =========================================================
   07 · VISÃO DO INVESTIDOR
   ========================================================= */
.vision{
  position:relative;isolation:isolate;overflow:hidden;
  margin-top:var(--gut);
  background:var(--green-deep);
  border-radius:var(--radius);
  color:var(--cream-hi);
  padding-block:clamp(64px,7vw,112px);
}
.vision__pattern{position:absolute;right:-6%;top:-8%;width:min(64%,880px);z-index:-1;opacity:.34;mix-blend-mode:luminosity}
.vision__inner{width:100%;max-width:var(--shell);margin-inline:auto;padding-inline:var(--pad)}
.vision__head .h2{margin-top:16px}
.vision__head .body{margin-top:22px;max-width:56ch}
.vision__grid{
  margin-top:clamp(48px,6vw,88px);
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  column-gap:clamp(24px,3vw,48px);
}
.vision__grid li{
  display:flex;gap:16px;align-items:flex-start;
  padding:20px 0;border-top:1px solid rgba(245,243,237,.16);
}
.vision__grid svg{width:18px;height:18px;flex:0 0 auto;margin-top:2px;color:var(--sand);opacity:.85}
.vision__grid p{font-size:var(--fs-body);line-height:1.5;color:rgba(245,243,237,.68)}
.vision__grid strong{font-weight:600;color:var(--cream-hi)}
.vision__close{
  margin-top:clamp(56px,6vw,96px);text-align:center;
  font-family:"Tobias",Georgia,serif;font-feature-settings:"titl" 0;font-variant-ligatures:common-ligatures;
  font-weight:400;font-size:var(--fs-h3);line-height:1.22;letter-spacing:-.02em;color:var(--sand);
}

/* =========================================================
   08 · TECNOLOGIA + COMPARATIVO
   ========================================================= */
.tech{padding-block:var(--sec-y)}
.tech__top{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(32px,5vw,80px);align-items:center;
}
.tech__shot img{width:100%;height:auto}
.tech__text .h2{margin-top:16px;max-width:16ch}
.tech__text .body{margin-top:22px;max-width:46ch}
.tech__text .btn{margin-top:clamp(26px,2.6vw,36px)}
.tech__note{
  margin-top:clamp(40px,4vw,62px);display:flex;align-items:flex-start;
  font-size:var(--fs-body-lg);line-height:1.5;color:var(--ink);max-width:46ch;
}

.compare{margin-top:clamp(64px,7vw,110px);padding-top:clamp(48px,5vw,80px);border-top:1px solid var(--line)}
.compare__head{display:flex;flex-wrap:wrap;gap:24px;align-items:flex-end;justify-content:space-between}
.compare__head .h2{margin-top:14px}
.compare__hint{display:none}
.compare__viewport{position:relative;margin-top:clamp(40px,4.5vw,72px)}
.compare__fade{display:none}
.compare__scroll{overflow-x:auto}
.compare__table{
  min-width:760px;font-size:var(--fs-body);
  border-collapse:separate;border-spacing:0;
}
.compare__table th,.compare__table td{text-align:left;padding:18px 24px;vertical-align:middle}
.compare__table thead th{
  font-size:var(--fs-eyebrow);font-weight:500;letter-spacing:.11em;text-transform:uppercase;
  color:var(--sand-deep);padding-bottom:14px;
}
.compare__table tbody th{font-weight:400;color:var(--ink);padding-left:0;width:22%}
.compare__table tbody td{color:var(--ink-soft);border-top:1px solid var(--line)}
.compare__table tbody tr:first-child td{border-top:1px solid var(--line)}
.compare__table .is-nomma{color:var(--cream-hi);background:var(--green);position:relative}
.compare__table tbody .is-nomma{border-top:1px solid rgba(245,243,237,.14)}
.compare__table thead .is-nomma{color:var(--cream-hi);border-radius:var(--radius) var(--radius) 0 0;padding-top:18px}
.compare__table tbody tr:last-child .is-nomma{border-radius:0 0 var(--radius) var(--radius)}

/* =========================================================
   09 · MARQUEE
   ========================================================= */
.marquee{overflow:hidden;padding-block:clamp(28px,3.5vw,48px);margin-inline:calc(-1 * var(--gut))}
.marquee__track{display:flex;align-items:center;width:max-content;animation:marquee 38s linear infinite}
.marquee__item{
  font-family:"Tobias",Georgia,serif;font-feature-settings:"titl" 0;font-variant-ligatures:common-ligatures;
  font-weight:400;font-size:var(--fs-marquee);line-height:1.2;letter-spacing:-.02em;
  color:var(--sand);white-space:nowrap;
}
.marquee__sep{display:inline-block;width:18px;height:18px;border-radius:50%;background:var(--sand);margin-inline:clamp(28px,4vw,66px);flex:0 0 auto}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* =========================================================
   10 · FECHO
   ========================================================= */
.close{
  position:relative;isolation:isolate;overflow:hidden;
  border-radius:var(--radius);
  background:var(--cream-lo);
  padding-block:clamp(72px,8vw,128px);
  min-height:clamp(420px,46vw,588px);
  display:flex;align-items:center;
}
.close__pattern{position:absolute;right:0;top:0;bottom:0;display:flex;align-items:center;
  width:min(76%,1082px);z-index:-2;opacity:.85}
.close__pattern img{width:100%;height:auto}
.close::before{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(90deg,var(--cream-lo) 0%,rgba(235,232,222,.92) 34%,rgba(235,232,222,0) 62%)}
.close__inner{width:100%;max-width:var(--shell);margin-inline:auto;padding-inline:var(--pad);position:relative}
.close__title{margin-top:16px}
.close__inner .body{margin-top:24px}
.close__inner .btn{margin-top:clamp(28px,3vw,40px)}

/* =========================================================
   RODAPÉ
   ========================================================= */
.foot{
  margin-top:var(--gut);
  background:var(--green-deep);color:var(--cream-hi);
  border-radius:var(--radius);
  padding-block:clamp(48px,5vw,72px);
}
.foot__inner{
  width:100%;max-width:var(--shell);margin-inline:auto;padding-inline:var(--pad);
  display:grid;grid-template-columns:auto minmax(0,1.5fr) minmax(0,1fr) minmax(0,1fr);
  gap:clamp(28px,4vw,64px);align-items:start;
}
.foot__logo{display:flex;flex-direction:column;gap:10px;color:var(--cream-hi)}
.foot__logomark{width:80px;height:15px;fill:currentColor}
.foot__wordmark{width:48px;height:6px;fill:currentColor;opacity:.9}
.foot__col{display:flex;flex-direction:column;gap:14px}
.foot__fine{font-size:clamp(.75rem,.72rem + .13vw,.8125rem);line-height:1.6;color:rgba(245,243,237,.5)}
.foot__line{font-size:var(--fs-body);line-height:1.6;color:rgba(245,243,237,.82)}
.foot__line a{transition:color .3s var(--ease)}
.foot__line a:hover{color:var(--sand)}
.foot__social{display:flex;gap:12px;margin-top:6px}
.foot__social a{color:rgba(245,243,237,.65);transition:color .3s var(--ease)}
.foot__social a:hover{color:var(--cream-hi)}
.foot__social svg{width:20px;height:20px}

/* =========================================================
   RESPONSIVO
   ========================================================= */
@media (max-width:1200px){
  .method{grid-template-columns:minmax(0,360px) minmax(0,1fr)}
  .foot__inner{grid-template-columns:auto minmax(0,1fr) minmax(0,1fr);row-gap:40px}
  .foot__col--legal{grid-column:2 / -1}
}

@media (max-width:1024px){
  :root{--nav-h:64px}
  .why__head,.why__row{grid-template-columns:1fr;gap:16px}
  .why__bar{position:static;display:block;margin-bottom:18px}
  .why__row.is-in .why__bar{width:72px}
  .pillars__head{grid-template-columns:1fr}
  .pillars__head .body{justify-self:start}
  .pillars{padding-bottom:clamp(40px,6vw,56px)}
  .pillars__grid{grid-template-columns:1fr;gap:0;
    max-width:var(--shell);margin-inline:auto;padding-inline:var(--pad)}
  .pillar{border-top:1px solid var(--line);padding:32px 0;border-radius:0}
  .pillar::before{display:none}
  .pillar:first-child{border-top:0;padding-top:0}
  /* sem hover no toque: a imagem vira um cartão fixo dentro do pilar */
  .pillar__n{order:1}
  .pillar__media{
    order:2;position:relative;inset:auto;z-index:0;opacity:1;
    aspect-ratio:4/5;margin-top:24px;border-radius:14px;
  }
  .pillar__media img{transform:none;object-position:center top}
  .pillar__veil{display:none}
  .pillar__body{order:3}
  .pillar:hover .pillar__title,.pillar:hover .pillar__body .body{color:inherit}
  .pillar__body{margin-top:24px!important}
  .team__roles{grid-template-columns:1fr;gap:0}
  .role{padding:24px 0 26px;border-top:1px solid rgba(245,243,237,.18)}
  .role__rule{display:none}
  .role__text{max-height:none;opacity:1;margin-top:14px}
  .carousel-nav{
    display:flex;align-items:center;justify-content:space-between;gap:16px;
    margin-top:clamp(20px,4vw,28px);
  }
  .method{grid-template-columns:1fr}
  .method__aside{padding:clamp(48px,6vw,72px) var(--pad) clamp(32px,4vw,48px)}
  .method__panel{margin:0 var(--gut) var(--gut);border-radius:var(--radius)}
  .method__stage{padding:clamp(40px,6vw,64px) clamp(24px,4vw,40px)}
  .compare__table{min-width:660px}
  .vision__grid{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:32px}
  .tech__top{grid-template-columns:1fr;gap:40px}
  .tech__shot{max-width:560px}
  .foot__inner{grid-template-columns:repeat(2,minmax(0,1fr))}
  .foot__logo{grid-column:1 / -1}
  .foot__col--legal{grid-column:1 / -1}
}

@media (max-width:900px){
  /* HERO: a foto ocupa a metade de cima e desce dissolvendo no verde profundo,
     em vez de ficar presa numa faixa estreita no topo. */
  .hero{
    --band:clamp(320px,48svh,450px);
    background:var(--green-deep);
    justify-content:flex-end;
    padding:clamp(120px,20vw,170px) var(--pad) clamp(32px,6vw,48px);
  }
  .hero__tags,.hero__body{flex:0 0 auto}
  /* no celular a manchete respira um pouco mais que no desktop */
  .hero__title{line-height:1.08;letter-spacing:-.022em}
  .hero__media{inset:0 0 auto;height:var(--band)}
  .hero__slide img{object-position:center 36%}
  .hero__veil{
    background:linear-gradient(180deg,
      rgba(8,26,25,.46) 0%,
      rgba(8,26,25,.10) 28%,
      rgba(8,26,25,.46) 60%,
      rgba(8,26,25,.86) 82%,
      var(--green-deep) 100%);
  }

  /* as etiquetas viram uma trilha horizontal: todas ficam à vista, a da foto no ar
     fica acesa e a trilha desliza sozinha para centralizá-la. O dedo também arrasta. */
  .hero__tags{
    position:relative;inset:auto;z-index:2;
    display:flex;align-items:center;gap:8px;
    margin:0 calc(var(--pad) * -1) clamp(18px,3.5vw,26px);
    padding:3px calc(50vw - 40px);
    overflow-x:auto;overscroll-behavior-x:contain;
    scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;
    scrollbar-width:none;pointer-events:auto;
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 36px,#000 calc(100% - 36px),transparent 100%);
            mask-image:linear-gradient(90deg,transparent 0,#000 36px,#000 calc(100% - 36px),transparent 100%);
  }
  .hero__tags::-webkit-scrollbar{display:none}
  .tag{
    position:static;flex:0 0 auto;scroll-snap-align:center;
    height:34px;padding:0 14px;font-size:11.5px;
    background:rgba(8,26,25,.4);
    border-color:rgba(245,243,237,.18);
    color:rgba(252,251,248,.6);
    opacity:1;transform:none;cursor:pointer;
    transition:background .55s var(--ease),color .55s var(--ease),border-color .55s var(--ease);
  }
  .tag::before{opacity:.4;transition:opacity .55s var(--ease),background .55s var(--ease)}
  .tag.is-on{
    background:rgba(250,249,245,.95);
    border-color:transparent;color:var(--green-deep);transform:none;
  }
  .tag.is-on::before{background:var(--green);opacity:1}
  .tag::after{display:none}

  /* O MÉTODO: no celular cada etapa abre o próprio conteúdo logo abaixo.
     O JS move cada painel para dentro do <li> e desliga o avanço automático. */
  .method__panel{display:none}
  .method__aside{padding-bottom:clamp(44px,8vw,64px)}
  .step{align-items:flex-start;padding:18px 0;gap:14px}
  .step__t{padding-right:8px}
  .step__ico{opacity:.45;transform:rotate(90deg);margin-top:3px}
  .step.is-active .step__ico{opacity:1;transform:rotate(-90deg)}
  .step__bar{display:none}
  .steps .panel{
    margin:4px 0 22px;
    padding:24px 20px 26px;
    background:var(--sand-panel);
    border-radius:14px;
  }
  .steps .panel__n{display:none}
  .steps .panel__title{margin-top:0;font-size:clamp(1.25rem,1rem + 1.1vw,1.5rem);max-width:none}
  .steps .panel .body{margin-top:14px;max-width:none}
  .steps .panel__label{margin-top:24px}
  .steps .panel__list{margin-top:4px}
  .steps .panel__list li{padding:14px 0}
  .steps .panel__list li:first-child{border-top:0;padding-top:4px}


  /* COMO VOCÊ É ATENDIDO: no celular a foto vira uma faixa no topo,
     o texto desce para o fundo sólido e os três papéis viram carrossel */
  .team{display:block;min-height:0;background:var(--green-deep)}
  .team__bg{position:absolute;inset:0 0 auto;height:min(86vw,430px);z-index:-2}
  .team__bg img{height:100%;object-position:center 18%}
  .team__veil{
    position:absolute;inset:0 0 auto;height:min(86vw,430px);z-index:-1;
    background:linear-gradient(180deg,rgba(8,26,25,.42) 0%,rgba(8,26,25,.1) 38%,rgba(8,26,25,.75) 82%,var(--green-deep) 100%);
  }
  .team__inner{
    display:block;
    padding:calc(min(86vw,430px) + clamp(28px,5vw,40px)) var(--pad) clamp(40px,7vw,56px);
  }
  .team__head{max-width:none}
  .team__head .body{max-width:none}

  .team__roles{
    display:flex;gap:12px;
    margin-top:clamp(36px,7vw,52px);
    margin-inline:calc(-1 * var(--pad));
    padding:2px var(--pad) 6px;
    overflow-x:auto;overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .team__roles::-webkit-scrollbar{display:none}
  .role{
    flex:0 0 min(84%,320px);scroll-snap-align:center;
    padding:24px 22px 26px;border-top:0;
    border:1px solid rgba(245,243,237,.18);border-radius:14px;
    background:rgba(245,243,237,.05);
  }
  .role__rule{display:block;position:static;width:44px;height:2px;margin-bottom:20px;background:var(--sand)}
  .role.is-open .role__rule{width:44px;background:var(--sand)}
  .role__text{max-height:none;opacity:1;margin-top:14px}


  .claim{min-height:0}
  .claim__pattern{width:min(120%,760px);right:-14%;opacity:.75}
  .vision__pattern{width:min(120%,680px);right:-22%;opacity:.35}
  .close__pattern{width:min(170%,860px);right:-58%;opacity:.5}
  .close::before{background:linear-gradient(90deg,var(--cream-lo) 0%,rgba(235,232,222,.96) 46%,rgba(235,232,222,.35) 100%)}
}

@media (max-width:720px){
  :root{--pad:20px;--radius:14px}
  .nav__inner{padding:10px 10px 10px 18px;height:60px}
  .nav__lockup{--mark:92px; --word:55px; --lg:8px}
  .nav__logomark{height:17px}
  .nav__wordmark{height:7px}
  .nav__actions .btn--ghost{display:none}
  .hero{padding-top:100px}
  .hero__cta{flex-direction:column;align-items:stretch}
  .hero__cta .btn{justify-content:center}
  .why__close{display:block}
  .why__close .dot{margin-bottom:6px}
  .tech__note{display:block}
  .tech__note .dot{margin-bottom:6px}
  .vision__grid{grid-template-columns:1fr}
  .vision__close{text-align:left}
  .compare__head{flex-direction:column;align-items:flex-start}

  /* a tabela continua igual à do desktop, só rola na horizontal */
  .compare__hint{
    display:flex;align-items:center;gap:10px;
    margin-top:clamp(28px,5vw,40px);
    font-size:var(--fs-eyebrow);letter-spacing:.09em;text-transform:uppercase;
    color:var(--sand-deep);
  }
  .compare__hint svg{width:16px;height:16px;flex:0 0 auto;animation:hintSlide 1.8s var(--ease) infinite}
  @keyframes hintSlide{0%,100%{transform:translateX(0);opacity:.55}50%{transform:translateX(6px);opacity:1}}

  .compare__viewport{margin-top:14px}
  .compare__fade{
    display:block;position:absolute;top:0;bottom:0;right:0;width:64px;
    pointer-events:none;z-index:3;
    background:linear-gradient(90deg,rgba(245,243,237,0) 0%,var(--cream) 78%);
    transition:opacity .35s var(--ease);
  }
  .compare__fade.is-end{opacity:0}
  .compare__scroll{-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .compare__scroll::-webkit-scrollbar{display:none}
  .compare__table{min-width:600px}
  .compare__table th,.compare__table td{padding:16px 16px}
  .compare__table tbody th{
    position:sticky;left:0;z-index:2;
    background:var(--cream);padding-left:0;padding-right:18px;width:36%;
    box-shadow:10px 0 10px -10px rgba(23,45,46,.22);
  }
  .compare__table thead th:first-child{
    position:sticky;left:0;z-index:2;background:var(--cream);
    box-shadow:10px 0 10px -10px rgba(23,45,46,.22);
  }
  .foot__inner{grid-template-columns:1fr}
  .marquee__sep{width:12px;height:12px}
}