/* ============================================================
   Ideal Sistemas — uma empresa Ideal GC
   Estrutura: trilho lateral persistente + coluna
   ============================================================ */

:root{
  --ground:    #F7F9F5;   /* branco-papel com viés verde, como o site da GC */
  --surface:   #FFFFFF;
  --surface-2: #EFF3EB;
  --line:      #E3E8DF;
  --line-2:    #CDD6C7;

  --ink:       #18211B;
  --ink-2:     #47544A;
  --muted:     #718070;

  --accent:        #5F8F26;   /* verde GC escurecido — texto e traços legíveis no branco */
  --accent-bright: #8DC63F;   /* verde GC puro — preenchimentos, luz, botões */
  --accent-dim:#9DBF6E;
  --jade:      #5F8F26;
  --dim:       #A3AFA0;       /* texto fantasma legível (números, reservados) */

  --display: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --body:    'IBM Plex Sans', system-ui, -apple-system, sans-serif;
  --mono:    'IBM Plex Mono', ui-monospace, Consolas, monospace;

  --rail: 268px;
  --pad:  clamp(24px, 5vw, 88px);
  --ease: cubic-bezier(.16,1,.3,1);
}

*{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--ground);
  color:var(--ink);
  font-family:var(--body);
  font-weight:300;
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

::selection{ background:var(--accent-bright); color:var(--ink); }

::-webkit-scrollbar{ width:10px; }
::-webkit-scrollbar-track{ background:var(--ground); }
::-webkit-scrollbar-thumb{ background:var(--line-2); }
::-webkit-scrollbar-thumb:hover{ background:var(--accent-dim); }

a{ color:inherit; }

.skip{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--accent-bright); color:var(--ink); padding:12px 18px;
  font-family:var(--mono); font-size:13px;
}
.skip:focus{ left:0; }

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

