/* ================================================================
   ZENITH v7 - galeria de produto
   Tiles full-bleed alternando claro/escuro. A troca de superficie
   E o divisor de secao: nenhuma borda, nenhum gradiente decorativo.
   Um acento (Tiffany), duas leituras conforme a superficie.
   Uma escala de raio: tiles 0 | molduras 18px | inputs 12px | CTA pill.
   ================================================================ */

/* ---------------- tokens globais (nao mudam por superficie) ------- */
:root{
  /* marca */
  --tiffany:      #0ABAB5;   /* preenchimento de acao, identico nos 2 modos */
  --tiffany-on:   #03211F;   /* texto sobre o preenchimento Tiffany */
  --tiffany-lift: #12D2CC;   /* hover do preenchimento */

  /* tipografia: SF Pro real em Apple, Inter como equivalente aberto */
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display",
          "Inter var", Inter, system-ui, "Segoe UI", sans-serif;
  --font-mark: 'Bebas Neue', var(--font);  /* so o wordmark ZENITH */

  /* escala tipografica (Apple: corpo em 17px, display com tracking negativo) */
  --t-hero:    clamp(2.375rem, 4.9vw, 4.25rem);
  --t-display: clamp(2.125rem, 4.4vw, 3.5rem);
  --t-lead:    clamp(1.1875rem, 1.9vw, 1.625rem);
  --t-body:    1.0625rem;   /* 17px */
  --t-caption: 0.875rem;

  /* ritmo */
  --tile-pad-y: clamp(5rem, 11vh, 8.5rem);
  --gutter:     clamp(1.25rem, 4vw, 2.5rem);
  --maxw:       1220px;
  --maxw-text:  62ch;

  /* forma */
  --r-frame: 18px;
  --r-input: 12px;
  --r-chip:  10px;

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

  /* camadas */
  --z-canvas: 0;
  --z-tile:   1;
  --z-nav:    40;
  --z-float:  45;
}

/* ---------------- superficies -----------------------------------
   Cada tile declara data-surface e redefine SO as cores.
   Tipo, espaco e acento continuam os mesmos. ---------------------- */
[data-surface="dark"]{
  --surface:     #0B1211;
  --surface-in:  #131D1C;   /* moldura de produto sobre o tile */
  --ink:         #F1F6F5;
  --ink-2:       #93A5A3;
  --accent-text: #22D3CE;   /* Tiffany claro: so no escuro */
  --hairline:    rgba(255,255,255,.10);
  --hairline-2:  rgba(255,255,255,.16);
  --lift: 0 24px 70px -24px rgba(0,0,0,.85);
}
[data-surface="void"]{
  --surface:     #050908;
  --surface-in:  #101817;
  --ink:         #F1F6F5;
  --ink-2:       #93A5A3;
  --accent-text: #22D3CE;
  --hairline:    rgba(255,255,255,.10);
  --hairline-2:  rgba(255,255,255,.16);
  --lift: 0 24px 70px -24px rgba(0,0,0,.9);
}
[data-surface="light"]{
  --surface:     #FFFFFF;
  --surface-in:  #F2F5F5;
  --ink:         #0A1413;
  --ink-2:       #5C6B69;
  --accent-text: #05706C;   /* Tiffany profundo: passa AA no claro */
  --hairline:    rgba(10,20,19,.12);
  --hairline-2:  rgba(10,20,19,.22);
  --lift: 0 3px 30px 0 rgba(0,0,0,.22);   /* a unica sombra do sistema */
}
[data-surface="parchment"]{
  --surface:     #F2F5F5;
  --surface-in:  #FFFFFF;
  --ink:         #0A1413;
  --ink-2:       #5C6B69;
  --accent-text: #05706C;
  --hairline:    rgba(10,20,19,.12);
  --hairline-2:  rgba(10,20,19,.22);
  --lift: 0 3px 30px 0 rgba(0,0,0,.16);
}

/* ---------------- base ------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth }
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }

body{
  background:#050908;
  color:#F1F6F5;
  font-family:var(--font);
  font-size:var(--t-body);
  line-height:1.47;
  letter-spacing:-.01em;
  font-synthesis-weight:none;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img,svg,canvas{display:block;max-width:100%}
a{color:inherit}
::selection{background:var(--tiffany);color:var(--tiffany-on)}

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

/* ---------------- tipografia ------------------------------------- */
h1,h2,h3,h4{
  font-weight:600;
  line-height:1.06;
  letter-spacing:-.028em;
  text-wrap:balance;
}
h1{font-size:var(--t-hero);letter-spacing:-.032em;line-height:1.02}
h2{font-size:var(--t-display)}
h3{font-size:1.3125rem;line-height:1.2;letter-spacing:-.02em}

/* O respiro entre titulo e lead e UMA regra, nao um ajuste por tile.
   Estava em 0, 20 e 28px em tiles diferentes, o que le como torto. */
.lead{
  font-size:var(--t-lead);
  line-height:1.32;
  letter-spacing:-.014em;
  color:var(--ink-2);
  max-width:36ch;
  margin-top:1.5rem;
  text-wrap:pretty;
}
.body{color:var(--ink-2);max-width:var(--maxw-text);text-wrap:pretty}
.accent{color:var(--accent-text)}

