@font-face{font-family:NotoSans;src:url("https://buenasnochescondios.com/wp-content/uploads/lp-html-fb/lovable/480-teste-ab-2/20260930230128-c904968d/assets/fonts/noto-sans.ttf") format('truetype');font-display:swap;font-weight:100 900}@font-face{font-family:NotoSerif;src:url("https://buenasnochescondios.com/wp-content/uploads/lp-html-fb/lovable/480-teste-ab-2/20260930230128-c904968d/assets/fonts/noto-serif.ttf") format('truetype');font-display:swap;font-weight:100 900} :root{--navy-deep:#03182f;--navy:#062746;--navy-soft:#0b3557;--gold:#f5b536;--gold-light:#ffd066;--cream:#fff5dc;--warm-white:#fffbf2;--brown:#6c421f;--ink:#102b43;--sage:#667a52;--coral:#d97757;--line:#dfd3b7;--paper-shadow:0 25px 60px rgba(39,27,10,.16);--deep-shadow:0 30px 70px rgba(0,9,22,.4);--serif:NotoSerif,Georgia,serif;--sans:NotoSans,Montserrat,Arial,sans-serif;--content:min(1280px,calc(100% - 64px));--gutter:max(32px,calc((100% - 1280px)/2))} *{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--warm-white);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.65;}img{display:block;max-width:100%;height:auto}a{color:inherit}button{font:inherit}.skip-link{position:fixed;left:1rem;top:-5rem;z-index:99;background:var(--gold);padding:.7rem 1rem}.skip-link:focus{top:1rem}.site-header{height:78px;background:var(--navy-deep);color:var(--cream);display:flex;align-items:center;justify-content:space-between;padding:0 var(--gutter);border-bottom:1px solid rgba(255,208,102,.18);position:relative;z-index:20}.brand{display:grid;grid-template-columns:28px auto;grid-template-rows:auto auto;text-decoration:none;line-height:1}.brand>span{grid-row:1/3;color:var(--gold);font-size:27px}.brand strong{font-family:var(--serif);font-size:18px}.brand small{text-transform:uppercase;font-size:8px;letter-spacing:.12em;margin-top:5px}.site-header nav{display:flex;align-items:center;gap:26px}.site-header nav>a{text-decoration:none;font-size:13px;font-weight:700}.header-cta{border:1px solid var(--gold);color:var(--gold-light);padding:9px 16px;border-radius:3px}.night-section{color:var(--cream);background-color:var(--navy-deep);background-image:radial-gradient(circle at 10% 20%,rgba(255,208,102,.7) 0 1px,transparent 1.8px),radial-gradient(circle at 80% 30%,rgba(255,208,102,.65) 0 1px,transparent 1.8px),radial-gradient(circle at 65% 8%,rgba(255,208,102,.5) 0 1px,transparent 1.8px);background-size:110px 130px,170px 180px,230px 250px}.hero-section{height:900px;min-height:900px;position:relative;padding:52px 0 48px;display:flex;flex-direction:column;justify-content:center}.hero-section:after{content:"";position:absolute;inset:auto 0 0;height:130px;background:linear-gradient(transparent,rgba(0,9,23,.35));pointer-events:none}.hero-content{width:var(--content);margin:auto;display:grid;grid-template-columns:minmax(0,49fr) minmax(0,51fr);align-items:center;gap:10px}.hero-copy{position:relative;z-index:2}.eyebrow{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.18em;color:var(--brown);margin:0 0 18px}.night-section .eyebrow{color:var(--gold-light)}h1,h2,h3,h4,p{margin-top:0}h1,h2,h3{font-family:var(--serif);letter-spacing:0}h1{font-size:clamp(54px,4.2vw,76px);line-height:1.01;max-width:620px;margin-bottom:26px;font-weight:650}h1 em,.section-heading h2 em{color:var(--gold-light);font-style:normal}h2{font-size:clamp(42px,3.3vw,60px);line-height:1.08;margin-bottom:22px;font-weight:650}.hero-lead{font-size:clamp(17px,1.35vw,20px);line-height:1.65;max-width:670px;color:rgba(255,245,220,.82);margin-bottom:30px}.button{display:inline-flex;align-items:center;justify-content:center;gap:16px;min-height:58px;padding:16px 25px;text-align:center;text-decoration:none;text-transform:uppercase;font-size:13px;line-height:1.2;font-weight:900;letter-spacing:.05em;border-radius:4px;transition:transform .2s ease,box-shadow .2s ease,background .2s ease}.button-gold{background:var(--gold);color:var(--navy-deep);box-shadow:0 12px 28px rgba(245,181,54,.22),inset 0 1px rgba(255,255,255,.5)}.button:hover{transform:translateY(-2px);box-shadow:0 18px 35px rgba(245,181,54,.3)}.assurance{font-size:12px;color:rgba(255,245,220,.7);margin:12px 0}.assurance b{color:var(--gold);margin:0 5px}.kit-note{margin:24px 0 0;font-size:13px;text-transform:uppercase;letter-spacing:.08em}.kit-note strong{color:var(--gold-light)}.hero-product{position:relative;margin:0;z-index:1}.hero-product img{position:relative;z-index:2;filter:drop-shadow(0 35px 25px rgba(0,0,0,.42));transform:scale(1.12);transform-origin:center}.hero-product .halo{position:absolute;width:58%;aspect-ratio:1;left:21%;top:14%;background:radial-gradient(circle,rgba(255,198,73,.24),transparent 68%);border-radius:50%}.hero-product figcaption{position:relative;z-index:3;width:max-content;max-width:90%;margin:-4% auto 0;background:var(--cream);color:var(--navy);padding:8px 16px;font-family:var(--serif);font-size:13px;box-shadow:var(--deep-shadow);transform:rotate(-1deg)}.scroll-cue{position:absolute;z-index:4;bottom:18px;left:50%;transform:translateX(-50%);font-size:10px;text-transform:uppercase;letter-spacing:.13em;text-decoration:none;color:rgba(255,245,220,.65)}.scroll-cue span{color:var(--gold);margin-left:8px}.paper-section{background-color:var(--cream);background-image:linear-gradient(90deg,rgba(108,66,31,.025) 1px,transparent 1px),linear-gradient(rgba(108,66,31,.02) 1px,transparent 1px);background-size:34px 34px}.problem-section{padding:clamp(80px,9vw,150px) 0}.problem-heading,.problem-scene,.problem-conclusion,.section-heading,.ritual-steps,.no-pressure,.solution-close,.main-product,.themes-list,.bonus-section,.audience-columns,.presence-quote,.offer-layout,.guarantee-section,.faq-list{width:var(--content);margin-left:auto;margin-right:auto}.problem-heading{display:grid;grid-template-columns:.65fr 1.35fr;gap:50px;align-items:start}.problem-heading h2{max-width:880px}.problem-scene{min-height:420px;position:relative;margin-top:35px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);display:flex;align-items:center}.problem-copy{max-width:400px;font-family:var(--serif);font-size:20px}.problem-copy p:first-child{font-size:30px;line-height:1.55}.thought{position:absolute;margin:0;font-family:var(--serif);font-style:italic;background:var(--warm-white);border:1px solid var(--line);box-shadow:0 9px 20px rgba(85,61,30,.08);padding:12px 18px;border-radius:50%;max-width:270px}.thought-one{left:43%;top:14%}.thought-two{right:5%;top:24%;transform:rotate(2deg)}.thought-three{left:50%;bottom:18%;transform:rotate(-2deg)}.thought-four{right:0;bottom:5%;max-width:330px}.problem-conclusion{display:grid;grid-template-columns:1fr 1fr;gap:40px;margin-top:60px}.problem-conclusion>blockquote{grid-column:1/3;font-family:var(--serif);font-size:clamp(26px,3vw,42px);line-height:1.35;color:var(--navy);border-left:4px solid var(--gold);padding-left:32px;margin:30px 0 0}.solution-section{padding:clamp(90px,10vw,150px) 0;background:var(--warm-white)}.section-heading{max-width:820px}.centered{text-align:center}.section-heading>p:last-child{font-size:19px;color:#536273}.ritual-steps{list-style:none;padding:0;margin-top:70px;display:grid;grid-template-columns:repeat(5,1fr);gap:0;counter-reset:step}.ritual-steps li{padding:0 24px 25px;border-bottom:2px solid var(--line);min-height:145px;position:relative}.ritual-steps li:after{content:"";width:10px;height:10px;background:var(--gold);border-radius:50%;position:absolute;bottom:-6px;left:24px}.ritual-steps span{display:block;font-family:var(--serif);font-size:42px;color:var(--gold);line-height:1}.ritual-steps strong{display:block;color:var(--navy)}.no-pressure{text-align:center;margin-top:65px;font-family:var(--serif);font-size:26px}.no-pressure i{color:var(--coral);font-style:normal}.solution-close{text-align:center;max-width:650px;font-weight:700}.product-section{padding:clamp(90px,10vw,160px) 0}.main-product{margin-top:75px;display:grid;grid-template-columns:1.2fr .8fr;gap:50px;align-items:center}.product-preview{position:relative}.product-preview img{filter:drop-shadow(0 30px 28px rgba(49,35,16,.24));transform:scale(1.08)}.preview-label{position:absolute;bottom:3%;right:5%;background:var(--navy);color:var(--cream);font-size:11px;text-transform:uppercase;letter-spacing:.12em;padding:10px 14px;box-shadow:var(--paper-shadow)}.material-number{font-size:11px;font-weight:900;text-transform:uppercase;letter-spacing:.15em;color:var(--coral)}.product-copy h3,.bonus-copy h2{font-size:clamp(32px,3.4vw,49px);line-height:1.12}.product-intro{font-size:19px}.sample-page{background:var(--warm-white);padding:27px;border:1px solid var(--line);box-shadow:var(--paper-shadow);transform:rotate(1deg);margin-top:30px}.sample-page>span,.sun-page>small,.verse-page>span{display:inline-block;background:var(--gold);padding:4px 9px;border-radius:20px;font-size:10px;font-weight:900}.sample-page h4{font-family:var(--serif);font-size:23px;margin:10px 0}.sample-page p{font-family:var(--serif);font-size:14px;line-height:1.5}.sample-page strong{color:var(--brown);font-size:11px;text-transform:uppercase}.themes-list{margin-top:80px;border-top:1px solid var(--line);padding-top:25px;display:grid;grid-template-columns:.35fr 1.65fr;gap:40px}.themes-list>p{font-family:var(--serif);font-size:22px}.themes-list ol{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:0 28px;counter-reset:theme}.themes-list li{counter-increment:theme;border-bottom:1px solid var(--line);padding:11px 0;font-size:13px}.themes-list li:before{content:counter(theme,decimal-leading-zero);color:var(--gold);font-weight:900;margin-right:10px}.bonus-section{padding:clamp(90px,9vw,145px) 0;display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center}.morning-section{width:100%;max-width:none;padding-left:var(--gutter);padding-right:var(--gutter);background:#f8ead0}.topic-stream{padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:8px}.topic-stream li{background:rgba(255,255,255,.55);border:1px solid var(--line);padding:7px 12px;font-size:12px}.morning-preview{position:relative;min-height:510px;margin:0}.morning-preview img{position:absolute;width:80%;right:-2%;bottom:0;filter:drop-shadow(0 25px 25px rgba(85,55,14,.2))}.sun-page{position:absolute;z-index:2;width:52%;left:0;top:3%;padding:28px;background:var(--warm-white);box-shadow:var(--paper-shadow);transform:rotate(-4deg)}.sun-page h3{font-size:23px;line-height:1.2;margin:12px 0}.sun-page p{font-family:var(--serif);font-size:14px}.sun-page strong{font-size:10px;text-transform:uppercase;color:var(--coral)}.verses-section{padding-top:140px;padding-bottom:140px}.verses-preview{position:relative;min-height:490px;margin:0}.verse-page{position:absolute;width:64%;left:3%;top:0;background:var(--cream);padding:42px 34px;box-shadow:var(--paper-shadow);border:1px solid var(--line);transform:rotate(-4deg)}.verse-page.shifted{left:34%;top:110px;transform:rotate(5deg);background:var(--warm-white)}.verse-page h3{font-size:26px;line-height:1.35;margin:18px 0 5px}.verse-page p{font-family:var(--serif);font-size:14px}.verse-page hr{border:0;border-top:1px solid var(--line);margin:22px 0}.content-formula{border-left:2px solid var(--gold);padding-left:20px;display:grid;grid-template-columns:auto 20px;gap:7px 10px;width:max-content;max-width:100%;font-size:13px}.content-formula b{color:var(--gold)}.topics-inline{margin-top:25px;color:#687582;font-size:13px}.calendar-section{padding:clamp(90px,9vw,145px) var(--gutter);display:grid;grid-template-columns:.8fr 1.2fr;gap:80px;align-items:center}.day-example{margin-top:30px;padding:24px;border-left:3px solid var(--gold);background:var(--warm-white);box-shadow:0 10px 25px rgba(85,55,14,.08)}.day-example span{color:var(--coral);font-size:12px;font-weight:900}.day-example strong{display:block;font-family:var(--serif);font-size:20px;margin:6px 0}.day-example p{font-size:13px;margin:4px 0}.calendar-preview{background:var(--warm-white);padding:40px;box-shadow:var(--paper-shadow);transform:rotate(1deg);border:1px solid var(--line)}.calendar-preview header{display:flex;justify-content:space-between;align-items:end;border-bottom:2px solid var(--navy);padding-bottom:18px}.calendar-preview header span{font-family:var(--serif);font-size:26px}.calendar-preview header strong{font-size:42px;color:var(--gold)}.calendar-preview ol{list-style:none;padding:25px 0;display:grid;grid-template-columns:repeat(7,1fr);gap:9px}.calendar-preview li{aspect-ratio:1;display:grid;place-items:center;border:1px solid var(--line);font-family:var(--serif);font-weight:700;position:relative}.calendar-preview li.done{background:#f1e4c3}.calendar-preview li.done:after{content:"✓";position:absolute;right:4px;top:0;color:var(--sage);font-size:11px}.calendar-preview li.today{background:var(--gold);color:var(--navy)}.calendar-preview>p{display:flex;align-items:center;gap:10px;font-size:11px;text-transform:uppercase;font-weight:800}.calendar-preview>p i{flex:1;height:1px;background:var(--line)}.cards-section{padding:clamp(100px,10vw,160px) var(--gutter);background:#f4ead5;display:grid;grid-template-columns:.65fr 1.35fr;gap:70px;align-items:center}.print-callout{display:inline-block;margin-top:20px;color:var(--brown);border-bottom:2px solid var(--gold)}.cards-preview{position:relative;height:580px;margin:0}.print-sheet{width:380px;display:grid;grid-template-columns:1fr 1fr;background:var(--warm-white);padding:28px;gap:8px;box-shadow:var(--paper-shadow);transform:rotate(-5deg);position:absolute;left:4%;top:3%}.print-sheet>span{grid-column:1/3;font-size:10px;color:#7d7060}.print-sheet i{aspect-ratio:.72;border:1px dashed var(--brown);display:grid;place-items:center;text-align:center;padding:12px;font-family:var(--serif);font-style:normal;font-weight:700}.prayer-card{position:absolute;width:150px;aspect-ratio:.68;border-radius:7px;box-shadow:0 16px 25px rgba(55,36,15,.2);display:grid;place-items:center;text-align:center;padding:15px;font-family:var(--serif);font-size:20px;font-weight:800}.prayer-card span{display:block;color:var(--gold);font-size:30px}.card-one{background:#f6d46f;right:20%;top:0;transform:rotate(6deg)}.card-two{background:var(--navy);color:var(--cream);right:2%;top:100px;transform:rotate(12deg)}.card-three{background:#f2d9cf;right:29%;bottom:3%;transform:rotate(-6deg)}.card-four{background:#d7e3c4;right:4%;bottom:0;transform:rotate(4deg)}.guide-section{padding:clamp(100px,10vw,160px) var(--gutter);display:grid;grid-template-columns:1.15fr .85fr;gap:70px;align-items:center}.guide-preview{display:grid;grid-template-columns:.8fr 1.2fr;align-items:center;margin:0;filter:drop-shadow(0 25px 30px rgba(44,28,10,.18))}.guide-cover{background:var(--navy);color:var(--cream);min-height:440px;padding:45px 28px;display:flex;flex-direction:column;justify-content:center;text-align:center;transform:perspective(700px) rotateY(7deg)}.guide-cover small{color:var(--gold)}.guide-cover h3{font-size:35px;line-height:1.1;margin:20px 0}.guide-cover p{font-family:var(--serif);font-size:18px}.guide-cover span{font-size:10px;text-transform:uppercase;color:var(--gold-light)}.guide-page{background:var(--warm-white);min-height:490px;padding:38px 26px}.guide-page h3{font-size:27px}.guide-page ol{list-style:none;padding:0}.guide-page li{display:grid;grid-template-columns:32px 1fr;padding:13px 0;border-bottom:1px solid var(--line);counter-increment:guide}.guide-page li:before{content:counter(guide);grid-row:1/3;width:25px;height:25px;display:grid;place-items:center;background:var(--navy);color:var(--cream);border-radius:50%;font-size:11px}.guide-page small{grid-column:2}.method{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:12px;text-transform:uppercase;font-weight:900;color:var(--navy)}.method b{color:var(--gold)}.guide-section blockquote{font-family:var(--serif);font-size:24px;border-left:3px solid var(--gold);margin:35px 0 0;padding-left:22px}.audience-section{padding:clamp(100px,10vw,155px) 0;background:var(--warm-white)}.audience-columns{display:grid;grid-template-columns:1.35fr .65fr;margin-top:60px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.audience-columns article{padding:45px}.audience-columns h3{font-size:24px}.audience-columns ul{list-style:none;padding:0;margin:0}.audience-columns li{padding:9px 0 9px 28px;position:relative}.for-you{background:var(--cream)}.for-you li:before{content:"✓";position:absolute;left:0;color:var(--sage);font-weight:900}.not-for-you{border-left:1px solid var(--line)}.not-for-you li:before{content:"—";position:absolute;left:0;color:var(--coral);font-weight:900}.presence-quote{max-width:780px;text-align:center;font-family:var(--serif);font-size:24px;margin-top:55px}.presence-quote strong{display:block;color:var(--brown)}.offer-section{padding:clamp(100px,10vw,155px) 0}.offer-section .section-heading{max-width:900px}.offer-layout{display:grid;grid-template-columns:1.15fr .85fr;gap:65px;align-items:center;margin-top:55px}.offer-visual{margin:0}.offer-visual img{transform:scale(1.12);filter:drop-shadow(0 35px 28px rgba(0,0,0,.45))}.offer-visual figcaption{display:flex;justify-content:center;gap:11px;align-items:center;margin-top:20px;font-size:11px;text-transform:uppercase;color:rgba(255,245,220,.7)}.offer-visual figcaption span{color:var(--gold);font-size:18px}.offer-details{background:var(--cream);color:var(--navy);padding:42px;box-shadow:var(--deep-shadow)}.offer-details ul{list-style:none;padding:0;margin:0}.offer-details li{position:relative;padding:10px 0 10px 28px;border-bottom:1px solid var(--line);font-size:14px}.offer-details li:before{content:"✓";position:absolute;left:0;color:var(--sage);font-weight:900}.offer-details li small{display:block}.price{padding:28px 0;display:grid}.price small{text-transform:uppercase;font-size:10px;letter-spacing:.12em}.price strong{font-family:var(--serif);font-size:58px;line-height:1}.price sup{font-family:var(--sans);font-size:14px}.price span{font-size:12px}.offer-details .button{width:100%}.offer-details .assurance{color:#66717b;text-align:center}.guarantee-section{max-width:960px;padding:110px 0;display:grid;grid-template-columns:170px 1fr;gap:55px;align-items:center}.guarantee-mark{width:150px;aspect-ratio:1;border:2px solid var(--gold);outline:1px solid var(--gold);outline-offset:7px;border-radius:50%;display:grid;place-content:center;text-align:center;color:var(--navy)}.guarantee-mark strong{font-family:var(--serif);font-size:64px;line-height:.8}.guarantee-mark span{text-transform:uppercase;font-size:11px;font-weight:900;letter-spacing:.12em}.guarantee-section h2{font-size:43px}.guarantee-section p{margin-bottom:9px}.faq-section{padding:clamp(95px,10vw,150px) 0;background:var(--warm-white)}.faq-list{max-width:860px;margin-top:55px;border-top:1px solid var(--line)}.faq-item{border-bottom:1px solid var(--line)}.faq-item h3{margin:0}.faq-question{width:100%;border:0;background:transparent;display:flex;justify-content:space-between;align-items:center;text-align:left;padding:25px 0;color:var(--navy);font-family:var(--serif);font-size:21px;font-weight:700;cursor:pointer}.faq-question span{font-family:var(--sans);font-weight:300;color:var(--gold);font-size:28px;transition:transform .2s}.faq-answer{display:grid;grid-template-rows:1fr;transition:grid-template-rows .25s}.js .faq-answer{grid-template-rows:0fr}.faq-answer p{overflow:hidden;margin:0;padding:0 45px 20px 0;color:#596778}.js .faq-item[open] .faq-answer{grid-template-rows:1fr}.faq-item[open] .faq-question span{transform:rotate(45deg)}.final-cta-section{padding:clamp(90px,9vw,135px) var(--gutter);display:grid;grid-template-columns:1.05fr .95fr;gap:50px;align-items:center}.final-copy h2{font-size:clamp(40px,4.3vw,62px)}.final-copy>p:not(.eyebrow):not(.assurance){color:rgba(255,245,220,.76);font-size:18px;max-width:640px}.final-price{display:flex;align-items:baseline;gap:14px;margin:28px 0 16px}.final-price strong{font-family:var(--serif);font-size:42px;color:var(--gold-light)}.final-price span{text-transform:uppercase;font-size:10px}.final-cta-section figure{margin:0}.final-cta-section figure img{transform:scale(1.05);filter:drop-shadow(0 28px 25px rgba(0,0,0,.4))}.footer-section{background:#021326;color:rgba(255,245,220,.65);min-height:130px;padding:30px var(--gutter);display:flex;align-items:center;justify-content:space-between;border-top:1px solid rgba(255,208,102,.14)}.footer-section p{margin:0;font-size:11px}.footer-section nav{display:flex;gap:20px;font-size:11px}.footer-section nav span{cursor:not-allowed}.js [data-reveal]{opacity:0;transform:translateY(22px);transition:opacity .65s ease,transform .65s ease}.js [data-reveal].is-visible{opacity:1;transform:none} @media(max-width:1050px){:root{--content:min(920px,calc(100% - 40px))}.hero-content{grid-template-columns:1fr;width:var(--content);text-align:center}.hero-copy{max-width:780px;margin:auto}.hero-lead{margin-left:auto;margin-right:auto}.hero-product{max-width:780px;margin:45px auto 0}.hero-product img{transform:none}.scroll-cue{display:none}.problem-heading,.main-product,.bonus-section,.calendar-section,.guide-section,.offer-layout,.final-cta-section{grid-template-columns:1fr}.problem-heading{gap:0}.thought-four{right:3%}.main-product,.bonus-section,.calendar-section,.guide-section,.offer-layout{gap:45px}.product-preview{max-width:760px;margin:auto}.bonus-section{padding-left:24px;padding-right:24px}.morning-preview,.verses-preview,.cards-preview{max-width:700px;width:100%;margin:auto}.verses-preview{order:2}.calendar-preview{max-width:700px;margin:auto}.guide-preview{max-width:720px;margin:auto}.offer-visual{max-width:800px;margin:auto}.offer-details{max-width:620px;margin:auto}.final-cta-section figure{max-width:720px;margin:auto}.ritual-steps{grid-template-columns:repeat(3,1fr);row-gap:40px}.themes-list{grid-template-columns:1fr}.cards-section{grid-template-columns:1fr}.cards-copy{max-width:700px;margin:auto}.audience-columns{grid-template-columns:1fr}.not-for-you{border-left:0;border-top:1px solid var(--line)}} @media(max-width:680px){:root{--content:calc(100% - 32px)}body{font-size:15px}.site-header{height:68px;padding:0 16px}.site-header nav>a:not(.header-cta){display:none}.header-cta{padding:8px 11px}.brand strong{font-size:15px}.hero-section{padding-top:55px;min-height:auto}.hero-content{width:var(--content);text-align:left}.hero-copy .button{width:100%}.hero-copy .assurance{text-align:center}.hero-product{margin-top:30px}.hero-product img{width:120%;max-width:none;margin-left:-10%}.hero-product figcaption{font-size:11px}.problem-section,.solution-section,.product-section,.audience-section,.offer-section,.faq-section{padding-top:78px;padding-bottom:78px}h1{font-size:39px}h2{font-size:34px}.problem-heading{display:block}.problem-scene{display:grid;min-height:0;gap:12px;padding:35px 0}.problem-copy{max-width:none}.thought{position:static;transform:none!important;border-radius:4px;max-width:none;margin-left:20px;font-size:15px}.thought:nth-of-type(even){margin-left:50px}.problem-conclusion{grid-template-columns:1fr;margin-top:35px;gap:10px}.problem-conclusion>blockquote{grid-column:auto;font-size:25px;padding-left:20px}.ritual-steps{grid-template-columns:1fr;margin-top:45px}.ritual-steps li{min-height:auto;display:grid;grid-template-columns:60px 80px 1fr;align-items:center;padding:12px 0}.ritual-steps li:after{left:0}.ritual-steps span{font-size:30px}.no-pressure{font-size:22px;margin-top:45px}.main-product{margin-top:45px}.product-preview img{transform:none}.product-copy h3,.bonus-copy h2{font-size:31px}.themes-list{margin-top:50px}.themes-list ol{grid-template-columns:1fr}.bonus-section,.calendar-section,.cards-section,.guide-section{padding:78px 16px;gap:35px}.morning-preview{min-height:430px}.sun-page{width:68%;padding:20px}.morning-preview img{width:105%;right:-12%}.verses-preview{min-height:500px}.verse-page{width:78%;padding:28px 22px}.verse-page.shifted{left:20%;top:170px}.calendar-preview{padding:20px}.calendar-preview ol{gap:4px}.calendar-preview li{font-size:12px}.cards-preview{height:480px}.print-sheet{width:270px;padding:18px}.prayer-card{width:110px;font-size:15px}.card-one{right:7%}.card-two{right:0;top:115px}.card-three{right:26%;bottom:0}.guide-preview{grid-template-columns:.8fr 1.2fr}.guide-cover{min-height:350px;padding:25px 15px}.guide-cover h3{font-size:25px}.guide-page{min-height:395px;padding:25px 16px}.guide-page h3{font-size:20px}.guide-page li{font-size:12px}.audience-columns{margin-top:35px}.audience-columns article{padding:28px 22px}.presence-quote{font-size:21px}.offer-layout{margin-top:30px}.offer-visual img{width:120%;max-width:none;margin-left:-10%;transform:none}.offer-visual figcaption{flex-wrap:wrap}.offer-details{padding:28px 20px}.offer-details .button{font-size:12px}.guarantee-section{padding:78px 16px;grid-template-columns:1fr;text-align:center;gap:30px}.guarantee-mark{margin:auto;width:125px}.guarantee-section h2{font-size:34px}.faq-question{font-size:18px;gap:16px}.final-cta-section{padding:78px 16px;gap:25px}.final-copy .button{width:100%}.footer-section{flex-direction:column;gap:22px;text-align:center;padding:35px 16px}.footer-section nav{order:2}} @media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}.js [data-reveal]{opacity:1;transform:none}} /* Editorial immersion revision */ :root{ --paper-shadow-soft:0 12px 32px rgba(76,49,16,.10),0 2px 5px rgba(76,49,16,.07); --paper-shadow-deep:0 34px 72px rgba(61,40,14,.18),0 8px 18px rgba(61,40,14,.10); --night-shadow:0 44px 82px rgba(0,8,20,.44),0 12px 26px rgba(0,8,20,.26); --ease-premium:cubic-bezier(.22,1,.36,1); } main>section{position:relative;overflow:clip} .site-header,.footer-section{max-width:none} .site-header{height:78px;border-bottom-color:rgba(255,208,102,.14)} .site-header:after{content:"";position:absolute;left:var(--gutter);right:var(--gutter);bottom:-1px;height:1px;background:linear-gradient(90deg,transparent,rgba(255,208,102,.3),transparent)} .header-cta{min-height:42px;display:inline-flex;align-items:center;transition:transform .25s var(--ease-premium),background-color .25s,box-shadow .25s} .header-cta:hover{transform:translateY(-2px);background:rgba(245,181,54,.08);box-shadow:0 10px 24px rgba(0,8,20,.2)} h1,h2,h3{font-weight:650} h3{font-size:clamp(28px,2vw,38px);line-height:1.14} .section-heading{max-width:900px} .section-heading h2{max-width:850px;margin-inline:auto} .section-heading>p:last-child{max-width:680px;margin-inline:auto} .button{min-height:60px;border-radius:5px;transition:transform .25s var(--ease-premium),box-shadow .25s var(--ease-premium),filter .25s} .button:hover{transform:translateY(-2px);filter:brightness(1.035);box-shadow:0 20px 42px rgba(245,181,54,.28),inset 0 1px rgba(255,255,255,.55)} .button:active{transform:translateY(0) scale(.99)} .night-section{background-image:radial-gradient(circle at 7% 13%,rgba(255,208,102,.75) 0 1px,transparent 1.7px),radial-gradient(circle at 18% 72%,rgba(255,208,102,.36) 0 1.2px,transparent 2px),radial-gradient(circle at 73% 18%,rgba(255,240,188,.72) 0 1px,transparent 1.9px),radial-gradient(circle at 91% 61%,rgba(255,208,102,.48) 0 1.3px,transparent 2.1px),radial-gradient(circle at 48% 87%,rgba(255,208,102,.28) 0 .8px,transparent 1.7px);background-size:211px 173px,337px 263px,419px 311px,277px 401px,503px 367px;background-position:13px 7px,71px 43px,123px -21px,-37px 89px,181px 27px} .hero-section{isolation:isolate;background-color:var(--navy-deep)} .hero-section:before{content:"";position:absolute;z-index:-1;inset:0;background:radial-gradient(ellipse 52% 68% at 76% 47%,rgba(38,100,144,.25),transparent 66%),radial-gradient(ellipse 34% 43% at 69% 48%,rgba(245,181,54,.14),transparent 68%),linear-gradient(90deg,rgba(3,24,47,.96) 0 38%,rgba(3,24,47,.64) 64%,rgba(3,24,47,.92) 100%)} .hero-section:after{height:170px;background:linear-gradient(transparent,rgba(0,9,23,.42))} .hero-content{height:100%;gap:28px} .hero-copy{align-self:center;padding-bottom:18px} .hero-copy h1{margin-bottom:24px} .hero-lead{max-width:580px;font-size:18px;line-height:1.62;margin-bottom:28px} .kit-note{font-size:12px;letter-spacing:.07em;margin-top:22px} .hero-product{align-self:center;isolation:isolate;transform:translateX(2%)} .hero-product:before{content:"";position:absolute;z-index:0;width:84%;height:19%;left:9%;bottom:3%;border-radius:50%;background:rgba(0,7,17,.55);filter:blur(24px);transform:perspective(500px) rotateX(68deg)} .hero-product:after{content:"";position:absolute;z-index:1;inset:17% 7% 13%;border-radius:50%;background:radial-gradient(circle at 52% 38%,rgba(255,218,125,.16),rgba(31,98,145,.10) 38%,transparent 70%);filter:blur(15px)} .hero-product .halo{z-index:1;width:72%;left:15%;top:9%;background:radial-gradient(circle,rgba(255,198,73,.20),rgba(17,80,123,.12) 46%,transparent 72%);filter:blur(4px)} .hero-product img{z-index:3;width:112%;max-width:none;margin-left:-5%;transform:translate3d(0,var(--hero-float,0),0);filter:drop-shadow(0 42px 30px rgba(0,0,0,.42));will-change:transform} .hero-product figcaption{z-index:4;margin-top:-3%;box-shadow:0 18px 44px rgba(0,8,20,.4);border:1px solid rgba(108,66,31,.16)} .paper-section,.solution-section,.audience-section,.faq-section{background-color:var(--cream);background-image:radial-gradient(circle at 10% 8%,rgba(245,181,54,.08),transparent 28%),radial-gradient(circle at 92% 88%,rgba(11,53,87,.055),transparent 30%),linear-gradient(90deg,rgba(108,66,31,.018) 1px,transparent 1px),linear-gradient(rgba(108,66,31,.014) 1px,transparent 1px);background-size:auto,auto,42px 42px,42px 42px} .problem-section:after,.product-section:before,.audience-section:before,.faq-section:before{content:"";position:absolute;left:50%;width:min(1280px,calc(100% - 64px));transform:translateX(-50%);height:1px;background:linear-gradient(90deg,transparent,var(--line) 18%,var(--line) 82%,transparent)} .problem-section:after{bottom:0}.product-section:before,.audience-section:before,.faq-section:before{top:0} .problem-section{padding:130px 0 145px} .problem-heading{grid-template-columns:1fr;max-width:980px;text-align:center} .problem-heading h2{margin-inline:auto;max-width:920px} .problem-scene{margin-top:58px;min-height:390px} .problem-conclusion{margin-top:54px} .solution-section{padding:132px 0 142px;background-color:var(--warm-white);isolation:isolate} .solution-section:after{content:"";position:absolute;z-index:-1;right:max(-110px,calc((100% - 1280px)/2 - 150px));bottom:-55px;width:460px;aspect-ratio:1.5;background:url("https://buenasnochescondios.com/wp-content/uploads/lp-html-fb/lovable/480-teste-ab-2/20260930230128-c904968d/assets/images/kit-completo.webp") center/contain no-repeat;opacity:.075;transform:rotate(-4deg)} .solution-section .section-heading{max-width:850px} .solution-section .section-heading h2{font-size:clamp(42px,3vw,56px)} .ritual-steps{margin-top:58px;background:rgba(255,251,242,.72);box-shadow:var(--paper-shadow-soft);border:1px solid rgba(223,211,183,.78);padding:34px 20px 28px;transform:rotate(-.25deg)} .no-pressure{margin-top:48px}.solution-close{margin-top:12px} .product-section{padding:142px 0 160px} .main-product{margin-top:62px;grid-template-columns:1.08fr .92fr;gap:60px} .product-preview{isolation:isolate} .product-preview:before{content:"";position:absolute;z-index:-1;left:7%;right:2%;bottom:0;height:22%;background:rgba(83,55,21,.18);filter:blur(26px);border-radius:50%} .product-preview img{width:112%;max-width:none;margin-left:-9%;transform:rotate(-1.2deg);filter:drop-shadow(0 34px 28px rgba(49,35,16,.23))} .sample-page{margin-left:-36px;padding:34px 32px;box-shadow:var(--paper-shadow-deep);transform:rotate(1.2deg)} .themes-list{margin-top:88px} .bonus-section{--bonus-accent:var(--gold);min-height:720px;padding-top:132px;padding-bottom:142px} .bonus-section .material-number{color:var(--bonus-accent)} .bonus-section .bonus-copy h2,.calendar-copy h2,.cards-copy h2{max-width:570px;font-size:clamp(40px,3vw,54px)} .morning-section{--bonus-accent:#b66a30;background:radial-gradient(circle at 82% 20%,rgba(245,181,54,.23),transparent 29%),linear-gradient(115deg,#f9edd5 0 57%,#f3dfb8 100%)} .morning-preview:after,.verses-preview:after,.cards-preview:after,.guide-preview:after{content:"";position:absolute;z-index:0;left:10%;right:6%;bottom:3%;height:14%;background:rgba(73,47,16,.15);border-radius:50%;filter:blur(24px)} .morning-preview>*{z-index:2}.morning-preview img{z-index:1;width:92%;right:-7%;bottom:-3%;filter:drop-shadow(0 34px 28px rgba(85,55,14,.22));transform:rotate(1.5deg)} .sun-page{width:56%;top:-1%;left:-2%;padding:34px;box-shadow:var(--paper-shadow-deep);transform:rotate(-4.5deg)} .verses-section{--bonus-accent:var(--sage);background:radial-gradient(circle at 15% 50%,rgba(102,122,82,.12),transparent 34%),var(--warm-white)} .verses-preview{min-height:570px} .verse-page{z-index:2;width:68%;padding:48px 38px;box-shadow:var(--paper-shadow-deep);transform:rotate(-5deg)} .verse-page.shifted{z-index:3;left:33%;top:138px;transform:rotate(4deg)} .calendar-section{--bonus-accent:var(--coral);grid-template-columns:.72fr 1.28fr;background-color:var(--cream)} .calendar-preview{padding:48px;box-shadow:var(--paper-shadow-deep);transform:rotate(1.2deg);position:relative} .calendar-preview:before{content:"";position:absolute;inset:13px -12px -15px 14px;z-index:-1;background:#efe1bf;border:1px solid var(--line);transform:rotate(-2deg);box-shadow:var(--paper-shadow-soft)} .cards-section{--bonus-accent:#aa6f33;grid-template-columns:.58fr 1.42fr;background:radial-gradient(circle at 76% 42%,rgba(245,181,54,.15),transparent 34%),#f4ead5} .cards-preview{height:620px} .print-sheet{z-index:1;width:410px;left:2%;top:7%;box-shadow:var(--paper-shadow-deep)} .prayer-card{z-index:3;box-shadow:0 22px 38px rgba(55,36,15,.22),0 3px 8px rgba(55,36,15,.10)} .card-one{right:23%;top:-2%}.card-two{right:1%;top:104px}.card-three{right:31%;bottom:1%}.card-four{right:4%;bottom:-2%} .guide-section{--bonus-accent:var(--navy-soft);grid-template-columns:1.2fr .8fr;background-color:var(--warm-white)} .guide-preview{position:relative;transform:rotate(-.6deg);filter:none} .guide-cover{box-shadow:var(--night-shadow)} .guide-page{box-shadow:var(--paper-shadow-deep);position:relative;z-index:2} .audience-section{padding:138px 0 145px} .audience-columns{box-shadow:var(--paper-shadow-soft);border:1px solid var(--line)} .offer-section{padding:138px 0 150px;isolation:isolate} .offer-section:before{content:"";position:absolute;z-index:-1;inset:0;background:radial-gradient(ellipse 42% 42% at 31% 55%,rgba(245,181,54,.13),transparent 72%),radial-gradient(ellipse 35% 48% at 80% 60%,rgba(33,91,132,.20),transparent 75%)} .offer-layout{grid-template-columns:1.08fr .92fr} .offer-visual{position:relative} .offer-visual:after{content:"";position:absolute;z-index:-1;left:7%;right:7%;bottom:8%;height:15%;background:rgba(0,5,14,.55);filter:blur(28px);border-radius:50%} .offer-visual img{transform:scale(1.08);filter:drop-shadow(0 42px 30px rgba(0,0,0,.45))} .offer-details{border:1px solid rgba(255,208,102,.26);box-shadow:var(--night-shadow)} .guarantee-section{padding:125px 0} .faq-section{padding:128px 0 142px} .faq-item{transition:border-color .25s,background-color .25s} .faq-item:hover{border-color:rgba(108,66,31,.42);background:rgba(255,255,255,.22)} .faq-question{padding:27px 6px} .faq-question span{transition:transform .35s var(--ease-premium)} .faq-answer{transition:grid-template-rows .42s var(--ease-premium),opacity .35s;opacity:1} .js .faq-answer{opacity:.6} .js .faq-item[open] .faq-answer{opacity:1} .final-cta-section{padding-top:132px;padding-bottom:138px} .final-cta-section figure{position:relative} .final-cta-section figure:after{content:"";position:absolute;z-index:-1;left:8%;right:8%;bottom:5%;height:16%;background:rgba(0,5,14,.55);filter:blur(25px);border-radius:50%} .js [data-reveal]{--scroll-y:30px;--scroll-scale:1;--scroll-opacity:0;opacity:var(--scroll-opacity);transform:translate3d(0,var(--scroll-y),0) scale(var(--scroll-scale));transition:opacity .85s var(--ease-premium),transform .9s var(--ease-premium);will-change:transform,opacity} .js [data-reveal].is-product{--scroll-y:45px;--scroll-scale:.97} .js [data-reveal].is-visible{--scroll-y:0px;--scroll-scale:1;--scroll-opacity:1} .js .hero-copy[data-reveal]{opacity:1;transform:none;transition:none} .js .hero-copy[data-reveal]>*{opacity:0;transform:translateY(22px)} .js .hero-copy[data-reveal].is-visible>*{animation:hero-enter .78s var(--ease-premium) both} .js .hero-copy[data-reveal].is-visible>*:nth-child(2){animation-delay:.09s}.js .hero-copy[data-reveal].is-visible>*:nth-child(3){animation-delay:.18s}.js .hero-copy[data-reveal].is-visible>*:nth-child(4){animation-delay:.25s}.js .hero-copy[data-reveal].is-visible>*:nth-child(5){animation-delay:.3s} @keyframes hero-enter{to{opacity:1;transform:translateY(0)}} @keyframes hero-float{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(0,-5px,0)}} .js .hero-product.is-visible img{animation:hero-float 8s ease-in-out 1.05s infinite} @media(max-width:1050px){ :root{--content:min(920px,calc(100% - 56px));--gutter:max(28px,calc((100% - 920px)/2))} .hero-section{height:auto;min-height:auto;padding:72px 0 64px} .hero-content{height:auto;gap:18px} .hero-copy{max-width:820px;padding:0} .hero-copy h1{max-width:820px;margin-inline:auto} .hero-lead{max-width:700px} .hero-product{transform:none;max-width:820px;margin-top:38px} .hero-product img{width:100%;margin-left:0} .problem-heading{max-width:850px} .solution-section:after{width:320px;opacity:.055} .main-product{grid-template-columns:1fr;gap:42px} .product-preview img{width:100%;margin-left:0} .sample-page{margin-left:0} .bonus-section{min-height:0;padding-left:var(--gutter);padding-right:var(--gutter)} .morning-preview img{width:88%;right:0} .verses-preview{order:2} .calendar-section,.cards-section,.guide-section{grid-template-columns:1fr} .cards-preview{max-width:720px} .offer-layout{grid-template-columns:1fr} } @media(max-width:680px){ :root{--content:calc(100% - 40px);--gutter:20px} body{font-size:15px} .site-header{height:68px;padding-inline:20px} .site-header:after{left:20px;right:20px} .hero-section{padding:56px 0 46px} .hero-content{width:var(--content);text-align:left} h1{font-size:clamp(40px,11vw,52px);line-height:1.02} h2{font-size:clamp(34px,9vw,43px)} h3{font-size:clamp(26px,7vw,32px)} .hero-lead{font-size:17px;line-height:1.58} .hero-product{margin-top:26px} .hero-product img{width:112%;max-width:none;margin-left:-6%} .problem-section,.solution-section,.product-section,.audience-section,.offer-section,.faq-section{padding-top:88px;padding-bottom:94px} .problem-heading{text-align:left} .problem-scene{margin-top:34px} .ritual-steps{padding:18px 16px 22px;transform:none} .main-product{margin-top:40px} .sample-page{padding:25px 22px} .bonus-section,.calendar-section,.cards-section,.guide-section{padding:90px 20px} .bonus-section .bonus-copy h2,.calendar-copy h2,.cards-copy h2{font-size:clamp(34px,9vw,43px)} .morning-preview{min-height:440px}.morning-preview img{width:100%;right:-3%}.sun-page{width:70%;padding:22px} .verses-preview{min-height:520px}.verse-page{width:80%;padding:30px 23px}.verse-page.shifted{left:18%;top:178px} .calendar-preview{padding:23px 18px}.calendar-preview:before{inset:8px -6px -10px 8px} .cards-preview{height:500px}.print-sheet{width:275px}.prayer-card{width:112px} .guide-preview{transform:none} .offer-visual img{width:110%;max-width:none;margin-left:-5%} .guarantee-section{padding:92px 20px} .final-cta-section{padding:92px 20px} .js [data-reveal].is-visible{--scroll-y:0px!important;--scroll-scale:1!important;--scroll-opacity:1!important} .js .hero-product.is-visible img{animation:none} } @media(prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *,*:before,*:after{animation:none!important;transition:none!important} .js [data-reveal],.js [data-reveal].is-visible,.js .hero-copy[data-reveal]>*{opacity:1!important;transform:none!important} } @media(min-width:1051px){ .hero-copy h1{font-size:clamp(54px,3.55vw,68px);max-width:650px} } @media(min-width:1600px){ .hero-content{grid-template-columns:minmax(0,51fr) minmax(0,49fr);gap:36px} .hero-copy h1{max-width:670px} } /* The accordion remains readable without JS; enhanced mode collapses it completely. */ .faq-answer p{min-height:0} .js .faq-answer{visibility:hidden;opacity:0} .js .faq-item[open] .faq-answer{visibility:visible;opacity:1} .skip-link:focus:not(:focus-visible){top:-5rem} /* Viewport-composed first fold */ :root{--header-height:78px} .hero-section{height:min(1050px,calc(100svh - var(--header-height)));min-height:620px;padding:32px 0 38px} .hero-content{height:100%;grid-template-columns:minmax(0,.94fr) minmax(0,1.06fr);gap:56px} .hero-copy{padding-bottom:0} .hero-copy h1{font-size:clamp(52px,3.1vw,64px);line-height:1;letter-spacing:-.02em;max-width:620px;margin-bottom:20px} .hero-lead{font-size:clamp(17px,1.05vw,19px);line-height:1.55;max-width:580px;margin-bottom:24px} .hero-copy .assurance{margin:10px 0} .hero-copy .kit-note{margin-top:16px} .hero-product{transform:translate3d(var(--tilt-x,0),var(--tilt-y,12px),0) perspective(1200px) rotateX(var(--tilt-rx,0deg)) rotateY(var(--tilt-ry,0deg));transform-style:preserve-3d;transition:transform .7s var(--ease-premium)} .hero-product:after{inset:12% 2% 8%;background:radial-gradient(circle at 52% 48%,rgba(245,181,54,.13),rgba(31,98,145,.11) 38%,transparent 70%);filter:blur(18px)} .hero-product img{width:auto;max-width:100%;max-height:min(720px,calc(100svh - 170px));margin-inline:auto;object-fit:contain} .scroll-cue{bottom:16px} .js [data-reveal]{filter:blur(6px);transition:opacity .85s var(--ease-premium),transform .9s var(--ease-premium),filter .8s var(--ease-premium)} .js [data-reveal].is-visible{filter:blur(0)} .js .hero-copy[data-reveal]>*{filter:blur(8px);transform:translateY(24px)} .js .hero-copy[data-reveal].is-visible>*{animation-duration:.9s} .js .hero-copy[data-reveal].is-visible>*:nth-child(1){animation-delay:.1s}.js .hero-copy[data-reveal].is-visible>*:nth-child(2){animation-delay:.22s}.js .hero-copy[data-reveal].is-visible>*:nth-child(3){animation-delay:.32s}.js .hero-copy[data-reveal].is-visible>*:nth-child(4){animation-delay:.32s}.js .hero-copy[data-reveal].is-visible>*:nth-child(5){animation-delay:.4s} .js .hero-product[data-reveal]{--scroll-y:35px;--scroll-scale:.965;transform:translate3d(var(--tilt-x,0),calc(var(--scroll-y) + var(--tilt-y,12px)),0) scale(var(--scroll-scale)) perspective(1200px) rotateX(var(--tilt-rx,0deg)) rotateY(var(--tilt-ry,0deg));transition-duration:1s;transition-delay:.18s} @keyframes hero-enter{to{opacity:1;filter:blur(0);transform:translateY(0)}} @media(min-width:1051px) and (max-height:820px){ :root{--header-height:74px} .site-header{height:var(--header-height)} .hero-section{height:calc(100svh - var(--header-height));min-height:0;padding:20px 0 28px} .hero-content{gap:48px} .hero-copy h1{font-size:48px;line-height:.99;max-width:610px;margin-bottom:16px} .hero-lead{font-size:16px;line-height:1.5;max-width:570px;margin-bottom:20px} .hero-copy .button{min-height:58px;padding-block:14px} .hero-copy .assurance{margin:8px 0} .hero-copy .kit-note{margin-top:10px;font-size:11px} .hero-product{--tilt-y:6px} .hero-product img{max-height:calc(100svh - 150px)} .hero-product figcaption{margin-top:-5%;font-size:12px;padding:7px 13px} .scroll-cue{bottom:9px} } @media(max-width:1050px){ .hero-section{height:auto;min-height:auto;padding:72px 0 64px} .hero-content{height:auto;grid-template-columns:1fr;gap:18px} .hero-copy h1{font-size:clamp(52px,6.4vw,66px);line-height:1.01;letter-spacing:-.015em;max-width:820px} .hero-product{transform:none} .hero-product img{width:100%;max-height:none} } @media(max-width:680px){ .hero-section{height:auto;min-height:auto;padding:56px 0 46px} .hero-copy h1{font-size:clamp(40px,11vw,52px);line-height:1.02;letter-spacing:-.01em} .hero-product img{width:112%;max-width:none;margin-left:-6%} .js [data-reveal].is-visible{filter:none} .js .hero-product[data-reveal]{transform:translate3d(0,var(--scroll-y),0) scale(var(--scroll-scale))} } @media(prefers-reduced-motion:reduce){ .hero-product{transform:none!important} .js [data-reveal],.js [data-reveal].is-visible,.js .hero-copy[data-reveal]>*{filter:none!important} } /* GitHub visual refresh: Ribbon Field hero + Shiny CTA */ @property --gleam-angle { syntax: ""; initial-value: 0deg; inherits: false; } @property --gleam-angle-offset { syntax: ""; initial-value: 0deg; inherits: false; } @property --gleam-percent { syntax: ""; initial-value: 5%; inherits: false; } @property --gleam-shine { syntax: ""; initial-value: white; inherits: false; } /* * Ribbon Field adaptation of the supplied 21st.dev "my gradient". * Same stripe geometry, grain and vignette; palette remapped to this * landing page's night-blue + gold identity. */ .hero-section { background-color: #062746; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.50'/%3E%3C/svg%3E"), radial-gradient(circle at 50% 50%, rgba(0, 0, 0, 0) 52%, rgba(0, 9, 23, 0.38) 100%), linear-gradient( 135deg, #03182f 0.91%, #03182f 42.59%, #0b3557 43.89%, #0b3557 48.11%, #f5b536 48.89%, #f5b536 56.11%, #062746 58.19%, #062746 79.81%, #03182f 81.5%, #03182f 100% ); background-size: 120px 120px, auto, auto; background-blend-mode: overlay, normal, normal; } /* Preserve contrast over the identity-colored ribbon field. */ .hero-section::before { background: radial-gradient(ellipse 54% 70% at 76% 47%, rgba(11, 53, 87, 0.16), transparent 66%), radial-gradient(ellipse 32% 42% at 70% 50%, rgba(245, 181, 54, 0.08), transparent 70%), linear-gradient(90deg, rgba(3, 24, 47, 0.98) 0 31%, rgba(3, 24, 47, 0.76) 52%, rgba(3, 24, 47, 0.28) 76%, rgba(3, 24, 47, 0.68) 100%); } /* * Shiny Button adaptation of the supplied component. * Applied to every purchase/action CTA while preserving each href. */ .button, .header-cta { --gleam-base: #03182f; --gleam-inset: #0b3557; --gleam-label: #fff5dc; --gleam-accent: #f5b536; --gleam-accent-soft: #ffd066; --gleam-duration: 3s; --gleam-transition: 0.8s cubic-bezier(0.25, 1, 0.5, 1); --gleam-shadow-size: 2px; isolation: isolate; position: relative; overflow: hidden; cursor: pointer; outline-offset: 4px; border: 1px solid transparent; border-radius: 32px; color: var(--gleam-label); background: linear-gradient(var(--gleam-base), var(--gleam-base)) padding-box, conic-gradient( from calc(var(--gleam-angle) - var(--gleam-angle-offset)), transparent, var(--gleam-accent) var(--gleam-percent), var(--gleam-shine) calc(var(--gleam-percent) * 2), var(--gleam-accent) calc(var(--gleam-percent) * 3), transparent calc(var(--gleam-percent) * 4) ) border-box; box-shadow: inset 0 0 0 1px var(--gleam-inset), 0 14px 34px rgba(0, 9, 23, 0.22); transition: var(--gleam-transition); transition-property: --gleam-angle-offset, --gleam-percent, --gleam-shine, transform, box-shadow; animation: gleam-angle var(--gleam-duration) linear infinite; } .button { min-height: 60px; padding: 16px 28px; } .header-cta { min-height: 42px; padding: 9px 18px; } .button::before, .button::after, .header-cta::before, .header-cta::after { content: ""; pointer-events: none; position: absolute; inset-inline-start: 50%; inset-block-start: 50%; translate: -50% -50%; z-index: -1; } .button::before, .header-cta::before { --gleam-size: calc(100% - var(--gleam-shadow-size) * 3); --gleam-position: 2px; --gleam-space: calc(var(--gleam-position) * 2); width: var(--gleam-size); height: var(--gleam-size); background: radial-gradient( circle at var(--gleam-position) var(--gleam-position), white calc(var(--gleam-position) / 4), transparent 0 ) padding-box; background-size: var(--gleam-space) var(--gleam-space); background-repeat: space; -webkit-mask-image: conic-gradient( from calc(var(--gleam-angle) + 45deg), black, transparent 10% 90%, black ); mask-image: conic-gradient( from calc(var(--gleam-angle) + 45deg), black, transparent 10% 90%, black ); border-radius: inherit; opacity: 0.34; } .button::after, .header-cta::after { width: 100%; aspect-ratio: 1; background: linear-gradient( -50deg, transparent, var(--gleam-accent), transparent ); -webkit-mask-image: radial-gradient(circle at bottom, transparent 40%, black); mask-image: radial-gradient(circle at bottom, transparent 40%, black); opacity: 0.46; animation: gleam-shimmer var(--gleam-duration) linear infinite; } .button:is(:hover, :focus-visible), .header-cta:is(:hover, :focus-visible) { --gleam-percent: 20%; --gleam-angle-offset: 95deg; --gleam-shine: var(--gleam-accent-soft); color: #fffaf0; transform: translateY(-2px); filter: none; box-shadow: inset 0 0 0 1px var(--gleam-inset), 0 20px 42px rgba(245, 181, 54, 0.22); } .button:active, .header-cta:active { transform: translateY(1px) scale(0.995); } .button:focus-visible, .header-cta:focus-visible { outline: 2px solid var(--gleam-accent-soft); } .offer-details .button { color: var(--gleam-label); } @keyframes gleam-angle { to { --gleam-angle: 360deg; } } @keyframes gleam-shimmer { to { rotate: 360deg; } } @media (prefers-reduced-motion: reduce) { .button, .button::before, .button::after, .header-cta, .header-cta::before, .header-cta::after { animation: none !important; transition: none !important; } .button:is(:hover, :focus-visible), .header-cta:is(:hover, :focus-visible) { --gleam-percent: 5%; --gleam-angle-offset: 0deg; --gleam-shine: white; transform: none; } } /* Premium motion pass: animated hero + responsive problem section */ /* Hero: keep the ribbon identity, but make the field feel alive. */ .hero-section { background-size: 120px 120px, 145% 145%, 185% 185%; background-position: 0 0, 50% 50%, 48% 52%; animation: hero-ribbon-drift 16s ease-in-out infinite alternate; } .hero-section::before { transform-origin: 68% 50%; animation: hero-ambient-drift 11s ease-in-out infinite alternate; } .hero-product .halo { animation: hero-halo-breathe 5.5s ease-in-out infinite; } @keyframes hero-ribbon-drift { 0% { background-position: 0 0, 44% 48%, 46% 54%; } 50% { background-position: 18px -10px, 55% 44%, 54% 46%; } 100% { background-position: 36px -20px, 62% 54%, 48% 50%; } } @keyframes hero-ambient-drift { 0% { transform: translate3d(-1.5%, 0, 0) scale(1.02); opacity: .9; } 50% { transform: translate3d(1.5%, -1%, 0) scale(1.055); opacity: 1; } 100% { transform: translate3d(0, 1%, 0) scale(1.035); opacity: .94; } } @keyframes hero-halo-breathe { 0%, 100% { transform: scale(.96); opacity: .72; filter: blur(4px); } 50% { transform: scale(1.07); opacity: 1; filter: blur(7px); } } /* Section 2: editorial composition instead of floating speech bubbles. */ .problem-section { isolation: isolate; padding: clamp(92px, 9vw, 150px) 0 clamp(98px, 9vw, 145px); background: radial-gradient(circle at 14% 20%, rgba(245,181,54,.11), transparent 25%), radial-gradient(circle at 88% 68%, rgba(11,53,87,.075), transparent 28%), var(--cream); } .problem-section::before { content: ""; position: absolute; z-index: -1; width: min(520px, 44vw); aspect-ratio: 1; top: 23%; right: -11%; border-radius: 50%; background: radial-gradient(circle, rgba(245,181,54,.13), transparent 67%); filter: blur(8px); animation: problem-orb 10s ease-in-out infinite alternate; } .problem-heading { position: relative; z-index: 2; max-width: 1040px; } .problem-heading h2 { max-width: 980px; text-wrap: balance; letter-spacing: -.018em; } .problem-heading h2::after { content: ""; display: block; width: clamp(62px, 8vw, 118px); height: 3px; margin: 28px auto 0; border-radius: 999px; background: linear-gradient(90deg, transparent, var(--gold), transparent); transform-origin: center; animation: problem-line 4.8s ease-in-out infinite; } .problem-scene { min-height: 0; margin-top: clamp(42px, 5vw, 68px); padding: clamp(28px, 4vw, 52px); display: grid; grid-template-columns: minmax(280px, .82fr) minmax(420px, 1.18fr); grid-template-rows: repeat(4, minmax(74px, auto)); gap: 14px clamp(34px, 5vw, 72px); align-items: center; border: 1px solid rgba(108,66,31,.14); border-radius: 30px; background: linear-gradient(120deg, rgba(255,251,242,.9), rgba(255,245,220,.78)), radial-gradient(circle at 78% 30%, rgba(245,181,54,.1), transparent 38%); box-shadow: 0 30px 80px rgba(76,49,16,.09), inset 0 1px rgba(255,255,255,.85); overflow: hidden; } .problem-scene::before { content: ""; position: absolute; inset: 18px; pointer-events: none; border: 1px solid rgba(245,181,54,.13); border-radius: 22px; } .problem-copy { grid-column: 1; grid-row: 1 / 5; position: relative; z-index: 2; max-width: 430px; padding: 10px clamp(8px, 1vw, 18px) 10px 0; font-family: var(--serif); } .problem-copy::before { content: ""; position: absolute; left: -20px; top: 10px; bottom: 10px; width: 3px; border-radius: 999px; background: linear-gradient(180deg, var(--gold), rgba(245,181,54,.08)); box-shadow: 0 0 28px rgba(245,181,54,.22); } .problem-copy p:first-child { margin-bottom: 28px; font-size: clamp(30px, 2.2vw, 40px); line-height: 1.38; letter-spacing: -.015em; } .problem-copy p:last-child { max-width: 390px; margin-bottom: 0; font-family: var(--sans); font-size: clamp(15px, 1.15vw, 18px); line-height: 1.7; color: rgba(16,43,67,.76); } .thought { position: relative; inset: auto; z-index: 2; max-width: none; width: min(100%, 520px); margin: 0; padding: 16px 20px 16px 48px; border: 1px solid rgba(108,66,31,.13); border-radius: 18px; background: rgba(255,251,242,.92); box-shadow: 0 13px 30px rgba(76,49,16,.09), inset 0 1px rgba(255,255,255,.9); font-family: var(--serif); font-size: clamp(16px, 1.3vw, 20px); line-height: 1.35; font-style: italic; color: var(--navy); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); will-change: transform; } .thought::before { content: ""; position: absolute; left: 20px; top: 50%; width: 10px; height: 10px; margin-top: -5px; border: 2px solid var(--gold); border-radius: 50%; box-shadow: 0 0 0 5px rgba(245,181,54,.11); } .thought-one { grid-column: 2; grid-row: 1; justify-self: start; transform: translateX(2%) rotate(-.6deg); animation: thought-drift-one 6.8s ease-in-out infinite; } .thought-two { grid-column: 2; grid-row: 2; justify-self: end; transform: translateX(-2%) rotate(.7deg); animation: thought-drift-two 7.6s ease-in-out -.8s infinite; } .thought-three { grid-column: 2; grid-row: 3; justify-self: start; transform: translateX(8%) rotate(-.45deg); animation: thought-drift-one 7.2s ease-in-out -1.5s infinite; } .thought-four { grid-column: 2; grid-row: 4; justify-self: end; max-width: 560px; transform: translateX(-1%) rotate(.55deg); animation: thought-drift-two 8s ease-in-out -2.1s infinite; } .problem-conclusion { position: relative; z-index: 2; gap: clamp(24px, 4vw, 50px); margin-top: clamp(48px, 6vw, 72px); } .problem-conclusion > p { margin: 0; padding: 22px 24px; border-top: 1px solid rgba(108,66,31,.18); color: rgba(16,43,67,.78); } .problem-conclusion > blockquote { position: relative; overflow: hidden; margin-top: 20px; padding: clamp(28px, 4vw, 44px) clamp(26px, 5vw, 58px); border: 0; border-radius: 24px; background: var(--navy-deep); color: var(--cream); box-shadow: 0 26px 58px rgba(3,24,47,.18); } .problem-conclusion > blockquote::after { content: ""; position: absolute; width: 240px; aspect-ratio: 1; right: -90px; top: -110px; border-radius: 50%; background: radial-gradient(circle, rgba(245,181,54,.2), transparent 66%); animation: problem-quote-glow 6s ease-in-out infinite alternate; } @keyframes thought-drift-one { 0%, 100% { transform: translate3d(2%, 0, 0) rotate(-.6deg); } 50% { transform: translate3d(4%, -7px, 0) rotate(.2deg); } } @keyframes thought-drift-two { 0%, 100% { transform: translate3d(-2%, 0, 0) rotate(.7deg); } 50% { transform: translate3d(-4%, 7px, 0) rotate(-.2deg); } } @keyframes problem-orb { to { transform: translate3d(-7%, 7%, 0) scale(1.08); } } @keyframes problem-line { 0%, 100% { transform: scaleX(.72); opacity: .62; } 50% { transform: scaleX(1); opacity: 1; } } @keyframes problem-quote-glow { to { transform: translate3d(-16px, 18px, 0) scale(1.12); opacity: .7; } } @media (max-width: 1050px) { .problem-scene { grid-template-columns: minmax(250px, .8fr) minmax(360px, 1.2fr); gap: 12px 30px; padding: 36px 34px; } .problem-copy::before { left: -14px; } .thought { padding-left: 44px; } } @media (max-width: 760px) { .problem-section { padding: 84px 0 94px; } .problem-heading { text-align: left; } .problem-heading h2 { font-size: clamp(34px, 9vw, 46px); line-height: 1.06; } .problem-heading h2::after { margin-left: 0; } .problem-scene { display: grid; grid-template-columns: 1fr; grid-template-rows: auto; gap: 12px; margin-top: 36px; padding: 28px 22px; border-radius: 24px; } .problem-scene::before { inset: 10px; border-radius: 17px; } .problem-copy, .thought-one, .thought-two, .thought-three, .thought-four { grid-column: 1; grid-row: auto; } .problem-copy { max-width: none; padding: 0 4px 18px 16px; } .problem-copy::before { left: 0; top: 0; bottom: 20px; } .problem-copy p:first-child { font-size: clamp(27px, 7.5vw, 34px); line-height: 1.35; } .thought, .thought-one, .thought-two, .thought-three, .thought-four { width: 100%; max-width: none; justify-self: stretch; transform: none; animation: thought-drift-mobile 6.5s ease-in-out infinite; } .thought-two { animation-delay: -.9s; } .thought-three { animation-delay: -1.8s; } .thought-four { animation-delay: -2.7s; } .problem-conclusion { grid-template-columns: 1fr; gap: 12px; margin-top: 38px; } .problem-conclusion > p { padding: 18px 4px; } .problem-conclusion > blockquote { grid-column: 1; margin-top: 8px; padding: 28px 24px; font-size: clamp(24px, 7vw, 32px); line-height: 1.35; } @keyframes thought-drift-mobile { 0%, 100% { transform: translate3d(0, 0, 0); } 50% { transform: translate3d(0, -4px, 0); } } } @media (max-width: 480px) { .problem-section { padding-top: 72px; padding-bottom: 82px; } .problem-scene { width: calc(100% - 24px); padding: 22px 16px; border-radius: 20px; } .problem-copy { padding-left: 14px; } .problem-copy p:first-child { margin-bottom: 20px; } .thought { padding: 15px 16px 15px 42px; border-radius: 15px; font-size: 16px; } .thought::before { left: 17px; width: 8px; height: 8px; margin-top: -4px; } .problem-conclusion > blockquote { border-radius: 19px; } } @media (prefers-reduced-motion: reduce) { .hero-section, .hero-section::before, .hero-product .halo, .problem-section::before, .problem-heading h2::after, .thought, .problem-conclusion > blockquote::after { animation: none !important; } } /* Mobile alignment + animated ritual timeline refinement */ /* Remove the decorative book ghost from the solution section. */ .solution-section::after { content: none !important; display: none !important; } /* Rebuild the ritual steps as a cleaner animated timeline. */ .solution-section { overflow: hidden; background: radial-gradient(circle at 50% -18%, rgba(245,181,54,.09), transparent 34%), linear-gradient(180deg, #fffdf8 0%, var(--warm-white) 100%); } .solution-section .section-heading { position: relative; z-index: 2; } .solution-section .section-heading h2 { text-wrap: balance; letter-spacing: -.018em; } .ritual-steps { position: relative; isolation: isolate; overflow: hidden; margin-top: 62px; padding: 42px 28px 34px; border: 1px solid rgba(108,66,31,.12); border-radius: 26px; background: linear-gradient(135deg, rgba(255,255,255,.84), rgba(255,248,232,.74)), radial-gradient(circle at 50% 0%, rgba(245,181,54,.08), transparent 42%); box-shadow: 0 28px 70px rgba(76,49,16,.10), inset 0 1px rgba(255,255,255,.92); transform: none; } .ritual-steps::before, .ritual-steps::after { content: ""; position: absolute; z-index: 0; left: 4%; right: 4%; bottom: 28px; height: 2px; border-radius: 999px; transform-origin: left center; } .ritual-steps::before { background: rgba(108,66,31,.16); } .ritual-steps::after { background: linear-gradient( 90deg, var(--gold) 0%, var(--gold-light) 34%, #fff4c7 50%, var(--gold-light) 66%, var(--gold) 100% ); background-size: 220% 100%; background-position: 100% 50%; box-shadow: 0 0 12px rgba(245,181,54,.24), 0 0 24px rgba(245,181,54,.18); transform: scaleX(0); opacity: .96; } .js .ritual-steps[data-reveal].is-visible::after { animation: ritual-progress 1.8s var(--ease-premium) .22s forwards, ritual-line-shimmer 2.8s linear 2.1s infinite; } .ritual-steps li { position: relative; z-index: 2; min-height: 150px; padding: 0 24px 34px; border-bottom: 0; opacity: 1; transform: none; } .ritual-steps li::after { z-index: 3; bottom: 22px; left: 24px; width: 12px; height: 12px; border: 3px solid var(--warm-white); background: var(--gold); box-shadow: 0 0 0 1px rgba(245,181,54,.45), 0 0 0 7px rgba(245,181,54,.10); } .ritual-steps span { margin-bottom: 8px; font-size: clamp(38px, 3vw, 48px); color: var(--gold); } .ritual-steps strong { margin-bottom: 2px; font-size: 15px; letter-spacing: -.01em; } .js .ritual-steps[data-reveal] li { opacity: 0; transform: translateY(20px); } .js .ritual-steps[data-reveal].is-visible li { animation: ritual-step-in .7s var(--ease-premium) forwards; } .js .ritual-steps[data-reveal].is-visible li:nth-child(1) { animation-delay: .16s; } .js .ritual-steps[data-reveal].is-visible li:nth-child(2) { animation-delay: .34s; } .js .ritual-steps[data-reveal].is-visible li:nth-child(3) { animation-delay: .52s; } .js .ritual-steps[data-reveal].is-visible li:nth-child(4) { animation-delay: .70s; } .js .ritual-steps[data-reveal].is-visible li:nth-child(5) { animation-delay: .88s; } .js .ritual-steps[data-reveal].is-visible li::after { animation: ritual-dot-pulse 2.4s ease-in-out infinite; } .js .ritual-steps[data-reveal].is-visible li:nth-child(2)::after { animation-delay: .25s; } .js .ritual-steps[data-reveal].is-visible li:nth-child(3)::after { animation-delay: .5s; } .js .ritual-steps[data-reveal].is-visible li:nth-child(4)::after { animation-delay: .75s; } .js .ritual-steps[data-reveal].is-visible li:nth-child(5)::after { animation-delay: 1s; } .no-pressure { margin-top: 52px; text-wrap: balance; } .solution-close { max-width: 720px; margin-top: 18px; color: rgba(16,43,67,.82); } @keyframes ritual-progress { from { transform: scaleX(0); opacity: .35; } to { transform: scaleX(1); opacity: .96; } } @keyframes ritual-line-shimmer { 0% { background-position: 100% 50%; filter: brightness(1); } 50% { background-position: 0% 50%; filter: brightness(1.16); } 100% { background-position: -100% 50%; filter: brightness(1); } } @keyframes ritual-step-in { to { opacity: 1; transform: translateY(0); } } @keyframes ritual-dot-pulse { 0%, 100% { box-shadow: 0 0 0 1px rgba(245,181,54,.45), 0 0 0 7px rgba(245,181,54,.10); transform: scale(1); } 50% { box-shadow: 0 0 0 1px rgba(245,181,54,.62), 0 0 0 11px rgba(245,181,54,.04); transform: scale(1.08); } } /* Tablet: preserve the animated path while preventing cramped content. */ @media (max-width: 1050px) { .ritual-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; padding: 30px; } .ritual-steps::before, .ritual-steps::after { display: none; } .ritual-steps li { min-height: 132px; padding: 22px 22px 22px 64px; border: 1px solid rgba(108,66,31,.12); border-radius: 18px; background: rgba(255,251,242,.78); } .ritual-steps li::after { top: 28px; bottom: auto; left: 24px; } } /* Mobile: center the first fold and make Sections 2/3 fully fluid. */ @media (max-width: 760px) { .hero-content, .hero-copy { text-align: center; } .hero-copy h1, .hero-lead, .hero-copy .assurance, .hero-copy .kit-note { margin-left: auto; margin-right: auto; text-align: center; } .hero-copy .button { width: min(100%, 420px); margin-left: auto; margin-right: auto; } .hero-copy .assurance { line-height: 1.55; } .hero-copy .kit-note { max-width: 100%; font-size: 12px; line-height: 1.55; } .problem-heading, .problem-copy, .problem-copy p, .problem-conclusion, .problem-conclusion > p { text-align: center; } .problem-heading h2 { margin-left: auto; margin-right: auto; text-align: center; } .problem-heading h2::after { margin-left: auto; margin-right: auto; } .problem-scene { width: min(calc(100% - 28px), 620px); max-width: 100%; margin-left: auto; margin-right: auto; overflow: hidden; } .problem-copy { width: 100%; max-width: none; min-width: 0; padding: 0 8px 18px; } .problem-copy::before { left: 50%; top: auto; bottom: 0; width: 72px; height: 2px; transform: translateX(-50%); background: linear-gradient(90deg, transparent, var(--gold), transparent); } .problem-copy p:first-child { margin-left: auto; margin-right: auto; text-align: center; } .problem-copy p:last-child { max-width: 36rem; margin-left: auto; margin-right: auto; text-align: center; } .thought, .thought-one, .thought-two, .thought-three, .thought-four { min-width: 0; width: 100%; max-width: 100%; justify-self: stretch; margin: 0; padding: 16px 18px 16px 46px; text-align: left; overflow-wrap: anywhere; word-break: normal; } .problem-conclusion { width: min(calc(100% - 32px), 620px); margin-left: auto; margin-right: auto; } .problem-conclusion > blockquote { text-align: center; } .solution-section { padding-top: 92px; padding-bottom: 98px; } .solution-section .section-heading, .solution-section .section-heading h2, .solution-section .section-heading > p:last-child, .no-pressure, .solution-close { width: min(calc(100% - 32px), 620px); margin-left: auto; margin-right: auto; text-align: center; } .solution-section .section-heading h2 { font-size: clamp(34px, 9.5vw, 44px); line-height: 1.05; } .solution-section .section-heading > p:last-child { margin-top: 22px; font-size: 16px; line-height: 1.65; } .ritual-steps { width: min(calc(100% - 28px), 620px); margin: 42px auto 0; grid-template-columns: 1fr; gap: 12px; padding: 16px; border-radius: 22px; } .ritual-steps li { min-height: 0; display: grid; grid-template-columns: 52px 1fr; grid-template-rows: auto auto; column-gap: 14px; align-items: start; padding: 18px 18px 18px 62px; border-radius: 16px; text-align: left; } .ritual-steps li::after { top: 27px; left: 25px; } .ritual-steps span { grid-column: 1; grid-row: 1 / 3; position: absolute; left: 18px; top: 15px; margin: 0; font-size: 30px; line-height: 1; } .ritual-steps strong { grid-column: 2; grid-row: 1; margin: 0; font-size: 16px; } .ritual-steps li { font-size: 15px; line-height: 1.5; } .no-pressure { margin-top: 38px; font-size: clamp(22px, 6.4vw, 28px); line-height: 1.35; } .solution-close { margin-top: 18px; font-size: 15px; line-height: 1.65; } } @media (max-width: 420px) { .hero-copy .assurance { max-width: 300px; font-size: 11px; } .hero-copy .kit-note { max-width: 310px; letter-spacing: .06em; } .problem-scene, .ritual-steps { width: calc(100% - 20px); } .thought, .thought-one, .thought-two, .thought-three, .thought-four { padding-right: 14px; font-size: 15px; line-height: 1.45; } .ritual-steps { padding: 12px; } .ritual-steps li { padding: 16px 14px 16px 58px; } .ritual-steps span { left: 16px; top: 15px; font-size: 28px; } .ritual-steps li::after { left: 22px; top: 26px; } } @media (prefers-reduced-motion: reduce) { .ritual-steps::after, .ritual-steps li, .ritual-steps li::after { animation: none !important; opacity: 1 !important; transform: none !important; } .ritual-steps::after { transform: scaleX(1) !important; } } /* Scroll-driven typewriter quote */ .problem-conclusion > blockquote[data-scroll-typewriter] { min-height: 1.35em; } .scroll-type-word { display: inline-block; white-space: nowrap; } .scroll-type-char { display: inline-block; opacity: 0; transform: translate3d(0, .18em, 0) scale(.985); filter: blur(4px); transition: opacity .12s linear, transform .22s var(--ease-premium), filter .22s var(--ease-premium); will-change: opacity, transform, filter; } .scroll-type-char.is-visible { opacity: 1; transform: translate3d(0, 0, 0) scale(1); filter: blur(0); } .problem-conclusion > blockquote[data-scroll-typewriter].is-typing { box-shadow: 0 26px 58px rgba(3,24,47,.18), 0 0 0 1px rgba(245,181,54,.04); } @media (prefers-reduced-motion: reduce) { .scroll-type-char { opacity: 1 !important; transform: none !important; filter: none !important; transition: none !important; } } /* Premium product showcase refinement */ .product-section { isolation: isolate; overflow: hidden; padding: clamp(104px, 9vw, 152px) 0 clamp(116px, 10vw, 168px); background: radial-gradient(circle at 14% 32%, rgba(245,181,54,.10), transparent 28%), radial-gradient(circle at 88% 68%, rgba(11,53,87,.055), transparent 30%), linear-gradient(180deg, #fff8e8 0%, #fff5dc 46%, #fff9ed 100%); } .product-section .section-heading { position: relative; z-index: 2; max-width: 920px; } .product-section .section-heading h2 { max-width: 820px; margin-inline: auto; text-wrap: balance; letter-spacing: -.02em; } .product-section .section-heading > p:last-child { max-width: 620px; margin-top: 18px; color: rgba(16,43,67,.66); } .product-section .section-heading::after { content: ""; display: block; width: 82px; height: 3px; margin: 28px auto 0; border-radius: 999px; background: linear-gradient(90deg, transparent, var(--gold), transparent); box-shadow: 0 0 18px rgba(245,181,54,.18); } .main-product { position: relative; isolation: isolate; margin-top: clamp(54px, 6vw, 76px); padding: clamp(28px, 3.4vw, 52px); grid-template-columns: minmax(0, 1.08fr) minmax(390px, .92fr); gap: clamp(38px, 4vw, 68px); align-items: center; border: 1px solid rgba(108,66,31,.12); border-radius: 34px; background: linear-gradient(135deg, rgba(255,255,255,.83), rgba(255,249,236,.68)), radial-gradient(circle at 18% 44%, rgba(245,181,54,.10), transparent 36%); box-shadow: 0 32px 90px rgba(76,49,16,.11), inset 0 1px rgba(255,255,255,.96); } .main-product::before { content: ""; position: absolute; z-index: -1; inset: 16px; border: 1px solid rgba(245,181,54,.12); border-radius: 25px; pointer-events: none; } .product-preview { min-width: 0; position: relative; isolation: isolate; display: grid; place-items: center; min-height: 560px; padding: 26px 8px 22px; border-radius: 28px; overflow: hidden; background: radial-gradient(circle at 50% 44%, rgba(255,227,153,.46) 0%, rgba(245,181,54,.16) 27%, transparent 61%), linear-gradient(145deg, rgba(255,249,235,.94), rgba(247,228,190,.45)); box-shadow: inset 0 0 0 1px rgba(108,66,31,.08), inset 0 20px 80px rgba(255,255,255,.34); } .product-preview::before { content: ""; position: absolute; z-index: 0; left: 12%; right: 10%; bottom: 9%; height: 15%; border-radius: 50%; background: rgba(57,37,11,.20); filter: blur(30px); transform: perspective(500px) rotateX(64deg); } .product-preview::after { content: ""; position: absolute; z-index: 0; width: 62%; aspect-ratio: 1; left: 19%; top: 5%; border: 1px solid rgba(245,181,54,.18); border-radius: 50%; box-shadow: 0 0 0 28px rgba(245,181,54,.035), 0 0 0 58px rgba(245,181,54,.025); opacity: .9; } .product-preview img { position: relative; z-index: 2; width: 108%; max-width: none; margin: 0 -4%; transform: translate3d(0, 0, 0) rotate(-.8deg); transform-origin: center; filter: drop-shadow(0 36px 30px rgba(49,35,16,.22)) saturate(1.035) contrast(1.015); transition: transform .7s var(--ease-premium), filter .7s var(--ease-premium); will-change: transform; } .product-preview.is-visible img { animation: product-showcase-float 7.5s ease-in-out 1.1s infinite; } .preview-label { z-index: 4; right: 24px; bottom: 22px; display: inline-flex; align-items: center; min-height: 42px; padding: 10px 16px; border: 1px solid rgba(255,208,102,.28); border-radius: 999px; background: rgba(3,24,47,.92); color: var(--cream); box-shadow: 0 14px 30px rgba(3,24,47,.24); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .preview-label::before { content: "↗"; margin-right: 8px; color: var(--gold); font-size: 14px; } .product-copy { position: relative; z-index: 2; min-width: 0; padding: 12px 2px; } .product-copy .material-number { margin-bottom: 16px; color: var(--coral); } .product-copy h3 { max-width: 560px; margin-bottom: 22px; font-size: clamp(38px, 3.25vw, 54px); line-height: 1.04; letter-spacing: -.025em; text-wrap: balance; } .product-intro { max-width: 540px; margin-bottom: 30px; font-size: clamp(18px, 1.25vw, 21px); line-height: 1.58; color: rgba(16,43,67,.78); } .sample-page { position: relative; overflow: hidden; margin: 0; padding: 30px 30px 26px; border: 1px solid rgba(108,66,31,.15); border-radius: 20px; background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,251,241,.96)); box-shadow: 0 18px 44px rgba(61,40,14,.10), inset 0 1px rgba(255,255,255,.95); transform: none; } .sample-page::before { content: ""; position: absolute; top: 0; right: 0; width: 74px; aspect-ratio: 1; background: linear-gradient(225deg, #f4e1b9 0 49%, transparent 50%); opacity: .7; } .sample-page::after { content: "Ejemplo"; position: absolute; right: 24px; bottom: 17px; color: rgba(108,66,31,.25); font-family: var(--serif); font-size: 12px; font-style: italic; letter-spacing: .03em; } .sample-page > span { position: relative; z-index: 2; margin-bottom: 12px; background: linear-gradient(135deg, var(--gold), var(--gold-light)); color: var(--navy-deep); box-shadow: 0 6px 16px rgba(245,181,54,.18); } .sample-page h4 { position: relative; z-index: 2; margin: 10px 0 12px; font-size: clamp(23px, 2vw, 30px); line-height: 1.12; color: var(--navy-deep); } .sample-page p { position: relative; z-index: 2; max-width: 95%; margin-bottom: 14px; font-size: 14px; line-height: 1.62; color: rgba(16,43,67,.78); } .sample-page strong { position: relative; z-index: 2; display: inline-block; margin-top: 2px; color: var(--brown); } .themes-list { margin-top: clamp(54px, 6vw, 82px); padding: clamp(26px, 3vw, 40px); grid-template-columns: minmax(230px,.38fr) minmax(0,1.62fr); gap: 34px 48px; border: 1px solid rgba(108,66,31,.11); border-radius: 26px; background: rgba(255,251,242,.76); box-shadow: 0 20px 50px rgba(76,49,16,.07); } .themes-list > p { margin: 0; font-size: clamp(22px, 2vw, 28px); line-height: 1.25; color: var(--navy-deep); } .themes-list ol { gap: 2px 28px; } .themes-list li { padding: 12px 0; border-bottom-color: rgba(108,66,31,.12); font-size: 13px; color: rgba(16,43,67,.78); } .themes-list li::before { color: var(--gold); } @keyframes product-showcase-float { 0%, 100% { transform: translate3d(0, 0, 0) rotate(-.8deg); } 50% { transform: translate3d(0, -7px, 0) rotate(.1deg); } } @media (max-width: 1120px) { .main-product { grid-template-columns: 1fr; gap: 36px; } .product-preview { min-height: 0; padding: 28px 22px 18px; } .product-preview img { width: min(105%, 900px); margin: 0 auto; } .product-copy { width: min(100%, 760px); margin: 0 auto; padding-bottom: 8px; } .product-copy h3, .product-intro { max-width: 700px; } .themes-list { grid-template-columns: 1fr; } } @media (max-width: 760px) { .product-section { padding-top: 88px; padding-bottom: 96px; } .product-section .section-heading, .product-section .section-heading h2, .product-section .section-heading > p:last-child { width: min(calc(100% - 32px), 620px); margin-left: auto; margin-right: auto; text-align: center; } .product-section .section-heading h2 { font-size: clamp(35px, 9.5vw, 46px); line-height: 1.05; } .main-product { width: min(calc(100% - 24px), 650px); margin: 42px auto 0; padding: 14px; gap: 26px; border-radius: 24px; } .main-product::before { inset: 8px; border-radius: 18px; } .product-preview { border-radius: 19px; padding: 20px 8px 14px; } .product-preview img { width: 116%; max-width: none; margin-left: -8%; margin-right: -8%; } .preview-label { right: 14px; bottom: 14px; min-height: 36px; padding: 8px 12px; font-size: 9px; letter-spacing: .1em; } .product-copy { padding: 12px 8px 8px; text-align: center; } .product-copy .material-number { text-align: center; } .product-copy h3 { margin-left: auto; margin-right: auto; font-size: clamp(34px, 9.3vw, 44px); line-height: 1.04; } .product-intro { margin-left: auto; margin-right: auto; font-size: 17px; } .sample-page { padding: 26px 22px 24px; text-align: left; border-radius: 17px; } .sample-page p { max-width: 100%; } .themes-list { width: min(calc(100% - 24px), 650px); margin: 36px auto 0; padding: 24px 20px; gap: 22px; border-radius: 20px; text-align: center; } .themes-list ol { grid-template-columns: 1fr; text-align: left; } } @media (max-width: 440px) { .main-product, .themes-list { width: calc(100% - 18px); } .product-preview img { width: 124%; margin-left: -12%; margin-right: -12%; } .preview-label { max-width: calc(100% - 28px); white-space: normal; text-align: left; } .sample-page { padding: 22px 18px; } .sample-page::after { display: none; } } @media (prefers-reduced-motion: reduce) { .product-preview.is-visible img { animation: none !important; } } /* Night family photo refinement for morning bonus */ .morning-section { min-height: 760px; grid-template-columns: minmax(0,.86fr) minmax(520px,1.14fr); gap: clamp(46px,5vw,84px); padding-top: clamp(118px,9vw,148px); padding-bottom: clamp(118px,9vw,148px); background: radial-gradient(circle at 14% 24%, rgba(245,181,54,.18), transparent 27%), linear-gradient(108deg, #f8ecd5 0 47%, #f1dfbd 100%); } .morning-section .bonus-copy { max-width: 650px; } .morning-section .bonus-copy h2 { max-width: 650px; margin-bottom: 24px; font-size: clamp(42px,3.35vw,58px); line-height: 1.06; letter-spacing: -.02em; text-wrap: balance; } .morning-section .bonus-copy > p:not(.material-number) { max-width: 620px; font-size: clamp(17px,1.2vw,20px); line-height: 1.65; color: rgba(16,43,67,.76); } .morning-section .topic-stream { margin-top: 28px; gap: 9px; } .morning-section .topic-stream li { padding: 8px 13px; border-color: rgba(108,66,31,.14); border-radius: 999px; background: rgba(255,251,242,.72); color: rgba(16,43,67,.76); box-shadow: 0 6px 18px rgba(76,49,16,.05); } .morning-photo-preview { position: relative; isolation: isolate; min-height: 610px; margin: 0; overflow: hidden; border: 1px solid rgba(255,208,102,.24); border-radius: 32px; background: #071a31; box-shadow: 0 38px 86px rgba(53,36,15,.22), 0 12px 28px rgba(3,24,47,.16), inset 0 1px rgba(255,255,255,.16); } .morning-photo-preview::before { content: ""; position: absolute; z-index: 2; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(3,24,47,.54) 0 28%, rgba(3,24,47,.12) 52%, rgba(3,24,47,.04) 100%), linear-gradient(180deg, rgba(3,24,47,.06), transparent 58%, rgba(3,24,47,.34)); } .morning-photo-preview::after { content: ""; position: absolute; z-index: 2; inset: 0; left: 0; right: 0; bottom: 0; height: auto; border-radius: inherit; background: radial-gradient(circle at 68% 42%, rgba(255,194,88,.16), transparent 34%), linear-gradient(180deg, transparent 68%, rgba(2,13,26,.22)); filter: none; pointer-events: none; } .morning-photo-preview > img.morning-family-photo { position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; max-width: none; margin: 0; object-fit: cover; object-position: 58% center; transform: scale(1.025); filter: saturate(1.02) contrast(1.025) brightness(.98); transition: transform 1.1s var(--ease-premium), filter .8s ease; will-change: transform; } .js .morning-photo-preview.is-visible > img.morning-family-photo { animation: morning-photo-breathe 10s ease-in-out 1s infinite alternate; } .morning-photo-preview .morning-prayer-card { z-index: 4; width: min(48%, 390px); left: 34px; top: 38px; padding: 28px 28px 24px; border: 1px solid rgba(255,255,255,.55); border-radius: 20px; background: rgba(255,251,242,.94); box-shadow: 0 26px 58px rgba(0,9,23,.30), 0 4px 12px rgba(0,9,23,.13); transform: rotate(-1.5deg); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } .morning-photo-preview .morning-prayer-card small { padding: 5px 10px; border-radius: 999px; background: var(--gold); color: var(--navy-deep); font-weight: 900; } .morning-photo-preview .morning-prayer-card h3 { margin: 14px 0 13px; font-size: clamp(24px,2vw,31px); line-height: 1.08; color: var(--navy-deep); } .morning-photo-preview .morning-prayer-card p { margin-bottom: 12px; font-size: 14px; line-height: 1.55; color: rgba(16,43,67,.82); } .morning-photo-preview .morning-prayer-card strong { display: block; margin-top: 18px; color: var(--coral); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; } .morning-photo-caption { position: absolute; z-index: 4; left: 30px; bottom: 26px; margin: 0; padding: 9px 14px; border: 1px solid rgba(255,208,102,.22); border-radius: 999px; background: rgba(3,24,47,.64); color: rgba(255,245,220,.92); font-family: var(--serif); font-size: 13px; letter-spacing: .01em; box-shadow: 0 10px 26px rgba(0,9,23,.18); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } @keyframes morning-photo-breathe { from { transform: scale(1.025) translate3d(0,0,0); } to { transform: scale(1.065) translate3d(-.7%, -.4%, 0); } } @media (max-width: 1050px) { .morning-section { grid-template-columns: 1fr; gap: 42px; } .morning-section .bonus-copy { max-width: 760px; margin-inline: auto; text-align: center; } .morning-section .bonus-copy h2, .morning-section .bonus-copy > p:not(.material-number) { margin-left: auto; margin-right: auto; } .morning-section .topic-stream { justify-content: center; } .morning-photo-preview { width: min(100%, 860px); min-height: 560px; margin-inline: auto; } } @media (max-width: 680px) { .morning-section { padding: 86px 16px 92px; gap: 34px; background: radial-gradient(circle at 50% 6%, rgba(245,181,54,.16), transparent 26%), linear-gradient(180deg, #f8ecd5, #f2dfbd); } .morning-section .bonus-copy { text-align: center; } .morning-section .bonus-copy h2 { font-size: clamp(35px,9.4vw,45px); } .morning-section .bonus-copy > p:not(.material-number) { font-size: 16px; } .morning-section .topic-stream { gap: 7px; } .morning-section .topic-stream li { font-size: 11px; padding: 7px 10px; } .morning-photo-preview { width: 100%; min-height: 525px; border-radius: 24px; } .morning-photo-preview > img.morning-family-photo { width: 100%; height: 100%; right: auto; bottom: auto; object-position: 63% center; } .morning-photo-preview .morning-prayer-card { width: calc(100% - 32px); max-width: 390px; left: 16px; top: auto; bottom: 18px; padding: 20px 20px 18px; border-radius: 17px; transform: none; } .morning-photo-preview .morning-prayer-card h3 { font-size: 24px; } .morning-photo-preview .morning-prayer-card p { font-size: 13px; } .morning-photo-caption { display: none; } } @media (max-width: 430px) { .morning-photo-preview { min-height: 500px; } .morning-photo-preview .morning-prayer-card { width: calc(100% - 24px); left: 12px; bottom: 12px; padding: 18px 17px 16px; } .morning-photo-preview .morning-prayer-card h3 { font-size: 22px; } } @media (prefers-reduced-motion: reduce) { .js .morning-photo-preview.is-visible > img.morning-family-photo { animation: none !important; transform: scale(1.025) !important; } } /* Premium verses section refinement */ .verses-section { position: relative; isolation: isolate; overflow: hidden; width: 100%; max-width: none; padding: clamp(110px, 9vw, 150px) var(--gutter); grid-template-columns: minmax(460px, 1.04fr) minmax(430px, .96fr); gap: clamp(54px, 6vw, 96px); background: radial-gradient(circle at 15% 28%, rgba(245,181,54,.13), transparent 25%), radial-gradient(circle at 88% 74%, rgba(11,53,87,.055), transparent 30%), linear-gradient(180deg, #fffaf0 0%, #fffdf8 52%, #fff8e8 100%); } .verses-section::before { content: "“"; position: absolute; z-index: -1; left: 4%; top: 4%; color: rgba(245,181,54,.07); font-family: var(--serif); font-size: clamp(180px, 24vw, 390px); line-height: .8; pointer-events: none; } .verses-preview { position: relative; isolation: isolate; min-height: 590px; margin: 0; border: 1px solid rgba(108,66,31,.11); border-radius: 32px; background: radial-gradient(circle at 52% 42%, rgba(245,181,54,.13), transparent 33%), linear-gradient(145deg, rgba(255,255,255,.78), rgba(247,236,210,.5)); box-shadow: 0 32px 78px rgba(76,49,16,.09), inset 0 1px rgba(255,255,255,.92); } .verses-preview::before { content: ""; position: absolute; inset: 18px; border: 1px solid rgba(245,181,54,.12); border-radius: 23px; pointer-events: none; } .verses-preview::after { content: ""; position: absolute; left: 14%; right: 12%; bottom: 8%; height: 14%; border-radius: 50%; background: rgba(65,43,17,.14); filter: blur(32px); transform: perspective(520px) rotateX(65deg); pointer-events: none; } .verse-page { z-index: 2; width: min(64%, 430px); left: 8%; top: 58px; padding: 38px 34px 34px; border: 1px solid rgba(108,66,31,.14); border-radius: 18px; background: linear-gradient(180deg, rgba(255,248,224,.99), rgba(255,244,214,.97)); box-shadow: 0 28px 56px rgba(67,44,17,.17), 0 3px 10px rgba(67,44,17,.08), inset 0 1px rgba(255,255,255,.95); transform: rotate(-4.5deg); transform-origin: center; overflow: hidden; } .verse-page::after { content: ""; position: absolute; right: -22px; top: -22px; width: 84px; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(245,181,54,.18), transparent 68%); } .verse-page.shifted { z-index: 3; left: 38%; top: 166px; width: min(58%, 400px); padding: 34px 32px 31px; transform: rotate(3.5deg); background: linear-gradient(180deg, rgba(255,255,252,.995), rgba(255,251,241,.98)); box-shadow: 0 34px 66px rgba(50,35,17,.18), 0 4px 12px rgba(50,35,17,.08), inset 0 1px rgba(255,255,255,.98); } .verse-page > span { padding: 6px 11px; border-radius: 999px; background: linear-gradient(135deg, var(--gold), var(--gold-light)); color: var(--navy-deep); box-shadow: 0 7px 18px rgba(245,181,54,.18); } .verse-page h3 { position: relative; z-index: 2; margin: 18px 0 8px; font-size: clamp(25px, 2vw, 31px); line-height: 1.22; letter-spacing: -.012em; color: var(--navy-deep); text-wrap: balance; } .verse-page small { position: relative; z-index: 2; color: rgba(16,43,67,.66); font-size: 12px; font-weight: 700; } .verse-page p { position: relative; z-index: 2; margin-bottom: 0; font-family: var(--serif); font-size: 14px; line-height: 1.58; color: rgba(16,43,67,.78); } .verse-page strong { position: relative; z-index: 2; display: block; margin-bottom: 6px; color: var(--navy-deep); } .verse-page hr { position: relative; z-index: 2; border-top-color: rgba(108,66,31,.14); margin: 24px 0 20px; } .js .verses-preview.is-visible .verse-page { animation: verse-card-float-one 7.2s ease-in-out 1s infinite; } .js .verses-preview.is-visible .verse-page.shifted { animation: verse-card-float-two 7.8s ease-in-out 1.2s infinite; } .verses-section .bonus-copy { max-width: 640px; padding-right: clamp(0px, 2vw, 24px); } .verses-section .material-number { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 17px; padding: 7px 12px; border: 1px solid rgba(79,112,66,.16); border-radius: 999px; background: rgba(215,227,196,.42); color: #55734b; box-shadow: 0 8px 20px rgba(79,112,66,.06); } .verses-section .bonus-copy h2 { max-width: 610px; margin-bottom: 24px; font-size: clamp(42px, 3.45vw, 58px); line-height: 1.04; letter-spacing: -.024em; text-wrap: balance; } .verses-section .bonus-copy > p:not(.material-number) { max-width: 590px; margin-bottom: 30px; font-size: clamp(17px, 1.2vw, 20px); line-height: 1.65; color: rgba(16,43,67,.74); } .content-formula { width: 100%; max-width: 590px; padding: 0; border-left: 0; display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; counter-reset: verse-formula; } .content-formula b { display: none; } .content-formula span { position: relative; min-height: 82px; display: flex; align-items: center; padding: 17px 18px 17px 54px; border: 1px solid rgba(108,66,31,.11); border-radius: 17px; background: linear-gradient(135deg, rgba(255,255,255,.86), rgba(255,248,232,.76)); box-shadow: 0 13px 30px rgba(76,49,16,.07), inset 0 1px rgba(255,255,255,.92); color: var(--navy-deep); font-size: 13px; font-weight: 800; line-height: 1.35; counter-increment: verse-formula; } .content-formula span::before { content: counter(verse-formula, decimal-leading-zero); position: absolute; left: 16px; top: 17px; width: 27px; height: 27px; display: grid; place-items: center; border-radius: 50%; background: var(--navy-deep); color: var(--gold-light); font-family: var(--serif); font-size: 11px; box-shadow: 0 0 0 5px rgba(245,181,54,.08); } .content-formula span::after { content: ""; position: absolute; left: 17px; right: 17px; bottom: 0; height: 2px; border-radius: 999px; background: linear-gradient(90deg, var(--gold), transparent); opacity: .32; transform: scaleX(.45); transform-origin: left; transition: transform .55s var(--ease-premium), opacity .55s ease; } .content-formula span:hover::after { transform: scaleX(1); opacity: .8; } .topics-inline { max-width: 610px; margin: 28px 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 8px; } .topics-inline li { padding: 8px 12px; border: 1px solid rgba(108,66,31,.11); border-radius: 999px; background: rgba(255,251,242,.72); color: rgba(16,43,67,.68); font-size: 11px; font-weight: 700; box-shadow: 0 6px 16px rgba(76,49,16,.045); } .topics-inline li::before { content: "•"; margin-right: 7px; color: var(--gold); } @keyframes verse-card-float-one { 0%, 100% { transform: translate3d(0,0,0) rotate(-4.5deg); } 50% { transform: translate3d(0,-7px,0) rotate(-3.6deg); } } @keyframes verse-card-float-two { 0%, 100% { transform: translate3d(0,0,0) rotate(3.5deg); } 50% { transform: translate3d(0,8px,0) rotate(2.7deg); } } @media (max-width: 1080px) { .verses-section { grid-template-columns: 1fr; gap: 54px; } .verses-preview { width: min(100%, 820px); min-height: 560px; margin-inline: auto; } .verses-section .bonus-copy { width: min(100%, 760px); max-width: 760px; margin-inline: auto; padding-right: 0; text-align: center; } .verses-section .bonus-copy h2, .verses-section .bonus-copy > p:not(.material-number), .content-formula, .topics-inline { margin-left: auto; margin-right: auto; } .topics-inline { justify-content: center; } } @media (max-width: 680px) { .verses-section { padding: 86px 16px 94px; gap: 36px; } .verses-section .bonus-copy h2 { font-size: clamp(35px, 9.4vw, 45px); } .verses-section .bonus-copy > p:not(.material-number) { font-size: 16px; } .verses-preview { min-height: 0; display: grid; gap: 14px; padding: 16px; border-radius: 24px; } .verses-preview::before { inset: 8px; border-radius: 17px; } .verses-preview::after { display: none; } .verse-page, .verse-page.shifted { position: relative; inset: auto; width: 100%; max-width: none; min-width: 0; padding: 24px 21px 22px; border-radius: 16px; transform: none; } .js .verses-preview.is-visible .verse-page, .js .verses-preview.is-visible .verse-page.shifted { animation: verse-card-mobile 6.5s ease-in-out infinite; } .js .verses-preview.is-visible .verse-page.shifted { animation-delay: -.8s; } .verse-page h3 { font-size: clamp(23px, 7vw, 29px); } .content-formula { grid-template-columns: 1fr; } .content-formula span { min-height: 72px; text-align: left; } .topics-inline { justify-content: center; } .topics-inline li { font-size: 10px; padding: 7px 10px; } @keyframes verse-card-mobile { 0%, 100% { transform: translate3d(0,0,0); } 50% { transform: translate3d(0,-4px,0); } } } @media (max-width: 420px) { .verses-section { padding-left: 10px; padding-right: 10px; } .verses-preview { padding: 12px; } .verse-page, .verse-page.shifted { padding: 21px 17px 19px; } .content-formula span { padding-left: 50px; } .topics-inline { gap: 6px; } } @media (prefers-reduced-motion: reduce) { .js .verses-preview.is-visible .verse-page, .js .verses-preview.is-visible .verse-page.shifted { animation: none !important; } } /* Premium 21-day calendar refinement */ .calendar-section { position: relative; isolation: isolate; overflow: hidden; width: 100%; max-width: none; padding: clamp(108px, 9vw, 152px) var(--gutter); grid-template-columns: minmax(360px, .82fr) minmax(560px, 1.18fr); gap: clamp(52px, 6vw, 92px); background: radial-gradient(circle at 14% 32%, rgba(245,181,54,.13), transparent 26%), radial-gradient(circle at 88% 70%, rgba(11,53,87,.055), transparent 30%), linear-gradient(180deg, #fff9e9 0%, #fff4d7 52%, #fff9ed 100%); } .calendar-section::before { content: ""; position: absolute; z-index: -1; width: 480px; height: 480px; right: -190px; top: -150px; border-radius: 50%; border: 1px solid rgba(245,181,54,.09); box-shadow: 0 0 0 48px rgba(245,181,54,.025), 0 0 0 96px rgba(245,181,54,.018); pointer-events: none; } .calendar-copy { max-width: 600px; } .calendar-copy .material-number { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 18px; padding: 7px 12px; border: 1px solid rgba(216,108,77,.14); border-radius: 999px; background: rgba(216,108,77,.07); box-shadow: 0 8px 20px rgba(216,108,77,.04); } .calendar-copy h2 { max-width: 590px; margin-bottom: 24px; font-size: clamp(42px, 3.5vw, 59px); line-height: 1.04; letter-spacing: -.025em; text-wrap: balance; } .calendar-copy > p:not(.material-number) { max-width: 560px; font-size: clamp(17px, 1.2vw, 20px); line-height: 1.65; color: rgba(16,43,67,.74); } .day-example { position: relative; overflow: hidden; margin-top: 32px; padding: 27px 28px 26px 30px; border: 1px solid rgba(108,66,31,.11); border-left: 0; border-radius: 20px; background: linear-gradient(135deg, rgba(255,255,255,.92), rgba(255,250,239,.82)); box-shadow: 0 20px 42px rgba(76,49,16,.09), inset 0 1px rgba(255,255,255,.94); } .day-example::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: linear-gradient(180deg, var(--gold), var(--coral)); } .day-example::after { content: "08"; position: absolute; right: 18px; top: 10px; color: rgba(245,181,54,.08); font-family: var(--serif); font-size: 86px; font-weight: 800; line-height: 1; pointer-events: none; } .day-example span { position: relative; z-index: 2; display: inline-flex; align-items: center; min-height: 28px; padding: 5px 10px; border-radius: 999px; background: rgba(216,108,77,.09); color: var(--coral); font-size: 11px; font-weight: 900; letter-spacing: .04em; text-transform: uppercase; } .day-example strong { position: relative; z-index: 2; display: block; margin: 12px 0 10px; font-size: clamp(22px, 2vw, 28px); color: var(--navy-deep); } .day-example p { position: relative; z-index: 2; max-width: 94%; margin: 7px 0; font-size: 13px; line-height: 1.56; color: rgba(16,43,67,.76); } .calendar-preview { position: relative; isolation: isolate; padding: clamp(30px, 3.4vw, 46px); border: 1px solid rgba(108,66,31,.13); border-radius: 28px; background: linear-gradient(180deg, rgba(255,249,229,.98), rgba(250,237,200,.96)); box-shadow: 0 34px 76px rgba(68,45,17,.17), 0 9px 24px rgba(68,45,17,.08), inset 0 1px rgba(255,255,255,.92); transform: rotate(.55deg); } .calendar-preview::before, .calendar-preview::after { content: ""; position: absolute; z-index: -1; inset: 10px -9px -12px 9px; border: 1px solid rgba(108,66,31,.10); border-radius: 24px; background: rgba(255,250,238,.68); box-shadow: 0 18px 40px rgba(76,49,16,.06); } .calendar-preview::after { inset: 20px -17px -22px 17px; opacity: .52; } .calendar-preview header { position: relative; align-items: center; padding-bottom: 22px; border-bottom: 1px solid rgba(16,43,67,.22); } .calendar-preview header::after { content: ""; position: absolute; left: 0; bottom: -1px; width: 38%; height: 3px; border-radius: 999px; background: linear-gradient(90deg, var(--gold), var(--gold-light)); box-shadow: 0 0 18px rgba(245,181,54,.20); transform-origin: left; } .calendar-preview header span { font-size: clamp(24px, 2.2vw, 31px); color: var(--navy-deep); } .calendar-preview header strong { display: inline-flex; align-items: center; min-height: 54px; padding: 0 18px; border-radius: 16px; background: rgba(245,181,54,.10); color: var(--gold); font-size: clamp(36px, 3vw, 48px); line-height: 1; box-shadow: inset 0 0 0 1px rgba(245,181,54,.12); } .calendar-preview ol { position: relative; z-index: 2; padding: 30px 0 26px; gap: 10px; } .calendar-preview li { position: relative; overflow: hidden; border: 1px solid rgba(108,66,31,.12); border-radius: 12px; background: rgba(255,255,255,.20); color: var(--navy-deep); font-size: 16px; box-shadow: inset 0 1px rgba(255,255,255,.45), 0 5px 14px rgba(76,49,16,.03); transition: transform .35s var(--ease-premium), background .35s ease, border-color .35s ease, box-shadow .35s ease; } .calendar-preview li::before { content: ""; position: absolute; inset: 0; background: linear-gradient(145deg, rgba(255,255,255,.42), transparent 60%); pointer-events: none; } .calendar-preview li:hover { transform: translateY(-2px); border-color: rgba(245,181,54,.26); } .calendar-preview li.done { border-color: rgba(104,132,87,.16); background: linear-gradient(145deg, rgba(215,227,196,.72), rgba(235,239,213,.56)); color: #41543a; } .calendar-preview li.done::after { content: "✓"; right: 7px; top: 5px; width: 18px; height: 18px; display: grid; place-items: center; border-radius: 50%; background: rgba(104,132,87,.10); color: #678253; font-size: 10px; font-weight: 900; } .calendar-preview li.today { z-index: 3; border-color: rgba(245,181,54,.58); background: linear-gradient(145deg, #f7bc43, #f5a91f); color: var(--navy-deep); box-shadow: 0 0 0 6px rgba(245,181,54,.11), 0 12px 24px rgba(245,181,54,.20), inset 0 1px rgba(255,255,255,.44); } .calendar-preview li.today::after { content: "HOY"; position: absolute; right: 5px; top: 5px; padding: 2px 5px; border-radius: 999px; background: rgba(3,24,47,.78); color: var(--cream); font-family: var(--sans); font-size: 7px; font-weight: 900; letter-spacing: .08em; } .calendar-preview > p { position: relative; margin: 2px 0 0; gap: 12px; color: rgba(16,43,67,.66); font-size: 10px; letter-spacing: .045em; } .calendar-preview > p span { min-width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; background: var(--navy-deep); color: var(--cream); font-family: var(--serif); font-size: 10px; } .calendar-preview > p i { position: relative; height: 4px; overflow: hidden; border-radius: 999px; background: rgba(108,66,31,.10); } .calendar-preview > p i::after { content: ""; position: absolute; inset: 0; width: 38%; border-radius: inherit; background: linear-gradient(90deg, var(--gold), var(--gold-light)); box-shadow: 0 0 16px rgba(245,181,54,.22); transform-origin: left; } .js .calendar-preview li { opacity: 0; transform: translateY(12px) scale(.96); } .js .calendar-preview.is-visible li { opacity: 1; transform: translateY(0) scale(1); transition: opacity .5s ease, transform .58s var(--ease-premium), background .35s ease, border-color .35s ease, box-shadow .35s ease; } .js .calendar-preview.is-visible li:nth-child(1) { transition-delay: .06s; } .js .calendar-preview.is-visible li:nth-child(2) { transition-delay: .11s; } .js .calendar-preview.is-visible li:nth-child(3) { transition-delay: .16s; } .js .calendar-preview.is-visible li:nth-child(4) { transition-delay: .21s; } .js .calendar-preview.is-visible li:nth-child(5) { transition-delay: .26s; } .js .calendar-preview.is-visible li:nth-child(6) { transition-delay: .31s; } .js .calendar-preview.is-visible li:nth-child(7) { transition-delay: .36s; } .js .calendar-preview.is-visible li:nth-child(8) { transition-delay: .46s; } .js .calendar-preview.is-visible li:nth-child(n+9) { transition-delay: .52s; } .js .calendar-preview.is-visible li.today { animation: calendar-today-pulse 2.6s ease-in-out 1.15s infinite; } .js .calendar-preview > p i::after, .js .calendar-preview header::after { transform: scaleX(0); } .js .calendar-preview.is-visible > p i::after, .js .calendar-preview.is-visible header::after { animation: calendar-progress-grow 1.3s var(--ease-premium) .52s forwards; } .js .calendar-copy .day-example { opacity: 0; transform: translateY(16px); } .js .calendar-copy.is-visible .day-example { opacity: 1; transform: translateY(0); transition: opacity .65s ease .18s, transform .72s var(--ease-premium) .18s; } @keyframes calendar-progress-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } } @keyframes calendar-today-pulse { 0%, 100% { box-shadow: 0 0 0 6px rgba(245,181,54,.10), 0 12px 24px rgba(245,181,54,.20), inset 0 1px rgba(255,255,255,.44); } 50% { box-shadow: 0 0 0 11px rgba(245,181,54,.04), 0 16px 32px rgba(245,181,54,.28), inset 0 1px rgba(255,255,255,.52); } } @media (max-width: 1100px) { .calendar-section { grid-template-columns: 1fr; gap: 50px; } .calendar-copy { width: min(100%, 760px); max-width: 760px; margin-inline: auto; text-align: center; } .calendar-copy h2, .calendar-copy > p:not(.material-number), .day-example { margin-left: auto; margin-right: auto; } .day-example { max-width: 620px; text-align: left; } .calendar-preview { width: min(100%, 900px); margin-inline: auto; } } @media (max-width: 700px) { .calendar-section { padding: 88px 14px 96px; gap: 36px; } .calendar-copy h2 { font-size: clamp(35px, 9.4vw, 45px); } .calendar-copy > p:not(.material-number) { font-size: 16px; } .day-example { padding: 23px 20px 21px 23px; border-radius: 17px; } .day-example::after { font-size: 66px; } .calendar-preview { padding: 20px 14px 18px; border-radius: 22px; transform: none; } .calendar-preview::before, .calendar-preview::after { display: none; } .calendar-preview header { gap: 14px; padding-bottom: 16px; } .calendar-preview header span { font-size: 20px; } .calendar-preview header strong { min-height: 42px; padding: 0 12px; border-radius: 12px; font-size: 30px; } .calendar-preview ol { padding: 20px 0 18px; gap: 5px; } .calendar-preview li { border-radius: 8px; font-size: clamp(11px, 3.6vw, 14px); } .calendar-preview li.done::after { right: 3px; top: 3px; width: 13px; height: 13px; font-size: 7px; } .calendar-preview li.today::after { display: none; } .calendar-preview li.today { box-shadow: 0 0 0 4px rgba(245,181,54,.10), 0 8px 18px rgba(245,181,54,.18), inset 0 1px rgba(255,255,255,.44); } .calendar-preview > p { gap: 7px; font-size: 7px; } .calendar-preview > p span { min-width: 18px; height: 18px; font-size: 8px; } } @media (max-width: 420px) { .calendar-section { padding-left: 9px; padding-right: 9px; } .calendar-preview { padding-left: 10px; padding-right: 10px; } .calendar-preview ol { gap: 4px; } .calendar-preview li { font-size: 11px; } .calendar-preview > p { font-size: 6px; letter-spacing: .025em; } } @media (prefers-reduced-motion: reduce) { .js .calendar-preview li, .js .calendar-copy .day-example { opacity: 1 !important; transform: none !important; transition: none !important; } .js .calendar-preview.is-visible li.today, .js .calendar-preview.is-visible > p i::after, .js .calendar-preview.is-visible header::after { animation: none !important; transform: none !important; } } /* Premium printable prayer cards refinement */ .cards-section { position: relative; isolation: isolate; overflow: hidden; width: 100%; max-width: none; padding: clamp(110px, 9vw, 154px) var(--gutter); grid-template-columns: minmax(340px, .72fr) minmax(620px, 1.28fr); gap: clamp(54px, 6vw, 92px); background: radial-gradient(circle at 16% 34%, rgba(245,181,54,.14), transparent 27%), radial-gradient(circle at 86% 70%, rgba(11,53,87,.05), transparent 29%), linear-gradient(180deg, #f6ecd8 0%, #f2e4ca 54%, #f7ecd8 100%); } .cards-section::before { content: ""; position: absolute; z-index: -1; inset: auto -120px -160px auto; width: 430px; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(245,181,54,.10), transparent 66%); pointer-events: none; } .cards-copy { max-width: 590px; } .cards-copy .material-number { display: inline-flex; align-items: center; margin-bottom: 18px; padding: 7px 12px; border: 1px solid rgba(178,111,41,.13); border-radius: 999px; background: rgba(255,249,236,.52); box-shadow: 0 8px 18px rgba(76,49,16,.04); } .cards-copy h2 { max-width: 560px; margin-bottom: 24px; font-size: clamp(42px, 3.5vw, 58px); line-height: 1.04; letter-spacing: -.024em; text-wrap: balance; } .cards-copy > p:not(.material-number) { max-width: 540px; font-size: clamp(17px,1.2vw,20px); line-height: 1.65; color: rgba(16,43,67,.74); } .print-callout { position: relative; display: inline-flex; align-items: center; gap: 9px; margin-top: 28px; padding: 12px 16px; border: 1px solid rgba(245,181,54,.24); border-radius: 999px; background: rgba(255,251,242,.72); color: var(--brown); font-size: 13px; font-weight: 900; line-height: 1.3; box-shadow: 0 10px 24px rgba(76,49,16,.07), inset 0 1px rgba(255,255,255,.9); } .print-callout::before { content: "✂"; width: 25px; height: 25px; display: grid; place-items: center; border-radius: 50%; background: var(--gold); color: var(--navy-deep); font-size: 12px; box-shadow: 0 0 0 5px rgba(245,181,54,.08); } .cards-preview { position: relative; isolation: isolate; min-height: 640px; height: auto; margin: 0; border: 1px solid rgba(108,66,31,.11); border-radius: 34px; background: radial-gradient(circle at 54% 42%, rgba(255,220,135,.24), transparent 30%), linear-gradient(145deg, rgba(255,255,255,.48), rgba(245,232,200,.34)); box-shadow: 0 32px 78px rgba(76,49,16,.09), inset 0 1px rgba(255,255,255,.88); } .cards-preview::before { content: ""; position: absolute; inset: 18px; border: 1px solid rgba(245,181,54,.10); border-radius: 24px; pointer-events: none; } .cards-preview::after { content: ""; position: absolute; left: 17%; right: 13%; bottom: 8%; height: 12%; border-radius: 50%; background: rgba(57,37,11,.14); filter: blur(34px); transform: perspective(560px) rotateX(65deg); pointer-events: none; } .print-sheet { z-index: 2; width: min(52%, 430px); min-width: 330px; left: 7%; top: 50%; translate: 0 -50%; padding: 32px; gap: 10px; border: 1px solid rgba(108,66,31,.14); border-radius: 6px; background: linear-gradient(180deg, rgba(255,255,252,.99), rgba(255,251,241,.98)); box-shadow: 0 34px 64px rgba(57,37,11,.17), 0 5px 16px rgba(57,37,11,.08); transform: rotate(-3.2deg); } .print-sheet::before { content: "A4"; position: absolute; right: 18px; top: 15px; padding: 4px 8px; border-radius: 999px; background: rgba(245,181,54,.10); color: rgba(108,66,31,.62); font-size: 8px; font-weight: 900; letter-spacing: .08em; } .print-sheet > span { margin-bottom: 8px; color: rgba(108,66,31,.56); font-size: 10px; letter-spacing: .02em; } .print-sheet i { position: relative; overflow: hidden; min-height: 160px; padding: 18px; border: 1px dashed rgba(108,66,31,.52); background: linear-gradient(145deg, rgba(255,255,255,.66), rgba(255,249,236,.55)); color: var(--navy-deep); font-size: 16px; line-height: 1.25; } .print-sheet i::after { content: ""; position: absolute; width: 34px; height: 34px; right: -12px; bottom: -12px; border-radius: 50%; background: rgba(245,181,54,.07); } .prayer-card { z-index: 3; width: 150px; aspect-ratio: .68; border: 1px solid rgba(255,255,255,.38); border-radius: 16px; box-shadow: 0 22px 42px rgba(55,36,15,.18), 0 5px 12px rgba(55,36,15,.08), inset 0 1px rgba(255,255,255,.32); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); transition: transform .65s var(--ease-premium), box-shadow .65s ease, filter .65s ease; } .prayer-card::before { content: ""; position: absolute; inset: 10px; border: 1px solid rgba(255,255,255,.20); border-radius: 11px; pointer-events: none; } .prayer-card span { margin-top: 18px; font-size: 28px; } .card-one { right: 23%; top: 3%; transform: rotate(6deg); background: linear-gradient(160deg, #f9d76b, #f2c54a); } .card-two { right: 5%; top: 21%; transform: rotate(10deg); background: linear-gradient(160deg, #0a3156, #062746); color: var(--cream); } .card-three { right: 25%; bottom: 4%; transform: rotate(-5deg); background: linear-gradient(160deg, #f0d8d0, #eac8bd); } .card-four { right: 4%; bottom: 2%; transform: rotate(4deg); background: linear-gradient(160deg, #dce8c8, #ceddb1); } .js .cards-preview.is-visible .print-sheet { animation: print-sheet-float 8.4s ease-in-out 1s infinite; } .js .cards-preview.is-visible .card-one { animation: prayer-card-one 7.4s ease-in-out .9s infinite; } .js .cards-preview.is-visible .card-two { animation: prayer-card-two 7.9s ease-in-out 1.15s infinite; } .js .cards-preview.is-visible .card-three { animation: prayer-card-three 7.2s ease-in-out 1.35s infinite; } .js .cards-preview.is-visible .card-four { animation: prayer-card-four 8.1s ease-in-out 1.55s infinite; } .cards-preview:hover .prayer-card { filter: saturate(1.04); } .cards-preview:hover .card-one { transform: translateY(-7px) rotate(4deg); } .cards-preview:hover .card-two { transform: translate(4px,-5px) rotate(8deg); } .cards-preview:hover .card-three { transform: translate(-3px,5px) rotate(-3deg); } .cards-preview:hover .card-four { transform: translate(4px,4px) rotate(2deg); } @keyframes print-sheet-float { 0%,100% { transform: translate3d(0,0,0) rotate(-3.2deg); } 50% { transform: translate3d(0,-7px,0) rotate(-2.5deg); } } @keyframes prayer-card-one { 0%,100% { transform: translate3d(0,0,0) rotate(6deg); } 50% { transform: translate3d(-4px,-8px,0) rotate(4.7deg); } } @keyframes prayer-card-two { 0%,100% { transform: translate3d(0,0,0) rotate(10deg); } 50% { transform: translate3d(5px,-6px,0) rotate(8.5deg); } } @keyframes prayer-card-three { 0%,100% { transform: translate3d(0,0,0) rotate(-5deg); } 50% { transform: translate3d(-3px,7px,0) rotate(-3.6deg); } } @keyframes prayer-card-four { 0%,100% { transform: translate3d(0,0,0) rotate(4deg); } 50% { transform: translate3d(4px,6px,0) rotate(2.7deg); } } @media (max-width: 1100px) { .cards-section { grid-template-columns: 1fr; gap: 48px; } .cards-copy { width: min(100%, 760px); max-width: 760px; margin-inline: auto; text-align: center; } .cards-copy h2, .cards-copy > p:not(.material-number) { margin-left: auto; margin-right: auto; } .cards-preview { width: min(100%, 860px); min-height: 620px; margin-inline: auto; } } @media (max-width: 720px) { .cards-section { padding: 88px 14px 96px; gap: 36px; } .cards-copy h2 { font-size: clamp(35px, 9.5vw, 45px); } .cards-copy > p:not(.material-number) { font-size: 16px; } .print-callout { max-width: 100%; justify-content: center; text-align: left; font-size: 11px; } .cards-preview { min-height: 720px; border-radius: 24px; } .cards-preview::before { inset: 8px; border-radius: 17px; } .cards-preview::after { display: none; } .print-sheet { width: calc(100% - 34px); min-width: 0; left: 17px; top: 24px; translate: 0 0; padding: 20px; gap: 7px; transform: none; } .print-sheet i { min-height: 112px; padding: 12px; font-size: 13px; } .prayer-card { width: calc(50% - 25px); max-width: 150px; } .card-one { left: 18px; right: auto; top: auto; bottom: 30px; transform: rotate(-3deg); } .card-two { left: 50%; right: auto; top: auto; bottom: 40px; transform: translateX(-50%) rotate(2deg); } .card-three { right: 18px; bottom: 32px; transform: rotate(3deg); } .card-four { display: none; } .js .cards-preview.is-visible .print-sheet, .js .cards-preview.is-visible .card-one, .js .cards-preview.is-visible .card-two, .js .cards-preview.is-visible .card-three { animation-duration: 7s; } } @media (max-width: 430px) { .cards-section { padding-left: 9px; padding-right: 9px; } .cards-preview { min-height: 650px; } .print-sheet { width: calc(100% - 20px); left: 10px; padding: 16px; } .print-sheet i { min-height: 96px; font-size: 12px; } .prayer-card { width: 118px; font-size: 16px; } .card-one { left: 10px; } .card-three { right: 10px; } } @media (prefers-reduced-motion: reduce) { .js .cards-preview.is-visible .print-sheet, .js .cards-preview.is-visible .prayer-card { animation: none !important; } } /* Real paper mockup cards showcase */ .cards-section { grid-template-columns: minmax(340px,.74fr) minmax(560px,1.26fr); gap: clamp(52px,5.5vw,88px); background: radial-gradient(circle at 17% 32%, rgba(245,181,54,.16), transparent 28%), radial-gradient(circle at 84% 58%, rgba(11,53,87,.045), transparent 31%), linear-gradient(180deg,#f7eedc 0%,#f2e4ca 52%,#f8efdf 100%); } .cards-copy { position: relative; z-index: 3; } .cards-copy h2 { max-width: 520px; } .cards-copy > p:not(.material-number) { max-width: 510px; } .cards-copy::after { content: ""; display: block; width: 76px; height: 3px; margin-top: 30px; border-radius: 999px; background: linear-gradient(90deg,var(--gold),transparent); } .cards-mockup-preview { position: relative; isolation: isolate; min-height: 590px; display: grid; place-items: center; padding: clamp(22px,2vw,34px); overflow: visible; border: 1px solid rgba(108,66,31,.09); border-radius: 34px; background: radial-gradient(circle at 50% 50%,rgba(255,226,154,.22),transparent 45%), linear-gradient(145deg,rgba(255,255,255,.44),rgba(245,232,200,.20)); box-shadow: 0 28px 72px rgba(76,49,16,.085), inset 0 1px rgba(255,255,255,.8); } .cards-mockup-preview::before { content: ""; position: absolute; inset: 16px; z-index: 0; border: 1px solid rgba(245,181,54,.11); border-radius: 25px; pointer-events: none; } .cards-mockup-preview::after { content: ""; position: absolute; z-index: 0; width: 68%; height: 18%; left: 16%; bottom: 7%; border-radius: 50%; background: rgba(57,37,11,.16); filter: blur(36px); transform: perspective(600px) rotateX(65deg); pointer-events: none; } .cards-mockup-glow { position: absolute; z-index: 0; width: 68%; aspect-ratio: 1; left: 18%; top: 9%; border-radius: 50%; background: radial-gradient(circle,rgba(255,208,102,.28) 0%,rgba(245,181,54,.08) 34%,transparent 70%); filter: blur(6px); opacity: .9; } .cards-real-mockup { position: relative; z-index: 2; display: block; width: min(112%, 830px); max-width: none; height: auto; object-fit: contain; filter: drop-shadow(0 34px 28px rgba(50,34,15,.18)) saturate(1.02) contrast(1.01); transform: translate3d(0,0,0) rotate(-.5deg); transform-origin: center; will-change: transform; } .js .cards-mockup-preview.is-visible .cards-real-mockup { animation: real-cards-mockup-float 8.5s ease-in-out 1s infinite; } .cards-mockup-caption { position: absolute; z-index: 4; left: 50%; bottom: 22px; transform: translateX(-50%); display: flex; align-items: center; justify-content: center; gap: 8px; width: max-content; max-width: calc(100% - 36px); padding: 8px; border: 1px solid rgba(108,66,31,.10); border-radius: 999px; background: rgba(255,251,242,.84); box-shadow: 0 12px 30px rgba(76,49,16,.09); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } .cards-mockup-caption span { display: inline-flex; align-items: center; min-height: 30px; padding: 6px 11px; border-radius: 999px; color: rgba(16,43,67,.72); font-size: 10px; font-weight: 800; letter-spacing: .02em; white-space: nowrap; } .cards-mockup-caption span:first-child { background: var(--navy-deep); color: var(--cream); } .cards-mockup-caption span:nth-child(2) { background: rgba(245,181,54,.16); color: var(--brown); } @keyframes real-cards-mockup-float { 0%,100% { transform: translate3d(0,0,0) rotate(-.5deg); } 50% { transform: translate3d(0,-8px,0) rotate(.35deg); } } @media (max-width:1100px) { .cards-section { grid-template-columns:1fr; } .cards-mockup-preview { width:min(100%,880px); min-height:570px; margin-inline:auto; } .cards-real-mockup { width:min(106%,800px); } } @media (max-width:720px) { .cards-section { padding:86px 14px 94px; } .cards-copy::after { margin-left:auto; margin-right:auto; } .cards-mockup-preview { min-height:470px; padding:16px 8px 58px; border-radius:24px; overflow:hidden; } .cards-mockup-preview::before { inset:8px; border-radius:17px; } .cards-mockup-preview::after { bottom:10%; } .cards-real-mockup { width:118%; margin-inline:-9%; } .cards-mockup-caption { bottom:14px; gap:4px; padding:5px; } .cards-mockup-caption span { min-height:26px; padding:5px 8px; font-size:8px; } } @media (max-width:430px) { .cards-section { padding-left:9px; padding-right:9px; } .cards-mockup-preview { min-height:410px; } .cards-real-mockup { width:128%; margin-inline:-14%; } .cards-mockup-caption span:last-child { display:none; } } @media (prefers-reduced-motion:reduce) { .js .cards-mockup-preview.is-visible .cards-real-mockup { animation:none !important; transform:none !important; } } /* Audience night scene: animated fireflies */ .audience-section{ position:relative; isolation:isolate; overflow:hidden; color:var(--cream); background: radial-gradient(circle at 18% 18%,rgba(29,98,215,.16),transparent 28%), radial-gradient(circle at 78% 22%,rgba(245,181,54,.08),transparent 24%), radial-gradient(circle at 50% 120%,rgba(11,53,87,.88),transparent 56%), linear-gradient(180deg,#03182f 0%,#041d38 48%,#062746 100%); } .audience-section::before, .audience-section::after{ content:""; position:absolute; inset:-12%; pointer-events:none; z-index:-1; } .audience-section::before{ opacity:.72; background-image: radial-gradient(circle,rgba(255,208,102,.95) 0 1px,transparent 1.8px), radial-gradient(circle,rgba(255,245,220,.85) 0 1.2px,transparent 2px), radial-gradient(circle,rgba(245,181,54,.72) 0 1.4px,transparent 2.2px); background-size:88px 108px,132px 154px,188px 176px; background-position:20px 30px,80px 110px,140px 40px; animation:audience-firefly-drift 22s linear infinite alternate, audience-firefly-pulse 5.6s ease-in-out infinite; filter:drop-shadow(0 0 5px rgba(245,181,54,.55)); } .audience-section::after{ width:3px; height:3px; inset:auto; left:12%; top:20%; border-radius:50%; background:#ffd066; box-shadow: 70px 45px 0 0 rgba(255,208,102,.8), 120px 80px 0 0 rgba(255,208,102,.88), 205px 155px 0 1px rgba(255,245,220,.68), 280px 10px 0 1px rgba(255,245,220,.72), 335px 225px 0 0 rgba(245,181,54,.78), 420px 130px 0 0 rgba(245,181,54,.9), 505px 20px 0 1px rgba(255,208,102,.66), 610px 55px 0 1px rgba(255,208,102,.72), 680px 235px 0 0 rgba(255,245,220,.72), 760px 160px 0 0 rgba(255,245,220,.7), 835px 95px 0 1px rgba(245,181,54,.76), 900px 30px 0 1px rgba(245,181,54,.82), 980px 250px 0 0 rgba(255,245,220,.66), 1030px 180px 0 0 rgba(255,208,102,.78), 1120px 95px 0 1px rgba(245,181,54,.74), 160px 330px 0 1px rgba(245,181,54,.75), 245px 470px 0 0 rgba(255,208,102,.72), 350px 420px 0 0 rgba(255,245,220,.76), 455px 520px 0 1px rgba(245,181,54,.68), 540px 300px 0 1px rgba(255,208,102,.8), 635px 465px 0 0 rgba(255,245,220,.7), 735px 390px 0 0 rgba(245,181,54,.74), 835px 555px 0 1px rgba(255,208,102,.72), 960px 340px 0 1px rgba(255,245,220,.72), 1045px 540px 0 0 rgba(245,181,54,.7), 1120px 460px 0 0 rgba(255,208,102,.82), 1210px 285px 0 1px rgba(255,245,220,.66); filter:drop-shadow(0 0 7px rgba(255,208,102,.9)); animation:audience-firefly-float 9s ease-in-out infinite alternate, audience-firefly-twinkle 3.8s ease-in-out infinite; } .audience-section .section-heading, .audience-section .audience-columns, .audience-section .presence-quote{ position:relative; z-index:1; } .audience-section .section-heading h2{ color:var(--cream); text-shadow:0 10px 30px rgba(0,0,0,.28); } .audience-section .section-heading h2::after{ content:""; display:block; width:58px; height:2px; margin:22px auto 0; border-radius:999px; background:linear-gradient(90deg,transparent,var(--gold),transparent); box-shadow:0 0 16px rgba(245,181,54,.55); } .audience-section .audience-columns{ overflow:hidden; border:1px solid rgba(255,245,220,.14); border-radius:28px; background:rgba(3,24,47,.42); box-shadow:0 34px 90px rgba(0,0,0,.24),inset 0 1px 0 rgba(255,255,255,.05); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); } .audience-section .audience-columns article{ color:rgba(255,245,220,.88); background:transparent; } .audience-section .audience-columns h3{ color:var(--cream); } .audience-section .for-you{ background:linear-gradient(145deg,rgba(11,53,87,.56),rgba(6,39,70,.32)); } .audience-section .not-for-you{ border-left:1px solid rgba(255,245,220,.12); background:linear-gradient(145deg,rgba(3,24,47,.3),rgba(6,39,70,.2)); } .audience-section .for-you li::before{ color:var(--gold-light); text-shadow:0 0 12px rgba(245,181,54,.45); } .audience-section .not-for-you li::before{ color:#f08b68; } .audience-section .presence-quote{ color:rgba(255,245,220,.74); } .audience-section .presence-quote strong{ color:var(--gold-light); text-shadow:0 0 18px rgba(245,181,54,.18); } @keyframes audience-firefly-drift{ 0%{transform:translate3d(-1.5%,-1%,0) scale(1)} 50%{transform:translate3d(1.2%,1.5%,0) scale(1.018)} 100%{transform:translate3d(2.2%,-.6%,0) scale(1.01)} } @keyframes audience-firefly-pulse{ 0%,100%{opacity:.4} 35%{opacity:.82} 62%{opacity:.5} 82%{opacity:.9} } @keyframes audience-firefly-float{ 0%{transform:translate3d(0,0,0)} 40%{transform:translate3d(24px,-18px,0)} 72%{transform:translate3d(-10px,16px,0)} 100%{transform:translate3d(34px,-8px,0)} } @keyframes audience-firefly-twinkle{ 0%,100%{opacity:.22} 28%{opacity:.9} 48%{opacity:.38} 72%{opacity:1} } @media (max-width:820px){ .audience-section .audience-columns{ border-radius:22px; } .audience-section .not-for-you{ border-left:0; border-top:1px solid rgba(255,245,220,.12); } .audience-section::after{ left:4%; transform:scale(.82); } } @media (prefers-reduced-motion:reduce){ .audience-section::before, .audience-section::after{ animation:none!important; } } /* Night continuity offer + organic firefly particles */ .audience-section, .offer-section{ position:relative; isolation:isolate; overflow:hidden; background: radial-gradient(circle at 17% 16%,rgba(29,98,215,.15),transparent 27%), radial-gradient(circle at 78% 30%,rgba(245,181,54,.065),transparent 24%), radial-gradient(circle at 48% 105%,rgba(11,53,87,.88),transparent 58%), linear-gradient(180deg,#03182f 0%,#041d38 48%,#062746 100%); } .audience-section::before, .audience-section::after{ display:none!important; } .audience-section{ padding-bottom:clamp(92px,8vw,126px); } .offer-section{ margin-top:-1px; padding:clamp(76px,7vw,112px) 0 clamp(105px,9vw,145px); border-top:1px solid rgba(255,208,102,.07); } .audience-section > :not(.night-particle-field), .offer-section > :not(.night-particle-field){ position:relative; z-index:2; } .night-particle-field{ position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none; } .night-firefly{ --size:2px; --duration:12s; --delay:0s; --dx1:20px; --dy1:-35px; --dx2:-16px; --dy2:18px; --dx3:28px; --dy3:-14px; position:absolute; left:var(--left); top:var(--top); width:var(--size); height:var(--size); border-radius:50%; background:rgba(255,218,117,.96); box-shadow: 0 0 4px rgba(255,208,102,.95), 0 0 10px rgba(245,181,54,.62), 0 0 18px rgba(245,181,54,.20); opacity:.25; animation:night-firefly-particle var(--duration) ease-in-out var(--delay) infinite; will-change:transform,opacity; } .night-firefly:nth-child(3n){ background:rgba(255,248,226,.94); box-shadow: 0 0 4px rgba(255,248,226,.9), 0 0 11px rgba(255,208,102,.42); } .night-firefly:nth-child(5n){ filter:blur(.35px); } @keyframes night-firefly-particle{ 0%{ transform:translate3d(0,0,0) scale(.72); opacity:.12; } 14%{ opacity:.92; } 28%{ transform:translate3d(var(--dx1),var(--dy1),0) scale(1.18); opacity:.48; } 47%{ transform:translate3d(var(--dx2),var(--dy2),0) scale(.86); opacity:1; } 68%{ transform:translate3d(var(--dx3),var(--dy3),0) scale(1.05); opacity:.34; } 84%{ opacity:.78; } 100%{ transform:translate3d(0,0,0) scale(.72); opacity:.12; } } .offer-section .section-heading{ max-width:940px; } .offer-section .section-heading h2{ color:var(--cream); text-shadow:0 12px 34px rgba(0,0,0,.27); } .offer-section .section-heading h2::after{ content:""; display:block; width:64px; height:2px; margin:24px auto 0; border-radius:999px; background:linear-gradient(90deg,transparent,var(--gold),transparent); box-shadow:0 0 18px rgba(245,181,54,.48); } .offer-layout-night{ width:min(860px,calc(100% - 40px)); grid-template-columns:1fr; gap:0; margin:48px auto 0; } .offer-layout-night .offer-details{ position:relative; overflow:hidden; width:100%; max-width:none; margin:0; padding:clamp(34px,4.2vw,54px); border:1px solid rgba(255,245,220,.14); border-radius:30px; color:var(--cream); background: radial-gradient(circle at 84% 10%,rgba(245,181,54,.10),transparent 28%), linear-gradient(145deg,rgba(8,42,75,.86),rgba(3,24,47,.72)); box-shadow: 0 36px 90px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.055); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); } .offer-layout-night .offer-details::before{ content:""; position:absolute; width:280px; height:280px; right:-120px; bottom:-150px; border-radius:50%; background:radial-gradient(circle,rgba(245,181,54,.11),transparent 66%); pointer-events:none; } .offer-meta{ position:relative; z-index:1; display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:9px; margin:0 0 30px; padding:11px 16px; border:1px solid rgba(255,208,102,.13); border-radius:999px; color:rgba(255,245,220,.68); background:rgba(3,24,47,.34); font-size:10px; font-weight:800; letter-spacing:.07em; text-transform:uppercase; } .offer-meta strong{ color:var(--gold-light); } .offer-meta b{ color:rgba(255,245,220,.78); font-weight:800; } .offer-meta span{ color:var(--gold); font-size:15px; line-height:1; } .offer-layout-night .offer-kit-preview{ position:relative; z-index:1; width:100%; margin:0 auto 26px; } .offer-layout-night .offer-kit-preview img{ display:block; width:min(100%, 620px); margin:0 auto; filter:drop-shadow(0 26px 30px rgba(0,0,0,.36)); } .offer-layout-night .offer-details ul{ position:relative; z-index:1; } .offer-layout-night .offer-details li{ padding:13px 0 13px 31px; border-bottom:1px solid rgba(255,245,220,.10); color:rgba(255,245,220,.88); font-size:14px; } .offer-layout-night .offer-details li::before{ color:var(--gold-light); text-shadow:0 0 12px rgba(245,181,54,.36); } .offer-layout-night .offer-details li strong{ color:var(--cream); } .offer-layout-night .offer-details li small{ margin-top:2px; color:rgba(255,245,220,.56); } .offer-layout-night .price{ position:relative; z-index:1; place-items:center; padding:32px 0 28px; text-align:center; } .offer-layout-night .price small{ color:rgba(255,245,220,.58); } .offer-layout-night .price strong{ color:var(--gold-light); font-size:clamp(64px,7vw,86px); text-shadow:0 0 30px rgba(245,181,54,.12); } .offer-layout-night .price sup{ color:var(--cream); } .offer-layout-night .price span{ color:rgba(255,245,220,.65); } .offer-layout-night .button{ --gleam-base:#f5b536; --gleam-inset:#ffd066; --gleam-label:#03182f; --gleam-accent:#fff5dc; --gleam-accent-soft:#ffffff; position:relative; z-index:1; width:100%; color:#03182f; box-shadow: inset 0 0 0 1px #ffd066, 0 18px 38px rgba(245,181,54,.18); } .offer-layout-night .button:is(:hover,:focus-visible){ color:#03182f; box-shadow: inset 0 0 0 1px #fff0b8, 0 22px 46px rgba(245,181,54,.26); } .offer-layout-night .assurance{ position:relative; z-index:1; margin:14px 0 0; color:rgba(255,245,220,.58); } @media(max-width:720px){ .offer-section{ padding-top:70px; } .offer-layout-night{ width:calc(100% - 22px); margin-top:36px; } .offer-layout-night .offer-details{ padding:28px 20px; border-radius:24px; } .offer-layout-night .offer-kit-preview{ margin:0 auto 22px; } .offer-layout-night .offer-kit-preview img{ width:min(100%, 520px); } .offer-meta{ border-radius:18px; gap:6px 8px; font-size:8px; } .offer-layout-night .offer-details li{ padding-left:27px; font-size:13px; } .offer-layout-night .price strong{ font-size:62px; } } @media(prefers-reduced-motion:reduce){ .night-firefly{ animation:none!important; opacity:.55; } } /* Thematic 7-day moon guarantee */ .guarantee-section{ width:min(1120px,calc(100% - 40px)); max-width:1120px; margin:clamp(70px,8vw,118px) auto; padding:0; display:grid; grid-template-columns:minmax(300px,.82fr) minmax(0,1.18fr); gap:0; align-items:stretch; overflow:hidden; border:1px solid rgba(108,66,31,.10); border-radius:34px; background:#fff8e8; box-shadow:0 34px 80px rgba(76,49,16,.12),0 8px 22px rgba(76,49,16,.07); } .guarantee-scene{ position:relative; min-height:430px; overflow:hidden; background: radial-gradient(circle at 50% 38%,rgba(255,208,102,.16),transparent 28%), radial-gradient(circle at 22% 14%,rgba(29,98,215,.18),transparent 35%), linear-gradient(180deg,#052642 0%,#073252 58%,#0b3a58 100%); } .guarantee-scene::after{ content:""; position:absolute; inset:auto -8% -14% -8%; height:38%; background:linear-gradient(180deg,rgba(255,255,255,0),rgba(255,245,220,.06)); filter:blur(16px); pointer-events:none; } .guarantee-sky-stars, .guarantee-sky-stars::before, .guarantee-sky-stars::after{ position:absolute; inset:0; content:""; pointer-events:none; background-image: radial-gradient(circle,rgba(255,245,220,.9) 0 1px,transparent 1.7px), radial-gradient(circle,rgba(255,208,102,.82) 0 1.2px,transparent 2px); background-size:86px 96px,138px 152px; background-position:14px 18px,58px 72px; opacity:.55; } .guarantee-sky-stars::before{ transform:translate(22px,34px); opacity:.38; } .guarantee-sky-stars::after{ transform:translate(-18px,60px) scale(.9); opacity:.28; } .guarantee-moon{ position:absolute; z-index:3; left:50%; top:43%; width:202px; aspect-ratio:1; border-radius:50%; transform:translate(-50%,-50%) rotate(-10deg); background: radial-gradient(circle at 28% 30%,rgba(255,255,255,.92) 0 5%,transparent 20%), radial-gradient(circle at 32% 48%,#fffbe8 0 18%,#ffe9a0 52%,#ffd164 78%,#efb23a 100%); box-shadow: 0 0 0 1px rgba(255,255,255,.28) inset, -14px -12px 28px rgba(255,255,255,.2) inset, 0 0 42px rgba(255,219,125,.62), 0 0 100px rgba(245,181,54,.25), 0 0 150px rgba(245,181,54,.10); animation:guarantee-moon-breathe 5.8s ease-in-out infinite; } .guarantee-moon::before{ content:""; position:absolute; width:18px; height:18px; left:42px; top:50px; border-radius:50%; background:rgba(210,157,52,.14); box-shadow: 28px 52px 0 6px rgba(210,157,52,.08), -7px 78px 0 3px rgba(210,157,52,.09); filter:blur(.3px); } .guarantee-moon::after{ content:""; position:absolute; z-index:2; width:188px; aspect-ratio:1; right:-26px; top:4px; border-radius:50%; background: radial-gradient(circle at 36% 42%,rgba(8,48,79,.98),rgba(7,43,72,.99) 66%,#062a46 100%); box-shadow: -9px 4px 22px rgba(3,24,47,.34), inset 12px 0 24px rgba(255,255,255,.015); } .guarantee-moon-copy{ position:absolute; z-index:6; left:50%; top:72%; transform:translateX(-50%); min-width:126px; padding:10px 18px 9px; display:grid; grid-template-columns:auto auto; align-items:end; justify-content:center; column-gap:8px; border:1px solid rgba(255,208,102,.24); border-radius:999px; color:var(--cream); background:rgba(3,24,47,.64); box-shadow: 0 12px 30px rgba(0,8,20,.24), inset 0 1px 0 rgba(255,255,255,.05); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); text-align:center; } .guarantee-moon-copy small{ grid-column:1 / -1; margin-bottom:2px; color:rgba(255,245,220,.55); font-size:7px; font-weight:900; letter-spacing:.17em; text-transform:uppercase; } .guarantee-moon-copy strong{ font-family:var(--serif); color:var(--gold-light); font-size:36px; line-height:.82; text-shadow:0 0 16px rgba(245,181,54,.22); } .guarantee-moon-copy span{ margin:0 0 2px; color:rgba(255,245,220,.9); font-size:10px; font-weight:900; letter-spacing:.14em; text-transform:uppercase; } .guarantee-cloud{ position:absolute; z-index:4; height:34px; border-radius:999px; background:rgba(255,250,235,.94); box-shadow:0 12px 26px rgba(0,8,20,.12); filter:drop-shadow(0 8px 18px rgba(0,8,20,.10)); } .guarantee-cloud::before, .guarantee-cloud::after{ content:""; position:absolute; bottom:0; border-radius:50%; background:inherit; } .guarantee-cloud::before{ width:58px; height:58px; left:24px; } .guarantee-cloud::after{ width:42px; height:42px; right:22px; } .cloud-one{ width:185px; left:-26px; bottom:66px; opacity:.96; animation:guarantee-cloud-a 10s ease-in-out infinite alternate; } .cloud-two{ width:160px; right:-35px; bottom:94px; opacity:.84; transform:scale(.82); animation:guarantee-cloud-b 12s ease-in-out infinite alternate; } .cloud-three{ width:128px; left:44%; bottom:25px; opacity:.56; transform:scale(.68); animation:guarantee-cloud-c 14s ease-in-out infinite alternate; } .guarantee-copy{ position:relative; padding:clamp(42px,5vw,68px); background: radial-gradient(circle at 88% 20%,rgba(245,181,54,.09),transparent 32%), linear-gradient(145deg,#fff9ea,#fff4da); } .guarantee-copy::before{ content:""; position:absolute; left:0; top:12%; bottom:12%; width:1px; background:linear-gradient(transparent,rgba(108,66,31,.18),transparent); } .guarantee-kicker{ margin:0 0 14px!important; color:var(--brown); font-size:10px; font-weight:900; letter-spacing:.16em; text-transform:uppercase; } .guarantee-section h2{ max-width:650px; margin-bottom:24px; color:var(--navy); font-size:clamp(38px,4vw,54px); line-height:1.07; } .guarantee-section .guarantee-copy p:not(.guarantee-kicker){ max-width:680px; margin-bottom:12px; color:#29445b; font-size:15px; line-height:1.65; } .guarantee-section .guarantee-copy p:last-child{ margin-bottom:0; font-weight:700; color:#17344e; } @keyframes guarantee-moon-breathe{ 0%,100%{transform:translate(-50%,-50%) rotate(-10deg) scale(.985);filter:brightness(.98)} 50%{transform:translate(-50%,-50%) rotate(-8deg) scale(1.018);filter:brightness(1.055)} } @keyframes guarantee-cloud-a{ from{transform:translate3d(-8px,0,0)} to{transform:translate3d(18px,-4px,0)} } @keyframes guarantee-cloud-b{ from{transform:translate3d(10px,0,0) scale(.82)} to{transform:translate3d(-18px,5px,0) scale(.82)} } @keyframes guarantee-cloud-c{ from{transform:translate3d(-10px,2px,0) scale(.68)} to{transform:translate3d(14px,-5px,0) scale(.68)} } @media(max-width:820px){ .guarantee-section{ grid-template-columns:1fr; width:calc(100% - 24px); border-radius:26px; } .guarantee-scene{ min-height:330px; } .guarantee-moon{ width:166px; top:41%; } .guarantee-moon::after{ width:154px; right:-21px; top:4px; } .guarantee-moon-copy{ top:70%; min-width:116px; padding:9px 15px 8px; } .guarantee-moon-copy strong{ font-size:32px; } .guarantee-copy{ padding:34px 24px 38px; text-align:center; } .guarantee-copy::before{ left:10%; right:10%; top:0; bottom:auto; width:auto; height:1px; background:linear-gradient(90deg,transparent,rgba(108,66,31,.18),transparent); } .guarantee-section h2{ margin-inline:auto; font-size:clamp(34px,10vw,44px); } .guarantee-section .guarantee-copy p:not(.guarantee-kicker){ margin-inline:auto; } } @media(prefers-reduced-motion:reduce){ .guarantee-moon, .guarantee-cloud{ animation:none!important; } } /* Final prayer connection gateway */ .final-prayer-section{ position:relative; isolation:isolate; display:flex; align-items:center; justify-content:center; min-height:760px; padding:clamp(118px,11vw,168px) var(--gutter) clamp(100px,10vw,148px); overflow:hidden; text-align:center; background: radial-gradient(circle at 50% 10%,rgba(255,208,102,.11),transparent 16%), radial-gradient(circle at 50% 52%,rgba(11,53,87,.42),transparent 38%), linear-gradient(180deg,#03182f 0%,#052a48 50%,#03182f 100%); } .final-prayer-section::before{ content:""; position:absolute; z-index:1; inset:0; pointer-events:none; background: radial-gradient(ellipse 48% 52% at 50% 57%,rgba(3,24,47,.84) 0%,rgba(3,24,47,.54) 52%,rgba(3,24,47,.04) 100%); } .prayer-flow-bg{ position:absolute; z-index:0; inset:0; overflow:hidden; pointer-events:none; } .prayer-flow-svg{ width:100%; height:100%; display:block; } .prayer-ribbons{ opacity:.88; } .prayer-path{ fill:none; stroke:rgba(255,245,220,.66); stroke-width:1.08; stroke-linecap:round; stroke-dasharray:1 8; vector-effect:non-scaling-stroke; animation:prayer-path-stream 8s linear infinite; filter:drop-shadow(0 0 4px rgba(255,208,102,.18)); } .prayer-path:nth-child(2n){ stroke:rgba(255,208,102,.52); stroke-dasharray:1 10; animation-duration:10.5s; } .prayer-path:nth-child(3n){ stroke:rgba(255,245,220,.42); stroke-dasharray:1 12; animation-duration:12s; } .prayer-beacon{ filter:url("#prayerGlow"); animation:prayer-beacon-pulse 4.8s ease-in-out infinite; transform-origin:600px 84px; } .prayer-beacon-core{ fill:#fff9dc; filter:url("#prayerGlow"); } .prayer-particle{ fill:#fff6cf; filter:url("#prayerGlow"); opacity:.98; } .prayer-particle-soft{ fill:#ffd066; opacity:.72; } .final-prayer-section .final-copy{ position:relative; z-index:2; width:min(900px,100%); margin:0 auto; display:flex; flex-direction:column; align-items:center; } .final-prayer-section .final-eyebrow{ margin:0 0 20px!important; color:var(--gold-light)!important; font-size:10px!important; font-weight:900; letter-spacing:.18em; text-transform:uppercase; } .final-prayer-section .final-copy h2{ margin:0; max-width:900px; color:var(--cream); font-size:clamp(44px,5.6vw,76px); line-height:1.01; letter-spacing:-.025em; text-wrap:balance; text-shadow:0 18px 48px rgba(0,0,0,.32); } .final-prayer-section .final-copy>p:not(.final-eyebrow):not(.assurance){ max-width:710px; margin:28px auto 0; color:rgba(255,245,220,.76); font-size:clamp(17px,1.7vw,21px); line-height:1.58; } .final-prayer-section .final-price{ justify-content:center; margin:34px 0 18px; } .final-prayer-section .final-price strong{ color:var(--gold-light); font-size:clamp(48px,5vw,66px); text-shadow:0 0 30px rgba(245,181,54,.17); } .final-prayer-section .final-price span{ color:rgba(255,245,220,.62); font-weight:800; letter-spacing:.1em; } .final-prayer-section .button{ min-width:min(360px,100%); justify-content:center; } .final-prayer-section .assurance{ margin:17px 0 0; color:rgba(255,245,220,.55); } @keyframes prayer-path-stream{ to{stroke-dashoffset:-72} } @keyframes prayer-beacon-pulse{ 0%,100%{transform:scale(.82);opacity:.66} 50%{transform:scale(1.16);opacity:1} } @media(max-width:780px){ .final-prayer-section{ min-height:690px; padding:118px 18px 92px; } .final-prayer-section::before{ background:radial-gradient(ellipse 72% 52% at 50% 58%,rgba(3,24,47,.86),rgba(3,24,47,.44) 62%,transparent); } .prayer-flow-svg{ width:150%; margin-left:-25%; } .final-prayer-section .final-copy h2{ font-size:clamp(38px,11vw,54px); line-height:1.03; } .final-prayer-section .final-copy>p:not(.final-eyebrow):not(.assurance){ font-size:17px; } .final-prayer-section .final-price{ flex-direction:column; align-items:center; gap:5px; } .final-prayer-section .button{ width:min(100%,350px); } } @media(prefers-reduced-motion:reduce){ .final-prayer-section .prayer-path, .final-prayer-section .prayer-beacon{ animation:none!important; } .final-prayer-section .prayer-particles{ display:none; } } /* Premium parents guide section */ .guide-section{ position:relative; isolation:isolate; overflow:hidden; width:100%; max-width:none; margin:0; padding-block:clamp(105px,9vw,150px); padding-inline:max(var(--gutter),calc((100vw - 1260px)/2)); grid-template-columns:minmax(0,1.08fr) minmax(420px,.92fr); gap:clamp(58px,6vw,92px); background: radial-gradient(circle at 18% 24%,rgba(245,181,54,.10),transparent 24%), radial-gradient(circle at 84% 72%,rgba(29,98,215,.055),transparent 26%), linear-gradient(180deg,#fffaf0 0%,#fff6e5 100%); } .guide-section::before{ content:""; position:absolute; z-index:-1; inset:0; pointer-events:none; background-image: linear-gradient(90deg,rgba(108,66,31,.022) 1px,transparent 1px), linear-gradient(rgba(108,66,31,.018) 1px,transparent 1px); background-size:38px 38px; mask-image:linear-gradient(90deg,rgba(0,0,0,.45),transparent 72%); } .guide-section::after{ content:""; position:absolute; z-index:-1; width:420px; height:420px; left:-140px; bottom:-180px; border-radius:50%; background:radial-gradient(circle,rgba(245,181,54,.14),transparent 68%); filter:blur(10px); } .guide-preview{ position:relative; display:block; min-height:620px; margin:0; filter:none; } .guide-preview::before{ content:""; position:absolute; inset:7% 2% 4% 4%; border:1px solid rgba(255,245,220,.08); border-radius:30px; background: radial-gradient(circle at 78% 18%,rgba(245,181,54,.14),transparent 26%), linear-gradient(145deg,#052845 0%,#03182f 64%,#092d4c 100%); box-shadow: 0 34px 82px rgba(31,27,20,.20), inset 0 1px 0 rgba(255,255,255,.035); } .guide-preview::after{ content:""; position:absolute; width:76%; height:34px; left:12%; bottom:2%; border-radius:50%; background:rgba(31,27,20,.18); filter:blur(22px); z-index:-1; } .guide-cover{ position:absolute; z-index:2; left:7%; top:15%; width:42%; min-height:440px; padding:48px 30px; border:1px solid rgba(255,245,220,.08); border-radius:10px 5px 5px 10px; background: linear-gradient(90deg,rgba(255,255,255,.04),transparent 10%), radial-gradient(circle at 50% 22%,rgba(245,181,54,.09),transparent 24%), linear-gradient(160deg,#0a365b,#062746 58%,#03182f); color:var(--cream); box-shadow: -16px 24px 40px rgba(0,0,0,.16), 0 34px 52px rgba(0,0,0,.20); transform:perspective(1000px) rotateY(8deg) rotateZ(-4deg); transform-origin:right center; animation:guide-cover-float 7.2s ease-in-out infinite; } .guide-cover::before{ content:""; position:absolute; inset:10px auto 10px 10px; width:2px; border-radius:2px; background:linear-gradient(transparent,rgba(255,208,102,.42),transparent); } .guide-cover::after{ content:""; position:absolute; inset:0; border-radius:inherit; background:linear-gradient(115deg,transparent 25%,rgba(255,255,255,.055) 45%,transparent 63%); transform:translateX(-55%); animation:guide-cover-sheen 6.8s ease-in-out infinite; pointer-events:none; } .guide-cover small{ display:inline-block; width:max-content; margin:0 auto; padding:5px 10px; border:1px solid rgba(255,208,102,.25); border-radius:999px; color:var(--gold-light); background:rgba(245,181,54,.08); font-size:9px; font-weight:900; letter-spacing:.12em; text-transform:uppercase; } .guide-cover h3{ margin:24px 0 16px; font-size:clamp(32px,3vw,40px); line-height:1.05; } .guide-cover p{ margin:0; color:rgba(255,245,220,.88); font-size:18px; line-height:1.4; } .guide-cover span{ margin-top:28px; color:var(--gold-light); font-size:9px; line-height:1.5; letter-spacing:.09em; } .guide-page{ position:absolute; z-index:3; right:4%; top:8%; width:59%; min-height:505px; padding:42px 34px 36px; border:1px solid rgba(108,66,31,.10); border-radius:7px; background: linear-gradient(115deg,rgba(245,181,54,.035),transparent 22%), var(--warm-white); box-shadow: 0 28px 50px rgba(55,36,15,.20), 0 4px 12px rgba(55,36,15,.08); transform:rotate(2.1deg); animation:guide-page-float 7.8s ease-in-out infinite; } .guide-page::before{ content:"GUÍA PRÁCTICA"; display:inline-flex; margin-bottom:18px; padding:5px 9px; border-radius:999px; color:var(--brown); background:rgba(245,181,54,.14); font-family:var(--sans); font-size:8px; font-weight:900; letter-spacing:.13em; } .guide-page h3{ margin:0 0 22px; color:var(--navy); font-size:clamp(26px,2.7vw,34px); line-height:1.08; } .guide-page ol{ position:relative; margin:0; padding:0; list-style:none; counter-reset:guide; } .guide-page ol::before{ content:""; position:absolute; left:13px; top:18px; bottom:20px; width:1px; background:linear-gradient(var(--gold),rgba(245,181,54,.10)); } .guide-page li{ position:relative; grid-template-columns:38px 1fr; padding:15px 0 15px; border-bottom:1px solid rgba(108,66,31,.12); } .guide-page li:last-child{ border-bottom:0; } .guide-page li::before{ position:relative; z-index:2; width:28px; height:28px; color:var(--navy); background:var(--gold-light); box-shadow:0 0 0 5px var(--warm-white),0 0 0 6px rgba(245,181,54,.15); font-weight:900; } .guide-page li b{ color:var(--navy); font-size:15px; } .guide-page small{ margin-top:3px; color:#65717d; font-size:11px; line-height:1.45; } .guide-copy{ position:relative; max-width:560px; } .guide-copy .material-number{ display:inline-flex; align-items:center; gap:8px; width:max-content; margin-bottom:18px; padding:7px 12px; border:1px solid rgba(245,181,54,.22); border-radius:999px; color:#996421; background:rgba(255,255,255,.58); box-shadow:0 8px 20px rgba(92,60,21,.06); } .guide-copy .material-number::before{ content:""; width:7px; height:7px; border-radius:50%; background:var(--gold); box-shadow:0 0 12px rgba(245,181,54,.55); } .guide-copy h2{ max-width:540px; margin:0 0 22px; color:var(--navy); font-size:clamp(40px,4.2vw,60px); line-height:.98; letter-spacing:-.022em; text-wrap:balance; } .guide-copy>p:not(.material-number){ max-width:510px; margin:0; color:#526577; font-size:17px; line-height:1.65; } .guide-copy .method{ position:relative; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; margin-top:32px; padding-top:2px; counter-reset:guideMethod; } .guide-copy .method::before{ content:""; position:absolute; left:9%; right:9%; top:20px; height:1px; background:linear-gradient(90deg,rgba(245,181,54,.18),var(--gold),rgba(245,181,54,.18)); } .guide-copy .method b{ display:none; } .guide-copy .method span{ position:relative; z-index:1; min-width:0; padding:42px 8px 11px; border:1px solid rgba(108,66,31,.10); border-radius:14px; color:var(--navy); background:rgba(255,255,255,.52); box-shadow:0 10px 24px rgba(76,49,16,.05); text-align:center; font-size:9px; line-height:1.25; letter-spacing:.07em; counter-increment:guideMethod; transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease; } .guide-copy .method span::before{ content:counter(guideMethod); position:absolute; top:5px; left:50%; width:28px; height:28px; display:grid; place-items:center; border-radius:50%; transform:translateX(-50%); color:var(--navy); background:var(--gold-light); box-shadow:0 0 0 5px #fff8e8,0 8px 18px rgba(245,181,54,.18); font-size:10px; font-weight:900; } .guide-copy .method span:hover{ transform:translateY(-3px); border-color:rgba(245,181,54,.26); box-shadow:0 15px 28px rgba(76,49,16,.08); } .guide-section blockquote{ position:relative; overflow:hidden; margin:34px 0 0; padding:28px 30px 28px 72px; border:1px solid rgba(255,245,220,.09); border-left:0; border-radius:20px; color:var(--cream); background: radial-gradient(circle at 86% 18%,rgba(245,181,54,.12),transparent 26%), linear-gradient(145deg,#082f50,#03182f); box-shadow:0 20px 42px rgba(3,24,47,.16); font-size:clamp(22px,2.2vw,30px); line-height:1.3; } .guide-section blockquote::before{ content:"“"; position:absolute; left:24px; top:8px; color:var(--gold-light); font-family:var(--serif); font-size:68px; line-height:1; opacity:.9; } .guide-section blockquote::after{ content:""; position:absolute; right:-40px; bottom:-55px; width:150px; height:150px; border-radius:50%; background:radial-gradient(circle,rgba(245,181,54,.13),transparent 67%); } @keyframes guide-cover-float{ 0%,100%{transform:perspective(1000px) rotateY(8deg) rotateZ(-4deg) translateY(0)} 50%{transform:perspective(1000px) rotateY(6deg) rotateZ(-3deg) translateY(-8px)} } @keyframes guide-page-float{ 0%,100%{transform:rotate(2.1deg) translateY(0)} 50%{transform:rotate(1.3deg) translateY(7px)} } @keyframes guide-cover-sheen{ 0%,18%{transform:translateX(-75%);opacity:0} 34%{opacity:1} 48%,100%{transform:translateX(75%);opacity:0} } @media(max-width:980px){ .guide-section{ grid-template-columns:1fr; gap:62px; padding-inline:var(--gutter); } .guide-preview{ width:min(720px,100%); margin-inline:auto; } .guide-copy{ max-width:720px; margin-inline:auto; text-align:center; } .guide-copy h2, .guide-copy>p:not(.material-number){ margin-inline:auto; } .guide-copy .material-number{ margin-inline:auto; } } @media(max-width:620px){ .guide-section{ padding-block:82px 96px; } .guide-preview{ min-height:510px; } .guide-preview::before{ inset:5% 0 3%; border-radius:24px; } .guide-cover{ left:4%; top:15%; width:46%; min-height:350px; padding:34px 18px; } .guide-cover h3{ font-size:26px; } .guide-cover p{ font-size:14px; } .guide-cover span{ font-size:7px; } .guide-page{ right:3%; top:8%; width:62%; min-height:410px; padding:28px 19px 24px; } .guide-page::before{ margin-bottom:12px; font-size:7px; } .guide-page h3{ margin-bottom:14px; font-size:23px; } .guide-page li{ grid-template-columns:33px 1fr; padding:11px 0; } .guide-page li::before{ width:25px; height:25px; } .guide-page li b{ font-size:12px; } .guide-page small{ font-size:9px; } .guide-copy h2{ font-size:clamp(38px,11vw,50px); } .guide-copy .method{ grid-template-columns:1fr 1fr; gap:12px; } .guide-copy .method::before{ display:none; } .guide-section blockquote{ padding:26px 22px 26px 58px; text-align:left; } .guide-section blockquote::before{ left:18px; font-size:54px; } } @media(prefers-reduced-motion:reduce){ .guide-cover, .guide-page, .guide-cover::after{ animation:none!important; } } /* Verses section CTA */ .verses-section .verses-cta{ width:100%; max-width:560px; min-height:68px; margin-top:30px; justify-content:center; border-radius:999px; font-size:13px; letter-spacing:.055em; } .verses-section .verses-cta span{ margin-left:8px; font-size:18px; line-height:1; transition:transform .25s ease; } .verses-section .verses-cta:hover span, .verses-section .verses-cta:focus-visible span{ transform:translateX(5px); } @media(max-width:720px){ .verses-section .verses-cta{ max-width:none; min-height:64px; margin-top:26px; padding-inline:18px; font-size:12px; } } /* Mobile QA fixes - 390px focus */ .ritual-steps li small{ display:block; color:inherit; font:inherit; line-height:inherit; } @media(max-width:760px){ .ritual-steps li{ display:grid; grid-template-columns:46px minmax(0,1fr); grid-template-rows:auto auto; column-gap:12px; row-gap:3px; align-items:center; padding:16px 16px; text-align:left; } .ritual-steps li::after{ display:none; } .ritual-steps span{ position:static; grid-column:1; grid-row:1 / 3; align-self:center; justify-self:center; margin:0; font-size:26px; line-height:1; } .ritual-steps strong{ grid-column:2; grid-row:1; margin:0; align-self:end; font-size:16px; line-height:1.2; } .ritual-steps li small{ grid-column:2; grid-row:2; margin:0; align-self:start; font-size:14px; line-height:1.4; color:#334e64; } } @media(max-width:420px){ .hero-copy h1{ max-width:342px; font-size:clamp(34px,9vw,36px); line-height:1.045; letter-spacing:-.012em; } .hero-lead{ max-width:340px; font-size:15px; line-height:1.58; } .hero-copy .button{ width:100%; max-width:350px; min-height:58px; padding:13px 11px; gap:7px; justify-content:center; flex-wrap:nowrap; white-space:nowrap; font-size:10.25px; letter-spacing:.018em; } .hero-copy .button span{ flex:0 0 auto; margin-left:4px; } .ritual-steps{ width:calc(100% - 20px); padding:12px; } .ritual-steps li{ grid-template-columns:42px minmax(0,1fr); column-gap:11px; padding:15px 14px; } .ritual-steps span{ font-size:24px; } .ritual-steps strong{ font-size:15px; } .ritual-steps li small{ font-size:13.5px; line-height:1.35; } .guide-section{ width:100%; padding-inline:20px; justify-items:center; } .guide-preview{ width:100%; max-width:350px; min-height:500px; margin-inline:auto; justify-self:center; } .guide-preview::before{ left:0; right:0; } .guide-cover{ left:3%; } .guide-page{ right:3%; } .guide-copy{ width:100%; max-width:350px; margin-inline:auto; justify-self:center; text-align:center; box-sizing:border-box; } .guide-copy .material-number{ max-width:100%; margin-inline:auto; justify-content:center; text-align:center; white-space:normal; } .guide-copy h2, .guide-copy>p:not(.material-number){ width:100%; max-width:100%; margin-inline:auto; text-align:center; } .guide-copy h2{ font-size:clamp(36px,9.6vw,39px); line-height:1.02; } .guide-copy .method{ width:100%; margin-inline:auto; } .guide-section blockquote{ width:100%; max-width:100%; margin-left:auto; margin-right:auto; box-sizing:border-box; } } /* Scroll-following vertical ritual timeline */ .ritual-scroll-shell{ --ritual-scroll-progress:0%; position:relative; width:min(calc(100% - 48px),920px); margin:56px auto 0; padding-left:46px; box-sizing:border-box; } .ritual-scroll-shell .ritual-steps{ width:100%; margin:0; padding:18px; display:grid; grid-template-columns:1fr!important; gap:16px; border-radius:26px; box-sizing:border-box; } .ritual-scroll-shell .ritual-steps::after{ display:none!important; } .ritual-scroll-line{ display:block; position:absolute; z-index:4; left:17px; top:46px; bottom:46px; width:4px; overflow:hidden; border-radius:999px; background:rgba(245,181,54,.16); box-shadow: inset 0 0 0 1px rgba(245,181,54,.06), 0 0 18px rgba(245,181,54,.05); } .ritual-scroll-progress{ position:absolute; inset:0 auto auto 0; width:100%; height:var(--ritual-scroll-progress); border-radius:inherit; background:linear-gradient(180deg,#ffe09a 0%,#ffd066 22%,#f5b536 64%,#d88b0d 100%); box-shadow: 0 0 10px rgba(245,181,54,.60), 0 0 24px rgba(245,181,54,.26); transition:height .08s linear; will-change:height; } .ritual-scroll-shell .ritual-steps li{ position:relative; min-height:92px; display:grid!important; grid-template-columns:74px minmax(0,1fr)!important; grid-template-rows:auto auto; column-gap:18px; row-gap:5px; align-items:center; padding:20px 26px!important; overflow:visible; border-radius:18px; text-align:left!important; transition: transform .30s ease, border-color .30s ease, box-shadow .30s ease, background-color .30s ease; } .ritual-scroll-shell .ritual-steps li::after{ display:none!important; } .ritual-scroll-shell .ritual-steps li::before{ content:""; position:absolute; z-index:6; left:-44px; top:50%; width:15px; height:15px; border:2px solid rgba(245,181,54,.70); border-radius:50%; transform:translateY(-50%); background:#fff9ea; box-shadow: 0 0 0 6px rgba(245,181,54,.07), 0 0 0 rgba(245,181,54,0); transition: background-color .28s ease, border-color .28s ease, box-shadow .28s ease, transform .28s ease; } .ritual-scroll-shell .ritual-steps span{ position:static!important; grid-column:1; grid-row:1 / 3; align-self:center; justify-self:center; margin:0!important; color:var(--gold); font-size:34px; line-height:1; } .ritual-scroll-shell .ritual-steps strong{ grid-column:2; grid-row:1; align-self:end; margin:0; color:var(--navy); font-size:19px; line-height:1.15; } .ritual-scroll-shell .ritual-steps li small{ grid-column:2; grid-row:2; display:block; align-self:start; margin:0; color:#425e74; font-size:15px; line-height:1.45; } .ritual-scroll-shell .ritual-steps li.is-scroll-active{ transform:translateX(4px); border-color:rgba(245,181,54,.30); background:#fffaf0; box-shadow: 0 16px 34px rgba(54,41,21,.08), 0 0 0 1px rgba(245,181,54,.03); } .ritual-scroll-shell .ritual-steps li.is-scroll-active::before{ border-color:#f5b536; background:#ffd066; transform:translateY(-50%) scale(1.12); box-shadow: 0 0 0 7px rgba(245,181,54,.13), 0 0 18px rgba(245,181,54,.46); } @media(max-width:760px){ .ritual-scroll-shell{ width:min(calc(100% - 20px),620px); margin:42px auto 0; padding-left:30px; } .ritual-scroll-shell .ritual-steps{ padding:12px; gap:12px; border-radius:22px; } .ritual-scroll-line{ left:11px; top:34px; bottom:34px; width:3px; } .ritual-scroll-shell .ritual-steps li{ min-height:0; grid-template-columns:46px minmax(0,1fr)!important; column-gap:12px; row-gap:3px; padding:16px!important; } .ritual-scroll-shell .ritual-steps li::before{ left:-34px; width:13px; height:13px; } .ritual-scroll-shell .ritual-steps span{ font-size:26px; } .ritual-scroll-shell .ritual-steps strong{ font-size:16px; } .ritual-scroll-shell .ritual-steps li small{ font-size:14px; line-height:1.4; } .ritual-scroll-shell .ritual-steps li.is-scroll-active{ transform:translateX(2px); } } @media(max-width:420px){ .ritual-scroll-shell{ width:calc(100% - 14px); padding-left:28px; } .ritual-scroll-line{ left:10px; } .ritual-scroll-shell .ritual-steps{ width:100%; padding:10px; } .ritual-scroll-shell .ritual-steps li{ grid-template-columns:42px minmax(0,1fr)!important; column-gap:11px; padding:15px 14px!important; } .ritual-scroll-shell .ritual-steps li::before{ left:-31px; } .ritual-scroll-shell .ritual-steps span{ font-size:24px; } .ritual-scroll-shell .ritual-steps strong{ font-size:15px; } .ritual-scroll-shell .ritual-steps li small{ font-size:13.5px; line-height:1.35; } } @media(prefers-reduced-motion:reduce){ .ritual-scroll-progress, .ritual-scroll-shell .ritual-steps li, .ritual-scroll-shell .ritual-steps li::before{ transition:none!important; } } /* Tangibilization block: real pages of the 15-prayer product */ .problem-section{overflow:hidden} .problem-heading{display:block;max-width:980px;text-align:center} .problem-heading h2{max-width:980px;margin-left:auto;margin-right:auto} .tangible-showcase{width:var(--content);margin:58px auto 0;display:grid;grid-template-columns:minmax(0,.82fr) minmax(520px,1.18fr);gap:44px;align-items:center;padding:44px 46px 42px;border:1px solid rgba(108,66,31,.16);border-radius:28px;background:linear-gradient(145deg,rgba(255,251,242,.94),rgba(255,247,228,.78));box-shadow:0 28px 70px rgba(65,44,18,.10);position:relative;isolation:isolate} .tangible-showcase:before{content:"";position:absolute;z-index:-1;width:470px;aspect-ratio:1;right:-80px;top:50%;transform:translateY(-50%);border-radius:50%;background:radial-gradient(circle,rgba(245,181,54,.18),rgba(245,181,54,.055) 38%,transparent 72%)} .tangible-showcase:after{content:"";position:absolute;z-index:-1;inset:14px;border:1px solid rgba(245,181,54,.16);border-radius:20px;pointer-events:none} .tangible-copy{position:relative;z-index:3;padding-left:4px} .tangible-kicker{margin:0 0 15px;text-transform:uppercase;letter-spacing:.15em;font-size:11px;font-weight:900;color:var(--coral)} .tangible-copy h3{font-size:clamp(34px,3vw,50px);line-height:1.08;color:var(--navy-deep);margin-bottom:20px} .tangible-lead{max-width:560px;color:#536273;font-size:17px;line-height:1.7;margin-bottom:28px} .tangible-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:0 0 24px} .tangible-stats>div{min-height:96px;padding:15px 13px 14px;border:1px solid rgba(108,66,31,.14);border-radius:14px;background:rgba(255,255,255,.7);box-shadow:0 10px 24px rgba(39,27,10,.05)} .tangible-stats strong{display:block;color:var(--navy);font-family:var(--serif);font-size:23px;line-height:1.05;margin-bottom:6px} .tangible-stats span{display:block;color:#64717d;font-size:11px;line-height:1.3;text-transform:uppercase;letter-spacing:.04em;font-weight:750} .tangible-note{margin:0;display:flex;align-items:flex-start;gap:10px;color:var(--navy);font-weight:720;font-size:14px;line-height:1.55} .tangible-note>span{color:var(--gold);font-size:18px;line-height:1.25} .prayer-deck-wrap{position:relative;min-height:650px;display:flex;align-items:center;justify-content:center;perspective:1500px} .prayer-deck{position:absolute;inset:0;transform-style:preserve-3d;filter:drop-shadow(0 28px 28px rgba(28,22,12,.17))} .prayer-deck:after{content:"";position:absolute;left:50%;bottom:7%;width:72%;height:9%;transform:translateX(-50%);border-radius:50%;background:rgba(31,27,18,.16);filter:blur(24px);z-index:0} .prayer-deck-card{position:absolute;left:50%;top:50%;width:278px;max-width:none;height:auto;border-radius:8px;border:1px solid rgba(14,28,48,.08);box-shadow:0 22px 45px rgba(23,25,28,.17),0 3px 8px rgba(23,25,28,.08);transform-origin:center 82%;transition:transform .55s cubic-bezier(.2,.8,.2,1),filter .45s ease;will-change:transform} .prayer-deck-card:nth-child(1){z-index:1;transform:translate(-50%,-50%) translate(-198px,42px) rotate(-14deg)} .prayer-deck-card:nth-child(2){z-index:2;transform:translate(-50%,-50%) translate(198px,42px) rotate(14deg)} .prayer-deck-card:nth-child(3){z-index:3;transform:translate(-50%,-50%) translate(-170px,26px) rotate(-11deg)} .prayer-deck-card:nth-child(4){z-index:4;transform:translate(-50%,-50%) translate(170px,25px) rotate(11deg)} .prayer-deck-card:nth-child(5){z-index:5;transform:translate(-50%,-50%) translate(-142px,9px) rotate(-9deg)} .prayer-deck-card:nth-child(6){z-index:6;transform:translate(-50%,-50%) translate(142px,8px) rotate(9deg)} .prayer-deck-card:nth-child(7){z-index:7;transform:translate(-50%,-50%) translate(-112px,-5px) rotate(-7deg)} .prayer-deck-card:nth-child(8){z-index:8;transform:translate(-50%,-50%) translate(112px,-6px) rotate(7deg)} .prayer-deck-card:nth-child(9){z-index:9;transform:translate(-50%,-50%) translate(-84px,-15px) rotate(-5deg)} .prayer-deck-card:nth-child(10){z-index:10;transform:translate(-50%,-50%) translate(84px,-16px) rotate(5deg)} .prayer-deck-card:nth-child(11){z-index:11;transform:translate(-50%,-50%) translate(-57px,-22px) rotate(-3.5deg)} .prayer-deck-card:nth-child(12){z-index:12;transform:translate(-50%,-50%) translate(57px,-23px) rotate(3.5deg)} .prayer-deck-card:nth-child(13){z-index:13;transform:translate(-50%,-50%) translate(-30px,-26px) rotate(-2deg)} .prayer-deck-card:nth-child(14){z-index:14;transform:translate(-50%,-50%) translate(30px,-27px) rotate(2deg)} .prayer-deck-card:nth-child(15){z-index:15;transform:translate(-50%,-50%) translate(0,-27px) rotate(0deg);box-shadow:0 28px 60px rgba(23,25,28,.22),0 5px 14px rgba(23,25,28,.12)} .tangible-showcase:hover .prayer-deck-card:nth-child(1){transform:translate(-50%,-50%) translate(-215px,48px) rotate(-15deg)} .tangible-showcase:hover .prayer-deck-card:nth-child(2){transform:translate(-50%,-50%) translate(215px,48px) rotate(15deg)} .tangible-showcase:hover .prayer-deck-card:nth-child(15){transform:translate(-50%,-50%) translate(0,-38px) rotate(0deg) scale(1.025)} .prayer-deck-badge{position:absolute;right:1%;bottom:9%;z-index:30;display:flex;align-items:center;gap:10px;padding:12px 15px 12px 13px;border-radius:999px;background:var(--navy-deep);color:var(--cream);border:1px solid rgba(255,208,102,.38);box-shadow:0 15px 30px rgba(3,24,47,.28)} .prayer-deck-badge strong{font-family:var(--serif);font-size:30px;line-height:1;color:var(--gold-light)} .prayer-deck-badge span{text-transform:uppercase;letter-spacing:.08em;font-size:9px;font-weight:850;line-height:1.35} .tangible-bottom{width:var(--content);margin:26px auto 0;display:flex;flex-wrap:wrap;justify-content:center;gap:8px} .tangible-bottom span{display:inline-flex;align-items:center;min-height:32px;padding:6px 13px;border:1px solid rgba(108,66,31,.16);border-radius:999px;background:rgba(255,251,242,.72);color:#5d6773;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.05em} @media(max-width:1050px){ .tangible-showcase{grid-template-columns:1fr;gap:18px;padding:42px 38px 32px} .tangible-copy{text-align:center;max-width:740px;margin:0 auto} .tangible-lead{margin-left:auto;margin-right:auto} .tangible-note{justify-content:center;max-width:620px;margin-left:auto;margin-right:auto} .prayer-deck-wrap{min-height:660px} .prayer-deck-badge{right:8%;bottom:7%} } @media(max-width:680px){ .problem-heading{text-align:left} .problem-heading h2{font-size:clamp(34px,9vw,43px);line-height:1.08} .tangible-showcase{width:calc(100% - 24px);margin-top:36px;padding:30px 20px 20px;border-radius:22px} .tangible-showcase:after{inset:9px;border-radius:15px} .tangible-copy{text-align:left} .tangible-copy h3{font-size:32px;line-height:1.08} .tangible-lead{font-size:15px;line-height:1.62;margin-bottom:22px} .tangible-stats{grid-template-columns:1fr 1fr 1fr;gap:6px} .tangible-stats>div{min-height:89px;padding:12px 8px} .tangible-stats strong{font-size:18px} .tangible-stats span{font-size:8px;letter-spacing:.03em} .tangible-note{justify-content:flex-start;font-size:13px} .prayer-deck-wrap{min-height:500px;margin-top:-4px} .prayer-deck{transform:scale(.67);transform-origin:center center} .prayer-deck-badge{right:1%;bottom:4%;padding:10px 12px} .prayer-deck-badge strong{font-size:25px} .prayer-deck-badge span{font-size:8px} .tangible-bottom{width:calc(100% - 32px);margin-top:18px;gap:6px;justify-content:flex-start} .tangible-bottom span{font-size:9px;min-height:28px;padding:5px 10px} } @media(max-width:390px){ .tangible-showcase{width:calc(100% - 18px);padding-inline:16px} .tangible-stats strong{font-size:16px} .tangible-stats span{font-size:7.6px} .prayer-deck-wrap{min-height:455px} .prayer-deck{transform:scale(.61)} .prayer-deck-badge{right:-1%;bottom:3%} } @media(prefers-reduced-motion:reduce){ .prayer-deck-card{transition:none!important} } /* Adjustment requested: show prayer mockups one below another */ .tangible-showcase{ align-items:start; } .prayer-deck-wrap{ min-height:auto !important; display:block !important; perspective:none !important; } .prayer-deck{ position:relative !important; inset:auto !important; display:flex !important; flex-direction:column !important; align-items:center !important; gap:18px !important; transform:none !important; filter:none !important; } .prayer-deck:after{ display:none !important; } .prayer-deck-card, .prayer-deck-card:nth-child(n){ position:relative !important; left:auto !important; top:auto !important; width:min(100%, 350px) !important; max-width:100% !important; transform:none !important; transform-origin:center center !important; z-index:auto !important; display:block !important; } .tangible-showcase:hover .prayer-deck-card:nth-child(1), .tangible-showcase:hover .prayer-deck-card:nth-child(2), .tangible-showcase:hover .prayer-deck-card:nth-child(15){ transform:none !important; } .prayer-deck-badge{ position:static !important; margin:18px auto 0 !important; width:max-content; } @media(max-width:1050px){ .prayer-deck-wrap{ margin-top:8px; } } @media(max-width:680px){ .prayer-deck{ gap:12px !important; } .prayer-deck-card, .prayer-deck-card:nth-child(n){ width:min(100%, 300px) !important; } .prayer-deck-badge{ margin-top:14px !important; } } @media(max-width:390px){ .prayer-deck-card, .prayer-deck-card:nth-child(n){ width:100% !important; } } /* Prayer pages: explicit vertical showcase */ .tangible-showcase{ grid-template-columns:1fr !important; max-width:980px; gap:34px !important; } .tangible-copy{ max-width:760px; margin:0 auto; text-align:center; } .tangible-lead{ margin-left:auto; margin-right:auto; } .tangible-note{ justify-content:center; } .prayer-pages-showcase{ width:100%; max-width:680px; margin:0 auto; position:relative; z-index:2; } .prayer-pages-heading{ display:flex; align-items:center; justify-content:space-between; gap:18px; margin:0 0 16px; padding:13px 16px; border-radius:14px; background:var(--navy-deep); color:var(--cream); box-shadow:0 12px 28px rgba(3,24,47,.16); } .prayer-pages-heading strong{ font-family:var(--serif); font-size:21px; color:var(--gold-light); } .prayer-pages-heading span{ font-size:10px; line-height:1.3; text-transform:uppercase; letter-spacing:.08em; font-weight:800; text-align:right; opacity:.9; } .prayer-pages-stack{ display:flex; flex-direction:column; align-items:center; gap:18px; width:100%; } .prayer-pages-stack img{ display:block !important; visibility:visible !important; opacity:1 !important; width:min(100%,560px) !important; height:auto !important; max-width:100% !important; position:static !important; transform:none !important; filter:none !important; margin:0 auto !important; border-radius:10px; border:1px solid rgba(14,28,48,.10); background:#fff; box-shadow:0 18px 42px rgba(24,27,33,.13),0 3px 8px rgba(24,27,33,.06); } @media(max-width:680px){ .tangible-copy{text-align:left} .tangible-note{justify-content:flex-start} .prayer-pages-showcase{max-width:100%} .prayer-pages-heading{align-items:flex-start;flex-direction:column;gap:3px} .prayer-pages-heading span{text-align:left} .prayer-pages-stack{gap:12px} .prayer-pages-stack img{width:100% !important;border-radius:8px} } /* Extra compatibility for stacked prayer PNGs */ .prayer-pages-stack img{content-visibility:visible !important; contain:none !important;} /* FINAL Elementor/live-page visibility fix for the tall 15-prayer showcase. Do not animate this very tall block via intersection ratio: it must always be visible. */ .tangible-showcase-static, .tangible-showcase-static *, .prayer-pages-showcase, .prayer-pages-stack, .prayer-pages-stack img, .tangible-bottom-static { opacity:1 !important; visibility:visible !important; filter:none !important; } .tangible-showcase-static, .prayer-pages-showcase, .prayer-pages-stack, .prayer-pages-stack img, .tangible-bottom-static { transform:none !important; } .tangible-showcase-static { display:grid !important; } .prayer-pages-showcase, .prayer-pages-stack { display:flex !important; } .prayer-pages-showcase { flex-direction:column !important; } .prayer-pages-stack { flex-direction:column !important; } .prayer-pages-stack img { position:relative !important; left:auto !important; top:auto !important; width:min(100%,560px) !important; max-width:100% !important; height:auto !important; margin:0 auto !important; } /* Elementor wrappers must not clip the stacked images after native conversion. */ .elementor .tangible-showcase-static, .elementor .prayer-pages-showcase, .elementor .prayer-pages-stack, .elementor .prayer-pages-stack > * { overflow:visible !important; max-height:none !important; } /* EXTRA hardening: force exactly one prayer image per row in all breakpoints and after Elementor conversion */ .prayer-pages-stack{ display:block !important; width:100% !important; } .prayer-page-row, .prayer-pages-stack > div, .prayer-pages-stack > figure, .prayer-pages-stack > p { display:block !important; width:100% !important; max-width:100% !important; margin:0 0 18px !important; padding:0 !important; clear:both !important; float:none !important; flex:none !important; break-inside:avoid !important; page-break-inside:avoid !important; overflow:visible !important; } .prayer-page-row:last-child{margin-bottom:0 !important;} .prayer-page-row img, .prayer-pages-stack > * img, .prayer-pages-stack > img { display:block !important; width:100% !important; max-width:560px !important; min-width:0 !important; height:auto !important; margin:0 auto !important; float:none !important; } @media (max-width: 680px){ .prayer-page-row, .prayer-pages-stack > div, .prayer-pages-stack > figure, .prayer-pages-stack > p { margin:0 0 12px !important; } .prayer-page-row img, .prayer-pages-stack > * img, .prayer-pages-stack > img { max-width:100% !important; } } .elementor .prayer-page-row, .elementor-widget-image .prayer-page-row, .elementor .prayer-pages-stack > .prayer-page-row { width:100% !important; display:block !important; clear:both !important; flex-basis:100% !important; max-width:100% !important; } /* MOBILE: prayer pages two-by-two */ @media (max-width: 680px){ .prayer-pages-stack{ display:grid !important; grid-template-columns:repeat(2,minmax(0,1fr)) !important; align-items:start !important; gap:10px !important; width:100% !important; } .prayer-page-row, .prayer-pages-stack > div, .prayer-pages-stack > figure, .prayer-pages-stack > p, .elementor .prayer-page-row, .elementor-widget-image .prayer-page-row, .elementor .prayer-pages-stack > .prayer-page-row{ display:block !important; width:auto !important; max-width:none !important; margin:0 !important; padding:0 !important; clear:none !important; float:none !important; flex:none !important; flex-basis:auto !important; min-width:0 !important; } .prayer-page-row img, .prayer-pages-stack > * img, .prayer-pages-stack > img{ display:block !important; width:100% !important; max-width:100% !important; height:auto !important; margin:0 !important; border-radius:7px !important; } .prayer-page-row:last-child:nth-child(odd){ grid-column:1 / -1 !important; width:calc(50% - 5px) !important; justify-self:center !important; } } /* --- Ajustes de preview e ilustrações --- */ .ritual-step-illustration{ display:block; width:100%; aspect-ratio: 19 / 13; object-fit:cover; border-radius:22px; margin:0 0 18px; box-shadow:0 20px 35px rgba(47,34,14,.10); border:1px solid rgba(218,199,155,.75); background:#fffaf0; } .sample-page-preview-card{ transform:rotate(1deg); } .sample-page-preview-card .sample-page-note{ font-family:var(--sans); font-size:14px; line-height:1.6; color:#617082; margin-bottom:18px; } .sample-page-visual{ position:relative; overflow:hidden; border-radius:24px; border:1px solid rgba(219,199,156,.85); box-shadow:0 16px 26px rgba(59,41,16,.12); margin:10px 0 16px; } .sample-page-visual img{ display:block; width:100%; aspect-ratio:16/10; object-fit:cover; } .sample-page-visual-caption{ position:absolute; left:18px; bottom:18px; background:rgba(15,35,66,.86); color:#fff6df; font-size:12px; line-height:1.2; padding:10px 14px; border-radius:999px; text-transform:uppercase; letter-spacing:.06em; font-weight:800; } .sample-page-footer{ font-family:var(--sans); font-size:14px; line-height:1.55; margin-bottom:0; } @media (min-width:681px){ .ritual-scroll-shell .ritual-steps li{ padding:0 20px 28px; min-height:unset; } } @media (max-width:680px){ .ritual-step-illustration{ margin-bottom:14px; border-radius:18px; } .ritual-scroll-shell .ritual-steps li{ grid-template-columns:1fr; padding:0 0 20px; gap:0; } .ritual-scroll-shell .ritual-steps li::after{ left:0; bottom:-6px; } .sample-page-preview-card{ transform:none; } } /* --- V2: mockups laterais na seção dos passos --- */ .ritual-scroll-shell .ritual-steps li{ display:grid !important; grid-template-columns: 66px minmax(0, 1fr) 150px !important; grid-template-areas: "num title media" "num desc media" !important; column-gap:18px !important; row-gap:4px !important; align-items:center !important; padding:22px 22px 22px 18px !important; min-height:164px !important; } .ritual-scroll-shell .ritual-steps li > span{ grid-area:num !important; align-self:start !important; justify-self:center !important; margin-top:4px !important; } .ritual-scroll-shell .ritual-steps li > strong{ grid-area:title !important; align-self:end !important; margin:0 !important; } .ritual-scroll-shell .ritual-steps li > small{ grid-area:desc !important; align-self:start !important; margin:0 !important; } .ritual-scroll-shell .ritual-steps li > .ritual-step-illustration{ grid-area:media !important; width:150px !important; height:110px !important; margin:0 !important; justify-self:end !important; align-self:center !important; object-fit:cover !important; border-radius:18px !important; box-shadow:0 18px 30px rgba(47,34,14,.10) !important; background:#fffaf0 !important; } @media (max-width:680px){ .ritual-scroll-shell .ritual-steps li{ grid-template-columns: 58px minmax(0, 1fr) 98px !important; column-gap:14px !important; padding:16px 14px 16px 12px !important; min-height:116px !important; } .ritual-scroll-shell .ritual-steps li > .ritual-step-illustration{ width:98px !important; height:74px !important; border-radius:15px !important; } .ritual-scroll-shell .ritual-steps li > span{ justify-self:start !important; } } /* ==== Ajustes consolidados finais ==== */ .extra-bonus-note{ margin-top:14px; font-size:15px; line-height:1.6; color:#6b7786; font-weight:700; } .pill-number, .bonus-copy .material-number, .calendar-copy .material-number, .cards-copy .material-number, .guide-copy .material-number{ display:inline-flex; align-items:center; padding:7px 14px; border:1px solid rgba(222,190,126,.65); border-radius:999px; background:rgba(255,249,235,.85); box-shadow:0 10px 18px rgba(95,70,32,.06); } .bonus-price-ribbon{ display:flex; align-items:center; justify-content:space-between; gap:16px; margin-top:22px; padding:16px 18px; border-radius:22px; background:linear-gradient(135deg,#fff9ec,#f7efd9); border:1px solid rgba(221,196,145,.75); box-shadow:0 14px 28px rgba(74,52,20,.08); } .bonus-price-ribbon.inline{ margin-top:18px; } .bonus-price-ribbon.span-full{ grid-column:1 / -1; width:min(760px,100%); justify-self:center; } .bonus-price-ribbon .price-before{ color:#7c8593; font-size:14px; font-weight:700; } .bonus-price-ribbon .price-before s{ text-decoration-thickness:2px; } .bonus-price-ribbon strong{ font-family:var(--serif); font-size:26px; line-height:1; color:var(--navy); } .bonus-price-ribbon strong span{ color:#1f8a4c; } .bonus-price-ribbon small{ font-size:12px; text-transform:uppercase; letter-spacing:.08em; color:#7b673c; font-weight:800; } .morning-preview-sheet{ min-height:unset; } .morning-preview-sheet::after{display:none !important;} .bonus-preview-sheet{ position:relative; background:#fffdf9; border:1px solid rgba(213,196,164,.85); border-radius:28px; box-shadow:0 22px 44px rgba(66,48,20,.12); padding:28px 28px 22px; } .bonus-preview-sheet::before{ content:""; position:absolute; left:18px; top:18px; bottom:18px; width:8px; border-radius:999px; background:linear-gradient(180deg,#0e2950,#294f7c); } .preview-chip, .sheet-kicker{ display:inline-flex; align-items:center; padding:5px 12px; border-radius:999px; font-size:11px; font-weight:900; text-transform:uppercase; letter-spacing:.08em; } .preview-chip{ background:#fff1ba; color:#8f6c1a; border:1px solid #e7ca72; margin-left:18px; } .sheet-kicker{ background:#eef2f7; color:#455367; margin:14px 0 0 18px; } .bonus-preview-sheet h3{ margin:14px 0 10px 18px; font-size:42px; line-height:1.02; } .bonus-preview-sheet>p{ margin-left:18px; color:#667587; max-width:640px; } .sheet-image{ margin:20px 0 14px 18px; border-radius:22px; overflow:hidden; border:1px solid #d8c9a7; box-shadow:0 14px 30px rgba(72,52,20,.10); } .sheet-image img{ width:100%; aspect-ratio:16/9; object-fit:cover; } .sheet-protected{ margin:0 0 0 18px; font-size:13px; color:#8b96a3; text-align:center; } .verse-mini-grid{ position:relative; z-index:4; margin-top:26px; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; } .verse-mini-card{ background:#fff9e7; border:1px solid #e4d5ac; border-radius:20px; padding:16px 16px 18px; box-shadow:0 10px 20px rgba(71,53,23,.07); } .verse-mini-card span{ display:inline-block; padding:5px 10px; border-radius:999px; background:#f3bf3c; color:#203252; font-size:10px; font-weight:900; text-transform:uppercase; letter-spacing:.08em; } .verse-mini-card h4{ margin:12px 0 8px; font-family:var(--serif); font-size:21px; line-height:1.18; color:#1f3150; } .verse-mini-card p{ margin:0; font-size:13px; color:#6b7481; line-height:1.55; } .guide-chapter-pill{ display:inline-flex; align-items:center; padding:8px 16px; margin:8px 0 22px; border-radius:999px; background:#fff1bf; color:#8a6812; font-size:12px; font-weight:900; text-transform:uppercase; letter-spacing:.08em; border:1px solid #e5c76f; } .guide-inline-mockup{ display:grid; grid-template-columns:160px 1fr; gap:18px; align-items:stretch; margin:0 0 24px; } .guide-inline-cover, .guide-inline-page{ border-radius:24px; box-shadow:0 18px 32px rgba(44,33,18,.12); } .guide-inline-cover{ background:linear-gradient(180deg,#0f2a4d,#153861); color:#fff6dc; padding:22px 16px; } .guide-inline-cover small{ display:inline-block; font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:#ffdd85; margin-bottom:14px; } .guide-inline-cover strong{ display:block; font-family:var(--serif); font-size:24px; line-height:1.05; margin-bottom:10px; } .guide-inline-cover span{ display:block; font-size:13px; line-height:1.45; } .guide-inline-page{ background:#fffaf0; border:1px solid #e4d4aa; padding:22px 20px; } .guide-inline-page small{ display:inline-block; margin-bottom:12px; font-size:11px; font-weight:900; color:#b47d1f; text-transform:uppercase; } .guide-inline-page h3{ margin:0 0 14px; font-size:28px; line-height:1.08; } .guide-inline-page ul{ list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; } .guide-inline-page li{ display:flex; align-items:center; gap:10px; background:#fff; border:1px solid #ede1c4; border-radius:16px; padding:10px 12px; } .guide-inline-page li b{ width:28px; height:28px; border-radius:50%; display:grid; place-items:center; background:#f3bf3c; color:#132642; } .guide-inline-page li span{ font-weight:800; color:#19304f; font-size:14px; } .chapter-preview-card{ background:#f8f7fb; border:1px solid #dcd7e5; border-radius:26px; padding:22px; box-shadow:0 15px 30px rgba(62,43,24,.08); } .chapter-preview-card>span{ display:inline-flex; align-items:center; padding:6px 12px; border-radius:999px; background:#fff0c1; color:#8a6812; font-size:11px; font-weight:900; text-transform:uppercase; letter-spacing:.08em; } .chapter-preview-card h3{ margin:14px 0 10px; font-size:31px; line-height:1.08; } .chapter-preview-card>p{ color:#5f6d80; } .chapter-preview-card ul{ list-style:none; padding:0; margin:18px 0 18px; display:grid; gap:12px; } .chapter-preview-card li{ background:#fff; border:1px solid #ddd7e7; border-radius:16px; padding:14px 15px; } .chapter-preview-card li strong{ display:block; color:#223654; margin-bottom:4px; } .chapter-preview-card li small{ display:block; color:#67758a; line-height:1.5; } .chapter-preview-image{ margin-top:10px; border-radius:18px; overflow:hidden; border:1px solid #d5d1de; } .chapter-preview-image img{ width:100%; aspect-ratio:16/8; object-fit:cover; } .offer-layout-night ul{ display:grid; gap:14px; } .offer-priced-item{ display:flex; align-items:center; justify-content:space-between; gap:18px; } .offer-item-copy{ display:flex; flex-direction:column; gap:4px; } .offer-item-copy small{ color:rgba(255,245,220,.7); } .offer-item-price{ flex:0 0 auto; color:#f1d595; font-size:14px; font-weight:800; text-decoration-thickness:2px; } .price-compare{ margin-top:18px; text-align:center; } .price-compare small{ display:block; text-transform:uppercase; letter-spacing:.08em; font-size:11px; color:rgba(255,245,220,.7); margin-bottom:4px; } .price-compare strong{ display:block; color:#d8c49b; font-size:28px; font-family:var(--serif); } .price-compare s{ text-decoration-thickness:2px; } @media (max-width: 900px){ .bonus-price-ribbon{ flex-direction:column; align-items:flex-start; } .verse-mini-grid{ grid-template-columns:1fr; } .guide-inline-mockup{ grid-template-columns:1fr; } } @media (max-width: 680px){ .bonus-preview-sheet{ padding:22px 18px 18px; } .bonus-preview-sheet::before{ left:12px; top:12px; bottom:12px; } .preview-chip, .sheet-kicker, .bonus-preview-sheet h3, .bonus-preview-sheet>p, .sheet-image, .sheet-protected{ margin-left:10px; } .bonus-preview-sheet h3{ font-size:31px; } .guide-inline-page ul{ grid-template-columns:1fr; } .offer-priced-item{ flex-direction:column; align-items:flex-start; } } .verse-mini-grid{margin-top:420px;} @media (max-width: 900px){.verse-mini-grid{margin-top:380px;}} @media (max-width: 680px){.verse-mini-grid{margin-top:320px;}} /* Ajuste final bonus 2: preço abaixo de "Dios está conmigo" */ .verses-preview .bonus-price-ribbon.verses-price{ position:relative; z-index:5; width:min(500px, calc(100% - 24px)); margin:405px 0 0 auto; } .verse-mini-grid{ margin-top:18px !important; } @media (max-width: 900px){ .verses-preview .bonus-price-ribbon.verses-price{ width:min(520px, 100%); margin:395px 0 0; } } @media (max-width: 680px){ .verses-preview .bonus-price-ribbon.verses-price{ width:100%; margin:365px 0 0; } .verse-mini-grid{ margin-top:14px !important; } } /* Ajuste mobile final: remover espaço vazio no bônus 2 */ @media (max-width: 680px){ .verses-preview{ min-height:auto !important; display:flex; flex-direction:column; gap:18px; } .verse-page, .verse-page.shifted{ position:relative !important; left:auto !important; top:auto !important; width:100% !important; transform:none !important; margin:0 !important; } .verses-preview .bonus-price-ribbon.verses-price{ width:100%; margin:0 !important; } .verse-mini-grid{ margin-top:0 !important; } } /* === RESTAURAÇÃO DO MOBILE + MELHORIA REAL DO DESKTOP === Objetivo: manter o mobile intacto e otimizar somente telas maiores. */ @media (min-width: 901px){ html, body{ overflow-x:hidden; } /* Largura útil e respiro horizontal em desktop */ .hero-content, .problem-heading, .problem-scene, .problem-conclusion, .section-heading, .ritual-steps, .no-pressure, .solution-close, .main-product, .themes-list, .bonus-section, .audience-columns, .presence-quote, .offer-layout, .guarantee-section, .faq-list{ width:min(1240px, calc(100% - 88px)) !important; } /* Melhor quebra de títulos e textos no desktop */ h1, h2, h3, .product-copy h3, .bonus-copy h2, .calendar-copy h2, .cards-copy h2, .guide-copy h2, .offer-section .section-heading h2, .final-copy h2, .problem-heading h2{ text-wrap:balance; } .hero-lead, .product-intro, .bonus-copy > p, .calendar-copy > p, .cards-copy > p, .guide-copy > p, .section-heading > p, .problem-heading > p, .offer-section .section-heading > p{ max-width:62ch; } /* Seções bônus mais estáveis no desktop */ .bonus-section{ grid-template-columns:minmax(0, 1fr) minmax(0, 1fr) !important; gap:56px !important; align-items:start !important; } .bonus-copy, .calendar-copy, .cards-copy, .guide-copy{ min-width:0; } .bonus-copy h2, .calendar-copy h2, .cards-copy h2, .guide-copy h2{ max-width:11ch; line-height:1.07; } .content-formula, .topic-stream, .method{ flex-wrap:wrap; } .bonus-price-ribbon{ flex-wrap:wrap; row-gap:10px; } .bonus-price-ribbon strong{ white-space:nowrap; } .bonus-price-ribbon small{ margin-left:auto; } /* Bônus 01: imagem contida com elegância dentro do card */ .bonus-preview-sheet{ overflow:hidden; } .sheet-image{ width:min(235px, 38%); margin:22px 0 14px auto !important; } .sheet-protected{ margin-left:18px; text-align:left; } /* Bônus 02: cards menores e melhor proporcionados no desktop */ .verses-preview{ min-height:auto !important; display:grid !important; grid-template-columns:repeat(6, minmax(0, 1fr)); gap:18px !important; align-items:start; } .verse-page, .verse-page.shifted{ position:relative !important; left:auto !important; top:auto !important; width:100% !important; transform:none !important; margin:0 !important; min-height:100%; } .verse-page{ grid-column:span 3; } .verse-page.shifted{ grid-column:span 3; } .verses-preview .bonus-price-ribbon.verses-price{ grid-column:1 / -1; position:relative !important; width:min(720px, 100%) !important; margin:0 auto !important; } .verse-mini-grid{ grid-column:1 / -1; margin-top:0 !important; } /* Seção das 15 orações no desktop: 6 + 6 + 3 centralizadas, mantendo o mobile como já estava. */ .tangible-showcase{ max-width:1320px !important; gap:38px !important; } .prayer-pages-showcase{ max-width:1320px !important; } .prayer-pages-stack{ display:grid !important; grid-template-columns:repeat(6, minmax(0, 1fr)) !important; gap:18px !important; align-items:start !important; justify-items:center !important; width:100% !important; } .prayer-page-row, .prayer-pages-stack > div, .prayer-pages-stack > figure, .prayer-pages-stack > p, .elementor .prayer-page-row, .elementor-widget-image .prayer-page-row, .elementor .prayer-pages-stack > .prayer-page-row{ display:block !important; width:100% !important; max-width:100% !important; margin:0 !important; padding:0 !important; clear:none !important; float:none !important; flex:none !important; flex-basis:auto !important; min-width:0 !important; } .prayer-page-row img, .prayer-pages-stack > * img, .prayer-pages-stack > img{ width:100% !important; max-width:100% !important; height:auto !important; margin:0 !important; border-radius:10px !important; } .prayer-page-row-13{grid-column:2 !important;} .prayer-page-row-14{grid-column:3 !important;} .prayer-page-row-15{grid-column:4 !important;} } @media (min-width: 901px) and (max-width: 1180px){ .hero-content, .problem-heading, .problem-scene, .problem-conclusion, .section-heading, .ritual-steps, .no-pressure, .solution-close, .main-product, .themes-list, .bonus-section, .audience-columns, .presence-quote, .offer-layout, .guarantee-section, .faq-list{ width:min(1120px, calc(100% - 56px)) !important; } .bonus-section{ gap:40px !important; } .prayer-pages-stack{ gap:14px !important; } } /* ========================================================== DESKTOP FINAL — NAO ALTERAR MOBILE Breakpoint deliberadamente acima de 1050px para preservar integralmente a versao mobile/tablet que ja esta aprovada. ========================================================== */ .verses-price-desktop{display:none;} @media (min-width:1051px){ html,body{overflow-x:hidden !important;} /* Full-bleed real no WordPress/Elementor: escapa do container de conteudo */ .morning-section, .verses-section, .calendar-section, .cards-section, .guide-section{ width:100vw !important; max-width:100vw !important; margin-left:calc(50% - 50vw) !important; margin-right:calc(50% - 50vw) !important; padding-left:max(52px, calc((100vw - 1240px)/2)) !important; padding-right:max(52px, calc((100vw - 1240px)/2)) !important; box-sizing:border-box !important; } /* Grid desktop consistente: duas colunas de verdade */ .morning-section, .verses-section, .calendar-section, .cards-section, .guide-section{ display:grid !important; grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important; gap:clamp(56px,5vw,88px) !important; align-items:center !important; } .bonus-copy, .calendar-copy, .cards-copy, .guide-copy, .morning-preview, .verses-preview, .calendar-preview, .cards-preview, .guide-preview{ width:100% !important; max-width:none !important; min-width:0 !important; } /* Tipografia desktop: sem colunas estreitas nem quebras artificiais */ .bonus-copy h2, .calendar-copy h2, .cards-copy h2, .guide-copy h2{ max-width:none !important; width:auto !important; font-size:clamp(44px,3.35vw,60px) !important; line-height:1.04 !important; letter-spacing:-.025em !important; text-wrap:balance; } .bonus-copy>p:not(.material-number), .calendar-copy>p:not(.material-number), .cards-copy>p:not(.material-number), .guide-copy>p:not(.material-number){ max-width:560px !important; font-size:18px !important; line-height:1.62 !important; } .material-number, .pill-number{ max-width:max-content !important; white-space:normal !important; } .topic-stream{ max-width:600px !important; gap:10px !important; } .topic-stream li{ font-size:12px !important; padding:8px 13px !important; } /* Bônus 1: card largo e imagem realmente dentro do card */ .morning-section{ grid-template-columns:minmax(420px,.92fr) minmax(560px,1.08fr) !important; } .morning-preview-sheet{ min-height:0 !important; } .bonus-preview-sheet{ width:100% !important; min-height:0 !important; overflow:hidden !important; padding:34px 36px 28px !important; } .bonus-preview-sheet h3{ max-width:720px !important; font-size:clamp(34px,2.7vw,48px) !important; line-height:1.04 !important; } .bonus-preview-sheet>p{ max-width:740px !important; font-size:15px !important; line-height:1.6 !important; } .sheet-image{ width:100% !important; max-width:100% !important; margin:22px 0 16px 18px !important; overflow:hidden !important; } .morning-preview-sheet .sheet-image img{ position:static !important; display:block !important; width:100% !important; max-width:100% !important; height:auto !important; aspect-ratio:16/7 !important; object-fit:cover !important; right:auto !important; bottom:auto !important; transform:none !important; filter:none !important; } .sheet-protected{ margin:0 0 0 18px !important; text-align:center !important; font-size:12px !important; } .morning-section .bonus-price-ribbon{ width:min(620px,100%) !important; } /* Bônus 2: volta ao mockup editorial largo no desktop */ .verses-section{ grid-template-columns:minmax(560px,1.08fr) minmax(420px,.92fr) !important; align-items:start !important; } .verses-preview{ position:relative !important; display:block !important; min-height:720px !important; margin:0 !important; } .verse-page, .verse-page.shifted{ position:absolute !important; width:62% !important; max-width:390px !important; min-height:380px !important; padding:38px 30px !important; margin:0 !important; } .verse-page{ left:3% !important; top:6px !important; transform:rotate(-3deg) !important; } .verse-page.shifted{ left:34% !important; top:135px !important; transform:rotate(2.5deg) !important; } .verse-page h3{ font-size:clamp(28px,2vw,36px) !important; line-height:1.1 !important; } .verse-page p{ font-size:14px !important; line-height:1.55 !important; } .verses-preview .verse-mini-grid{ position:absolute !important; left:0 !important; right:0 !important; bottom:0 !important; display:grid !important; grid-template-columns:repeat(3,minmax(0,1fr)) !important; gap:14px !important; margin:0 !important; } .verse-mini-card{ min-height:180px !important; padding:16px !important; } .verse-mini-card h4{ font-size:18px !important; line-height:1.15 !important; } .verse-mini-card p{ font-size:12px !important; line-height:1.5 !important; } .verses-price-mobile{display:none !important;} .verses-price-desktop{ display:flex !important; width:100% !important; margin-top:22px !important; } .verses-section .bonus-copy{ align-self:center !important; } .verses-section .verses-cta{ width:100% !important; max-width:560px !important; } /* Preços desktop: largura natural, sem quebra grotesca */ .bonus-price-ribbon{ display:grid !important; grid-template-columns:auto auto 1fr !important; align-items:center !important; column-gap:26px !important; row-gap:6px !important; padding:17px 20px !important; } .bonus-price-ribbon .price-before{ white-space:nowrap !important; } .bonus-price-ribbon strong{ white-space:nowrap !important; font-size:28px !important; } .bonus-price-ribbon small{ margin-left:0 !important; text-align:right !important; white-space:normal !important; } .bonus-price-ribbon.span-full{ grid-column:1/-1 !important; width:min(760px,100%) !important; justify-self:center !important; } /* Bônus 3 */ .calendar-section{ grid-template-columns:minmax(430px,.9fr) minmax(540px,1.1fr) !important; } .calendar-copy h2{ max-width:640px !important; } .calendar-preview{ width:min(100%,560px) !important; justify-self:center !important; padding:42px !important; } .day-example{ max-width:520px !important; } /* Bônus 4 */ .cards-section{ grid-template-columns:minmax(430px,.88fr) minmax(580px,1.12fr) !important; } .cards-copy h2{ max-width:620px !important; } .cards-mockup-preview{ width:100% !important; min-height:570px !important; justify-self:stretch !important; } .cards-real-mockup{ width:min(108%,830px) !important; max-width:none !important; } /* Bônus 5 */ .guide-section{ grid-template-columns:minmax(520px,1fr) minmax(520px,1fr) !important; align-items:start !important; } .guide-preview{ width:min(100%,600px) !important; justify-self:end !important; } .guide-copy h2{ max-width:680px !important; } .guide-inline-mockup, .chapter-preview-card{ width:100% !important; max-width:680px !important; } /* 15 orações: 6 + 6 + 3 perfeitamente centralizadas */ .prayer-pages-showcase{ position:relative !important; left:50% !important; transform:translateX(-50%) !important; width:min(1440px,calc(100vw - 96px)) !important; max-width:none !important; } .prayer-pages-stack{ display:grid !important; grid-template-columns:repeat(12,minmax(0,1fr)) !important; gap:18px !important; width:100% !important; align-items:start !important; } .prayer-page-row, .elementor .prayer-page-row, .elementor-widget-image .prayer-page-row, .elementor .prayer-pages-stack>.prayer-page-row{ grid-column:span 2 !important; width:100% !important; max-width:none !important; margin:0 !important; min-width:0 !important; } .prayer-page-row img, .prayer-pages-stack>* img, .prayer-pages-stack>img{ width:100% !important; max-width:100% !important; height:auto !important; margin:0 !important; } .prayer-page-row-13{grid-column:4 / span 2 !important;} .prayer-page-row-14{grid-column:6 / span 2 !important;} .prayer-page-row-15{grid-column:8 / span 2 !important;} } /* === Desktop-only final fix: keep the 15-prayer showcase inside the canvas without touching mobile === */ @media (min-width: 1024px){ .tangible-showcase-static, .elementor .tangible-showcase-static{ width:min(1280px, calc(100% - 48px)) !important; max-width:1280px !important; margin-left:auto !important; margin-right:auto !important; overflow:hidden !important; box-sizing:border-box !important; } .prayer-pages-showcase, .elementor .prayer-pages-showcase{ left:auto !important; transform:none !important; width:100% !important; max-width:100% !important; margin-left:0 !important; margin-right:0 !important; overflow:hidden !important; box-sizing:border-box !important; } .prayer-pages-stack, .elementor .prayer-pages-stack{ display:grid !important; grid-template-columns:repeat(12, minmax(0, 1fr)) !important; gap:18px !important; width:100% !important; max-width:100% !important; margin:0 !important; overflow:hidden !important; box-sizing:border-box !important; align-items:start !important; } .prayer-page-row, .elementor .prayer-page-row, .prayer-pages-stack > div, .prayer-pages-stack > figure, .prayer-pages-stack > p, .elementor .prayer-pages-stack > .prayer-page-row{ grid-column:span 2 !important; width:100% !important; max-width:100% !important; min-width:0 !important; margin:0 !important; padding:0 !important; overflow:hidden !important; box-sizing:border-box !important; } .prayer-page-row img, .prayer-pages-stack > * img, .prayer-pages-stack > img, .elementor .prayer-pages-stack img{ display:block !important; width:100% !important; max-width:100% !important; height:auto !important; margin:0 !important; box-sizing:border-box !important; } .prayer-page-row-13{grid-column:4 / span 2 !important;} .prayer-page-row-14{grid-column:6 / span 2 !important;} .prayer-page-row-15{grid-column:8 / span 2 !important;} } /* FINAL: remove duplicate Bonus 02 price only on desktop. Mobile remains untouched. */ @media (min-width: 1024px){ .verses-price-mobile, .verses-preview > .verses-price-mobile, .elementor .verses-price-mobile, .elementor .verses-preview > .verses-price-mobile{ display:none !important; visibility:hidden !important; height:0 !important; min-height:0 !important; margin:0 !important; padding:0 !important; border:0 !important; overflow:hidden !important; } .verses-price-desktop, .elementor .verses-price-desktop{ display:grid !important; } } /* FINAL HOTFIX — desktop prayer preview in Elementor publish Keep mobile untouched. On desktop, show one robust collage image instead of 15 independent widgets, avoiding Elementor publish shrinking/reflow issues. */ .prayer-pages-collage-desktop{display:none} @media (min-width:1024px){ .prayer-pages-showcase, .elementor .prayer-pages-showcase{ display:block !important; width:100% !important; max-width:100% !important; align-self:stretch !important; } .prayer-pages-heading, .elementor .prayer-pages-heading{ display:flex !important; width:100% !important; box-sizing:border-box !important; } .prayer-pages-collage-desktop, .elementor .prayer-pages-collage-desktop{ display:block !important; width:100% !important; margin:18px 0 0 !important; } .prayer-pages-collage-desktop img, .elementor .prayer-pages-collage-desktop img{ display:block !important; width:100% !important; max-width:100% !important; height:auto !important; margin:0 auto !important; border-radius:14px !important; box-shadow:0 18px 42px rgba(24,27,33,.13),0 3px 8px rgba(24,27,33,.06) !important; background:transparent !important; } .prayer-pages-stack, .elementor .prayer-pages-stack{ display:none !important; visibility:hidden !important; height:0 !important; min-height:0 !important; overflow:hidden !important; margin:0 !important; padding:0 !important; } } @media (max-width:1023px){ .prayer-pages-collage-desktop, .elementor .prayer-pages-collage-desktop{display:none !important;} } /* FINAL stability fix for Elementor native publish/editor: on desktop only, replace the most fragile composite image areas with single stable preview images. Mobile remains untouched. */ .stable-preview-desktop{display:none} .stable-preview-desktop img{display:block;width:100%;max-width:100%;height:auto;margin:0 auto;border-radius:18px} @media (min-width:1024px){ .prayer-pages-showcase, .elementor .prayer-pages-showcase{ width:100% !important; max-width:1280px !important; margin:0 auto !important; } .stable-preview-desktop, .elementor .stable-preview-desktop{ display:block !important; width:100% !important; max-width:100% !important; margin:0 auto !important; } .stable-preview-desktop img, .elementor .stable-preview-desktop img, .elementor .stable-preview-desktop .elementor-image img{ display:block !important; width:100% !important; max-width:100% !important; height:auto !important; object-fit:contain !important; margin:0 auto !important; } /* Prayer pages */ .prayer-pages-stable-desktop{margin-top:6px !important;} .prayer-pages-heading, .prayer-pages-collage-desktop, .prayer-pages-stack, .elementor .prayer-pages-heading, .elementor .prayer-pages-collage-desktop, .elementor .prayer-pages-stack{ display:none !important; visibility:hidden !important; height:0 !important; min-height:0 !important; overflow:hidden !important; margin:0 !important; padding:0 !important; } /* Bono 01 */ .morning-preview-stable-desktop{max-width:700px !important;} .morning-preview-sheet .bonus-preview-sheet, .elementor .morning-preview-sheet .bonus-preview-sheet{ display:none !important; visibility:hidden !important; height:0 !important; overflow:hidden !important; margin:0 !important; padding:0 !important; } /* Guia capitulo */ .guide-chapter-preview-stable-desktop{margin-top:18px !important;} .guide-copy .chapter-preview-card, .elementor .guide-copy .chapter-preview-card{ display:none !important; visibility:hidden !important; height:0 !important; overflow:hidden !important; margin:0 !important; padding:0 !important; border:0 !important; } } @media (max-width:1023px){ .stable-preview-desktop, .elementor .stable-preview-desktop{display:none !important;} } /* ===== Ajustes 30/09 — bônus e seção de conteúdo ===== */ .product-section .section-heading{ margin-bottom:0; } .morning-price-bottom{ margin-top:26px; } .morning-preview-sheet .sheet-image img.morning-deliverable-preview{ position:static !important; display:block !important; width:100% !important; max-width:100% !important; height:auto !important; aspect-ratio:auto !important; object-fit:contain !important; right:auto !important; bottom:auto !important; transform:none !important; filter:none !important; background:#fffdf9; } @media (max-width:680px){ .morning-price-bottom{ width:100% !important; margin-top:8px !important; } .product-section{ padding-bottom:34px !important; } } @media (min-width:1051px){ .morning-section .morning-price-bottom{ width:min(620px,100%) !important; margin:6px auto 0 !important; } } /* ===== AJUSTE FINAL BONUS 02 — 30/09 ===== Mantém o mesmo modelo visual dos cards, remove o mockup duplicado, adiciona indicação de prévia e deixa o valor somente no final do bônus. */ .verses-preview-intro{ position:relative; z-index:5; margin:0 0 18px; padding:18px 20px; border:1px solid rgba(222,190,126,.65); border-radius:20px; background:rgba(255,250,239,.92); box-shadow:0 10px 24px rgba(80,55,20,.07); } .verses-preview-chip{ display:inline-flex; align-items:center; padding:6px 12px; border-radius:999px; background:#f3bf3c; color:#132642; font-size:10px; line-height:1; font-weight:900; text-transform:uppercase; letter-spacing:.08em; } .verses-preview-intro p{ margin:10px 0 0; color:#627083; font-size:13px; line-height:1.55; } .verse-mini-explanation-title{ display:block; margin:12px 0 5px; color:#19304f; font-size:12px; font-weight:900; } .verses-price-final{ order:3; grid-column:1 / -1; width:min(760px,100%); justify-self:center; margin-top:6px; } /* Neutraliza regras antigas do mockup grande do bônus 2. */ .verses-preview{ min-height:0 !important; height:auto !important; position:relative !important; } .verses-preview .verse-mini-grid{ position:static !important; left:auto !important; right:auto !important; top:auto !important; bottom:auto !important; margin:0 !important; width:100% !important; } @media (min-width:1051px){ .verses-section{ align-items:center !important; } .verses-preview{ display:block !important; min-height:0 !important; } .verses-preview .verse-mini-grid{ display:grid !important; grid-template-columns:repeat(3,minmax(0,1fr)) !important; gap:14px !important; } .verse-mini-card{ min-height:220px !important; padding:18px !important; } .verse-mini-card h4{ font-size:20px !important; line-height:1.15 !important; } .verse-mini-card p{ font-size:12px !important; line-height:1.5 !important; } .verses-price-final{ display:flex !important; width:min(760px,100%) !important; margin-top:12px !important; } } @media (max-width:1050px){ .verses-preview{ order:2 !important; display:block !important; min-height:0 !important; } .verses-preview .verse-mini-grid{ display:grid !important; grid-template-columns:1fr !important; gap:14px !important; } .verses-price-final{ order:3 !important; width:100% !important; margin-top:0 !important; } } @media (max-width:680px){ .verses-preview-intro{ padding:16px; margin-bottom:14px; } .verse-mini-card{ min-height:0 !important; padding:18px !important; } .verse-mini-card h4{ font-size:20px !important; } } /* CTA placement fixes - 2026-09-30 */ .section-cta-break{ padding:0 0 clamp(42px,6vw,64px); } .section-cta-row{ width:var(--content); margin:0 auto; display:flex; justify-content:center; } .section-cta{ width:min(560px,100%); min-height:68px; border-radius:999px; justify-content:center; font-size:13px; letter-spacing:.055em; } .section-cta span{ margin-left:8px; font-size:18px; line-height:1; transition:transform .25s ease; } .section-cta:hover span, .section-cta:focus-visible span{ transform:translateX(5px); } .section-cta-row-verses{ grid-column:1 / -1; width:100%; margin-top:10px; } .faq-cta-row{ margin-top:42px; } @media(max-width:720px){ .section-cta-break{ padding:0 16px 34px; } .section-cta-row{ width:100%; } .section-cta, .verses-section .section-cta{ width:100%; max-width:none; min-height:64px; padding-inline:18px; font-size:12px; } .faq-cta-row{ margin-top:30px; padding-inline:16px; } } /* ULTIMO AJUSTE BONUS 02 - CTA sempre depois do valor, em todas as telas */ .verses-section .bonus-copy{ order:1 !important; } .verses-section .verses-preview{ order:2 !important; } .verses-section .verses-price-final{ order:3 !important; grid-column:1 / -1 !important; } .verses-section .section-cta-row-verses{ order:4 !important; grid-column:1 / -1 !important; width:100% !important; margin-top:14px !important; } @media (max-width:1050px){ .verses-section .bonus-copy{ order:1 !important; } .verses-section .verses-preview{ order:2 !important; } .verses-section .verses-price-final{ order:3 !important; } .verses-section .section-cta-row-verses{ order:4 !important; margin-top:14px !important; } } /* ===== Últimos ajustes visuais — 2026-09-30 ===== */ /* 1) Deixar o quadrinho da coleção reto em todas as telas */ .hero-product figcaption{ transform:none !important; rotate:0deg !important; } /* 2) Remover qualquer sublinhado/risquinho decorativo do título do calendário */ .calendar-copy h2, .calendar-copy h2 *, .elementor .calendar-copy h2, .elementor .calendar-copy h2 *{ text-decoration:none !important; text-decoration-line:none !important; border-bottom:0 !important; box-shadow:none !important; background-image:none !important; } .calendar-copy h2::before, .calendar-copy h2::after{ content:none !important; display:none !important; } /* 3/4) O mockup 3D superior da guia foi removido; centralizar o conteúdo restante */ .guide-section, .elementor .guide-section{ grid-template-columns:1fr !important; } .guide-section .guide-copy, .elementor .guide-section .guide-copy{ width:min(100%, 900px) !important; max-width:900px !important; margin-left:auto !important; margin-right:auto !important; } /* Remover o espaço que existia antes do título da capa interna */ .guide-inline-cover > strong:first-child{ margin-top:0 !important; }