/* grão sutil sobre tudo -------------------------------------- */
body::after{
  content:''; position:fixed; inset:0; pointer-events:none; z-index:50;
  opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ============================================================
   TRILHO LATERAL
   ============================================================ */

/* ============================================================
   CABEÇALHO FLUTUANTE — sem barra lateral, o site é a tela toda
   ============================================================ */

.topo{
  position:fixed; top:0; left:0; right:0; z-index:70;
  display:flex; align-items:center; justify-content:space-between;
  gap:20px;
  padding:clamp(16px,2vw,26px) var(--pad);
  background:linear-gradient(to bottom, rgba(247,249,245,.92), rgba(247,249,245,0));
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  -webkit-mask-image:linear-gradient(to bottom, #000 62%, transparent);
  mask-image:linear-gradient(to bottom, #000 62%, transparent);
  transition:transform .5s var(--ease), opacity .4s ease;
}
.topo.escondido{ transform:translateY(-104%); opacity:0; }
.topo.limpo{ background:none; backdrop-filter:none; -webkit-backdrop-filter:none; }

.topo-acoes{ display:flex; align-items:center; gap:14px; }

.topo-cta{
  text-decoration:none; border:1px solid var(--line-2);
  padding:10px 18px;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ink-2);
  transition:border-color .3s ease, color .3s ease;
}
.topo-cta:hover{ border-color:var(--accent); color:var(--accent); }

.menu-btn{
  width:44px; height:44px; flex:none; cursor:pointer;
  background:none; border:1px solid var(--line-2);
  display:grid; place-content:center; gap:5px;
  transition:border-color .3s ease;
}
.menu-btn:hover{ border-color:var(--accent); }
.menu-btn span{
  display:block; width:17px; height:1.5px; background:var(--ink);
  transition:transform .4s var(--ease), opacity .3s ease;
}
.menu-btn[aria-expanded="true"] span:first-child{ transform:translateY(3.25px) rotate(45deg); }
.menu-btn[aria-expanded="true"] span:last-child{ transform:translateY(-3.25px) rotate(-45deg); }

/* menu em tela cheia -------------------------------------- */
.menu{
  position:fixed; inset:0; z-index:65;
  background:rgba(247,249,245,.97);
  backdrop-filter:blur(22px); -webkit-backdrop-filter:blur(22px);
  display:flex; flex-direction:column; justify-content:center;
  padding:clamp(80px,12vh,140px) var(--pad) clamp(28px,4vh,48px);
  opacity:0; transition:opacity .45s ease;
}
.menu.aberto{ opacity:1; }
.menu[hidden]{ display:none; }

.menu-lista{
  list-style:none; margin:0; padding:0;
  display:flex; flex-direction:column; gap:clamp(4px,1vh,12px);
  max-width:900px;
}
.menu-lista a{
  display:flex; align-items:baseline; gap:clamp(14px,2vw,28px);
  text-decoration:none; color:var(--ink);
  font-family:var(--display); font-weight:900;
  font-size:clamp(26px,4.4vw,58px); letter-spacing:-.045em; line-height:1.12;
  padding:4px 0;
  opacity:0; transform:translateY(18px);
  transition:color .3s ease, opacity .6s ease, transform .7s var(--ease);
}
.menu.aberto .menu-lista a{ opacity:1; transform:none; }
.menu-lista li:nth-child(1) a{ transition-delay:.05s }
.menu-lista li:nth-child(2) a{ transition-delay:.09s }
.menu-lista li:nth-child(3) a{ transition-delay:.13s }
.menu-lista li:nth-child(4) a{ transition-delay:.17s }
.menu-lista li:nth-child(5) a{ transition-delay:.21s }
.menu-lista li:nth-child(6) a{ transition-delay:.25s }
.menu-lista li:nth-child(7) a{ transition-delay:.29s }
.menu-lista li:nth-child(8) a{ transition-delay:.33s }
.menu-lista a:hover{ color:var(--accent); }
.menu-lista a i{
  font-family:var(--mono); font-style:normal;
  font-size:clamp(11px,1vw,13px); letter-spacing:.1em;
  color:var(--dim); font-weight:400;
}
.menu-lista a:hover i{ color:var(--accent); }

.menu-rodape{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; margin-top:auto; padding-top:clamp(24px,4vh,44px);
  border-top:1px solid var(--line);
  font-family:var(--mono); font-size:11px; letter-spacing:.06em; color:var(--muted);
}

html.menu-lock, html.menu-lock body{ overflow:hidden; }

.wordmark{ text-decoration:none; display:block; }

.wm-row{ display:flex; align-items:center; gap:11px; }
.wm-txt{ display:flex; flex-direction:column; gap:3px; }

/* a marca original da GC num medalhão: o PNG tem respiro e fundo
   claro próprios — o círculo assume esse fundo e alinha o conjunto
   opticamente com a altura das duas linhas de texto */
.wm-bulb{
  flex:none; width:38px; height:38px; border-radius:50%;
  background:var(--surface); box-shadow:0 0 0 1px var(--line-2);
  display:grid; place-items:center;
}
.wm-bulb img{ width:24px; height:auto; display:block; }

.wm-main{
  display:block;
  font-family:var(--display);
  font-weight:900;
  font-size:19px;
  letter-spacing:-.038em;
  line-height:1;
  color:var(--ink);
}
.wm-thin{ font-weight:500; color:var(--ink-2); margin-left:.3em; }

/* assinatura: filete curto + texto, alinhada à esquerda */
.wm-endorse{
  display:flex; align-items:center; gap:8px;
  font-family:var(--mono); font-size:8.5px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--muted); white-space:nowrap;
}
.wm-endorse::before{ content:''; height:1px; width:14px; flex:none; background:var(--line-2); }
.wm-endorse b{ color:var(--accent); font-weight:500; }

/* índice ----------------------------------------------------- */

.rail-index{ position:relative; display:flex; flex-direction:column; gap:2px; }

.rail-marker{
  position:absolute; left:-26px; width:2px; height:26px; background:var(--accent);
  top:0; opacity:0;
  transition:transform .5s var(--ease), opacity .3s ease;
}

.rail-index a{
  display:flex; align-items:baseline; gap:11px;
  padding:5px 0; text-decoration:none;
  font-family:var(--mono); font-size:12.5px; letter-spacing:.01em;
  color:var(--muted);
  transition:color .28s ease;
}
.rail-index a i{ font-style:normal; font-size:10.5px; color:var(--line-2); transition:color .28s ease; }
.rail-index a:hover{ color:var(--ink); }
.rail-index a:hover i{ color:var(--accent-dim); }
.rail-index a.on{ color:var(--ink); }
.rail-index a.on i{ color:var(--accent); }

/* rodapé do trilho ------------------------------------------- */

.rail-bottom{ display:flex; flex-direction:column; gap:16px; }

.status{
  display:flex; align-items:center; gap:9px;
  font-family:var(--mono); font-size:11px; letter-spacing:.04em; color:var(--muted);
}
.pip{
  width:6px; height:6px; border-radius:50%; background:var(--jade);
  box-shadow:0 0 0 0 rgba(141,198,63,.55);
  animation:pulse 3.4s infinite;
}
@keyframes pulse{
  0%{ box-shadow:0 0 0 0 rgba(141,198,63,.5); }
  70%{ box-shadow:0 0 0 7px rgba(141,198,63,0); }
  100%{ box-shadow:0 0 0 0 rgba(141,198,63,0); }
}

.rail-cta{
  display:block; text-align:center; text-decoration:none;
  border:1px solid var(--line-2); padding:11px 14px;
  font-family:var(--mono); font-size:11.5px; letter-spacing:.09em; text-transform:uppercase;
  color:var(--ink-2);
  transition:border-color .3s ease, color .3s ease, background .3s ease;
}
.rail-cta:hover{ border-color:var(--accent); color:var(--accent); }

/* ============================================================
   COLUNA
   ============================================================ */

.column{ margin-left:0; }

/* O conteúdo NASCE MAIS ABAIXO. Antes a seção começava colada no topo
   logo que a palavra se desfazia: o leitor via tudo de uma vez e o
   capítulo seguinte já estava chegando. O respiro no topo dá distância
   de rolagem para ler antes da próxima palavra — vale para TODAS as
   seções, porque a regra é do .sec. */
.sec{
  position:relative;
  padding:clamp(150px,24vh,270px) var(--pad) clamp(80px,9vw,130px);
  border-top:1px solid var(--line);
  overflow:hidden;
}

/* capítulo — o palco vazio onde a palavra de partículas se forma e
   SEGURA antes de a seção existir. Só espaço de rolagem: a palavra
   é desenhada pelo canvas fixo da narradora; o conteúdo vizinho é
   velado por JS enquanto ela está em cena. Sem JS não há palavra —
   e não há vão. Movimento reduzido: capítulo some, seções puras. */
.chapter{ height:0; pointer-events:none; }
.js .chapter{ height:clamp(470px, 60vh, 800px); }
/* folga final: rolagem que o último capítulo precisa para completar */
.tail-spacer{ width:100%; pointer-events:none; background:var(--ground); }
@media (prefers-reduced-motion:reduce){
  .chapter{ display:none !important; }
}
/* o conteúdo respira no centro, o fundo ocupa a tela toda */
.sec > *:not(.scan):not(.sec-photo):not(.ghost-n){
  max-width:1240px; margin-left:auto; margin-right:auto;
}

/* numeral-fantasma atrás de cada seção — papel de parede QUIETO:
   só contorno, sem preenchimento, sem evento, sem mudança de cor */
.ghost-n{
  position:absolute; top:clamp(20px,3vw,44px); right:calc(var(--pad) * .4);
  z-index:0; pointer-events:none; user-select:none;
  font-family:var(--display); font-weight:900;
  font-size:clamp(120px,17vw,240px); line-height:1; letter-spacing:-.05em;
  color:transparent;
  -webkit-text-stroke:1px var(--line-2);
  opacity:.45;
  will-change:transform;
}
.sec > *:not(.ghost-n){ position:relative; z-index:2; }

.label{
  font-family:var(--mono); font-size:11px; letter-spacing:.15em;
  text-transform:uppercase; color:var(--muted);
  margin:0 0 clamp(30px,4vw,52px);
  display:flex; align-items:baseline; gap:12px;
}
.label i{ font-style:normal; color:var(--accent); }

h2{
  font-family:var(--display); font-weight:900;
  font-size:clamp(28px,3.5vw,45px); line-height:1.06; letter-spacing:-.035em;
  margin:0; text-wrap:balance;
}

.sec-title{ max-width:19ch; margin-bottom:clamp(38px,5vw,64px); }
.sec-title.big{ max-width:22ch; }

.sec-note{
  color:var(--muted); font-size:15px; max-width:56ch;
  margin:-28px 0 46px;
}

.sec-split{
  display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
  gap:clamp(34px,6vw,86px); align-items:start;
  margin-bottom:clamp(46px,6vw,80px);
}
.sec-split h2{ max-width:16ch; }

.prose p{
  color:var(--ink-2); max-width:60ch; margin:0 0 20px;
}
.prose p:last-child{ margin-bottom:0; }

/* ============================================================
   HERO
   ============================================================ */

.hero{
  position:relative; min-height:100vh;
  display:flex; flex-direction:column; justify-content:center;
  padding:clamp(72px,9vh,110px) var(--pad) clamp(56px,7vh,84px);
  overflow:hidden;
}

/* fundo fotográfico do hero — a fábrica, sob véu de marca */
.hero-photo{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background:url('assets/img-fabrica.jpg') center 42%/cover no-repeat;
  filter:saturate(.55) contrast(1.02) brightness(1.06);
  opacity:0; transition:opacity 2s ease .3s;
}
.hero-photo.in{ opacity:.5; }
.hero-photo::after{
  content:''; position:absolute; inset:0;
  background:
    linear-gradient(100deg, #F7F9F5 0%, rgba(247,249,245,.94) 34%, rgba(247,249,245,.6) 58%, rgba(247,249,245,.35) 100%),
    radial-gradient(80% 70% at 88% 88%, rgba(141,198,63,.14), transparent 62%);
}
@media (max-width:1080px){
  .hero-photo.in{ opacity:.38; }
  .hero-photo::after{
    background:
      linear-gradient(180deg, rgba(247,249,245,.97) 0%, rgba(247,249,245,.86) 45%, rgba(247,249,245,.72) 100%);
  }
}

.hero-canvas{
  position:absolute; inset:0; width:100%; height:100%;
  z-index:0; opacity:0; transition:opacity 2.2s ease .25s;
}
.hero-canvas.in{ opacity:1; }

/* a lâmpada-narradora — UM canvas fixo para a página inteira.
   Sem opacidade e sem transição de propósito: a visibilidade é
   inteiramente decidida pelo desenho, quadro a quadro — impossível
   um CSS apagar a lâmpada de novo. */
.orb-canvas{
  position:fixed; inset:0; width:100%; height:100%;
  z-index:3; pointer-events:none;
}
/* na fase-palavra a narradora segue na frente do conteúdo: as
   letras de areia (e o véu de papel sob elas) leem por cima
   de qualquer texto corrido — o momento é delas */
.orb-canvas.fore{ z-index:3; }
/* estação "quem confia": pedido do dono — ali a lâmpada fica ATRÁS
   do conteúdo, para reaparecer inteira no capítulo do contato */
.orb-canvas.back{ z-index:1; }
/* modal aberto: a areia desenha a moldura ACIMA do backdrop e do painel */
.orb-canvas.modal{ z-index:93; }

.hero-inner{
  position:relative; z-index:2;
  max-width:1240px; width:100%; margin:0 auto;
}

.hero h1{
  font-family:var(--display); font-weight:900;
  font-size:clamp(34px,4.3vw,62px); line-height:1.02; letter-spacing:-.045em;
  margin:0 0 clamp(20px,2.2vw,28px); max-width:16ch;
}

/* linhas do título sobem uma a uma de dentro da máscara */
.hl{ display:block; overflow:hidden; padding-bottom:.06em; margin-bottom:-.06em; }
.js .hli{ display:block; transform:translateY(115%); }
.js .hli.in{
  transform:none;
  transition:transform 1.05s var(--ease);
}
.hl:nth-child(2) .hli.in{ transition-delay:.12s; }

.hero .label{ margin-bottom:26px; }

.lede{
  font-size:clamp(16px,1.15vw,18px); line-height:1.6;
  color:var(--ink-2); max-width:56ch; margin:0 0 clamp(26px,2.8vw,34px);
}

.hero-actions{ display:flex; flex-wrap:wrap; gap:14px; margin-bottom:clamp(34px,4vw,52px); }

.btn{
  display:inline-block; text-decoration:none; cursor:pointer;
  background:var(--accent-bright); color:var(--ink); border:1px solid var(--accent-bright);
  padding:14px 26px;
  font-family:var(--mono); font-size:12px; letter-spacing:.09em; text-transform:uppercase;
  transition:background .3s ease, color .3s ease, border-color .3s ease, transform .3s var(--ease);
}
.btn:hover{ background:transparent; color:var(--accent); border-color:var(--accent); }

.hero-meta{
  display:flex; flex-wrap:wrap; gap:14px 0; margin:0;
  border-top:1px solid var(--line);
}
.hero-meta > div{
  padding:18px 32px 0 0; margin-right:32px;
  border-right:1px solid var(--line);
  padding-right:32px;
}
.hero-meta > div:last-child{ border-right:none; margin-right:0; }
.hero-meta dt{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--muted); margin-bottom:5px;
}
.hero-meta dd{ margin:0; font-size:15px; color:var(--ink); }

.hero-scroll{
  position:absolute; right:var(--pad); bottom:clamp(34px,5vh,54px); z-index:2;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted);
  display:flex; align-items:center; gap:11px;
}
.hero-scroll span{
  display:block; width:46px; height:1px; background:var(--line-2); position:relative; overflow:hidden;
}
.hero-scroll span::after{
  content:''; position:absolute; inset:0; background:var(--accent-bright);
  transform:translateX(-100%); animation:sweep 2.8s var(--ease) infinite;
}
@keyframes sweep{
  0%{ transform:translateX(-100%); }
  55%{ transform:translateX(100%); }
  100%{ transform:translateX(100%); }
}

