/* ==========================================================================
   novo.css — entrada nova (/novo/): hero em papel e tinta + guia em passos.
   Herda reset.css e tokens.css. Mesmo mundo da /solucoes/: papel #FAFAFA,
   tinta #0E0E10, hairline como estrutura, lime só como preenchimento com
   tinta por cima (estado escolhido), mono só para dado de máquina.
   Desenhado em 390×844 primeiro; o desktop amplia.
   ========================================================================== */

:root{
  --mono:"JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --p-bg:#FAFAFA;
  --p-surface:#FFFFFF;
  --p-raised:#F2F2F3;
  --p-line:rgba(14,14,16,.11);
  --p-line-strong:rgba(14,14,16,.22);
  --p-bad:#B42318;
  --p-ink:#0E0E10;
  --p-ink-hover:#26262B;
  --p-txt:#0A0A0B;
  --p-txt-2:#45454A;
  --p-txt-3:#6E6E73;
  --p-live:#E8FF6B;
  --p-live-edge:#C8DE45;
  --p-shadow-lift:0 2px 4px rgba(14,14,16,.06), 0 18px 44px -16px rgba(14,14,16,.28);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --gutter:clamp(18px,4vw,40px);
}

::selection{background:var(--p-live);color:var(--p-ink);}
html{scrollbar-color:var(--p-line-strong) var(--p-bg);scrollbar-width:thin;caret-color:var(--p-ink);scroll-behavior:auto;}
:focus-visible{outline:2px solid var(--p-ink);outline-offset:3px;}

body.novo{
  background:var(--p-bg);color:var(--p-txt);
  font-family:var(--font-body);font-size:15px;min-height:100vh;min-height:100dvh;
  font-variant-numeric:tabular-nums;overflow-x:hidden;
}
body.novo.is-guia{overflow:hidden;}
[hidden]{display:none !important;}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0;pointer-events:none;}
.ic{width:16px;height:16px;flex:none;}

/* --- barra de status ----------------------------------------------------- */
.status{
  position:fixed;inset:0 0 auto 0;z-index:5;
  display:flex;align-items:center;gap:clamp(12px,2.4vw,30px);
  padding:0 var(--gutter);height:40px;
  font-size:12.5px;color:var(--p-txt-3);
  border-bottom:1px solid var(--p-line);
  background:var(--p-bg);
}
.status [data-clock]{font-family:var(--mono);font-size:11.5px;}
.status-brand{font-family:var(--font-display);color:var(--p-txt);letter-spacing:.1em;font-weight:600;font-size:12px;}
.status-brand:hover{text-decoration:underline;text-underline-offset:4px;}
.status-live{display:inline-flex;align-items:center;gap:7px;}
.status-dot{width:6px;height:6px;border-radius:50%;background:var(--p-ink);animation:pulse 2.4s cubic-bezier(.4,0,.6,1) infinite;}
.status-sep{flex:1;}
.status-meta{white-space:nowrap;}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1);}50%{opacity:.35;transform:scale(.7);}}

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{
  position:relative;min-height:100vh;min-height:100dvh;
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:56px var(--gutter) clamp(28px,5vh,56px);
  overflow:hidden;isolation:isolate;
}
.hero-gl{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;}
.hero[data-hero="static"] .hero-gl,.hero[data-hero="boot"] .hero-gl{visibility:hidden;}

/* reserva estática: as linhas de construção e a palavra em retícula, só com CSS */
.hero-static{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  display:flex;align-items:center;justify-content:center;
  background-image:
    repeating-linear-gradient(90deg, var(--p-line) 0 1px, transparent 1px 96px),
    repeating-linear-gradient(0deg, var(--p-line) 0 1px, transparent 1px 96px);
  background-position:center top;
  opacity:0;transition:opacity .4s ease;
}
.hero[data-hero="static"] .hero-static{opacity:1;}

/* --- cursor customizado (só ponteiro fino): anel de tinta com ponto; cresce e mistura sobre links --- */
.cursor{position:fixed;left:0;top:0;z-index:50;pointer-events:none;width:28px;height:28px;border-radius:50%;
  border:1px solid var(--p-ink);opacity:0;transition:opacity .25s ease,width .28s var(--ease-out),height .28s var(--ease-out),background-color .28s ease;
  will-change:transform;display:none;}
