/* Visibility System
   O único elemento gráfico da marca é o traço de marca-texto. Tudo o mais é
   tipografia e espaço — a contenção é o que comunica "sistema consolidado". */

:root{
  --paper:#FAFAF8;
  --ink:#15170F;
  --hivis:#DCF23A;
  --muted:#82857A;
  --rule:#E6E6DF;

  --display:"Bricolage Grotesque",system-ui,sans-serif;
  --text:"Instrument Sans",system-ui,sans-serif;

  --pad:clamp(20px,5vw,64px);
  --gap:clamp(56px,11vh,132px);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--text); font-size:17px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
}
a{color:inherit}

/* ── MARCA-TEXTO ───────────────────────────────────────────────────────────
   Traço real de caneta: levemente torto, sem cobrir a linha inteira, com as
   pontas irregulares e multiply pra que a tinta pareça passar POR CIMA do
   texto e não atrás dele. O sweep é desenhado da esquerda pra direita. */
.mk{
  position:relative;
  display:inline;
  background-image:linear-gradient(var(--hivis),var(--hivis));
  background-repeat:no-repeat;
  background-position:0 88%;
  background-size:0% 42%;
  mix-blend-mode:multiply;
  /* sem isto, o fundo é fatiado entre as linhas: a primeira leva o traço inteiro e a
     segunda fica sem nada. Com clone, cada linha ganha o próprio traço — que é como
     uma caneta marca de verdade. */
  -webkit-box-decoration-break:clone; box-decoration-break:clone;
  padding:0 .06em;
  transition:background-size .78s cubic-bezier(.7,0,.25,1);
}
.mk.on{background-size:100% 42%}
.mk-h1{background-position:0 80%; background-size:0% 44%}
.mk-h1.on{background-size:100% 44%}
.mk-logo{background-position:0 92%; background-size:0% 30%}
.mk-logo.on{background-size:100% 30%}

/* ── NAV ── */
.nav{
  position:sticky; top:0; z-index:9;
  display:flex; justify-content:space-between; align-items:center;
  padding:18px var(--pad);
  background:color-mix(in srgb,var(--paper) 86%,transparent);
  backdrop-filter:blur(10px);
  border-bottom:1px solid transparent;
}
.nav.stuck{border-bottom-color:var(--rule)}
.logo{
  font-family:var(--display); font-weight:800; font-size:18px;
  letter-spacing:-.03em; text-decoration:none;
}
.nav-cta{
  font-size:14px; font-weight:600; text-decoration:none;
  padding:9px 16px; border:1.5px solid var(--ink); border-radius:100px;
  transition:background .2s,color .2s;
}
.nav-cta:hover{background:var(--ink); color:var(--paper)}

/* ── HERO ── */
.hero{padding:clamp(64px,14vh,148px) var(--pad) clamp(56px,11vh,120px); max-width:1180px}
.eyebrow{
  font-size:12.5px; font-weight:600; letter-spacing:.13em; text-transform:uppercase;
  color:var(--muted); margin:0 0 clamp(20px,4vh,38px);
}
h1{
  font-family:var(--display); font-weight:800;
  font-size:clamp(44px,9.2vw,116px); line-height:.94; letter-spacing:-.043em;
  margin:0 0 clamp(24px,4vh,40px); text-wrap:balance;
}
.lead{font-size:clamp(18px,2.1vw,23px); line-height:1.5; max-width:36ch; color:var(--ink); margin:0 0 clamp(30px,5vh,46px)}

.acts{display:flex; gap:12px; flex-wrap:wrap}
.btn{
  display:inline-block; text-decoration:none;
  font-size:15px; font-weight:600;
  padding:14px 26px; border-radius:100px;
  background:var(--ink); color:var(--paper);
  border:1.5px solid var(--ink);
  transition:transform .18s,opacity .18s;
}
.btn:hover{transform:translateY(-2px)}
.btn-2{background:transparent; color:var(--ink)}
.btn-2:hover{background:var(--ink); color:var(--paper)}

/* ── SEÇÕES ── */
.sec{padding:var(--gap) var(--pad); max-width:1180px; border-top:1px solid var(--rule)}
.sec h2{
  font-family:var(--display); font-weight:800;
  font-size:clamp(30px,5vw,62px); line-height:1.03; letter-spacing:-.035em;
  margin:0 0 clamp(20px,3.4vh,34px); max-width:26ch; text-wrap:balance;
}
.body{font-size:clamp(16.5px,1.7vw,19px); max-width:56ch; color:var(--ink); margin:0 0 22px}
.body em{font-style:normal; color:var(--muted)}
.small{font-size:16px; color:var(--muted); max-width:52ch}

