/* ═══════════════════════════════════════════════════════════
   LICITTA PRIME — Assessoria em Licitação
   Sistema visual derivado da identidade da marca
   ═══════════════════════════════════════════════════════════ */

/* ─────────── FONTES ─────────── */
@font-face{
  font-family:'Fraunces'; font-style:normal; font-weight:300 900;
  font-display:swap; src:url('../fonts/fraunces-latin.woff2') format('woff2');
  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:'Fraunces'; font-style:normal; font-weight:300 900;
  font-display:swap; src:url('../fonts/fraunces-latin-ext.woff2') format('woff2');
  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;
}
@font-face{
  font-family:'Montserrat'; font-style:normal; font-weight:300 700;
  font-display:swap; src:url('../fonts/montserrat-latin.woff2') format('woff2');
  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:'Montserrat'; font-style:normal; font-weight:300 700;
  font-display:swap; src:url('../fonts/montserrat-latin-ext.woff2') format('woff2');
  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;
}

/* ─────────── TOKENS ─────────── */
:root{
  /* cores da marca, extraídas do material original */
  --bone:      #F5F5F5;
  --bone-2:    #EDEAE5;
  --areia:     #D9CBB9;
  --areia-cl:  #E7DDD0;
  --taupe:     #A69077;
  --taupe-esc: #7B5D47;   /* marrom principal do arquivo vetorial da marca */
  --tinta:     #58493B;
  --tinta-esc: #2E251D;
  /* faixa de números e rodapé: marrons da própria logomarca, no lugar do
     verde que não pertencia à paleta */
  --marca:     #4B372E;
  --marca-esc: #241710;
  --texto:     #5F5348;
  --branco:    #FFFFFF;

  --linha:     rgba(88,73,59,.16);
  --linha-cl:  rgba(245,245,245,.18);

  /* tipografia */
  --disp: 'Fraunces', 'Iowan Old Style', Georgia, serif;
  --sans: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* ESCALA ÚNICA — todo tamanho de texto da página sai daqui.
     Antes cada bloco tinha o seu clamp() próprio e nada casava. */
  --fs-rot:  clamp(.66rem,.18vw + .62rem,.75rem);   /* rótulos em caixa alta */
  --fs-mini: clamp(.74rem,.12vw + .71rem,.8rem);    /* notas e legendas */
  --fs-p:    clamp(.95rem,.28vw + .89rem,1.02rem);  /* corpo */
  --fs-lead: clamp(1.06rem,.5vw + .95rem,1.24rem);  /* lead, missão e visão */
  --fs-h4:   clamp(1.12rem,.55vw + 1rem,1.34rem);   /* título de cartão */
  --fs-h3:   clamp(1.3rem,1vw + 1.06rem,1.74rem);   /* título de bloco */
  /* título de seção: reduzido para acompanhar o equilíbrio da seção Dúvidas,
     que a cliente aprovou. Título gigante = linha curta + muito vazio ao redor. */
  --fs-h2:   clamp(1.95rem,2.9vw,3.2rem);           /* título de seção */

  /* movimento — mesma família de curvas dos sites de referência */
  --e-expo: cubic-bezier(.19,1,.22,1);
  --e-io:   cubic-bezier(.76,0,.24,1);
  --e-back: cubic-bezier(.175,.885,.32,1.275);
  --t-micro: .45s;
  --t-med:   .8s;
  --t-lento: 1.15s;

  /* medidas
     --larg maior e --pad menor: em monitor grande sobrava faixa vazia demais
     nas laterais. --secao-y menor fecha o vão entre uma seção e a seguinte,
     que era a queixa do meio/fim da página.

     LARGURA FLUIDA — a faixa vazia lateral que a cliente marcou.
     Com 1460px fixos o container parava sempre no mesmo lugar e a sobra
     lateral crescia junto com o monitor: 38px de cada lado no notebook
     (1536) contra 294px no monitor dela (2048). Agora o container acompanha
     a tela a partir de ~1600px e a sobra fica proporcional em qualquer
     largura. Abaixo de 1600px NADA muda: o clamp() segura os mesmos 1460px. */
  --pad: clamp(1.25rem, 4.4vw, 4.4rem);
  --larg: clamp(1460px, 78vw + 140px, 2040px);
  /* quanto o container cresceu além da medida do notebook. A constelação do
     herói usa isto para crescer junto: se ela ficasse parada, o vão do meio
     que a cliente apontou na 1ª rodada voltaria a abrir. */
  --cresc: max(0px, var(--larg) - 1460px);
  --secao-y: clamp(3.4rem, 6.4vh, 5.4rem);
}

/* ─────────── BASE ─────────── */
*,*::before,*::after{ box-sizing:border-box }
html{ -webkit-text-size-adjust:100%; scroll-behavior:auto }
html.lenis, html.lenis body{ height:auto }
.lenis.lenis-smooth{ scroll-behavior:auto !important }
.lenis.lenis-stopped{ overflow:hidden }

body{
  margin:0; background:var(--bone); color:var(--texto);
  font-family:var(--sans); font-size:var(--fs-p);
  font-weight:400; line-height:1.72; letter-spacing:.002em;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
/* trava de rolagem do preloader só existe com JS — sem JS nada a esperar */
.js body.carregando{ overflow:hidden }
body.menu-aberto{ overflow:hidden }

img,svg{ display:block; max-width:100% }
img{ height:auto }
a{ color:inherit; text-decoration:none }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer }
ul,ol,dl,dd{ margin:0; padding:0; list-style:none }
p{ margin:0 0 1.15em }
p:last-child{ margin-bottom:0 }
h1,h2,h3,h4{ margin:0; font-weight:400 }
::selection{ background:var(--taupe); color:var(--bone) }

:focus-visible{ outline:2px solid var(--taupe); outline-offset:3px; border-radius:2px }

.pular{
  position:fixed; top:-100px; left:1rem; z-index:9999;
  background:var(--tinta-esc); color:var(--bone); padding:.8rem 1.2rem;
  font-size:var(--fs-mini); letter-spacing:.06em; transition:top .3s var(--e-expo);
}
.pular:focus{ top:1rem }

.int{ width:100%; max-width:var(--larg); margin-inline:auto; padding-inline:var(--pad) }
.secao{ padding-block:var(--secao-y); position:relative }

/* ─────────── TIPOGRAFIA ─────────── */
.rotulo{
  display:flex; align-items:center; gap:.7rem;
  font-size:var(--fs-rot); font-weight:600;
  letter-spacing:.22em; text-transform:uppercase; color:var(--taupe-esc);
  margin:0 0 clamp(1.1rem,2vw,1.7rem);
}
.rotulo--claro{ color:var(--areia) }
.rotulo__n{
  font-family:var(--disp); font-size:2.05em; font-weight:600; letter-spacing:.02em;
  font-variation-settings:'SOFT' 40,'WONK' 1,'opsz' 40;
  color:var(--taupe); line-height:1; position:relative; top:.06em; margin-right:.15em;
}
.rotulo__ponto{
  width:6px; height:6px; border-radius:50%; background:var(--taupe); flex:none;
  animation:pulso 2.6s var(--e-io) infinite;
}
@keyframes pulso{ 0%,100%{ opacity:1; transform:scale(1) } 50%{ opacity:.35; transform:scale(.72) } }

.titulo,.hero__titulo{
  font-family:var(--disp); font-weight:600; color:var(--tinta-esc);
  line-height:.98; letter-spacing:-.022em;
  font-variation-settings:'SOFT' 45,'WONK' 1,'opsz' 144;
  text-wrap:balance;
}
.titulo{ font-size:var(--fs-h2) }
.titulo--claro{ color:var(--bone) }
.titulo em,.hero__titulo em{
  font-style:normal; color:var(--taupe-esc);
  font-variation-settings:'SOFT' 90,'WONK' 1,'opsz' 144;
}
.titulo--claro em{ color:var(--areia) }

/* máscara de linha para o reveal tipográfico */
[data-linhas] .linha{
  display:block; overflow:hidden;
  padding-bottom:.14em; margin-bottom:-.14em;
}
[data-linhas] .linha > span{ display:block; will-change:transform }
.js [data-linhas] .linha > span{ transform:translate3d(0,112%,0) }
/* .-pronto: o JS limpa o transform inline no fim da animação — sem isto,
   o estado inicial acima voltaria a valer e o texto sumiria de novo. */
