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

:root{
--red:#db0010;
--yellow:#ffc52e;
--cream:#fff3d3;
--violet:#7840c8;
--ink:#241218
}
*{
box-sizing:border-box
}
html{
scroll-behavior:smooth
}
body{
margin:0;
color:var(--ink);
font-family:"Nunito Sans",Arial,sans-serif;
background:var(--cream)
}
a{
color:inherit
}
.header{
height:94px;
padding:12px clamp(20px,7vw,86px);
display:flex;
align-items:center;
gap:clamp(16px,4vw,60px);
position:absolute;
z-index:5;
width:100%;
color:#fff
}
.logo{
font-family:"Baloo 2",cursive;
font-size:56px;
font-weight:800;
line-height:.9;
letter-spacing:-7px;
text-decoration:none;
color:#fff;
text-shadow:3px 3px 0 #133568,5px 5px 0 #fff
}
.logo span:first-child{
color:#e01a2d
}
.logo span:last-child{
color:#1763b6
}
.nav{
display:flex;
gap:clamp(15px,2.3vw,33px);
margin-left:auto
}
.nav a,.buy-pill{
font-size:14px;
font-weight:900;
text-decoration:none;
white-space:nowrap
}
.nav a{
padding:8px 0;
border-bottom:2px solid transparent
}
.nav a:hover,.nav a.active{
border-color:#fff
}
.buy-pill{
background:var(--yellow);
color:#261500;
padding:13px 19px;
border-radius:999px;
box-shadow:inset 0 -3px #e19d00
}
.buy-pill span{
font-size:16px;
margin-left:7px
}
.menu-toggle{
display:none
}
.hero{
min-height:666px;
background:var(--red);
position:relative;
overflow:hidden;
padding:154px max(8vw,40px) 84px;
color:#fff
}
.blob{
position:absolute;
z-index:0
}
.blob-yellow{
left:-12%;
top:20%;
width:46%;
height:55%;
background:var(--yellow);
border-radius:54% 46% 63% 37%/39% 54% 46% 61%;
transform:rotate(-18deg)
}
.blob-violet{
right:-10%;
top:18%;
height:54%;
width:34%;
background:#743ac7;
border-radius:51% 49% 23% 77%/50% 32% 68% 50%;
transform:rotate(15deg)
}
.hero-copy{
position:relative;
z-index:1;
width:min(48%,560px)
}
.eyebrow{
text-transform:uppercase;
letter-spacing:.08em;
font-weight:900;
margin:0 0 5px;
color:inherit
}
.hero h1{
font-family:"Baloo 2",cursive;
font-size:clamp(50px,7vw,94px);
line-height:.76;
text-transform:uppercase;
letter-spacing:-3px;
margin:5px 0 26px;
color:#fff;
text-shadow:4px 4px 0 #1d0c17
}
.hero h1 small{
display:block;
font-size:.4em;
letter-spacing:0;
line-height:1.15
}
.hero h1 strong{
display:block;
color:var(--yellow);
-webkit-text-stroke:2px #1c1820
}
.intro{
font-size:17px;
line-height:1.42;
font-weight:700;
margin:0 0 24px
}
.cta-row{
display:flex;
gap:13px;
flex-wrap:wrap
}
.button,.mini-button{
font-weight:900;
font-size:13px;
text-decoration:none;
text-transform:uppercase;
padding:14px 19px;
border-radius:999px;
display:inline-block;
transition:.2s transform,.2s box-shadow
}
.button:hover,.mini-button:hover{
transform:translateY(-3px);
box-shadow:0 7px 0 rgb(34 5 10/.22)
}
.yellow{
background:var(--yellow);
color:#201108
}
.outline{
border:2px solid #fff;
color:#fff;
padding:12px 18px
}
.product-stage{
z-index:1;
position:absolute;
width:min(40vw,455px);
height:500px;
right:11%;
top:127px;
border-radius:30px 30px 48px 48px;
background:linear-gradient(145deg,#ec1025,#ab0012);
transform:rotate(4deg);
box-shadow:0 19px 21px #69000a80;
overflow:visible
}
.product-stage:before{
content:"Sopi";
font-family:"Baloo 2",cursive;
font-size:clamp(56px,8vw,104px);
font-weight:800;
color:#fff;
text-shadow:4px 4px 0 #133568;
position:absolute;
left:13%;
top:15%;
letter-spacing:-9px
}
.asset-note{
position:absolute;
inset:40% 10% auto;
text-align:center;
border:2px dashed rgb(255 255 255/.7);
padding:13px;
border-radius:12px;
color:#fff;
background:#7a00166b;
font-size:11px;
z-index:0
}
.asset-note strong,.asset-note span{
display:block
}
.asset-note span{
font-family:monospace;
font-size:9px;
opacity:.85;
margin-top:4px
}
.product-stage img,.dog-slot img,.gummies-slot img{
position:absolute;
width:100%;
height:100%;
inset:0;
object-fit:contain;
z-index:2
}
.bone{
position:absolute;
width:82px;
height:29px;
background:#ff7e14;
border-radius:20px;
box-shadow:inset 0 -5px 8px #c33b0b,0 4px 9px #6d0006;
z-index:3
}
.bone:after,.bone:before{
content:"";
position:absolute;
width:25px;
height:25px;
border-radius:50%;
background:inherit;
top:2px
}
.bone:before{
left:-9px
}
.bone:after{
right:-9px
}
.b1{
left:-28%;
top:55%;
transform:rotate(-22deg)
}
.b2{
right:-22%;
bottom:22%;
transform:rotate(23deg)
}
.b3{
left:7%;
bottom:4%;
transform:rotate(-12deg)
}
.paw{
position:absolute;
z-index:1;
color:#f474a5;
font-size:80px
}
.paw-one{
left:5%;
top:28%
}
.paw-two{
right:7%;
bottom:20%;
font-size:53px;
color:#ffc72e
}
.benefits{
padding:42px max(8vw,40px);
background:var(--cream);
display:grid;
grid-template-columns:repeat(3,1fr);
gap:35px
}
.benefits article{
display:flex;
align-items:center;
gap:16px;
padding-right:18px;
border-right:1px solid #e8a826
}
.benefits article:last-child{
border:0
}
.benefit-icon{
width:69px;
height:69px;
flex:0 0 69px;
border-radius:50%;
display:grid;
place-content:center;
font-size:47px;
font-weight:800
}
.leaf{
background:#ffca25
}
.smile{
background:#f080b3
}
.heart{
background:#a772d9
}
.benefits h2{
font-size:16px;
text-transform:uppercase;
margin:0;
font-weight:900
}
.benefits p{
font-size:13px;
line-height:1.3;
margin:5px 0 0
}
.surprise{
margin:0 max(3vw,24px);
min-height:180px;
border-radius:20px;
background:linear-gradient(110deg,#6b36c5,#874de1);
color:#fff;
display:flex;
align-items:center;
padding:26px clamp(25px,10vw,145px);
position:relative;
overflow:hidden
}
.surprise:after{
content:"★  ♡  ✦  ◌";
position:absolute;
bottom:8px;
left:29%;
font-size:35px;
opacity:.18
}
.burst{
width:150px;
height:150px;
display:grid;
place-content:center;
text-align:center;
text-transform:uppercase;
line-height:.9;
font-weight:900;
font-size:17px;
background:#da1325;
clip-path:polygon(50% 0,60% 12%,75% 3%,81% 19%,97% 16%,91% 34%,100% 46%,88% 56%,96% 72%,78% 75%,76% 94%,60% 84%,50% 100%,40% 86%,24% 95%,22% 76%,4% 70%,13% 56%,0 47%,13% 36%,5% 22%,24% 22%,29% 4%,42% 14%);
position:absolute;
left:7%;
top:15px;
transform:rotate(-9deg)
}
.burst em{
font-style:normal;
font-size:25px;
color:var(--yellow)
}
.surprise-copy{
margin-left:23%;
width:39%
}
.surprise-copy h2{
font-family:"Baloo 2",cursive;
font-size:28px;
line-height:.9;
margin:3px 0 10px
}
.surprise-copy p:not(.eyebrow){
line-height:1.35;
margin:0
}
.toys{
margin-left:auto;
font-size:65px;
white-space:nowrap;
filter:drop-shadow(0 5px 2px #32105d)
}
.story{
padding:70px max(7vw,40px) 40px;
display:grid;
grid-template-columns:23% 24% 1fr;
align-items:center;
gap:29px;
position:relative
}
.dog-slot{
height:300px;
position:relative;
background:radial-gradient(#cc90f4 2px,transparent 3px);
background-size:28px 28px;
border-radius:45%
}
.dog-slot .asset-note{
color:var(--ink);
border-color:#9266b9;
background:#fff9;
inset:40px 12px auto
}
.story-copy h2,.flavor-card h2{
font-family:"Baloo 2",cursive;
font-size:35px;
line-height:.95;
text-transform:uppercase;
margin:5px 0 12px
}
.story-copy .eyebrow,.flavor-card .eyebrow{
color:#d61525;
font-size:13px
}
.story-copy p:not(.eyebrow),.flavor-card p:not(.eyebrow){
font-size:14px;
line-height:1.45;
margin:0
}
.flavor-card{
align-self:stretch;
min-height:255px;
border-radius:25px;
background:linear-gradient(120deg,#ffcc3d,#ffe8a3);
display:grid;
grid-template-columns:52% 48%;
padding:33px 0 25px 27px;
overflow:hidden
}
.flavor-card h2{
color:#d61525;
font-size:37px
}
.flavor-card h2 i{
font-style:normal;
font-size:27px
}
.mini-button{
color:var(--ink);
border:2px solid #743cc2;
font-size:11px;
padding:10px 13px;
margin-top:16px
}
.gummies-slot{
position:relative;
min-height:210px
}
.gummies-slot .asset-note{
color:#b82020;
border-color:#c97032;
background:#fff8;
inset:70px 10px auto
}
.promise{
display:flex;
justify-content:center;
gap:min(9vw,130px);
background:var(--red);
color:#fff;
padding:22px 30px;
text-transform:uppercase
}
.promise div{
display:flex;
gap:13px;
align-items:center;
font-size:36px
}
.promise span{
font-size:15px;
font-weight:900;
line-height:1.12
}
footer{
position:relative;
background:linear-gradient(100deg,#93000b,#cd0011);
color:#fff;
padding:42px max(8vw,55px) 38px;
display:grid;
grid-template-columns:1.45fr 1fr 1.35fr 1.3fr;
gap:35px
}
footer .logo{
font-size:51px
}
footer p{
font-size:12px;
line-height:1.35;
margin:10px 0
}
footer h3{
font-size:13px;
text-transform:uppercase;
margin:5px 0 12px
}
footer>div>a:not(.logo){
font-size:12px;
text-decoration:none;
display:block;
line-height:1.9
}
footer>div>a:hover{
text-decoration:underline
}
footer small{
grid-column:1/-1;
text-align:center;
font-size:11px;
margin-top:8px
}

@media(max-width:800px){
.header{
height:75px;
padding:10px 22px
}
.header .logo{
font-size:43px
}
.nav{
display:none
}
.nav.open{
display:flex;
position:absolute;
top:74px;
left:0;
right:0;
padding:20px 26px;
background:#ae0010;
flex-direction:column;
gap:9px
}
.menu-toggle{
display:grid;
background:transparent;
border:0;
gap:4px;
padding:6px;
margin-left:auto
}
.menu-toggle i{
display:block;
width:25px;
height:3px;
background:#fff;
border-radius:3px
}
.buy-pill{
font-size:11px;
padding:10px 12px
}
.hero{
min-height:800px;
padding:120px 28px 40px
}
.hero-copy{
width:100%;
text-align:center
}
.hero h1{
font-size:62px
}
.intro{
font-size:15px
}
.cta-row{
justify-content:center
}
.product-stage{
width:280px;
height:360px;
right:calc(50% - 140px);
top:440px
}
.benefits{
grid-template-columns:1fr;
padding:31px 28px;
gap:18px
}
.benefits article{
border:0;
padding-bottom:18px;
border-bottom:1px solid #e8a826
}
.benefits article:last-child{
border:0;
padding:0
}
.surprise{
margin:0 16px;
padding:25px 20px 25px 137px;
min-height:210px
}
.burst{
left:3%;
top:30px;
width:122px;
height:122px;
font-size:13px
}
.burst em{
font-size:20px
}
.surprise-copy{
margin:0;
width:100%
}
.surprise-copy h2{
font-size:25px
}
.toys{
display:none
}
.story{
grid-template-columns:1fr;
padding:50px 27px 30px;
gap:22px
}
.dog-slot{
height:235px;
width:210px;
margin:auto
}
.story-copy{
text-align:center
}
.flavor-card{
grid-template-columns:1fr;
min-height:440px;
padding:28px 25px;
text-align:center
}
.gummies-slot{
min-height:190px
}
.promise{
gap:17px;
justify-content:space-between;
padding:18px
}
.promise div{
font-size:25px
}
.promise span{
font-size:10px
}
footer{
grid-template-columns:1fr 1fr;
padding:35px 28px;
gap:25px
}
footer>div:first-child,footer small{
grid-column:1/-1
}
.has-video .hero-copy{
padding:18px
}
.has-video .hero-video{
object-position:62% center
}

}
@media(max-width:410px){
.buy-pill{
display:none
}
.hero h1{
font-size:53px
}
.surprise{
padding-left:130px
}
.surprise-copy h2{
font-size:21px
}
.promise{
flex-direction:column;
align-items:center
}
.promise div{
width:210px
}

}

.has-video{
background:#dba520
}
.has-video .hero-video{
position:absolute;
inset:0;
width:100%;
height:100%;
object-fit:cover;
object-position:center;
z-index:0
}
.has-video .hero-video-overlay{
display:none
}
.has-video .blob,.has-video .paw,.has-video .product-stage{
display:none
}
.has-video .hero-copy{
color:#351207;
text-shadow:none
}
.has-video .hero-copy .eyebrow,.has-video .intro{
color:#4a1706
}
.has-video h1{
color:#d5081a;
text-shadow:3px 3px 0 #fff
}
.has-video h1 strong{
color:#7d39bd;
-webkit-text-stroke:1px #fff
}
.has-video .outline{
color:#491328;
border-color:#491328;
background:rgb(255 255 255/.32)
}

.logo{
display:block;
width:112px;
line-height:0;
text-decoration:none
}
.logo img{
display:block;
width:100%;
height:auto
}
.header .logo{
font-size:0;
letter-spacing:0;
text-shadow:none
}
.header .logo span{
display:none
}
footer .logo{
width:122px;
font-size:0;
letter-spacing:0;
text-shadow:none
}

.hero .hero-title{
margin:8px 0 20px;
line-height:0;
text-shadow:none;
-webkit-text-stroke:0
}
.hero-title img{
display:block;
width:min(100%,450px);
height:auto
}
.has-video .hero-title{
color:inherit;
text-shadow:none
}
.has-video .hero-title img{
filter:drop-shadow(0 7px 8px rgb(79 13 12 / .2))
}
@media(max-width:800px){
.hero-title img{
width:min(100%,360px);
margin-inline:auto
}

}

.header{
height:92px;
padding:0 clamp(34px,3.7vw,58px);
background:transparent;
box-shadow:none;
align-items:center
}
.header .logo{
width:242px;
position:relative;
z-index:1;
flex:0 0 242px;
transform:translateY(-2px)
}
.header nav{
position:relative;
z-index:1;
padding:0;
background:transparent;
box-shadow:none;
gap:34px;
transform:translateY(-4px)
}
.header nav a{
padding:9px 2px;
color:#da0717;
text-shadow:0 1px 1px rgb(255 247 202 / .9);
font-size:15px
}
.header nav a:hover,.header nav a.active{
border-color:#da0717
}
.header .buy-pill{
position:relative;
z-index:1;
padding:12px 22px;
font-size:13px;
transform:translateY(-4px)
}
.has-video{
background:#fcc75a
}
.has-video .hero-video{
top:32px;
height:calc(100% - 32px);
object-position:center top
}
.has-video .hero-copy{
width:min(41%,460px);
padding:0
}
.hero{
min-height:650px;
padding-top:112px
}
.hero .hero-title{
margin:0 0 14px
}
.hero-title img{
width:min(100%,395px)
}
.has-video .intro{
font-size:18px;
line-height:1.32;
margin-bottom:22px
}
.has-video .outline{
background:#fff9;
border-color:#d60919;
color:#d60919
}
@media(max-width:800px){
.header{
height:76px;
padding-top:10px;
padding-bottom:10px
}
.header .logo{
width:130px;
flex-basis:130px;
transform:none
}
.nav.open{
top:75px;
border-radius:0;
background:#fff4d7
}
.header nav,.header .buy-pill{
transform:none
}
.has-video .hero-video{
top:20px;
height:calc(100% - 20px);
object-position:58% top
}
.has-video .hero-copy{
width:100%;
padding:0
}
.hero{
padding-top:108px
}
.hero-title img{
width:min(100%,350px)
}

}

.header{
position:relative;
background:#fcc75a
}
.has-video .hero-video{
top:0!important;
height:100%!important
}
.hero{
min-height:560px;
padding-top:40px
}
@media(max-width:800px){
.header{
position:relative
}
.hero{
min-height:720px;
padding-top:44px
}

}

.surprise{
margin:76px 0 0;
min-height:520px;
padding:0;
border-radius:0;
background:#e30619;
display:block;
overflow:visible
}
.surprise::before{
content:"";
position:absolute;
z-index:0;
left:0;
right:0;
top:-76px;
height:78px;
background:url("assets/waves/wave-red-top.svg?v=2") center bottom/100% 100% no-repeat
}
.surprise::after{
content:"";
position:absolute;
z-index:0;
left:0;
right:0;
top:400px;
bottom:-76px;
height:76px;
background:url("assets/waves/wave-purple-bottom.svg") center top/100% 100% no-repeat;
opacity:1
}
.surprise-gummies,.surprise-dog{
display:block;
position:absolute;
z-index:1;
height:auto;
object-fit:contain
}
.surprise-gummies{
width:min(42vw,530px);
left:58%;
top:52%;
transform:translate(-50%,-45%)
}
.surprise-dog{
width:min(22vw,275px);
right:4%;
bottom:-2px
}
@media(max-width:800px){
.surprise{
min-height:410px;
margin:45px 0 0
}
.surprise::before{
top:-45px;
height:47px
}
.surprise::after{
bottom:-45px;
height:47px
}
.surprise-gummies{
width:70vw;
left:56%;
top:45%
}
.surprise-dog{
width:40vw;
right:1%;
bottom:-2px
}

}

.wave-divider{
display:none
}
.benefits{
position:relative;
padding-top:70px
}
.benefits::before{
content:"";
position:absolute;
z-index:1;
top:-34px;
left:-55px;
width:165px;
height:68px;
border-radius:50%;
background:var(--cream);
box-shadow:145px 14px var(--cream),290px -5px var(--cream),435px 14px var(--cream),580px -5px var(--cream),725px 14px var(--cream),870px -5px var(--cream),1015px 14px var(--cream),1160px -5px var(--cream),1305px 14px var(--cream),1450px -5px var(--cream)
}
.benefits article{
position:relative;
z-index:2
}
@media(max-width:800px){
.benefits{
padding-top:48px
}
.benefits::before{
top:-22px;
width:110px;
height:44px;
left:-35px;
box-shadow:92px 9px var(--cream),184px -3px var(--cream),276px 9px var(--cream),368px -3px var(--cream),460px 9px var(--cream),552px -3px var(--cream)
}

}

.surprise-copy-real{
display:block;
position:absolute;
z-index:3;
left:clamp(36px,8vw,138px);
top:72px;
width:min(35vw,470px);
color:#fff
}
.surprise-kicker{
margin:0 0 10px;
display:flex;
align-items:center;
gap:12px;
text-transform:uppercase;
font-family:"Baloo 2",cursive;
font-weight:900;
font-size:clamp(22px,2.1vw,33px)
}
.surprise-kicker b{
display:grid;
place-items:center;
width:64px;
height:64px;
border-radius:50%;
background:#ffd42a;
color:#19205d;
font-family:"Nunito Sans",sans-serif;
font-size:27px;
box-shadow:0 4px 0 #d89b00
}
.surprise-kicker span{
padding:4px 28px 5px 18px;
border-radius:8px 26px 26px 8px;
background:#5b32b3;
line-height:1;
white-space:nowrap
}
.surprise-copy-real h2{
font-family:"Baloo 2",cursive;
font-size:clamp(46px,5.3vw,82px);
line-height:.78;
letter-spacing:-2px;
text-transform:uppercase;
margin:0;
color:#fff;
text-shadow:4px 4px 0 #141358
}
.surprise-copy-real h2 strong,.surprise-copy-real h2 em{
display:block;
font-style:normal
}
.surprise-copy-real h2 strong{
color:#ffd13a
}
.surprise-copy-real h2 em{
color:#ed80c0
}
.surprise-description{
font-size:clamp(15px,1.35vw,21px);
font-weight:800;
line-height:1.35;
margin:27px 0 18px;
max-width:350px
}
.surprise-button{
display:inline-block;
background:#ffd426;
border:2px solid #b68b00;
border-radius:999px;
padding:14px 28px;
color:#182047;
text-decoration:none;
text-transform:uppercase;
font-size:14px;
font-weight:900;
box-shadow:0 4px 0 #b88700
}
.collectible-burst{
position:absolute;
z-index:4;
right:clamp(30px,7vw,125px);
top:45px;
width:205px;
height:205px;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
text-align:center;
text-transform:uppercase;
line-height:.9;
color:#fff;
background:#0876d8;
clip-path:polygon(50% 0,59% 11%,73% 3%,79% 18%,96% 16%,90% 33%,100% 45%,88% 56%,97% 71%,78% 75%,76% 95%,61% 85%,50% 100%,40% 86%,24% 96%,22% 77%,4% 70%,13% 56%,0 46%,13% 35%,5% 21%,24% 22%,30% 4%,42% 14%);
filter:drop-shadow(0 5px 0 #073d93)
}
.collectible-burst span{
font-family:"Baloo 2",cursive;
font-size:25px
}
.collectible-burst strong{
font-family:"Baloo 2",cursive;
font-size:38px;
color:#ffd52f
}
.collectible-burst b{
font-family:"Baloo 2",cursive;
font-size:24px
}
.collectible-burst i{
margin-top:11px;
width:43px;
height:39px;
padding-top:5px;
background:#ffd52f;
border:3px solid #6b3d79;
transform:rotate(-7deg);
color:#283466;
font-style:normal;
font-size:25px;
font-weight:900
}
.surprise-gummies{
z-index:2
}
.surprise-dog{
z-index:3
}
@media(max-width:800px){
.surprise{
min-height:640px
}
.surprise-copy-real{
top:35px;
left:28px;
width:55vw
}
.surprise-kicker{
font-size:14px;
gap:6px
}
.surprise-kicker b{
width:38px;
height:38px;
font-size:17px
}
.surprise-kicker span{
padding:4px 11px
}
.surprise-copy-real h2{
font-size:45px
}
.surprise-description{
font-size:14px;
margin-top:20px
}
.collectible-burst{
width:128px;
height:128px;
right:14px;
top:36px
}
.collectible-burst span{
font-size:16px
}
.collectible-burst strong{
font-size:25px
}
.collectible-burst b{
font-size:15px
}
.collectible-burst i{
width:29px;
height:25px;
padding-top:1px;
font-size:17px;
margin-top:6px
}
.surprise-gummies{
top:63%;
left:52%;
width:76vw
}
.surprise-dog{
width:42vw;
right:0;
bottom:0
}

}

.surprise-copy-real{
width:min(39vw,510px);
top:60px
}
.surprise-copy-real h2{
font-size:clamp(54px,6.4vw,92px);
line-height:.76
}
.surprise-description{
font-size:clamp(17px,1.6vw,23px);
max-width:395px;
margin-top:31px
}
.surprise-button{
font-size:15px;
padding:15px 31px
}
.surprise-gummies{
left:59%;
top:51%;
width:min(43vw,560px)
}
.surprise-dog{
width:min(19vw,240px);
right:4%;
bottom:-1px
}
.surprise-paw{
position:absolute;
z-index:1;
width:58px;
height:58px;
object-fit:contain
}
.surprise-paw-gold{
left:56%;
top:24%;
filter:hue-rotate(38deg) saturate(1.5)
}
.surprise-paw-lilac{
left:52%;
bottom:70px;
filter:hue-rotate(205deg) saturate(1.35)
}
.surprise-heart{
position:absolute;
z-index:1;
font-family:Arial,sans-serif;
font-size:58px;
line-height:1;
color:#fff;
text-shadow:0 3px 0 #ec7dbc
}
.heart-one{
left:7%;
bottom:94px;
transform:rotate(-18deg)
}
.heart-two{
right:30%;
bottom:95px;
transform:rotate(21deg)
}
.story{
background:linear-gradient(#6d38da 0 74px,var(--cream) 74px)
}
@media(max-width:800px){
.surprise-copy-real{
width:58vw;
top:35px
}
.surprise-copy-real h2{
font-size:48px
}
.surprise-description{
font-size:14px;
margin-top:20px
}
.surprise-gummies{
top:63%;
left:52%;
width:76vw
}
.surprise-dog{
width:38vw
}
.surprise-paw,.surprise-heart{
display:none
}
.story{
background:linear-gradient(#6d38da 0 45px,var(--cream) 45px)
}

}

.surprise{
z-index:1
}
.surprise::after{
z-index:6;
bottom:-73px;
height:75px;
background:url("assets/waves/wave-red-bottom.svg") center top/100% 100% no-repeat;
pointer-events:none
}
.heart-one{
left:3%;
bottom:52px
}
.story{
position:relative;
z-index:0
}
@media(max-width:800px){
.surprise::after{
bottom:-45px;
height:47px
}

}

.surprise{
min-height:480px
}
.surprise-copy-real{
top:36px;
width:min(34vw,430px)
}
.surprise-copy-real h2{
font-size:clamp(44px,5.15vw,74px);
line-height:.8;
letter-spacing:-1.5px
}
.surprise-description{
font-size:clamp(15px,1.25vw,19px);
line-height:1.38;
max-width:315px;
margin-top:24px
}
.surprise-button{
font-size:13px;
padding:13px 25px
}
.collectible-burst{
width:230px;
height:230px;
right:clamp(20px,3.2vw,58px);
top:-35px
}
.collectible-burst span{
font-size:28px
}
.collectible-burst strong{
font-size:43px
}
.collectible-burst b{
font-size:26px
}
.surprise-gummies{
width:min(40vw,500px);
left:60%;
top:52%
}
.surprise-dog{
width:min(17.5vw,215px);
right:4%;
bottom:-31px
}
.surprise-paw-gold{
left:55%;
top:28%
}
.surprise-paw-lilac{
left:50%;
bottom:57px
}
.heart-one{
left:3%;
bottom:45px
}
@media(max-width:800px){
.surprise{
min-height:620px
}
.surprise-copy-real{
top:30px;
width:55vw
}
.surprise-copy-real h2{
font-size:43px
}
.collectible-burst{
top:20px;
width:130px;
height:130px
}
.surprise-dog{
width:37vw;
bottom:-15px
}
.surprise-gummies{
width:72vw;
left:55%;
top:65%
}

}

.surprise-dog{
width:min(14.5vw,178px);
right:5%;
bottom:-31px;
clip-path:none;
-webkit-mask-image:none;
mask-image:none
}
.surprise-gummies{
width:min(33vw,410px);
left:52%;
top:52%
}

.surprise-dog{
width:min(20vw,250px);
right:4%;
bottom:0;
z-index:7;
clip-path:none;
-webkit-mask-image:none;
mask-image:none
}

.collectible-badge{
position:absolute;
z-index:4;
display:block;
right:clamp(72px,9vw,142px);
top:-28px;
width:min(25vw,310px);
height:auto;
object-fit:contain
}
@media(max-width:800px){
.collectible-badge{
width:39vw;
right:3px;
top:5px
}

}

.surprise-gummies{
top:43%
}
.surprise-dog{
z-index:3
}
.surprise::after{
bottom:-38px;
height:76px
}
@media(max-width:800px){
.surprise::after{
bottom:-24px;
height:47px
}
.surprise-gummies{
top:58%
}

}

.surprise{
min-height:435px
}
.surprise-dog{
bottom:-42px
}
@media(max-width:800px){
.surprise{
min-height:590px
}
.surprise-dog{
bottom:-24px
}

}

.surprise-dog{
bottom:-84px;
clip-path:inset(0 0 24% 0)
}

.surprise{
min-height:545px
}
.surprise::after{
z-index:6;
bottom:-35px;
height:145px;
background:url("assets/waves/wave-purple-dog.svg?v=4") center top/100% 110px no-repeat,linear-gradient(#6d38da,#6d38da) center bottom/100% 35px no-repeat
}
.collectible-badge{
z-index:4
}
.surprise-dog{
z-index:5;
bottom:64px;
clip-path:none
}
@media(max-width:800px){
.surprise{
min-height:666px
}
.surprise::after{
bottom:-24px;
height:100px;
background:url("assets/waves/wave-purple-dog.svg?v=4") center top/100% 76px no-repeat,linear-gradient(#6d38da,#6d38da) center bottom/100% 24px no-repeat
}
.surprise-dog{
bottom:46px
}

}

/* Decoraciones del bloque rojo: posiciones editables */
.heart-one{
left:3%;
bottom:253px
}

.surprise-paw-lilac{
left:50%;
bottom:499px
}

.heart-two{
right:27%;
bottom:127px
}

/* Sección 03: Colección Dalai */
.dalai{
position:relative;
isolation:isolate;
overflow:hidden;
padding:clamp(64px,7vw,116px) clamp(34px,6vw,100px);
display:grid;
grid-template-columns:minmax(260px,.8fr) minmax(600px,1.7fr);
gap:clamp(35px,5vw,90px);
align-items:center;
color:#fff;
background:radial-gradient(circle at 80% 8%,rgb(255 255 255 / .13) 0 30px,transparent 31px),linear-gradient(125deg,#4022aa,#7136dc 58%,#4a1aae)
}
.dalai::before,.dalai::after{
content:"";
position:absolute;
z-index:-1;
border-radius:50%;
background:rgb(255 120 202 / .34)
}
.dalai::before{
width:210px;
height:210px;
left:-86px;
bottom:-94px
}
.dalai::after{
width:175px;
height:175px;
right:-70px;
bottom:8%
}
.dalai-copy{
max-width:410px
}
.dalai-kicker{
display:flex;
align-items:center;
gap:14px;
margin:0 0 26px;
font-family:"Baloo 2",cursive;
font-size:clamp(24px,2vw,34px);
font-weight:800;
text-transform:uppercase
}
.dalai-kicker b{
display:grid;
place-items:center;
width:70px;
height:70px;
border-radius:50%;
background:#ffd638;
color:#191354;
font-family:"Nunito Sans",sans-serif;
font-size:29px;
box-shadow:0 5px 0 #db9b00
}
.dalai-kicker span{
padding:5px 25px 7px 18px;
border-radius:8px 30px 30px 8px;
line-height:1;
background:#45209f
}
.dalai h2{
margin:0;
font-family:"Baloo 2",cursive;
font-size:clamp(68px,7.5vw,120px);
line-height:.72;
letter-spacing:-4px;
color:#f47cc7;
-webkit-text-stroke:3px #17115d;
text-shadow:5px 6px 0 #17115d
}
.dalai h2 small{
display:block;
margin:20px 0 0;
font-size:clamp(25px,2.5vw,42px);
line-height:.9;
letter-spacing:-.5px;
color:#fff;
-webkit-text-stroke:0;
text-shadow:3px 3px 0 #17115d
}
.dalai-copy>p:not(.dalai-kicker){
margin:31px 0 29px;
font-family:"Baloo 2",cursive;
font-size:clamp(20px,1.8vw,29px);
line-height:1.2
}
.dalai-hint{
display:inline-flex;
align-items:center;
gap:14px;
padding:15px 25px;
border-radius:999px;
background:#ffd638;
color:#17115d;
font-size:clamp(15px,1.3vw,21px);
line-height:1.08
}
.dalai-hint:first-letter{
font-size:37px
}
.dalai-cards{
display:grid;
grid-template-columns:repeat(4,minmax(110px,1fr));
gap:clamp(12px,1.55vw,26px);
align-items:center
}
.dalai-card{
position:relative;
display:block;
min-width:0;
padding:0;
border:0;
border-radius:16px;
background:transparent;
cursor:pointer;
perspective:900px;
filter:drop-shadow(0 12px 12px rgb(20 7 68 / .35))
}
.dalai-card:nth-child(5){grid-column:1 / 2}
.dalai-card:nth-child(5),.dalai-card:nth-child(6),.dalai-card:nth-child(7){transform:translateX(52%)}
.dalai-card-inner{
position:relative;
display:block;
aspect-ratio:3 / 4.05;
transform-style:preserve-3d;
transition:transform .62s ease
}
.dalai-card.is-flipped .dalai-card-inner{
transform:rotateY(180deg)
}
.dalai-card img{
position:absolute;
inset:0;
width:100%;
height:100%;
object-fit:contain;
backface-visibility:hidden
}
.dalai-card .dalai-back{
transform:rotateY(180deg)
}
.dalai-card:focus-visible{
outline:4px solid #ffe370;
outline-offset:5px
}
@media(max-width:1000px){
.dalai{
grid-template-columns:1fr;
gap:38px
}
.dalai-copy{
max-width:none;
text-align:center
}
.dalai-kicker{
justify-content:center
}
.dalai-cards{
max-width:760px;
width:100%;
margin:auto
}
}
@media(max-width:620px){
.dalai{
padding:62px 22px
}
.dalai-kicker{
font-size:21px;
gap:8px;
margin-bottom:23px
}
.dalai-kicker b{
width:54px;
height:54px;
font-size:22px
}
.dalai-kicker span{
padding:6px 15px
}
.dalai h2{
font-size:76px
}
.dalai h2 small{
font-size:25px
}
.dalai-copy>p:not(.dalai-kicker){
font-size:21px;
margin:24px 0
}
.dalai-cards{
grid-template-columns:repeat(2,1fr);
gap:14px
}
.dalai-card:nth-child(5),.dalai-card:nth-child(6),.dalai-card:nth-child(7){
transform:none
}
.dalai-card:nth-child(7){
grid-column:1 / -1;
width:calc(50% - 7px);
justify-self:center
}
}

/* Assets originales de Dalai */
.dalai{
background:#6d38da
}
.dalai::before,.dalai::after{
display:none
}
.dalai-logo{
display:block;
width:100%;
height:auto;
margin-top:-14.64%;
-webkit-text-stroke:0;
filter:drop-shadow(0 8px 0 rgb(31 13 93 / .32))
}
.dalai{
padding-top:30px
}
.dalai-kicker{
gap:12px;
margin-bottom:10px;
font-size:clamp(22px,2.1vw,33px)
}
.dalai-kicker b{
width:64px;
height:64px;
flex:0 0 64px;
font-size:27px;
box-shadow:0 4px 0 #d89b00
}
.dalai-kicker span{
padding:4px 28px 5px 18px;
border-radius:8px 26px 26px 8px;
background:#5b32b3;
line-height:1;
white-space:nowrap
}
.dalai h2{
font-size:0;
line-height:0;
letter-spacing:0;
-webkit-text-stroke:0;
text-shadow:none;
width:min(100%,390px);
aspect-ratio:1428 / 676;
overflow:hidden
}
.dalai-hint{
display:block;
width:min(100%,330px);
height:auto;
padding:0;
border-radius:0;
background:none
}
.dalai-deco{
position:absolute;
z-index:0;
display:block;
width:auto;
height:auto;
object-fit:contain;
pointer-events:none
}
.dalai-copy,.dalai-cards{
position:relative;
z-index:1
}
.dalai-deco-heart{
width:75px;
left:2.5%;
top:29%
}
.dalai-deco-paw{
width:95px;
left:34%;
bottom:10%
opacity:.88
}
.dalai-deco-paw-purple{
width:98px;
right:1.5%;
bottom:11%
}
.dalai-deco-dot{
width:28px;
left:26%;
bottom:10%
}
.dalai-deco-mark{
width:55px;
right:1.2%;
top:28%
}
.dalai-deco-outline{
width:75px;
right:1%;
top:47%
}
@media(max-width:1000px){
.dalai-hint{
margin-inline:auto
}
.dalai-deco-heart,.dalai-deco-paw-purple{
display:none
}
}
@media(max-width:620px){
.dalai{
padding-top:28px
}
.dalai-logo{
width:100%;
margin-inline:auto
}
.dalai h2{
width:300px;
margin-inline:auto
}
.dalai-hint{
width:280px
}
.dalai-deco-paw,.dalai-deco-dot,.dalai-deco-mark,.dalai-deco-outline{
display:none
}
}

/* Sección 04: Cómo funciona */
.how-it-works{
position:relative;
isolation:isolate;
overflow:hidden;
display:grid;
grid-template-columns:minmax(280px,.9fr) minmax(560px,1.5fr);
gap:clamp(34px,5vw,92px);
align-items:center;
padding:clamp(60px,7vw,108px) clamp(34px,7vw,118px) clamp(190px,15vw,245px);
color:#17115d;
background:#f58bc4
}
.how-it-works::before,.how-it-works::after{
content:"";
display:block;
position:absolute;
z-index:0;
left:0;
right:0;
pointer-events:none
}
.how-it-works::before{
top:0;
height:110px;
background:url("assets/waves/wave-experience-top.svg?v=7") center top/100% 100% no-repeat,#6d38da
}
.how-it-works::after{
bottom:0;
height:145px;
background:url("assets/waves/wave-experience-bottom.svg?v=6") center top/100% 110px no-repeat,
linear-gradient(#0b65cf,#0b65cf) center bottom/100% 35px no-repeat
}
.how-wave{display:none}
.how-it-works + .story{background:linear-gradient(#0b65cf 0 74px,var(--cream) 74px)}
.how-copy,.how-steps{position:relative;z-index:1}
.how-kicker{display:flex;align-items:center;gap:12px;margin:0 0 -15px;font-family:"Baloo 2",cursive;font-size:clamp(22px,2.1vw,33px);font-weight:800;text-transform:uppercase}
.how-kicker b{display:grid;place-items:center;flex:0 0 64px;width:64px;height:64px;border-radius:50%;background:#ffd638;color:#191354;font-family:"Nunito Sans",sans-serif;font-size:27px;box-shadow:0 4px 0 #d89b00}
.how-kicker span{padding:4px 28px 5px 18px;border-radius:8px 26px 26px 8px;background:#ec77b5;line-height:1}
.how-copy h2{
width:min(100%,530px);
aspect-ratio:1399 / 628;
margin:0;
overflow:hidden;
line-height:0
}
.how-copy h2 img{
display:block;
width:100%;
height:auto;
margin-top:-16.16%
}
.how-copy>p:not(.how-kicker){margin:28px 0 0;font-family:"Baloo 2",cursive;font-size:clamp(18px,1.55vw,25px);line-height:1.23}
.how-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2vw,32px);list-style:none;margin:0;padding:0}
.how-step{position:relative;min-width:0;padding-top:17px;text-align:center}
.how-step>b{display:none}
.how-step-two>b{background:#155ac9}.how-step-three>b{background:#5622a7}
.how-art{display:grid;place-items:center;height:clamp(145px,14vw,205px);padding:16px;border-radius:50%;background:rgb(255 239 249 / .63);box-shadow:inset 0 0 0 2px rgb(255 255 255 / .34)}
.how-art img{display:block;width:100%;height:100%;object-fit:contain}
.how-step h3{margin:13px 0 2px;font-family:"Baloo 2",cursive;font-size:clamp(18px,1.7vw,26px);line-height:1;text-transform:uppercase}
.how-step p{margin:0;font-family:"Baloo 2",cursive;font-size:clamp(14px,1.2vw,18px);line-height:1.14}

/* Sección 05: Nuestra historia */
.how-it-works + .story{position:relative;isolation:isolate;display:grid;grid-template-columns:minmax(240px,.85fr) minmax(240px,.8fr) minmax(250px,.85fr);gap:clamp(22px,4vw,70px);align-items:start;min-height:clamp(500px,42vw,610px);margin-top:-2px;padding:clamp(46px,4.5vw,70px) clamp(44px,7vw,118px) clamp(82px,7vw,110px);overflow:hidden;background:#0b65cf;color:#fff}
.how-it-works + .story::before{content:"";position:absolute;z-index:-1;inset:0 0 auto;height:108px;background:#0b65cf}
.story-intro{position:relative;z-index:1;max-width:390px}.story-kicker{display:flex;align-items:center;gap:13px;margin:0 0 15px;font-family:"Baloo 2",cursive;font-size:clamp(22px,2vw,32px);font-weight:800;text-transform:uppercase}.story-kicker b{display:grid;place-items:center;flex:0 0 64px;width:64px;height:64px;border-radius:50%;background:#ffd638;color:#17115d;font-family:"Nunito Sans",sans-serif;font-size:27px;box-shadow:0 4px 0 #d89b00}.story-kicker span{padding:4px 27px 5px 17px;border-radius:8px 26px 26px 8px;background:#244cca;line-height:1}.story-intro h2{margin:0;font-family:"Baloo 2",cursive;font-size:clamp(44px,4.6vw,76px);line-height:.88;font-weight:900;text-transform:uppercase;text-shadow:0 5px 0 #0c3192}.story-intro>p:not(.story-kicker){margin:25px 0 0;font-family:"Baloo 2",cursive;font-size:clamp(17px,1.45vw,23px);line-height:1.27}
.story-dog-wrap{position:relative;z-index:1;justify-self:center;width:min(100%,360px);aspect-ratio:1 / 1.12;display:grid;place-items:end center}.story-dog-bg{position:absolute;z-index:-1;width:100%;height:100%;object-fit:contain;object-position:center bottom}.story-dog{position:relative;z-index:1;display:block;width:88%;height:auto;max-height:100%;object-fit:contain;object-position:bottom}.story-crown{position:absolute;z-index:2;top:0;left:47%;width:88px;height:88px;object-fit:contain;transform:translateX(-50%) rotate(-16deg)}.story-bone-label{position:absolute;z-index:3;right:-8%;bottom:10%;width:132px;height:auto;transform:rotate(-8deg)}
.story-cause{position:relative;z-index:1;justify-self:end;width:min(100%,365px);background:none}.story-cause>img{display:block;width:100%;height:auto}.story-paw{position:absolute;z-index:0;width:58px;height:58px;object-fit:contain}.story-paw-one{top:19%;left:31%;transform:rotate(-14deg)}.story-paw-two{top:14%;right:4%;transform:rotate(12deg)}.story-heart{position:absolute;z-index:0;bottom:14%;left:36%;width:48px;height:48px;object-fit:contain;transform:rotate(-16deg)}

/* Ajuste compacto de historia */
.how-it-works + .story { min-height:clamp(420px,35vw,470px); padding:clamp(32px,3.5vw,50px) clamp(44px,7vw,118px) clamp(42px,4vw,60px); }
.story-kicker b { flex-basis:60px; width:60px; height:60px; font-size:25px; }
.story-kicker span { flex:0 0 auto; white-space:nowrap; padding:5px 20px 6px 14px; font-size:clamp(18px,1.6vw,24px); }

/* Footer reducido */
footer.footer-minimal {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:30px;
  min-height:0;
  padding:26px clamp(34px,7vw,118px);
}
footer.footer-minimal > div { display:flex; align-items:center; gap:18px; }
footer.footer-minimal .footer-logo { display:block; width:112px; }
footer.footer-minimal .footer-logo img { display:block; width:100%; height:auto; }
footer.footer-minimal p { margin:0; font-size:13px; }
footer.footer-minimal small { margin:0; text-align:right; }
@media(max-width:620px) {
  footer.footer-minimal { flex-direction:column; align-items:flex-start; padding:25px 28px; }
  footer.footer-minimal small { text-align:left; }
}
@media(max-width:1000px){.how-it-works{grid-template-columns:1fr;gap:38px}.how-copy{max-width:560px;margin:auto;text-align:center}.how-kicker{justify-content:center}}
@media(max-width:620px){.how-it-works{padding:56px 22px 72px}.how-kicker{justify-content:flex-start;font-size:21px}.how-kicker b{flex-basis:54px;width:54px;height:54px;font-size:22px}.how-kicker span{padding:6px 15px}.how-copy h2 img{width:100%}.how-copy>p:not(.how-kicker){font-size:19px}.how-steps{gap:8px}.how-step>b{width:42px;height:42px;border-width:3px;font-size:17px}.how-art{height:105px;padding:9px}.how-step h3{font-size:15px}.how-step p{font-size:12px}}

/* Ajustes finales: benefits y hero con video (antes inline en el HTML) */
.benefits{z-index:3;position:relative;min-height:0;padding:14px clamp(74px,9vw,155px) 24px;gap:0;align-items:center}
  .benefits::before{top:-72px;left:0;width:100%;height:72px;border-radius:0;box-shadow:none;background:url("assets/waves/wave-cream.svg?v=2") center bottom/100% 100% no-repeat}
  .benefits article{min-height:118px;padding:0 clamp(19px,3vw,50px);gap:24px;border-right:1px solid #eddba8;align-items:center}
  .benefits article:first-of-type{padding-left:0}.benefits article:last-of-type{padding-right:0;border-right:0}
  .benefit-icon{width:96px;height:96px;min-width:96px;background:none!important;font-size:0}
  .benefit-icon img{display:block;width:100%;height:100%;object-fit:contain}
  .benefits article h2{font-family:"Baloo 2",cursive;font-size:clamp(18px,1.55vw,25px);line-height:.96;letter-spacing:-.4px}
  .benefits article p{font-size:clamp(13px,1.15vw,18px);line-height:1.27;margin-top:8px}
  .benefit-paw{position:absolute;width:72px;height:72px;object-fit:contain;z-index:1;top:50%;transform:translateY(-50%)}
  .benefit-paw-left{left:23px;filter:hue-rotate(43deg) saturate(1.35)}
  .benefit-paw-right{right:25px}
  @media(max-width:800px){.benefits{min-height:0;padding:35px 32px;gap:0}.benefits::before{top:-45px;width:100%;height:45px;background-size:100% 100%}.benefits article{padding:20px 0;min-height:auto}.benefit-paw{display:none}.benefit-icon{width:76px;height:76px;min-width:76px}}
  .has-video .hero-video{top:56px;height:calc(100% - 56px)}
  @media(max-width:800px){.has-video .hero-video{top:32px;height:calc(100% - 32px)}}

/* Hero móvil: el video deja de ser fondo para no ocultar ni competir con el contenido. */
@media (max-width: 620px) {
  /* Sección roja móvil: una sola composición, sin heredar posiciones de escritorio. */
  .surprise {
    min-height: 780px;
    margin-top: 36px;
  }

  .surprise::before {
    top: -36px;
    height: 36px;
    background-size: 100% 36px;
  }

  .surprise::after {
    z-index: 6;
    /* Anula el top heredado: sin esto la onda se queda a media sección. */
    top: auto;
    bottom: -18px;
    height: 60px;
    background-size: 100% 42px, 100% 18px;
  }

  .surprise-copy-real {
    top: 34px;
    left: 22px;
    width: 58vw;
  }

  .surprise-copy-real h2 {
    font-size: 43px;
  }

  .surprise-description {
    margin-top: 18px;
    font-size: 14px;
  }

  .collectible-badge {
    z-index: 4;
    top: 26px;
    right: 10px;
    width: 31vw;
  }

  .surprise-gummies {
    z-index: 2;
    top: 420px;
    left: 50%;
    width: 82vw;
    transform: translateX(-50%);
  }

  .surprise-dog {
    z-index: 5;
    right: 6%;
    /* La onda morada cubre únicamente las patas; la cabeza queda visible. */
    bottom: -20px;
    width: 38vw;
    clip-path: none;
  }

  .surprise-paw,
  .surprise-heart {
    display: none;
  }

  /* Ondas móviles: misma curva, con una amplitud más suave. */
  .benefits::before {
    top: -36px;
    height: 36px;
    background-size: 100% 36px;
  }

  .surprise::before {
    top: -36px;
    height: 36px;
    background-size: 100% 36px;
  }

  .surprise::after {
    bottom: -18px;
    height: 60px;
    background-size: 100% 42px, 100% 18px;
  }

  .how-it-works::before {
    height: 52px;
    background-size: 100% 52px;
  }

  .how-it-works::after {
    height: 75px;
    background-size: 100% 52px, 100% 23px;
  }

  .has-video.hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    min-height: 0;
    padding: 0 22px 38px;
    background: #fcc75a;
  }

  .has-video .hero-copy {
    display: contents;
    padding: 0;
    text-align: center;
  }

  .has-video .hero-title {
    order: 1;
    width: 100%;
    margin: 0 0 -120px;
    position: relative;
    z-index: 2;
    text-align: left;
  }

  .has-video .hero-video {
    order: 2;
    position: relative !important;
    inset: auto !important;
    display: block;
    /* Sale del contenedor móvil para ocupar una franja visual más amplia. */
    width: calc(100% + 134px);
    height: auto !important;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    object-position: center;
    background: #fcc75a;
    margin: 0 0 22px -83px;
  }

  .has-video .hero-title img {
    width: min(52vw, 180px);
    margin-inline: 0;
  }

  .has-video .intro {
    order: 3;
    margin: 0 0 20px;
    font-size: 16px;
    line-height: 1.35;
    text-align: center;
  }

  .has-video .cta-row {
    order: 4;
    justify-content: center;
    margin-bottom: 32px;
  }

  .has-video .cta-row .yellow {
    box-shadow: 0 5px 0 #e19d00, 0 8px 16px rgb(77 40 0 / .18);
  }

  /* Historia móvil: el contenido deja de conservar el grid horizontal de escritorio. */
  .how-it-works + .story {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
    gap: 22px;
    padding: 34px 22px 64px;
    overflow: hidden;
  }

  .story-intro {
    width: 100%;
    max-width: none;
  }

  .story-kicker {
    gap: 9px;
    margin-bottom: 16px;
    font-size: 19px;
  }

  .story-kicker b {
    flex-basis: 52px;
    width: 52px;
    height: 52px;
    font-size: 22px;
  }

  .story-kicker span {
    min-width: 0;
    padding: 6px 15px;
    font-size: 19px;
  }

  .story-intro h2 {
    font-size: 45px;
    line-height: .88;
  }

  .story-intro > p:not(.story-kicker) {
    margin-top: 17px;
    font-size: 16px;
    line-height: 1.3;
  }

  .story-dog-wrap {
    justify-self: center;
    width: min(72vw, 260px);
    aspect-ratio: 1 / 1.12;
  }

  .story-cause {
    justify-self: center;
    width: min(82vw, 290px);
  }

  .story-paw-one {
    top: 48%;
    left: 7%;
  }

  .story-paw-two {
    top: 61%;
    right: 6%;
  }

  .story-heart {
    bottom: 7%;
    left: 9%;
  }
}