/* ============================================================
   Ecossistema 12P — CSS compartilhado das LPs dos funis
   Base: estética v3 (claro/escuro alternado, verde neon)
   Copies: Leonardo Hallal (repositório oficial 12/07/2026)
   ============================================================ */
:root{
  --white:#FFFFFF; --white-2:#F7F7F4; --black:#0D0D0D; --black-2:#161616; --card-dk:#181818;
  --ink:#141414; --ink-2:#56564F; --txt:#FFFFFF; --txt-2:#A7A7A7;
  --green:#1DB954; --green-2:#1ED760; --green-ink:#149441;
  --line:#E7E7E2; --line-dk:#2C2C2C;
  --shadow:0 24px 60px -30px rgba(13,13,13,.28); --shadow-dk:0 24px 60px -30px rgba(0,0,0,.9); --r:20px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--white);color:var(--ink);font-family:'Inter',system-ui,sans-serif;font-size:17px;line-height:1.62;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
::selection{background:var(--green);color:#0D0D0D}

.wrap{width:100%;max-width:1160px;margin:0 auto;padding:0 24px}
.narrow{max-width:820px}
section{position:relative}
.dk{background:var(--black);color:var(--txt)}
.pad{padding:clamp(66px,9vw,116px) 0}
.pad-sm{padding:clamp(48px,6vw,80px) 0}
.muted{color:var(--ink-2)}
.dk .muted{color:var(--txt-2)}
.center{text-align:center}

h1,h2,h3,.display{font-family:'Fraunces',serif;font-weight:600;line-height:1.06;letter-spacing:-.015em}
h1{font-size:clamp(36px,5.6vw,64px);font-weight:900;letter-spacing:-.03em;line-height:1.04}
h2{font-size:clamp(29px,4.3vw,48px)}
h3{font-size:clamp(20px,2.3vw,25px)}
p{max-width:62ch}
.center p{margin-inline:auto}
i.w{font-style:italic;color:var(--green-ink)}
.dk i.w{color:var(--green)}
.kicker{font-family:'Fraunces',serif;font-style:italic;font-weight:500;font-size:clamp(18px,2vw,22px);color:var(--green-ink)}
.dk .kicker{color:var(--green)}

.btn{display:inline-flex;align-items:center;gap:11px;background:var(--green);color:#0D0D0D;font-family:'Inter',sans-serif;font-weight:700;font-size:16px;padding:17px 30px;border-radius:100px;border:0;cursor:pointer;transition:transform .18s,background .18s,box-shadow .18s;box-shadow:0 12px 30px -12px rgba(29,185,84,.55)}
.btn:hover{background:var(--green-2);transform:translateY(-2px)}
.btn .arw{transition:transform .18s}
.btn:hover .arw{transform:translateX(4px)}
.btn.lg{padding:20px 40px;font-size:17px}
.byline{font-size:14.5px;color:var(--ink-2);margin-top:18px;max-width:46ch}
.note{font-size:14px;color:var(--ink-2);margin-top:14px}
.dk .note,.dk .byline{color:var(--txt-2)}

/* header */
header{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.85);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;height:66px}
.brand{font-family:'Fraunces',serif;font-weight:600;font-size:19px}
.brand b{color:var(--green-ink);font-weight:600}
.nav a.cta{font-size:14.5px;font-weight:700;background:var(--black);color:#fff;padding:11px 22px;border-radius:100px;transition:transform .18s,background .18s}
.nav a.cta:hover{transform:translateY(-1px);background:#000}

/* badge condição especial */
.badge{display:inline-flex;align-items:center;gap:8px;background:rgba(29,185,84,.12);border:1px solid rgba(29,185,84,.4);color:var(--green-ink);font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:8px 18px;border-radius:100px;margin-bottom:22px}
.dk .badge{color:var(--green);background:rgba(29,185,84,.1)}
.badge .dot{width:7px;height:7px;border-radius:50%;background:var(--green);animation:pulse 1.8s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}

/* hero de venda */
.hero{padding:clamp(50px,7vw,88px) 0 clamp(60px,8vw,104px)}
.hero-grid{display:grid;grid-template-columns:1.08fr .92fr;gap:clamp(34px,5vw,66px);align-items:center}
.hero h1{margin-bottom:22px}
.hero p.sub{font-size:clamp(18px,2.1vw,21px);color:var(--ink-2);margin-bottom:30px;max-width:40ch}
.dk .hero p.sub{color:var(--txt-2)}

/* preço */
.price{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin:6px 0 26px}
.price .parc{font-family:'Fraunces',serif;font-weight:900;font-size:clamp(30px,4vw,44px);letter-spacing:-.02em}
.price .parc b{color:var(--green-ink)}
.dk .price .parc b{color:var(--green)}
.price .avista{font-size:15px;color:var(--ink-2)}
.dk .price .avista{color:var(--txt-2)}
.price.sm .parc{font-size:clamp(24px,3vw,32px)}

/* slot de vídeo (placeholder até o Leo gravar) */
.video{aspect-ratio:16/9;border-radius:var(--r);background:linear-gradient(135deg,#1E1E1E,#101010);border:1px solid var(--line-dk);display:grid;place-items:center;position:relative;overflow:hidden;box-shadow:var(--shadow)}
.video::after{content:attr(data-label);position:absolute;bottom:14px;left:16px;font-size:11.5px;color:#8A8A85}
.play{width:76px;height:76px;border-radius:50%;background:var(--green);display:grid;place-items:center;box-shadow:0 14px 34px -12px rgba(29,185,84,.8);transition:transform .2s}
.video:hover .play{transform:scale(1.06)}

/* grids de 2 colunas */
.g2{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(32px,5vw,58px);align-items:center}
.g2.rev{grid-template-columns:.95fr 1.05fr}

/* checklist de entregáveis */
.chk{list-style:none;margin:22px 0 0}
.chk li{position:relative;padding:9px 0 9px 38px;font-size:16px;border-bottom:1px dashed var(--line)}
.chk li:last-child{border-bottom:0}
.chk li::before{content:"";position:absolute;left:0;top:12px;width:22px;height:22px;border-radius:50%;background:var(--green);
  -webkit-mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="black" d="M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm-1.2 14.5-4-4 1.4-1.4 2.6 2.6 5.6-5.6 1.4 1.4-7 7z"/></svg>') center/contain no-repeat;
  mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="black" d="M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm-1.2 14.5-4-4 1.4-1.4 2.6 2.6 5.6-5.6 1.4 1.4-7 7z"/></svg>') center/contain no-repeat}
.dk .chk li{border-color:var(--line-dk)}

/* card de oferta */
.offer{background:var(--card-dk);border:1px solid var(--line-dk);border-radius:var(--r);box-shadow:var(--shadow-dk);padding:clamp(30px,4vw,46px);position:relative;overflow:hidden}
.offer::before{content:"";position:absolute;inset:0;background:radial-gradient(120% 90% at 100% 0%,rgba(29,185,84,.12),transparent 55%);pointer-events:none}
.offer .lab{font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--green);font-weight:600}
.offer h3{font-size:clamp(24px,3vw,32px);margin:8px 0 6px}
.offer .chk li{color:#DDD;border-color:var(--line-dk);font-size:15.5px;padding:8px 0 8px 38px}
.offer .price{margin-top:26px}
.offer .price .parc b{color:var(--green)}
.offer .btn{margin-top:8px}

/* stats strip (números do curso) */
.stats{display:flex;gap:clamp(24px,4vw,52px);flex-wrap:wrap;margin-top:30px;padding-top:26px;border-top:1px solid var(--line)}
.dk .stats{border-color:var(--line-dk)}
.stats .f .fn{font-family:'Fraunces',serif;font-size:clamp(24px,3vw,32px);font-weight:600;color:var(--green-ink)}
.dk .stats .f .fn{color:var(--green)}
.stats .f .fl{font-size:13.5px;color:var(--ink-2);margin-top:3px;max-width:170px}
.dk .stats .f .fl{color:var(--txt-2)}

/* módulos / accordion-cards */
.mods{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:38px}
.mod{background:var(--card-dk);border:1px solid var(--line-dk);border-radius:14px;padding:24px 24px 20px}
.mod .n{font-family:'Fraunces',serif;font-size:13px;font-weight:600;color:var(--green);letter-spacing:.08em;text-transform:uppercase}
.mod h4{font-family:'Fraunces',serif;font-size:19px;font-weight:600;margin:8px 0 8px}
.mod p{font-size:14.5px;color:var(--txt-2)}

/* duo comparativo (Guia × Curso, Mapa × Curso...) */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:36px}
.duo .d{border:1px solid var(--line);border-radius:var(--r);padding:30px 28px;background:var(--white-2)}
.duo .d.hi{background:var(--black);color:var(--txt);border-color:var(--black)}
.duo .d .t{font-family:'Fraunces',serif;font-size:21px;font-weight:600;margin-bottom:10px}
.duo .d.hi .t i{color:var(--green);font-style:italic}
.duo .d p{font-size:15.5px;color:var(--ink-2)}
.duo .d.hi p{color:var(--txt-2)}

/* steps (escuro) */
.steps-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-bottom:44px}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid var(--line-dk)}
.steps.s4{grid-template-columns:repeat(4,1fr)}
.step{padding:46px 32px 32px 0;border-right:1px solid var(--line-dk)}
.step:last-child{border-right:0;padding-right:0}
.step .n{font-family:'Fraunces',serif;font-size:15px;font-weight:600;color:var(--green);letter-spacing:.05em}
.step h3{margin:14px 0 10px}
.step p{color:var(--txt-2);font-size:15.5px}

/* lista editorial (temas do curso) */
.topics{columns:2;column-gap:44px;margin-top:30px;list-style:none}
.topics li{break-inside:avoid;padding:10px 0 10px 30px;position:relative;font-size:16px;border-bottom:1px dashed var(--line)}
.dk .topics li{border-color:var(--line-dk)}
.topics li::before{content:"→";position:absolute;left:0;color:var(--green-ink);font-weight:700}
.dk .topics li::before{color:var(--green)}

/* manifesto / frases centrais */
.manifesto{text-align:center}
.manifesto .display{font-size:clamp(28px,4.6vw,52px);font-weight:500;line-height:1.14;max-width:22ch;margin:0 auto 24px}
.manifesto p{margin:0 auto;color:var(--txt-2);font-size:clamp(17px,1.9vw,19px)}

/* faq */
.faq{max-width:820px;margin:0 auto}
.qa{border-bottom:1px solid var(--line)}
.qa summary{cursor:pointer;list-style:none;padding:24px 4px;display:flex;justify-content:space-between;gap:20px;align-items:center;font-family:'Fraunces',serif;font-size:20px;font-weight:600}
.qa summary::-webkit-details-marker{display:none}
.qa .pm{flex:none;width:27px;height:27px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;transition:.2s;color:var(--green-ink);font-size:19px}
.qa[open] .pm{background:var(--green);color:#0D0D0D;border-color:var(--green);transform:rotate(45deg)}
.qa .a{padding:0 4px 26px;color:var(--ink-2);font-size:16px}

/* final */
.final{text-align:center}
.final h2{max-width:18ch;margin:0 auto 20px}
.final p{margin:0 auto 34px;color:var(--txt-2)}

footer{background:var(--black-2);color:var(--txt-2);border-top:1px solid var(--line-dk);padding:44px 0}
.foot{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;align-items:center;font-size:13.5px}
.foot .fb{color:var(--txt);font-family:'Fraunces',serif;font-size:17px}

.rv{opacity:0;transform:translateY(20px);transition:opacity .7s ease,transform .7s ease}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}.btn,.play{transition:none}}

@media(max-width:920px){
  .hero-grid,.g2,.g2.rev{grid-template-columns:1fr}
  /* Vídeo do Leo = primeira coisa visível no mobile (pedido Jhonatan 08/08) */
  .hero{padding-top:18px}
  .hero-media{order:-1}
  .hero-media .video{box-shadow:0 16px 40px -22px rgba(13,13,13,.45)}
  .steps,.steps.s4{grid-template-columns:1fr;border-top:0}
  .step{border-right:0;border-top:1px solid var(--line-dk);padding:34px 0 28px}
  .mods,.duo{grid-template-columns:1fr}
  .topics{columns:1}
}
@media(max-width:560px){
  body{font-size:16px}
  .btn{width:100%;justify-content:center}
  .nav{gap:12px}
  .brand{font-size:15px;white-space:nowrap;min-width:0;overflow:hidden;text-overflow:ellipsis}
  .nav a.cta{padding:10px 16px;font-size:13.5px;white-space:nowrap;flex:none}
  .stats{gap:22px}
}