.js [data-linhas] .linha > span.-pronto{ transform:none }

.lead{ font-size:var(--fs-lead); line-height:1.55; color:var(--tinta); font-weight:400 }
.lead--sec{ color:var(--texto); margin-top:1em }

.regua{
  display:block; height:1px; width:100%; background:var(--linha);
  margin-top:clamp(1.7rem,3vw,2.5rem); transform-origin:left center;
}
.js .regua{ transform:scaleX(0) }

.cab-secao{ position:relative }
.cab-secao--dupla{
  display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(2rem,5vw,5rem); align-items:end;
}
.cab-secao__apoio{
  font-size:var(--fs-p); color:var(--texto);
  max-width:42ch; padding-bottom:.35em;
}
.cab-secao__apoio--claro{ color:rgba(217,203,185,.82) }
.cab-secao__apoio--baixo{ margin-top:clamp(1.2rem,2vw,1.6rem); grid-column:1; padding-bottom:0 }

/* ─────────── BOTÕES ─────────── */
.btn{
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  gap:.6rem; padding:.92rem 1.7rem; border-radius:999px; overflow:hidden;
  font-size:var(--fs-mini); font-weight:600; letter-spacing:.09em; text-transform:uppercase;
  white-space:nowrap; isolation:isolate;
  transition:color .5s var(--e-expo), border-color .5s var(--e-expo);
}
.btn--g{ padding:1.12rem 2.2rem }
.btn--bloco{ width:100%; margin-top:.6rem }
.btn > span{ position:relative; z-index:2 }
.btn::before{
  content:''; position:absolute; inset:0; z-index:1; border-radius:inherit;
  transform:translate3d(0,101%,0);
  transition:transform .62s var(--e-expo);
}
.btn:hover::before,.btn:focus-visible::before{ transform:translate3d(0,0,0) }

.btn--solido{ background:var(--tinta-esc); color:var(--bone) }
.btn--solido::before{ background:var(--taupe) }
.btn--solido:hover,.btn--solido:focus-visible{ color:var(--tinta-esc) }

.btn--linha{ color:var(--tinta-esc); border:1px solid var(--linha) }
.btn--linha::before{ background:var(--tinta-esc) }
.btn--linha:hover,.btn--linha:focus-visible{ color:var(--bone); border-color:var(--tinta-esc) }

.btn--claro{ background:var(--bone); color:var(--tinta-esc) }
.btn--claro::before{ background:var(--areia) }

/* ═══════════ PRELOADER ═══════════ */
/* sem JS o preloader nunca sairia da frente: só existe quando há JS */
.preloader{ display:none }
.js .preloader{
  position:fixed; inset:0; z-index:9000; background:var(--bone);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:2rem; will-change:clip-path;
}
.preloader__marca{ position:relative; width:clamp(66px,7vw,92px) }
.preloader__svg{ display:none }
.preloader__img{ width:100%; height:auto; opacity:0 }
.preloader__barra{
  width:min(230px,42vw); height:1px; background:var(--linha); position:relative; overflow:hidden;
}
.preloader__preenche{
  position:absolute; inset:0; background:var(--taupe);
  transform:scaleX(0); transform-origin:left center;
}
.preloader__conta{
  font-family:var(--disp); font-size:.9rem; font-weight:500; color:var(--taupe-esc);
  font-variant-numeric:tabular-nums; letter-spacing:.08em;
}
.preloader.pronto{ pointer-events:none }

/* ═══════════ CURSOR ═══════════ */
.cursor{ display:none }
@media (hover:hover) and (pointer:fine){
  .cursor{
    display:block; position:fixed; top:0; left:0; z-index:8000; pointer-events:none;
    mix-blend-mode:normal; will-change:transform;
  }
  .cursor__ponto{
    position:absolute; top:0; left:0; width:6px; height:6px; margin:-3px 0 0 -3px;
    background:var(--tinta-esc); border-radius:50%;
    transition:opacity .3s, transform .3s var(--e-expo);
  }
  .cursor__anel{
    position:absolute; top:0; left:0; width:38px; height:38px; margin:-19px 0 0 -19px;
    border:1px solid var(--linha); border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    transition:width .5s var(--e-expo), height .5s var(--e-expo),
               margin .5s var(--e-expo), background-color .5s var(--e-expo),
               border-color .5s var(--e-expo);
  }
  .cursor__rotulo{
    font-size:.58rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
    color:var(--bone); opacity:0; transform:scale(.6);
    transition:opacity .35s var(--e-expo), transform .45s var(--e-expo);
  }
  .cursor.-link .cursor__anel{ width:64px; height:64px; margin:-32px 0 0 -32px; border-color:var(--taupe) }
  .cursor.-link .cursor__ponto{ transform:scale(0) }
  .cursor.-media .cursor__anel{
    width:84px; height:84px; margin:-42px 0 0 -42px;
    background:var(--tinta-esc); border-color:transparent;
  }
  .cursor.-media .cursor__ponto{ transform:scale(0) }
  .cursor.-media .cursor__rotulo{ opacity:1; transform:scale(1) }
  .cursor.-claro .cursor__ponto{ background:var(--bone) }
  .cursor.-claro .cursor__anel{ border-color:var(--linha-cl) }
  body.cursor-on,body.cursor-on *{ cursor:none !important }
}

/* ═══════════ CABEÇALHO ═══════════ */
.cab{
  position:fixed; top:0; left:0; right:0; z-index:1000;
  padding-block:clamp(.85rem,1.6vw,1.35rem);
  transition:transform .65s var(--e-expo), background-color .5s ease, box-shadow .5s ease, padding .5s var(--e-expo);
}
.cab::before{
  content:''; position:absolute; inset:0; background:rgba(245,245,245,.82);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--linha);
  opacity:0; transition:opacity .5s var(--e-expo);
}
.cab.-solido::before{ opacity:1 }
.cab.-solido{ padding-block:.7rem }
.cab.-oculto{ transform:translate3d(0,-104%,0) }
.cab__int{
  position:relative; z-index:2;
  width:100%; max-width:var(--larg); margin-inline:auto; padding-inline:var(--pad);
  display:flex; align-items:center; justify-content:space-between; gap:2rem;
}
.cab__logo{ position:relative; display:block }
.cab__logo img{ width:clamp(190px,17.5vw,268px); height:auto; transition:width .5s var(--e-expo) }
.cab.-solido .cab__logo img{ width:clamp(166px,14vw,214px) }
.cab__logo-claro{
  position:absolute; inset:0; opacity:0; pointer-events:none;
  transition:opacity .45s var(--e-expo);
}
/* menu mobile aberto = fundo escuro atrás do cabeçalho: inverte a marca e o botão */
body.menu-aberto .cab__logo-claro{ opacity:1 }
body.menu-aberto .cab__logo img:first-child{ opacity:0; transition:opacity .3s }
body.menu-aberto .cab::before{ opacity:0 !important }
body.menu-aberto .menu-btn{ border-color:var(--linha-cl) }
body.menu-aberto .menu-btn span{ background:var(--bone) }

.cab__nav ul{ display:flex; gap:clamp(1.2rem,2.4vw,2.4rem) }
.cab__nav a{
  position:relative; font-size:var(--fs-mini); font-weight:500; letter-spacing:.04em;
  color:var(--tinta); padding-block:.35rem; transition:color .4s var(--e-expo);
}
.cab__nav a::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:var(--taupe); transform:scaleX(0); transform-origin:right center;
  transition:transform .5s var(--e-expo);
}
.cab__nav a:hover,.cab__nav a.-ativo{ color:var(--tinta-esc) }
.cab__nav a:hover::after,.cab__nav a.-ativo::after{ transform:scaleX(1); transform-origin:left center }

.cab__acoes{ display:flex; align-items:center; gap:1rem }
.cab__cta{ padding:.78rem 1.4rem }

