:root {
  --navy: #0d192d;
  --blue: #2387cf;
  --green: #05c517;
  --text: #111827;
  --soft: #eeeeee;
  --white: #ffffff;
  --muted: #546173;
  --line: #dbe2e9;
  --shadow: 0 18px 40px rgb(13 25 45 / 12%);
  --shadow-sm: 0 6px 18px rgb(13 25 45 / 8%);
  --title-font: "Baloo 2", "Trebuchet MS", sans-serif;
  --body-font: Nunito, Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; overflow-x: hidden; color: var(--text); background: var(--white); font: 17px/1.55 var(--body-font); }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { font-family: var(--title-font); line-height: 1.08; letter-spacing: -.015em; }
h1 { font-size: clamp(2.2rem, 4.4vw, 3.3rem); }
h2 { font-size: clamp(1.9rem, 3.8vw, 2.8rem); }
h3 { font-size: 1.3rem; }
.section { padding: 72px 20px; }
.page-width { width: min(100%, 1120px); margin-inline: auto; }
.narrow-width { width: min(100%, 1120px); margin-inline: auto; }
.bonus-width { width: min(100%, 1120px); margin-inline: auto; }
.center { text-align: center; }
.dark { background: var(--navy); color: var(--white); }
.blue-title { color: var(--blue); }
.desktop-only { display: initial; }

