@font-face { font-family: Inter; font-style: normal; font-weight: 100 900; font-display: swap; src: url(../assets/inter-latin.woff2) format('woff2'); }
* { box-sizing: border-box; }
:root { color: #09090b; background: #fff; font-family: Inter, Arial, Helvetica, sans-serif; }
button, .cta { font-family: inherit; }
html, body { margin: 0; min-height: 100%; background: #fff; }
body { overflow-x: hidden; }
#app { min-height: calc(100vh - 42px); display: flex; justify-content: center; }
.screen { width: 100%; min-height: calc(100vh - 42px); display: flex; justify-content: center; padding: 36px 16px 40px; animation: enter .36s cubic-bezier(.22,.61,.36,1) both; }
.content { width: min(100%, 320px); text-align: center; display: flex; flex-direction: column; align-items: center; }
.eyebrow { display: inline-block; margin: 4px 0 5px; padding: 1px 3px; color: #fff; background: #16a34a; font-size: 14px; line-height: 1.05; font-weight: 800; text-transform: uppercase; }
h1 { margin: 0 0 21px; font-size: 18px; line-height: 1.11; font-weight: 800; }
h1 span { display: block; }
.screen:first-child h1 { color: #168d45; text-decoration: underline; }
.screen:first-child .eyebrow { color: #09090b; background: transparent; font-size: 19px; }
.intro { max-width: 310px; margin: 0 0 21px; font-size: 16px; line-height: 1.1; font-weight: 800; }
.highlight { max-width: 315px; margin: 0 0 13px; color: #159746; font-size: 16px; line-height: 1.08; font-weight: 800; }
.hero-image { display: block; width: 100%; height: auto; border-radius: 14px; }
.hero-image + .cta { margin-top: 18px; }
.screen.steps:first-child h1 { margin-bottom: 18px; color: #09090b; font-size: 18px; line-height: 1.2; font-weight: 600; text-decoration: none; }
.screen.steps h1 b { font-weight: 900; }
.screen.steps .green { color: #16a34a; }
.screen.steps .red { color: #dc2626; }
.screen.steps .body-copy { margin: 20px 0 22px; font-size: 14px; line-height: 1.35; font-weight: 400; }
.screen.steps .body-copy b { font-weight: 700; }
.screen.steps .cta { font-size: 13px; }
.screen.passo:first-child h1 { font-weight: 700; line-height: 1.15; }
.screen.passo:first-child .eyebrow { margin: 0 0 4px; padding: 1px 3px; color: #fff; background: #16a34a; font-size: 13px; }
.screen.ring:first-child h1 { margin-bottom: 10px; }
.screen.ring h1 b { font-weight: 800; }
.screen.ring h1 u { font-weight: 800; }
.screen.ring .body-copy.sub { margin: 0 0 14px; }
.screen.ring .hero-image + .cta { margin-top: 30px; box-shadow: 0 0 0 5px #b9e6c8, 0 3px 0 #0e9542; }
.screen.p3:first-child .eyebrow { margin: 0; font-size: 15px; }
.screen.p3:first-child h1 { margin-bottom: 14px; font-size: 15px; font-weight: 600; line-height: 1.15; }
.screen.p3 h1 span + span { margin-top: 10px; }
.screen.p3 h1 b.green { font-weight: 700; }
.screen.p3 .body-copy { width: 100%; max-width: none; margin: 6px 0; padding: 12px 14px; border: 1px solid #d8dce8; border-radius: 12px; background: #e9ecf3; color: #dc2626; font-size: 13px; line-height: 1.3; font-weight: 700; }
.screen.bonus:first-child .eyebrow { margin: 0 0 6px; font-size: 12px; font-weight: 700; }
.screen.bonus:first-child h1 { margin-bottom: 20px; font-size: 15px; font-weight: 600; line-height: 1.2; }
.screen.bonus h1 b.red { font-weight: 800; }
.screen.bonus .bullets { margin: 14px 0 12px; }
.screen.bonus .bullets p { margin: 0 0 10px; font-size: 12px; font-weight: 600; }
.screen.mapa h1 b.green { font-weight: 800; }
.screen.mapa .body-copy { margin: 16px 0 20px; font-size: 12px; font-weight: 700; }
.screen.mapa .cta { box-shadow: 0 0 0 5px #f3f8f5, 0 3px 0 #0e9542; }
.screen.audience:first-child { padding-top: 36px; }
.screen.audience:first-child h1 { margin-bottom: 14px; color: #09090b; font-size: 15px; line-height: 1.2; font-weight: 800; text-decoration: none; }
.screen.audience h1 .green { color: #16a34a; }
.screen.audience .hero-image { width: 80%; border-radius: 0; }
.screen.audience .hero-image + .cta { margin-top: 44px; font-size: 13px; }
.screen.red:first-child { padding-top: 36px; }
.screen.red:first-child h1 { margin-bottom: 16px; color: #09090b; font-size: 19px; line-height: 1.15; font-weight: 700; text-decoration: none; }
.screen.red .hero-image + .cta { margin-top: 6px; background: #ff2a3c; box-shadow: 0 4px 0 #e8102a; font-size: 13px; }
.caption { margin: 31px 0 20px; font-size: 16px; line-height: 1.1; font-weight: 800; }
.hint { margin: 0 0 15px; color: #159746; font-size: 15px; line-height: 1.1; font-weight: 800; text-decoration: underline; }
.body-copy { max-width: 315px; margin: 12px 0 13px; font-size: 15px; line-height: 1.12; font-weight: 700; }
.body-copy span { display: block; }
.cta { display: flex; width: 100%; min-height: 50px; align-items: center; justify-content: center; border: 0; border-radius: 16px; padding: 13px 16px; color: #fff; background: #17a34a; font-size: 12px; line-height: 1.15; font-weight: 700; text-decoration: none; cursor: pointer; box-shadow: 0 3px 0 #0e9542; transition: transform .15s ease, background .15s ease; }
.cta:hover { background: #2eac5c; }
.cta:active { transform: scale(.985); }
.screen:nth-child(2) { padding-top: 77px; }
.screen:nth-child(2) h1 { margin-bottom: 17px; }
.screen:nth-child(2) .cta { background: #ff1f36; box-shadow: 0 3px 0 #c91a2b; }
.screen:nth-child(3), .screen:nth-child(4), .screen:nth-child(5), .screen:nth-child(6), .screen:nth-child(7), .screen:nth-child(8) { padding-top: 98px; }
.screen:nth-child(4) h1 span:last-child { color: #cf2525; }
.screen:nth-child(5) h1 span:nth-child(2), .screen:nth-child(6) h1 span:last-child { color: #159746; }
.screen:nth-child(6) .body-copy { padding: 10px; border-radius: 12px; background: #f1f5f9; color: #cf2525; }
.screen:nth-child(8) .body-copy { font-weight: 800; }
.bullets { width: 100%; margin: 8px 0 14px; }
.bullets p { margin: 0 0 8px; font-size: 14px; font-weight: 800; text-decoration: underline; }
.audience { padding-top: 95px; }
.audience h1 { color: #168d45; }
.audience-list { width: 100%; margin: 0 0 15px; }
.audience-card { margin: 7px 0; padding: 10px 12px; border-radius: 12px; color: #cf2525; background: #f8e5e5; font-size: 14px; line-height: 1.08; font-weight: 800; text-align: left; }
.audience-card.positive { color: #09090b; background: #e7f2e0; }
.community { padding-top: 95px; }
.community .body-copy { line-height: 1.3; }
.community .body-copy span:first-child { font-weight: 800; }
.community { padding-top: 16px; }
.screen.community:first-child h1 { width: 100%; margin: 0; padding: 14px 16px; border-radius: 12px; color: #fff; text-decoration: none; background: #35c95e; font-size: 15px; line-height: 1.2; text-align: left; }
.community h1 span + span { margin-top: 8px; }
.community .hero-image { border-radius: 0; }
.community .body-copy { max-width: none; margin: 4px 0 14px; font-weight: 400; }
.community .body-copy span { margin-bottom: 10px; font-size: 13px; }
.community .body-copy span:nth-child(1), .community .body-copy span:nth-child(2) { font-size: 15px; line-height: 1.2; font-weight: 800; }
.community .body-copy span:nth-child(1) { margin-bottom: 0; }
.community .body-copy span:last-child { margin-bottom: 0; font-weight: 700; }
.community .cta { font-size: 13px; box-shadow: 0 0 0 5px #b9e6c8, 0 3px 0 #0e9542; }
.offer { width: 100%; padding: 36px 16px 55px; animation: enter .36s cubic-bezier(.22,.61,.36,1) both; }
.offer-content { width: min(100%, 320px); margin: 0 auto; text-align: center; }
.offer h1 { margin: 0; font-size: 18px; line-height: 1.16; }
.offer h1.blue { color: #2563eb; }
.offer h1:last-of-type { margin: 10px 0 18px; color: #168d45; text-decoration: underline; }
.offer img { display: block; width: 100%; height: auto; margin: 11px 0; border-radius: 14px; }
.offer .old-price { margin-top: 3px; color: #dc2626; font-size: 22px; font-weight: 800; text-decoration: line-through; }
.offer .only-price { font-size: 12px; font-weight: 800; }
.offer .current-price { color: #65a30d; font-size: 30px; font-weight: 800; line-height: 1.05; }
.offer .installments { margin: 4px 0 12px; font-size: 12px; font-weight: 800; }
.offer .notice { margin: 14px 0 5px; padding: 8px; border: 1px solid #ffeac7; border-radius: 14px; color: #cf9600; background: #fff6e6; font-size: 11px; font-weight: 800; }
.offer .label { display: inline-block; margin: 16px 0 4px; padding: 1px 3px; color: #fff; background: #16a34a; font-size: 14px; font-weight: 800; }
.offer h2 { margin: 9px 0; font-size: 17px; line-height: 1.14; }
.offer h2 u { color: #168d45; }
.offer .red-text, .offer .choice strong { color: #dc2626; }
.offer .green-text { color: #16a34a; }
.offer h2.red-text, .offer h2.green-text { font-weight: 900; }
.cta { position: relative; animation: pulsar 1.4s ease-in-out infinite; }
.cta::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; animation: onda 1.4s ease-out infinite; }
.screen.red .cta { --onda: 255, 42, 60; }
@keyframes onda { 0% { box-shadow: 0 0 0 0 rgba(var(--onda, 23, 163, 74), .4); } 100% { box-shadow: 0 0 0 11px rgba(var(--onda, 23, 163, 74), 0); } }
@keyframes pulsar { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.03); } }
@media (prefers-reduced-motion: reduce) { .cta, .cta::after { animation: none; } }
.offer .choice { margin: 10px 0; font-size: 15px; line-height: 1.2; text-align: left; }
.offer .choice + .choice strong { color: #16a34a; }
.offer .safe { margin-top: 25px; font-size: 13px; font-weight: 800; }
.site-footer { height: 42px; display: flex; align-items: center; justify-content: center; gap: 3px; color: #777; font-size: 10px; }
.site-footer a { color: #777; }
@keyframes enter { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
#app.saindo { opacity: 0; transition: opacity .15s ease; }
@media (prefers-reduced-motion: reduce) { .screen, .offer { animation: none; } }
@media (min-width: 700px) { .screen { padding-top: 42px; } .content, .offer-content { width: 320px; } }