/* revelação por clip-path — só esconde quando há JS ---------- */
.js .reveal{
  clip-path:inset(0 0 108% 0);
  opacity:0;
  transform:translateY(14px);
}
.js .reveal.in{
  clip-path:inset(0 0 -12% 0);
  opacity:1;
  transform:none;
  transition:clip-path 1.05s var(--ease), opacity .75s ease, transform 1.05s var(--ease);
}

/* ============================================================
   CITAÇÃO
   ============================================================ */

.pull{
  margin:0; padding:clamp(30px,4vw,44px) 0 0;
  border-top:1px solid var(--line);
  font-family:var(--display); font-weight:700;
  font-size:clamp(21px,2.5vw,32px); line-height:1.22; letter-spacing:-.028em;
  color:var(--accent); max-width:24ch;
}

/* ============================================================
   REGISTRO (o que construímos)
   ============================================================ */

.registry{ list-style:none; margin:0; padding:0; border-top:1px solid var(--line); }

.registry li{
  display:grid; grid-template-columns:88px minmax(0,1fr);
  gap:0 24px;
  padding:clamp(24px,2.8vw,34px) 0 clamp(24px,2.8vw,34px) 18px;
  border-bottom:1px solid var(--line);
  transition:background .35s ease, padding-left .45s var(--ease);
}
.registry li:hover{ background:var(--surface); padding-left:28px; }

