/* =========================================================
 * 1) Tokens & Reset
 * ======================================================= */
:root{
  --bg:#0b0d10; --panel:#111418; --panel-2:#0f1216; --text:#e9edf1; --muted:#9aa3ad; --line:#1b2128;
  --gold-1:#D4AF37; --gold-2:#B8860B; --gold-3:#F5D06D; --accent:#4da3ff; --ok:#25D366;
  --radius:18px; --shadow:0 10px 30px rgba(0,0,0,.35);
}
*{ box-sizing:border-box }
html,body{
  margin:0; padding:0; background:var(--bg); color:var(--text);
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Inter,sans-serif;
}
img{ max-width:100%; display:block }
.lp-container{ width:min(1120px,92%); margin:0 auto }

/* =========================================================
 * 2) Header & Buttons
 * ======================================================= */
.lp-header{
  position:sticky; top:0; z-index:5;
  background:linear-gradient(180deg,rgba(11,13,16,.9),rgba(11,13,16,.65));
  backdrop-filter:saturate(1.2) blur(8px);
  border-bottom:1px solid var(--line);
}
.lp-header .lp-container{ display:flex; align-items:center; justify-content:space-between; padding:12px 0 }
.brand{ display:flex; align-items:center; gap:.6rem }
.brand .logo{ width:32px; height:32px }
.brand-name{ font-weight:700; letter-spacing:.2px }

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  border:0; cursor:pointer; text-decoration:none; font-weight:800;
  border-radius:999px; padding:.9rem 1.1rem; transition:.2s transform,.2s box-shadow;
}
.btn:hover{ transform:translateY(-1px) }
.btn:active{ transform:translateY(0) }
.btn-sm{ padding:.55rem .9rem; font-size:.9rem }
.btn-lg{ padding:1rem 1.25rem; font-size:1.05rem }
.btn-xl{ padding:1.1rem 1.35rem; font-size:1.1rem }
.btn-gold{
  color:#111; background:linear-gradient(180deg,var(--gold-3),var(--gold-1) 40%,var(--gold-2));
  box-shadow:0 8px 20px rgba(212,175,55,.35);
}
.btn-gold:hover{ box-shadow:0 10px 26px rgba(212,175,55,.5) }
.btn[disabled]{ opacity:.6; pointer-events:none }

/* =========================================================
 * 3) Seções de Conteúdo
 * ======================================================= */
.main{ display:block }

.hero{ padding:20px 0 8px; border-bottom:1px solid var(--line) }
.hero .lp-container{ display:grid; gap:18px }
.hero-media .video-wrapper{
  position:relative; aspect-ratio:16/9; background:#000;
  border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow);
}
.hero-media iframe{ position:absolute; inset:0; width:100%; height:100%; border:0 }
.hero-cta h1{ font-size:clamp(1.35rem,4.5vw,2rem); margin:.25rem 0 .5rem; font-weight:900 }
.hero-cta p{ color:var(--muted); font-size:1rem }
.cta-row{ display:flex; align-items:center; gap:14px; margin:14px 0 }
.seal{ font-size:.85rem; color:var(--muted) }
.trust{
  display:flex; flex-wrap:wrap; gap:10px; padding:0; margin:10px 0 0;
  list-style:none; font-size:.8rem; color:#c7d0da;
}
@media (min-width:900px){
  .hero .lp-container{ grid-template-columns:1.4fr 1fr; align-items:center; gap:28px }
}

.benefits{ padding:24px 0 }
.grid{ display:grid; gap:12px }
.grid .card{
  background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
  padding:16px; box-shadow:var(--shadow);
}
.grid .card h3{ margin:.2rem 0 .3rem; font-size:1.05rem }
.grid .card p{ margin:0; color:var(--muted) }
@media (min-width:700px){ .grid{ grid-template-columns:repeat(2,1fr) } }
@media (min-width:1024px){ .grid{ grid-template-columns:repeat(4,1fr) } }