.menu-btn{
  display:none; width:42px; height:42px; position:relative; flex:none;
  border:1px solid var(--linha); border-radius:50%;
}
.menu-btn span{
  position:absolute; left:12px; width:18px; height:1.5px; background:var(--tinta-esc);
  transition:transform .5s var(--e-expo), opacity .3s;
}
.menu-btn span:nth-child(1){ top:18px }
.menu-btn span:nth-child(2){ top:23px }
.menu-btn[aria-expanded="true"] span:nth-child(1){ transform:translateY(2.5px) rotate(45deg) }
.menu-btn[aria-expanded="true"] span:nth-child(2){ transform:translateY(-2.5px) rotate(-45deg) }

/* ═══════════ MENU MOBILE ═══════════ */
.menu-mob{
  position:fixed; inset:0; z-index:999; background:var(--tinta-esc);
  padding:clamp(6rem,16vh,9rem) var(--pad) 2.5rem;
  display:flex; flex-direction:column; justify-content:space-between;
  clip-path:inset(0 0 100% 0); visibility:hidden;
  transition:clip-path .85s var(--e-expo), visibility 0s .85s;
}
.menu-mob.-aberto{ clip-path:inset(0 0 0 0); visibility:visible; transition:clip-path .85s var(--e-expo), visibility 0s }
.menu-mob__nav li{ overflow:hidden }
.menu-mob__nav a{
  display:flex; align-items:baseline; gap:1rem; padding-block:.45rem;
  font-family:var(--disp); font-size:clamp(1.9rem,8vw,2.7rem); font-weight:500;
  color:var(--bone); font-variation-settings:'SOFT' 45,'WONK' 1,'opsz' 72;
  transform:translate3d(0,110%,0);
}
.menu-mob.-aberto .menu-mob__nav a{
  transform:translate3d(0,0,0);
  transition:transform .9s var(--e-expo) calc(var(--i,0) * 60ms + 150ms);
}
.menu-mob__i{
  font-family:var(--sans); font-size:.66rem; font-weight:600; letter-spacing:.18em;
  color:var(--taupe);
}
.menu-mob__pe{
  display:flex; flex-direction:column; gap:.35rem;
  padding-top:1.6rem; border-top:1px solid var(--linha-cl);
  font-size:var(--fs-p); color:var(--areia);
}

/* ═══════════ HERO ═══════════ */
/* min-height com teto: em monitor alto o herói esticava até 1080px e abria um
   vazio enorme entre o cabeçalho e o título, que não existe no notebook. */
.hero{
  position:relative; min-height:min(100svh,860px); display:flex; align-items:center;
  padding-block:clamp(6.5rem,12vh,8rem) clamp(3rem,6vh,4.2rem); overflow:hidden;
}
.hero__grade{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  width:100%; max-width:var(--larg); margin-inline:auto; padding-inline:var(--pad);
  display:grid; grid-template-columns:repeat(5,1fr);
}
.hero__grade i{ border-left:1px solid rgba(88,73,59,.05) }
.hero__grade i:last-child{ border-right:1px solid rgba(88,73,59,.05) }

.hero__int{
  position:relative; z-index:3;
  width:100%; max-width:var(--larg); margin-inline:auto; padding-inline:var(--pad);
}
.hero__rotulo{ margin-bottom:clamp(1.3rem,2.4vw,1.8rem) }
/* "Do edital ao contrato assinado": a cliente achou o título grande demais.
   Reduzido ~22% no topo da escala, mantendo as duas linhas. */
.hero__titulo{
  font-size:clamp(2.4rem,5.9vw,5.5rem);
  max-width:15ch; margin-bottom:clamp(1.8rem,3.6vw,2.8rem);
}
.hero__baixo{
  display:grid; grid-template-columns:minmax(0,1fr); gap:clamp(1.6rem,3vw,2.3rem);
  max-width:min(600px,54%);
}
.hero__texto{ font-size:var(--fs-lead); line-height:1.55; color:var(--tinta); max-width:42ch }
.hero__acoes{ display:flex; flex-wrap:wrap; gap:.85rem }

.hero__rolar{
  position:absolute; z-index:3;
  /* acompanha a coluna de texto, não a borda da janela */
  left:max(var(--pad), calc(50vw - var(--larg) / 2 + var(--pad)));
  bottom:clamp(1.4rem,3vh,2.4rem);
  display:flex; align-items:center; gap:.85rem;
  font-size:.64rem; font-weight:600; letter-spacing:.22em; text-transform:uppercase;
  color:var(--taupe-esc);
}
.hero__rolar-linha{
  display:block; width:64px; height:1px; background:var(--linha); overflow:hidden; position:relative;
}
.hero__rolar-linha i{
  position:absolute; inset:0; background:var(--taupe); transform-origin:left center;
  animation:rolar 2.4s var(--e-io) infinite;
}
@keyframes rolar{
  0%{ transform:scaleX(0); transform-origin:left center }
  45%{ transform:scaleX(1); transform-origin:left center }
  55%{ transform:scaleX(1); transform-origin:right center }
  100%{ transform:scaleX(0); transform-origin:right center }
}

/* constelação
   ATENÇÃO: a caixa da constelação tem de ter a mesma largura útil do
   container (1380px). Quando ela era `inset:0`, as fotos ficavam presas à
   janela: no notebook encostavam no texto e no monitor grande escorriam para
   a borda, abrindo o buraco no meio da dobra que a cliente apontou.
   Com a largura fluida do container, a caixa da constelação cresce um pouco
   MAIS que o container (fator 1.15) e continua encostada na borda direita
   dele: é isso que segura o vão texto→fotos praticamente parado
   (176px em 1920 → ~200px em 2048) enquanto as laterais encolhem. */
.constel{
  position:absolute; top:0; bottom:0; left:50%;
  width:calc(min(100% - var(--pad) * 2, var(--larg) - var(--pad) * 2) + var(--cresc) * 1.15);
  /* metade do crescimento volta para a esquerda: a borda direita fica
     exatamente onde o container termina, e a caixa cresce só para dentro */
  transform:translateX(calc(-50% - var(--cresc) * .575));
  z-index:1; pointer-events:none;
}
.constel__it{
  position:absolute; margin:0; overflow:hidden; will-change:transform;
  box-shadow:0 30px 60px -30px rgba(46,37,29,.28);
}
.constel__it img{ width:100%; height:100%; object-fit:cover; transform:scale(1.05) }
/* larguras acompanham o container mais largo: se as fotos não crescessem junto,
   o vão texto→fotos voltaria a abrir (mesmo bug que a cliente apontou).
   Em % da própria constelação (35.25 / 17.81 / 20.32 são exatamente os
   465/235/268px da versão anterior medidos na caixa de 1319px), então crescem
   sozinhas quando a tela cresce. O teto em vw continua valendo para telas
   estreitas, e por isso nada muda até 1536. */
.constel__it--a{ top:12%;   right:0;    width:min(28vw,35.25%); aspect-ratio:3/2 }
.constel__it--b{ top:52%;   right:27%;  width:min(16vw,17.81%); aspect-ratio:16/9 }
.constel__it--c{ bottom:4%; right:1%;   width:min(19vw,20.32%); aspect-ratio:4/5 }

.ficha{
  position:absolute; z-index:2; will-change:transform;
  display:flex; flex-direction:column; gap:.1rem;
  padding:.85rem 1.15rem; background:rgba(245,245,245,.94);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  border:1px solid var(--linha); border-radius:2px;
  box-shadow:0 18px 40px -22px rgba(46,37,29,.4);
}
.ficha__val{
  font-family:var(--disp); font-size:clamp(1rem,1.25vw,1.35rem); font-weight:600;
  color:var(--tinta-esc); line-height:1.05; letter-spacing:-.01em;
  font-variation-settings:'SOFT' 55,'WONK' 1,'opsz' 48;
}
.ficha__leg{ font-size:.6rem; font-weight:600; letter-spacing:.13em; text-transform:uppercase; color:var(--taupe-esc) }
.ficha--1{ top:36%;   right:20%  }
.ficha--2{ top:26%;   right:34% }
.ficha--3{ bottom:21%; right:19%  }

/* ═══════════ TICKER ═══════════ */
.ticker{
  background:var(--tinta-esc); color:var(--bone);
  padding-block:clamp(.95rem,1.5vw,1.25rem); overflow:hidden; position:relative;
}
.ticker__pista{ display:flex; width:max-content; will-change:transform }
.ticker__grupo{ display:flex; align-items:center; flex:none; padding-right:0 }
.ticker__grupo span{
  font-size:clamp(.68rem,.85vw,.8rem); font-weight:500; letter-spacing:.2em;
  text-transform:uppercase; white-space:nowrap; padding-inline:clamp(1.1rem,2.2vw,2rem);
}
.ticker__grupo i{ color:var(--taupe); font-size:.5rem; font-style:normal; opacity:.9 }

