:root {
  --black: #000509;
  --white: #edf5f9;
  --cyan: #00d9ff;
  --teal: #0d5468;
}

body { background: var(--black); color: var(--white); }
button, input, select { font-family: inherit; }
a:focus-visible, button:focus-visible { outline: 3px solid var(--cyan); outline-offset: 5px; }
button:disabled { opacity: .55; cursor: default; }

/* Optical weight calibrated against the Figma render: the web font's 800/900
   closes the gaps between dots at these sizes. Set weight in each font declaration
   too, since the font shorthand resets variation settings. */
.hero__claim, .topbar__badge, .topbar__timer-value, .section-eyebrow,
.faq__label, .modal__eyebrow, .module-num, .pc-eyebrow {
  font-variation-settings: "ROND" 0;
  font-synthesis: none;
}

/* New desktop artwork from Figma 1722:2641, cover / top center. */
.hero { position: relative; overflow: hidden; min-height: min(100svh, 890px); background: var(--black); }
.hero__art { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.hero__art img { position: absolute; width: 100%; height: 100%; left: 0; top: 0; object-fit: cover; object-position: center top; }
.hero__body { position: relative; max-width: 1126px; margin: auto; padding: clamp(40px, calc(100svh - 745px), 154.7666px) 0 40px; display: grid; grid-template-columns: 398px 1fr; gap: 80px; }
.hero__text { width: 398px; }
.black-logo { position: relative; display: block; width: 166.075px; height: 82.8111px; }
.black-logo__word { position: absolute; left: 1.75px; top: 0; }
.black-logo__hex { position: absolute; left: 0; top: 55.5244px; }
.black-logo img, img.black-logo__word, img.black-logo__hex { max-width: none; width: auto; height: auto; object-fit: initial; }
.hero__logo { margin-left: 2.6814px; }
.hero__title { margin-top: 44.4223px; font-size: 72px; line-height: .88; font-weight: 800; letter-spacing: -.03em; text-transform: uppercase; color: var(--white); }
.hero__claim { margin: 17.92px 0 0 2px; width: 378px; font-family: 'Doto', monospace; font-size: 26px; font-weight: 600; line-height: 1.1; text-transform: uppercase; color: var(--cyan); }
.hero__desc { margin-top: 13.8px; font-size: 18px; font-weight: 500; line-height: 23px; letter-spacing: -.02em; color: var(--white); }
.purchase-cta { border: 0; cursor: pointer; flex-shrink: 0; font-weight: 400; text-transform: none; white-space: nowrap; width: 261px; height: 43px; padding: 0 9.64px 0 18px; border-radius: 14.967px; display: flex; justify-content: space-between; align-items: center; background: var(--cyan); color: var(--black); font-size: 20px; line-height: 1.166; letter-spacing: -.03em; transition: background .2s; }
.purchase-cta strong { font-weight: 700; }
.purchase-cta:hover { background: var(--white); }
.purchase-cta img { flex: none; }
.hero__cta { margin-top: 19px; }

.topbar { position: relative; z-index: 1; background: rgb(0 217 255 / 14%); }
.topbar__inner { max-width: 1126px; min-height: 50px; margin: auto; display: flex; align-items: center; justify-content: space-between; gap: 30px; }
.topbar__badge { font-family: 'Doto', monospace; font-weight: 600; font-size: 17px; line-height: 1.1; text-transform: uppercase; color: var(--cyan); white-space: nowrap; }
.topbar__text { font-size: 15px; font-weight: 400; letter-spacing: -.02em; line-height: 1.25; text-align: center; }
.topbar__text a { color: inherit; }
.topbar__right { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.topbar__timer-label { font-size: 13px; font-weight: 700; letter-spacing: -.02em; text-transform: uppercase; white-space: nowrap; }
.topbar__timer-value { font: 600 20px/1.1 'Doto', monospace; color: var(--cyan); white-space: nowrap; font-variant-numeric: tabular-nums; }

/* The same typographic rhythm and restrained Black palette below the hero. */
.wrap { max-width: 1174px; }
.section-eyebrow { font: 600 14px/1.3 'Doto', monospace; text-transform: uppercase; color: var(--cyan); letter-spacing: .04em; margin-bottom: 18px; }
.section-title { font-size: clamp(36px, 4.2vw, 64px); font-weight: 800; line-height: .98; letter-spacing: -.035em; margin-bottom: 40px; color: var(--white); }
.cursos { background: var(--black); padding: 88px 0; }
.cursos .section-title span { color: var(--white); }
.cursos__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.course-card { min-width: 0; max-width: none; height: 580px; padding: 0 28px 28px; border: 1px solid rgb(237 245 249 / 12%); border-radius: 16px; }
.course-card__bg { border-radius: 0; }
.course-card__grad { background: linear-gradient(180deg, transparent 10%, rgb(0 5 9 / 50%) 35%, #06131b 68%); }
.course-card__content { gap: 16px; }
.course-card__title { font-size: 22px; font-weight: 600; line-height: 1.16; letter-spacing: -.025em; }
.course-card__desc { font-size: 15px; line-height: 1.4; color: #c4d5de; }
.course-card .btn--outline { border: 1px solid rgb(0 217 255 / 35%); background: transparent; color: var(--white); font-size: 14px; font-weight: 500; text-transform: none; border-radius: 10px; height: 42px; margin-top: 6px; }
.course-card .btn--outline:hover { border-color: var(--cyan); opacity: 1; background: transparent; }

.bonus { background: #06131b; padding: 88px 0; border-block: 1px solid rgb(237 245 249 / 8%); }
.bonus__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin-bottom: 36px; }
.bonus-card { display: flex; flex-direction: column; align-items: stretch; gap: 20px; padding: 18px; background: transparent; border: 1px solid rgb(237 245 249 / 14%); border-radius: 14px; }
.bonus-card__img { width: 100%; height: auto; aspect-ratio: auto; border-radius: 8px; object-fit: contain; }
.bonus-card__title { font-size: 21px; font-weight: 600; line-height: 1.12; letter-spacing: -.025em; color: var(--white); margin-bottom: 12px; }
.bonus-card__desc { font-size: 15px; line-height: 1.45; color: #b9ced8; }

.pricing { background: var(--black); padding: 96px 24px; scroll-margin-top: 24px; }
.pricing-card { scroll-margin-top: 12px; display: flex; flex-direction: column; align-items: center; gap: 20px; width: 100%; max-width: 500px; padding: 56px 48px; background: #06131b; border: 0; border-radius: 20px; }
.pricing-logo { margin-bottom: 4px; }
.pricing__list { align-items: center; gap: 8px; }
.pricing__list li { align-items: center; font-size: 15px; line-height: 1.3; color: var(--white); gap: 10px; }
.offer-check { width: 14px; height: 8px; border-left: 2px solid var(--cyan); border-bottom: 2px solid var(--cyan); transform: rotate(-45deg); flex: 0 0 14px; margin-top: -4px; }
.offer-plus { font: 400 22px/20px 'Google Sans Flex', sans-serif; color: var(--cyan); flex: 0 0 14px; }
.pricing__from { color: #b9ced8; font-size: 16px; }
.pricing__from s { color: var(--cyan); font-weight: 600; }
.pricing__from s::after { background: var(--white); }
.pricing__price { margin-top: -12px; }
.pricing__price-row { align-items: center; gap: 6px; }
.pricing__installments { font-size: 22px; color: #b9ced8; }
.pricing__currency { font-size: 26px; font-weight: 700; color: var(--white); }
.pricing__value { font-size: 86px; font-weight: 900; line-height: .9; color: var(--white); }
.pricing__cash { color: var(--white); font-size: 16px; margin-top: 4px; }
.pricing__access { font-size: 14px; color: #b9ced8; }
.pricing__recurrent { margin-top: -4px; font-size: 13px; line-height: 1.5; }
.pricing__recurrent .recurrent-link { background: transparent; border: 0; color: #b9ced8; font-size: inherit; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--teal); }
.pricing__recurrent .recurrent-link:hover { color: var(--white); }
.pricing__deadline, .checkout-status { font-size: 12px; line-height: 1.4; text-align: center; color: #91aab8; margin-top: 0; }
.checkout-status { color: var(--cyan); margin-top: 0; }
.checkout-status:empty { display: none; }

.garantia { background: #0a202b; padding: 64px 24px; }
.garantia__inner { max-width: 960px; flex-direction: row; align-items: center; gap: 72px; }
.guarantee-seal { display: block; width: 300px; height: auto; max-width: 100%; flex: 0 0 300px; object-fit: contain; }
.garantia__title { font-size: clamp(30px, 3vw, 44px); font-weight: 700; line-height: 1.06; letter-spacing: -.03em; }
.garantia__body { font-size: 17px; line-height: 1.5; max-width: 540px; }

.sobre { background: var(--black); padding: 96px 24px; }
.sobre__inner { max-width: 1126px; gap: 64px; align-items: flex-start; }
.sobre__photo { max-width: 430px; border-radius: 14px; }
.sobre__title { font-size: clamp(32px, 3.5vw, 48px); font-weight: 700; line-height: 1.04; letter-spacing: -.03em; }
.sobre__body { font-size: 16px; line-height: 1.55; }
.faq { background: var(--black); padding: 80px 24px 96px; }
.faq__label, .modal__eyebrow, .module-num, .pc-eyebrow { font-family: 'Doto', monospace; font-weight: 600; }
.faq__label { font-size: 14px; letter-spacing: .04em; margin-bottom: 18px; }
.faq__title { font-size: clamp(32px, 3.5vw, 48px); letter-spacing: -.03em; margin-bottom: 32px; }
.faq__question.is-open .faq__toggle { color: var(--black); border: 0; }
.footer { height: 112px; background: #000; border-top: 1px solid rgb(237 245 249 / 8%); }
.footer__wordmark { width: 83.0375px; height: 41.4055px; }
.footer__wordmark .black-logo { transform: scale(.5); transform-origin: top left; }
.pc-modal { border: 1px solid #172832; }
.pc-input, .pc-country { border: 1px solid #14232c; }
.pc-input:focus, .pc-country:focus { border-color: #397083; }
.pc-modal > .black-logo { margin-bottom: 24px; }
.pc-subtitle, .pc-label, .pc-security { color: #a8c2cf; }
.pc-input::placeholder { color: #7e9aa9; }
.pc-close { color: #a8c2cf; }
.pc-submit { width: 261px; max-width: 100%; align-self: center; height: 43px; margin-top: 6px; }
.wa-float { width: 46px; height: 46px; background: transparent; border: 1px solid var(--teal); box-shadow: none; animation: none; }
.wa-float:hover { background: transparent; box-shadow: none; }
.wa-float__icon { width: 27px; height: 27px; }
.wa-float__icon path:nth-child(1), .wa-float__icon path:nth-child(3) { fill: var(--cyan); }
.wa-float__icon path:nth-child(2) { fill: var(--black); }

@media (min-width: 768px) and (max-width: 1200px) {
  .hero__body, .topbar__inner { margin-inline: 40px; }
  .topbar__inner { gap: 20px; min-height: 70px; }
  .topbar__text { max-width: 330px; }


}
@media (min-width: 768px) and (max-width: 950px) {
  .topbar__inner { flex-wrap: wrap; justify-content: center; padding: 14px 0; gap: 10px 25px; }
  .topbar__text { order: 3; max-width: none; width: 100%; }
  .hero__art img { object-position: 58% top; }
  .hero__art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgb(0 5 9 / 55%), transparent 80%); }
}
@media (max-width: 767px) {
  .hero { min-height: 0; }
  .hero__art { min-width: 440px; height: max(956px, 217.2727vw); }
  .hero__art img { width: 183.35%; height: 102.27%; left: -34.5%; top: -2.91%; }
  .hero__art::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to bottom, rgb(0 5 9 / 0) 39.854%, var(--black) 96.444%); }
  .topbar__badge { display: none; }
  .topbar__inner { height: auto; min-height: 0; padding: 12px 16px; flex-direction: column; justify-content: center; gap: 8px; }
  .topbar__text { width: 297px; max-width: 100%; line-height: 20px; }
  .topbar__right { gap: 8px; }
  .hero__body { display: block; margin: 0 auto; max-width: 500px; padding: clamp(20px, 5svh, 48px) 21px 28px; }
  .hero__text { width: 100%; }
  .hero__logo { margin-left: 2px; width: 164.336px; height: 81.9438px; }
  .hero__logo .black-logo__word { left: 1.73px; }
  .hero__logo .black-logo__hex { top: 54.9438px; }
  .hero__title { width: 294px; max-width: 100%; margin-top: clamp(24px, 6svh, 64px); font-size: clamp(42px, 11.8182vw, 52px); line-height: .88; }
  .hero__claim { margin: 12.72px 9px 0; width: min(348px, calc(100% - 18px)); font-size: clamp(18px, 5.4545vw, 24px); }
  .hero__desc { margin: 11.2px 9px 0; font-size: 18px; line-height: 23px; }
  .hero__cta { margin: 17px 0 0 9px; }
  .garantia__inner, .sobre__inner { flex-direction: column; }
  .garantia__img, .sobre__photo { max-width: 400px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }
}

@media (max-width: 1050px) {
  .bonus__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .course-card { padding: 0 22px 24px; height: 610px; }
  .sobre__photo { max-width: 36%; }
  .sobre__inner { gap: 40px; }
}
@media (max-width: 767px) {
  .cursos, .bonus { padding: 64px 0; }
  .section-title { margin-bottom: 32px; }
  .cursos__grid { grid-template-columns: 1fr; max-width: 440px; margin: auto; gap: 24px; }
  .course-card { width: 100%; height: 560px; padding: 0 28px 28px; }
  .bonus__grid { grid-template-columns: 1fr; }
  .bonus-card { max-width: 440px; width: 100%; margin-inline: auto; padding: 20px; }
  .pricing-card { padding: 40px 24px; }
  .pricing__list { align-items: flex-start; }
  .pricing { padding: 64px 20px; }
  .garantia { padding: 48px 30px; }
  .garantia__inner { gap: 32px; align-items: flex-start; }
  .guarantee-seal { width: 260px; height: auto; flex-basis: auto; align-self: center; }
  .garantia__title { font-size: 34px; }
  .garantia__body { font-size: 16px; }
  .sobre { padding: 64px 30px; }
  .sobre__photo { max-width: 100%; width: 100%; }
  .sobre__photo img { max-height: 440px; object-position: center 30%; }
  .sobre__inner { gap: 36px; }
  .faq { padding: 64px 30px; }
}
@media (max-width: 380px) {
  .purchase-cta { max-width: 100%; }
}

@media (max-width: 767px) and (max-height: 740px) {
  .hero__body { padding-top: 20px; padding-bottom: 20px; }
  .hero__title { margin-top: 28px; }
  .hero__desc { font-size: 16px; line-height: 21px; }
}

/* Keep both purchase buttons visible on compact phone screens. */
@media (max-width: 767px) and (max-height: 620px) {
  .topbar__inner { padding-block: 8px; }
  .hero__body { padding-top: 12px; }
  .hero__title { margin-top: 12px; font-size: 40px; }
  .hero__claim { margin-top: 8px; }
  .hero__desc { line-height: 20px; }
  .hero__cta { margin-top: 12px; max-width: calc(100% - 32px); }
  .pricing-card .purchase-cta { max-width: 100%; }
  .wa-float { width: 36px; height: 36px; right: 8px; bottom: max(8px, env(safe-area-inset-bottom)); }
  .wa-float__icon { width: 23px; height: 23px; }
  .pricing-card { padding: 24px; gap: 12px; }
  .pricing-logo { height: 66px; }
  .pricing-logo .black-logo { transform: scale(.8); transform-origin: center top; }
  .pricing__list { gap: 6px; }
  .pricing__list li { font-size: 14px; line-height: 1.25; }
  .pricing__value { font-size: 74px; }
}