.cursor i{position:absolute;left:50%;top:50%;width:3px;height:3px;margin:-1.5px 0 0 -1.5px;border-radius:50%;background:var(--p-ink);transition:opacity .2s ease;}
.cursor.is-on{opacity:1;}
.cursor.is-fora{opacity:0;}
.cursor.is-sobre{width:46px;height:46px;background:var(--p-live);border-color:var(--p-ink);}
.cursor.is-sobre i{opacity:0;}
.cursor.is-apertado{width:22px;height:22px;}
/* correndo, o anel encolhe para um ponto: o efeito está no campo que a retícula sente, não no anel */
.cursor.is-rapido{width:8px;height:8px;background:var(--p-ink);border-color:transparent;}
.cursor.is-rapido i{opacity:0;}
@media (pointer:fine){
  .cursor{display:block;}
  html.js-cursor .hero,html.js-cursor .hero *,html.js-cursor .status,html.js-cursor .status *{cursor:none;}
}
.hero-word{
  display:block;
  font-family:var(--font-display);font-weight:700;letter-spacing:-.06em;line-height:1;
  font-size:clamp(72px, 30vw, 420px);
  transform:translateY(-14vh);
  color:transparent;
  background-image:radial-gradient(circle at center, var(--p-ink) 0 1.1px, transparent 1.6px);
  background-size:5px 5px;
  -webkit-background-clip:text;background-clip:text;
  user-select:none;
}
@media (min-width:900px){ .hero-word{transform:translateY(-8vh);} }
/* celular: a mesma retícula, com célula de 3px; sobe mais perto do título */
@media (max-width:700px){
  .hero-word{background-image:radial-gradient(circle at center, var(--p-ink) 0 .7px, transparent 1.05px);background-size:3px 3px;font-size:clamp(72px, 28vw, 420px);transform:translateY(-22vh);}
}

.hero-copy{position:relative;z-index:1;max-width:760px;}
.hero-kicker{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--p-txt-3);margin:0 0 14px;
}
.hero-t{
  font-family:var(--font-display);font-weight:600;
  font-size:clamp(34px, 9vw, 64px);line-height:1.02;letter-spacing:-.04em;
  text-wrap:balance;margin:0 0 14px;max-width:16ch;
}
.hero-lede{
  font-size:clamp(15.5px,1.35vw,17.5px);line-height:1.5;color:var(--p-txt-2);
  max-width:40ch;margin:0 0 22px;text-wrap:pretty;
}
.hero-cta{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:0 0 26px;}
.hero-nota{font-family:var(--mono);font-size:11.5px;color:var(--p-txt-3);}
.hero-prova{font-size:12.5px;color:var(--p-txt-3);margin:0;}

/* revelação: escondido até o módulo subir; .anim-failed libera tudo */
.js .hero [data-reveal]{opacity:0;transform:translateY(16px);}
.js .hero.is-in [data-reveal],.js.anim-failed .hero [data-reveal]{opacity:1;transform:none;}
.js .hero.is-in.is-css [data-reveal]{transition:opacity .6s var(--ease-out),transform .7s var(--ease-out);}
.js .hero.is-in.is-css [data-reveal]:nth-child(2){transition-delay:.06s}
.js .hero.is-in.is-css [data-reveal]:nth-child(3){transition-delay:.12s}
.js .hero.is-in.is-css [data-reveal]:nth-child(4){transition-delay:.18s}
.js .hero.is-in.is-css [data-reveal]:nth-child(5){transition-delay:.24s}

/* --- botões --------------------------------------------------------------- */
.btn-live{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--font-display);font-size:14px;font-weight:600;letter-spacing:-.01em;
  background:var(--p-ink);color:#FAFAFA;border:1px solid var(--p-ink);border-radius:999px;
  padding:12px 20px;cursor:pointer;white-space:nowrap;
  transition:background .18s ease,transform .12s ease;
}
.btn-live:hover{background:var(--p-ink-hover);}
.btn-live:active{transform:translateY(1px);}
.btn-live[disabled]{background:var(--p-raised);border-color:var(--p-line);color:#9A9AA0;cursor:not-allowed;}
.btn-cta{padding:14px 22px;font-size:15px;}
.btn-cta .ic{transition:transform .25s var(--ease-out);}
.btn-cta:hover .ic{transform:translateX(3px);}
.btn-ghost{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--font-display);font-size:13.5px;font-weight:600;letter-spacing:-.01em;
  background:transparent;color:var(--p-txt);border:1px solid var(--p-line-strong);border-radius:999px;
  padding:11px 18px;cursor:pointer;white-space:nowrap;transition:background .18s ease;
}
.btn-ghost:hover{background:var(--p-raised);}