/* ═══════════ PORTAIS ═══════════
   As logos vêm em PNG já monocromático no marrom da marca (geradas em
   _ref/portais.py), para a tira não brigar com a paleta.                 */
.portais{
  background:var(--bone); border-bottom:1px solid var(--linha);
  padding-block:clamp(1.6rem,3vw,2.4rem); overflow:hidden;
}
.portais__rot{
  text-align:center; font-size:.62rem; font-weight:600; letter-spacing:.24em;
  text-transform:uppercase; color:var(--taupe-esc); opacity:.75;
  margin:0 0 clamp(1.1rem,2vw,1.6rem);
}
.portais__pista{ display:flex; width:max-content; will-change:transform }
.portais__grupo{ display:flex; align-items:center; flex:none }
.portais__it{
  display:flex; align-items:center; justify-content:center;
  height:38px; padding-inline:clamp(1.6rem,3.4vw,3.2rem);
  border-left:1px solid var(--linha);
}
.portais__it img{
  height:clamp(26px,2.6vw,36px); width:auto; opacity:.7;
  transition:opacity .5s var(--e-expo);
}
.portais__it--txt{
  font-family:var(--disp); font-size:clamp(1rem,1.4vw,1.28rem); font-weight:600;
  color:var(--tinta-esc); opacity:.68; white-space:nowrap; letter-spacing:-.01em;
  font-variation-settings:'SOFT' 55,'WONK' 1,'opsz' 40;
}

/* ═══════════ LINHA DO TEMPO ═══════════
   O padrão é pilha vertical: funciona sem JS, sem GSAP e com movimento
   reduzido. A classe .-h (posta pelo JS só quando a rolagem horizontal
   presa está mesmo ligada) troca para o trilho deitado.                  */
.lt{
  background:var(--tinta-esc); color:rgba(231,221,208,.8);
  padding-block:var(--secao-y); overflow:hidden; position:relative;
}
.lt__cab{ margin-bottom:clamp(1.8rem,3.4vw,2.6rem) }
.lt__palco{ position:relative; width:100%; max-width:var(--larg); margin-inline:auto; padding-inline:var(--pad) }
.lt__trilho{ position:relative }
.lt__lista{ display:grid }
.lt__it{ position:relative; padding:1.4rem 0 1.4rem 2.2rem; border-top:1px solid rgba(231,221,208,.14) }
.lt__it:first-child{ border-top:0 }
.lt__n{
  display:block; margin-bottom:.4rem;
  font-family:var(--disp); font-size:.9rem; font-weight:600; color:var(--areia);
  letter-spacing:.1em;
}
.lt__ponto{
  position:absolute; top:1.9rem; left:-4px;
  width:9px; height:9px; border-radius:50%; background:var(--areia); opacity:.5;
}
.lt__it--fim .lt__ponto{
  width:15px; height:15px; top:1.7rem; left:-7px; opacity:1;
  box-shadow:0 0 0 6px rgba(217,203,185,.13);
}
.lt__it h3{
  font-family:var(--disp); font-size:var(--fs-h3); font-weight:600; color:var(--bone);
  letter-spacing:-.018em; line-height:1.14; margin-bottom:.5rem;
  font-variation-settings:'SOFT' 50,'WONK' 1,'opsz' 72;
}
.lt__it--fim h3{ color:var(--areia) }
.lt__it p{ font-size:var(--fs-p); color:rgba(231,221,208,.7); max-width:46ch }
.lt__linha{ position:absolute; left:0; top:0; bottom:0; width:1px; background:rgba(231,221,208,.16) }
.lt__prog{ display:none }
/* o rodapé da linha do tempo só faz sentido no trilho deitado */
.lt__pe{
  display:none; align-items:center; justify-content:space-between; gap:1rem;
  width:100%; max-width:var(--larg); margin-inline:auto; padding-inline:var(--pad);
  margin-top:clamp(1.6rem,3vw,2.4rem);
}
.lt.-h .lt__pe{ display:flex }
.lt__conta{ display:none }
.lt__dica{
  font-size:.62rem; font-weight:600; letter-spacing:.22em; text-transform:uppercase;
  color:rgba(231,221,208,.42);
}

/* ── trilho deitado (só com JS, tela larga e altura suficiente) ── */
/* preso na tela: a seção ocupa a dobra inteira enquanto o trilho anda */
.lt.-h{ min-height:100svh; display:flex; flex-direction:column; justify-content:center }
.lt.-h .lt__palco{ max-width:none; padding-inline:0; overflow:hidden }
.lt.-h .lt__trilho{
  display:inline-flex; flex-direction:column;
  padding-inline:max(var(--pad), calc(50vw - var(--larg) / 2 + var(--pad)));
  will-change:transform;
}
.lt.-h .lt__lista{ display:flex; align-items:stretch; gap:clamp(1.4rem,2.6vw,2.4rem) }
.lt.-h .lt__it{
  flex:none; width:clamp(250px,25vw,330px);
  padding:5.4rem 0 0; border-top:0;
}
.lt.-h .lt__n{ position:absolute; top:0; left:0; margin:0 }
.lt.-h .lt__ponto{ top:calc(4rem - 4px); left:0 }
.lt.-h .lt__it--fim .lt__ponto{ top:calc(4rem - 7px); left:-3px }
.lt.-h .lt__linha{ left:0; right:0; top:4rem; bottom:auto; width:auto; height:1px }
.lt.-h .lt__prog{
  display:block; position:absolute; inset:0; background:var(--areia);
  transform:scaleX(0); transform-origin:left center;
}
.lt.-h .lt__pe{ margin-top:clamp(2rem,4vw,3rem) }
.lt.-h .lt__conta{
  display:block; font-family:var(--disp); font-size:.95rem; font-weight:600;
  color:rgba(231,221,208,.5); letter-spacing:.06em; font-variant-numeric:tabular-nums;
}
.lt.-h .lt__conta em{ font-style:normal; color:var(--areia); display:inline-block }

/* ═══════════ REVELAR IMAGEM (técnica de cortina) ═══════════ */
.revelar-img{ position:relative; margin:0; overflow:hidden }
.revelar-img__painel{
  position:absolute; inset:0; z-index:2; background:var(--areia); pointer-events:none;
}
/* absoluto, não relativo: a figura declara aspect-ratio, mas o miolo ficava
   com a altura natural da imagem. Quando a proporção da figura era mais alta
   que a da foto, sobrava um bloco de nada dentro da própria moldura (na seção
   Sobre eram 330px invisíveis). Preso em inset:0 a foto preenche a moldura. */
.revelar-img__media{ position:absolute; inset:0; z-index:1; overflow:hidden }
.revelar-img__media img{ width:100%; height:100%; object-fit:cover }
.js .revelar-img__media{ clip-path:inset(100% 0% 0% 0%) }
.js .revelar-img__media img{ transform:scale(1.18) }

/* ═══════════ SOBRE ═══════════ */
.sobre__corpo{
  display:grid; grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  gap:clamp(2.4rem,5vw,5rem); align-items:start;
  margin-top:clamp(2.2rem,4.4vw,3.2rem);
}
.sobre__img{ aspect-ratio:4/3; position:sticky; top:16vh }
.sobre__txt > p{ max-width:52ch }
.mv{
  display:grid; gap:clamp(1.4rem,2.6vw,1.9rem);
  margin-top:clamp(1.9rem,3.6vw,2.6rem); padding-top:clamp(1.6rem,3vw,2.2rem);
  border-top:1px solid var(--linha);
}
.mv__it dt{
  font-family:var(--disp); font-size:var(--fs-h4); font-weight:600; color:var(--tinta-esc);
  font-variation-settings:'SOFT' 60,'WONK' 1,'opsz' 40; margin-bottom:.45rem;
  letter-spacing:-.014em;
}
.mv__it dd{ font-size:var(--fs-lead); line-height:1.5; color:var(--tinta); max-width:50ch }

