/*
  landing.css — styles for the standalone Landing Page (/apresentacao).
  Self-contained: shares the platform palette but never depends on styles.css, so the
  stores SPA is completely unaffected. Premium look: soft gradients, rounded cards
  (16–24px), gentle shadows and discrete reveal animations.
*/

:root{
  --lp-bg:#f6f6f5;
  --lp-card:#ffffff;
  --lp-text:#1d2533;
  --lp-muted:#5b6573;
  --lp-accent:#2a8bf7;
  --lp-accent-dark:#1769d6;
  --lp-accent-soft:rgba(42,139,247,0.10);
  --lp-radius:20px;
  --lp-radius-sm:16px;
  --lp-shadow:0 12px 34px rgba(20,32,54,0.08);
  --lp-shadow-sm:0 6px 18px rgba(20,32,54,0.06);
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  background:var(--lp-bg);
  color:var(--lp-text);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.55;
}

.lp-loading{
  min-height:60vh;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--lp-muted);
  font-size:16px;
  padding:40px;
}

/* ---- Buttons ---- */
.lp-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:14px 24px;
  border-radius:14px;
  font-size:16px;
  font-weight:700;
  text-decoration:none;
  cursor:pointer;
  border:1px solid transparent;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease;
  white-space:nowrap;
}
.lp-btn-sm{ padding:10px 18px; font-size:14px; border-radius:12px; }
.lp-btn-primary{
  background:linear-gradient(135deg, var(--lp-accent), var(--lp-accent-dark));
  color:#fff;
  box-shadow:0 10px 24px rgba(42,139,247,0.28);
}
.lp-btn-primary:hover{ transform:translateY(-2px); box-shadow:0 16px 30px rgba(42,139,247,0.36); }
.lp-btn-ghost{
  background:var(--lp-card);
  color:var(--lp-accent-dark);
  border-color:rgba(42,139,247,0.30);
  box-shadow:var(--lp-shadow-sm);
}
.lp-btn-ghost:hover{ transform:translateY(-2px); background:var(--lp-accent-soft); }
.lp-btn:active{ transform:translateY(0); }