.reg-n{
  font-family:var(--mono); font-size:12px; color:var(--dim);
  letter-spacing:.06em; padding-top:6px;
  transition:color .35s ease;
}
.registry li:hover .reg-n{ color:var(--accent); }

.reg-body h3{
  font-family:var(--display); font-weight:700;
  font-size:clamp(18px,1.75vw,24px); letter-spacing:-.025em; line-height:1.2;
  margin:0 0 9px;
}
.reg-body p{ margin:0; color:var(--muted); max-width:64ch; font-size:15.5px; }

/* ============================================================
   ETAPAS
   ============================================================ */

.steps{ list-style:none; margin:0; padding:0; display:grid; gap:1px; background:var(--line); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }

.steps li{
  background:var(--ground);
  display:grid; grid-template-columns:96px minmax(0,26ch) minmax(0,1fr);
  gap:0 28px; align-items:start;
  padding:clamp(26px,3vw,36px) 0;
  transition:background .35s ease;
}
.steps li:hover{ background:var(--surface); }

.step-n{
  font-family:var(--display); font-weight:900; font-size:clamp(26px,3vw,38px);
  letter-spacing:-.05em; color:var(--dim); line-height:1;
  transition:color .35s ease;
}
.steps li:hover .step-n{ color:var(--accent); }

.steps h3{
  font-family:var(--display); font-weight:700; font-size:clamp(17px,1.6vw,21px);
  letter-spacing:-.022em; margin:0; line-height:1.25;
}
.steps p{ margin:0; color:var(--muted); font-size:15.5px; max-width:56ch; }

/* ============================================================
   RESPALDO
   ============================================================ */

.endorse{
  display:grid; grid-template-columns:minmax(0,280px) minmax(0,1fr);
  gap:clamp(32px,5vw,72px); align-items:start;
  margin-bottom:clamp(38px,5vw,64px);
}

.endorse-mark{
  border:1px solid var(--line-2); padding:clamp(26px,3vw,38px);
  display:flex; flex-direction:column; gap:6px;
  background:var(--surface);
}
.em-bulb{
  width:64px; height:64px; margin-bottom:16px;
  background:#F4F6F1; border-radius:50%;
  display:grid; place-items:center;
  box-shadow:0 0 0 1px var(--line-2);
}
.em-bulb img{ width:44px; height:auto; display:block; }
.em-line{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.13em;
  text-transform:uppercase; color:var(--muted);
}
.em-brand{
  font-family:var(--display); font-weight:900; font-size:clamp(30px,3.4vw,42px);
  letter-spacing:-.04em; line-height:1; color:var(--accent); margin:4px 0;
}

.endorse-link{ margin-top:26px !important; }
.endorse-link a{
  font-family:var(--mono); font-size:12.5px; letter-spacing:.06em;
  color:var(--accent); text-decoration:none;
  border-bottom:1px solid var(--accent-dim); padding-bottom:3px;
  transition:border-color .3s ease;
}
.endorse-link a:hover{ border-color:var(--accent); }

/* ============================================================
   FORMULÁRIO — documento editorial, não formulário de SaaS
   ============================================================ */

.form{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(22px,3vw,34px);
  max-width:820px; margin-bottom:clamp(40px,5vw,60px);
}
.field{ display:flex; flex-direction:column; gap:9px; }
.field.full{ grid-column:1 / -1; }

.field label{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.13em;
  text-transform:uppercase; color:var(--muted);
}
.field .opt{ color:var(--line-2); letter-spacing:.08em; }

.field input,
.field textarea{
  background:transparent; border:none; border-bottom:1px solid var(--line-2);
  color:var(--ink); font-family:var(--body); font-size:16px; font-weight:300;
  padding:9px 0; resize:vertical;
  transition:border-color .3s ease;
}
.field input:focus,
.field textarea:focus{ border-bottom-color:var(--accent); }