/* O verde, o azul e o azul marinho seguem a identidade da página original. */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: min(100%, 440px);
  min-height: 60px;
  padding: 16px 28px;
  border-radius: 999px;
  background: var(--green);
  color: var(--white);
  box-shadow: 0 5px 0 #079714, 0 14px 28px rgb(5 197 23 / 22%);
  font: 800 1.05rem/1.2 var(--body-font);
  letter-spacing: .02em;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  transition: transform .15s ease, box-shadow .15s ease;
}
.button:hover { transform: translateY(-2px); box-shadow: 0 7px 0 #079714, 0 18px 32px rgb(5 197 23 / 26%); }
.button:active { transform: translateY(3px); box-shadow: 0 2px 0 #079714; }
.button:focus-visible, summary:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }

/* Hero em duas colunas, com o ritmo visual do template. */
.hero {
  padding-top: 46px;
  padding-bottom: 70px;
  background: radial-gradient(540px 260px at 0 0, rgb(35 135 207 / 12%), transparent 70%),
    radial-gradient(460px 290px at 100% 100%, rgb(5 197 23 / 9%), transparent 70%),
    #f6f7f9;
}
.hero-grid { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 56px; }
.hero-copy { grid-column: 1; grid-row: 1; }
.hero-visual { grid-column: 2; grid-row: 1; }
.hero-visual img { width: 100%; border-radius: 24px; background: var(--white); box-shadow: var(--shadow); }
.brand { width: min(100%, 260px); margin-bottom: 18px; mix-blend-mode: multiply; }
.hero h1 { max-width: 590px; margin-bottom: 16px; color: var(--blue); }
.hero p { max-width: 570px; margin-bottom: 12px; color: var(--muted); font-size: 1.05rem; }
.hero-button { display: flex; margin: 28px auto 0; }

/* Apresentação escura com imagem e texto lado a lado. */
.about { padding-top: 82px; padding-bottom: 82px; }
.about-grid { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 62px; }
.about-image { grid-column: 1; grid-row: 1; width: 100%; border-radius: 24px; box-shadow: 0 22px 42px rgb(0 0 0 / 25%); }
.about-copy { grid-column: 2; grid-row: 1; }
.about h2 { max-width: 500px; margin-bottom: 20px; color: var(--white); }
.about p { max-width: 570px; margin-bottom: 12px; color: #dbe4f0; }
.about .button { display: flex; margin: 30px auto 0; }

/* Conteúdo como cards arredondados. */
.curriculum { background: var(--soft); }
.curriculum h2 { margin: 0 auto 32px; text-align: center; }
.course-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.course-card { min-width: 0; padding: 14px 14px 24px; border: 1px solid var(--line); border-radius: 20px; background: var(--white); box-shadow: var(--shadow-sm); }
.course-card img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 14px; background: var(--soft); }
.course-card > div { padding: 20px 10px 0; }
.course-card h3 { margin-bottom: 9px; color: var(--navy); font-size: 1.25rem; }
.course-card p { margin-bottom: 0; color: var(--muted); font-size: .96rem; }
.curriculum .button { display: flex; margin: 36px auto 0; }

/* Vantagens em cartões, com a imagem original. */
.benefits-grid { display: grid; grid-template-columns: 1fr .92fr; align-items: center; gap: 56px; }
.benefits h2 { margin-bottom: 26px; }
.benefit-list { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 0; padding: 0; list-style: none; }
.benefit-list li { display: flex; align-items: flex-start; gap: 12px; min-height: 120px; padding: 20px; border: 1px solid var(--line); border-radius: 18px; background: var(--white); box-shadow: var(--shadow-sm); font-weight: 800; }
.benefit-list img { width: 28px; height: 28px; flex: none; object-fit: contain; }
.benefits-image { width: 100%; border-radius: 24px; box-shadow: var(--shadow); }

/* Os cinco bônus ficam em grade e terminam com o destaque original. */
.bonuses { padding-top: 90px; padding-bottom: 90px; }
.bonuses h2 { margin-bottom: 34px; color: var(--white); }
.bonus-list { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 20px; }
.bonus-card { display: flex; flex-direction: column; min-width: 0; grid-column: span 2; padding: 14px 14px 22px; border-radius: 20px; background: var(--white); color: var(--text); box-shadow: 0 14px 30px rgb(0 0 0 / 16%); }
.bonus-card:nth-child(4) { grid-column: 2 / span 2; }
.bonus-card:nth-child(5) { grid-column: 4 / span 2; }
.bonus-card img { order: -1; width: 100%; aspect-ratio: 1; object-fit: contain; border-radius: 14px; background: var(--soft); }
.bonus-copy { padding: 20px 7px 0; }
.bonus-label { display: inline-block; margin-bottom: 10px; padding: 4px 11px; border-radius: 999px; background: var(--blue); color: var(--white); font-size: .76rem; font-weight: 800; letter-spacing: .08em; }
.bonus-card h3 { margin-bottom: 9px; color: var(--blue); font-size: 1.25rem; }
.bonus-card p { margin-bottom: 12px; color: var(--muted); font-size: .96rem; }
.bonus-card p strong { color: var(--text); }
.bonus-price { padding-top: 8px; border-top: 1px dashed var(--line); }
.bonus-price s { color: #db202e; font-weight: 800; }
.bonus-card .bonus-price strong { margin-left: 10px; color: #10b816; font-weight: 900; }
.bonus-total { max-width: 730px; margin: 46px auto 0; }
.bonus-total h3 { margin-bottom: 12px; color: var(--white); font-size: clamp(1.8rem, 3.5vw, 2.6rem); }
.bonus-total p { margin-bottom: 24px; font-size: 1.3rem; }
.bonus-total strong { color: var(--green); }

/* Depoimentos da página original, em grade estática. */
.testimonials h2 { max-width: 820px; margin: 0 auto 34px; font-size: clamp(1.7rem, 3vw, 2.4rem); }
.testimonials h2 span { color: var(--blue); }
.testimonial-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 295px)); justify-content: center; align-items: start; gap: 24px; }
.testimonial-grid img { width: 100%; height: auto; border: 8px solid var(--white); border-radius: 20px; background: var(--soft); box-shadow: var(--shadow-sm); }

