/* ---------- Design System ---------- */
:root {
  --bg:#0b0d12;
  --fg:#ffffff;
  --muted:#b0b6c3;
  --brand-1:#ff6b00;        /* primário (dark) */
  --brand-2:#ffd166;        /* secundário (dark) */
  --card:#121623;
  --card-2:#0f1420;
  --stroke:#232a3a;
  --ok:#b9ff66;
  --err:#ff6b6b;
  --shadow: 0 10px 30px rgba(0,0,0,.35);
}

@media (prefers-color-scheme: light) {
  :root {
    --bg:#fdfdfd;
    --fg:#0b0d12;
    --muted:#5a657a;
    --brand-1:#DAA520;      /* dourado destaque (light) */
    --brand-2:#ff8f3a;      /* laranja caloroso (light) */
    --card:#ffffff;
    --card-2:#f9fafc;
    --stroke:#e2e4ec;
    --ok:#3BAA3B;
    --err:#D64545;
    --shadow:0 6px 18px rgba(0,0,0,.08);
  }
}

/* ---------- Base ---------- */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font:500 16px/1.55 ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Inter,Arial,"Noto Sans","Apple Color Emoji","Segoe UI Emoji";
  text-rendering:optimizeLegibility; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
a{color:var(--brand-2); text-decoration:none}
a:hover{opacity:.95}
img{max-width:80vh; height:auto; display:block}
.container{max-width:1120px; margin-inline:auto; padding:0 20px}
.section{padding:55px 0}
@media (max-width:720px){ .section{padding:56px 0} img{max-width: 100%;} }
.section.alt{background:linear-gradient(180deg, transparent, rgba(0,0,0,.06))}
.sec-head{margin-bottom:28px}
.sec-head h2{font-size: clamp(1.6rem, 2.8vw, 2.3rem); margin:0 0 8px}
.sec-head p{margin:0}

.muted{color:var(--muted)}
.grad{background:linear-gradient(90deg,var(--brand-2),var(--brand-1)); -webkit-background-clip:text; background-clip:text; color:transparent}
.badge{display:inline-flex; align-items:center; gap:.5rem; padding:.35rem .6rem; border:1px solid var(--stroke); border-radius:999px; background:linear-gradient(180deg,var(--card),var(--card-2))}
.badges{display:flex; gap:.5rem; margin-top:12px; flex-wrap:wrap}
.list{margin:0; padding:0; list-style:none; display:grid; gap:.55rem}
.list li{display:grid; grid-template-columns:1.2rem 1fr; gap:.6rem; align-items:flex-start}
.check{width:1.1rem;height:1.1rem; display:inline-grid; place-items:center; border-radius:4px; background:var(--ok); color:var(--bg); font-size:.8rem; margin-top:.2rem}
.micro{font-size:.85rem}
.mt-2{margin-top:.6rem}

html.nav-open { overflow: hidden; }

/* ---------- Header / Nav ---------- */
.header{
  position:sticky; top:0; z-index:50;
  backdrop-filter:saturate(1.2) blur(10px);
  background:linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.18));
  border-bottom:1px solid rgba(255,255,255,.08);
}
@media (prefers-color-scheme: light){
  .header{background:linear-gradient(180deg, rgba(255,255,255,.85), rgba(255,255,255,.7)); border-bottom:1px solid var(--stroke)}
}
.nav{display:flex; align-items:center; gap:16px; height:64px}
.brand img{display:block; height:28px; width:auto}

/* Menu desktop */
.menu{display:flex; align-items:center; gap:14px; margin-left:auto}
.menu a{color:var(--fg)}
.menu .btn{margin-left:6px}

/* Botão hambúrguer */
.nav-toggle{
  appearance:none; border:0; background:transparent; cursor:pointer;
  display:none; margin-left:auto; padding:8px; border-radius:8px
}
.nav-toggle:focus-visible{outline:2px solid var(--brand-2); outline-offset:2px}
.nav-bar{display:block; width:24px; height:2px; background:var(--fg); margin:5px 0; transition:transform .2s, opacity .2s}