/* ═══════════ FUNDADORA ═══════════ */
/* coluna da foto mais estreita: com dois parágrafos a menos no texto, a foto
   alta sobrava altura e abria vazio ao lado. O recorte 4/5 fica como estava. */
.fundadora{
  display:grid; grid-template-columns:minmax(0,.52fr) minmax(0,1fr);
  gap:clamp(2rem,4.2vw,3.8rem); align-items:center;
  margin-top:clamp(2.2rem,4.4vw,3.2rem); padding-top:clamp(1.9rem,3.6vw,2.6rem);
  border-top:1px solid var(--linha);
}
/* quadrada e ancorada no topo: mantém o enquadramento do retrato (cabeça até a
   cintura) sem sobrar altura ao lado do texto, que ficou mais curto */
.fundadora__img{ aspect-ratio:1/1 }
.fundadora__img img{ object-position:50% 0 }
.fundadora__txt .rotulo{ margin-bottom:.8rem }
.fundadora__nome{
  font-family:var(--disp); font-size:var(--fs-h2); font-weight:600; color:var(--tinta-esc);
  line-height:1; letter-spacing:-.022em;
  font-variation-settings:'SOFT' 45,'WONK' 1,'opsz' 144;
}
.fundadora__cargo{
  max-width:none; margin:.6rem 0 .35rem;
  font-family:var(--disp); font-size:var(--fs-h4); font-weight:600;
  color:var(--taupe-esc); letter-spacing:-.01em; line-height:1.2;
  font-variation-settings:'SOFT' 60,'WONK' 1,'opsz' 40;
}
.fundadora__esp{
  max-width:none; margin:0 0 1.4rem; font-size:var(--fs-rot); font-weight:600;
  letter-spacing:.12em; text-transform:uppercase; color:var(--texto); line-height:1.7;
}
.fundadora__txt .lead{ margin-bottom:1em }
.fundadora__txt .lead:last-child{ margin-bottom:0 }
.fundadora__txt p{ max-width:54ch }

/* ═══════════ VALORES ═══════════ */
.valores{ margin-top:clamp(2.6rem,5vw,4rem) }
.valores__tit{
  font-family:var(--disp); font-size:var(--fs-h2); font-weight:600; color:var(--tinta-esc);
  line-height:1; letter-spacing:-.022em;
  font-variation-settings:'SOFT' 45,'WONK' 1,'opsz' 144;
  margin-bottom:clamp(1.5rem,2.8vw,2.1rem);
}
.valores__lista{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(1.4rem,3vw,2.6rem);
}
.valores__lista li{ padding-top:1.4rem; border-top:1px solid var(--linha) }
.valores__n{
  display:block; font-family:var(--disp); font-size:.9rem; font-weight:600;
  color:var(--taupe-esc); letter-spacing:.08em; margin-bottom:.9rem;
}
.valores__lista h4{
  font-family:var(--disp); font-size:var(--fs-h4); font-weight:600;
  color:var(--tinta-esc); font-variation-settings:'SOFT' 60,'WONK' 1,'opsz' 40;
  margin-bottom:.5rem; letter-spacing:-.014em; line-height:1.2;
}
.valores__lista p{ font-size:var(--fs-p) }

/* ═══════════ NÚMEROS ═══════════ */
.numeros{
  background:var(--marca); color:var(--areia-cl);
  padding-block:clamp(3rem,5.6vw,4.6rem); position:relative; overflow:hidden;
}
.numeros::after{
  content:''; position:absolute; right:-10%; top:-40%; width:60%; aspect-ratio:1;
  background:radial-gradient(circle, rgba(166,144,119,.16), transparent 62%);
  pointer-events:none;
}
.numeros__grade{
  position:relative; z-index:1;
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)) minmax(0,1.15fr);
  gap:clamp(2rem,4vw,3.5rem); align-items:start;
}
.numero{ border-top:1px solid var(--linha-cl); padding-top:clamp(1.2rem,2.4vw,1.8rem) }
.numero__val{ display:block; overflow:hidden; padding-bottom:.06em }
.numero__val em{
  display:block; font-family:var(--disp); font-style:normal; white-space:nowrap;
  font-size:clamp(2.1rem,4.1vw,3.6rem); font-weight:600; line-height:.95;
  color:var(--bone); letter-spacing:-.03em;
  font-variation-settings:'SOFT' 45,'WONK' 1,'opsz' 144;
  font-variant-numeric:tabular-nums;
}
.numero__leg{
  display:block; margin-top:1rem; font-size:var(--fs-mini); line-height:1.6;
  color:rgba(217,203,185,.86); letter-spacing:.01em;
}
.numeros__nota{
  border-top:1px solid var(--linha-cl); padding-top:clamp(1.2rem,2.4vw,1.8rem);
}
.numeros__nota p{ font-size:var(--fs-p); line-height:1.7; color:rgba(231,221,208,.92); max-width:38ch }
.numeros__nota strong{ color:var(--bone); font-weight:600 }

/* ═══════════ SERVIÇOS ═══════════ */
.servicos{ position:relative }
.serv{ margin-top:clamp(1rem,2vw,1.6rem) }
.serv__it{ border-bottom:1px solid var(--linha) }
.serv__cab{
  display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center;
  gap:clamp(1rem,2.6vw,2.2rem); width:100%; text-align:left;
  padding-block:clamp(1.3rem,2.5vw,1.85rem);
}
.serv__n{
  font-family:var(--disp); font-size:.9rem; font-weight:600; color:var(--taupe-esc);
  letter-spacing:.08em; transition:color .5s var(--e-expo), transform .7s var(--e-expo);
}
.serv__tit{
  font-family:var(--disp); font-weight:600; letter-spacing:-.018em; line-height:1.1;
  font-size:clamp(1.24rem,2.35vw,1.98rem); color:var(--tinta-esc);
  font-variation-settings:'SOFT' 45,'WONK' 1,'opsz' 96;
  transition:transform .8s var(--e-expo), color .5s var(--e-expo);
}
.serv__mais{
  position:relative; width:40px; height:40px; flex:none; border-radius:50%;
  border:1px solid var(--linha); transition:background-color .5s var(--e-expo), border-color .5s var(--e-expo), transform .7s var(--e-expo);
}
.serv__mais::before,.serv__mais::after{
  content:''; position:absolute; top:50%; left:50%; background:var(--tinta-esc);
  transition:transform .55s var(--e-expo), background-color .5s var(--e-expo);
}
.serv__mais::before{ width:13px; height:1.5px; margin:-.75px 0 0 -6.5px }
.serv__mais::after{ width:1.5px; height:13px; margin:-6.5px 0 0 -.75px }

@media (hover:hover){
  .serv__it:hover .serv__tit{ transform:translateX(clamp(.5rem,1.4vw,1.4rem)) }
  .serv__it:hover .serv__n{ color:var(--tinta-esc) }
  .serv__it:hover .serv__mais{ background:var(--tinta-esc); border-color:var(--tinta-esc); transform:rotate(90deg) }
  .serv__it:hover .serv__mais::before,.serv__it:hover .serv__mais::after{ background:var(--bone) }
}
.serv__it.-aberta .serv__mais{ background:var(--tinta-esc); border-color:var(--tinta-esc); transform:rotate(135deg) }
.serv__it.-aberta .serv__mais::before,.serv__it.-aberta .serv__mais::after{ background:var(--bone) }
.serv__it.-aberta .serv__tit{ color:var(--tinta-esc) }

.serv__painel{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .75s var(--e-expo) }
.serv__it.-aberta .serv__painel{ grid-template-rows:1fr }
.serv__painel-int{
  overflow:hidden;
  display:grid; grid-template-columns:minmax(0,1fr); gap:1.4rem;
}
.serv__painel-int > p{
  max-width:62ch; font-size:var(--fs-p); padding-bottom:clamp(1.3rem,2.4vw,1.9rem);
  padding-left:clamp(0rem,4.4vw,3.9rem);
  opacity:0; transform:translateY(14px);
  transition:opacity .6s var(--e-expo) .12s, transform .7s var(--e-expo) .12s;
}
.serv__it.-aberta .serv__painel-int > p{ opacity:1; transform:none }
.serv__foto-mob{ display:none }

