:root {
  --bg: #06151c;
  --bg-deep: #020a10;
  --soft: #09232d;
  --card: #0d2b35;
  --card-deep: #071b24;
  --green: #19e58c;
  --green-dark: #0ea866;
  --cyan: #38bdf8;
  --white: #f4f7f8;
  --muted: #b6c5cc;
  --line: rgba(255,255,255,.10);
  --line-cyan: rgba(56,189,248,.28);
  --shadow: 0 22px 54px rgba(0,0,0,.34);
  --radius: 22px;
  --container: 1120px;
  --safe-bottom: max(14px, env(safe-area-inset-bottom));
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-width: 280px;
  color: var(--white);
  background:
    radial-gradient(circle at 86% 5%, rgba(25,229,140,.15), transparent 28rem),
    radial-gradient(circle at 10% 32%, rgba(56,189,248,.08), transparent 24rem),
    linear-gradient(180deg, #020b11 0%, var(--bg) 25%, var(--bg-deep) 100%);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.5;
  overflow-x: hidden;
  padding-bottom: calc(74px + var(--safe-bottom));
}

img { display: block; max-width: 100%; }
a { color: inherit; }
button, summary { font: inherit; }
mark { padding: 0; color: var(--green); background: transparent; }

.skip-link { position: fixed; left: 12px; top: -80px; z-index: 999; padding: 10px 14px; border-radius: 10px; background: var(--green); color: #00140c; font-weight: 900; }
.skip-link:focus { top: 12px; }

.container { width: min(calc(100% - 24px), var(--container)); margin-inline: auto; }
.section { padding-block: 58px; scroll-margin-top: 20px; }
.section--soft { border-block: 1px solid var(--line); background: rgba(9,35,45,.45); }

.topbar { width: min(calc(100% - 20px), 760px); margin: 10px auto 0; padding: 10px 8px; display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: center; gap: 5px; border: 1px solid var(--line); border-radius: 15px; background: rgba(7,27,36,.88); backdrop-filter: blur(14px); box-shadow: var(--shadow); }
.topbar span { display: flex; justify-content: center; align-items: center; min-width: 0; font-size: clamp(.58rem, 2.65vw, .78rem); font-weight: 800; text-align: center; }
.topbar i { width: 1px; height: 22px; background: var(--line); }

.site-header { padding-block: 18px 4px; }
.nav { display: flex; justify-content: space-between; align-items: center; gap: 14px; }
.brand { display: inline-flex; align-items: center; gap: 9px; color: var(--white); text-decoration: none; font-size: .86rem; font-weight: 900; line-height: 1.05; }
.brand strong { color: var(--green); }
.brand__icon { display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid rgba(25,229,140,.42); border-radius: 12px; color: var(--green); box-shadow: 0 0 22px rgba(25,229,140,.2); }
.nav__cta { padding: 10px 13px; border: 1px solid rgba(56,189,248,.46); border-radius: 11px; color: var(--cyan); text-decoration: none; font-size: .82rem; font-weight: 850; }

.hero { padding-top: 28px; }
.hero__grid { display: grid; gap: 26px; }
.hero__copy { min-width: 0; }
.kicker { margin: 0 0 10px; color: var(--green); font-size: .75rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
h1, h2, h3, p { margin-top: 0; }
h1 { margin-bottom: 17px; font-size: clamp(2.15rem, 10.7vw, 4.6rem); line-height: .98; letter-spacing: -.055em; text-wrap: balance; }
h2 { margin-bottom: 12px; font-size: clamp(1.76rem, 7.3vw, 3.4rem); line-height: 1.04; letter-spacing: -.04em; text-wrap: balance; }
h3 { margin-bottom: 8px; line-height: 1.12; letter-spacing: -.025em; }
.hero__lead, .section-head > p:last-child, .pain-card p, .material-card p, .bonus-card p, .plan-card > p, .small-note, .site-footer p { color: var(--muted); }
.hero__lead { max-width: 48ch; font-size: 1.03rem; }

.check-list, .bonus-box ul, .compare-card ul, .demo-list, .not-for ul { list-style: none; padding: 0; margin: 21px 0; }
.check-list li, .bonus-box li, .compare-card li, .demo-list li, .not-for li { position: relative; padding-left: 28px; margin: 11px 0; }
.check-list li::before, .bonus-box li::before, .compare-card li::before, .demo-list li::before, .not-for li::before { position: absolute; left: 0; top: .08em; width: 19px; height: 19px; display: grid; place-items: center; border-radius: 50%; background: var(--green); color: #00150c; content: "✓"; font-size: .72rem; font-weight: 950; }
.compare-card--before li::before, .not-for li::before { content: "×"; background: rgba(255,111,117,.16); color: #ff858a; }

.hero__actions { display: grid; gap: 11px; margin-top: 25px; }
.btn { min-height: 54px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 14px 19px; border: 0; border-radius: 15px; text-align: center; text-decoration: none; font-weight: 900; -webkit-tap-highlight-color: transparent; transition: transform .16s ease, filter .16s ease; }
.btn:active { transform: scale(.984); }
.btn:focus-visible { outline: 3px solid rgba(56,189,248,.55); outline-offset: 3px; }
.btn--primary { color: #00140b; background: linear-gradient(180deg, #52ffa8 0%, var(--green) 100%); box-shadow: 0 14px 34px rgba(25,229,140,.22); }
.btn--secondary { color: #001521; background: linear-gradient(180deg, #71dcff 0%, var(--cyan) 100%); }
.btn--ghost { border: 1px solid rgba(56,189,248,.64); color: var(--cyan); background: rgba(4,19,28,.66); }
.btn--full { width: 100%; }
.btn--center { width: min(100%, 430px); margin: 26px auto 0; }
.text-link { display: block; margin-top: 15px; color: var(--cyan); font-weight: 800; text-align: center; }

.trust-row { margin-top: 17px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.trust-row span { min-width: 0; padding: 9px 5px; border: 1px solid var(--line); border-radius: 11px; background: rgba(8,29,41,.6); color: var(--muted); font-size: .67rem; text-align: center; }

/* IMAGE PLACEHOLDERS */
.image-slot { position: relative; width: 100%; aspect-ratio: var(--slot-ratio, 4 / 3); overflow: hidden; border: 1px dashed rgba(56,189,248,.52); border-radius: var(--radius); background: linear-gradient(145deg, rgba(13,43,53,.92), rgba(3,15,23,.96)); box-shadow: var(--shadow); }
.image-slot::before { position: absolute; inset: 0; z-index: 0; content: ""; background: linear-gradient(rgba(56,189,248,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(56,189,248,.035) 1px, transparent 1px); background-size: 24px 24px; }
.image-slot img { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .2s ease; }
.image-slot.is-loaded img { opacity: 1; }
.image-slot__placeholder { position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; padding: 22px; color: var(--muted); text-align: center; }
.image-slot__placeholder::before { content: "+"; width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid rgba(25,229,140,.55); border-radius: 13px; color: var(--green); font-size: 1.5rem; font-weight: 500; }
.image-slot__placeholder strong { color: var(--white); font-size: 1rem; }
.image-slot__placeholder span { max-width: 38ch; font-size: .82rem; }
.image-slot__placeholder code { padding: 4px 7px; border-radius: 7px; background: rgba(0,0,0,.24); color: var(--cyan); font-size: .72rem; overflow-wrap: anywhere; }
.image-slot__placeholder small { font-size: .68rem; }
.image-slot.is-loaded .image-slot__placeholder { display: none; }
.image-slot--hero { min-height: 390px; }
.image-slot--compact { margin-top: 21px; }
.image-slot--wide { margin-top: 27px; }
.gallery-slot { border-radius: 16px; }
.gallery-slot .image-slot__placeholder { padding: 10px; }
.gallery-slot .image-slot__placeholder::before { width: 32px; height: 32px; border-radius: 9px; }
.gallery-slot .image-slot__placeholder code { font-size: .57rem; }

.section-head { max-width: 780px; margin: 0 auto 27px; text-align: center; }
.section-head--left { margin-left: 0; text-align: left; }

.pain-grid, .gallery-grid, .materials-grid, .bonus-grid, .pricing-grid, .mini-plans { display: grid; gap: 14px; }
.pain-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pain-card, .material-card, .bonus-card, .compare-card, .plan-card, .mini-plans article, .not-for { border: 1px solid var(--line); border-radius: var(--radius); background: linear-gradient(180deg, rgba(13,43,53,.88), rgba(6,21,28,.92)); box-shadow: var(--shadow); }
.pain-card { min-width: 0; padding: 18px 13px; text-align: center; }
.pain-card h3 { font-size: .98rem; }
.pain-card p { margin-bottom: 0; font-size: .82rem; }
.icon-chip { width: 42px; height: 42px; margin: 0 auto 13px; display: grid; place-items: center; border: 1px solid rgba(25,229,140,.42); border-radius: 13px; color: var(--green); background: rgba(25,229,140,.08); font-weight: 900; }

.before-after { display: grid; gap: 15px; }
.compare-card { padding: 22px; }
.compare-card > span { display: inline-block; margin-bottom: 13px; color: var(--muted); font-size: .72rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.compare-card--after { border-color: rgba(25,229,140,.42); }
.compare-card--after > span { color: var(--green); }

.gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.gallery-note { margin: 20px auto 0; max-width: 600px; color: var(--muted); text-align: center; }
.gallery-note strong { color: var(--white); }

.steps { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.steps li { display: grid; grid-template-columns: 42px 1fr; gap: 13px; align-items: start; padding: 16px; border: 1px solid var(--line); border-radius: 15px; background: rgba(10,34,45,.72); }
.steps li > span { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; background: var(--green); color: #00150c; font-weight: 950; }
.steps p { margin-bottom: 0; color: var(--muted); }
.process-note { margin: 16px 0 0; color: var(--muted); text-align: center; }

.pricing { position: relative; }
.plan-card { position: relative; padding: 22px; overflow: hidden; }
.plan-card--featured { order: 1; border-color: rgba(25,229,140,.7); box-shadow: 0 24px 70px rgba(25,229,140,.11), var(--shadow); }
.plan-card--essential { order: 2; }
.plan-badges { margin: -22px -22px 20px; display: flex; flex-wrap: wrap; gap: 5px; padding: 9px 12px; background: var(--green); }
.plan-badges span { color: #00140a; font-size: .67rem; font-weight: 950; text-transform: uppercase; }
.price { margin: 20px 0 12px; display: grid; grid-template-columns: auto auto; width: fit-content; align-items: start; }
.price small { margin-top: 8px; color: var(--green); font-weight: 900; }
.price strong { color: var(--green); font-size: 3rem; line-height: .9; letter-spacing: -.055em; }
.price span { grid-column: 1 / -1; margin-top: 7px; color: var(--muted); font-size: .75rem; }
.price--secondary small, .price--secondary strong { color: var(--cyan); }
.price-anchor { color: var(--green) !important; font-size: .78rem; font-weight: 800; }
.bonus-box { margin: 20px 0; padding: 16px; border: 1px solid rgba(25,229,140,.3); border-radius: 15px; background: rgba(25,229,140,.055); }
.bonus-box strong { color: var(--green); }
.bonus-box ul { margin-bottom: 0; }
.plan-note { display: block; margin-top: 10px; color: var(--muted); text-align: center; }
.scripts-details { margin: 16px 0 20px; border: 1px solid var(--line); border-radius: 13px; padding: 12px; background: rgba(4,19,28,.55); }
.scripts-details summary { color: var(--cyan); font-weight: 850; cursor: pointer; }
.scripts-details p { margin: 10px 0 0; color: var(--muted); font-size: .88rem; }

.comparison { overflow: hidden; border: 1px solid var(--line); border-radius: 17px; background: rgba(5,20,28,.8); }
.comparison > div { display: grid; grid-template-columns: minmax(0, 1.5fr) .65fr .85fr; align-items: center; min-height: 58px; border-bottom: 1px solid var(--line); }
.comparison > div:last-child { border-bottom: 0; }
.comparison span, .comparison b, .comparison i { padding: 10px 8px; min-width: 0; text-align: center; font-size: clamp(.72rem, 3vw, .91rem); overflow-wrap: anywhere; }
.comparison span:first-child { text-align: left; }
.comparison b { color: var(--green); font-style: normal; }
.comparison i { color: #7d919b; font-style: normal; }
.comparison__head { background: var(--card); font-weight: 900; }
.comparison-note { max-width: 680px; margin: 18px auto 0; color: var(--muted); text-align: center; }

.material-card { overflow: hidden; }
.material-card h3, .material-card p { margin-inline: 17px; }
.material-card h3 { margin-top: 17px; }
.material-card p { margin-bottom: 19px; }
.card-image { border: 0; border-radius: 0; box-shadow: none; }


.demo-grid, .audience-grid, .faq-grid, .guarantee__inner, .footer-grid { display: grid; gap: 28px; }
.demo-list { counter-reset: demo; }
.demo-list li { padding-left: 40px; }
.demo-list li::before { content: counter(demo); counter-increment: demo; width: 27px; height: 27px; background: var(--green); }
.small-note { padding: 15px; border-left: 3px solid var(--cyan); background: rgba(56,189,248,.06); }
.not-for { padding: 22px; border-color: rgba(255,130,130,.22); }
.not-for > span { color: #ff9196; font-size: .72rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }

.proof-grid { display: grid; gap: 13px; }

.mini-plans article { padding: 21px; text-align: center; }
.mini-plans article > span { color: var(--muted); font-size: .75rem; font-weight: 900; text-transform: uppercase; }
.mini-plans article > strong { display: block; margin-block: 8px; color: var(--cyan); font-size: 2.45rem; line-height: 1; }
.mini-plan--featured { position: relative; border-color: rgba(25,229,140,.65) !important; }
.mini-plan--featured em { position: absolute; top: -11px; left: 50%; transform: translateX(-50%); padding: 5px 10px; border-radius: 999px; color: #00150c; background: var(--green); font-size: .65rem; font-style: normal; font-weight: 950; text-transform: uppercase; white-space: nowrap; }
.mini-plan--featured > strong { color: var(--green) !important; }

.guarantee { border-block: 1px solid rgba(25,229,140,.22); background: radial-gradient(circle at 10% 50%, rgba(25,229,140,.13), transparent 20rem); }
.guarantee__inner { align-items: center; }
.seal { width: 112px; height: 112px; margin-inline: auto; display: grid; place-content: center; border: 2px solid var(--green); border-radius: 50%; color: var(--green); text-align: center; box-shadow: 0 0 38px rgba(25,229,140,.16); }
.seal strong { font-size: 2.8rem; line-height: .8; }
.seal span { font-weight: 900; text-transform: uppercase; }

.accordion details { border-bottom: 1px solid var(--line); }
.accordion details:first-child { border-top: 1px solid var(--line); }
.accordion summary { position: relative; padding: 18px 38px 18px 0; cursor: pointer; font-weight: 850; list-style: none; }
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary::after { position: absolute; right: 2px; top: 50%; transform: translateY(-50%); content: "+"; color: var(--green); font-size: 1.4rem; }
.accordion details[open] summary::after { content: "−"; }
.accordion details p { margin: -3px 0 18px; color: var(--muted); }

.cta-final__inner { padding: 28px 20px; border: 1px solid rgba(25,229,140,.32); border-radius: var(--radius); background: linear-gradient(135deg, rgba(25,229,140,.12), rgba(56,189,248,.05)); text-align: center; box-shadow: var(--shadow); }
.cta-final__inner .btn { width: min(100%, 450px); margin-inline: auto; }

.site-footer { padding: 44px 0 calc(25px + var(--safe-bottom)); border-top: 1px solid var(--line); background: #02090e; }
.footer-grid nav { display: grid; gap: 10px; }
.footer-grid nav a { color: var(--muted); text-decoration: none; }
.footer-notice { margin-top: 30px; padding-top: 20px; border-top: 1px solid var(--line); color: #8398a3; font-size: .79rem; }

.mobile-sticky { position: fixed; z-index: 90; left: 0; right: 0; bottom: 0; min-height: calc(64px + var(--safe-bottom)); padding: 9px 12px var(--safe-bottom); display: grid; grid-template-columns: auto 1fr; gap: 11px; align-items: center; border-top: 1px solid rgba(25,229,140,.3); background: rgba(2,12,17,.94); backdrop-filter: blur(14px); }
.mobile-sticky small { display: block; color: var(--muted); font-size: .63rem; }
.mobile-sticky strong { color: var(--green); font-size: 1.05rem; }
.mobile-sticky a { min-height: 45px; display: grid; place-items: center; padding: 8px 12px; border-radius: 12px; color: #00150c; background: var(--green); text-decoration: none; font-size: .8rem; font-weight: 950; text-align: center; }

@media (min-width: 720px) {
  body { padding-bottom: 0; }
  .section { padding-block: 80px; }
  .hero__grid, .demo-grid, .audience-grid, .faq-grid, .guarantee__inner, .footer-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; }
  .hero__copy { order: 1; }
  .image-slot--hero { order: 2; }
  .hero__actions { grid-template-columns: 1fr 1fr; }
  .pain-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .before-after { grid-template-columns: 1fr 1fr; }
  .gallery-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .steps { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .steps li { grid-template-columns: 1fr; }
  .pricing-grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); align-items: start; }
  .plan-card--featured { order: 1; }
  .plan-card--essential { order: 2; }
  .materials-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .proof-grid { grid-template-columns: 1.5fr 1fr; }
  .proof-main { grid-row: span 2; }
  .mini-plans { grid-template-columns: 1fr 1fr; }
  .mobile-sticky { display: none; }
}

@media (min-width: 1024px) {
  .hero__grid { gap: 54px; }
  .materials-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}


/* =========================================================
   AJUSTES FINAIS MOBILE-FIRST
   ========================================================= */
body {
  padding-bottom: 0;
}

.mobile-sticky {
  display: none !important;
}

h1, h2, h3, p, li, summary, .btn, .nav__cta, .brand, .comparison span,
.comparison b, .comparison i, .image-slot__placeholder {
  word-break: normal;
  overflow-wrap: break-word;
  hyphens: none;
}

h1, h2, h3 {
  text-wrap: pretty;
}

.topbar span {
  white-space: nowrap;
  font-size: clamp(.52rem, 2.35vw, .78rem);
}

/* No celular, as dores ganham largura integral para o texto respirar. */
.pain-grid {
  grid-template-columns: 1fr;
}

.pain-card {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  column-gap: 13px;
  align-items: start;
  padding: 18px;
  text-align: left;
}

.pain-card .icon-chip {
  grid-row: 1 / span 2;
  margin: 0;
}

.pain-card h3,
.pain-card p {
  min-width: 0;
}

.pain-card h3 {
  margin-top: 2px;
  font-size: 1.02rem;
}

.pain-card p {
  font-size: .88rem;
}

/* Planos em ordem comercial solicitada: Essencial e depois Profissional. */
.plan-card--essential {
  order: 1;
}

.plan-card--featured {
  order: 2;
}

.plan-card {
  padding: 20px;
}

.plan-badges {
  margin: -20px -20px 20px;
}

/* Comparativo vira blocos legíveis no celular, sem colunas espremidas. */
.comparison__head {
  display: none !important;
}

.comparison > div:not(.comparison__head) {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 8px;
  min-height: 0;
  padding: 13px;
}

.comparison > div:not(.comparison__head) > span:first-child {
  grid-column: 1 / -1;
  padding: 0 0 5px;
  color: var(--white);
  font-size: .91rem;
  font-weight: 850;
  text-align: left;
}

.comparison > div:not(.comparison__head) > b,
.comparison > div:not(.comparison__head) > i {
  min-height: 54px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: rgba(7,27,36,.65);
  font-size: .84rem;
  text-align: center;
}

.comparison > div:not(.comparison__head) > b::before,
.comparison > div:not(.comparison__head) > i::before {
  content: attr(data-label);
  color: var(--muted);
  font-size: .62rem;
  font-style: normal;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}

/* Evita que nomes de arquivos dominem placeholders em telas pequenas. */
.image-slot__placeholder code {
  max-width: 100%;
  line-height: 1.25;
}

@media (max-width: 359px) {
  .container {
    width: min(calc(100% - 18px), var(--container));
  }

  .topbar {
    width: calc(100% - 12px);
    padding-inline: 4px;
  }

  .topbar span {
    font-size: .49rem;
  }

  h1 {
    font-size: 2rem;
  }

  h2 {
    font-size: 1.6rem;
  }

  .trust-row {
    grid-template-columns: 1fr;
  }

  .gallery-grid {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 460px) {
  .pain-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .pain-card {
    display: block;
    padding: 18px 14px;
    text-align: center;
  }

  .pain-card .icon-chip {
    margin: 0 auto 13px;
  }
}

@media (min-width: 720px) {
  .pricing-grid {
    grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
    align-items: start;
  }

  .plan-card--essential {
    order: 1;
  }

  .plan-card--featured {
    order: 2;
  }

  .comparison__head {
    display: grid !important;
  }

  .comparison > div,
  .comparison > div:not(.comparison__head) {
    grid-template-columns: minmax(0, 1.5fr) .65fr .85fr;
    gap: 0;
    min-height: 58px;
    padding: 0;
  }

  .comparison > div:not(.comparison__head) > span:first-child {
    grid-column: auto;
    padding: 10px 8px;
    font-size: clamp(.72rem, 1.4vw, .91rem);
    font-weight: 400;
  }

  .comparison > div:not(.comparison__head) > b,
  .comparison > div:not(.comparison__head) > i {
    min-height: 0;
    display: block;
    padding: 10px 8px;
    border: 0;
    border-radius: 0;
    background: transparent;
    font-size: clamp(.72rem, 1.4vw, .91rem);
  }

  .comparison > div:not(.comparison__head) > b::before,
  .comparison > div:not(.comparison__head) > i::before {
    content: none;
  }
}


/* Catálogo real — uma única coluna empilhada em todas as telas */
.gallery-grid.gallery-grid--stacked {
  width: min(100%, 900px);
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1fr !important;
  gap: clamp(16px, 4vw, 28px);
}

.catalog-image-card {
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(56, 189, 248, .28);
  border-radius: clamp(14px, 3vw, 22px);
  background: #07151d;
  box-shadow: 0 18px 48px rgba(0, 0, 0, .34);
}

.catalog-image-card img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 9 / 16;
  object-fit: contain;
  background: #111717;
}

@media (max-width: 459px) {
  .section--gallery .container {
    width: min(100% - 20px, var(--container));
  }

  .gallery-grid.gallery-grid--stacked {
    gap: 14px;
  }

  .catalog-image-card {
    border-radius: 13px;
  }
}


/* =========================================================
   BONUS SHOWCASE - LAYOUT PREMIUM
   ========================================================= */
.bonus-showcase {
  background:
    radial-gradient(circle at 50% -10%, rgba(25,229,140,.08), transparent 28rem),
    rgba(9,35,45,.45);
}

.bonus-showcase__head {
  max-width: 860px;
  margin-bottom: 30px;
}

.bonus-showcase__head h2 {
  margin-bottom: 16px;
}

.bonus-showcase__head > p:last-child {
  max-width: 700px;
  margin-inline: auto;
  font-size: clamp(1rem, 2.8vw, 1.2rem);
}

.bonus-stack {
  display: grid;
  gap: 18px;
}

.bonus-feature {
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(0, 1.25fr);
  align-items: stretch;
  gap: 0;
  overflow: hidden;
  border: 1px solid rgba(25,229,140,.55);
  border-radius: 24px;
  background:
    linear-gradient(180deg, rgba(8,23,32,.96), rgba(4,15,22,.98));
  box-shadow:
    0 0 0 1px rgba(25,229,140,.08) inset,
    0 0 28px rgba(0,214,255,.12),
    0 22px 54px rgba(0,0,0,.34);
}

.bonus-feature__content {
  display: flex;
  gap: 16px;
  padding: 28px 24px;
  min-width: 0;
}

.bonus-feature__icon {
  flex: 0 0 54px;
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(25,229,140,.58);
  border-radius: 15px;
  color: var(--green);
  background: rgba(3,19,26,.82);
  box-shadow: inset 0 0 0 1px rgba(25,229,140,.1), 0 0 22px rgba(25,229,140,.12);
}

.bonus-feature__icon svg {
  width: 24px;
  height: 24px;
}

.bonus-feature__copy {
  min-width: 0;
  align-self: center;
}

.bonus-feature__eyebrow {
  display: inline-block;
  margin-bottom: 10px;
  color: var(--green);
  font-size: .74rem;
  font-weight: 950;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.bonus-feature__copy h3 {
  margin-bottom: 0;
  font-size: clamp(1.55rem, 4vw, 2.1rem);
  line-height: 1.02;
  letter-spacing: -.04em;
  text-wrap: balance;
}

.bonus-feature__line {
  display: block;
  width: 64px;
  height: 2px;
  margin: 16px 0 18px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255,174,70,.95), rgba(255,174,70,.22));
}

.bonus-feature__copy p {
  margin-bottom: 0;
  font-size: 1rem;
  line-height: 1.45;
  color: #d0dbe0;
}

.bonus-feature__media,
.bonus-mosaic .image-slot {
  height: 100%;
  min-height: 260px;
  border: 0;
  border-left: 1px solid rgba(255,255,255,.06);
  border-radius: 0;
  box-shadow: none;
  background: linear-gradient(145deg, rgba(22,32,40,.92), rgba(8,18,27,.98));
}

.bonus-feature__media::before,
.bonus-mosaic .image-slot::before {
  background: linear-gradient(rgba(56,189,248,.03) 1px, transparent 1px), linear-gradient(90deg, rgba(56,189,248,.03) 1px, transparent 1px);
  background-size: 28px 28px;
}

.bonus-feature__placeholder {
  padding: 24px;
}

.bonus-feature__placeholder strong {
  font-size: 1rem;
}

.bonus-feature__placeholder span {
  font-size: .84rem;
}

.bonus-mosaic {
  display: grid;
  grid-template-columns: 1.15fr .85fr .85fr;
  grid-template-rows: 1fr 1fr;
  min-height: 320px;
}

.bonus-mosaic__main {
  grid-column: 1;
  grid-row: 1 / span 2;
}

.bonus-mosaic__top {
  grid-column: 2 / span 2;
  grid-row: 1;
}

.bonus-mosaic__bottom-left {
  grid-column: 2;
  grid-row: 2;
}

.bonus-mosaic__bottom-right {
  grid-column: 3;
  grid-row: 2;
}

.bonus-mosaic .image-slot {
  min-height: 0;
}

.bonus-mosaic__top,
.bonus-mosaic__bottom-left,
.bonus-mosaic__bottom-right {
  border-left: 1px solid rgba(255,255,255,.06);
}

.bonus-mosaic__bottom-left,
.bonus-mosaic__bottom-right {
  border-top: 1px solid rgba(255,255,255,.06);
}

@media (max-width: 767px) {
  .bonus-feature {
    grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  }

  .bonus-feature__content {
    padding: 20px 16px;
    gap: 12px;
  }

  .bonus-feature__icon {
    flex-basis: 46px;
    width: 46px;
    height: 46px;
    border-radius: 13px;
  }

  .bonus-feature__icon svg {
    width: 20px;
    height: 20px;
  }

  .bonus-feature__copy h3 {
    font-size: clamp(1.1rem, 4.8vw, 1.65rem);
  }

  .bonus-feature__line {
    width: 54px;
    margin: 12px 0 14px;
  }

  .bonus-feature__copy p {
    font-size: .92rem;
  }

  .bonus-feature__media,
  .bonus-mosaic .image-slot {
    min-height: 220px;
  }

  .bonus-feature__placeholder {
    padding: 14px;
  }

  .bonus-feature__placeholder::before {
    width: 36px;
    height: 36px;
    border-radius: 11px;
    font-size: 1.25rem;
  }

  .bonus-feature__placeholder strong {
    font-size: .88rem;
  }

  .bonus-feature__placeholder span,
  .bonus-feature__placeholder code {
    font-size: .7rem;
  }
}

@media (max-width: 767px) {
  .bonus-mosaic {
    min-height: 260px;
  }
}

@media (max-width: 560px) {
  .bonus-feature {
    grid-template-columns: 1fr;
  }

  .bonus-feature__content {
    padding-bottom: 18px;
  }

  .bonus-feature__media,
  .bonus-mosaic {
    border-top: 1px solid rgba(255,255,255,.06);
  }

  .bonus-feature__media,
  .bonus-mosaic .image-slot {
    min-height: 210px;
    border-left: 0;
  }
}

/* Bonus banners inserted */
.bonus-stack--banners {
  display: grid;
  gap: 18px;
}

.bonus-stack--banners .bonus-banner {
  aspect-ratio: 2048 / 683;
  border: 1px solid rgba(25, 229, 140, .5);
  border-radius: 34px;
  overflow: hidden;
  box-shadow:
    0 0 0 1px rgba(25,229,140,.08) inset,
    0 0 22px rgba(0,214,255,.10),
    0 18px 48px rgba(0,0,0,.32);
  background: linear-gradient(145deg, rgba(6,18,28,.98), rgba(2,10,17,1));
}

.bonus-stack--banners .bonus-banner img {
  opacity: 1;
  object-fit: cover;
}

@media (max-width: 767px) {
  .bonus-stack--banners {
    gap: 14px;
  }

  .bonus-stack--banners .bonus-banner {
    border-radius: 22px;
  }
}


/* =========================================================
   PROVAS SOCIAIS
   ========================================================= */
.social-proof {
  background:
    radial-gradient(circle at 50% 0%, rgba(25,229,140,.06), transparent 28rem),
    linear-gradient(180deg, rgba(3,16,23,.98), rgba(4,20,27,.98));
}

.social-proof__head {
  max-width: 820px;
  margin-bottom: 28px;
}

.social-proof__head > p:last-child {
  max-width: 650px;
  margin-inline: auto;
}

.social-proof__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  max-width: 1120px;
  margin-inline: auto;
}

.social-proof__image {
  aspect-ratio: 4 / 5;
  border: 1px solid rgba(25,229,140,.35);
  border-radius: 22px;
  background: linear-gradient(145deg, rgba(12,39,49,.92), rgba(3,15,23,.98));
  box-shadow:
    0 0 0 1px rgba(25,229,140,.05) inset,
    0 18px 44px rgba(0,0,0,.28);
}

.social-proof__image img {
  object-fit: contain;
  background: rgba(3,15,23,.98);
}

.social-proof__note {
  max-width: 760px;
  margin: 20px auto 0;
  color: var(--muted);
  text-align: center;
  font-size: .78rem;
}

@media (max-width: 920px) and (min-width: 681px) {
  .social-proof__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 760px;
  }

  .social-proof__image:last-child {
    grid-column: 1 / -1;
    width: min(100%, 360px);
    justify-self: center;
  }
}

@media (max-width: 680px) {
  .social-proof__grid {
    grid-template-columns: 1fr;
    gap: 14px;
    max-width: 520px;
  }

  .social-proof__image {
    border-radius: 18px;
  }
}

/* Cards dos planos sem imagens: conteúdo direto e compacto. */
.plan-card > .check-list {
  margin-top: 24px;
}

.plan-card--featured .price-anchor + .check-list {
  margin-top: 22px;
}

/* =========================================================
   AJUSTE DE CENTRALIZAÇÃO E EXIBIÇÃO COMPLETA DAS IMAGENS
   ========================================================= */

/* Centraliza melhor o conteúdo das seções e evita sensação de desalinhamento. */
.section > .container,
.hero > .container {
  width: min(calc(100% - 28px), var(--container));
}

.section-head,
.section-head--left,
.bonus-showcase__head,
.social-proof__head {
  margin-inline: auto;
  text-align: center;
}

.hero__grid,
.guarantee__inner,
.faq-grid,
.footer-grid {
  align-items: center;
}

/* Remove o visual de slot vazio e garante que a imagem apareça inteira. */
.image-slot,
.social-proof__image,
.bonus-stack--banners .bonus-banner,
.catalog-image-card,
.card-image {
  aspect-ratio: auto !important;
  min-height: 0 !important;
  height: auto !important;
  overflow: hidden;
}

.image-slot::before,
.card-image::before,
.social-proof__image::before,
.bonus-stack--banners .bonus-banner::before {
  display: none !important;
}

.image-slot > img,
.catalog-image-card img,
.card-image img,
.social-proof__image img,
.bonus-stack--banners .bonus-banner img {
  position: relative !important;
  inset: auto !important;
  display: block;
  width: 100%;
  height: auto !important;
  max-width: 100%;
  object-fit: contain !important;
  opacity: 1 !important;
}

/* Some com placeholders/textos técnicos quando existir imagem. */
.image-slot__placeholder,
.image-slot > img + .image-slot__placeholder {
  display: none !important;
}

/* Hero mais limpo e centralizado. */
.image-slot--hero {
  width: min(100%, 520px);
  margin-inline: auto;
  border: 1px solid rgba(56,189,248,.26);
  border-radius: clamp(18px, 3vw, 28px);
  background: linear-gradient(145deg, rgba(7,21,29,.96), rgba(3,12,18,.98));
  box-shadow: var(--shadow);
}

/* Cards e blocos de imagem ficam proporcionais ao conteúdo real. */
.materials-grid,
.gallery-grid.gallery-grid--stacked,
.social-proof__grid,
.bonus-stack--banners {
  justify-items: center;
}

.material-card,
.catalog-image-card,
.social-proof__image,
.bonus-stack--banners .bonus-banner {
  width: 100%;
}

.catalog-image-card,
.bonus-stack--banners .bonus-banner,
.social-proof__image,
.card-image {
  background: #07151d;
}

.card-image {
  border-bottom: 1px solid rgba(255,255,255,.06);
}

.material-card {
  display: flex;
  flex-direction: column;
}

.material-card h3,
.material-card p {
  text-align: center;
}

.social-proof__image {
  border-radius: 22px;
}

.bonus-stack--banners .bonus-banner {
  border-radius: clamp(18px, 3vw, 28px);
}

@media (max-width: 719px) {
  .hero__copy,
  .hero__lead,
  .process-note,
  .gallery-note,
  .comparison-note,
  .social-proof__note,
  .site-footer p,
  .footer-grid nav {
    text-align: center;
  }

  .hero__lead,
  .gallery-note,
  .process-note,
  .comparison-note,
  .social-proof__note {
    margin-inline: auto;
  }

  .check-list,
  .bonus-box ul,
  .compare-card ul,
  .demo-list,
  .not-for ul {
    text-align: left;
  }
}

@media (min-width: 720px) {
  .hero__grid {
    align-items: center;
  }

  .faq-grid {
    grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
  }
}

/* =========================================================
   REFINO FINAL — IMAGENS SEM SLOTS, ALINHAMENTO E LEGIBILIDADE
   ========================================================= */

/* Neutraliza margens nativas de figure, causa principal dos recuos laterais. */
figure {
  margin: 0;
}

/* Barra superior sólida e nítida, sem efeito de vidro/blur. */
.topbar {
  width: min(calc(100% - 20px), 760px);
  margin: 10px auto 0;
  padding: 11px 8px;
  border: 1px solid rgba(56, 189, 248, .22);
  background: #081f29;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .22);
}

.topbar span {
  color: #f2f8fa;
  font-size: clamp(.62rem, 2.6vw, .82rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: 0;
  text-shadow: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.topbar i {
  background: rgba(255,255,255,.18);
}

/* Todas as mídias reais ocupam exatamente o próprio tamanho, sem slot, moldura ou faixa vazia. */
.hero-media,
.card-image,
.catalog-image-card,
.bonus-banner,
.social-proof__image {
  display: block;
  width: 100%;
  height: auto;
  min-height: 0;
  padding: 0;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible;
}

.hero-media img,
.card-image img,
.catalog-image-card img,
.bonus-banner img,
.social-proof__image img {
  position: static !important;
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto !important;
  margin: 0 auto;
  padding: 0;
  object-fit: contain !important;
  opacity: 1 !important;
  border: 0;
  border-radius: 0;
  background: transparent !important;
}

.hero-media {
  width: min(100%, 560px);
  margin-inline: auto;
}

/* Cards de entregáveis sem caixa sobrando ao redor da imagem. */
.material-card {
  width: 100%;
  padding: 0 0 18px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
  text-align: center;
}

.material-card h3,
.material-card p {
  width: 100%;
  max-width: 42ch;
  margin-inline: auto;
  padding-inline: 10px;
  text-align: center;
}

.material-card h3 {
  margin-top: 18px;
}

.materials-grid {
  align-items: start;
}

/* Imagens do catálogo e bônus: sem moldura externa e sem espaço superior/inferior. */
.gallery-grid.gallery-grid--stacked,
.bonus-stack--banners,
.social-proof__grid {
  align-items: start;
}

.catalog-image-card,
.bonus-banner,
.social-proof__image {
  line-height: 0;
}

/* Centralização consistente dos textos de abertura, CTAs e blocos finais. */
.section-head,
.section-head--left,
.bonus-showcase__head,
.social-proof__head,
.gallery-note,
.process-note,
.comparison-note,
.cta-final__inner,
.guarantee__inner {
  text-align: center;
}

.section-head,
.section-head--left,
.bonus-showcase__head,
.social-proof__head,
.gallery-note,
.process-note,
.comparison-note {
  margin-left: auto;
  margin-right: auto;
}

.btn--center,
.cta-final__inner .btn,
.mini-plans .btn,
.plan-card .btn {
  display: flex;
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center;
}

.guarantee__inner {
  justify-items: center;
}

.guarantee__inner > div:last-child {
  max-width: 680px;
  margin-inline: auto;
}

/* Comparação: ausência explicitada em vermelho. */
.comparison i,
.comparison .comparison-no {
  color: #ff6f75 !important;
  font-weight: 850;
}

@media (max-width: 719px) {
  .section > .container,
  .hero > .container {
    width: min(calc(100% - 24px), var(--container));
  }

  .hero__copy,
  .hero__lead,
  .guarantee__inner h2,
  .guarantee__inner p,
  .site-footer,
  .footer-grid nav {
    text-align: center;
  }

  .hero__lead {
    margin-inline: auto;
  }

  .hero__actions {
    justify-items: center;
  }

  .hero__actions .btn {
    width: min(100%, 430px);
  }

  .topbar {
    gap: 4px;
    padding-inline: 5px;
  }
}

/* Mantém a proporção original dos arquivos, sem letterbox ou recorte artificial. */
.hero-media img,
.card-image img,
.catalog-image-card img,
.bonus-banner img,
.social-proof__image img {
  aspect-ratio: auto !important;
}