/* ==========================================================================
   GUIA — uma pergunta por tela, cabe em 390×844 sem rolar
   ========================================================================== */
.guia{
  position:fixed;inset:0;z-index:4;
  display:flex;flex-direction:column;
  padding:40px 0 0;
  background:var(--p-bg);
}
.guia[hidden]{display:none;}
.guia-top{
  display:flex;align-items:center;justify-content:space-between;
  padding:10px var(--gutter);min-height:52px;
}
.guia-back{
  display:inline-flex;align-items:center;gap:6px;
  font-family:var(--font-display);font-size:12.5px;font-weight:600;color:var(--p-txt-3);
  padding:7px 12px 7px 8px;border-radius:999px;transition:background .18s ease,color .18s ease;
}
.guia-back:hover{background:var(--p-raised);color:var(--p-txt);}
.guia-back[hidden]{display:none;}
.guia-conta{font-family:var(--mono);font-size:11.5px;color:var(--p-txt-3);}
.guia-prog{height:2px;background:var(--p-line);margin:0 var(--gutter);border-radius:2px;overflow:hidden;}
.guia-prog span{display:block;height:100%;width:0;background:var(--p-ink);transition:width .5s var(--ease-out);}

.guia-mid{flex:1;display:flex;flex-direction:column;justify-content:center;padding:12px var(--gutter);min-height:0;}
.guia-passo{width:100%;max-width:560px;margin:0 auto;display:flex;flex-direction:column;min-height:0;}
.guia-passo.is-out{animation:passo-out .18s ease forwards;}
.guia-passo.is-in{animation:passo-in .32s var(--ease-out);}
@keyframes passo-out{to{opacity:0;transform:translateY(-10px);}}
@keyframes passo-in{from{opacity:0;transform:translateY(14px);}}

.guia-oi{
  font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--p-txt-3);margin:0 0 10px;min-height:1.4em;
}
.guia-q{
  display:block;font-family:var(--font-display);font-weight:600;
  font-size:clamp(26px,6.4vw,38px);line-height:1.08;letter-spacing:-.035em;
  text-wrap:balance;margin:0 0 22px;
}
.guia-campo{display:flex;flex-direction:column;gap:10px;min-height:0;}