.field.submit{ flex-direction:row; align-items:center; gap:20px; flex-wrap:wrap; }
.form-note{ font-family:var(--mono); font-size:11px; color:var(--muted); letter-spacing:.03em; }

.contact-direct{
  display:flex; flex-wrap:wrap; align-items:center; gap:14px;
  font-family:var(--mono); font-size:13.5px; letter-spacing:.02em;
  padding-top:clamp(28px,3.5vw,40px); border-top:1px solid var(--line);
}
.contact-direct a{ color:var(--ink-2); text-decoration:none; border-bottom:1px solid var(--line-2); padding-bottom:2px; transition:color .3s ease, border-color .3s ease; }
.contact-direct a:hover{ color:var(--accent); border-color:var(--accent); }
.contact-direct .sep{ color:var(--line-2); }

/* ============================================================
   RODAPÉ
   ============================================================ */

.foot{
  position:relative; z-index:2;
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:14px;
  max-width:1240px; margin:0 auto;
  padding:32px var(--pad); border-top:1px solid var(--line);
  font-family:var(--mono); font-size:11px; letter-spacing:.09em;
  text-transform:uppercase; color:var(--muted);
}

/* ============================================================
   TEATRO — boot, cursor, progresso, revelações
   ============================================================ */

/* o portão — a lâmpada se desmaterializa e o site surge por baixo */
.gate{
  position:fixed; inset:0; z-index:120;
  cursor:pointer;
  opacity:0; transition:opacity .7s ease;
}
.gate.on{ opacity:1; }
.gate.lit{ pointer-events:none; }
.gate:focus-visible{ outline:2px solid var(--accent); outline-offset:-8px; }

/* pano de fundo: foto de estúdio + camadas de luz autorais por cima */
.gate-bg{
  position:absolute; inset:0;
  background:
    radial-gradient(120% 90% at 18% 8%, rgba(255,255,255,.85) 0%, rgba(255,255,255,0) 55%),
    radial-gradient(95% 75% at 85% 94%, rgba(141,198,63,.13) 0%, rgba(141,198,63,0) 62%),
    linear-gradient(160deg, rgba(251,252,249,.55) 0%, rgba(242,245,239,.7) 100%),
    url('assets/img-gate-bg.jpg') center/cover no-repeat,
    #F7F9F5;
}

.gate-canvas{ position:absolute; inset:0; width:100%; height:100%; }

html.gate-lock, html.gate-lock body{ overflow:hidden; }

/* poeira companheira — atrás da narradora, sempre presente */
.dust-canvas{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  opacity:0; transition:opacity 1.6s ease;
}
.dust-canvas.in{ opacity:1; }
/* a coluna NÃO cria contexto de empilhamento: os fundos de seção
   ficam abaixo da narradora (z:1) e o conteúdo acima (z:2) */
.column{ position:relative; }

/* a capa: moldura de documento técnico, não objeto solto no vazio */
.gate-frame{
  position:absolute;
  inset:clamp(20px, 2.6vw, 42px);
  border:1px solid var(--line);
  display:flex; flex-direction:column; justify-content:space-between;
  padding:clamp(20px, 2.4vw, 34px);
  pointer-events:none;
}
/* marcas de canto — leitura de instrumento */
.gate-frame::before,
.gate-frame::after{
  content:''; position:absolute; width:16px; height:16px;
  border-color:var(--accent); border-style:solid;
}
.gate-frame::before{ top:-1px; left:-1px; border-width:1px 0 0 1px; }
.gate-frame::after{ bottom:-1px; right:-1px; border-width:0 1px 1px 0; }

.gate-top,
.gate-bottom{ display:flex; align-items:flex-start; justify-content:space-between; gap:24px; }
.gate-bottom{ align-items:flex-end; }

/* identidade no canto, com o endosso sempre visível */
.gate-id{ display:flex; align-items:center; gap:12px; }
.gate-mark{
  width:42px; height:42px; flex:none;
  background:var(--surface); border-radius:50%;
  display:grid; place-items:center;
  box-shadow:0 0 0 1px var(--line-2);
}
.gate-mark img{ width:30px; height:auto; display:block; }
.gate-name{
  font-family:var(--display); font-weight:500; font-size:20px;
  letter-spacing:-.035em; color:var(--ink-2); line-height:1.05;
}
.gate-name b{ font-weight:900; color:var(--ink); }
.gate-endorse{
  display:block; margin-top:5px;
  font-family:var(--mono); font-style:normal; font-size:9.5px;
  letter-spacing:.2em; text-transform:uppercase; color:var(--muted);
}
.gate-endorse b{ color:var(--accent); font-weight:500; }

.gate-tag{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--muted); text-align:right;
  padding-top:6px;
}

.gate-desc{
  font-family:var(--body); font-weight:300; font-size:15px;
  line-height:1.5; color:var(--ink-2); max-width:34ch;
}

.gate-hint{
  display:flex; align-items:center; gap:11px; flex:none;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--muted); white-space:nowrap;
}
.gate-hint span{
  display:block; width:46px; height:1px; background:var(--line-2);
  position:relative; overflow:hidden;
}
.gate-hint span::after{
  content:''; position:absolute; inset:0; background:var(--accent-bright);
  transform:translateX(-100%); animation:sweep 2.8s var(--ease) infinite;
}

.gate.lit .gate-frame{ opacity:0; transition:opacity .4s ease; }

@media (max-width:700px){
  .gate-frame{ inset:14px; padding:16px; }
  .gate-tag{ display:none; }
  .gate-bottom{ flex-direction:column; align-items:flex-start; gap:14px; }
  .gate-desc{ font-size:13.5px; }
  /* o lockup completo — medalhão + nome + endosso — presente e
     legível também no retrato */
  .gate-id{ gap:10px; }
  .gate-mark{ width:38px; height:38px; }
  .gate-mark img{ width:26px; }
  .gate-name{ font-size:17px; }
  .gate-endorse{ font-size:8.5px; letter-spacing:.16em; margin-top:4px; }
}