.social-proof{ padding:10px 0 }
.stars{ font-size:1.35rem; letter-spacing:.15rem; text-align:center }
.caption{ text-align:center; color:var(--muted); margin-top:4px }

.cta-full{ padding:26px 0 }
.cta-full h2{ text-align:center; margin:.5rem 0 1rem; font-size:clamp(1.3rem,4vw,1.8rem) }
.cta-full .btn{ display:block; margin:0 auto; max-width:420px }
.cta-full .small{ text-align:center; color:var(--muted); margin:.6rem 0 0 }

.faq{ padding:14px 0 40px }
.faq details{ background:var(--panel-2); border:1px solid var(--line); border-radius:12px; padding:12px 14px; margin:10px 0 }
.faq summary{ font-weight:700; cursor:pointer }
.faq p{ color:var(--muted); margin:.5rem 0 0 }

/* =========================================================
 * 4) Sticky CTA & WhatsApp
 * ======================================================= */
.sticky-cta{
  position:sticky; bottom:0; z-index:6;
  background:linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,.6)),#0b0d10;
  padding:10px 0; border-top:1px solid var(--line);
  transform:translateY(100%); transition:.25s transform;
}
.sticky-cta.show{ transform:translateY(0) }
.sticky-cta .lp-container{ display:flex; align-items:center; justify-content:space-between; gap:10px }
.sticky-cta span{ font-weight:700 }

.float-whatsapp{
  position:fixed; right:14px; bottom:14px; width:56px; height:56px;
  border-radius:50%; display:grid; place-items:center; background:#111;
  border:1px solid var(--line); box-shadow:0 10px 22px rgba(0,0,0,.4); z-index:7;
}
.float-whatsapp svg{ width:28px; height:28px }
.float-whatsapp:hover{ transform:translateY(-1px) }

/* =========================================================
 * 5) Modal de Checkout (scroll no cartão)
 * ======================================================= */
body.no-scroll{ overflow:hidden }                 /* trava o body quando abrir */

.checkout-modal{ position:fixed; inset:0; z-index:1000; display:none }
.checkout-modal.open{ display:block }

.checkout-modal .modal-backdrop{
  position:absolute; inset:0; background:rgba(0,0,0,.65);
}

.checkout-modal .modal-card{
  position:relative;
  width:min(720px,92vw);
  max-height:92vh;
  margin:4vh auto 0;
  padding:16px 16px 18px;
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:14px;
  box-shadow:var(--shadow);
  overflow:auto;                     /* ← rolagem fica aqui */
  overscroll-behavior:contain;       /* não “puxa” o body */
}
.modal-close{
  position:absolute; right:10px; top:8px;
  background:transparent; border:0; font-size:1.6rem; color:#cbd3dc; cursor:pointer;
}

/* =========================================================
 * 6) Formulário do Checkout
 * ======================================================= */
.checkout-form{
  display:flex; flex-direction:column; gap:12px;
  overflow:visible;                   /* não esconde filhos dinâmicos */
}
.checkout-form input[type=email]{
  width:100%; padding:12px 14px; border-radius:12px;
  border:1px solid var(--line); background:#0e1216; color:var(--text);
}

/* =========================================================
 * 7) Área do Bricks e auxiliares
 * ======================================================= */
.brick-area{
  display:block;                      /* nada de grid/center */
  min-height:320px;                   /* altura mínima */
  background:#0e1216;
  border:1px dashed #2a323b;
  border-radius:12px;
  padding:14px;
  overflow:visible;                   /* Bricks cresce livre */
}
.brick-placeholder{ color:#6c7886; font-size:.95rem }

.pay-feedback{
  margin-top:10px; padding:12px; border:1px solid var(--line);
  border-radius:12px; background:#0e1216; color:var(--muted);
}
.pay-feedback img{ max-width:220px; display:block; margin:10px auto }

.terms{ color:var(--muted); font-size:.85rem; text-align:center }
strong{ color:#fff }

/* =========================================================
 * 8) Estilos do bloco PIX dentro do modal
 * ======================================================= */
/* Links */
#checkout .pix-area a,
#checkout .pix-area a:visited{
  color:#e53935;                      /* vermelho */
  text-decoration-color:rgba(229,57,53,.5);
}
#checkout .pix-area a:hover,
#checkout .pix-area a:focus{
  color:#ff4d4d;
  text-decoration-color:currentColor;
}