/* campo de texto: papel, hairline forte, foco em tinta */
.guia-in{
  width:100%;font-size:19px;line-height:1.3;
  background:var(--p-bg);color:var(--p-txt);
  border:0;border-bottom:1px solid var(--p-line-strong);border-radius:0;
  padding:12px 0;outline:none;transition:border-color .18s ease;
  -webkit-appearance:none;appearance:none;
}
.guia-in::placeholder{color:#9A9AA0;}
.guia-in:focus{border-bottom-color:var(--p-ink);box-shadow:0 1px 0 0 var(--p-ink);}
.guia-in[type="search"]::-webkit-search-cancel-button{-webkit-appearance:none;}
.guia-erro{font-size:13px;color:var(--p-bad);margin:8px 0 0;}
.guia-erro[hidden]{display:none;}

/* microrrecompensa: o valor aceito vira um chip lime com check, e a tela troca */
.guia-ok{
  display:inline-flex;align-items:center;gap:8px;align-self:flex-start;
  background:var(--p-live);color:var(--p-ink);box-shadow:inset 0 0 0 1px var(--p-live-edge);
  border-radius:999px;padding:9px 14px 9px 12px;
  font-family:var(--font-display);font-size:15px;font-weight:600;letter-spacing:-.01em;
  animation:ok-in .22s var(--ease-out);
}
@keyframes ok-in{from{transform:scale(.92);opacity:0;}}

.guia-acoes{display:flex;align-items:center;gap:14px;margin-top:22px;}
.guia-dica{font-family:var(--mono);font-size:11px;color:var(--p-txt-3);}
@media (hover:none){ .guia-dica{display:none;} }

/* lista de segmentos: busca em cima, opções em baixo, só a lista rola */
.guia-lista{
  display:flex;flex-direction:column;gap:2px;
  max-height:min(44vh,380px);overflow-y:auto;overscroll-behavior:contain;
  margin:4px 0 0;padding:2px 0 12px;
  -webkit-mask-image:linear-gradient(to bottom, #000 calc(100% - 24px), transparent);
  mask-image:linear-gradient(to bottom, #000 calc(100% - 24px), transparent);
}
.guia-item{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  width:100%;text-align:left;font-size:15.5px;color:var(--p-txt);
  padding:11px 12px;border-radius:10px;border:1px solid transparent;
  transition:background .14s ease;
}
.guia-item:hover,.guia-item.is-foco{background:var(--p-raised);}
.guia-item[aria-selected="true"]{background:var(--p-live);color:var(--p-ink);box-shadow:inset 0 0 0 1px var(--p-live-edge);}
.guia-item small{font-family:var(--mono);font-size:10.5px;color:var(--p-txt-3);}
.guia-vazio{font-size:14px;color:var(--p-txt-3);padding:14px 12px;}
.guia-vazio b{font-weight:600;color:var(--p-txt);}

/* "o que você precisa": até quatro escolhas, lime quando marcada */
.guia-grade{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.guia-op{
  display:flex;flex-direction:column;align-items:flex-start;gap:10px;
  min-height:96px;padding:14px;border-radius:14px;text-align:left;
  background:var(--p-surface);border:1px solid var(--p-line);color:var(--p-txt);
  transition:background .16s ease,border-color .16s ease,transform .12s ease;
}
.guia-op:hover{border-color:var(--p-line-strong);}
.guia-op:active{transform:scale(.985);}
.guia-op[aria-pressed="true"]{background:var(--p-live);border-color:var(--p-live-edge);}
.guia-op b{font-family:var(--font-display);font-weight:600;font-size:15px;letter-spacing:-.015em;line-height:1.2;}
.guia-op span{font-size:12.5px;color:var(--p-txt-2);line-height:1.35;}
.guia-op .ic{width:18px;height:18px;}
.guia-op-check{
  margin-left:auto;width:20px;height:20px;border-radius:50%;
  border:1px solid var(--p-line-strong);display:grid;place-items:center;
  position:absolute;right:12px;top:12px;background:var(--p-bg);
}
.guia-op{position:relative;}
.guia-op-check .ic{width:12px;height:12px;opacity:0;}
.guia-op[aria-pressed="true"] .guia-op-check{background:var(--p-ink);border-color:var(--p-ink);color:#FAFAFA;}
.guia-op[aria-pressed="true"] .guia-op-check .ic{opacity:1;}

/* fecho: nome, código e o pulso de "montando" */
.guia-fim{display:flex;flex-direction:column;gap:12px;}
.guia-cod{font-family:var(--mono);font-size:12px;color:var(--p-txt-3);}
.guia-cod b{font-weight:500;color:var(--p-txt);}
.guia-montando{display:inline-flex;align-items:center;gap:10px;font-size:14px;color:var(--p-txt-2);}
.guia-montando i{width:6px;height:6px;border-radius:50%;background:var(--p-ink);animation:pulse 1.2s cubic-bezier(.4,0,.6,1) infinite;}

.guia-pe{font-size:12px;color:var(--p-txt-3);padding:10px var(--gutter) max(14px, env(safe-area-inset-bottom));margin:0;}
.guia-pe a{text-decoration:underline;text-underline-offset:3px;}

/* --- noscript ------------------------------------------------------------- */
.noscript{position:fixed;inset:auto 0 0 0;background:var(--p-surface);border-top:1px solid var(--p-line);padding:14px var(--gutter);font-size:14px;z-index:9;}
.noscript a{text-decoration:underline;text-underline-offset:3px;}

/* --- desktop --------------------------------------------------------------- */
@media (min-width:900px){
  .hero{justify-content:flex-end;padding-top:80px;padding-bottom:clamp(40px,7vh,72px);}
  .hero-copy{max-width:820px;}
  .hero-t{max-width:20ch;}
  .guia-top{padding-top:18px;}
  .guia-q{margin-bottom:26px;}
  .guia-grade{grid-template-columns:repeat(4,1fr);}
  .guia-passo{max-width:640px;}
}
@media (max-height:700px){
  .hero-t{font-size:clamp(28px,7vw,48px);}
  .guia-q{font-size:clamp(22px,5.6vw,30px);margin-bottom:14px;}
  .guia-lista{max-height:38vh;}
  .guia-op{min-height:78px;}
}

/* --- movimento reduzido ----------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;}
  .js .hero [data-reveal]{opacity:1;transform:none;}
}