/* Mobile */
@media (max-width:920px){
  .nav-toggle{display:block}
  .menu{
    position:fixed; inset:64px 0 auto 0;
    display:grid; gap:10px; padding:14px 20px;
    background:linear-gradient(180deg, var(--card), var(--card-2));
    border-top:1px solid var(--stroke);
    transform:translateY(-16px); opacity:0; pointer-events:none;
    transition:opacity .18s ease, transform .18s ease;
  }
  .menu a{padding:10px 6px}
  .menu.open{transform:translateY(0); opacity:1; pointer-events:auto}
  .nav-toggle[aria-expanded="true"] .nav-bar:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .nav-toggle[aria-expanded="true"] .nav-bar:nth-child(2){opacity:0}
  .nav-toggle[aria-expanded="true"] .nav-bar:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.45rem;
  padding:.65rem 1.1rem; border-radius:1rem; border:1px solid var(--stroke);
  font-size:.95rem; font-weight:600;
  background:linear-gradient(180deg,var(--card),var(--card-2)); color:var(--fg);
  box-shadow:0 3px 8px rgba(0,0,0,.25);
  transition:transform .12s ease, box-shadow .12s ease, background .15s ease;
  cursor:pointer;
}
.btn:hover{ transform:translateY(-2px); box-shadow:0 5px 14px rgba(0,0,0,.3) }
.btn:focus-visible{ outline:2px solid var(--brand-2); outline-offset:3px }

.btn-primary{
  background:linear-gradient(90deg,var(--brand-1), var(--brand-2));
  color:var(--bg); border:none; box-shadow:0 4px 12px rgba(0,0,0,.25);
}
.btn-primary:hover{ filter:brightness(1.05) }

.btn-white{
  background:var(--card); color:var(--fg); border:1px solid var(--stroke);
}
@media (prefers-color-scheme: light){
  .btn-white{ background:#fff; color:#0c1222; border:1px solid var(--stroke) }
}
.btn-ghost{ background:transparent; border:none; color:var(--muted) }
.btn-ghost:hover{ color:var(--fg) }
.btn-sm{ padding:.5rem .85rem; font-size:.88rem; border-radius:.5rem }
.btn-lg{ padding:.85rem 1.3rem; font-size:1rem }

/* ---------- Hero ---------- */
.hero{padding-top:50px}
.hero-grid{display:grid; grid-template-columns: 1.1fr .9fr; gap:36px; align-items:center; padding-bottom:44px}
.eyebrow{font-size:.9rem; letter-spacing:.18em; text-transform:uppercase; color:var(--brand-2)}
.hero h1{font-size: clamp(2rem, 4vw, 3rem); line-height:1.1; margin:.3rem 0 10px}
.hero .sub{font-size:1.05rem; max-width:52ch; margin:0}
.hero-ctas{display:flex; gap:.8rem; flex-wrap:wrap; margin-top:1rem}
.hero-media{display:grid; gap:10px; justify-items:center}
.trust{display:flex; align-items:center; justify-content:space-between; gap:20px; margin-top:28px}
.trust-logos{display:flex; gap:.6rem; flex-wrap:wrap}
.chip{padding:.35rem .6rem; border-radius:999px; border:1px solid var(--stroke); background:linear-gradient(180deg,var(--card),var(--card-2))}
@media (max-width:920px){ .hero-grid{grid-template-columns:1fr} }

/* ---------- Urgência / Escassez ---------- */
#urgencia{ text-align:center; background:linear-gradient(180deg,var(--card),var(--card-2)); border-top:1px solid var(--stroke); border-bottom:1px solid var(--stroke) }
#urgencia h2{ font-size:clamp(1.6rem,2.5vw,2.2rem); margin:.4rem 0 }
#urgencia p{ max-width:52ch; margin:0 auto }

/* ======= Dores ======= */
.pill-danger{
  display:inline-block; padding:.3rem .6rem; border-radius:999px;
  border:1px solid color-mix(in srgb, var(--brand-1) 55%, transparent);
  background:linear-gradient(180deg, color-mix(in srgb, var(--brand-1) 18%, transparent), color-mix(in srgb, var(--brand-1) 8%, transparent));
  color:var(--brand-2); font-weight:700; letter-spacing:.02em;
}
.pain-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px }
@media (max-width:920px){ .pain-grid{grid-template-columns:1fr} }