/* ---- Top bar ---- */
.lp-topbar{
  position:sticky;
  top:0;
  z-index:50;
  background:rgba(246,246,245,0.82);
  backdrop-filter:saturate(160%) blur(10px);
  border-bottom:1px solid rgba(20,32,54,0.06);
}
.lp-topbar-inner{
  max-width:1120px;
  margin:0 auto;
  padding:14px 20px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.lp-brand{ font-weight:800; font-size:18px; letter-spacing:-0.2px; display:inline-flex; align-items:center; gap:10px; }
/* Circular logo to the left of the brand name; height tracks the header text line,
   width matches it so the image is always a perfect circle, cropped to fill (cover). */
.lp-brand-logo{
  width:1.9em; height:1.9em;
  flex:none;
  border-radius:50%;
  object-fit:cover;
  display:block;
}

/* ---- Sections ---- */
.lp-section{
  max-width:1120px;
  margin:0 auto;
  padding:64px 20px;
}
.lp-section-tint{
  max-width:none;
  background:
    radial-gradient(900px 380px at 50% -10%, var(--lp-accent-soft), transparent 70%),
    var(--lp-bg);
}
.lp-section-tint > *{ max-width:1120px; margin-left:auto; margin-right:auto; }
.lp-section-title{
  font-size:clamp(24px, 3.4vw, 34px);
  font-weight:800;
  letter-spacing:-0.4px;
  text-align:center;
  margin:0 0 36px;
}
.lp-section-note{
  text-align:center;
  color:var(--lp-muted);
  font-size:16px;
  max-width:680px;
  margin:28px auto 0;
}

/* ---- Hero ---- */
.lp-hero{
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(1100px 540px at 12% -5%, rgba(42,139,247,0.18), transparent 60%),
    radial-gradient(900px 520px at 100% 0%, rgba(42,139,247,0.12), transparent 55%),
    linear-gradient(180deg, #ffffff 0%, var(--lp-bg) 100%);
}
.lp-hero-inner{
  max-width:1120px;
  margin:0 auto;
  padding:72px 20px 80px;
  display:grid;
  grid-template-columns:1.05fr 0.95fr;
  gap:48px;
  align-items:center;
}
.lp-hero-title{
  font-size:clamp(32px, 5vw, 52px);
  line-height:1.08;
  font-weight:800;
  letter-spacing:-1px;
  margin:0 0 18px;
}
.lp-hero-subtitle{
  font-size:clamp(16px, 2vw, 19px);
  color:var(--lp-muted);
  margin:0 0 30px;
  max-width:540px;
}
.lp-hero-actions{ display:flex; gap:14px; flex-wrap:wrap; }

/* Browser frame around the hero media */
.lp-hero-media{ perspective:1200px; }
.lp-browser{
  background:var(--lp-card);
  border-radius:var(--lp-radius);
  box-shadow:var(--lp-shadow);
  overflow:hidden;
  border:1px solid rgba(20,32,54,0.06);
  transition:transform .35s ease, box-shadow .35s ease;
}
.lp-hero-media:hover .lp-browser{ transform:translateY(-4px); box-shadow:0 22px 48px rgba(20,32,54,0.14); }
.lp-browser-bar{
  display:flex;
  align-items:center;
  gap:7px;
  padding:12px 16px;
  background:linear-gradient(180deg, #fafbfc, #f1f3f6);
  border-bottom:1px solid rgba(20,32,54,0.06);
}
.lp-dot{ width:11px; height:11px; border-radius:50%; background:#d6dbe2; }
.lp-dot:nth-child(1){ background:#ff5f57; }
.lp-dot:nth-child(2){ background:#febc2e; }
.lp-dot:nth-child(3){ background:#28c840; }
.lp-browser-body{ background:#fff; }
.lp-hero-img{ display:block; width:100%; height:auto; }

/* Built-in storefront preview (shown when no screenshot uploaded) */
.lp-mock{ padding:0 0 16px; }
.lp-mock-cover{
  height:96px;
  background:linear-gradient(120deg, var(--lp-accent), var(--lp-accent-dark));
}
.lp-mock-head{
  display:flex;
  align-items:center;
  gap:12px;
  padding:0 18px;
  margin-top:-26px;
}
.lp-mock-logo{
  width:54px; height:54px; border-radius:16px;
  background:#fff; border:3px solid #fff;
  box-shadow:var(--lp-shadow-sm);
  background-image:linear-gradient(135deg, #e8eef7, #cdddf3);
}
.lp-mock-meta{ flex:1; padding-top:20px; }
.lp-mock-name{ font-weight:700; font-size:15px; }
.lp-mock-sub{ height:8px; width:120px; border-radius:6px; background:#e9edf2; margin-top:6px; }
.lp-mock-cart{ padding-top:18px; color:var(--lp-muted); }
.lp-mock-cart .lp-ico{ width:22px; height:22px; }
.lp-mock-grid{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:12px;
  padding:18px;
}
.lp-mock-card{
  background:#fff;
  border:1px solid rgba(20,32,54,0.06);
  border-radius:14px;
  padding:10px;
  box-shadow:var(--lp-shadow-sm);
}
.lp-mock-thumb{ height:74px; border-radius:10px; background:linear-gradient(135deg,#eef3fa,#dde8f6); }
.lp-mock-line{ height:9px; border-radius:6px; background:#e9edf2; margin-top:10px; }
.lp-mock-line.short{ width:60%; }
.lp-mock-price{ height:12px; width:42%; border-radius:6px; background:var(--lp-accent-soft); margin-top:10px; }

/* ---- Phone mockup (hero demo) ---- */
.lp-phone{
  position:relative;
  width:min(300px, 80%);
  margin:0 auto;
  aspect-ratio:300 / 620;
  padding:14px;
  border-radius:44px;
  background:linear-gradient(155deg, #161d2e, #0c111c);
  box-shadow:0 30px 64px rgba(20,32,54,0.30), inset 0 0 0 2px rgba(255,255,255,0.06);
  transition:transform .35s ease, box-shadow .35s ease;
}
.lp-hero-media:hover .lp-phone{ transform:translateY(-6px); box-shadow:0 40px 80px rgba(20,32,54,0.36); }
.lp-phone-notch{
  position:absolute; top:14px; left:50%; transform:translateX(-50%);
  width:120px; height:22px; z-index:3;
  background:#0c111c; border-radius:0 0 16px 16px;
}
.lp-phone-screen{
  position:relative; width:100%; height:100%;
  border-radius:30px; overflow:hidden; background:#fff;
}
/* Built-in storefront preview, when used as the phone screen, fills from the top. */
.lp-phone-screen .lp-mock{ padding-bottom:0; height:100%; }

/* ---- Demo gallery carousel ---- */
.lp-gallery{ position:relative; width:100%; height:100%; }
.lp-gallery-track{
  display:flex; height:100%;
  transition:transform .6s cubic-bezier(.4, 0, .2, 1);
  will-change:transform;
}
.lp-gallery-slide{ flex:0 0 100%; width:100%; height:100%; }
.lp-gallery-slide img{ display:block; width:100%; height:100%; object-fit:cover; }

.lp-gallery-arrow{
  position:absolute; top:50%; transform:translateY(-50%);
  width:34px; height:34px; z-index:2;
  display:flex; align-items:center; justify-content:center;
  border:none; border-radius:50%; cursor:pointer;
  background:rgba(15,20,34,0.42); color:#fff;
  -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
  opacity:0; transition:opacity .25s ease, background .2s ease;
}
.lp-gallery:hover .lp-gallery-arrow,
.lp-gallery-arrow:focus-visible{ opacity:1; }
.lp-gallery-arrow:hover{ background:rgba(15,20,34,0.64); }
.lp-gallery-arrow svg{ width:18px; height:18px; }
.lp-gallery-prev{ left:8px; }
.lp-gallery-next{ right:8px; }
@media (hover: none){ .lp-gallery-arrow{ opacity:.82; } }

.lp-gallery-dots{
  position:absolute; left:0; right:0; bottom:12px; z-index:2;
  display:flex; justify-content:center; gap:7px;
}
.lp-gallery-dot{
  width:7px; height:7px; padding:0; border:none; cursor:pointer;
  border-radius:50%;
  background:rgba(255,255,255,0.55);
  box-shadow:0 1px 3px rgba(0,0,0,0.35);
  transition:width .25s ease, background .2s ease;
}
.lp-gallery-dot.is-active{ width:18px; border-radius:4px; background:#fff; }

/* ---- Segments grid ---- */
.lp-seg-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(150px, 1fr));
  gap:16px;
}
.lp-seg-card{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:12px;
  text-align:center;
  padding:26px 14px;
  background:var(--lp-card);
  border:1px solid rgba(20,32,54,0.05);
  border-radius:var(--lp-radius-sm);
  box-shadow:var(--lp-shadow-sm);
  transition:transform .25s ease, box-shadow .25s ease;
}
.lp-seg-card:hover{ transform:translateY(-6px) scale(1.03); box-shadow:var(--lp-shadow); }
.lp-seg-icon{
  width:58px; height:58px;
  display:flex; align-items:center; justify-content:center;
  border-radius:18px;
  color:var(--lp-accent-dark);
  background:linear-gradient(135deg, rgba(42,139,247,0.16), rgba(42,139,247,0.05));
  box-shadow:inset 0 0 0 1px rgba(42,139,247,0.12);
  transition:transform .25s ease;
}
.lp-seg-card:hover .lp-seg-icon{ transform:scale(1.06); }
.lp-seg-icon .lp-ico{ width:30px; height:30px; }
/* When a segment carries an uploaded image it fills the whole icon slot: a square
   with rounded corners, cropped to cover, replacing the gradient/glyph styling. */
.lp-seg-icon.has-img{
  background:none;
  box-shadow:none;
  overflow:hidden;
}
.lp-seg-img{
  width:100%; height:100%;
  object-fit:cover;
  border-radius:inherit;
  display:block;
}
.lp-seg-name{ font-weight:600; font-size:15px; }

/* Shared icon sizing helper (premium line glyphs inherit text colour). */
.lp-ico{ display:block; width:100%; height:100%; }

/* ---- Features grid ---- */
.lp-feature-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(230px, 1fr));
  gap:16px;
}
.lp-feature-card{
  display:flex;
  align-items:flex-start;
  gap:14px;
  padding:20px;
  background:var(--lp-card);
  border:1px solid rgba(20,32,54,0.05);
  border-radius:var(--lp-radius-sm);
  box-shadow:var(--lp-shadow-sm);
  transition:transform .25s ease, box-shadow .25s ease;
}
.lp-feature-card:hover{ transform:translateY(-5px) scale(1.02); box-shadow:var(--lp-shadow); }
.lp-feature-icon{
  flex:0 0 auto;
  width:46px; height:46px;
  display:flex; align-items:center; justify-content:center;
  border-radius:13px;
  color:var(--lp-accent-dark);
  background:var(--lp-accent-soft);
  transition:transform .25s ease;
}
.lp-feature-card:hover .lp-feature-icon{ transform:scale(1.08); }
.lp-feature-icon .lp-ico{ width:24px; height:24px; }
.lp-feature-body{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.lp-feature-text{ font-weight:600; font-size:15px; }
.lp-feature-desc{ font-size:13.5px; line-height:1.4; color:var(--lp-muted, #5b6577); }

/* ---- Timeline (Como Funciona) ---- */
.lp-timeline{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:20px;
  position:relative;
}
.lp-step{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:14px;
  background:var(--lp-card);
  border:1px solid rgba(20,32,54,0.05);
  border-radius:var(--lp-radius-sm);
  padding:26px 18px;
  box-shadow:var(--lp-shadow-sm);
}
.lp-step-num{
  width:48px; height:48px;
  display:flex; align-items:center; justify-content:center;
  font-size:20px; font-weight:800; color:#fff;
  border-radius:50%;
  background:linear-gradient(135deg, var(--lp-accent), var(--lp-accent-dark));
  box-shadow:0 8px 18px rgba(42,139,247,0.30);
}
.lp-step-text{ font-weight:600; font-size:15px; }

/* ---- Advantages ---- */
.lp-adv-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(260px, 1fr));
  gap:14px;
}
.lp-adv-item{
  display:flex;
  align-items:center;
  gap:12px;
  padding:16px 18px;
  background:var(--lp-card);
  border:1px solid rgba(20,32,54,0.05);
  border-radius:14px;
  box-shadow:var(--lp-shadow-sm);
  transition:transform .2s ease;
}
.lp-adv-item:hover{ transform:translateX(3px); }
.lp-adv-icon{
  flex:0 0 auto;
  width:26px; height:26px;
  display:flex; align-items:center; justify-content:center;
  color:var(--lp-accent-dark);
}
.lp-adv-icon .lp-ico{ width:22px; height:22px; }
.lp-adv-text{ font-weight:600; font-size:15px; }

/* ---- Final CTA (full width) ---- */
.lp-cta{
  background:linear-gradient(135deg, var(--lp-accent), var(--lp-accent-dark));
  color:#fff;
  text-align:center;
}
.lp-cta-inner{
  max-width:820px;
  margin:0 auto;
  padding:72px 20px;
}
.lp-cta-title{ font-size:clamp(26px, 4vw, 40px); font-weight:800; margin:0 0 16px; letter-spacing:-0.5px; }
.lp-cta-text{ font-size:clamp(16px, 2vw, 19px); opacity:.95; margin:0 0 30px; }
.lp-btn-cta{
  background:#fff;
  color:var(--lp-accent-dark);
  font-size:18px;
  padding:18px 34px;
  box-shadow:0 14px 30px rgba(0,0,0,0.18);
}
.lp-btn-cta:hover{ transform:translateY(-3px); box-shadow:0 20px 40px rgba(0,0,0,0.24); }

/* ---- Footer ---- */
.lp-footer{
  text-align:center;
  padding:32px 20px;
  color:var(--lp-muted);
  font-size:14px;
  background:var(--lp-bg);
}

/* ---- Plans ("Escolha seu plano") ---- */
.lp-plan-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
  gap:20px;
  max-width:920px;
  margin:0 auto;
}
.lp-plan-card{
  display:flex;
  flex-direction:column;
  gap:16px;
  padding:28px 24px;
  background:var(--lp-card);
  border:1px solid rgba(20,32,54,0.06);
  border-radius:var(--lp-radius);
  box-shadow:var(--lp-shadow-sm);
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.lp-plan-card:hover{
  transform:translateY(-6px);
  box-shadow:var(--lp-shadow);
  border-color:rgba(42,139,247,0.30);
}
.lp-plan-head{ display:flex; flex-direction:column; gap:8px; }
.lp-plan-name{ font-size:20px; font-weight:800; margin:0; letter-spacing:-0.3px; }
.lp-plan-price{ display:flex; align-items:baseline; gap:6px; flex-wrap:wrap; }
.lp-plan-value{ font-size:30px; font-weight:800; color:var(--lp-accent-dark); letter-spacing:-0.6px; }
.lp-plan-period{ font-size:15px; color:var(--lp-muted); font-weight:600; }
.lp-plan-desc{ margin:0; color:var(--lp-muted); font-size:15px; white-space:pre-line; flex:1; }
/* Vertical benefits list inside a plan card — one line per benefit, each led by a
   check glyph. flex:1 keeps the "Contratar" button pinned to the card's bottom edge
   even when plans list different numbers of benefits. */
.lp-plan-benefits{
  list-style:none;
  margin:0;
  padding:0;
  flex:1;
  display:flex;
  flex-direction:column;
  gap:12px;
}
.lp-plan-benefit{
  display:flex;
  align-items:flex-start;
  gap:10px;
  color:var(--lp-text);
  font-size:15px;
  line-height:1.45;
}
.lp-plan-benefit-ico{
  flex:0 0 auto;
  width:20px;
  height:20px;
  margin-top:1px;
  color:var(--lp-accent);
}
/* "X dias grátis" badge shown on a plan card that offers a free trial. */
.lp-plan-trial{
  align-self:flex-start;
  display:inline-flex; align-items:center; gap:6px;
  padding:4px 12px;
  border-radius:999px;
  background:linear-gradient(135deg,#1abc9c,#16a085);
  color:#fff; font-weight:800; font-size:13px;
  letter-spacing:0.2px;
}
.lp-plan-cta{ margin-top:auto; }
.lp-plan-resume{
  text-align:center;
  margin:32px auto 0;
  color:var(--lp-muted);
  font-size:15px;
}
.lp-plan-resume a{ color:var(--lp-accent-dark); font-weight:700; text-decoration:none; }
.lp-plan-resume a:hover{ text-decoration:underline; }

/* ---- Ofertas dos Planos (promotional offer on a plan card) ----
   An offer card is visually highlighted, shows the original price struck through, the
   promo price in destaque, the desconto %, a selo, the economia and a contador regressivo. */
.lp-plan-card--offer{
  position:relative;
  border-color:rgba(231,76,60,0.35);
  box-shadow:0 14px 40px rgba(231,76,60,0.16);
  background:linear-gradient(180deg, rgba(231,76,60,0.05), var(--lp-card) 120px);
}
.lp-plan-card--offer:hover{ border-color:rgba(231,76,60,0.5); }
/* Selo de destaque — pinned to the card's top-right corner. */
.lp-plan-seal{
  position:absolute; top:-12px; right:18px;
  display:inline-flex; align-items:center;
  padding:6px 14px;
  border-radius:999px;
  background:linear-gradient(135deg,#e74c3c,#c0392b);
  color:#fff; font-weight:800; font-size:12.5px;
  letter-spacing:0.3px; text-transform:uppercase;
  box-shadow:0 6px 16px rgba(231,76,60,0.35);
}
.lp-plan-offer-prices{ display:flex; flex-direction:column; gap:2px; }
/* "De: R$ 99,90" — original price struck through. */
.lp-plan-original{
  color:var(--lp-muted);
  font-size:16px; font-weight:600;
  text-decoration:line-through;
  text-decoration-color:rgba(231,76,60,0.6);
}
/* "Economize 30%" — automatic discount badge. */
.lp-plan-discount{
  align-self:flex-start;
  display:inline-flex; align-items:center;
  margin-top:6px;
  padding:3px 10px;
  border-radius:999px;
  background:rgba(231,76,60,0.12);
  color:#c0392b; font-weight:800; font-size:13px;
}
/* "Você economiza R$ 30,00" — total savings to the customer. */
.lp-plan-savings{ color:#c0392b; font-weight:700; font-size:14px; }
.lp-plan-promo-text{ color:var(--lp-text); font-size:14.5px; line-height:1.4; }
/* Contador regressivo — shown while the offer carries an end date. */
.lp-plan-countdown{
  display:flex; flex-direction:column; gap:2px;
  align-self:flex-start;
  padding:8px 14px;
  border-radius:12px;
  background:rgba(231,76,60,0.10);
  border:1px solid rgba(231,76,60,0.22);
}
.lp-plan-countdown-label{ font-size:11.5px; font-weight:700; color:#c0392b; text-transform:uppercase; letter-spacing:0.4px; }
.lp-plan-countdown-clock{ font-size:20px; font-weight:800; color:#c0392b; font-variant-numeric:tabular-nums; letter-spacing:0.5px; }
.lp-plan-countdown.is-ended{ background:rgba(20,32,54,0.05); border-color:rgba(20,32,54,0.10); }
.lp-plan-countdown.is-ended .lp-plan-countdown-label{ color:var(--lp-muted); }
.lp-btn-block{ width:100%; }

/* ---- Checkout / cadastro modal ---- */
.lp-modal{ position:fixed; inset:0; z-index:200; }
.lp-modal[aria-hidden="true"]{ display:none; }
.lp-modal-backdrop{
  position:absolute; inset:0;
  background:rgba(12,20,36,0.55);
  backdrop-filter:blur(2px);
}
.lp-modal-card{
  position:relative;
  max-width:440px;
  width:calc(100% - 32px);
  max-height:calc(100vh - 48px);
  overflow-y:auto;
  margin:24px auto;
  top:50%;
  transform:translateY(-50%);
  background:var(--lp-card);
  border-radius:var(--lp-radius);
  box-shadow:0 30px 70px rgba(12,20,36,0.34);
  padding:28px 26px;
}
.lp-modal-x{
  position:absolute; top:12px; right:14px;
  width:34px; height:34px;
  border:none; background:transparent;
  font-size:26px; line-height:1; color:var(--lp-muted);
  cursor:pointer; border-radius:10px;
}
.lp-modal-x:hover{ background:rgba(20,32,54,0.06); color:var(--lp-text); }
.lp-modal-title{ font-size:21px; font-weight:800; margin:0 36px 6px 0; letter-spacing:-0.3px; }
.lp-modal-accent{ color:var(--lp-accent-dark); }
.lp-modal-sub{ margin:0 0 8px; color:var(--lp-muted); font-size:15px; }
.lp-modal-per{ font-size:14px; }
.lp-modal-original{ text-decoration:line-through; text-decoration-color:rgba(231,76,60,0.6); margin-right:6px; }
.lp-modal-desc{ margin:0 0 14px; color:var(--lp-muted); font-size:14px; white-space:pre-line; }
.lp-modal-note{ margin:14px 0 0; color:var(--lp-muted); font-size:13px; text-align:center; }
.lp-modal-error{
  background:rgba(220,53,69,0.10);
  color:#b02a37;
  border:1px solid rgba(220,53,69,0.25);
  border-radius:12px;
  padding:10px 12px;
  font-size:14px;
  margin:0 0 14px;
}

/* Forms inside the modal */
.lp-form{ display:flex; flex-direction:column; gap:14px; margin-top:8px; }
.lp-field{ display:flex; flex-direction:column; gap:6px; }
.lp-field > span{ font-size:13px; font-weight:700; color:var(--lp-text); }
.lp-field > span em{ font-weight:500; color:var(--lp-muted); font-style:normal; }
.lp-field input, .lp-pix-code textarea{
  width:100%;
  padding:12px 14px;
  border:1px solid rgba(20,32,54,0.16);
  border-radius:12px;
  font-size:15px;
  font-family:inherit;
  color:var(--lp-text);
  background:#fff;
  transition:border-color .18s ease, box-shadow .18s ease;
}
.lp-field input:focus, .lp-pix-code textarea:focus{
  outline:none;
  border-color:var(--lp-accent);
  box-shadow:0 0 0 3px var(--lp-accent-soft);
}
.lp-btn-block + .lp-btn-block{ margin-top:10px; }

/* Pix step */
.lp-pix{ display:flex; flex-direction:column; align-items:center; gap:12px; margin:6px 0 4px; }
.lp-pix-qr{ width:200px; height:200px; border-radius:14px; border:1px solid rgba(20,32,54,0.08); }
.lp-pix-hint{ margin:0; font-size:14px; color:var(--lp-muted); text-align:center; }
.lp-pix-code{ width:100%; display:flex; flex-direction:column; gap:8px; align-items:stretch; }
.lp-pix-code textarea{ resize:none; word-break:break-all; font-size:13px; }
.lp-pix-status{
  display:flex; align-items:center; justify-content:center; gap:10px;
  margin-top:14px;
  font-size:14px; font-weight:600; color:var(--lp-accent-dark);
}
.lp-spinner{
  width:16px; height:16px; flex:0 0 auto;
  border:2px solid var(--lp-accent-soft);
  border-top-color:var(--lp-accent);
  border-radius:50%;
  animation:lp-spin .8s linear infinite;
}
@keyframes lp-spin{ to{ transform:rotate(360deg); } }
@media (prefers-reduced-motion: reduce){ .lp-spinner{ animation:none; } }

/* ---- Reveal animation ---- */
.reveal{
  opacity:0;
  transform:translateY(18px);
  transition:opacity .6s ease, transform .6s ease;
}
.reveal.is-visible{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
  .lp-btn, .lp-seg-card, .lp-seg-icon, .lp-feature-card, .lp-feature-icon, .lp-adv-item, .lp-browser, .lp-phone{ transition:none; }
  .lp-gallery-track{ transition:none; }
}

/* ---- Responsive ---- */
@media (max-width: 860px){
  .lp-hero-inner{ grid-template-columns:1fr; gap:36px; padding:48px 20px 56px; text-align:center; }
  .lp-hero-subtitle{ margin-left:auto; margin-right:auto; }
  .lp-hero-actions{ justify-content:center; }
  .lp-timeline{ grid-template-columns:1fr; }
  .lp-section{ padding:48px 20px; }
}
@media (max-width: 520px){
  .lp-btn{ width:100%; }
  .lp-hero-actions{ flex-direction:column; }
  .lp-seg-grid{ grid-template-columns:repeat(2, 1fr); }
}

/* ---- "Criar Minha Loja" standalone page -------------------------------------
   Reuses the modal's form styling (.lp-form/.lp-field/.lp-btn) but lays the card
   out as a centered page instead of an overlay. Independent from the SPA. */
.lp-create{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:40px 16px;
}
.lp-create-card{
  width:100%;
  max-width:460px;
  background:var(--lp-card);
  border-radius:var(--lp-radius);
  box-shadow:0 30px 70px rgba(12,20,36,0.18);
  padding:32px 28px;
}
.lp-create-brand{
  display:block;
  font-size:13px;
  font-weight:800;
  letter-spacing:0.4px;
  text-transform:uppercase;
  color:var(--lp-accent-dark);
  margin-bottom:14px;
}
.lp-create-actions{ margin-top:18px; }
.lp-create .lp-loading{ color:var(--lp-muted); }
/* Resumo do plano + dados já informados na contratação, exibido na tela "Criar Minha
   Loja" para que Nome, E-mail e WhatsApp não sejam pedidos novamente. */
.lp-summary{
  margin:6px 0 16px;
  border:1px solid var(--lp-border, rgba(12,20,36,0.12));
  border-radius:14px;
  background:rgba(12,20,36,0.03);
  padding:12px 14px;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.lp-summary-row{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:12px;
  font-size:14px;
}
.lp-summary-label{ color:var(--lp-muted); font-weight:600; flex:0 0 auto; }
.lp-summary-value{ color:var(--lp-text); text-align:right; word-break:break-word; }
@media (max-width: 520px){
  .lp-create-card{ padding:26px 20px; }
}