/* eyebrow: orcamento de 3 na pagina inteira (skill 4.7). Sem numero de secao. */
.eyebrow{
  font-size:.75rem;
  font-weight:600;
  letter-spacing:.02em;
  color:var(--accent-text);
  margin-bottom:1rem;
}

/* ---------------- tiles ------------------------------------------ */
.tile{
  position:relative;
  z-index:var(--z-tile);
  background:var(--surface);
  color:var(--ink);
  padding:var(--tile-pad-y) var(--gutter);
  border-radius:0;            /* tiles nunca arredondam */
  scroll-margin-top:52px;     /* a nav fixa nao pode cobrir o titulo */
}
/* o mesmo para os alvos de ancora que nao sao a secao inteira */
[id]{scroll-margin-top:calc(52px + 1.5rem)}
/* Um sistema de alinhamento so: o hero e centrado porque e a abertura,
   todo tile de conteudo e alinhado a esquerda. Misturar os dois e o que
   fazia a pagina parecer torta. */
.tile-inner{max-width:var(--maxw);margin:0 auto}


/* ---------------- tile com fotografia ---------------------------
   A imagem cobre o tile inteiro e o texto fica por cima. O scrim aqui
   e leve de proposito: a foto ja e escura (luminancia p95 = 0.03 na
   faixa do texto, 13:1 de contraste com o branco), entao ele serve
   para a imagem nao competir, nao para socorrer a legibilidade. */
/* Armadilha ja paga aqui, nao reintroduzir: z-index NEGATIVO nao serve.
   Filho com z-index:-1 e pintado ATRAS do proprio fundo do pai, e o tile
   tem background opaco, entao a foto sumia por completo.
   A midia fica em z-index 0 e o conteudo sobe para 1. */
.tile-media{
  position:absolute;inset:0;z-index:0;
  display:block;overflow:hidden;
  background:var(--surface);
}
.has-media > *:not(.tile-media){position:relative;z-index:1}
.tile-media img{width:100%;height:100%;object-fit:cover}

/* video de fundo: entra por cima da foto, que fica de cartaz enquanto
   ele carrega e de plano B se o navegador recusar autoplay */
.tile-video{
  position:absolute;inset:0;z-index:1;
  width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity .9s var(--ease);
}
.hero.has-video .tile-video{opacity:1}
/* Leve de proposito. A foto tem luminancia 0.03 na faixa do texto, ou
   seja 13:1 com o branco antes de qualquer scrim. Escurecer mais so
   apagava a fotografia. O topo cobre a area da nav, o pe assenta o
   corte para o tile branco seguinte. */
.tile-media::after{
  content:"";position:absolute;inset:0;z-index:2;
  background:
    linear-gradient(180deg,
      rgba(5,9,8,.55) 0%,
      rgba(5,9,8,.10) 22%,
      rgba(5,9,8,.04) 55%,
      rgba(5,9,8,.38) 100%);
}
/* Com video o scrim sobe. A filmagem de neve tinha p95 de 0,881 crua
   (1,18:1 com branco, reprovado feio) e precisaria de 78% de preto por
   cima, o que apagaria a neve. Em vez disso os ALTOS foram comprimidos
   no proprio arquivo, com curva na luminancia para preservar o matiz:
   p95 caiu para 0,228 e 30% de scrim ja devolve 5,06:1. */
.hero.has-video .tile-media::after{
  background:
    linear-gradient(180deg,
      rgba(5,9,8,.60) 0%,
      rgba(5,9,8,.32) 26%,
      rgba(5,9,8,.30) 62%,
      rgba(5,9,8,.52) 100%);
}
/* sobre video ate o texto secundario vai a branco puro: o cinza-claro
   #C8D4D2 nao alcanca 4,5:1 nem com o scrim */