/* as três verdades — cada uma é uma frase que o dono já viveu */
.truths{list-style:none; padding:0; margin:clamp(30px,5vh,50px) 0}
.truths li{
  font-family:var(--display); font-weight:600;
  font-size:clamp(20px,2.9vw,34px); line-height:1.28; letter-spacing:-.025em;
  padding:18px 0; border-bottom:1px solid var(--rule);
}
.truths li:first-child{border-top:1px solid var(--rule)}

/* ── SISTEMA ── */
.grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(248px,1fr)); gap:2px; background:var(--rule); border:1px solid var(--rule); margin-top:clamp(30px,5vh,48px)}
.card{background:var(--paper); padding:clamp(24px,3vw,38px)}
.card h3{font-family:var(--display); font-weight:800; font-size:22px; letter-spacing:-.025em; margin:0 0 12px}
.card p{margin:0; font-size:16px; color:var(--muted); line-height:1.62}

/* ── PLANOS ── */
.planos{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:clamp(16px,2.4vw,28px); margin:clamp(30px,5vh,48px) 0 clamp(26px,4vh,38px)}
.plano{border:1.5px solid var(--ink); border-radius:20px; padding:clamp(24px,3vw,36px)}
.plano-2{background:var(--ink); color:var(--paper); border-color:var(--ink)}
.pl-tag{
  font-family:var(--display); font-weight:800; font-size:13px;
  letter-spacing:.1em; text-transform:uppercase; margin:0 0 20px; color:var(--muted);
}
.plano-2 .pl-tag{color:var(--hivis)}
.plano h3{font-family:var(--display); font-weight:800; font-size:clamp(24px,3vw,32px); letter-spacing:-.03em; margin:0 0 14px}
.plano p{margin:0; font-size:16.5px; line-height:1.6}
.plano-2 p{color:color-mix(in srgb,var(--paper) 78%,transparent)}

/* ── PARTNER ──
   A porta high-ticket é a única seção escura da página: a mudança de fundo É a
   mudança de escala. O marca-texto continua o mesmo — a marca não muda de pele. */
.sec-partner{
  background:var(--ink); color:var(--paper);
  max-width:none; border-top:0;
  padding-left:0; padding-right:0;
}
.sec-partner>*{max-width:1180px; margin-left:auto; margin-right:auto; padding-left:var(--pad); padding-right:var(--pad); box-sizing:content-box}
.sec-partner .eyebrow{color:var(--hivis)}
.sec-partner h2{color:var(--paper)}
.sec-partner .body{color:color-mix(in srgb,var(--paper) 82%,transparent)}
.sec-partner .small{color:color-mix(in srgb,var(--paper) 55%,transparent)}
/* no fundo escuro o multiply apagaria o amarelo, e a meia-marca deixa a metade de
   cima das letras invisível (tinta escura sobre fundo escuro). Aqui o traço vira
   etiqueta cheia: cobre a linha inteira e o texto é escuro sobre o amarelo. */
.sec-partner .mk{
  mix-blend-mode:normal; color:var(--ink);
  background-position:0 50%;
  background-size:0% 96%;
  padding:0 .12em;
}
.sec-partner .mk.on{background-size:100% 96%}
.pt-list{list-style:none; padding:0; margin:clamp(28px,4.6vh,44px) auto}
.pt-list li{
  font-size:clamp(16.5px,1.7vw,19px); line-height:1.6;
  padding:20px 0; border-bottom:1px solid color-mix(in srgb,var(--paper) 14%,transparent);
  color:color-mix(in srgb,var(--paper) 82%,transparent);
  max-width:62ch;
}
.pt-list li:first-child{border-top:1px solid color-mix(in srgb,var(--paper) 14%,transparent)}
.pt-list b{color:var(--paper); font-weight:600}

/* nav links do meio */
.nav-links{display:flex; gap:22px}
.nav-links a{font-size:14px; font-weight:500; text-decoration:none; color:var(--muted); transition:color .2s}
.nav-links a:hover{color:var(--ink)}
@media(max-width:720px){.nav-links{display:none}}

/* ── FECHO ── */
.sec-cta h2{max-width:22ch}

.ft{padding:clamp(40px,7vh,72px) var(--pad); border-top:1px solid var(--rule); max-width:1180px}
.ft p{margin:0; font-family:var(--display); font-weight:800; font-size:18px; letter-spacing:-.03em}
.ft-2{font-family:var(--text)!important; font-weight:400!important; font-size:14.5px!important; letter-spacing:0!important; color:var(--muted); margin-top:8px!important}

/* ── ENTRADA ── */
.r{opacity:0; transform:translateY(18px); transition:opacity .72s ease,transform .72s cubic-bezier(.2,.7,.2,1)}
.r.on{opacity:1; transform:none}

@media (prefers-reduced-motion:reduce){
  .r{opacity:1; transform:none; transition:none}
  .mk{transition:none}
  .btn:hover{transform:none}
}