.pain-card{
  position:relative; padding:18px; border-radius:16px; border:1px solid var(--stroke);
  background:linear-gradient(180deg, var(--card), var(--card-2)); box-shadow:var(--shadow);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.pain-card:hover{ transform:translateY(-3px); box-shadow:0 16px 40px rgba(0,0,0,.45); border-color:color-mix(in srgb, var(--brand-1) 45%, transparent) }
.pain-icon{
  width:42px; height:42px; display:grid; place-items:center; border-radius:10px;
  background:linear-gradient(180deg, color-mix(in srgb, var(--brand-1) 18%, transparent), color-mix(in srgb, var(--brand-1) 8%, transparent));
  border:1px solid color-mix(in srgb, var(--brand-1) 35%, transparent);
  margin-bottom:10px; color:var(--brand-2);
}
.pain-card h3{margin:.2rem 0 .35rem}
.pain-impact{ margin-top:.6rem; font-size:.9rem; padding:.35rem .5rem; border-radius:8px; color:var(--bg); background:var(--err) }

.pain-solution{
  margin-top:34px; padding:28px 24px; border-radius:16px;
  background:linear-gradient(180deg, var(--card), var(--card-2));
  border:1px solid color-mix(in srgb, var(--brand-2) 35%, transparent);
  box-shadow:0 12px 28px rgba(0,0,0,.4); text-align:center;
}
.pain-solution > span{ display:block; font-size:1.15rem; font-weight:700; margin-bottom:18px; color:var(--brand-2); letter-spacing:.01em }
.pain-solution ul{ display:flex; flex-wrap:wrap; justify-content:center; gap:12px; margin:0 0 22px; padding:0; list-style:none }
.pain-solution li{
  display:inline-flex; align-items:center; gap:.5rem; padding:.55rem 1rem; border-radius:999px;
  background:linear-gradient(180deg, var(--card-2), var(--card)); border:1px solid var(--stroke); font-size:.95rem; font-weight:500; color:var(--fg);
  transition:transform .15s ease, border-color .15s ease;
}
.pain-solution li::before{ content:"✓"; color:var(--ok); font-weight:900 }
.pain-solution li:hover{ transform:translateY(-2px); border-color:var(--brand-2) }
.pain-solution .btn{ margin-top:6px; font-size:1.05rem; padding:.95rem 1.6rem }

/* ======= Sobre ======= */
.about-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px }
@media (max-width:920px){ .about-grid{grid-template-columns:repeat(2,1fr)} }
@media (max-width:620px){ .about-grid{grid-template-columns:1fr} .about-media img{height: 100%!important;}}
.about-card{
  padding:18px; border-radius:16px; border:1px solid var(--stroke);
  background:linear-gradient(180deg, var(--card), var(--card-2)); box-shadow:var(--shadow);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.about-card:hover,.about-card:focus-within{ transform:translateY(-3px); box-shadow:0 16px 40px rgba(0,0,0,.45); border-color:color-mix(in srgb, var(--brand-2) 45%, transparent) }
.about-icon{
  width:44px; height:44px; display:grid; place-items:center; margin-bottom:10px; border-radius:12px; color:var(--ok);
  background:linear-gradient(180deg, color-mix(in srgb, var(--ok) 18%, transparent), color-mix(in srgb, var(--ok) 8%, transparent));
  border:1px solid color-mix(in srgb, var(--ok) 35%, transparent);
}
.about-title{ margin:.2rem 0 .35rem; font-weight:800 }
.about-list{ margin:.2rem 0 0; padding:0; list-style:none; display:grid; gap:.35rem }
.about-list li{ position:relative; padding-left:1.25rem; font-size:.95rem; line-height:1.45 }
.about-list li::before{
  content:""; position:absolute; left:0; top:.45rem; width:.7rem; height:.7rem; border-radius:50%;
  border:2px solid var(--ok); box-shadow:0 0 0 2px color-mix(in srgb, var(--ok) 15%, transparent) inset;
}
.about-media{display:grid; justify-items:center; padding: 0;}
.about-media img{height:80vh; object-fit: contain; width: 100%;}

/* ---------- Cards / Grid util ---------- */
.card{border:1px solid var(--stroke); background:linear-gradient(180deg,var(--card),var(--card-2)); border-radius:16px; padding:16px; box-shadow:var(--shadow)}
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
.grid-3 .card{padding:18px}
@media (max-width:920px){ .grid-3{grid-template-columns:1fr} }

/* ======= 5) Diferenciais ======= */
.features .pill-good{
  display:inline-block; padding:.3rem .6rem; border-radius:999px;
  border:1px solid color-mix(in srgb, var(--ok) 35%, transparent);
  background:linear-gradient(180deg, color-mix(in srgb, var(--ok) 14%, transparent), color-mix(in srgb, var(--ok) 6%, transparent));
  color:var(--bg); font-weight:800;
}
.features-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px }
@media (max-width:1120px){ .features-grid{grid-template-columns:repeat(2,1fr)} }
@media (max-width:620px){ .features-grid{grid-template-columns:1fr} }
.feature-card{
  padding:18px; border-radius:16px; border:1px solid var(--stroke);
  background:linear-gradient(180deg,var(--card),var(--card-2)); box-shadow:var(--shadow);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.feature-card:hover{ transform:translateY(-3px); box-shadow:0 16px 40px rgba(0,0,0,.45); border-color:color-mix(in srgb, var(--brand-2) 45%, transparent) }
.feature-head{ display:flex; align-items:center; gap:.6rem; margin-bottom:.4rem }
.feature-icon{
  width:40px; height:40px; display:grid; place-items:center; border-radius:10px;
  background:linear-gradient(180deg, color-mix(in srgb, var(--brand-2) 18%, transparent), color-mix(in srgb, var(--brand-2) 8%, transparent));
  border:1px solid color-mix(in srgb, var(--brand-2) 35%, transparent); color:var(--brand-2);
}
.feature-card h3{ margin:.2rem 0 .35rem; font-weight:800 }
.feature-list{ margin: 1rem 0; padding:0; list-style:none; display:grid; gap:.35rem }
.feature-list li{ position:relative; padding-left:1.15rem; font-size:.95rem; line-height:1.45 }
.feature-list li::before{
  content:""; position:absolute; left:0; top:.5rem; width:.55rem; height:.55rem; border-radius:50%;
  background:var(--ok); box-shadow:0 0 0 2px color-mix(in srgb, var(--ok) 18%, transparent);
}
.features-cta{ display:flex; justify-content:center; margin-top:18px }

/* ======= 6) Como Funciona ======= */
.how .pill-good{
  display:inline-block; padding:.3rem .6rem; border-radius:999px;
  border:1px solid color-mix(in srgb, var(--brand-2) 35%, transparent);
  background:linear-gradient(180deg, color-mix(in srgb, var(--brand-2) 14%, transparent), color-mix(in srgb, var(--brand-2) 6%, transparent));
  color:var(--bg); font-weight:800;
}
.how-grid{ counter-reset: step; list-style:none; display:grid; gap:16px; grid-template-columns:repeat(3,1fr); margin:0; padding:0 }
@media (max-width:920px){ .how-grid{grid-template-columns:1fr} }
.how-step{
  position:relative; padding:18px; border-radius:16px; border:1px solid var(--stroke);
  background:linear-gradient(180deg,var(--card),var(--card-2)); box-shadow:var(--shadow);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.how-step:hover{ transform:translateY(-3px); box-shadow:0 16px 40px rgba(0,0,0,.45); border-color:color-mix(in srgb, var(--brand-2) 45%, transparent) }
.how-num{
  width:36px; height:36px; display:grid; place-items:center; border-radius:10px;
  background:linear-gradient(180deg,var(--brand-2),#fff); color:var(--bg); font-weight:900; margin-bottom:10px;
}
.how-step h3{ margin:.2rem 0 .35rem; font-weight:800 }
.how-step p{ margin:0; color:var(--muted) }
.how-cta{ display:flex; justify-content:center; margin-top:18px }

/* ===== 7) Demonstração Visual ===== */

.gallery-cta {
  text-align: center;
}
/* ===== 8) Prova Social ===== */
.testi-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:20px }
@media (max-width:1120px){ .testi-grid{grid-template-columns:repeat(2,1fr)} }
@media (max-width:680px){ .testi-grid{grid-template-columns:1fr} }
.testi-card{
  display:flex; flex-direction:column; justify-content:space-between; padding:20px; border-radius:16px;
  border:1px solid var(--stroke); background:linear-gradient(180deg,var(--card),var(--card-2)); box-shadow:var(--shadow);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.testi-card:hover{ transform:translateY(-3px); box-shadow:0 14px 36px rgba(0,0,0,.45); border-color:color-mix(in srgb, var(--brand-2) 45%, transparent) }
.testi-head{ display:flex; align-items:center; gap:.8rem; margin-bottom:.8rem }
.avatar{
  flex-shrink:0; width:48px; height:48px; border-radius:50%; display:grid; place-items:center;
  background:linear-gradient(180deg,var(--brand-2),var(--brand-1)); color:var(--bg); font-size:1.2rem; font-weight:700; box-shadow:0 4px 10px rgba(0,0,0,.35)
}
.testi-card blockquote{ margin:0 0 1rem; font-size:1rem; line-height:1.5; color:var(--fg) }
.testi-metrics{ margin-top:auto; display:flex; flex-wrap:wrap; gap:10px; padding-top:12px; border-top:1px solid var(--stroke) }
.testi-metrics li{
  display:flex; flex-direction:column; align-items:flex-start; padding:.45rem .7rem; border-radius:10px;
  border:1px solid var(--stroke); background:linear-gradient(180deg,var(--card),var(--card-2));
}
.kpi{ font-weight:900; font-size:1.1rem; color:var(--ok); line-height:1 }
.label{ font-size:.85rem; color:var(--muted) }

/* ===== 9) Comparativo ===== */
.compare-wrap {
  position: relative;
  margin-bottom: 24px;
}

.compare-scroll {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--stroke);
  border-radius: 16px;
  background: linear-gradient(180deg, var(--card), var(--card-2));
  scrollbar-width: thin;
  scrollbar-color: var(--stroke) transparent;
}

/* Para navegadores com scroll customizado */
.compare-scroll::-webkit-scrollbar {
  height: 6px;
}
.compare-scroll::-webkit-scrollbar-track {
  background: transparent;
}
.compare-scroll::-webkit-scrollbar-thumb {
  background-color: var(--stroke);
  border-radius: 3px;
}

/* Tabela interna */
.compare-row {
  display: grid;
  grid-template-columns: 1.6fr .9fr .9fr .9fr;
  border-bottom: 1px solid var(--stroke);
  font-size: 0.95rem;
  min-width: 640px; /* evita colapso em telas muito pequenas */
}
.compare-row:last-child {
  border-bottom: 0;
}

.compare-header {
  background: rgba(255, 255, 255, .03);
  font-weight: 800;
}

.compare-cell {
  padding: 12px;
  min-width: 140px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  white-space: nowrap;
}

/* Coluna fixa da esquerda */
.compare-cell.sticky {
  position: sticky;
  left: 0;
  z-index: 2;
  justify-content: flex-start;
  text-align: left;
  background: linear-gradient(180deg, var(--card), var(--card-2));
  font-weight: 700;
  min-width: 220px;
  white-space: normal;
}

/* Destaque da marca */
.compare-cell.brand {
  color: var(--bg);
  font-weight: 800;
  background: linear-gradient(90deg, var(--brand-1), var(--brand-2));
}

/* Responsivo: tablets */
@media (max-width: 980px) {
  .compare-row {
    font-size: 0.9rem;
  }
  .compare-cell {
    padding: 10px;
    min-width: 120px;
  }
  .compare-cell.sticky {
    min-width: 190px;
  }
}

/* Responsivo: celulares */
@media (max-width: 720px) {
  .compare-row {
    font-size: 0.88rem;
  }
  .compare-cell {
    padding: 8px;
    min-width: 110px;
  }
  .compare-cell.sticky {
    min-width: 170px;
  }
}

/* Responsivo: telas pequenas mesmo (< 480px) */
@media (max-width: 480px) {
  .compare-row {
    font-size: 0.85rem;
  }
  .compare-cell {
    padding: 6px;
    min-width: 100px;
  }
  .compare-cell.sticky {
    min-width: 160px;
  }
}


/* ===== 10) Benefícios ===== */
.benefits-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px }
@media (max-width:1120px){ .benefits-grid{grid-template-columns:repeat(2,1fr)} }
@media (max-width:620px){ .benefits-grid{grid-template-columns:1fr} }
.benefit-card{ padding:18px; transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease }
.benefit-card:hover{ transform:translateY(-3px); box-shadow:0 16px 40px rgba(0,0,0,.45); border-color:color-mix(in srgb, var(--brand-2) 45%, transparent) }
.benefit-icon{
  width:44px; height:44px; border-radius:12px; display:grid; place-items:center; border:1px solid var(--stroke);
  background:linear-gradient(180deg,var(--card),var(--card-2)); margin-bottom:10px; font-size:1.2rem
}
.benefits-cta{ display:flex; justify-content:center; margin-top:18px }

/* ===== 11) Planos & Preço (premium) ===== */
.price-wrap{display:grid; place-items:center}
.price-card{
  position:relative; max-width:640px; padding:24px 22px; border-radius:20px; border:1px solid var(--stroke);
  background: radial-gradient(1200px 500px at -10% -30%, color-mix(in srgb, var(--brand-1) 10%, transparent), transparent),
             linear-gradient(180deg,var(--card),var(--card-2));
  box-shadow:0 14px 38px rgba(0,0,0,.45); overflow:hidden;
}
.price-card::before{
  content:""; position:absolute; inset:-2px; border-radius:22px;
  background:linear-gradient(90deg, color-mix(in srgb, var(--brand-2) 28%, transparent), color-mix(in srgb, var(--brand-1) 25%, transparent), color-mix(in srgb, var(--brand-2) 18%, transparent));
  filter:blur(18px); opacity:.25; z-index:0;
}
.price-badge{
  position:absolute; top:14px; left:14px; z-index:1; padding:.28rem .6rem; border-radius:999px;
  border:1px solid color-mix(in srgb, var(--brand-2) 50%, transparent);
  background:linear-gradient(180deg, color-mix(in srgb, var(--brand-2) 18%, transparent), color-mix(in srgb, var(--brand-2) 8%, transparent));
  color:var(--bg); font-weight:800; font-size:.82rem;
}
.price-head{position:relative; z-index:1}
.price-head h3{margin:.2rem 0 .25rem; font-weight:900}
.price-head p{margin:0}
.price-tag{
  position:relative; z-index:1; display:flex; align-items:flex-end; gap:.2rem; margin:14px 0 18px; justify-content:center; padding:12px 0;
}
.price-tag .currency{font-size:1.05rem; opacity:.95}
.price-tag .value{font-size:4.1rem; line-height:.9; font-weight:900; letter-spacing:-.02em}
.price-tag .cents{font-size:1.2rem}
.price-tag .period{font-size:1rem; opacity:.85; margin-left:.25rem}
.price-feats{margin-top:8px}
.price-feats li span:last-child{font-size:1rem}
.price-actions{ display:flex; gap:.6rem; flex-wrap:wrap; margin-top:14px; margin-bottom:28px; position:relative; z-index:1; justify-content:center }
.price-actions .btn{ box-shadow:0 6px 14px rgba(0,0,0,.25) }
.price-trust{ display:flex; gap:.5rem; flex-wrap:wrap; justify-content:center; margin:14px 0 0; padding:0; list-style:none; position:relative; z-index:1 }
.price-trust li{ padding:.35rem .6rem; border-radius:999px; border:1px solid var(--stroke); background:linear-gradient(180deg,var(--card),var(--card-2)); font-size:.9rem; color:var(--fg) }
@media (max-width:720px){
  .price-card{padding:20px 18px}
  .price-tag .value{font-size:3.2rem}
}

/* ===== 12) Garantias & Segurança ===== */
.trust-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px }
@media (max-width:1120px){ .trust-grid{grid-template-columns:repeat(2,1fr)} }
@media (max-width:620px){ .trust-grid{grid-template-columns:1fr} }
.trust-card{ padding:18px; transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease }
.trust-card:hover{ transform:translateY(-3px); box-shadow:0 16px 40px rgba(0,0,0,.45); border-color:color-mix(in srgb, var(--brand-2) 45%, transparent) }
.trust-icon{
  width:44px; height:44px; border-radius:12px; display:grid; place-items:center; border:1px solid var(--stroke);
  background:linear-gradient(180deg,var(--card),var(--card-2)); margin-bottom:10px; font-size:1.2rem
}

