:root {
  --wine: #a33d6f;
  --pink: #f95c77;
  --purple: #9a90c1;
  --guarantee: #f75e79;
  --dark: #3d3335;
  --content: 940px;
  --narrow: 680px;
}

* { box-sizing: border-box; }
body { margin: 0; color: var(--dark); background: #fff; font: 18px/1.42 Arial, Helvetica, sans-serif; }
img { display: block; max-width: 100%; height: auto; }
a { display: inline-block; line-height: 0; }
p, h1, h2, h3 { margin-top: 0; }
.container, .narrow-container { width: min(calc(100% - 40px), var(--content)); margin-inline: auto; }
.narrow-container { max-width: var(--narrow); }

.hero { min-height: 636px; color: #fff; background: var(--wine) url("assets/bg_vetor_video_docesfinos.webp") center top / cover no-repeat; }
.hero-inner { padding: 17px 0 22px; text-align: center; }
.hero h1 { max-width: 940px; margin: 0 auto 25px; font: 700 35px/38px Lato, Arial, sans-serif; letter-spacing: -1px; }
.hero h1 strong:first-child { font-weight: 700; }
.hero img { width: min(600px, 100%); margin-inline: auto; }

.opening-offer, .final-offer { background: #fff; text-align: center; }
.opening-offer { padding: 18px 0 28px; }
.offer-stack { display: flex; flex-direction: column; align-items: center; }
.limited { margin-bottom: 12px; color: #e42c56; font: 33px/38px Lato, Arial, sans-serif; letter-spacing: -1px; }
.countdown { display: flex; justify-content: center; gap: 8px; margin: 0 0 10px; }
.countdown div { display: grid; gap: 3px; min-width: 58px; }
.countdown span { padding: 7px 5px; color: #fff; background: #3b4a56; font: 700 38px/1 Lato, Arial, sans-serif; }
.countdown small { color: #4e5661; font: 13px/1.2 Lato, Arial, sans-serif; text-transform: uppercase; }
.green-cta { margin-top: 12px; }
.trust-icons { margin-top: 10px; }

.about { padding: 38px 0 30px; }
.about-grid { display: grid; grid-template-columns: 458px 1fr; gap: 22px; align-items: start; }
.about-copy { text-align: center; }
.about h2 { margin-bottom: 5px; color: var(--pink); font: 400 35px/1.1 Pacifico, cursive; }
.separator { width: 105px; margin: 0 auto 18px; }
.about p { margin-bottom: 14px; font-size: 16px; line-height: 1.42; }

.story { padding: 25px 0 30px; color: #222; background: var(--purple); text-align: center; }
.story h2 { margin-bottom: 28px; color: #2a3337; font: 700 36px/1.1 "Lobster Two", Georgia, serif; }
.story p { margin-bottom: 18px; font-family: Lato, Arial, sans-serif; }

.gallery { padding: 25px 0 0; }
.gallery h2 { margin: 0 auto 35px; color: var(--pink); font: 400 36px/1.1 "Lobster Two", Georgia, serif; text-align: center; }
.gallery-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 40px; }
.gallery-grid > div { display: grid; gap: 10px; align-content: start; }
.gallery-grid img { width: 100%; }

.bonus-intro { padding: 30px 0 15px; text-align: center; }
.bonus-intro p { max-width: 740px; margin: 0 auto 20px; font: 20px/1.4 Lato, Arial, sans-serif; }
.bonus-intro h2 { margin: 0; }
.bonus-intro h2 img { margin-inline: auto; }
.bonuses { padding: 0 0 18px; }
.bonus { display: grid; grid-template-columns: 276px 1fr; gap: 28px; align-items: center; min-height: 285px; }
.bonus > img { border-radius: 50%; }
.bonus p { margin-bottom: 8px; }
.bonus-number { color: #52465a; font: 700 18px/23px Cabin, Arial, sans-serif; }
.bonus h3 { margin: 0 0 8px; color: #ea2e59; font: 700 30px/1.05 Cabin, Arial, sans-serif; }
.bonus div > p:last-child { font-size: 17px; line-height: 1.38; }

.guarantee { padding: 15px 0; color: #4c3443; background: var(--guarantee); }
.guarantee-grid { display: grid; grid-template-columns: 230px 1fr; gap: 25px; align-items: center; }
.guarantee h2 { margin-bottom: 10px; font: 400 35px/1.1 "Lobster Two", Georgia, serif; text-align: center; }
.guarantee p { margin-bottom: 8px; font: 18px/20px Helvetica, Arial, sans-serif; letter-spacing: 1px; text-align: center; }

.certificate { padding: 27px 0 53px; background: #f3f1f2; text-align: center; }
.certificate h2 { margin-bottom: 17px; color: #4c3443; font: 400 44px/1.1 "Lobster Two", Georgia, serif; }
.certificate p { margin-bottom: 26px; color: #8bc34a; font: 42px/38px "Trebuchet MS", Arial, sans-serif; letter-spacing: -1px; }
.certificate img { width: min(600px, 100%); margin-inline: auto; }

.final-offer { padding: 20px 0 36px; }
.last-chance { margin-bottom: 22px; color: #e42c56; font: 700 35px/30px Lato, Arial, sans-serif; letter-spacing: -1px; }
.pink-cta { margin-top: 15px; }
.security { margin-top: 10px; }
footer { min-height: 138px; padding: 37px 20px 25px; color: #fff; background: var(--wine); text-align: center; }
footer p { margin: 0; font: 15px/27px Palatino, "Palatino Linotype", serif; }

@media (max-width: 900px) {
  .container, .narrow-container { width: min(calc(100% - 32px), var(--content)); }
  .hero { min-height: 0; }
  .hero h1 { font-size: 29px; line-height: 1.2; }
  .about-grid { grid-template-columns: minmax(270px, .9fr) 1.1fr; }
  .gallery-grid { gap: 18px; }
  .bonus h3 { font-size: 26px; }
  .certificate p { font-size: 34px; }
}

@media (max-width: 640px) {
  body { font-size: 16px; }
  .container, .narrow-container { width: min(calc(100% - 28px), var(--content)); }
  .hero-inner { padding-top: 18px; }
  .hero h1 { margin-bottom: 18px; font-size: 22px; line-height: 1.35; letter-spacing: 0; }
  .hero img { width: min(300px, 100%); }
  .limited { font-size: 26px; line-height: 1.25; }
  .countdown span { font-size: 30px; }
  .about-grid, .bonus, .guarantee-grid { grid-template-columns: 1fr; }
  .about-grid > img { width: min(300px, 100%); margin-inline: auto; }
  .about h2 { margin-top: 10px; }
  .about p { font-size: 16px; }
  .story h2 { font-size: 30px; }
  .gallery h2 { font-size: 30px; }
  .gallery-grid { grid-template-columns: 1fr; gap: 10px; }
  .gallery-grid > div { display: contents; }
  .gallery-grid > div:nth-child(1) img:nth-child(1) { order: 1; }
  .gallery-grid > div:nth-child(2) img:nth-child(1) { order: 2; }
  .gallery-grid > div:nth-child(1) img:nth-child(2) { order: 3; }
  .gallery-grid > div:nth-child(2) img:nth-child(2) { order: 4; }
  .gallery-grid > div:nth-child(1) img:nth-child(3) { order: 5; }
  .gallery-grid > div:nth-child(2) img:nth-child(3) { order: 6; }
  .gallery-grid > div:nth-child(1) img:nth-child(4) { order: 7; }
  .gallery-grid > div:nth-child(2) img:nth-child(4) { order: 8; }
  .bonus-intro p { font-size: 17px; }
  .bonus { gap: 15px; padding: 20px 0; text-align: left; }
  .bonus > img { width: min(240px, 80%); margin-inline: auto; }
  .bonus h3 { font-size: 24px; }
  .guarantee-grid > img { width: 190px; margin-inline: auto; }
  .guarantee h2 { font-size: 31px; }
  .guarantee p { font-size: 16px; line-height: 1.4; letter-spacing: 0; }
  .certificate h2 { font-size: 34px; }
  .certificate p { font-size: 26px; line-height: 1.15; }
  .last-chance { font-size: 25px; line-height: 1.25; letter-spacing: 0; }
}

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