/* cursor próprio ---------------------------------------------- */
.cur-dot, .cur-ring{
  position:fixed; top:0; left:0; z-index:99999; pointer-events:none;
  border-radius:50%;
  opacity:0; transition:opacity .3s ease;
}
.cursor-on .cur-dot, .cursor-on .cur-ring{ opacity:1; }
.cur-dot{ width:6px; height:6px; background:var(--accent); margin:-3px 0 0 -3px; }
.cur-ring{
  width:34px; height:34px; margin:-17px 0 0 -17px;
  border:1px solid var(--ink-2); mix-blend-mode:difference;
  transition:width .32s var(--ease), height .32s var(--ease),
             margin .32s var(--ease), border-color .32s ease, opacity .3s ease;
}
.cur-ring.hot{
  width:52px; height:52px; margin:-26px 0 0 -26px;
  border-color:var(--accent); mix-blend-mode:normal;
}
.cur-dot.hide, .cur-ring.hide{ opacity:0; }
@media (pointer:fine){
  .cursor-on, .cursor-on a, .cursor-on button, .cursor-on label{ cursor:none; }
  .cursor-on input, .cursor-on textarea{ cursor:text; }
}

/* feixe de progresso na borda direita ------------------------- */
.progress{
  position:fixed; top:0; right:0; bottom:0; width:3px; z-index:60;
  background:var(--line); pointer-events:none;
}
.progress i{
  position:absolute; top:0; left:0; right:0; height:100%;
  background:linear-gradient(to bottom, transparent, var(--accent-bright) 30%, var(--accent-bright));
  box-shadow:0 0 8px rgba(141,198,63,.3);
  transform:scaleY(0); transform-origin:top; will-change:transform;
}

/* revelação em cascata das seções ----------------------------- */
.js .rv{ opacity:0; transform:translateY(22px); }
.js .rv.in{
  opacity:1; transform:none;
  transition:opacity .8s ease var(--rd,0s), transform .95s var(--ease) var(--rd,0s);
}
.js .registry li.rv.in{
  transition:background .35s ease, padding-left .45s var(--ease),
             opacity .8s ease var(--rd,0s), transform .95s var(--ease) var(--rd,0s);
}
.js .steps li.rv.in{
  transition:background .35s ease,
             opacity .8s ease var(--rd,0s), transform .95s var(--ease) var(--rd,0s);
}

/* relógio do trilho ------------------------------------------- */
.clock{ margin-left:10px; color:var(--dim); font-variant-numeric:tabular-nums; }

/* citação que acende palavra por palavra ---------------------- */
.js .qw{ opacity:.14; transition:opacity .7s ease; }
.js .qw.lit{ opacity:1; }

/* varredura de luz nas linhas do registro --------------------- */
.registry li{ position:relative; overflow:hidden; }
.registry li::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(105deg, transparent 30%, rgba(141,198,63,.14) 48%, transparent 62%);
  transform:translateX(-120%);
}
.registry li:hover::after{ animation:scanline .75s var(--ease) forwards; }
@keyframes scanline{ to{ transform:translateX(120%); } }

/* ============================================================
   INSTRUMENTO — o site lê a própria página conforme você rola
   ============================================================ */