/* Oferta da v2. Variáveis locais preservam as cores das demais seções da v3. */
.offer {
  --navy: #0d2a3a;
  --cta: #0d754f;
  --cta-dark: #09543a;
  --yellow: #c39a5b;
  --mint-soft: #e8f0e9;
  --mint-ink: #0d754f;
  --cream: #f6f7f3;
  --ink: #213640;
  --muted: #52646b;
  --line: #e5ded2;
  --shadow: 0 18px 40px rgb(13 42 58 / 12%);
  position: relative;
  overflow: hidden;
  background: radial-gradient(500px 260px at 10% 0%, rgb(246 200 95 / 18%), transparent 70%),
    radial-gradient(500px 260px at 90% 100%, rgb(107 199 165 / 18%), transparent 70%),
    var(--navy);
}
.section.offer { padding: 64px 0; }
.offer .container { width: 100%; max-width: 1120px; margin: 0 auto; padding: 0 20px; }
.offer .offer-card { position: relative; max-width: 560px; margin: 0 auto; padding: 30px 22px 26px; border-radius: 28px; background: #fff; color: var(--ink); text-align: center; box-shadow: 0 30px 60px rgb(0 0 0 / 30%); }
.offer .offer-card .ribbon { position: absolute; top: -1px; left: 50%; transform: translateX(-50%); padding: 6px 18px; border-radius: 0 0 14px 14px; background: var(--yellow); color: var(--navy); font-size: .8rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.offer .stack-img { width: 100%; aspect-ratio: 1; margin-top: 24px; border-radius: 24px; background: var(--cream); box-shadow: var(--shadow); }
.offer .offer-card h2 { margin: 14px 0 .5em; color: var(--navy); font-size: clamp(1.6rem, 4.6vw, 2.2rem); }
.offer .stack-list { margin: 0; padding: 0; overflow: hidden; border: 2px dashed var(--line); border-radius: 22px; background: #fff; list-style: none; text-align: left; }
.offer .stack-list li { display: flex; align-items: center; gap: 14px; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.offer .stack-list li:last-child { border-bottom: 0; }
.offer .stack-list li > div { flex: 1; min-width: 0; text-align: left; }
.offer .stack-list .ic { display: grid; flex: none; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--mint-soft); color: var(--mint-ink); font-size: 1.25rem; }
.offer .stack-list li.main .ic { background: var(--navy); color: var(--yellow); }
.offer .stack-list b { display: block; color: var(--navy); line-height: 1.25; }
.offer .stack-list small { display: block; color: var(--muted); font-size: .88rem; line-height: 1.35; }
.offer .price-box { margin-bottom: 20px; padding-top: 18px; border-top: 2px dashed var(--line); }
.offer .price-label { color: var(--muted); font-size: .85rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.offer .price { display: flex; align-items: flex-start; justify-content: center; gap: 4px; margin: 6px 0 4px; color: var(--cta); font-family: var(--title-font); font-weight: 800; line-height: 1; }
.offer .price .cur { margin-top: .55em; font-size: 1.6rem; }
.offer .price .val { font-size: clamp(4rem, 16vw, 5.4rem); }
.offer .price-sub { color: var(--navy); font-weight: 800; }
.offer .icon { width: 1em; height: 1em; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.offer .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: 100%; max-width: 440px; min-height: 60px; padding: 16px 28px; border-radius: 999px; background: var(--cta); color: #fff; box-shadow: 0 5px 0 var(--cta-dark), 0 14px 28px rgb(13 42 58 / 24%); font: 800 1.15rem/1.2 var(--body-font); letter-spacing: .02em; text-align: center; text-decoration: none; text-transform: uppercase; transition: transform .15s ease, box-shadow .15s ease; }
.offer .btn:hover { transform: translateY(-2px); box-shadow: 0 7px 0 var(--cta-dark), 0 18px 32px rgb(13 42 58 / 30%); }
.offer .btn:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--cta-dark), 0 8px 16px rgb(13 42 58 / 22%); }
.offer .btn:focus-visible { outline: 3px solid var(--yellow); outline-offset: 3px; }
.offer .btn .icon { font-size: 1.25em; stroke-width: 2.4; }
.offer .secure { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 14px 0 0; color: var(--muted); font-size: .88rem; font-weight: 700; }
.offer .secure .icon { color: var(--mint-ink); }

/* Garantia e FAQ seguem as formas claras do template. */
.guarantee { width: min(100% - 40px, 900px); margin: 76px auto; padding: 38px; border: 1px solid var(--line); border-radius: 28px; background: var(--soft); text-align: center; }
.guarantee-heading { display: flex; align-items: center; justify-content: center; gap: 28px; margin-bottom: 14px; }
.guarantee-heading img { width: 170px; height: auto; flex: none; }
.guarantee h2 { margin: 0; color: var(--navy); text-align: left; }
.guarantee h3 { margin-bottom: 12px; color: var(--navy); font-size: 1.7rem; }
.guarantee p { max-width: 690px; margin: 0 auto; color: var(--muted); }
.faq { background: var(--soft); }
.faq-width { width: min(100%, 800px); margin: 0 auto; }
.faq h2 { margin-bottom: 34px; color: var(--navy); text-align: center; }
.faq-list { display: grid; gap: 12px; }
.faq details { padding: 0 20px; border: 1px solid var(--line); border-radius: 16px; background: var(--white); box-shadow: var(--shadow-sm); }
.faq summary { cursor: pointer; padding: 18px 0; color: var(--navy); font-weight: 800; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; float: right; margin-left: 10px; color: var(--blue); font-size: 1.3rem; line-height: 1; }
.faq details[open] summary::after { content: "−"; }
.faq p { margin: 0 0 18px; color: var(--muted); }
.footer { padding: 44px 0 110px; background: #091e2b; color: #c4d5e2; font-size: .88rem; }
.footer .container { width: 100%; max-width: 1120px; margin: 0 auto; padding: 0 20px; }
.footer .legal { margin-bottom: 22px; padding: 18px 20px; border: 1px solid rgb(255 255 255 / 14%); border-radius: 16px; }
.footer .legal h3 { margin-bottom: .5em; color: var(--white); font: 800 1rem var(--body-font); letter-spacing: .08em; text-transform: uppercase; }
.footer .legal p:last-child, .footer .copy { margin: 0; }
.footer .copy { opacity: .8; }

@media (max-width: 959px) {
  .hero-grid, .about-grid { gap: 30px; }
  .course-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .benefits-grid { grid-template-columns: 1fr; }
  .benefits-image { max-width: 560px; margin-inline: auto; }
  .bonus-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bonus-card, .bonus-card:nth-child(4), .bonus-card:nth-child(5) { grid-column: auto; }
  .bonus-card:nth-child(5) { grid-column: 1 / -1; width: min(100%, 440px); justify-self: center; }
}

@media (min-width: 960px) {
  .section.offer { padding: 96px 0; }
  .footer { padding-bottom: 44px; }
}

@media (min-width: 640px) {
  .offer .offer-card { padding: 40px 40px 32px; }
}

@media (max-width: 639px) {
  .desktop-only { display: none; }
  .section { padding: 58px 20px; }
  .hero { padding-top: 16px; }
  .hero-grid { display: flex; flex-direction: column; gap: 0; text-align: center; }
  .hero-copy { display: contents; }
  .hero-copy .brand { order: 1; }
  .hero-copy h1 { order: 2; }
  .hero-visual { order: 3; margin-bottom: 24px; }
  .hero-copy p { order: 4; }
  .brand { height: 64px; margin: 0 auto 4px; object-fit: cover; object-position: center; }
  .hero h1 { margin-bottom: 15px; }
  .hero p { font-size: 1rem; }
  .hero-button { margin-top: 26px; }
  .about-grid { display: flex; flex-direction: column; gap: 0; text-align: center; }
  .about-copy { display: contents; }
  .about-copy h2 { order: 1; }
  .about-image { order: 2; width: min(100%, 480px); margin-bottom: 26px; }
  .about-copy p { order: 3; margin-inline: auto; }
  .about h2 { margin-inline: auto; }
  .about .button { margin-top: 28px; }
  .benefits-grid { display: flex; flex-direction: column; gap: 0; }
  .benefits-grid > div { display: contents; }
  .benefits h2 { order: 1; margin-inline: auto; text-align: center; }
  .benefits-image { order: 2; margin-bottom: 26px; }
  .benefit-list { order: 3; }
  .course-list, .bonus-list { grid-template-columns: 1fr; }
  .course-card { max-width: 460px; margin-inline: auto; }
  .course-card img { background: transparent; }
  .course-card:first-child img { aspect-ratio: 525 / 449; }
  .course-card:nth-child(4) img { aspect-ratio: 525 / 368; }
  .benefit-list { grid-template-columns: 1fr; }
  .benefit-list li { min-height: 0; }
  .bonus-card, .bonus-card:nth-child(5) { width: min(100%, 460px); grid-column: auto; justify-self: center; }
  .bonus-card img { aspect-ratio: 5 / 4; height: auto; background: transparent; }
  .bonus-card:nth-child(2) img, .bonus-card:nth-child(4) img { aspect-ratio: 1; }
  .testimonial-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .guarantee { width: min(100% - 40px, 900px); margin: 56px auto; padding: 30px 22px; }
  .guarantee-heading { flex-direction: row; gap: 12px; }
  .guarantee-heading img { width: clamp(92px, 28vw, 120px); }
  .guarantee h2 { flex: none; min-width: 0; text-align: left; font-size: clamp(1.2rem, 5.2vw, 1.8rem); }
}

@media (max-width: 359px) {
  .section { padding-inline: 16px; }
  .button { padding-inline: 16px; font-size: .94rem; }
  .guarantee { width: calc(100% - 32px); }
  .guarantee-heading { gap: 8px; }
  .guarantee-heading img { width: 88px; }
  .guarantee h2 { font-size: 1.15rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .button { transition: none; }
}