/* Soma — landing page */
html{scroll-behavior:smooth}
section[id]{scroll-margin-top:84px}
body{margin:0;background:#F8F3EA}
a{color:#143D27}a:hover{color:#2E6B45}
.soma{font-family:'Outfit',system-ui,sans-serif;color:#1E2B22;background:#F8F3EA;overflow-x:clip;position:relative}
.soma *{box-sizing:border-box}
.serif{font-family:'Fraunces',Georgia,serif;font-optical-sizing:auto}
.hand{font-family:'Caveat',cursive}
.wrap{max-width:1200px;margin:0 auto;padding:0 32px}
.btn{display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:0 24px;border-radius:999px;font-weight:500;font-size:16px;text-decoration:none;transition:transform .25s cubic-bezier(.2,.8,.2,1),background .25s}
.btn:hover{transform:translateY(-2px)}
.btn-dark{background:#143D27;color:#F8F3EA}.btn-dark:hover{background:#1F5236;color:#F8F3EA}
.btn-light{background:transparent;color:#143D27;border:1.5px solid #143D27}.btn-light:hover{background:#143D27;color:#F8F3EA}
.btn-cream{background:#F8F3EA;color:#143D27}.btn-cream:hover{background:#fff;color:#143D27}
.nav-links a{text-decoration:none;font-size:15px;color:#2C3A30}
.nav-links a:hover{color:#143D27;text-decoration:underline;text-underline-offset:6px}
.card-lift{transition:translate .4s cubic-bezier(.2,.8,.2,1),box-shadow .4s}
.card-lift:hover{translate:0 -6px;box-shadow:0 24px 48px -24px rgba(20,61,39,.35)}
.float{animation:floaty 7s ease-in-out infinite}
.float.d2{animation-delay:-3.5s}
@keyframes floaty{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-14px) rotate(1.5deg)}}
.side-leaf{position:fixed;pointer-events:none;z-index:1;width:120px}
.sl-1{left:-34px;top:18vh}.sl-2{right:-30px;top:52vh;width:140px}.sl-3{left:-20px;top:74vh;width:90px}.sl-4{right:-24px;top:10vh;width:80px}
@supports (animation-timeline: scroll()){
 .sl-1{animation:sway-a linear both;animation-timeline:scroll(root)}
 .sl-2{animation:sway-b linear both;animation-timeline:scroll(root)}
 .sl-3{animation:sway-c linear both;animation-timeline:scroll(root)}
 .sl-4{animation:sway-d linear both;animation-timeline:scroll(root)}
}
@keyframes sway-a{0%{transform:rotate(28deg) translateY(0)}50%{transform:rotate(-6deg) translateY(-60px)}100%{transform:rotate(32deg) translateY(-140px)}}
@keyframes sway-b{0%{transform:rotate(-150deg) translateY(0)}50%{transform:rotate(-190deg) translateY(80px)}100%{transform:rotate(-160deg) translateY(-120px)}}
@keyframes sway-c{0%{transform:rotate(60deg)}100%{transform:rotate(-20deg) translateY(-220px)}}
@keyframes sway-d{0%{transform:rotate(-120deg)}100%{transform:rotate(-200deg) translateY(260px)}}
.soma{--e:cubic-bezier(.2,.8,.2,1)}
.rv,.rv-left,.rv-right{opacity:1}
@supports (animation-timeline: view()){
 .rv{animation:rise linear both;animation-timeline:view();animation-range:entry 0% entry 50%}
 .rv-left{animation:from-left linear both;animation-timeline:view();animation-range:entry 0% entry 55%}
 .rv-right{animation:from-right linear both;animation-timeline:view();animation-range:entry 5% entry 60%}
 .num-row.rv{animation-name:from-right}
 .g3>.rv:nth-child(3n+2){animation-range:entry 8% entry 58%}
 .g3>.rv:nth-child(3n){animation-range:entry 16% entry 66%}
 .band>span{animation:rise linear both;animation-timeline:view();animation-range:entry 0% entry 100%}
 .band>span:nth-child(2){animation-range:entry 15% entry 100%}
 .band>span:nth-child(3){animation-range:entry 30% entry 100%}
 .band>span:nth-child(4){animation-range:entry 45% entry 100%}
 .reveal-img{animation:unclip linear both;animation-timeline:view();animation-range:entry 0% cover 35%}
 .rv-scale{animation:zoomin linear both;animation-timeline:view();animation-range:entry 0% cover 40%}
 .leaf-drift{animation:drift linear both;animation-timeline:view();animation-range:cover 0% cover 100%}
 .leaf-drift-r{animation:drift-r linear both;animation-timeline:view();animation-range:cover 0% cover 100%}
}
@keyframes rise{from{opacity:0;transform:translateY(48px);filter:blur(6px)}to{opacity:1;transform:none;filter:none}}
@keyframes from-left{from{opacity:0;transform:translateX(-80px) rotate(-1.5deg)}to{opacity:1;transform:none}}
@keyframes from-right{from{opacity:0;transform:translateX(80px) rotate(1.5deg)}to{opacity:1;transform:none}}
@keyframes unclip{from{clip-path:inset(16% 10% 16% 10% round 28px);transform:scale(1.12)}to{clip-path:inset(0 0 0 0 round 0);transform:none}}
@keyframes zoomin{from{opacity:.2;transform:scale(.92)}to{opacity:1;transform:none}}
@keyframes drift{from{transform:translate(-50px,80px) rotate(-30deg)}to{transform:translate(20px,-80px) rotate(10deg)}}
@keyframes drift-r{from{transform:translate(50px,80px) rotate(200deg)}to{transform:translate(-20px,-80px) rotate(160deg)}}
.io .rv,.io .rv-left,.io .rv-right,.io .reveal-img{transition:opacity .9s var(--e),transform .9s var(--e),filter .9s var(--e),clip-path 1.1s var(--e)}
.io .rv{opacity:0;transform:translateY(40px);filter:blur(6px)}
.io .num-row.rv,.io .rv-right{opacity:0;transform:translateX(70px);filter:none}
.io .rv-left{opacity:0;transform:translateX(-70px)}
.io .reveal-img{clip-path:inset(16% 10% 16% 10% round 28px);transform:scale(1.12)}
.io .in{opacity:1!important;transform:none!important;filter:none!important;clip-path:inset(0 0 0 0)!important}
.io .g3>:nth-child(3n+2),.io .g2>:nth-child(2){transition-delay:.12s}
.io .g3>:nth-child(3n){transition-delay:.24s}
.motion-off .rv,.motion-off .rv-left,.motion-off .rv-right,.motion-off .reveal-img,.motion-off .band>span,.motion-off .rv-scale,.motion-off .leaf-drift,.motion-off .leaf-drift-r,.motion-off .side-leaf,.motion-off .float{animation:none!important;opacity:1!important;transform:none!important;filter:none!important;clip-path:none!important}
@media (prefers-reduced-motion: reduce){.rv,.rv-left,.rv-right,.reveal-img,.band>span,.rv-scale,.leaf-drift,.leaf-drift-r,.side-leaf,.float{animation:none!important;opacity:1!important;transform:none!important;filter:none!important;clip-path:none!important}}
.g2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px}
.g3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:64px;align-items:center}
.sticky-col{position:sticky;top:96px}
.num-row{display:grid;grid-template-columns:72px minmax(0,1fr);gap:20px;padding:28px 0;border-top:1px solid #D7DDCB}
@media (max-width:1000px){
 .side-leaf{display:none}
 .split{grid-template-columns:minmax(0,1fr);gap:40px}
 .sticky-col{position:static}
 .sticky-col .rv-scale{max-width:560px!important}
 .g3{grid-template-columns:repeat(2,minmax(0,1fr))}
 .hero-visual{width:100%;max-width:560px;margin:0 auto}
 .hero-title{font-size:68px!important}
}
@media (max-width:760px){
 .nav-links{display:none!important}
 .g2,.g3{grid-template-columns:minmax(0,1fr)}
 .wrap{padding:0 16px}
 section{padding-top:72px!important;padding-bottom:72px!important}
 .hero-title{font-size:50px!important}
 .sec-title{font-size:36px!important}
 .num-row{grid-template-columns:48px minmax(0,1fr)}
 .hero-visual{min-height:430px!important}
 .hv-bolsa{left:4%!important;top:36px!important;width:60%!important;height:auto!important;aspect-ratio:300/398}
 .hv-serum{right:3%!important;top:100px!important;width:30%!important;height:270px!important;border-width:4px!important}
 .sticky-col img{height:400px!important}
 .serum-visual{flex-direction:column;min-height:0!important}
 .sv-bottle{width:140px!important;height:320px!important}
 .sv-ba{width:100%!important;max-width:340px;height:auto!important}
 .pc-serum{height:auto!important;padding:20px 16px!important}
 .pc-bottle{width:90px!important;height:210px!important}
 .pc-ba{width:170px!important;height:auto!important}
 .reveal-img{height:260px!important}
 .leaf-drift,.leaf-drift-r{width:44px!important;opacity:.45}
 .band{justify-content:flex-start!important}
}