/* ═══════════ SERVIÇOS AVULSOS (Produtos Prime) ═══════════ */
/* Linha de produto com preço fechado, diferente da assessoria contínua da
   seção 02: por isso os dois blocos são painéis fechados, e não a lista de
   fiozinhos do resto da página. São só dois cartões de propósito — a ideia
   era caber o material inteiro em uma dobra, sem virar catálogo. */
.avulsos__grade{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(1.3rem,2.4vw,2.1rem);
  margin-top:clamp(1.6rem,3vw,2.4rem);
}
.pacote{
  display:flex; flex-direction:column;
  padding:clamp(1.5rem,2.8vw,2.3rem);
  background:var(--branco); border:1px solid var(--linha); border-radius:3px;
}
.pacote__topo{
  display:grid; grid-template-columns:auto minmax(0,1fr);
  align-items:baseline; gap:.35rem .9rem;
  padding-bottom:1rem; border-bottom:1px solid var(--linha);
}
.pacote__n{
  font-family:var(--disp); font-size:.9rem; font-weight:600;
  color:var(--taupe); letter-spacing:.08em;
}
.pacote__tit{
  font-family:var(--disp); font-size:var(--fs-h3); font-weight:600;
  color:var(--tinta-esc); letter-spacing:-.02em; line-height:1.12;
  font-variation-settings:'SOFT' 50,'WONK' 1,'opsz' 72;
}
/* o preço fecha o cartão, depois de todo o texto. o margin-top:auto ficou aqui
   (saiu do .pacote__cta) para preço e botão alinharem nos dois cartões */
.pacote__preco{
  margin:auto 0 .9rem; text-align:right; white-space:nowrap; line-height:1.05;
  font-family:var(--disp); font-size:var(--fs-h4); font-weight:600;
  color:var(--taupe-esc);
  font-variation-settings:'SOFT' 55,'WONK' 1,'opsz' 48;
}
.pacote__preco em{
  display:block; font-style:normal; font-family:var(--sans);
  font-size:var(--fs-rot); font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; color:var(--texto); margin-bottom:.2rem;
}
.pacote__lead{ margin:1.1rem 0 0; font-size:var(--fs-p); color:var(--tinta) }
.pacote__rot{
  margin:1.25rem 0 .7rem; font-size:var(--fs-rot); font-weight:600;
  letter-spacing:.18em; text-transform:uppercase; color:var(--taupe-esc);
}
.pacote__lista{ display:grid; gap:.42rem; font-size:var(--fs-p) }
.pacote__lista li{ position:relative; padding-left:1.5rem; line-height:1.5 }
/* o "check" do material dela, desenhado em CSS para não entrar fonte de ícone */
.pacote__lista li::before{
  content:''; position:absolute; left:.1rem; top:.5em; width:9px; height:5px;
  border-left:1.5px solid var(--taupe); border-bottom:1.5px solid var(--taupe);
  transform:rotate(-45deg);
}
.pacote__entrega{
  margin:1.3rem 0 0; padding-top:1.1rem; border-top:1px solid var(--linha);
  font-size:var(--fs-p);
}
.pacote__entrega strong{ color:var(--tinta-esc); font-weight:600 }
.pacote__ideal{
  margin:.8rem 0 clamp(1.4rem,2.4vw,1.9rem);
  font-size:var(--fs-mini); color:var(--taupe-esc); line-height:1.6;
}
.pacote__cta{ width:100% }
.avulsos__nota{
  margin:clamp(1.1rem,2vw,1.6rem) 0 0;
  font-size:var(--fs-mini); color:var(--texto); line-height:1.65; max-width:88ch;
}
.avulsos__fecho{
  display:flex; flex-wrap:wrap; align-items:baseline;
  justify-content:space-between; gap:.8rem 2.5rem;
  margin-top:clamp(1.5rem,2.8vw,2.2rem); padding-top:clamp(1.4rem,2.6vw,2rem);
  border-top:1px solid var(--linha);
}
.avulsos__fecho-frase{
  margin:0; max-width:46ch;
  font-family:var(--disp); font-size:var(--fs-h3); font-weight:600;
  color:var(--tinta-esc); letter-spacing:-.02em; line-height:1.16;
  font-variation-settings:'SOFT' 50,'WONK' 1,'opsz' 72;
}
.avulsos__fecho-nota{
  margin:0; font-size:var(--fs-rot); font-weight:600; letter-spacing:.18em;
  text-transform:uppercase; color:var(--taupe-esc);
}

/* ═══════════ METODOLOGIA ═══════════ */
.metodo{ background:var(--bone-2) }
.metodo__corpo{
  display:grid; grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);
  gap:clamp(2.5rem,5.5vw,5.4rem); margin-top:clamp(2.2rem,4.4vw,3.2rem);
}
.metodo__fixo{ position:sticky; top:18vh; align-self:start }
.metodo__contador{ display:flex; align-items:baseline; gap:.55rem; margin-bottom:1.6rem }
.metodo__num{
  font-family:var(--disp); font-size:clamp(3.4rem,7vw,5.6rem); font-weight:600;
  line-height:.86; color:var(--tinta-esc); letter-spacing:-.04em;
  font-variation-settings:'SOFT' 45,'WONK' 1,'opsz' 144; font-variant-numeric:tabular-nums;
  display:inline-block; will-change:transform;
}
.metodo__tot{
  font-family:var(--disp); font-size:1.1rem; font-weight:500; color:var(--taupe);
  letter-spacing:.02em;
}
.metodo__desc{ font-size:var(--fs-p); max-width:34ch; color:var(--texto) }
.metodo__trilho{
  margin-top:clamp(1.8rem,3.4vw,2.6rem); height:2px; width:100%;
  background:rgba(88,73,59,.13); position:relative; overflow:hidden;
}
.metodo__prog{
  position:absolute; inset:0; background:var(--taupe);
  transform:scaleX(0); transform-origin:left center;
}

.metodo__etapas{ display:grid; gap:0 }
.etapa{
  padding-block:clamp(1.6rem,3.2vw,2.5rem); border-top:1px solid var(--linha);
  display:grid; grid-template-columns:auto minmax(0,1fr);
  column-gap:clamp(1.2rem,3vw,2.6rem); row-gap:0;
  align-items:start; transition:opacity .7s var(--e-expo);
}
.etapa:last-child{ border-bottom:1px solid var(--linha) }
.etapa__n{
  grid-column:1; grid-row:1 / span 2;
  font-family:var(--disp); font-size:.9rem; font-weight:600; color:var(--taupe-esc);
  letter-spacing:.08em; padding-top:.45em;
}
.etapa h3{ grid-column:2; grid-row:1 }
.etapa p{ grid-column:2; grid-row:2 }
.etapa h3{
  font-family:var(--disp); font-size:var(--fs-h3); font-weight:600;
  color:var(--tinta-esc); letter-spacing:-.018em; line-height:1.12; margin-bottom:.85rem;
  font-variation-settings:'SOFT' 50,'WONK' 1,'opsz' 72;
}
.etapa p{ max-width:56ch; font-size:var(--fs-p) }

/* ═══════════ RESULTADOS ═══════════ */
.resultados .cab-secao--dupla{ align-items:end }
.resultados__img{ aspect-ratio:16/11; width:100% }
.res{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(1.8rem,3.2vw,2.8rem);
  margin-top:clamp(2rem,3.8vw,2.9rem);
}
.res__it{ padding-top:clamp(1.4rem,2.6vw,2rem); border-top:1px solid var(--linha) }
.res__it h3{
  font-family:var(--disp); font-size:var(--fs-h3); font-weight:600;
  color:var(--tinta-esc); letter-spacing:-.018em; line-height:1.15; margin-bottom:.75rem;
  font-variation-settings:'SOFT' 55,'WONK' 1,'opsz' 60;
}
.res__it p{ max-width:52ch; font-size:var(--fs-p) }
.res__it strong{ color:var(--tinta-esc); font-weight:600 }

/* ═══════════ DIFERENCIAIS ═══════════ */
.dif{ background:var(--bone-2) }
/* São 3 cartões: uma fileira de 3 colunas fecha cheia, sem o buraco que a
   cliente apontou. Fica em 3 colunas até 860px e cai direto para 1. */