/* malha técnica: aparece com a velocidade da rolagem ---------- */
.mesh{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  opacity:0;
  background-image:
    linear-gradient(to right, rgba(95,143,38,.10) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(95,143,38,.10) 1px, transparent 1px);
  background-size:76px 76px;
  mask-image:radial-gradient(120% 90% at 50% 50%, #000 20%, transparent 78%);
  -webkit-mask-image:radial-gradient(120% 90% at 50% 50%, #000 20%, transparent 78%);
  will-change:opacity;
}

/* feixe de varredura por seção -------------------------------- */
.scan{
  position:absolute; left:0; right:0; top:0; height:0;
  pointer-events:none; z-index:2; opacity:0;
}
.sec.scanning .scan{
  opacity:1;
  animation:scanRun 1.6s cubic-bezier(.22,0,.12,1) forwards;
}
.scan::before{                       /* a linha — atmosfera, não evento */
  content:''; position:absolute; left:0; right:0; top:0; height:1px;
  background:linear-gradient(90deg,
    transparent 0%, rgba(141,198,63,.55) 12%, rgba(141,198,63,.55) 88%, transparent 100%);
  box-shadow:0 0 10px rgba(141,198,63,.3);
}
.scan::after{                        /* o rastro */
  content:''; position:absolute; left:0; right:0; bottom:0; height:90px;
  background:linear-gradient(to top, rgba(141,198,63,.06), transparent);
}
@keyframes scanRun{
  0%   { top:0;    height:0;   opacity:0; }
  8%   {                        opacity:1; }
  92%  {                        opacity:1; }
  100% { top:100%; height:0;   opacity:0; }
}

/* colchetes de mira que se desenham --------------------------- */
.sec .label{ position:relative; }
.endorse-mark{ position:relative; }
.endorse-mark::before, .endorse-mark::after{
  content:''; position:absolute; width:0; height:0;
  border-color:var(--accent-dim); border-style:solid; border-width:0;
  transition:width .9s var(--ease), height .9s var(--ease);
  pointer-events:none;
}
.endorse-mark::before{
  top:-1px; left:-1px; border-top-width:1px; border-left-width:1px;
}
.endorse-mark::after{
  bottom:-1px; right:-1px; border-bottom-width:1px; border-right-width:1px;
}
.sec.scanned .endorse-mark::before, .sec.scanned .endorse-mark::after{
  width:22px; height:22px;
}

/* linhas do registro: dados entrando em fluxo ----------------- */
.registry li{ --flow:0; }
.registry li::before{
  content:''; position:absolute; left:0; top:0; bottom:0;
  width:2px; background:var(--accent-dim);
  transform:scaleY(var(--flow)); transform-origin:top;
  transition:transform 1s var(--ease);
  box-shadow:0 0 6px rgba(141,198,63,.22);
}
.sec.scanned .registry li{ --flow:1; }
.sec.scanned .registry li:nth-child(2){ transition-delay:.06s; }
.sec.scanned .registry li:nth-child(3){ transition-delay:.12s; }
.sec.scanned .registry li:nth-child(4){ transition-delay:.18s; }
.sec.scanned .registry li:nth-child(5){ transition-delay:.24s; }

/* espinha de progresso nas etapas ----------------------------- */
.steps{ position:relative; }
.steps::before{
  content:''; position:absolute; left:46px; top:0; width:1px;
  height:calc(var(--spine,0) * 100%);
  background:linear-gradient(to bottom, var(--accent-dim), rgba(141,198,63,.18));
  box-shadow:0 0 6px rgba(141,198,63,.2);
  transition:height 1.2s var(--ease);
}
@media (max-width:1080px){ .steps::before{ left:33px; } }

/* a prose do produto cede largura para a narradora repousar à
   direita sem tocar em texto corrido */
.sec--produto .prose p{ max-width:46ch; }

/* ============================================================
   PRODUTO — telas reais do sistema
   ============================================================ */

.sec--produto{ background:linear-gradient(180deg, var(--surface-2) 0%, var(--ground) 78%); }

.shots{
  display:grid; grid-template-columns:1.55fr 1fr; gap:clamp(16px,2vw,26px);
  align-items:start; margin-top:clamp(30px,4vw,48px);
}
.shot{
  position:relative; margin:0; overflow:hidden;
  border:1px solid var(--line-2); background:var(--surface);
  box-shadow:0 18px 50px -28px rgba(24,33,27,.4);
}
.shot img{
  display:block; width:100%; height:auto;
  transform:translateY(14px); opacity:0;
  transition:transform 1.1s var(--ease) .25s, opacity .9s ease .25s;
}
.sec.scanned .shot img{ transform:none; opacity:1; }
.shot--side{ margin-top:clamp(26px,4vw,60px); }

.shot-tag{
  position:absolute; left:0; bottom:0; z-index:2;
  display:flex; gap:8px; padding:8px 13px;
  background:rgba(255,255,255,.9);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border-top:1px solid var(--line); border-right:1px solid var(--line);
  font-family:var(--mono); font-size:9.5px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--muted);
}
.shot-tag b{ color:var(--accent); font-weight:500; }

/* ============================================================
   PROVA SOCIAL — números e muro de clientes
   ============================================================ */

.metricas{
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:1px; background:var(--line);
  border:1px solid var(--line); margin:0 0 clamp(34px,4vw,52px);
}
.metricas > div{
  background:var(--ground); padding:clamp(20px,2.4vw,30px);
  display:flex; flex-direction:column; gap:8px;
}
.metricas dt{
  font-family:var(--mono); font-size:9.5px; letter-spacing:.15em;
  text-transform:uppercase; color:var(--muted); order:2;
}
.metricas dd{
  margin:0; order:1;
  font-family:var(--display); font-weight:900;
  font-size:clamp(32px,3.6vw,50px); line-height:1;
  letter-spacing:-.05em; color:var(--ink);
  font-variant-numeric:tabular-nums;
}
.metricas > div:first-child dd{ color:var(--accent); }

.muro{
  display:grid; grid-template-columns:repeat(6,1fr); gap:1px;
  background:var(--line); border:1px solid var(--line);
  list-style:none; margin:0; padding:0;
}
.muro li{
  background:rgba(255,255,255,.9);
  display:flex; align-items:center; justify-content:center;
  padding:clamp(14px,1.6vw,22px); aspect-ratio:2.1 / 1;
}
.muro img{
  display:block; max-width:100%; max-height:100%; width:auto; height:auto;
  object-fit:contain;
  filter:grayscale(1) contrast(.92) brightness(1.06); opacity:.56;
  transition:filter .35s ease, opacity .35s ease;
}
.muro li:hover img{ filter:grayscale(0) contrast(1); opacity:1; }

.muro-nota{
  font-family:var(--mono); font-size:10px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--muted);
  margin:14px 0 0; text-align:right;
}

@media (max-width:1080px){
  .shots{ grid-template-columns:1fr; }
  .shot--side{ margin-top:0; }
  .metricas{ grid-template-columns:repeat(2,1fr); }
  .muro{ grid-template-columns:repeat(4,1fr); }
}

@media (max-width:640px){
  .muro{ grid-template-columns:repeat(3,1fr); }
  .muro li:hover img{ filter:grayscale(1) contrast(.92) brightness(1.06); opacity:.56; }
}

/* labels — assentamento suave do espaçamento, sem símbolos ----- */
.label-decode{
  display:inline-block; opacity:0; letter-spacing:.34em;
  transition:opacity .8s ease, letter-spacing 1.1s var(--ease);
}
.label-decode.in{ opacity:1; letter-spacing:inherit; }

@media (prefers-reduced-motion:reduce){
  .mesh, .scan{ display:none !important; }
  .sec.scanned .endorse-mark::before, .sec.scanned .endorse-mark::after{ width:22px; height:22px; }
  .registry li{ --flow:1; }
  .gate{ display:none !important; }
  .cur-dot, .cur-ring{ display:none !important; }
  .js .hli{ transform:none; }
  .js .rv{ opacity:1; transform:none; }
  .ghost-n{ transform:none !important; }
  .js .qw{ opacity:1; }
  .registry li::after{ display:none; }
}

/* ============================================================
   RESPONSIVO
   ============================================================ */

@media (max-width:1080px){
  .steps li{ grid-template-columns:70px minmax(0,1fr); gap:6px 20px; }
  .steps h3{ grid-column:2; }
  .steps p{ grid-column:2; margin-top:7px; }
  .step-n{ grid-row:1 / span 2; }
}

