@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;600;700;800;900&display=swap');

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: 'Open Sans', sans-serif;
  color: #292524;
  background: #fafaf9;
  -webkit-font-smoothing: antialiased;
  line-height: 1.6;
}

img { max-width: 100%; display: block; }
button { cursor: pointer; border: none; font-family: inherit; }

/* === BLOCO 1 === */
.bloco1 { background: #faf7f2; }
.top-bar { background: #dc2626; color: #fff; text-align: center; padding: 8px 16px; font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; }
.bloco1-inner { padding: 40px 20px 48px; max-width: 448px; margin: 0 auto; }
.bloco1 h1 { font-size: 1.875rem; font-weight: 800; color: #1c1917; line-height: 1.2; margin-bottom: 16px; text-align: center; }
.bloco1 h1 span { background-color: #FAB078; padding: 0 3px; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.bloco1 .subtitle { font-size: 1.125rem; color: #57534e; margin-bottom: 32px; font-weight: 500; line-height: 1.6; text-align: center; }
.video-container { margin-bottom: 32px; }
.video-container vturb-smartplayer { display: block; margin: 0 auto; width: 100%; max-width: 400px; }
.btn-green { width: 100%; background: #22c55e; color: #fff; font-weight: 700; font-size: 1.25rem; padding: 20px; border-radius: 12px; box-shadow: 0 4px 6px rgba(0,0,0,.1); border-bottom: 4px solid #15803d; text-transform: uppercase; letter-spacing: -0.025em; display: flex; align-items: center; justify-content: center; transition: none; }
.btn-green:active { transform: translateY(2px); border-bottom-width: 0; }

/* === BLOCO 2 & 5 - CAROUSEL === */
.bloco2 { background: #fffdf7; padding: 56px 0; overflow: hidden; border-top: 1px solid #ffedd5; border-bottom: 1px solid #ffedd5; }
.bloco5 { background: #f5f5f4; padding: 56px 0; overflow: hidden; border-top: 1px solid #e7e5e4; border-bottom: 1px solid #e7e5e4; }
.bloco2 h2, .bloco5 h2 { font-size: 1.5rem; font-weight: 700; text-align: center; color: #1c1917; line-height: 1.2; padding: 0 20px; max-width: 448px; margin: 0 auto 32px; }
.carousel-track { display: flex; overflow-x: hidden; cursor: grab; padding-bottom: 16px; user-select: none; touch-action: pan-x; }
.carousel-track:active { cursor: grabbing; }
.carousel-inner { display: flex; gap: 16px; padding: 0 16px; width: max-content; }
.carousel-card { flex: none; width: 314px; border-radius: 16px; overflow: hidden; box-shadow: 0 4px 6px rgba(0,0,0,.1); }
.carousel-card.square { width: 358px; }
.carousel-card img { width: 100%; aspect-ratio: 3/4; object-fit: cover; pointer-events: none; }
.carousel-card.square img { aspect-ratio: 1/1; }

/* === BLOCO 3 - BENEFÍCIOS === */
.bloco3 { background: #f0fdf4; padding: 56px 20px; }
.bloco3-inner { max-width: 448px; margin: 0 auto; }
.bloco3 h2 { font-size: 1.5rem; font-weight: 700; text-align: center; color: #14532d; margin-bottom: 40px; line-height: 1.2; }
.benefits-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
.benefit-card { background: #fff; padding: 24px; border-radius: 16px; box-shadow: 0 1px 2px rgba(0,0,0,.05); border: 1px solid #dcfce7; }
.benefit-card .emoji { font-size: 2.25rem; margin-bottom: 12px; }
.benefit-card h3 { font-weight: 700; font-size: 1.125rem; margin-bottom: 8px; color: #1c1917; }
.benefit-card p { color: #57534e; line-height: 1.6; }

/* === BLOCO 4 - IDEAL PARA === */
.bloco4 { background: #fff7ed; padding: 56px 20px; }
.bloco4-inner { max-width: 448px; margin: 0 auto; }
.bloco4 h2 { font-size: 1.5rem; font-weight: 700; text-align: center; color: #431407; margin-bottom: 32px; line-height: 1.2; }
.ideal-box { background: #fff; padding: 24px; border-radius: 16px; box-shadow: 0 1px 2px rgba(0,0,0,.05); border: 1px solid #ffedd5; display: flex; flex-direction: column; gap: 16px; }
.ideal-item { display: flex; align-items: flex-start; gap: 12px; }
.ideal-item svg { width: 24px; height: 24px; flex-shrink: 0; margin-top: 2px; color: #22c55e; }
.ideal-item span { color: #44403c; font-weight: 500; line-height: 1.6; }

/* === BLOCO 6 - O QUE RECEBE === */
.bloco6 { background: #fefce8; padding: 56px 20px; }
.bloco6-inner { max-width: 448px; margin: 0 auto; }
.bloco6 h2 { font-size: 1.5rem; font-weight: 700; text-align: center; color: #713f12; margin-bottom: 24px; line-height: 1.2; }
.product-mockup { aspect-ratio: 1/1; width: 100%; max-width: 320px; margin: 0 auto 32px; border-radius: 16px; overflow: hidden; box-shadow: 0 20px 25px rgba(0,0,0,.15); }
.product-mockup img { width: 100%; height: 100%; object-fit: cover; }
.receive-list { display: flex; flex-direction: column; gap: 16px; }
.receive-card { background: #fff; padding: 20px; border-radius: 16px; box-shadow: 0 1px 2px rgba(0,0,0,.05); border: 1px solid #fde68a; display: flex; gap: 16px; }
.receive-card .emoji { font-size: 1.875rem; flex-shrink: 0; }
.receive-card h3 { font-weight: 700; color: #1c1917; margin-bottom: 4px; }
.receive-card p { font-size: 0.875rem; color: #57534e; line-height: 1.6; }

/* === BLOCO 7 - BÔNUS === */
.bloco7 { background: #fff1f2; padding: 56px 20px; }
.bloco7-inner { max-width: 448px; margin: 0 auto; }
.bloco7 h2 { font-size: 1.5rem; font-weight: 700; text-align: center; color: #4c0519; margin-bottom: 32px; line-height: 1.2; }
.bonus-list { display: flex; flex-direction: column; gap: 24px; }
.bonus-card { background: #fff; border-radius: 16px; overflow: hidden; box-shadow: 0 4px 6px rgba(0,0,0,.1); border: 1px solid #ffe4e6; }
.bonus-card img { width: 100%; aspect-ratio: 2/1; object-fit: cover; }
.bonus-card-body { padding: 20px; }
.bonus-tag { color: #f43f5e; font-weight: 700; font-size: 0.875rem; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 4px; }
.bonus-card h3 { font-weight: 700; font-size: 1.125rem; color: #0c0a09; margin-bottom: 8px; }
.bonus-card p { color: #57534e; font-size: 0.875rem; line-height: 1.6; }

/* === BLOCO 8 - OFERTA === */
.bloco8 { background: #064e3b; padding: 64px 20px; color: #fff; }
.bloco8-inner { max-width: 448px; margin: 0 auto; }
.bloco8 > .bloco8-inner > h2 { font-size: 1.875rem; font-weight: 700; text-align: center; margin-bottom: 40px; line-height: 1.2; }
.offer-cards { display: flex; flex-direction: column; gap: 32px; }

/* Pacote Básico */
.offer-basic { background: #fff; border-radius: 16px; padding: 24px; box-shadow: 0 20px 25px rgba(0,0,0,.15); border: 1px solid #e7e5e4; position: relative; }
.offer-basic h3 { font-size: 1.25rem; font-weight: 700; color: #0c0a09; text-align: center; margin-bottom: 16px; }
.offer-list { list-style: none; display: flex; flex-direction: column; gap: 12px; margin-bottom: 24px; }
.offer-list li { display: flex; gap: 8px; color: #44403c; font-weight: 500; align-items: center; }
.offer-list li svg { width: 20px; height: 20px; flex-shrink: 0; }
.price-block { text-align: center; margin-bottom: 24px; }
.price-from { font-size: 0.875rem; font-weight: 500; color: #78716c; }
.price-from span { text-decoration: line-through; }
.price-value { font-size: 2.7rem; font-weight: 900; color: #22c55e; line-height: 1; }
.atencao-block { margin-top: 20px; text-align: center; color: #dc2626; }
.atencao-block p { font-size: 0.875rem; font-weight: 600; line-height: 1.4; }
.atencao-arrows { display: flex; flex-direction: column; align-items: center; margin-top: 12px; gap: 0; }
.atencao-arrows span { color: #dc2626; font-size: 2rem; font-weight: 900; line-height: 0.75; transform: rotate(90deg); display: block; }

/* Pacote Completo */
.offer-complete { background: #fff; color: #0c0a09; border-radius: 16px; padding: 24px; box-shadow: 0 25px 50px rgba(0,0,0,.25); position: relative; border: 4px solid #22c55e; transform: scale(1.05); }
.offer-badge { position: absolute; top: -16px; left: 50%; transform: translateX(-50%); background: #22c55e; color: #fff; font-weight: 700; font-size: 0.75rem; padding: 4px 16px; border-radius: 999px; text-transform: uppercase; letter-spacing: 0.1em; white-space: nowrap; }
.offer-complete h3 { font-size: 1.5rem; font-weight: 900; text-align: center; margin-bottom: 24px; }
.offer-complete .offer-list li { color: #0c0a09; }
.offer-divider { height: 1px; background: #e7e5e4; margin: 16px 0; width: 100%; }
.price-value-big { font-size: 3.25rem; font-weight: 900; color: #22c55e; line-height: 1; letter-spacing: -0.025em; }
.btn-green-shadow { width: 100%; background: #22c55e; color: #fff; font-weight: 700; font-size: 1.125rem; padding: 20px; border-radius: 12px; box-shadow: 0 4px 0 0 #15803d; text-transform: uppercase; letter-spacing: -0.025em; display: flex; align-items: center; justify-content: center; transition: none; }
.btn-green-shadow:active { box-shadow: 0 0 0 0 #15803d; transform: translateY(2px); }

/* === BLOCO 9 - GARANTIA === */
.bloco9 { background: #f0fdf4; padding: 64px 20px; }
.bloco9-inner { max-width: 448px; margin: 0 auto; text-align: center; }
.guarantee-img { width: 176px; height: 176px; margin: 0 auto 24px; }
.guarantee-img img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 4px 6px rgba(0,0,0,.1)); }
.bloco9 h2 { font-size: 1.875rem; font-weight: 800; color: #052e16; margin-bottom: 16px; line-height: 1.2; }
.bloco9 .subtitle { font-size: 1.25rem; font-weight: 500; color: #166534; margin-bottom: 32px; }
.guarantee-box { background: #fff; padding: 24px; border-radius: 16px; box-shadow: 0 1px 2px rgba(0,0,0,.05); border: 1px solid #bbf7d0; text-align: left; color: #44403c; line-height: 1.6; font-weight: 500; }
.guarantee-box .highlight { font-weight: 700; color: #0c0a09; display: block; margin-top: 8px; }

/* === BLOCO 10 - FAQ === */
.bloco10 { background: #fff; padding: 64px 20px; }
.bloco10-inner { max-width: 448px; margin: 0 auto; }
.bloco10 h2 { font-size: 1.5rem; font-weight: 700; text-align: center; color: #0c0a09; margin-bottom: 32px; }
.faq-list { display: flex; flex-direction: column; gap: 12px; }
.faq-item { border: 1px solid #e7e5e4; border-radius: 12px; background: #fafaf9; overflow: hidden; }
.faq-item.open { background: #fff; border-color: #bbf7d0; }
.faq-question { width: 100%; background: none; padding: 16px; text-align: left; font-weight: 700; color: #1c1917; font-size: 1rem; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.faq-question::after { content: ''; width: 10px; height: 10px; border-right: 2px solid #78716c; border-bottom: 2px solid #78716c; transform: rotate(45deg); flex-shrink: 0; transition: transform 0.2s; }
.faq-item.open .faq-question::after { transform: rotate(-135deg); }
.faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; }
.faq-answer-inner { padding: 0 16px 16px; color: #57534e; line-height: 1.6; }

/* === BLOCO 11 - RODAPÉ === */
.footer { background: #0c0a09; color: #78716c; padding: 40px 20px; font-size: 0.75rem; text-align: center; line-height: 1.6; border-top: 4px solid #22c55e; }
.footer-inner { max-width: 448px; margin: 0 auto; }

/* === MODAL === */
.modal-overlay { display: none; position: fixed; inset: 0; z-index: 50; align-items: center; justify-content: center; padding: 16px 16px 24px; background: rgba(0,0,0,0.65); }
.modal-overlay.active { display: flex; }
.modal { background: #fff; border-radius: 16px; width: 100%; max-width: 384px; overflow-y: auto; box-shadow: 0 25px 50px rgba(0,0,0,.25); max-height: 90dvh; }
.modal-header { padding: 24px 24px 16px; text-align: center; border-bottom: 1px solid #f5f5f4; }
.modal-header p:first-child { color: #dc2626; font-weight: 800; font-size: 1.25rem; text-transform: uppercase; letter-spacing: 0.05em; line-height: 1.2; }
.modal-header p:last-child { color: #78716c; font-size: 0.875rem; margin-top: 4px; }
.modal-pricing { padding: 20px 24px 16px; text-align: center; }
.modal-pricing .old-price { color: #a8a29e; font-size: 1rem; font-weight: 600; text-decoration: line-through; }
.modal-pricing .new-price { color: #22c55e; font-weight: 900; font-size: 3rem; line-height: 1; margin-top: 2px; }
.modal-pricing .save-badge { display: inline-block; margin-top: 12px; background: #22c55e; color: #fff; font-size: 0.75rem; font-weight: 700; padding: 6px 16px; border-radius: 999px; text-transform: uppercase; letter-spacing: 0.1em; }
.modal-content { margin: 0 16px 16px; border: 1px solid #e7e5e4; border-radius: 12px; padding: 16px; }
.modal-content .main-item { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; }
.modal-content .main-item svg { width: 20px; height: 20px; color: #22c55e; flex-shrink: 0; }
.modal-content .main-item span { font-weight: 700; color: #0c0a09; font-size: 0.875rem; }
.modal-bonus-title { color: #22c55e; font-weight: 800; font-size: 0.875rem; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 12px; }
.modal-bonus-item { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.modal-bonus-item .left { display: flex; align-items: flex-start; gap: 6px; min-width: 0; }
.modal-bonus-item .left span:first-child { font-size: 1rem; flex-shrink: 0; }
.modal-bonus-item .left span:last-child { color: #44403c; font-size: 0.875rem; line-height: 1.4; }
.modal-bonus-item .price { color: #ef4444; font-size: 0.875rem; font-weight: 600; text-decoration: line-through; white-space: nowrap; flex-shrink: 0; }
.modal-buttons { padding: 0 16px 24px; display: flex; flex-direction: column; gap: 12px; }
.btn-modal-primary { width: 100%; background: #22c55e; color: #fff; font-weight: 700; font-size: 1rem; padding: 16px; border-radius: 12px; box-shadow: 0 4px 0 0 #15803d; text-transform: uppercase; letter-spacing: -0.025em; transition: none; }
.btn-modal-primary:active { box-shadow: none; transform: translateY(2px); }
.btn-modal-secondary { width: 100%; background: #fff; color: #22c55e; font-weight: 700; font-size: 0.875rem; padding: 14px; border-radius: 12px; border: 2px solid #22c55e; text-transform: uppercase; letter-spacing: -0.025em; transition: none; }

/* SVG icon colors */
.icon-green { color: #22c55e; }
.icon-gray { color: #a8a29e; }

@media (min-width: 768px) {
  .benefits-grid { grid-template-columns: 1fr 1fr; }
}