.dif__grade{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(1.5rem,2.6vw,2.2rem) clamp(1.8rem,3.2vw,2.9rem);
  margin-top:clamp(1.4rem,2.6vw,2rem);
}
.dif__it{ padding-top:clamp(1.3rem,2.4vw,1.8rem); border-top:1px solid var(--linha) }
.dif__it p{ max-width:52ch }
.dif__it h3{
  font-family:var(--disp); font-size:var(--fs-h4); font-weight:600;
  color:var(--tinta-esc); letter-spacing:-.015em; line-height:1.18; margin-bottom:.6rem;
  font-variation-settings:'SOFT' 55,'WONK' 1,'opsz' 48;
}
.dif__it p{ font-size:var(--fs-p) }

.juridico{
  display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:clamp(2rem,4.2vw,3.8rem); align-items:center;
  margin-top:clamp(2.4rem,4.6vw,3.5rem); padding-top:clamp(1.9rem,3.6vw,2.7rem);
  border-top:1px solid var(--linha);
}
.juridico__img{ aspect-ratio:16/11 }
.juridico__txt h3{
  font-family:var(--disp); font-size:var(--fs-h3); font-weight:600;
  color:var(--tinta-esc); letter-spacing:-.02em; line-height:1.14; margin-bottom:.9rem;
  font-variation-settings:'SOFT' 50,'WONK' 1,'opsz' 72;
}
.juridico__txt p{ max-width:52ch; font-size:var(--fs-p) }
.juridico__nota{
  margin-top:1.2rem; font-size:var(--fs-mini); letter-spacing:.1em; text-transform:uppercase;
  font-weight:600; color:var(--taupe-esc);
}

/* ═══════════ DÚVIDAS ═══════════ */
/* o vão entre a seção 06 e a 07 somava o rodapé desta seção com o topo do
   contato: dava mais de 250px de nada em monitor grande. */
.duvidas{ padding-bottom:clamp(2.4rem,4vw,3.2rem) }
.faq{ margin-top:clamp(1rem,2vw,1.6rem) }
.faq__it{ border-bottom:1px solid var(--linha) }
.faq__cab{
  display:flex; align-items:flex-start; justify-content:space-between; gap:2rem;
  width:100%; text-align:left; padding-block:clamp(1.25rem,2.4vw,1.75rem);
}
.faq__cab span{
  font-family:var(--disp); font-size:var(--fs-h4); font-weight:600;
  color:var(--tinta-esc); letter-spacing:-.012em; line-height:1.32;
  font-variation-settings:'SOFT' 55,'WONK' 1,'opsz' 48;
  transition:transform .7s var(--e-expo);
}
.faq__cab i{
  position:relative; width:30px; height:30px; flex:none; margin-top:.15em;
  transition:transform .6s var(--e-expo);
}
.faq__cab i::before,.faq__cab i::after{
  content:''; position:absolute; top:50%; left:50%; background:var(--taupe-esc);
  transition:transform .5s var(--e-expo), background-color .4s;
}
.faq__cab i::before{ width:13px; height:1.5px; margin:-.75px 0 0 -6.5px }
.faq__cab i::after{ width:1.5px; height:13px; margin:-6.5px 0 0 -.75px }
@media (hover:hover){ .faq__cab:hover span{ transform:translateX(.45rem) } }
.faq__it.-aberta .faq__cab i{ transform:rotate(135deg) }
.faq__it.-aberta .faq__cab i::before,.faq__it.-aberta .faq__cab i::after{ background:var(--tinta-esc) }
.faq__painel{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .7s var(--e-expo) }
.faq__it.-aberta .faq__painel{ grid-template-rows:1fr }
.faq__int{ overflow:hidden }
.faq__int p{
  max-width:64ch; font-size:var(--fs-p); padding-bottom:clamp(1.4rem,2.6vw,2rem); padding-right:3rem;
  opacity:0; transform:translateY(12px);
  transition:opacity .55s var(--e-expo) .1s, transform .65s var(--e-expo) .1s;
}
.faq__it.-aberta .faq__int p{ opacity:1; transform:none }
.faq__int strong{ color:var(--tinta-esc); font-weight:600 }

/* ═══════════ CONTATO ═══════════ */
.contato{
  position:relative; background:var(--tinta-esc); color:var(--areia-cl);
  padding-block:clamp(3.6rem,6.6vw,5.6rem); overflow:hidden;
}
.contato__fundo{ position:absolute; inset:0; z-index:0; opacity:.16 }
.contato__fundo img{
  width:100%; height:120%; object-fit:cover; will-change:transform;
  filter:grayscale(.35);
}
.contato::after{
  content:''; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(105deg, var(--tinta-esc) 26%, rgba(46,37,29,.72) 62%, rgba(46,37,29,.9));
}
.contato__int{
  position:relative; z-index:2;
  display:grid; grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);
  gap:clamp(2.5rem,5.5vw,5.5rem); align-items:center;
}
.contato__lead{
  margin-top:clamp(1.3rem,2.4vw,1.8rem); max-width:44ch;
  font-size:var(--fs-lead); line-height:1.55; color:rgba(231,221,208,.9);
}
.contato__vias{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(1.4rem,2.6vw,2rem);
  margin-top:clamp(2rem,3.8vw,2.8rem); padding-top:clamp(1.6rem,3vw,2.2rem);
  border-top:1px solid var(--linha-cl);
}
.contato__rot{
  display:block; font-size:.62rem; font-weight:600; letter-spacing:.2em;
  text-transform:uppercase; color:var(--taupe); margin-bottom:.5rem;
}
.contato__vias a,.contato__txt{
  font-family:var(--disp); font-size:var(--fs-h4); font-weight:500;
  color:var(--bone); letter-spacing:-.005em;
  font-variation-settings:'SOFT' 55,'WONK' 1,'opsz' 40;
}
.contato__vias a{ position:relative; display:inline-block; overflow-wrap:anywhere }
.contato__vias a::after{
  content:''; position:absolute; left:0; right:0; bottom:-3px; height:1px; background:var(--areia);
  transform:scaleX(0); transform-origin:right center; transition:transform .55s var(--e-expo);
}
.contato__vias a:hover::after{ transform:scaleX(1); transform-origin:left center }