/* Layout e botões */
#checkout .pix-area{ text-align:center }
#checkout .pix-actions{
  display:flex; justify-content:center; gap:12px; flex-wrap:wrap; margin-top:12px;
}
#checkout .lp-linkbtn{
  --lp-gold:#e6c04a; --lp-gold-2:#f5d56a;
  display:inline-flex; align-items:center; gap:8px; padding:8px 14px;
  border-radius:999px; font-weight:600; font-size:14px; line-height:1;
  text-decoration:none; transition:all .15s ease; outline:none;
}
#checkout .lp-linkbtn--gold{
  border:1px solid var(--lp-gold); color:var(--lp-gold); background:transparent;
}
#checkout .lp-linkbtn--gold:hover{
  color:var(--lp-gold-2); border-color:var(--lp-gold-2); background:rgba(230,192,74,.06);
}
#checkout .lp-linkbtn--subtle{
  border:1px solid rgba(255,255,255,.18); color:#d1d5db; background:rgba(255,255,255,.04);
}
#checkout .lp-linkbtn--subtle:hover{
  color:#fff; border-color:rgba(255,255,255,.35); background:rgba(255,255,255,.07);
}
#checkout .lp-linkbtn:focus-visible{ box-shadow:0 0 0 3px rgba(230,192,74,.35) }
#checkout .lp-linkbtn .icon{
  width:16px; height:16px; display:inline-block; vertical-align:-2px; fill:currentColor;
}

/* ============================
 * Slabs: blocos destaque
 * ============================ */
.lp-slab{ padding:28px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.lp-slab .slab-box{
  background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
  padding:18px; box-shadow:var(--shadow);
}
.slab-grid{ display:grid; gap:18px }
.slab-title{ margin:.25rem 0 .5rem; font-size:clamp(1.35rem,4.2vw,2rem); font-weight:900 }
.slab-desc{ color:var(--muted); margin:0 0 .75rem }
.slab-cta{ margin-top:1rem }

.ticks{ list-style:none; padding:0; margin:.25rem 0 0 }
.ticks li{
  position:relative; padding-left:28px; margin:10px 0; color:#cdd6df; line-height:1.35;
}
.ticks li::before{
  content:"✓"; position:absolute; left:0; top:0; transform:translateY(2px);
  font-weight:900; font-size:1.05rem; color:var(--gold-3);
  text-shadow:0 0 0 rgba(0,0,0,0.2);
}

/* Imagem à direita no desktop */
.slab-media img{
  width:100%; max-width:520px; border-radius:14px; border:1px solid var(--line); box-shadow:var(--shadow);
  background:#000;
}

/* Responsivo */
@media (min-width:900px){
  .slab-grid{ grid-template-columns:1.15fr .85fr; align-items:center; gap:28px }
  .lp-slab--plataforma .slab-grid{ grid-template-columns:1.1fr .9fr }
}

/* Espaçamentos com seções vizinhas */
.lp-slab + .lp-slab{ margin-top:-1px } /* junta bordas sem “buraco” */

/* apartir daqui codigo novo, se nao funcionar delete*/

/* ===== Showcase base ===== */
.lp-showcase{ position:relative; padding:56px 0; border-top:1px solid var(--line); }
.lp-sc-head h2{ font-size:clamp(1.35rem,4.6vw,2.1rem); margin:.1rem 0 .35rem; font-weight:900; }
.lp-sc-head p{ color:var(--muted); margin:0 0 1.1rem; }
.lp-sc-foot{ text-align:center; margin-top:18px; }
.lp-sc-foot .muted{ display:block; margin-top:8px; color:var(--muted); }

/* fundo com vinheta + glow dourado */
.lp-showcase--devices-pdf{
  background:
    radial-gradient(640px 280px at 50% 46%, rgba(245,208,109,.28), transparent 70%),
    linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(17,20,24,.12) 100%);
}