@media (max-width:1080px){
  :root{ --rail:0px; }

  .topo{ padding:12px var(--pad); }
  .topo-cta{ display:none; }          /* o CTA vive no menu e no corpo */
  .wm-row{ gap:9px; }
  .wm-bulb{ width:32px; height:32px; }
  .wm-bulb img{ width:20px; }
  .wm-main{ font-size:16px; }
  .wm-endorse{ font-size:7.5px; letter-spacing:.16em; }

  .column{ margin-left:0; }
  .hero{ min-height:100svh; padding-top:clamp(88px,14vh,120px); }

  .sec-split{ grid-template-columns:1fr; }
  .endorse{ grid-template-columns:1fr; }
  .form{ grid-template-columns:1fr; }
  .hero-scroll{ display:none; }
}

@media (max-width:620px){
  body{ font-size:16px; }
  .registry li{ grid-template-columns:1fr; gap:10px; }
  .reg-n{ padding-top:0; }
  .hero-meta{ flex-direction:column; }
  .hero-meta > div{ border-right:none; border-bottom:1px solid var(--line); padding:14px 0; margin:0; width:100%; }
  .hero-meta > div:last-child{ border-bottom:none; }
}

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation:none !important; transition:none !important; }
  .js .reveal{ clip-path:none; opacity:1; transform:none; }
  .hero-canvas{ opacity:1; }
}

/* ============================================================
   MODAL "FALAR COM A GENTE" — o painel que a areia constrói.
   A moldura visível durante a montagem são os próprios grãos
   (canvas .orb-canvas.modal, z:93); o painel DOM acende por
   baixo deles quando a areia assenta.
   ============================================================ */

html.modal-lock, html.modal-lock body{ overflow:hidden; }

.modal{
  position:fixed; inset:0; z-index:92;
  display:flex; align-items:center; justify-content:center;
  padding:clamp(12px,3vw,28px);
}
.modal[hidden]{ display:none; }

.modal-back{
  position:absolute; inset:0;
  background:rgba(247,249,245,0);
  transition:background .5s ease;
}
.modal.aberto .modal-back{
  background:rgba(247,249,245,.8);
  backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px);
}

.modal-panel{
  position:relative; width:min(640px,100%);
  max-height:min(88vh,100%); overflow:auto;
  background:var(--surface); border:1px solid var(--line);
  box-shadow:0 24px 64px -24px rgba(20,24,18,.28), 0 2px 10px rgba(20,24,18,.06);
  padding:clamp(22px,4vw,40px);
  opacity:0; transform:translateY(8px) scale(.985);
  transition:opacity .4s ease, transform .4s var(--ease);
}
.modal-panel.vis{ opacity:1; transform:none; }

.modal-panel .label{ margin:0 0 4px; }
.modal-panel h3{
  font-family:var(--display); font-weight:900; letter-spacing:-.03em;
  font-size:clamp(20px,2.4vw,28px); line-height:1.15;
  margin:6px 0 clamp(18px,2.5vw,26px); padding-right:44px;
}
.modal-form{ margin-bottom:clamp(20px,2.5vw,28px); max-width:none; }

.modal-x{
  position:absolute; top:12px; right:12px; width:40px; height:40px;
  display:flex; align-items:center; justify-content:center;
  background:none; border:1px solid var(--line-2); color:var(--ink-2);
  font-size:20px; line-height:1; cursor:pointer;
  transition:border-color .3s ease, color .3s ease;
}
.modal-x:hover{ border-color:var(--accent); color:var(--accent); }

@media (max-width:700px){
  .modal-panel{ max-height:92dvh; }
  .modal .form{ grid-template-columns:1fr; }
}

/* ── correção: o painel transbordava a tela ─────────────────────
   O conteúdo era mais alto que a janela, o rodapé (o e-mail) ficava
   cortado e a moldura de areia passava por cima do texto da página.
   Agora o painel se ajusta à altura real da janela (dvh cobre a barra
   do navegador no celular), o miolo rola por dentro, e cabeçalho e
   rodapé ficam fixos — a moldura nunca excede o painel.            */
.modal{ padding:clamp(10px,2.5vw,24px); align-items:center; }

.modal-panel{
  max-height:calc(100dvh - clamp(20px,5vw,48px));
  display:flex; flex-direction:column;
  overflow:hidden;                       /* quem rola é o miolo */
  padding:clamp(18px,3vw,32px);
}
.modal-panel .label,
.modal-panel h3{ flex:none; }
.modal-panel h3{ margin:6px 0 clamp(14px,2vw,20px); }

/* miolo rolável: some com a barra visualmente, mas rola */
.modal-corpo{
  flex:1 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:thin;
}
.modal-form{ margin-bottom:clamp(14px,2vw,20px); }
.modal .form{ gap:clamp(14px,2vw,22px); }
.modal .field textarea{ min-height:78px; }
.modal .contact-direct{ flex:none; padding-top:clamp(14px,2vw,20px); margin-top:auto; }

/* foco bem desenhado: a linha ganha espessura e o rótulo acompanha,
   sem halo genérico de navegador */
.modal .field input,
.modal .field textarea{ border-bottom-width:1px; transition:border-color .3s ease, border-bottom-width .3s ease; }
.modal .field input:focus,
.modal .field textarea:focus{ border-bottom-width:2px; outline:none; }
.modal .field:focus-within label{ color:var(--accent); }

/* telas baixas (notebook, celular deitado): aperta mais */
@media (max-height:760px){
  .modal-panel h3{ font-size:clamp(18px,2vw,22px); margin-bottom:12px; }
  .modal .form{ gap:12px; }
  .modal .field textarea{ min-height:60px; }
  .modal-panel{ padding:18px; }
}

.modal-x{ z-index:4; top:10px; right:10px; background:var(--surface); }