:root {
  --wine: #a33d6f;
  --turquoise: #64c6c5;
  --rose: #c62f55;
  --guarantee: #f75e79;
  --heading: #d84b63;
  --deep-purple: #52465a;
  --copy: #3d3335;
  --content: 940px;
  --narrow: 680px;
}

* { box-sizing: border-box; }
html { scroll-behavior: auto; }
body {
  margin: 0;
  color: var(--copy);
  background: #fff;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 18px;
  line-height: 1.42;
}
img, iframe { display: block; max-width: 100%; }
img { height: auto; }
a { display: inline-block; }
.container, .narrow-container { width: min(calc(100% - 40px), var(--content)); margin-inline: auto; }
.narrow-container { max-width: var(--narrow); }
h1, h2, h3, p { margin-top: 0; }
h2 {
  margin-bottom: 0;
  color: var(--heading);
  font-family: "Lobster Two", Georgia, serif;
  font-size: 35px;
  line-height: 1.1;
  text-align: center;
}

.hero {
  min-height: 660px;
  color: #fff;
  background: var(--wine) url("assets/bg_vetor_video_docesfinos-2.webp") center top / cover no-repeat;
}
.hero-inner { padding: 14px 0 24px; text-align: center; }
.hero h1 {
  max-width: 940px;
  margin: 0 auto 17px;
  color: #fff;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 25px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0;
}
.video-frame {
  overflow: hidden;
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #1d1d1d;
  border: 6px solid #fff;
}
.video-frame iframe { width: 100%; height: 100%; border: 0; }
.video-facade {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #1d1d1d;
}
.video-facade img { width: 100%; height: 100%; object-fit: cover; }
.video-facade::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgb(0 0 0 / 10%);
}
.video-play {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 76px;
  height: 54px;
  border-radius: 12px;
  background: #f00;
  box-shadow: 0 2px 10px rgb(0 0 0 / 35%);
  translate: -50% -50%;
}
.video-play::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 52%;
  border-top: 11px solid transparent;
  border-bottom: 11px solid transparent;
  border-left: 18px solid #fff;
  translate: -50% -50%;
}
.video-facade:hover .video-play { background: #c00; }
.video-facade:focus-visible { outline: 4px solid #ffdb3d; outline-offset: -4px; }
.video-frame--hero { max-width: 853px; margin: 0 auto 25px; }
.hero-subtitle {
  margin: 0;
  color: #fff;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 18px;
  font-weight: 700;
  font-style: normal;
  line-height: 1.5;
  letter-spacing: 0;
}

.gallery-section { padding-top: 25px; }
.gallery-section h2 { margin-bottom: 40px; }
.gallery-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 40px; }
.gallery-column { display: grid; gap: 8px; align-content: start; }
.gallery-column img { width: 100%; height: auto; aspect-ratio: 450 / 271; object-fit: cover; }

.offer { padding: 25px 0 28px; text-align: center; background: #fff; }
.offer-inner { display: flex; flex-direction: column; align-items: center; }
.offer a { line-height: 0; }
.offer-cta { margin-top: 20px; }

.learning { padding: 18px 0 32px; background: var(--turquoise); color: #111; }
.learning h2 { margin-bottom: 32px; color: #161616; font-size: 39px; }
.learning p, .learning li { font-family: Lato, Arial, sans-serif; }
.learning p { margin-bottom: 18px; }
.check-list, .recipes ul { margin: 0 0 20px; padding: 0; list-style: none; }
.check-list li::before { content: "✔"; margin-right: 7px; }
.recipes p { margin-bottom: 6px; }
.recipes li::before { content: "- "; }

.about { padding: 40px 0 11px; }
.two-column { display: grid; grid-template-columns: 458px 1fr; gap: 22px; align-items: start; }
.about h2 { color: #4c3443; font-size: 44px; text-align: left; }
.separator { width: 105px; margin: 10px 0 22px; }
.about-copy p { margin-bottom: 18px; font-size: 18px; line-height: 1.5; }

.certificate { padding: 26px 0 37px; background: #f3f1f2; text-align: center; }
.certificate h2 { margin-bottom: 12px; color: #4c3443; font-size: 44px; }
.certificate p { margin-bottom: 17px; color: #25802d; font-family: Lato, Arial, sans-serif; font-size: 28px; font-weight: 700; }
.certificate img { margin: 0 auto; }

.student-videos { padding: 22px 0 25px; color: #fff; background: var(--rose); text-align: center; }
.student-videos h2 { margin-bottom: 22px; color: #fff; font-size: 33px; }
.video-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.video-grid .video-frame { border: 0; }
.student-videos h3 {
  max-width: 900px;
  margin: 25px auto 0;
  color: #fff;
  font-family: Lato, Arial, sans-serif;
  font-size: 24px;
  line-height: 1.25;
}

.testimonials { padding: 40px 0 10px; }
.testimonials-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 40px; align-items: start; }
.testimonials-grid > div { display: grid; gap: 20px; align-items: start; }
.testimonials img { width: 100%; }

.offer--middle { padding-top: 25px; }
.payment-note { margin: 5px 0 14px; font-family: Lato, Arial, sans-serif; font-size: 17px; font-weight: 700; }
.trust-icons { margin-top: 0; }

.bonuses { padding: 15px 0 32px; }
.bonus-kicker { margin-bottom: 4px; color: var(--deep-purple); font-family: Lato, Arial, sans-serif; font-size: 22px; line-height: 1.2; text-align: center; }
.bonus-kicker strong { font-size: 30px; }
.bonuses h2 { margin-bottom: 32px; }
.bonuses h2 img { margin-inline: auto; }
.bonus-item { display: grid; grid-template-columns: 220px 1fr; gap: 30px; align-items: start; margin-bottom: 28px; }
.bonus-item > img { border-radius: 50%; }
.bonus-item p { margin-bottom: 12px; }
.bonus-number { color: var(--deep-purple); font: 700 18px/23px Lato, Arial, sans-serif; }
.bonus-item h3 { margin: 0 0 8px; color: #d51f49; font: 700 30px/35px Lato, Arial, sans-serif; }

.guarantee { padding: 15px 0; color: #2d1b26; background: var(--guarantee); }
.guarantee-grid { display: grid; grid-template-columns: 202px 1fr; gap: 28px; align-items: center; }
.guarantee h2 { margin-bottom: 12px; color: #2d1b26; font-size: 44px; }
.guarantee p { margin-bottom: 12px; font: 18px/20px Helvetica, Arial, sans-serif; letter-spacing: 1px; text-align: center; }

.offer--final { padding: 20px 0 40px; }
.last-chance { margin-bottom: 8px; color: #e42c56; font: 700 30px/35px Lato, Arial, sans-serif; text-align: center; }
.pink-cta { margin-top: 20px; }
.security-seals { margin-top: 2px; }

footer { padding: 37px 20px 35px; color: #fff; background: var(--wine); text-align: center; }
footer p { margin: 0; font-family: Palatino, "Palatino Linotype", serif; font-size: 15px; line-height: 27px; }

@media (max-width: 900px) {
  .container, .narrow-container { width: min(calc(100% - 32px), var(--content)); }
  .hero { min-height: 0; }
  .hero h1 { font-size: 23px; line-height: 1.3; }
  .gallery-grid { gap: 0 16px; }
  .two-column { grid-template-columns: minmax(260px, .9fr) 1.1fr; }
  .about h2, .certificate h2, .guarantee h2 { font-size: 38px; }
  .bonus-item h3 { font-size: 27px; line-height: 1.18; }
}

@media (max-width: 640px) {
  body { font-size: 16px; line-height: 1.45; }
  .container, .narrow-container { width: min(calc(100% - 28px), var(--content)); }
  h2 { font-size: 29px; }
  .hero { background-image: none; }
  .hero-inner { padding-top: 14px; }
  .hero h1 { font-size: 20px; line-height: 1.35; }
  .video-frame { border-width: 3px; }
  .video-play { width: 64px; height: 46px; border-radius: 10px; }
  .hero-subtitle { font-size: 16px; line-height: 1.5; }
  .gallery-section { padding-top: 22px; }
  .gallery-section h2 { margin-bottom: 24px; }
  .gallery-grid { grid-template-columns: 1fr; gap: 8px; }
  .gallery-column { display: contents; }
  .gallery-column:nth-child(1) img:nth-child(1) { order: 1; }
  .gallery-column:nth-child(2) img:nth-child(1) { order: 2; }
  .gallery-column:nth-child(1) img:nth-child(2) { order: 3; }
  .gallery-column:nth-child(2) img:nth-child(2) { order: 4; }
  .gallery-column:nth-child(1) img:nth-child(3) { order: 5; }
  .gallery-column:nth-child(2) img:nth-child(3) { order: 6; }
  .gallery-column:nth-child(1) img:nth-child(4) { order: 7; }
  .gallery-column:nth-child(2) img:nth-child(4) { order: 8; }
  .offer { padding-block: 18px; }
  .offer-cta, .pink-cta { margin-top: 10px; }
  .learning { padding-block: 22px; }
  .learning h2 { margin-bottom: 22px; font-size: 32px; }
  .two-column, .video-grid, .testimonials-grid, .bonus-item, .guarantee-grid { grid-template-columns: 1fr; }
  .about { padding-top: 24px; }
  .about .two-column > div:first-child { max-width: 420px; margin-inline: auto; }
  .about h2 { margin-top: 8px; font-size: 38px; text-align: center; }
  .separator { margin-inline: auto; }
  .certificate { padding-block: 24px; }
  .certificate h2 { font-size: 34px; }
  .certificate p { font-size: 22px; }
  .student-videos h2 { font-size: 29px; }
  .video-grid { gap: 14px; }
  .student-videos h3 { font-size: 20px; }
  .testimonials { padding-top: 24px; }
  .testimonials-grid { gap: 20px; }
  .bonus-kicker { font-size: 17px; }
  .bonus-kicker strong { font-size: 22px; }
  .bonus-item { gap: 15px; margin-bottom: 34px; }
  .bonus-item > img { width: 180px; margin-inline: auto; }
  .bonus-number { margin-bottom: 4px; }
  .bonus-item h3 { font-size: 24px; line-height: 1.2; }
  .guarantee { padding-block: 22px; }
  .guarantee-grid > img { width: 160px; margin-inline: auto; }
  .guarantee h2 { font-size: 34px; }
  .guarantee p { font-size: 16px; line-height: 1.35; letter-spacing: 0; }
  .last-chance { font-size: 23px; line-height: 1.25; }
  .payment-note { font-size: 14px; }
  footer { padding-block: 28px; }
}

@media (max-width: 380px) {
  .container, .narrow-container { width: min(calc(100% - 20px), var(--content)); }
  .hero h1 { font-size: 18px; }
  .learning h2, .certificate h2, .guarantee h2 { font-size: 29px; }
}
