/* ═══════════════════════════════════════════════════════
   CONECTPAY — Landing CURTA + Conversao 100%
   ═══════════════════════════════════════════════════════ */

* { margin:0; padding:0; box-sizing:border-box; }

:root {
  /* Verde EXATO do simbolo da logo nova (#2e8a4e — verde vibrante) */
  --g1:#2e8a4e;
  --g2:#3aa65e;
  --g3:#16a34a;
  --gp:#e8f5ee;
  --gd:#1f6638;
  --y:#fbbf24;
  --y2:#f59e0b;
  --txt:#1a1a1a;
  --txt2:#5b6573;
  --s50:#f8fafc;
  --s100:#f1f5f9;
  --s200:#e5e9ef;
  --s300:#cbd5e1;
  --s400:#94a3b8;
  --rs:8px;
  --rb:14px;
  --r:12px;
  --sh:0 1px 3px rgba(0,0,0,.08);
  --shm:0 4px 14px rgba(0,0,0,.08);
  --shb:0 12px 28px rgba(0,0,0,.12);
  --header-h:72px;
}

html { background:#fff; scroll-behavior:smooth; }
body.lp-body {
  font-family:'Inter',-apple-system,system-ui,sans-serif;
  color:var(--txt);
  background:#fff;
  line-height:1.45;
  -webkit-font-smoothing:antialiased;
  /* Compensa header fixed pra anchors nao caírem embaixo */
  scroll-padding-top:calc(var(--header-h) + 12px);
}
a { color:inherit; text-decoration:none; }
img { max-width:100%; display:block; }

/* ═══════════════════════════════════════════════════════
   ICONES SVG
   ═══════════════════════════════════════════════════════ */
.lp-icon {
  display:inline-block;
  width:18px;
  height:18px;
  vertical-align:middle;
  flex-shrink:0;
  color:inherit;
}
.lp-icon-sm { width:15px; height:15px; }
.lp-feat-check { color:var(--g1); }

/* ═══════════════════════════════════════════════════════
   CONTAINER
   ═══════════════════════════════════════════════════════ */
.lp-container {
  max-width:1100px;
  margin:0 auto;
  padding:0 20px;
}

/* ═══════════════════════════════════════════════════════
   HEADER FIXO BRANCO (nao muda no scroll)
   ═══════════════════════════════════════════════════════ */
.lp-header {
  position:fixed;
  top:0; left:0; right:0;
  z-index:100;
  background:#fff;
  border-bottom:1px solid var(--s200);
  height:var(--header-h);
  display:flex;
  align-items:center;
}
.lp-header-inner {
  width:100%;
  max-width:1100px;
  margin:0 auto;
  padding:0 20px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.lp-logo {
  display:flex;
  align-items:center;
  flex-shrink:0;
}
.lp-logo-img {
  height:54px;
  width:auto;
  display:block;
}

/* ═══════════════════════════════════════════════════════
   CTA HEADER — Botao Teste gratis MAIOR e DESTACADO
   ═══════════════════════════════════════════════════════ */
.lp-cta-header {
  display:inline-flex;
  align-items:center;
  gap:8px;
  background:var(--g1);
  color:#fff;
  padding:13px 22px;
  border-radius:var(--rs);
  font-weight:800;
  font-size:15px;
  border:none;
  cursor:pointer;
  white-space:nowrap;
  box-shadow:0 4px 14px rgba(46,138,78,.35);
  transition:all .2s;
  animation:cta-pulse 2.5s ease-in-out infinite;
}
.lp-cta-header:hover {
  background:var(--g2);
  transform:translateY(-2px);
  box-shadow:0 8px 22px rgba(46,138,78,.5);
}
@keyframes cta-pulse {
  0%,100% { box-shadow:0 4px 14px rgba(46,138,78,.35); }
  50% { box-shadow:0 6px 22px rgba(46,138,78,.55); }
}

/* ═══════════════════════════════════════════════════════
   CTA PRIMARY (botao verde grande)
   ═══════════════════════════════════════════════════════ */
.lp-cta-primary {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  background:var(--g1);
  color:#fff;
  padding:18px 36px;
  border-radius:10px;
  font-weight:800;
  font-size:17px;
  border:none;
  cursor:pointer;
  box-shadow:0 6px 20px rgba(46,138,78,.4);
  transition:all .2s;
  white-space:nowrap;
}
.lp-cta-primary:hover {
  background:var(--g2);
  transform:translateY(-2px);
  box-shadow:0 10px 28px rgba(46,138,78,.55);
}
.lp-cta-large {
  padding:20px 44px;
  font-size:18px;
}
.lp-cta-block { width:100%; }

/* CTA secundario (Starter "Comecar gratis") */
.lp-cta-secondary {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  background:#fff;
  color:var(--g1);
  padding:14px 28px;
  border-radius:10px;
  font-weight:700;
  font-size:15px;
  border:2px solid var(--g1);
  cursor:pointer;
  transition:all .2s;
  white-space:nowrap;
  width:100%;
}
.lp-cta-secondary:hover {
  background:var(--gp);
}

/* WhatsApp = BOTAO secundario (destacado mas menor que CTA principal).
   Verde-WhatsApp (#25D366) pra ser reconhecivel. Padding e fonte
   menores que o Teste Gratis pra manter hierarquia. */
.lp-link-wpp {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  background:#25D366;
  color:#fff;
  padding:14px 24px;
  border-radius:10px;
  font-weight:700;
  font-size:14px;
  border:none;
  cursor:pointer;
  white-space:nowrap;
  box-shadow:0 4px 12px rgba(37,211,102,.3);
  transition:all .2s;
}
.lp-link-wpp:hover {
  background:#1ebe5b;
  transform:translateY(-2px);
  box-shadow:0 8px 20px rgba(37,211,102,.45);
}
/* Versao light pra usar sobre fundo verde escuro (CTA final) */
.lp-link-wpp-light {
  background:rgba(255,255,255,.18);
  color:#fff;
  border:1.5px solid rgba(255,255,255,.4);
  box-shadow:none;
  backdrop-filter:blur(6px);
}
.lp-link-wpp-light:hover {
  background:rgba(255,255,255,.28);
  border-color:#fff;
}

/* ═══════════════════════════════════════════════════════
   HERO
   ═══════════════════════════════════════════════════════ */
.lp-hero {
  background:var(--g1);
  color:#fff;
  padding:calc(var(--header-h) + 30px) 0 50px;
  position:relative;
  overflow:hidden;
}
.lp-hero::before {
  content:'';
  position:absolute;
  top:-150px; right:-100px;
  width:450px; height:450px;
  background:radial-gradient(circle, rgba(58,166,94,.4), transparent 65%);
  border-radius:50%;
  z-index:0;
  pointer-events:none;
}
.lp-hero-grid {
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:36px;
  align-items:center;
  position:relative;
  z-index:1;
}
.lp-hero-text {
  display:flex;
  flex-direction:column;
  gap:16px;
}

.lp-badge {
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 13px;
  background:rgba(251,191,36,.18);
  border:1px solid rgba(251,191,36,.4);
  color:#fbbf24;
  border-radius:99px;
  font-size:12px;
  font-weight:700;
  align-self:flex-start;
}

.lp-hero-title {
  font-size:46px;
  font-weight:900;
  line-height:1.08;
  letter-spacing:-.02em;
}
.lp-hero-title-accent {
  color:#fbbf24;
}
.lp-hero-sub {
  font-size:17px;
  line-height:1.45;
  color:rgba(255,255,255,.92);
  max-width:520px;
}
.lp-hero-sub b { color:#fff; }

.lp-hero-cta {
  display:flex;
  align-items:center;
  gap:18px;
  margin-top:6px;
  flex-wrap:wrap;
}

.lp-hero-trust {
  display:flex;
  gap:18px;
  margin-top:6px;
  font-size:13px;
  color:rgba(255,255,255,.85);
  font-weight:500;
  flex-wrap:wrap;
}
.lp-hero-trust span {
  display:inline-flex;
  align-items:center;
  gap:5px;
}
.lp-hero-trust .lp-icon {
  color:#fbbf24;
}

/* ─── Mockup phone ─── */
.lp-hero-visual {
  display:flex;
  justify-content:center;
}
.lp-mock-phone {
  width:260px;
  background:#0a1f14;
  border-radius:28px;
  padding:12px 8px;
  box-shadow:0 18px 50px rgba(0,0,0,.35);
  border:1px solid rgba(255,255,255,.1);
}
.lp-mock-screen {
  background:#fff;
  border-radius:20px;
  padding:14px;
  display:flex;
  flex-direction:column;
  gap:7px;
}
.lp-mock-header {
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding-bottom:7px;
  border-bottom:1px solid var(--s100);
}
.lp-mock-logo {
  font-size:13px;
  font-weight:800;
  color:var(--g1);
}
.lp-mock-status {
  font-size:10px;
  color:var(--g3);
  font-weight:700;
  display:flex;
  align-items:center;
  gap:5px;
}
.lp-mock-dot {
  width:6px; height:6px;
  background:var(--g3);
  border-radius:50%;
}
.lp-mock-row {
  display:flex;
  align-items:center;
  gap:9px;
  padding:7px 5px;
  border-bottom:1px solid var(--s100);
  font-size:12px;
}
.lp-mock-icon-svg { color:var(--g1); }
.lp-mock-name { flex:1; color:var(--txt); font-weight:600; }
.lp-mock-val { color:var(--g1); font-weight:700; }
.lp-mock-stats {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:7px;
  margin-top:6px;
}
.lp-mock-stats > div {
  background:var(--gp);
  border-radius:var(--rs);
  padding:7px 9px;
  text-align:center;
}
.lp-mock-stats span {
  font-size:9px;
  color:var(--txt2);
  text-transform:uppercase;
  letter-spacing:.05em;
  display:block;
  font-weight:700;
}
.lp-mock-stats b {
  font-size:13px;
  font-weight:800;
  color:var(--g1);
}
.lp-mock-cta {
  background:#25D366;
  color:#fff;
  padding:7px;
  border-radius:var(--rs);
  font-size:11px;
  font-weight:700;
  text-align:center;
  margin-top:3px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:5px;
}

/* ═══════════════════════════════════════════════════════
   SECTIONS — Espacamentos COMPACTOS pra rolar rapido
   ═══════════════════════════════════════════════════════ */
.lp-section {
  padding:42px 0;
}
.lp-section-title {
  font-size:30px;
  font-weight:800;
  color:var(--txt);
  line-height:1.2;
  letter-spacing:-.02em;
  text-align:center;
  margin-bottom:8px;
}
.lp-section-title-sm { font-size:22px; }
.lp-section-sub {
  font-size:15px;
  color:var(--txt2);
  text-align:center;
  margin-bottom:28px;
}

/* ─── 2. COMO FUNCIONA ─── */
.lp-section-how { background:#fff; }
.lp-steps {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
  margin-top:24px;
}
.lp-step {
  background:#fff;
  border:1px solid var(--s200);
  border-radius:var(--rb);
  padding:22px 20px;
  display:flex;
  gap:14px;
  align-items:flex-start;
  transition:all .2s;
}
.lp-step:hover {
  transform:translateY(-3px);
  box-shadow:var(--shm);
  border-color:var(--g2);
}
.lp-step-num {
  width:42px;
  height:42px;
  background:var(--g1);
  color:#fff;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:19px;
  font-weight:900;
  flex-shrink:0;
  box-shadow:0 4px 12px rgba(46,138,78,.3);
}
.lp-step h3 {
  font-size:16px;
  font-weight:800;
  margin-bottom:4px;
  color:var(--txt);
}
.lp-step p {
  color:var(--txt2);
  font-size:13px;
  line-height:1.45;
}

/* ─── 3. PLANOS ─── */
.lp-section-plans {
  background:var(--s50);
}
.lp-plans {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:20px;
  max-width:840px;
  margin:0 auto;
}
.lp-plan {
  background:#fff;
  border:2px solid var(--s200);
  border-radius:var(--rb);
  padding:26px 22px;
  display:flex;
  flex-direction:column;
  gap:14px;
  transition:all .2s;
  position:relative;
}
.lp-plan:hover {
  transform:translateY(-4px);
  box-shadow:var(--shb);
}
.lp-plan-highlight {
  border-color:var(--g1);
  background:linear-gradient(180deg,#fff 0%, var(--gp) 100%);
  box-shadow:0 8px 24px rgba(46,138,78,.15);
}
.lp-plan-badge {
  position:absolute;
  top:-13px;
  left:50%;
  transform:translateX(-50%);
  background:linear-gradient(135deg, var(--y) 0%, var(--y2) 100%);
  color:#000;
  padding:5px 14px;
  border-radius:99px;
  font-size:11px;
  font-weight:900;
  letter-spacing:.04em;
  box-shadow:0 4px 12px rgba(245,158,11,.4);
  display:inline-flex;
  align-items:center;
  gap:5px;
  white-space:nowrap;
}
.lp-plan-tag {
  font-size:11px;
  font-weight:800;
  color:var(--txt2);
  letter-spacing:.1em;
}
.lp-plan-highlight .lp-plan-tag { color:var(--g1); }
.lp-plan-name {
  font-size:26px;
  font-weight:900;
  color:var(--txt);
}
.lp-plan-price {
  display:flex;
  align-items:baseline;
  gap:7px;
  flex-wrap:wrap;
}
.lp-plan-old {
  font-size:17px;
  color:var(--s400);
  text-decoration:line-through;
  font-weight:600;
}
.lp-plan-value {
  font-size:42px;
  font-weight:900;
  color:var(--g1);
  letter-spacing:-.02em;
}
.lp-plan-period {
  font-size:14px;
  color:var(--txt2);
  font-weight:600;
}
.lp-plan-features {
  list-style:none;
  display:flex;
  flex-direction:column;
  gap:8px;
  margin:6px 0;
  flex:1;
}
.lp-plan-features li {
  font-size:14px;
  color:var(--txt);
  line-height:1.4;
  display:flex;
  align-items:flex-start;
  gap:9px;
}
.lp-plan-features li b { color:var(--g1); }

.lp-plans-foot {
  text-align:center;
  margin-top:24px;
  display:flex;
  flex-direction:column;
  gap:6px;
  align-items:center;
}
.lp-plans-foot p {
  color:var(--txt2);
  font-size:13px;
  display:inline-flex;
  align-items:center;
  gap:6px;
  flex-wrap:wrap;
  justify-content:center;
}
.lp-plans-foot p .lp-icon { color:var(--g1); }

/* ─── 4. FAQ MICRO ─── */
.lp-section-faq {
  background:#fff;
  padding:40px 0;
}
.lp-faq-narrow { max-width:660px; }
.lp-faq-item {
  background:var(--s50);
  border-radius:var(--rs);
  margin-bottom:10px;
  border:1px solid var(--s200);
  transition:border-color .2s;
}
.lp-faq-item:hover { border-color:var(--g2); }
.lp-faq-item[open] { border-color:var(--g1); }
.lp-faq-item summary {
  cursor:pointer;
  padding:14px 18px;
  font-weight:700;
  color:var(--txt);
  font-size:14px;
  list-style:none;
  display:flex;
  justify-content:space-between;
  align-items:center;
}
.lp-faq-item summary::-webkit-details-marker { display:none; }
.lp-faq-item summary::after {
  content:'+';
  font-size:22px;
  color:var(--g1);
  font-weight:300;
  transition:transform .2s;
  line-height:1;
}
.lp-faq-item[open] summary::after { transform:rotate(45deg); }
.lp-faq-item p {
  padding:0 18px 14px;
  color:var(--txt2);
  font-size:13px;
  line-height:1.55;
}
.lp-faq-item p b { color:var(--txt); }

/* ─── 5. CTA FINAL ─── */
.lp-section-final {
  background:var(--g1);
  color:#fff;
  padding:50px 0;
  text-align:center;
  position:relative;
  overflow:hidden;
}
.lp-section-final::before {
  content:'';
  position:absolute;
  top:50%; left:50%;
  width:600px; height:600px;
  background:radial-gradient(circle, rgba(58,166,94,.3), transparent 65%);
  border-radius:50%;
  transform:translate(-50%,-50%);
  pointer-events:none;
}
.lp-final-container {
  max-width:680px;
  position:relative;
  z-index:1;
}
.lp-final-title {
  font-size:30px;
  font-weight:900;
  margin-bottom:10px;
  line-height:1.2;
}
.lp-final-sub {
  font-size:15px;
  color:rgba(255,255,255,.9);
  margin-bottom:24px;
}
.lp-final-cta {
  display:flex;
  gap:18px;
  justify-content:center;
  align-items:center;
  flex-wrap:wrap;
}

/* ═══════════════════════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════════════════════ */
.lp-footer-mini {
  background:#1a1a1a;
  color:rgba(255,255,255,.6);
  padding:18px 0;
  font-size:12px;
}
.lp-footer-mini-row {
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap:10px;
}
.lp-footer-mini-links {
  display:flex;
  gap:18px;
}
.lp-footer-mini-links a {
  color:rgba(255,255,255,.7);
  transition:color .15s;
}
.lp-footer-mini-links a:hover { color:#fff; }

/* ═══════════════════════════════════════════════════════
   MOBILE FIRST
   ═══════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .lp-hero-grid {
    grid-template-columns:1fr;
    gap:24px;
  }
  .lp-hero-text { text-align:center; align-items:center; }
  .lp-badge { align-self:center; }
  .lp-hero-sub { text-align:center; }
  .lp-hero-cta { justify-content:center; }
  .lp-hero-trust { justify-content:center; }
}

@media (max-width: 768px) {
  :root { --header-h:64px; }
  .lp-container { padding:0 16px; }
  .lp-header-inner { padding:0 16px; }

  /* Logo menor mobile */
  .lp-logo-img { height:44px; }

  /* Botao header menor mobile */
  .lp-cta-header {
    padding:10px 16px;
    font-size:13px;
  }
  .lp-cta-header .lp-icon { display:none; }

  /* HERO */
  .lp-hero { padding:calc(var(--header-h) + 24px) 0 36px; }
  .lp-hero-title { font-size:30px; line-height:1.12; }
  .lp-hero-sub { font-size:15px; }
  .lp-hero-cta {
    flex-direction:column;
    width:100%;
    gap:8px;
    margin-top:4px;
  }
  .lp-cta-primary {
    width:100%;
    padding:16px 24px;
    font-size:16px;
  }
  .lp-hero-trust { font-size:12px; gap:12px; }
  .lp-badge { font-size:11px; }

  .lp-mock-phone { width:230px; padding:10px 7px; }
  .lp-mock-screen { padding:11px; }
  .lp-mock-row { font-size:11px; padding:6px 4px; }

  /* Sections compactas */
  .lp-section { padding:30px 0; }
  .lp-section-title { font-size:22px; }
  .lp-section-title-sm { font-size:18px; }
  .lp-section-sub { font-size:14px; margin-bottom:20px; }

  /* Steps em coluna */
  .lp-steps { grid-template-columns:1fr; gap:10px; margin-top:18px; }
  .lp-step { padding:16px 14px; }
  .lp-step-num { width:38px; height:38px; font-size:17px; }
  .lp-step h3 { font-size:15px; }
  .lp-step p { font-size:13px; }

  /* Planos */
  .lp-plans { grid-template-columns:1fr; gap:14px; max-width:380px; }
  .lp-plan { padding:22px 18px; }
  .lp-plan-name { font-size:22px; }
  .lp-plan-value { font-size:36px; }
  .lp-plan-old { font-size:15px; }
  .lp-plan-features li { font-size:13px; }

  /* FAQ */
  .lp-faq-item summary { padding:13px 14px; font-size:14px; }
  .lp-faq-item p { padding:0 14px 13px; font-size:13px; }

  /* CTA Final */
  .lp-section-final { padding:34px 0; }
  .lp-final-title { font-size:22px; }
  .lp-final-sub { font-size:14px; margin-bottom:18px; }
  .lp-final-cta { flex-direction:column; gap:10px; }
  .lp-final-cta .lp-cta-primary { width:100%; }

  /* Footer mobile */
  .lp-footer-mini-row { flex-direction:column; text-align:center; gap:8px; }
}

@media (max-width: 380px) {
  .lp-hero-title { font-size:26px; }
  .lp-section-title { font-size:20px; }
  .lp-final-title { font-size:20px; }
  .lp-plan-value { font-size:32px; }
}