/* Página de entrada (antes do login), inspirada no Shopify Editions Winter '26:
   fotos de ponta a ponta, títulos gigantes, colagem foto + elementos de celular, animação ao rolar
   e o "como funciona" contado passo a passo. Só Montserrat. */

body.na-capa header{position:fixed;left:0;right:0;background:linear-gradient(180deg,rgba(17,13,10,.7),rgba(17,13,10,0))}
body.na-capa header{transition:background .3s}
body.na-capa.rolou header{background:var(--noite)}
body.na-capa main{padding:0;max-width:none}
.cp{--off:#F4EFE8;--noite:#110D0A;color:var(--ink);overflow-x:clip}
.cp img{display:block}
.cp .pilula{display:inline-flex;align-items:center;gap:.5rem;border-radius:999px;padding:.85rem 1.4rem;font-weight:600;font-size:.9rem;border:1px solid transparent;cursor:pointer}
.cp .pilula.clara{background:var(--off);color:var(--noite)}
.cp .pilula.clara:hover{background:#fff}
.cp .pilula.vazada{background:transparent;color:var(--off);border-color:rgba(244,239,232,.55)}
.cp .pilula.vazada:hover{border-color:var(--off)}
.cp .pilula.escura{background:var(--noite);color:var(--off)}
.cp .pilula.escura:hover{background:var(--brown)}

/* ---- 1. capa: foto inteira + título gigante + colagem */
.cp-hero{position:relative;min-height:100svh;background:var(--noite);color:var(--off);display:grid;align-items:end;overflow:hidden}
.cp-hero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 25%;transform:scale(calc(1 + var(--p,0) * .12));transform-origin:50% 30%}
.cp-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(17,13,10,.35) 0%,rgba(17,13,10,0) 30%,rgba(17,13,10,.25) 55%,rgba(17,13,10,.92) 100%)}
.cp-hero .conteudo{position:relative;z-index:2;padding:0 16px 28px;display:grid;gap:18px}
.cp-gigante{font-size:clamp(3.4rem,17.5vw,15rem);font-weight:800;letter-spacing:-.065em;line-height:.8;margin:0;white-space:nowrap}
.cp-gigante em{font-style:italic;font-weight:300;letter-spacing:-.05em}
.cp-sobre{font-size:clamp(1rem,2.4vw,1.4rem);font-weight:400;max-width:34ch;margin:0;color:rgba(244,239,232,.85)}
.cp-hero .acoes{display:flex;gap:10px;flex-wrap:wrap}