.hero.has-video{--ink-2:#F1F6F5}
/* sobre fotografia o texto secundario sobe de tom: cinza-esverdeado
   apagado some na imagem */
.has-media{--ink-2:#C8D4D2}

/* Botao fantasma sobre foto precisa de fundo proprio. Tiffany sobre a
   crista clara dava 4.44:1, abaixo do minimo AA de 4.5 para texto. */
.has-media .btn-ghost{
  background:rgba(5,9,8,.52);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  color:#F1F6F5;
  border-color:rgba(255,255,255,.34);
}
.has-media .btn-ghost:hover{
  background:rgba(5,9,8,.72);
  border-color:rgba(255,255,255,.5);
}
@media (prefers-reduced-transparency:reduce){
  .has-media .btn-ghost{background:#0A1413;backdrop-filter:none;-webkit-backdrop-filter:none}
}

/* ---------------- botoes ----------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.4em;
  font-size:var(--t-body);
  font-weight:400;
  letter-spacing:-.01em;
  padding:.7rem 1.35rem;
  border-radius:999px;
  border:1px solid transparent;
  text-decoration:none;
  cursor:pointer;
  white-space:nowrap;          /* CTA nunca quebra em 2 linhas */
  font-family:inherit;
  transition:background .2s var(--ease), color .2s var(--ease),
             border-color .2s var(--ease), transform .12s var(--ease);
}
.btn-primary{background:var(--tiffany);color:var(--tiffany-on);font-weight:500}
.btn-primary:hover{background:var(--tiffany-lift)}
.btn-ghost{background:transparent;color:var(--accent-text);border-color:currentColor}
.btn-ghost:hover{background:color-mix(in srgb, var(--accent-text) 10%, transparent)}
.btn:active{transform:scale(.96)}   /* micro-interacao do sistema */
.btn-block{width:100%}

/* align-items:center e obrigatorio: sem ele os itens esticam ate a altura
   da linha, e o link de texto renderiza no topo da caixa esticada
   enquanto o botao centraliza o proprio rotulo. Da 12px de desencontro. */
.btn-row{
  display:flex;flex-wrap:wrap;align-items:center;
  gap:.75rem;margin-top:1.75rem;
}

/* link de texto */
.tlink{
  color:var(--accent-text);
  text-decoration:none;
  font-weight:450;
}
.tlink:hover{text-decoration:underline;text-underline-offset:3px}
.tlink .chev{display:inline-block;transition:transform .2s var(--ease)}
.tlink:hover .chev{transform:translateX(3px)}

/* ================================================================
   NAV - uma linha, 52px, adapta o esquema ao tile que esta atras
   ================================================================ */
/* A global-nav da Apple nunca troca de esquema: e sempre a barra escura,
   em cima de tile claro ou escuro. Alem de ser a referencia, tira do
   caminho um estado que, se falhasse, deixaria a nav ilegivel. */
.nav{
  position:fixed;inset:0 0 auto 0;
  z-index:var(--z-nav);
  height:52px;
  display:flex;align-items:center;gap:1.5rem;
  padding:0 var(--gutter);
  background:rgba(5,9,8,.78);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  backdrop-filter:saturate(180%) blur(20px);
  color:#F1F6F5;
  transition:transform .34s var(--ease);
  will-change:transform;
}
/* recolhe ao descer, volta ao subir. -101% para o fio da borda sumir junto */
.nav.is-hidden{transform:translateY(-101%)}
@media (prefers-reduced-motion:reduce){
  .nav{transition:none}
  .nav.is-hidden{transform:none}   /* sem movimento, a nav simplesmente fica */
}

.nav-brand{
  display:inline-flex;align-items:center;gap:.5rem;
  text-decoration:none;color:inherit;flex:0 0 auto;
}
.nav-mark{width:20px;height:20px}
.nav-word{
  font-family:var(--font-mark);
  font-size:1.25rem;
  letter-spacing:.14em;
  line-height:1;
  padding-top:2px;
}
.nav-links{
  display:flex;align-items:center;gap:1.5rem;
  margin-left:auto;
  font-size:.8125rem;
  letter-spacing:-.01em;
}
.nav-links a{text-decoration:none;opacity:.82;transition:opacity .2s}
.nav-links a:hover{opacity:1}
.nav .btn{padding:.35rem .9rem;font-size:.8125rem}
.nav-toggle{display:none}
/* o CTA dentro de .nav-links so existe para a bandeja do celular */
@media (min-width:721px){ .nav-links .btn{display:none} }

/* ================================================================
   HERO - tile 1. Palco 3D + no maximo 4 elementos de texto.
   ================================================================ */
/* Hero de tipografia: sem simbolo, sem ilustracao, so a frase e o ar
   em volta dela. O primeiro visual pesado e o painel do tile seguinte.
   Quando entrar a fotografia de abertura, ela vira o fundo deste tile
   e a copy passa a ficar por cima com um scrim (ver README-fotos.md). */
.hero{
  min-height:min(86vh, 780px);
  display:grid;
  place-items:center;
  padding-top:max(7rem, 17vh);
  padding-bottom:max(5rem, 12vh);
}
.hero-inner{max-width:min(92vw, 780px);margin:0 auto;text-align:center}
.hero .lead{max-width:46ch;margin-inline:auto}
/* text-align:center nao move item de flex: a linha de botoes precisa
   centralizar por conta propria, senao encosta na esquerda da caixa */
.hero .btn-row{justify-content:center}

/* ================================================================
   MOLDURA DE PRODUTO - a "fotografia" deste site.
   Nao e screenshot falso: cada moldura contem um mini-produto real.
   ================================================================ */
.frame{
  position:relative;
  min-width:0;                /* deixa o conteudo largo rolar por dentro */
  background:var(--surface-in);
  border:1px solid var(--hairline);
  border-radius:var(--r-frame);
  box-shadow:var(--lift);
  overflow:hidden;
}
.frame-bar{
  display:flex;align-items:center;gap:.4rem;
  padding:.7rem .9rem;
  border-bottom:1px solid var(--hairline);
  font-size:.75rem;
  color:var(--ink-2);
  letter-spacing:-.01em;
}
.frame-bar b{
  font-weight:450;margin-left:.5rem;color:var(--ink-2);
}
.fdot{width:9px;height:9px;border-radius:50%;background:var(--hairline-2);flex:0 0 auto}
.frame-body{padding:1.25rem}

/* legenda honesta: o produto ainda nao esta no ar */
.demo-note{
  margin-top:1rem;
  font-size:var(--t-caption);
  color:var(--ink-2);
  max-width:52ch;
}

/* ================================================================
   TILE ASCEND - produto principal, layout centrado com visual grande
   ================================================================ */
.ascend-visual{margin-top:3rem}

/* painel unificado: abas reais trocam o conteudo */
.tabs{display:flex;gap:.4rem;flex-wrap:wrap}
.tab{
  appearance:none;border:1px solid var(--hairline);
  background:transparent;color:var(--ink-2);
  font-family:inherit;font-size:.8125rem;letter-spacing:-.01em;
  padding:.4rem .85rem;border-radius:999px;cursor:pointer;
  transition:background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.tab:hover{color:var(--ink)}
.tab[aria-selected="true"]{
  background:var(--tiffany);color:var(--tiffany-on);
  border-color:var(--tiffany);font-weight:500;
}
.tabpanels{margin-top:1.25rem;text-align:left}
.tabpanel[hidden]{display:none}

/* linha de metricas do painel */
.metrics{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1px;
  background:var(--hairline);
  border:1px solid var(--hairline);
  border-radius:var(--r-chip);
  overflow:hidden;
}
.metric{background:var(--surface-in);padding:1rem 1.1rem}
.metric span{display:block;font-size:.75rem;color:var(--ink-2);margin-bottom:.35rem}
.metric b{
  display:block;font-size:1.75rem;font-weight:600;letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;line-height:1;
}

/* barra simples sem trilho de fundo (skill 9.F) */
.bars{margin-top:1.1rem;display:grid;gap:.7rem}
.bar-row{display:grid;grid-template-columns:9rem 1fr auto;gap:.75rem;align-items:center;font-size:.8125rem}
.bar-row span{color:var(--ink-2)}
.bar-line{height:2px;background:var(--accent-text);border-radius:2px;transform-origin:left;transform:scaleX(0)}
.bar-row b{font-weight:500;font-variant-numeric:tabular-nums;color:var(--ink)}

/* o que vem no plano: uma faixa, nao cartoes. Uma linha de fio em cima
   do conjunto inteiro, nunca uma por item (isso vira tabela de specs) */
.includes{
  list-style:none;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1.5rem;
  margin-top:clamp(2.5rem,5vh,3.5rem);
  padding-top:1.5rem;
  border-top:1px solid var(--hairline);
  font-size:.9375rem;
  color:var(--ink-2);
}
.includes li{text-wrap:pretty}
.includes li.accent{color:var(--accent-text);font-weight:500}

/* ================================================================
   TILE SALES - split: copy a esquerda, produto vivo a direita
   ================================================================ */
.split{
  display:grid;
  grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:clamp(2rem,5vw,4.5rem);
  align-items:center;
}
/* quando as duas colunas comecam com conteudo proprio, elas tem que
   comecar na mesma altura: centrado deixa os topos desencontrados */
.split-top{align-items:start;margin-top:clamp(2.5rem,6vh,4rem)}


/* titulo de coluna: um degrau abaixo do titulo do tile, para nao
   competir com ele */
.col-head{
  font-size:1.125rem;font-weight:600;letter-spacing:-.018em;
  color:var(--ink-2);
  margin-bottom:1rem;
}

/* CRM: mini-produto funcional de verdade */
.crm-board{
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:minmax(150px,1fr);
  gap:.75rem;
  padding:1rem;
  overflow-x:auto;
  scroll-snap-type:x proximity;
  scrollbar-width:thin;
}
.crm-col{scroll-snap-align:start;min-width:0}
.crm-col > header{
  display:flex;justify-content:space-between;align-items:center;
  font-size:.75rem;color:var(--ink-2);
  padding:0 .2rem .6rem;
}
.crm-col > header b{font-weight:500;font-variant-numeric:tabular-nums}
.crm-card{
  background:var(--surface);
  border:1px solid var(--hairline);
  border-radius:var(--r-chip);
  padding:.7rem .75rem;
  margin-bottom:.5rem;
  display:grid;gap:.4rem;
  transition:transform .45s var(--ease), opacity .3s var(--ease);
}
.crm-card .who{font-size:.875rem;font-weight:500;letter-spacing:-.015em}
.crm-card .meta{font-size:.75rem;color:var(--ink-2)}
.crm-chip{
  display:inline-flex;align-items:center;gap:.3rem;
  font-size:.6875rem;
  padding:.2rem .5rem;border-radius:6px;
  background:color-mix(in srgb, var(--accent-text) 14%, transparent);
  color:var(--accent-text);
  width:fit-content;
}
.crm-act{
  appearance:none;border:0;cursor:pointer;font-family:inherit;
  background:var(--tiffany);color:var(--tiffany-on);
  font-size:.75rem;font-weight:500;
  padding:.4rem .7rem;border-radius:7px;
  transition:transform .12s var(--ease), background .2s var(--ease);
}
.crm-act:hover{background:var(--tiffany-lift)}
.crm-act:active{transform:scale(.96)}
.crm-card.is-moving{opacity:0;transform:translateY(-8px)}

/* ================================================================
   TILE LINEUP - bento 2 + 1. Exatamente 3 celulas para 3 produtos.
   ================================================================ */
.bento{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(1rem,2vw,1.5rem);
  margin-top:3rem;
}
.cell{
  background:var(--surface-in);
  border:1px solid var(--hairline);
  border-radius:var(--r-frame);
  padding:clamp(1.5rem,3vw,2.25rem);
  display:flex;flex-direction:column;gap:.75rem;
  min-height:280px;
}
/* a celula larga recebe a fotografia: o bento precisa de variacao visual
   real, nao tres celulas do mesmo tipo (skill 4.7) */
.cell-wide{
  grid-column:1 / -1;
  flex-direction:row;align-items:stretch;
  gap:clamp(1.5rem,4vw,3rem);
  padding-right:0;overflow:hidden;
}
.cell-wide-copy{
  flex:1 1 0;min-width:0;
  display:flex;flex-direction:column;justify-content:center;gap:.75rem;
  padding:clamp(.5rem,2vw,1.5rem) 0;
}
.cell-photo{
  flex:0 0 42%;
  display:block;position:relative;
  margin:calc(-1 * clamp(1.5rem,3vw,2.25rem)) 0;
  min-height:240px;
}
.cell-photo img{
  position:absolute;inset:0;
  width:100%;height:100%;object-fit:cover;
}
.cell h3{margin-bottom:.15rem}
.cell p{color:var(--ink-2);font-size:.9375rem}

/* visual vivo dentro da celula */
.cell-viz{margin-top:auto;padding-top:1.25rem}

/* pulso de captacao: barras que sobem ao entrar na tela */
.pulse{display:flex;align-items:flex-end;gap:5px;height:56px}
/* escala em vez de altura: porcentagem de altura em filho de flex nao
   resolve de forma confiavel, e transform e o que a GPU acelera */
.pulse i{
  flex:1;background:var(--accent-text);border-radius:2px 2px 0 0;
  height:100%;
  transform:scaleY(.08);transform-origin:bottom;
  transition:transform .7s var(--ease);
}
.pulse i:nth-child(even){opacity:.45}

/* anel de retencao */
.ring{width:84px;height:84px;transform:rotate(-90deg)}
.ring circle{fill:none;stroke-width:6;stroke-linecap:round}
.ring .track{stroke:var(--hairline)}
.ring .val{
  stroke:var(--accent-text);
  stroke-dasharray:220;stroke-dashoffset:220;
  transition:stroke-dashoffset 1.1s var(--ease);
}
.ring-wrap{display:flex;align-items:center;gap:1rem}
.ring-wrap b{font-size:1.5rem;font-weight:600;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.ring-wrap span{display:block;font-size:.8125rem;color:var(--ink-2)}

/* trilha do Burn */
.burn-track{display:flex;gap:.5rem;flex-wrap:wrap}
.burn-day{
  width:34px;height:34px;border-radius:9px;
  border:1px solid var(--hairline);
  display:grid;place-items:center;
  font-size:.6875rem;color:var(--ink-2);
  transition:background .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease);
}
.burn-day.on{background:var(--tiffany);color:var(--tiffany-on);border-color:var(--tiffany);font-weight:600}

/* ================================================================
   TILE METODO - a linha de ascensao que desenha no scroll
   ================================================================ */
.path-wrap{position:relative;margin-top:3.5rem}
.path-svg{width:100%;height:120px;overflow:visible}
.path-svg path{
  fill:none;stroke:var(--accent-text);stroke-width:2;stroke-linecap:round;
  stroke-dasharray:1;stroke-dashoffset:1;
}
.phases{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:clamp(1rem,3vw,2.5rem);
  list-style:none;margin-top:1.5rem;
}
.phase h3{margin-bottom:.5rem}
.phase p{color:var(--ink-2);font-size:.9375rem}
.phase-dot{
  width:9px;height:9px;border-radius:50%;
  background:var(--hairline-2);
  margin-bottom:1rem;
  transition:background .4s var(--ease), transform .4s var(--ease);
}
.phase.lit .phase-dot{background:var(--accent-text);transform:scale(1.35)}

/* ================================================================
   CALCULADORA - os numeros sao do visitante, nao nossos.
   Layout proprio (linha de campos + numero grande), para nao repetir
   pela terceira vez a familia de duas colunas.
   ================================================================ */
.calc{margin-top:clamp(2.5rem,6vh,4rem)}
.calc-inputs{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(1rem,2.5vw,2rem);
  max-width:760px;
}
.calc-inputs .field input{
  font-size:1.25rem;
  font-weight:500;
  font-variant-numeric:tabular-nums;
  padding:.7rem .85rem;
}
/* tira as setinhas: elas encolhem o campo e ninguem usa */
.calc-inputs input::-webkit-outer-spin-button,
.calc-inputs input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.calc-inputs input[type=number]{-moz-appearance:textfield;appearance:textfield}

.calc-out{
  display:block;
  margin-top:clamp(2.5rem,5vh,3.5rem);
  padding-top:clamp(2rem,4vh,2.75rem);
  border-top:1px solid var(--hairline);
}
.calc-kicker{
  display:block;
  font-size:.8125rem;
  color:var(--ink-2);
  margin-bottom:.5rem;
}
.calc-big{
  display:block;
  font-size:clamp(2.75rem,8vw,5.5rem);
  font-weight:600;
  line-height:1;
  letter-spacing:-.04em;
  font-variant-numeric:tabular-nums;
  color:var(--accent-text);
}
.calc-detail{
  margin-top:1.25rem;
  font-size:var(--t-lead);
  line-height:1.4;
  letter-spacing:-.012em;
  color:var(--ink-2);
  max-width:34ch;
}
.calc-detail b{color:var(--ink);font-weight:600;font-variant-numeric:tabular-nums}
.calc-scenario{
  margin-top:1rem;
  font-size:1.0625rem;
  color:var(--ink-2);
  max-width:40ch;
}
.calc-scenario b{color:var(--ink);font-weight:600;font-variant-numeric:tabular-nums}

.calc-foot{
  margin-top:clamp(2rem,4vh,2.75rem);
  display:flex;flex-wrap:wrap;align-items:center;
  gap:1rem clamp(1.5rem,3vw,2.5rem);
}
.calc-note{
  font-size:var(--t-caption);
  color:var(--ink-2);
  max-width:44ch;
}

/* ================================================================
   TILE SOBRE - uma frase + o time em linha
   ================================================================ */
.manifesto{
  font-size:clamp(1.5rem,3.2vw,2.5rem);
  font-weight:600;line-height:1.18;letter-spacing:-.028em;
  max-width:24ch;text-wrap:balance;
}
.manifesto .w{opacity:.22;transition:opacity .5s var(--ease)}
.manifesto .w.lit{opacity:1}

.team{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(1.5rem,3vw,2.5rem);
  margin-top:clamp(3rem,7vh,5rem);
}
.member{display:flex;flex-direction:column;gap:.4rem}
.avatar{
  width:44px;height:44px;border-radius:50%;
  display:grid;place-items:center;
  background:var(--surface-in);
  border:1px solid var(--hairline);
  font-size:.8125rem;font-weight:600;letter-spacing:.02em;
  color:var(--accent-text);
  margin-bottom:.5rem;
}
.member h3{font-size:1.0625rem}
.member .role{font-size:.8125rem;color:var(--accent-text)}
.member p{font-size:.875rem;color:var(--ink-2)}

/* ================================================================
   TILE FINALE - momento 3D 2. O pico resolve no logo.
   ================================================================ */
/* (o tile "Chegue ao topo" saiu junto com o 3D: sem o simbolo ele era
   uma segunda frase de fechamento logo antes da do contato) */

/* o que a pessoa recebe no diagnostico. Numerado porque e uma entrega
   em partes, nao uma lista de atributos. Sem cartao: so o numero, o
   titulo e a linha. */
.deliver{
  list-style:none;
  counter-reset:d;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:clamp(1.5rem,3.5vw,3rem);
  margin-top:clamp(2.5rem,5vh,3.5rem);
  padding-top:clamp(1.75rem,3.5vh,2.5rem);
  border-top:1px solid var(--hairline);
}
.deliver li{counter-increment:d}
.deliver li::before{
  content:counter(d,decimal-leading-zero);
  display:block;
  font-size:.8125rem;
  font-weight:600;
  font-variant-numeric:tabular-nums;
  color:var(--accent-text);
  margin-bottom:.75rem;
}
.deliver h3{font-size:1.125rem;margin-bottom:.4rem}
.deliver p{font-size:.9375rem;color:var(--ink-2);text-wrap:pretty}

/* ================================================================
   TILE CONTATO - FAQ a esquerda, formulario a direita
   ================================================================ */
.faq-item{border-top:1px solid var(--hairline)}
.faq-item:last-child{border-bottom:1px solid var(--hairline)}
.faq-item summary{
  list-style:none;cursor:pointer;
  padding:1.1rem 2rem 1.1rem 0;
  font-size:1.0625rem;font-weight:500;letter-spacing:-.015em;
  position:relative;
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{
  content:"";position:absolute;right:.4rem;top:50%;
  width:9px;height:9px;
  border-right:1.5px solid var(--ink-2);
  border-bottom:1.5px solid var(--ink-2);
  translate:0 -60%;rotate:45deg;
  transition:rotate .25s var(--ease);
}
.faq-item[open] summary::after{rotate:225deg;translate:0 -30%}
.faq-item p{padding:0 1.5rem 1.2rem 0;color:var(--ink-2);font-size:.9375rem}

.form{display:grid;gap:1rem}
.field{display:grid;gap:.4rem}
.field label{font-size:.8125rem;color:var(--ink-2)}
.field input{
  font-family:inherit;font-size:var(--t-body);
  color:var(--ink);
  background:var(--surface-in);
  border:1px solid var(--hairline-2);
  border-radius:var(--r-input);
  padding:.75rem .9rem;
  width:100%;
  transition:border-color .2s var(--ease);
}
.field input::placeholder{color:var(--ink-2);opacity:.7}
.field input:focus{border-color:var(--accent-text);outline:none}
.field input:focus-visible{outline:2px solid var(--tiffany);outline-offset:2px}
.field[data-invalid] input{border-color:#E5484D}
.field-err{font-size:.75rem;color:#E5484D;min-height:1em}
[data-surface="dark"] .field-err,
[data-surface="void"] .field-err{color:#FF9592}
.form-note{font-size:var(--t-caption);color:var(--ink-2)}

/* o formulario vira recibo depois do envio, no lugar de sumir */
.form-ok{
  border:1px solid var(--hairline-2);
  border-radius:var(--r-frame);
  padding:clamp(1.5rem,3vw,2rem);
  display:grid;gap:.6rem;
}
.form-ok b{font-size:1.3125rem;font-weight:600;letter-spacing:-.02em}
.form-ok p{color:var(--ink-2);font-size:.9375rem}
.form-ok .tlink{margin-top:.35rem;justify-self:start}

.contact-direct{display:grid;gap:.75rem;margin-top:2.5rem}
.contact-direct a{
  display:flex;justify-content:space-between;align-items:baseline;gap:1rem;
  padding:.85rem 0;border-top:1px solid var(--hairline);
  text-decoration:none;font-size:.9375rem;
}
.contact-direct a span{color:var(--ink-2);font-size:.8125rem}
.contact-direct a b{font-weight:450;color:var(--accent-text)}

/* ================================================================
   FOOTER
   ================================================================ */
.footer{
  background:var(--surface);color:var(--ink);
  padding:clamp(3rem,7vh,4.5rem) var(--gutter) 2.5rem;
}
.footer-grid{
  max-width:var(--maxw);margin:0 auto;
  display:grid;grid-template-columns:1.6fr 1fr 1.2fr;
  gap:2.5rem;
}
.footer-grid p{color:var(--ink-2);font-size:.875rem;max-width:32ch;margin-top:.75rem}
.footer nav{display:grid;gap:.6rem;font-size:.875rem}
.footer nav a{text-decoration:none;color:var(--ink-2)}
.footer nav a:hover{color:var(--ink)}
.footer-contact{display:grid;gap:.5rem;font-size:.875rem;color:var(--ink-2)}
.footer-contact a{text-decoration:none;color:var(--accent-text)}
.footer-base{
  max-width:var(--maxw);margin:2.5rem auto 0;
  padding-top:1.5rem;border-top:1px solid var(--hairline);
  display:flex;justify-content:space-between;align-items:center;
  gap:1rem;flex-wrap:wrap;
  font-size:.75rem;color:var(--ink-2);
}
.footer-base .credits{flex-basis:100%;opacity:.8}
.footer-base .credits a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.footer-base .credits a:hover{color:var(--accent-text)}

/* ================================================================
   WHATSAPP - canal de venda, mantido mas discreto.
   So aparece depois que a pessoa passou do hero.
   ================================================================ */
.wa{
  position:fixed;right:var(--gutter);bottom:var(--gutter);
  z-index:var(--z-float);
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.6rem 1rem;
  background:rgba(10,20,19,.82);
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
  border:1px solid rgba(255,255,255,.14);
  color:#F1F6F5;
  border-radius:999px;
  text-decoration:none;font-size:.875rem;
  opacity:0;transform:translateY(12px);pointer-events:none;
  transition:opacity .4s var(--ease), transform .4s var(--ease);
}
.wa.show{opacity:1;transform:none;pointer-events:auto}
.wa:active{transform:scale(.96)}

/* ================================================================
   REVELACAO NA ENTRADA - hierarquia: o conteudo chega na ordem de leitura
   ================================================================ */
/* O estado escondido so existe se o JS ligou o portao. Se o script
   falhar, nao carregar ou for bloqueado, o conteudo aparece inteiro:
   a animacao e melhoria, nunca condicao para ler a pagina. */
[data-reveal="on"] .rv{opacity:0;transform:translateY(18px)}
[data-reveal="on"] .rv.in{
  opacity:1;transform:none;
  transition:opacity .7s var(--ease), transform .7s var(--ease);
}
[data-reveal="on"] .rv[data-d="1"].in{transition-delay:.07s}
[data-reveal="on"] .rv[data-d="2"].in{transition-delay:.14s}
[data-reveal="on"] .rv[data-d="3"].in{transition-delay:.21s}

/* ================================================================
   RESPONSIVO
   ================================================================ */
@media (max-width:900px){
  /* minmax(0,1fr) e nao 1fr: item de grid tem min-width:auto, entao a
     trilha estica ate o conteudo e o board para de rolar por dentro */
  .split{grid-template-columns:minmax(0,1fr);gap:2.5rem}
  .bento{grid-template-columns:1fr}
  .cell-wide{flex-direction:column;align-items:stretch;padding-right:clamp(1.5rem,3vw,2.25rem)}
  .cell-photo{
    flex:0 0 auto;height:220px;min-height:0;
    margin:.5rem calc(-1 * clamp(1.5rem,3vw,2.25rem)) calc(-1 * clamp(1.5rem,3vw,2.25rem));
  }
  .phases{grid-template-columns:repeat(2,1fr);gap:2rem}
  /* o time tem 3 pessoas: em 2 colunas sobraria um orfao na segunda
     linha. Fica em 3 ate o celular, onde vira coluna unica. */
  .includes{grid-template-columns:repeat(2,1fr);gap:1.25rem}
  .deliver{grid-template-columns:1fr;gap:1.5rem}
  .footer-grid{grid-template-columns:1fr;gap:2rem}
  .path-wrap{display:none}   /* a linha so faz sentido em 4 colunas */
}

@media (max-width:720px){
  .nav-links{
    position:fixed;inset:52px 0 auto 0;
    flex-direction:column;align-items:stretch;
    gap:0;padding:.5rem var(--gutter) 1.25rem;
    background:color-mix(in srgb, var(--nav-bg,#050908) 96%, transparent);
    -webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);
    border-bottom:1px solid var(--hairline);
    transform:translateY(-120%);
    transition:transform .35s var(--ease);
    font-size:1.0625rem;
  }
  .nav.open .nav-links{transform:none}
  .nav-links a{padding:.85rem 0}
  .nav-links .btn{margin-top:.75rem;width:100%;padding:.7rem 1rem;font-size:1rem}
  .nav > .btn{display:none}
  .nav-toggle{
    /* flex, nao grid: com grid as linhas auto esticam para preencher a
       altura do botao (align-content:normal vira stretch) e as riscas
       ficam a 16px uma da outra em vez de 6. */
    display:flex;flex-direction:column;
    align-items:center;justify-content:center;
    gap:4.5px;
    margin-left:auto;
    width:40px;height:40px;
    background:none;border:0;cursor:pointer;
    /* <button> NAO herda color: a folha do navegador forca `buttontext`.
       Sem esta linha as riscas usam currentColor preto sobre fundo quase
       preto (invisiveis no Chrome, azul do sistema no iOS). */
    color:inherit;
    -webkit-tap-highlight-color:transparent;
  }
  .nav-toggle span{
    display:block;width:20px;height:1.6px;border-radius:2px;
    background:currentColor;
    transition:transform .3s var(--ease), opacity .2s var(--ease);
  }
  /* tres riscas com 1.6px e gap 4.5 => centros a 6.1px do meio.
     Aberto: a de cima desce, a de baixo sobe, a do meio some. */
  .nav.open .nav-toggle span:nth-child(1){transform:translateY(6.1px) rotate(45deg)}
  .nav.open .nav-toggle span:nth-child(2){opacity:0}
  .nav.open .nav-toggle span:nth-child(3){transform:translateY(-6.1px) rotate(-45deg)}

  .metrics{grid-template-columns:1fr}
  .team{grid-template-columns:1fr;gap:1.75rem}
  .includes{grid-template-columns:1fr;gap:.85rem}
  .calc-inputs{grid-template-columns:1fr;gap:1rem}
  .phases{grid-template-columns:1fr}
  .bar-row{grid-template-columns:7rem 1fr auto}
  .wa span{display:none}
  .wa{padding:.7rem}
}

/* ================================================================
   ALVOS DE TOQUE - minimo 44px onde o dedo e o ponteiro.
   Fica fora do desktop: mouse acerta alvo menor sem esforco.
   ================================================================ */
@media (pointer:coarse){
  .nav-brand{padding-block:.7rem}
  .nav-toggle{width:44px;height:44px}
  .tab{padding:.85rem 1.1rem}
  .crm-act{padding:.75rem 1rem}
  .tlink{display:inline-block;padding-block:.6rem}
  .faq-item summary{padding-block:1.35rem}
  .footer nav a,
  .footer-contact a{display:block;padding-block:.75rem}
  .footer-base .credits a{display:inline-block;padding-block:.85rem}
  .contact-direct a{padding-block:1.05rem}
  .wa{padding:.85rem 1rem}
}

/* ================================================================
   MOVIMENTO REDUZIDO - tudo colapsa para estatico
   ================================================================ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .rv{opacity:1;transform:none}
  .manifesto .w{opacity:1}
  .path-svg path{stroke-dashoffset:0}
  .bar-line{transform:scaleX(1)}
  .ring .val{stroke-dashoffset:60}
  .pulse i{transform:scaleY(.6)}
}

/* transparencia reduzida: sem vidro, fundo solido */
@media (prefers-reduced-transparency:reduce){
  .nav{backdrop-filter:none;-webkit-backdrop-filter:none;
       background:var(--nav-bg,#050908)}
  .wa{backdrop-filter:none;-webkit-backdrop-filter:none;background:#0A1413}
}