/* ===== 13) FAQ ===== */
.faq{ margin-bottom:48px }
.faq-accordion details{
  border:1px solid var(--stroke); border-radius:12px; background:linear-gradient(180deg,var(--card),var(--card-2)); box-shadow:var(--shadow); padding:12px 14px;
}
.faq-accordion details + details{margin-top:10px}
.faq-accordion summary{
  list-style:none; cursor:pointer; user-select:none; display:flex; align-items:center; gap:.6rem; font-weight:700; position:relative; padding-right:26px;
}
.faq-accordion summary::-webkit-details-marker{display:none}
.faq-accordion summary::after{ content:"›"; position:absolute; right:6px; top:50%; transform:translateY(-50%) rotate(90deg); opacity:.75; transition:transform .18s ease, opacity .18s ease }
.faq-accordion details[open] summary::after{ transform:translateY(-50%) rotate(-90deg); opacity:1 }
.faq-accordion p{ margin:.6rem 0 0 }

/* ---------- Float CTA ---------- */
.float-cta{
    position: fixed;
    left: 0; right: 0;
    bottom: max(12px, env(safe-area-inset-bottom)); /* iOS notch */
    z-index: 2147483001; /* acima do consent banner */
    pointer-events: none; /* evita bloquear toques fora do card */
  }
  .float-cta .fc-wrap{
    pointer-events: auto; /* clique habilitado somente no card */
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    max-width: var(--container, 1120px); margin: 0 auto; padding: 10px 16px;
    background: var(--card, #0b0d12); color: var(--fg, #fff);
    border: 1px solid var(--stroke, #2a2f3a);
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,.35);
  }
  .float-cta .btn{
    min-height: 44px; /* alvo mínimo acessível */
    line-height: 1.1;
  }

  /* Alvo da âncora não ficar escondido sob o header */
  #planos{ scroll-margin-top: calc(var(--header-h, 72px) + 16px); }

  /* Banner de consentimento: nunca por cima da float-cta */
  .consent-banner{
    bottom: calc(max(12px, env(safe-area-inset-bottom)) + var(--float-cta-h, 72px));
  }

  /* Suaviza a rolagem quando clica no "Acessar agora" */
  html:focus-within{ scroll-behavior: smooth; }
  @media (prefers-reduced-motion: reduce){
    html:focus-within{ scroll-behavior: auto; }
  }

/* ===== Footer ===== */
.footer{ padding:36px 0; border-top:1px solid var(--stroke); background:linear-gradient(180deg,var(--card),var(--card-2)); font-size:.9rem }
.foot-grid{ display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap }
.foot-brand img{height:28px; width:auto; display:block; margin-bottom:6px}
.foot-links{ display:flex; gap:14px; flex-wrap:wrap; justify-content:center }
.foot-links a{color:var(--fg); font-size:.9rem}
.foot-dev{ display:flex; align-items:center; gap:.5rem }
.foot-dev img{height:22px; width:auto; display:block}
@media (max-width:720px){ .foot-grid{flex-direction:column; text-align:-webkit-center} .foot-links{justify-content:center} }

/* ---------- Decorative BG ---------- */
.bg-blur{ position:fixed; inset:auto auto 40% -10%; width:40vw; height:40vh; filter:blur(60px); transform:rotate(15deg); opacity:.45; pointer-events:none }
.bg-1{background:radial-gradient( closest-side, color-mix(in srgb, var(--brand-1) 28%, transparent), transparent)}
.bg-2{right:-10%; left:auto; bottom:10%; background:radial-gradient( closest-side, color-mix(in srgb, var(--brand-2) 22%, transparent), transparent)}

/* ===== Lightbox (Fullscreen Gallery) ===== */
.lightbox{ position:fixed; inset:0; display:grid; place-items:center; z-index:999; background:rgba(0,0,0,.7); backdrop-filter:blur(6px) saturate(1.1); opacity:0; pointer-events:none; transition:opacity .18s ease }
.lightbox.open{opacity:1; pointer-events:auto}
.lb-figure{
  position:relative; margin:0; max-width:95vw; max-height:88vh; display:grid; gap:10px; justify-items:center;
  background:linear-gradient(180deg,var(--card),var(--card-2)); border:1px solid var(--stroke); border-radius:14px; box-shadow:var(--shadow); padding:12px;
}
.lb-img{max-width:92vw; max-height:72vh; width:auto; height:auto; display:block; border-radius:10px}
.lb-caption{color:var(--muted); font-size:.95rem; text-align:center; max-width:80ch}
.lb-btn{
  position:absolute; top:14px; display:grid; place-items:center; width:38px; height:38px; border-radius:10px; border:1px solid var(--stroke);
  background:linear-gradient(180deg,var(--card),var(--card-2)); color:var(--fg); cursor:pointer; box-shadow:var(--shadow); transition:transform .12s ease, background .12s ease, opacity .12s ease;
}
.lb-btn:hover{transform:translateY(-1px)}
.lb-close{right:14px; font-size:22px; line-height:1}
.lb-prev{left:14px; top:50%; transform:translateY(-50%)}
.lb-next{right:14px; top:50%; transform:translateY(-50%)}
@media (max-width:620px){ .lb-prev{left:8px} .lb-next{right:8px} }
.lightbox{cursor:zoom-out} .lb-figure, .lb-figure *{cursor:auto}

/* === Checkout Modal === */
.checkout-modal[aria-hidden="true"]{ display:none; }
.checkout-modal[aria-hidden="false"]{ display:grid; }

.checkout-modal{
  position: fixed; inset: 0; z-index: 1000;
  /* centraliza e permite rolar o CONTEÚDO do modal quando for alto */
  display: grid; place-items: center!important;
  padding: 24px;                 /* respiro nas bordas */
  overflow: auto;                /* <-- scroll do modal */
}

.checkout-backdrop{
  position: fixed; inset: 0;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(6px) saturate(1.1);
}

/* Cartão do checkout com scroll interno se passar da viewport */
.checkout-card{
  position: relative;
  width: clamp(320px, 92vw, 720px);
  max-height: min(92vh, 900px);  /* <-- limita altura */
  overflow: auto;                /* <-- rola por dentro */
  -webkit-overflow-scrolling: touch;

  background: linear-gradient(180deg,var(--card),var(--card-2));
  border: 1px solid var(--stroke);
  border-radius: 16px;
  box-shadow: var(--shadow);
  padding: 18px 18px 16px;
}

/* botão fechar */
.checkout-close{
  position: sticky;              /* fica visível ao rolar */
  float: right; top: 0;          /* ajuda no stick */
  margin-top: -6px;
  font-size: 22px; line-height: 1;
  border: 1px solid var(--stroke);
  border-radius: 10px; width: 36px; height: 36px;
  display: grid; place-items: center;
  background: linear-gradient(180deg,var(--card),var(--card-2));
}

/* inputs */
.checkout-input{
  padding: .7rem .8rem; border: 1px solid var(--stroke);
  border-radius: .7rem;
  background: linear-gradient(180deg,var(--card),var(--card-2));
  color: var(--fg);
  outline: none;
}
.checkout-input:focus{ outline: 2px solid var(--brand-2); outline-offset: 2px; }

/* grid do formulário */
.field-grid{ display:grid; gap:10px; grid-template-columns:1fr 1fr; margin-bottom:10px; }
.field{ display:grid; gap:6px; }

.pass-wrap{ position:relative; }
.pass-wrap .pass-toggle{
  position:absolute; right:6px; top:50%; transform:translateY(-50%);
  border:1px solid var(--stroke); border-radius:8px; width:34px; height:34px;
  background:linear-gradient(180deg,var(--card),var(--card-2)); cursor:pointer;
}

.coupon-row{ display:flex; gap:10px; align-items:end; margin-top:10px; flex-wrap:wrap; }
.coupon-chip{
  border:1px solid var(--brand-2); color:var(--brand-2);
  padding:.35rem .6rem; border-radius:999px;
  font-size:.75rem; line-height:1; background:transparent; user-select:none;
  margin-bottom: 5px;
}
.coupon-chip.ok{border-color:#2ea043; color:#2ea043; margin-bottom: 5px;}
.coupon-chip.err{border-color:#e55353; color:#e55353; margin-bottom: 5px;}
.coupon-chip.warn{border-color:#f59e0b; color:#f59e0b; margin-bottom: 5px;}
#cnpj-hint{min-height:16px; display:inline-block}

/* mobile-friendly */
@media (max-width: 620px){
  .checkout-modal{ padding: 12px; }
  .checkout-card{ padding: 14px; width: 100%; max-height: 92vh; }
  .field-grid{ grid-template-columns: 1fr; }
}

/* === Modal de imagem fullscreen (compatível com #imgModal do seu HTML) === */
.img-modal{
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(0,0,0,.72);
  z-index: 2147482500;
  visibility: hidden;
  opacity: 0;
  transition: opacity .22s ease, visibility 0s linear .22s;
}
.img-modal[aria-hidden="false"]{
  visibility: visible;
  opacity: 1;
  transition: opacity .22s ease;
}
.img-modal-content{
  max-width: min(1200px, 95vw);
  max-height: 90vh;
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 12px 40px rgba(0,0,0,.4);
}
.img-modal-close{
  position: absolute;
  top: 12px;
  right: 16px;
  font-size: 28px;
  line-height: 1;
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid var(--stroke);
  background: linear-gradient(180deg,var(--card),var(--card-2));
  color: var(--fg);
  cursor: pointer;
}

/* === Consent Banner (compatível com #consent-root / .consent-card) === */
.consent-banner {
  position: fixed;
  left: 0; right: 0; bottom: 12px;
  z-index: 2147483000;            /* acima dos modais */
  display: grid; place-items: center;
  pointer-events: none;
}
.consent-card {
  pointer-events: auto;
  background: var(--card);
  color: var(--fg);
  border: 1px solid var(--stroke);
  box-shadow: var(--shadow);
  border-radius: 14px;
  padding: 14px 16px;
  max-width: 820px;
  margin: 0 12px;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .28s ease, transform .28s ease;
}
.consent-card.is-shown { opacity: 1; transform: translateY(0); margin-bottom: 4%; }
@media (max-width:720px){ .consent-card.is-shown { margin-bottom: 20%; } }