@import url('./tokens.css');
@font-face{
font-family:'Open Sans Local';
src:url('/public/fonts/body-regular.ttf') format('truetype');
font-weight:400;
font-display:swap}
@font-face{
font-family:'Open Sans Local';
src:url('/public/fonts/body-bold.ttf') format('truetype');
font-weight:700;
font-display:swap}
@font-face{
font-family:'Editorial Serif';
src:url('/public/fonts/display-bold.ttf') format('truetype');
font-weight:700;
font-display:swap}
*,*::before,*::after{
box-sizing:border-box}
html{
scroll-behavior:smooth;
scroll-padding-top:24px}
body{
margin:0;
color:var(--text);
background:var(--cream);
font:16px/1.65 var(--body-font);
-webkit-font-smoothing:antialiased}
button,a,summary{
-webkit-tap-highlight-color:transparent}
button{
font:inherit}
button,a{
touch-action:manipulation}
button{
cursor:pointer}
a{
color:inherit;
text-underline-offset:4px}
p,h1,h2,h3,h4{
margin-top:0}
p{
margin-bottom:1.2rem}
h1,h2,h3{
font-family:var(--display-font);
font-weight:700;
line-height:1.12;
letter-spacing:-.025em;
text-wrap:balance}
h2{
font-size:clamp(2.2rem,3.8vw,3.5rem);
margin-bottom:28px}
h3{
font-size:1.8rem}
h4{
line-height:1.4}
em{
font-style:normal;
color:var(--gold)}
img{
display:block;
max-width:100%;
height:auto}
svg{
width:24px;
height:24px;
fill:none;
stroke:currentColor;
stroke-width:1.5;
stroke-linecap:round;
stroke-linejoin:round;
flex-shrink:0}
.svg-library{
position:absolute;
width:0;
height:0;
overflow:hidden}
.container{
width:min(1120px,calc(100% - 64px));
margin-inline:auto}
.section{
padding-block:110px}
.dark{
color:var(--cream);
background:var(--green)}
.light{
background:var(--cream)}
.dot{
color:var(--gold-dark)}
.eyebrow{
display:flex;
align-items:center;
gap:14px;
color:var(--gold-dark);
font-size:10px;
font-weight:700;
letter-spacing:.25em;
margin-bottom:22px}
.eyebrow::before{
content:'';
width:30px;
height:1px;
background:currentColor}
.dark .eyebrow{
color:var(--gold)}
.button{
display:inline-flex;
align-items:center;
justify-content:center;
gap:24px;
min-height:60px;
padding:18px 32px;
color:#fff;
background:linear-gradient(115deg,#2d7e53,#205a3e);
border:1px solid #4b986b;
border-radius:5px;
font-size:12px;
font-weight:700;
letter-spacing:.03em;
text-decoration:none;
transition:background .2s,transform .2s,box-shadow .2s}
.button svg{
width:20px;
height:20px}
.button:hover{
background:#34845a;
transform:translateY(-2px);
box-shadow:0 8px 24px #0002}
.button:active{
transform:translateY(0)}
.button-deep{
background:linear-gradient(#234e38,#123222);
border-color:#49714d}
.brand{
font-size:10px;
letter-spacing:.3em;
font-weight:700;
color:#c5c8ad}
.photo-section{
position:relative;
isolation:isolate;
overflow:hidden}
.photo-section::before{
content:'';
position:absolute;
inset:0;
z-index:-2;
background:url('/public/images/stadium-bg.webp') center/cover no-repeat}
.photo-section::after{
content:'';
position:absolute;
inset:0;
z-index:-1;
background:linear-gradient(90deg,#091d17ef,#0a2019cc)}
/* Topo: título, vídeo e chamada para a oferta. */
.hero{
padding:30px 0 80px;
min-height:890px}
.hero::before{
filter:blur(3px);
transform:scale(1.03)}
.hero::after{
background:linear-gradient(#0b2019dd,#0c221ac9 45%,#0c221af5)}
.hero>.brand{
margin-left:46px}
.hero-content{
text-align:center;
padding-top:46px}
.hero h1{
font-size:clamp(2.7rem,4.6vw,4.6rem);
max-width:1000px;
margin:0 auto 45px;
line-height:1.07}
.video-poster{
position:relative;
display:block;
width:min(850px,100%);
aspect-ratio:16/9;
overflow:hidden;
padding:0;
border:1px solid #8e855747;
border-radius:7px;
margin:0 auto 34px;
background:#14281f;
box-shadow:0 22px 60px #0005}
.video-poster>img{
width:100%;
height:100%;
object-fit:cover;
object-position:center 47%;
filter:brightness(.55)}
.video-poster:hover>img{
filter:brightness(.7)}
.play{
position:absolute;
inset:0;
display:grid;
place-items:center;
margin:auto;
width:84px;
height:84px;
border:2px solid #f2eee1bd;
border-radius:50%;
background:#eae7dc15;
transition:transform .2s}
.play svg{
width:38px;
height:38px;
fill:var(--cream);
stroke:none;
margin-left:4px}
.video-poster:hover .play{
transform:scale(1.06)}
.video-caption{
position:absolute;
bottom:23px;
left:28px;
right:28px;
display:flex;
justify-content:space-between;
color:#e1dfcf;
font-size:9px;
letter-spacing:.2em}
.video-track{
position:absolute;
bottom:0;
left:0;
width:100%;
height:3px;
background:#ffffff26}
.video-track::before{
content:'';
display:block;
width:21%;
height:100%;
background:var(--gold)}
.gold-rule{
display:block;
width:45px;
height:2px;
background:var(--gold);
margin:20px auto 0}
/* Quatro situações seguindo a referência fornecida. */
.pains{
position:relative;
padding:48px 0 42px;
text-align:center;
overflow:hidden}
.pains h2{
font-family:var(--body-font);
font-size:clamp(1.6rem,2.2vw,2rem);
letter-spacing:-.035em;
margin-bottom:28px}
.pain-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:14px}
.pain-grid article{
display:flex;
align-items:flex-start;
gap:14px;
padding:25px 17px;
background:#fbf8f04d;
border:1px solid #ded5bd;
border-radius:14px;
text-align:left}
.pain-grid p{
font-size:13px;
line-height:1.6;
margin:0}
.pain-grid strong{
font-weight:400}
.pain-icon{
width:50px;
height:50px;
border-radius:50%;
display:grid;
place-items:center;
flex-shrink:0;
background:linear-gradient(135deg,#e0bf58,#bc8e23);
color:var(--green);
box-shadow:inset 0 0 0 3px #fff2}
.pain-icon svg{
width:32px;
height:32px;
stroke-width:2}
.pain-icon.error{
color:#fff;
background:#ac302b}
.pain-conclusion{
font-size:clamp(1rem,1.7vw,1.5rem);
font-weight:700;
line-height:1.4;
margin:25px 0 20px}
.pains .button{
min-height:52px;
padding:13px 30px}
.tactic-marks{
position:absolute;
inset:0;
pointer-events:none;
opacity:.14}
.tactic-marks>svg{
width:100%;
height:100%;
stroke:var(--green);
stroke-width:2;
stroke-dasharray:8 8}
.tactic-marks circle{
stroke-dasharray:none}
.pains .container{
position:relative}
/* Livro e conteúdo. */
.book-section{
padding:85px 0 0}
.book-section::before{
background-position:center 55%}
.book-section::after{
background:linear-gradient(90deg,#081c16f5 0%,#091c17dc 60%,#0a211a66)}
.book-layout{
display:grid;
grid-template-columns:1.8fr 1fr;
gap:55px;
align-items:start}
.book-copy h2{
font-size:clamp(2.3rem,3.6vw,3.4rem);
margin-bottom:24px}
.book-copy h2 em{
color:inherit}
.lead{
font-size:17px;
line-height:1.55}
.book-facts{
font-size:13px;
color:#d1d4c6;
line-height:1.6}
.learning-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:0;
margin:35px 0 45px}
.learning-grid article{
display:flex;
gap:15px;
padding:24px 16px 24px 0;
border-bottom:1px solid #c5c6a921}
.learning-grid article:nth-child(even){
border-left:1px solid #c5c6a921;
padding-left:20px}
.learning-grid article:nth-last-child(-n+2){
border-bottom:0}
.learning-grid svg{
color:#c3a75a;
width:32px;
height:32px;
margin-top:5px}
.learning-grid h3{
font:700 12px/1.45 var(--body-font);
letter-spacing:0;
color:#d0b46e;
margin:0 0 6px}
.learning-grid p{
font-size:11px;
color:#ccd1c3;
line-height:1.6;
margin:0}
.book-stage{
perspective:1100px;
padding:20px 25px 30px 0;
display:flex;
justify-content:center;
align-self:center}
.book-3d{
position:relative;
width:290px;
transform:rotateY(-19deg) rotateZ(-4deg);
transform-style:preserve-3d;
box-shadow:18px 30px 40px #0007}
.book-3d img{
position:relative;
z-index:2;
width:100%;
border:1px solid #8d905352}
.book-3d::before{
content:'';
position:absolute;
top:4px;
left:100%;
width:32px;
height:calc(100% - 3px);
transform:rotateY(65deg);
transform-origin:left;
background:repeating-linear-gradient(90deg,#d4d4be 0 1px,#f1edda 1px 3px);
border:4px solid #153124;
border-left:0}
.spreads{
max-width:1400px;
width:100%;
margin:10px auto 0}
.spreads img{
width:100%;
height:auto;
max-height:285px;
object-fit:cover}
.book-section blockquote{
margin:0;
padding:30px 32px;
background:linear-gradient(90deg,#e8e3d2,#e1dcc5e8);
font:italic 17px/1.5 var(--display-font);
text-align:center;
color:#34503d}
.audience.section{
padding-block:65px}
.audience-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:55px}
.audience-grid>div+div{
border-left:1px solid #bdbda9;
padding-left:55px}
.audience h2{
display:flex;
align-items:center;
gap:14px;
font-family:var(--body-font);
font-size:21px;
letter-spacing:-.02em}
.round-icon{
display:grid;
place-items:center;
width:31px;
height:31px;
border-radius:50%;
background:var(--green);
color:var(--cream);
flex-shrink:0}
.round-icon svg{
width:21px;
height:21px}
.check-list{
list-style:none;
margin:0;
padding:0}
.check-list li{
position:relative;
padding-left:25px;
margin-bottom:10px;
font-size:13px;
color:var(--muted)}
.check-list li::before{
content:'✓';
position:absolute;
left:0;
color:#477250;
font-weight:700}
.negative li::before{
color:#8a634c}
.author::after{
background:linear-gradient(90deg,#0a211acf,#0a2019f5)}
.author-layout{
display:grid;
grid-template-columns:1.05fr 1fr;
gap:70px;
align-items:center}
.author h2{
margin-bottom:24px}
.author-copy p:not(.eyebrow){
font-size:13px;
line-height:1.7;
color:#e1e1d4;
margin-bottom:16px}
.author-copy strong{
color:#fff}
.photo-collage{
height:550px;
position:relative}
.photo-collage img{
position:absolute;
object-fit:cover;
border:5px solid #f0eddf;
box-shadow:5px 15px 25px #0005}
.photo-main{
width:53%;
height:76%;
top:35px;
left:0;
transform:rotate(-7deg);
z-index:2}
.photo-team{
width:50%;
height:31%;
top:0;
right:0;
transform:rotate(5deg)}
.photo-trophy{
width:44%;
height:40%;
top:165px;
right:-6px;
transform:rotate(-3deg);
z-index:3;
object-position:center 35%}
.photo-stadium{
width:34%;
height:29%;
bottom:0;
left:29%;
transform:rotate(-5deg);
z-index:4}
.photo-court{
width:34%;
height:29%;
right:0;
bottom:0;
transform:rotate(6deg);
z-index:4}
/* Oferta seguindo o PNG completo. */
.offer h2{
margin-bottom:50px}
.main-product{
display:grid;
grid-template-columns:35% 1fr;
align-items:center;
gap:38px;
position:relative;
overflow:hidden;
padding:45px 55px;
background:#ece7d9;
border:1px solid #e0dac8;
border-radius:13px;
margin-bottom:80px}
.main-product::after{
content:'';
position:absolute;
right:-130px;
top:-180px;
width:390px;
height:390px;
border:1px solid #cbb66e55;
border-radius:50%;
pointer-events:none}
.main-product>img{
height:310px;
width:100%;
object-fit:contain;
mix-blend-mode:multiply}
.main-product h3{
font-size:32px;
margin-bottom:20px}
.main-product p:last-child{
margin-bottom:0}
.bonus-title{
display:flex;
align-items:center;
gap:25px;
font-size:29px;
margin-bottom:30px}
.bonus-title span{
height:1px;
background:var(--border);
flex:1}
.bonus-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:22px;
margin-bottom:65px}
.bonus-card{
display:grid;
grid-template-columns:36% 1fr;
gap:20px;
align-items:center;
padding:24px 20px;
background:var(--paper);
border:1px solid #e1dbce;
border-radius:12px}
.bonus-card>img{
width:100%;
height:235px;
object-fit:contain;
mix-blend-mode:multiply}
.bonus-badge{
display:inline-block;
color:#29341f;
background:#d7b64a;
padding:4px 9px;
border-radius:2px;
font-size:9px;
letter-spacing:.08em;
font-weight:700;
margin-bottom:11px}
.bonus-card h4{
font-size:14px;
margin-bottom:9px}
.bonus-card p{
font-size:11px;
color:var(--muted);
margin-bottom:12px}
.bonus-card .bonus-price{
margin:0;
font-size:12px;
display:flex;
gap:10px}
.bonus-price s{
color:#946553}
.bonus-price strong{
color:#277347}
.price-panel{
padding:55px 60px;
display:grid;
grid-template-columns:1fr 1fr;
gap:40px;
align-items:center;
border-radius:9px;
position:relative;
overflow:hidden;
background:linear-gradient(110deg,#0c221a,#214b35)}
.price-panel::before{
content:'';
position:absolute;
width:400px;
height:400px;
right:-230px;
top:-290px;
border:1px solid #c6ac3d88;
border-radius:50%;
box-shadow:0 0 0 50px #c6ac3d08,0 0 0 100px #c6ac3d08;
pointer-events:none}
.price-panel p{
font-size:13px;
margin-bottom:8px}
.price-panel .price,.price{
font-family:var(--body-font);
font-weight:700;
font-size:clamp(3rem,5.5vw,4.6rem);
line-height:1.15;
color:var(--gold);
letter-spacing:-.04em;
margin:0 0 16px;
white-space:nowrap}
.price-panel .payment-note,.payment-note{
font-size:11px;
color:#ced7c8}
.purchase-area{
text-align:center}
.purchase-area .button{
width:100%;
font-size:12px;
min-height:72px;
padding-inline:18px}
.secure{
display:flex;
align-items:center;
justify-content:center;
gap:9px;
margin-top:15px!important;
font-size:10px!important;
color:#d4dacb}
.secure svg{
height:14px;
width:14px;
color:var(--gold)}
.extras{
background:var(--cream-deep)}
.extras h2{
margin-bottom:23px}
.extras-intro{
max-width:720px;
color:var(--muted);
margin-bottom:45px}
.extras-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:22px}
.extra-card{
display:grid;
grid-template-columns:36% 1fr;
gap:20px;
align-items:center;
padding:30px 24px;
background:var(--paper);
border-radius:9px}
.extra-card img{
width:100%;
height:260px;
object-fit:contain;
mix-blend-mode:multiply}
.extra-card h3{
font:700 15px/1.5 var(--body-font);
letter-spacing:-.015em;
margin:0 0 10px}
.extra-card small{
font-size:10px;
white-space:nowrap}
.extra-card p{
font-size:11px;
color:var(--muted);
margin-bottom:16px}
.extra-price{
font-size:21px;
color:#315c44}
.combo{
border:1px solid #c5b279;
border-radius:5px;
margin-top:24px;
padding:23px 27px;
display:flex;
justify-content:space-between;
align-items:center;
gap:20px}
.combo>strong{
font-size:12px}
.combo p{
margin:0;
white-space:nowrap}
.combo p strong{
font-size:23px;
color:#315c44}
.combo span{
font-size:10px;
color:var(--muted);
margin-left:8px}
.fine-print{
font-size:10px;
color:var(--muted);
margin:16px 0 0}
.guarantee{
background:#173c2b;
padding:65px 0}
.guarantee-layout{
display:flex;
align-items:center;
gap:75px}
.guarantee h2{
font-size:37px;
margin-bottom:18px}
.guarantee p:last-child{
font-size:15px;
color:#e4e6d8;
max-width:780px;
margin:0}
.seal{
flex-shrink:0;
width:155px;
height:155px;
border:1px solid #a48e3e;
border-radius:50%;
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
outline:1px dashed #a48e3e88;
outline-offset:-10px}
.seal span{
font:700 74px/1 var(--display-font);
color:var(--gold)}
.seal small{
font-size:10px;
letter-spacing:.2em;
margin-top:10px}
.faq{
background:var(--paper)}
.faq-layout{
display:grid;
grid-template-columns:32% 1fr;
gap:60px}
.faq-layout>div:first-child>p:last-child{
max-width:240px;
font-size:14px;
color:var(--muted)}
.faq details{
border-top:1px solid var(--border);
padding:23px 0}
.faq details:last-child{
border-bottom:1px solid var(--border)}
.faq summary{
list-style:none;
position:relative;
cursor:pointer;
font-size:14px;
font-weight:700;
padding-right:30px}
.faq summary::-webkit-details-marker{
display:none}
.faq summary::after{
content:'+';
color:var(--gold-dark);
position:absolute;
right:0;
top:-2px;
font-size:20px;
font-weight:400}
.faq details[open] summary::after{
content:'−'}
.faq details p{
font-size:13px;
line-height:1.8;
color:var(--muted);
margin:15px 20px 0 0}
.closing{
text-align:center;
padding-block:120px}
.closing::after{
background:linear-gradient(#0b241bdc,#102c21f0)}
.closing .eyebrow{
justify-content:center}
.closing .eyebrow::after{
content:'';
width:30px;
height:1px;
background:currentColor}
.closing h2{
max-width:800px;
margin:0 auto 28px;
font-size:clamp(2.5rem,4vw,3.7rem)}
.closing .container>p:not(.eyebrow,.price,.payment-note){
max-width:660px;
margin:0 auto 30px;
font-size:15px;
color:#e1e6dc}
.closing .price{
font-size:clamp(3rem,5vw,4.3rem);
margin-bottom:7px}
.closing .payment-note{
margin-bottom:27px}
.closing .button{
min-width:345px}
.footer{
background:#081b14;
padding:45px 0}
.footer-layout{
display:flex;
justify-content:space-between;
align-items:center;
gap:30px}
.footer p{
font-size:9px;
color:#a2b2a3;
margin:8px 0 0}
.footer-layout>p:last-child{
max-width:300px}
.footer .brand{
font-size:9px}
.skip-link{
position:fixed;
z-index:20;
left:16px;
top:-100px;
padding:12px;
background:var(--cream);
color:var(--green)}
.skip-link:focus{
top:12px}
:focus-visible{
outline:3px solid var(--gold);
outline-offset:5px}
::selection{
color:var(--cream);
background:#396d4d}
dialog{
width:min(460px,calc(100% - 32px));
padding:42px 30px 30px;
background:var(--cream);
color:var(--text);
border:1px solid var(--border);
border-radius:12px;
box-shadow:0 20px 70px #0004}
dialog::backdrop{
background:#071c17bd}
dialog h2{
font-size:30px;
margin-bottom:18px}
dialog p{
font-size:14px}
.dialog-close{
position:absolute;
right:12px;
top:6px;
background:none;
border:none;
font-size:30px;
color:var(--text);
padding:0 8px}
.dialog-confirm{
width:100%;
min-height:48px}
@media(min-width:1600px){
.hero{
min-height:970px}
.hero h1{
font-size:76px}
.hero-content{
padding-top:65px}
}
@media(max-width:1050px){
.container{
width:calc(100% - 48px)}
.pain-grid article{
flex-direction:column;
padding:20px 15px}
.book-layout{
gap:25px;
grid-template-columns:1.7fr 1fr}
.book-stage{
padding-right:10px}
.learning-grid article{
gap:10px}
.learning-grid svg{
width:25px}
.author-layout{
gap:40px}
.photo-collage{
height:490px}
.bonus-card{
gap:10px;
padding:20px 12px}
.bonus-card>img{
height:215px}
.price-panel{
padding:40px 35px;
gap:25px}
.extra-card{
padding:24px 15px;
gap:10px}
.guarantee-layout{
gap:45px}
}
@media(max-width:760px){
.container{
width:calc(100% - 40px)}
.section{
padding-block:65px}
.hero{
min-height:auto;
padding:22px 0 55px}
.hero>.brand{
margin-left:22px;
font-size:8px}
.hero-content{
padding-top:46px}
.hero h1{
font-size:clamp(2.15rem,6.8vw,3.4rem);
margin-bottom:30px}
.video-poster{
margin-bottom:26px}
.play{
width:62px;
height:62px}
.play svg{
width:30px;
height:30px}
.video-caption{
font-size:7px;
bottom:15px;
left:16px;
right:16px}
.button{
min-height:55px;
padding:17px 23px;
gap:20px;
font-size:11px}
.hero .button{
width:min(330px,100%)}
.pains{
padding:40px 0}
.pains h2{
font-size:24px;
line-height:1.25;
max-width:520px;
margin-inline:auto}
.pain-grid{
grid-template-columns:1fr 1fr;
gap:12px}
.pain-grid article{
flex-direction:row;
gap:10px;
padding:18px 12px}
.pain-grid p{
font-size:12px}
.pain-icon{
width:37px;
height:37px}
.pain-icon svg{
width:25px;
height:25px}
.pain-conclusion{
font-size:18px;
margin-top:25px}
.book-section{
padding-top:55px}
.book-layout{
grid-template-columns:1fr;
gap:0}
.book-copy h2{
font-size:37px}
.lead{
font-size:16px}
.book-facts{
font-size:12px}
.book-stage{
grid-row:2;
padding:10px 30px 35px;
max-width:300px;
margin:auto;
width:100%}
.book-3d{
width:200px}
.learning-grid{
margin:25px 0 15px}
.learning-grid article{
padding-top:20px;
padding-bottom:20px}
.learning-grid h3{
font-size:11px}
.learning-grid p{
font-size:10px}
.learning-grid article:nth-child(even){
padding-left:14px}
.spreads{
margin:10px auto 0}
.spreads img{
min-height:120px;
object-fit:cover}
.book-section blockquote{
font-size:15px;
padding:25px 22px}
.audience.section{
padding-block:45px}
.audience-grid{
gap:28px;
grid-template-columns:1fr}
.audience-grid>div+div{
border-left:0;
border-top:1px solid var(--border);
padding:28px 0 0}
.audience h2{
font-size:21px;
margin-bottom:18px}
.check-list li{
font-size:13px}
.author-layout{
grid-template-columns:1fr;
gap:45px}
.photo-collage{
height:450px;
max-width:470px;
width:100%;
margin:auto}
.author-copy h2{
font-size:39px}
.author-copy p:not(.eyebrow){
font-size:14px}
.offer h2{
font-size:36px;
margin-bottom:30px}
.main-product{
grid-template-columns:36% 1fr;
gap:20px;
padding:24px 18px;
margin-bottom:45px}
.main-product>img{
height:220px}
.main-product .eyebrow{
font-size:8px;
letter-spacing:.15em;
gap:8px}
.main-product .eyebrow::before{
width:15px}
.main-product h3{
font-size:26px;
margin-bottom:12px}
.main-product p:last-child{
font-size:12px}
.bonus-title{
font-size:25px;
gap:15px}
.bonus-grid{
grid-template-columns:1fr;
gap:16px;
margin-bottom:35px}
.bonus-card{
grid-template-columns:31% 1fr;
padding:20px;
gap:22px}
.bonus-card>img{
height:200px}
.bonus-card h4{
font-size:15px}
.bonus-card p{
font-size:12px}
.price-panel{
grid-template-columns:1fr;
gap:22px;
padding:30px 25px}
.price-panel .price{
font-size:59px}
.purchase-area .button{
min-height:59px}
.price-panel p{
font-size:12px}
.extras-grid{
grid-template-columns:1fr;
gap:18px}
.extras h2{
font-size:38px}
.extras-intro{
font-size:14px;
margin-bottom:30px}
.extra-card{
grid-template-columns:32% 1fr;
gap:20px;
padding:24px}
.extra-card img{
height:215px}
.extra-card p{
font-size:12px}
.combo{
flex-direction:column;
align-items:flex-start;
gap:10px;
padding:20px}
.combo>strong{
font-size:10px}
.guarantee{
padding:45px 0}
.guarantee-layout{
align-items:flex-start;
gap:24px}
.seal{
height:90px;
width:90px;
outline-offset:-7px}
.seal span{
font-size:45px}
.seal small{
font-size:7px;
margin-top:4px}
.guarantee h2{
font-size:29px}
.guarantee .eyebrow{
font-size:8px;
letter-spacing:.15em;
gap:8px}
.guarantee .eyebrow::before{
width:15px}
.guarantee p:last-child{
font-size:13px}
.faq-layout{
grid-template-columns:1fr;
gap:25px}
.faq h2{
font-size:40px}
.faq h2 br{
display:none}
.faq-layout>div:first-child>p:last-child{
max-width:100%}
.faq details{
padding:21px 0}
.faq summary{
font-size:13px}
.faq details p{
font-size:12px}
.closing{
padding-block:75px}
.closing .eyebrow{
font-size:8px;
letter-spacing:.16em}
.closing h2{
font-size:37px}
.closing .container>p:not(.eyebrow,.price,.payment-note){
font-size:14px}
.closing .button{
min-width:0;
width:100%;
max-width:345px}
.footer-layout{
flex-direction:column;
align-items:flex-start;
gap:12px}
.footer{
padding:35px 0}
}
@media(max-width:380px){
.container{
width:calc(100% - 32px)}
.pain-grid article{
flex-direction:column}
.pain-grid p{
font-size:12px}
.hero h1{
font-size:30px}
.bonus-card{
padding:15px;
gap:14px}
.bonus-card>img{
height:175px}
.bonus-card h4{
font-size:13px}
.main-product h3{
font-size:23px}
.guarantee-layout{
gap:16px}
.seal{
width:72px;
height:72px}
.guarantee h2{
font-size:26px}
.learning-grid svg{
width:20px}
.learning-grid article{
gap:8px}
}
@media(prefers-reduced-motion:reduce){
html{
scroll-behavior:auto}
*,*::before,*::after{
transition:none!important;
animation:none!important}
}
@media(max-width:760px){
.learning-grid p{
font-size:12px}
.learning-grid h3{
font-size:12px}
.learning-grid{
grid-template-columns:1fr}
.learning-grid article:nth-child(even){
border-left:0;
padding-left:0}
.learning-grid article:nth-last-child(2){
border-bottom:1px solid #c5c6a921}
.learning-grid svg{
width:28px;
height:28px}
.spreads{
overflow-x:auto}
.spreads img{
max-width:none;
width:760px;
min-height:150px}
}

@media (max-width: 760px) {
.desktop-break {
display: none;
}
}

/* Capas originais enviadas pelo autor, inteiras e sem alteração de cor. */
.main-product > img,
.bonus-card > img,
.extra-card > img {
  object-fit: contain;
  filter: none;
  mix-blend-mode: normal;
}

/* A cena ocupa todo o fundo da apresentação, sem imagem sobreposta. */
.book-section {
  padding: 0;
}
.book-backdrop {
  min-height: clamp(790px, 61vw, 1040px);
  padding: 85px 0 65px;
  background-color: #091c15;
  background-image: linear-gradient(90deg, #081b1466, transparent 70%), url('/public/images/sobre-o-livro.webp');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.book-layout {
  display: block;
}
.book-copy {
  width: 62%;
}
.book-section .spreads {
  margin-top: 0;
}
@media (max-width: 1050px) and (min-width: 761px) {
  .book-copy {
    width: 60%;
  }
  .book-backdrop {
    background-position: 58% center;
  }
}
@media (max-width: 760px) {
  .book-backdrop {
    min-height: 0;
    padding: 480px 0 30px;
    background-image: url('/public/images/sobre-o-livro.webp');
    background-size: auto 480px;
    background-position: right top;
  }
  .book-copy {
    width: 100%;
  }
}
/* Livro menor e passagem contínua para as páginas abertas. */
.book-section {
  background-color: #091c15;
}
.book-backdrop {
  background-image:
    linear-gradient(to top, #091c15 0%, transparent 16%),
    linear-gradient(90deg, #091c15 0%, transparent 22%),
    url('/public/images/sobre-o-livro.webp');
  background-size: 100% 100%, 100% 100%, 90% auto;
  background-position: center, center, right center;
}
.book-section .spreads {
  width: 100%;
  max-width: none;
  margin: -2px auto 0;
  background: #091c15;
}
.book-section .spreads img {
  width: 100%;
  max-height: none;
  object-fit: contain;
  mask-image: linear-gradient(to bottom, transparent, #000 18px);
}
@media (max-width: 1050px) and (min-width: 761px) {
  .book-backdrop {
    background-size: 100% 100%, 100% 100%, auto 86%;
    background-position: center, center, right center;
  }
}
@media (max-width: 760px) {
  .book-backdrop {
    padding-top: 440px;
    background-image:
      linear-gradient(to bottom, transparent 350px, #091c15 430px),
      url('/public/images/sobre-o-livro.webp');
    background-size: 100% 100%, auto 430px;
    background-position: center, right top;
  }
  .book-section .spreads img {
    width: 760px;
    max-width: none;
  }
}
/* A citação encerra o mesmo ambiente escuro da apresentação do livro. */
.book-section blockquote {
  background: #091c15;
  color: #e6dfc9;
  padding: 34px 24px 40px;
  margin: -1px 0 0;
}
.book-section .spreads img {
  mask-image: linear-gradient(to bottom, transparent, #000 18px, #000 calc(100% - 22px), transparent);
}
/* Bônus: valor percebido, benefício de cada material e inclusão explícita. */
.bonus-bundle {
  padding: 42px 30px 26px;
  margin-bottom: 54px;
  border: 1px solid #b69b50;
  border-radius: 14px;
  background: #eae3d0;
}
.bonus-intro {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  align-items: center;
  gap: 40px;
  margin-bottom: 32px;
}
.bundle-label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #775818;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  margin-bottom: 18px;
}
.bundle-label svg { width: 25px; height: 25px; }
.bonus-title { display: block; font-size: 36px; margin-bottom: 16px; }
.bonus-intro p { margin: 0; font-size: 14px; color: #485646; max-width: 56ch; }
.bonus-value { border-left: 1px solid #b9aa80; padding-left: 32px; }
.bonus-value > * { display: block; }
.bonus-value > span { font-size: 12px; color: #52604e; }
.bonus-value > s { font-size: 35px; font-weight: 700; color: #796a46; text-decoration-thickness: 2px; line-height: 1.5; }
.bonus-value > strong { font-size: 18px; color: #215537; }
.bonus-value > small { font-size: 11px; margin-top: 4px; color: #485646; }
.bonus-bundle .bonus-grid { gap: 18px; margin-bottom: 24px; }
.bonus-bundle .bonus-card { align-items: start; grid-template-columns: 32% 1fr; padding: 22px 18px; gap: 20px; border-color: #d3c8aa; }
.bonus-bundle .bonus-card > img { height: 235px; align-self: center; }
.bonus-bundle .bonus-badge { display: inline-flex; align-items: center; gap: 7px; font-size: 9px; padding: 7px 9px; margin-bottom: 15px; background: #d9b74d; color: #24301c; }
.bonus-badge svg { width: 15px; height: 15px; }
.bonus-bundle .bonus-benefit { font-size: 9px; font-weight: 700; letter-spacing: .05em; color: #746020; margin: 0 0 7px; }
.bonus-bundle h4 { font-size: 16px; margin-bottom: 10px; }
.bonus-bundle .bonus-card p:not(.bonus-benefit,.bonus-price) { font-size: 12px; }
.bonus-bundle .bonus-price { border-top: 1px solid #ded8c8; padding-top: 14px; margin-top: 16px; align-items: center; flex-wrap: wrap; gap: 12px; }
.bonus-bundle .bonus-price s { font-size: 13px; }
.bonus-bundle .bonus-price strong { display: inline-flex; align-items: center; gap: 6px; font-size: 17px; color: #1f603c; }
.bonus-price strong svg { width: 17px; height: 17px; }
.bonus-included { display: flex; align-items: center; gap: 14px; color: #244b33; }
.bonus-included > svg { width: 28px; height: 28px; }
.bonus-included p { margin: 0; font-size: 13px; }
.bonus-included p > * { display: block; }
.bonus-included span { font-size: 11px; margin-top: 3px; color: #485646; }
@media (max-width: 900px) {
  .bonus-bundle { padding: 30px 20px 24px; }
  .bonus-intro { gap: 25px; }
  .bonus-title { font-size: 31px; }
  .bonus-bundle .bonus-grid { grid-template-columns: 1fr; }
  .bonus-bundle .bonus-card { grid-template-columns: 29% 1fr; padding: 24px; }
}
@media (max-width: 600px) {
  .bonus-bundle { padding: 28px 14px 22px; margin-inline: -5px; }
  .bonus-intro { grid-template-columns: 1fr; gap: 23px; padding-inline: 6px; }
  .bonus-intro p { font-size: 13px; }
  .bonus-value { border-left: 0; border-top: 1px solid #b9aa80; padding: 18px 0 0; }
  .bonus-value > s { font-size: 31px; }
  .bonus-bundle .bonus-card { grid-template-columns: 28% 1fr; gap: 13px; padding: 20px 12px; }
  .bonus-bundle .bonus-card > img { height: auto; }
  .bonus-bundle .bonus-badge { font-size: 8px; gap: 5px; padding: 6px; }
  .bonus-bundle h4 { font-size: 15px; }
  .bonus-bundle .bonus-benefit { font-size: 8px; }
  .bonus-bundle .bonus-card p:not(.bonus-benefit,.bonus-price) { font-size: 11px; }
  .bonus-included { align-items: start; padding-inline: 5px; }
}