/* formulário */
.form{
  background:rgba(245,245,245,.045); border:1px solid var(--linha-cl);
  padding:clamp(1.6rem,3.4vw,2.6rem); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
}
.form__tit{
  font-family:var(--disp); font-size:var(--fs-h3); font-weight:600;
  color:var(--bone); margin-bottom:1.8rem; letter-spacing:-.015em;
  font-variation-settings:'SOFT' 55,'WONK' 1,'opsz' 48;
}
.campo{ position:relative; margin-bottom:1.5rem }
.campo input,.campo textarea{
  width:100%; background:none; border:0; border-bottom:1px solid var(--linha-cl);
  padding:.9rem 0 .55rem; color:var(--bone); font-family:var(--sans);
  font-size:var(--fs-p); line-height:1.5; border-radius:0;
  transition:border-color .45s var(--e-expo);
}
.campo textarea{ resize:vertical; min-height:64px }
.campo input:focus,.campo textarea:focus{ outline:none; border-bottom-color:var(--areia) }
.campo label{
  position:absolute; left:0; top:.9rem; pointer-events:none;
  font-size:var(--fs-p); color:rgba(217,203,185,.7);
  transition:transform .5s var(--e-expo), font-size .5s var(--e-expo), color .4s;
  transform-origin:left top;
}
.campo label i{ font-style:normal; opacity:.6 }
.campo input:focus + label,
.campo input:not(:placeholder-shown) + label,
.campo textarea:focus + label,
.campo textarea:not(:placeholder-shown) + label{
  transform:translateY(-1.15rem) scale(.72); color:var(--taupe);
}
.campo__erro{
  display:block; font-size:.7rem; letter-spacing:.06em; color:#D9A48F;
  height:0; opacity:0; transition:opacity .3s, height .3s;
}
.campo.-erro input,.campo.-erro textarea{ border-bottom-color:#D9A48F }
.campo.-erro .campo__erro{ height:1.3rem; opacity:1; padding-top:.35rem }
.form .btn--solido{ background:var(--bone); color:var(--tinta-esc) }
.form .btn--solido::before{ background:var(--areia) }
.form .btn--solido:hover{ color:var(--tinta-esc) }
.form__nota{
  margin-top:1.1rem; font-size:var(--fs-mini); line-height:1.6; color:rgba(217,203,185,.6);
}
.form.-enviado .form__tit{ color:var(--areia) }

/* ═══════════ RODAPÉ ═══════════ */
.pe{
  background:var(--marca-esc); color:rgba(231,221,208,.72);
  padding-block:clamp(2.8rem,5.4vw,4.2rem) clamp(1.4rem,2.6vw,2rem);
}
.pe__topo{
  display:flex; flex-wrap:wrap; gap:2rem; align-items:flex-end; justify-content:space-between;
  padding-bottom:clamp(2rem,3.8vw,2.6rem); border-bottom:1px solid var(--linha-cl);
}
.pe__logo img{ width:clamp(200px,22vw,270px); height:auto }
.pe__frase{
  font-family:var(--disp); font-size:var(--fs-h3); font-weight:500;
  color:var(--bone); line-height:1.28; text-align:right; letter-spacing:-.015em;
  font-variation-settings:'SOFT' 60,'WONK' 1,'opsz' 60;
}
.pe__grade{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(2rem,4vw,3rem);
  padding-block:clamp(2rem,3.8vw,2.6rem);
}
.pe__rot{
  font-size:.62rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase;
  color:var(--taupe); margin-bottom:1.1rem;
}
.pe__col li{ font-size:var(--fs-mini); line-height:2.1 }
.pe__col a{ position:relative; transition:color .4s var(--e-expo) }
.pe__col a:hover{ color:var(--bone) }
.pe__base{
  display:flex; flex-wrap:wrap; gap:1rem; align-items:center; justify-content:space-between;
  padding-top:clamp(1.4rem,3vw,2rem); border-top:1px solid var(--linha-cl);
  font-size:var(--fs-mini); letter-spacing:.02em;
}
.pe__topo-link{
  position:relative; font-size:.7rem; font-weight:600; letter-spacing:.16em;
  text-transform:uppercase; color:var(--areia);
}
.pe__topo-link::after{
  content:''; position:absolute; left:0; right:0; bottom:-4px; height:1px; background:var(--areia);
  transform:scaleX(1); transform-origin:right center; transition:transform .55s var(--e-expo);
}
.pe__topo-link:hover::after{ transform:scaleX(0) }

/* ═══════════ WHATSAPP FLUTUANTE ═══════════ */
.zap{
  position:fixed; right:clamp(1rem,2.4vw,2rem); bottom:clamp(1rem,2.4vw,2rem); z-index:900;
  display:flex; align-items:center; gap:0; overflow:hidden;
  height:56px; padding:0 17px; border-radius:999px;
  background:var(--tinta-esc); color:var(--areia);
  box-shadow:0 16px 34px -14px rgba(46,37,29,.6);
  opacity:0; transform:translate3d(0,120%,0) scale(.9); pointer-events:none;
  transition:opacity .6s var(--e-expo), transform .7s var(--e-expo), gap .55s var(--e-expo), padding .55s var(--e-expo);
}
.zap.-vis{ opacity:1; transform:none; pointer-events:auto }
.zap svg{ flex:none }
.zap__txt{
  font-size:var(--fs-mini); font-weight:600; letter-spacing:.06em; white-space:nowrap;
  max-width:0; opacity:0; transition:max-width .6s var(--e-expo), opacity .4s var(--e-expo);
}
@media (hover:hover){
  .zap:hover{ gap:10px; padding:0 22px 0 17px }
  .zap:hover .zap__txt{ max-width:180px; opacity:1 }
}

/* ═══════════ ANIMAÇÃO DE ENTRADA GENÉRICA ═══════════ */
.js [data-revelar]{ opacity:0; transform:translate3d(0,26px,0) }
.js [data-revelar].-pronto{ transform:none }

/* ═══════════════════════════════════════════════════════════
   RESPONSIVO
   ═══════════════════════════════════════════════════════════ */
@media (max-width:1180px){
  .constel__it--a{ width:min(29vw,300px); top:12% }
  .constel__it--b{ display:none }
  .ficha--2{ display:none }
  .hero__baixo{ max-width:min(520px,58%) }
}

@media (max-width:1024px){
  .cab__nav{ display:none }
  .menu-btn{ display:block }
  .cab__cta{ display:none }
  .sobre__corpo{ grid-template-columns:minmax(0,1fr); gap:2.6rem }
  /* relative, nunca static: o miolo da moldura é absoluto e precisa deste
     elemento como referência, senão a foto escapa e ocupa a tela inteira.
     E `top:auto` é obrigatório: o `top:16vh` do sticky do desktop continua
     valendo em relative e deslocava a foto 135px para baixo, abrindo um vão
     branco acima dela e cobrindo o primeiro parágrafo (print da cliente). */
  .sobre__img{ position:relative; top:auto; aspect-ratio:16/10 }
  .fundadora{ grid-template-columns:minmax(0,1fr); gap:2rem }
  .fundadora__img{ aspect-ratio:16/10 }
  .res{ grid-template-columns:repeat(2,minmax(0,1fr)) }
  .valores__lista{ grid-template-columns:repeat(2,minmax(0,1fr)) }
  .numeros__grade{ grid-template-columns:repeat(2,minmax(0,1fr)) }
  .metodo__corpo{ grid-template-columns:minmax(0,1fr); gap:2.4rem }
  .metodo__fixo{ position:static }
  .metodo__trilho{ display:none }
  .juridico{ grid-template-columns:minmax(0,1fr); gap:2rem }
  .contato__int{ grid-template-columns:minmax(0,1fr); gap:3rem }
  .pe__grade{ grid-template-columns:repeat(2,minmax(0,1fr)) }
}

@media (max-width:860px){
  .cab-secao--dupla{ grid-template-columns:minmax(0,1fr); gap:1.8rem; align-items:start }
  .cab-secao__apoio{ padding-bottom:0 }
  .resultados__img{ aspect-ratio:16/10 }
  .res{ grid-template-columns:minmax(0,1fr) }
  .dif__grade{ grid-template-columns:minmax(0,1fr) }
  .constel{ display:none }
  .hero{ min-height:auto; padding-block:clamp(7.5rem,22vh,10rem) clamp(4rem,10vh,6rem) }
  .hero__baixo{ max-width:100% }
  .hero__grade{ display:none }
  .hero__rolar{ display:none }
  .hero__titulo{ max-width:14ch }
  .serv__foto-mob{
    display:block; width:100%; aspect-ratio:3/2; object-fit:cover;
    margin-bottom:clamp(1.4rem,3vw,2rem);
  }
  .serv__painel-int > p{ padding-bottom:1.1rem; padding-left:0 }
  .serv__painel-int{ gap:0 }
  .serv__cab{ gap:1rem; grid-template-columns:auto minmax(0,1fr) auto }
  .faq__int p{ padding-right:0 }
  .pe__frase{ text-align:left }
  .pe__topo{ align-items:flex-start }
  .avulsos__grade{ grid-template-columns:minmax(0,1fr) }
}

@media (max-width:560px){
  .valores__lista{ grid-template-columns:minmax(0,1fr) }
  .numeros__grade{ grid-template-columns:minmax(0,1fr) }
  .pe__grade{ grid-template-columns:minmax(0,1fr) }
  .contato__vias{ grid-template-columns:minmax(0,1fr) }
  .hero__acoes{ flex-direction:column; align-items:stretch }
  .hero__acoes .btn{ width:100% }
  .zap{ height:52px; padding:0 15px }
  .serv__n{ display:none }
  .serv__cab{ grid-template-columns:minmax(0,1fr) auto }
  .pacote__preco{ text-align:left }
  .pacote__cta{ white-space:normal; text-align:center }
}

/* ═══════════ MOVIMENTO REDUZIDO ═══════════ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important; scroll-behavior:auto !important;
  }
  .js [data-linhas] .linha > span{ transform:none !important }
  .js [data-revelar]{ opacity:1 !important; transform:none !important }
  .js .regua{ transform:scaleX(1) !important }
  .js .revelar-img__media{ clip-path:none !important }
  .js .revelar-img__media img{ transform:none !important }
  .revelar-img__painel{ display:none }
  .preloader{ display:none }
  .cursor{ display:none !important }
  .constel__it,.ficha{ transform:none !important }
  .lt__trilho{ transform:none !important }
}