/* palco comum aos dispositivos */
.devices-stage{ position:relative; min-height:380px; margin:24px auto 10px; }
.devices-stage--pdf{ min-height:420px; }

/* ===== Notebook ===== */
.laptop{ position:relative; width:min(720px, 92%); margin:0 auto; }
.laptop-screen{
  position:relative; background:#121418; border:1px solid #0a0c0f;
  border-radius:18px; padding:24px; box-shadow:0 30px 60px rgba(0,0,0,.45);
}
.laptop-screen img{
  width:100%; aspect-ratio:16/9; object-fit:cover; border-radius:12px; display:block;
}
.laptop-screen .glare{
  position:absolute; inset:24px;
  background:linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,0) 40%);
  filter:blur(6px); border-radius:12px; mix-blend-mode:screen; pointer-events:none;
}
.laptop-base{
  content:""; position:absolute; left:50%; transform:translateX(-50%);
  bottom:-16px; width:110%; height:40px; background:#0f1216; border:1px solid #0a0c0f;
  border-radius:14px; box-shadow:0 18px 40px rgba(0,0,0,.5);
}

/* ===== Tablet ===== */
.tablet{
  position:absolute; right:2.5%; top:-22px; width:min(420px,40vw);
  margin:0; background:#0f1216; border:1px solid #0a0c0f; border-radius:20px;
  padding:18px; transform:rotate(-6deg); box-shadow:0 28px 56px rgba(0,0,0,.5);
}
.tablet img{ width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:12px; display:block; }

/* ===== PDF Page (A4) ===== */
.pdf-page{
  position:absolute; left:1.5%; top:10px; margin:0;
  width:min(360px, 38vw);
  transform:rotate(5deg);
  filter:drop-shadow(0 26px 54px rgba(0,0,0,.55));
}
.pdf-ribbon{
  position:absolute; left:14px; top:-10px;
  background:linear-gradient(180deg, var(--gold-3), var(--gold-1) 40%, var(--gold-2));
  color:#111; font-weight:900; font-size:.75rem;
  padding:.3rem .55rem; border-radius:8px; letter-spacing:.4px;
  box-shadow:0 8px 18px rgba(212,175,55,.35);
}
.paper{
  background:#fff; border:1px solid rgba(0,0,0,.08);
  border-radius:12px; padding:14px; position:relative;
  /* A4 210x297 */
  aspect-ratio: 210 / 297; overflow:hidden;
}
.paper::before{ /* textura/papel sutil */
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(0,0,0,.02), rgba(0,0,0,0)),
    repeating-linear-gradient(0deg, rgba(0,0,0,.012), rgba(0,0,0,.012) 1px, transparent 1px, transparent 9px);
  pointer-events:none;
}
.paper img{
  width:100%; height:100%; object-fit:cover; border-radius:8px; display:block;
}
.paper-shade{
  position:absolute; inset:0; pointer-events:none; border-radius:12px;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.05), inset 0 40px 60px rgba(0,0,0,.06);
}

/* ===== Responsivo ===== */
@media (max-width: 1024px){
  .pdf-page{ left:-2%; width: 34vw; }
  .tablet{ right: -1%; top: -12px; width: 42vw; }
}
@media (max-width: 860px){
  .pdf-page{ left: 0; top: -4px; transform:rotate(2deg); width: 46vw; }
  .tablet{ display:none; }              /* foca notebook + pdf no mobile médio */
}
@media (max-width: 560px){
  .pdf-page{ position:relative; width:86%; margin:12px auto 0; transform:none; }
  .laptop{ width:96%; }
}