/* elementos "de celular" colados sobre a foto */
.cp-cola{position:absolute;z-index:2;background:rgba(252,250,246,.96);color:var(--noite);border-radius:16px;box-shadow:0 18px 40px rgba(0,0,0,.28);font-size:.8rem;padding:12px 14px;display:grid;gap:2px;min-width:200px;opacity:0;transform:translateY(16px) rotate(var(--rot,0deg));transition:opacity .6s ease,transform .6s ease}
.cp-cola.in{opacity:1;transform:translateY(0) rotate(var(--rot,0deg))}
.cp-cola small{color:#7A6E66;font-size:.68rem;font-weight:500}
.cp-cola b{font-size:.92rem}
.cp-cola .verde{color:#2F6B43}
.cp-cola.n1{top:16%;right:6%;--rot:2deg}
.cp-cola.n2{top:33%;left:5%;--rot:-3deg;transition-delay:.25s}
.cp-cola.n3{top:50%;right:9%;--rot:-1deg;transition-delay:.5s}
.cp-tag{display:inline-block;border:1.5px dashed var(--noite);border-radius:8px;padding:2px 10px;font-weight:800;letter-spacing:.12em;margin-top:4px;justify-self:start}
@media (max-width:620px){.cp-cola{min-width:0;font-size:.72rem;padding:10px 12px}.cp-cola.n1{top:13%;right:4%}.cp-cola.n2{top:27%;left:4%}.cp-cola.n3{display:none}}

/* ---- 2. palavras gigantes que entram ao rolar */
.cp-palavras{background:var(--papel) var(--grao);padding:12vh 16px}
.cp-palavras p{margin:0;font-size:clamp(3.6rem,19vw,16rem);font-weight:800;letter-spacing:-.065em;line-height:.86;
  transform:translateX(calc((1 - var(--p,0)) * var(--dir,-1) * 35vw));opacity:calc(.15 + var(--p,0) * .85)}
.cp-palavras p:nth-child(2){--dir:1;text-align:right;font-style:italic;font-weight:300}
.cp-palavras p:nth-child(3){color:var(--brown)}
.cp-destaques{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:8vh;border-top:2px solid var(--ink);border-bottom:2px solid var(--ink)}
.cp-destaques div{display:grid;gap:8px;padding:28px 20px 28px 0}
.cp-destaques div+div{border-left:1px solid var(--line);padding-left:24px}
.cp-destaques b{font-size:clamp(2.8rem,8vw,5.6rem);font-weight:800;letter-spacing:-.06em;line-height:.9;color:var(--ink)}
.cp-destaques div:nth-child(2) b{color:var(--brown)}
.cp-destaques span{font-size:clamp(.95rem,1.6vw,1.15rem);font-weight:500;color:var(--ink);max-width:22ch}
@media (max-width:620px){.cp-destaques{grid-template-columns:1fr}.cp-destaques div+div{border-left:0;border-top:1px solid var(--line);padding-left:0}}

/* ---- 3. como funciona: celular fixo + passos */
.cp-como{background:var(--noite);color:var(--off);padding:14vh 16px}
.cp-como .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:start}
.cp-como h2.cp-titulo{grid-column:1/-1}
.cp-titulo{font-size:clamp(2.4rem,8vw,6rem);font-weight:800;letter-spacing:-.06em;line-height:.9;margin:0}
.cp-titulo em{font-style:italic;font-weight:300}
.cp-fixo{position:sticky;top:12vh;display:grid;place-items:center}
.cp-cel{width:min(300px,72vw);aspect-ratio:9/18.5;border-radius:42px;background:#000;padding:12px;box-shadow:0 0 0 1px rgba(244,239,232,.18),0 40px 80px rgba(0,0,0,.5);position:relative}
.cp-tela{position:relative;width:100%;height:100%;border-radius:32px;overflow:hidden;background:var(--papel)}
.cp-cena{position:absolute;inset:0;padding:42px 18px 18px;display:grid;align-content:start;gap:12px;color:var(--noite);opacity:0;transform:translateY(14px) scale(.98);transition:opacity .45s ease,transform .45s ease}
.cp-cena.ativa{opacity:1;transform:none}
.cp-cena .rot{font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:#7A6E66;font-weight:600}
.cp-cena .big{font-size:1.9rem;font-weight:800;letter-spacing:-.04em;line-height:1}
.cp-cena .card{background:#fff;border-radius:14px;padding:12px;display:grid;gap:4px;font-size:.8rem;box-shadow:0 2px 10px rgba(0,0,0,.06);min-width:0;overflow:hidden}
.cp-cena .cod{font-size:1.25rem;letter-spacing:.1em;font-weight:800}
.cp-cena .url{font-size:.7rem;overflow-wrap:anywhere}
.cp-cena .card b{font-size:.95rem}
.cp-cena .foto{border-radius:14px;overflow:hidden;aspect-ratio:3/4;position:relative}
.cp-cena .foto img{width:100%;height:100%;object-fit:cover}
.cp-cena .foto span{position:absolute;left:10px;bottom:10px;background:rgba(255,255,255,.92);border-radius:999px;padding:4px 10px;font-size:.7rem;font-weight:700}
.cp-cena .barra{height:6px;background:#E4DDD3;border-radius:3px;overflow:hidden}
.cp-cena .barra i{display:block;height:100%;width:0;background:var(--noite);transition:width 1.6s ease .2s}
.cp-cena.ativa .barra i{width:var(--w,70%)}
.cp-cena .linha{display:flex;justify-content:space-between;font-size:.8rem}
.cp-passos{display:grid;gap:0}
.cp-passo{min-height:62vh;display:grid;align-content:center;gap:12px;opacity:.28;transition:opacity .4s}
.cp-passo.ativo{opacity:1}
.cp-passo .n{font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;color:var(--brown-soft);font-weight:600}
.cp-passo h3{font-size:clamp(1.6rem,4vw,2.6rem);font-weight:700;letter-spacing:-.04em;line-height:1.02;margin:0}
.cp-passo h3 em{font-style:italic;font-weight:300}
.cp-passo p{margin:0;color:rgba(244,239,232,.72);font-size:1rem;max-width:40ch}
@media (max-width:820px){
  .cp-como .wrap{grid-template-columns:1fr;gap:0}
  /* faixa fixa de ponta a ponta: o texto dos passos passa por baixo dela */
  .cp-fixo{top:58px;z-index:1;margin-inline:-16px;padding:14px 16px 18px;background:var(--noite);box-shadow:0 12px 14px -8px var(--noite)}
  .cp-cel{width:min(170px,44vw);border-radius:28px;padding:7px}
  .cp-tela{border-radius:22px}
  .cp-cena{padding:24px 10px 10px;gap:7px;font-size:.7rem}
  .cp-cena .big{font-size:1.1rem}.cp-cena .card{padding:8px;font-size:.62rem}.cp-cena .card b{font-size:.72rem}.cp-cena .cod{font-size:.8rem}.cp-cena .url{font-size:.55rem}.cp-cena .rot{font-size:.5rem}
  .cp-passo{min-height:70vh;align-content:start;padding-top:22vh}
}

/* ---- 4. foto inteira com colagem de níveis */
.cp-niveis{position:relative;min-height:110svh;color:var(--off);display:grid;align-items:center;overflow:hidden;background:var(--noite)}
.cp-niveis>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 35%;transform:translateY(calc((var(--p,0) - .5) * -8%)) scale(1.12)}
.cp-niveis::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(17,13,10,.82),rgba(17,13,10,.25) 70%)}
.cp-niveis .wrap{position:relative;z-index:2;display:grid;gap:28px;padding-block:12vh}
.cp-escada{display:grid;gap:10px;max-width:520px}
.cp-degrau{display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:center;background:rgba(252,250,246,.95);color:var(--noite);border-radius:14px;padding:14px 16px;
  opacity:0;transform:translateX(-30px);transition:opacity .6s ease,transform .6s ease}
.cp-degrau.in{opacity:1;transform:none}
.cp-degrau:nth-child(2){transition-delay:.12s;margin-left:24px}
.cp-degrau:nth-child(3){transition-delay:.24s;margin-left:48px}
.cp-degrau:nth-child(4){transition-delay:.36s;margin-left:72px;background:var(--off);outline:2px solid var(--brown-soft)}
.cp-degrau b{font-size:1.05rem;letter-spacing:-.02em}
.cp-degrau small{display:block;color:#7A6E66;font-size:.74rem}
.cp-degrau .pct{font-weight:800;font-size:1.3rem;letter-spacing:-.04em;text-align:right;line-height:1.05}
.cp-degrau .pct small{display:block;font-size:.62rem;font-weight:600;letter-spacing:0;color:#7A6E66}
.cp-degrau .ic{width:34px;height:34px;border-radius:50%;background:var(--noite);color:var(--off);display:grid;place-items:center;font-size:.75rem;font-weight:700}
@media (max-width:620px){.cp-degrau:nth-child(n){margin-left:0}}

/* ---- 5. calculadora */
.cp-calc{background:var(--papel) var(--grao);padding:14vh 16px}
.cp-calc .wrap{display:grid;gap:36px}
.cp-calc .painel{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:24px;align-items:stretch}
@media (max-width:820px){.cp-calc .painel{grid-template-columns:1fr}}
.cp-slider{display:grid;gap:18px;border-top:1px solid var(--ink);padding-top:22px}
.cp-slider output{font-size:clamp(2.6rem,8vw,5rem);font-weight:800;letter-spacing:-.06em;line-height:1}
.cp-slider input[type=range]{width:100%;accent-color:var(--noite);height:28px}
.cp-result{background:var(--noite);color:var(--off);border-radius:18px;padding:26px;display:grid;gap:18px;align-content:start}
.cp-result .v{font-size:clamp(2.2rem,6vw,3.4rem);font-weight:800;letter-spacing:-.05em;line-height:1}
.cp-result .l{font-size:.75rem;color:var(--brown-soft);font-weight:600;letter-spacing:.06em}
.cp-result hr{border:0;border-top:1px dashed rgba(244,239,232,.25);margin:0}

/* ---- 6. regras em duas colunas + fechamento */
.cp-regras{background:var(--papel-2);padding:12vh 16px}
.cp-regras .wrap{display:grid;gap:44px}
.cp-fim{position:relative;min-height:90svh;display:grid;place-items:center;text-align:center;color:var(--off);overflow:hidden;background:var(--noite)}
.cp-fim .colagem{position:absolute;inset:0;display:grid;grid-template-columns:repeat(3,1fr);gap:0;opacity:.55}
.cp-fim .colagem img{width:100%;height:100%;object-fit:cover}
.cp-fim::after{content:"";position:absolute;inset:0;background:rgba(17,13,10,.55)}
.cp-fim .conteudo{position:relative;z-index:2;display:grid;gap:22px;justify-items:center;padding:16px}

/* entrada suave dos blocos */
.rv{opacity:0;transform:translateY(28px);transition:opacity .8s ease,transform .8s ease}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .rv,.cp-cola,.cp-degrau,.cp-cena{opacity:1!important;transform:none!important;transition:none!important}
  .cp-palavras p,.cp-hero>img,.cp-niveis>img{transform:none!important;opacity:1!important}
}