/* Matías Sanson — estilos compartidos */
@font-face{font-family:'Bricolage Grotesque';font-weight:600;font-display:swap;src:url(../fonts/bricolage-600.woff2) format('woff2')}
@font-face{font-family:'Bricolage Grotesque';font-weight:800;font-display:swap;src:url(../fonts/bricolage-800.woff2) format('woff2')}
@font-face{font-family:'Manrope';font-weight:400;font-display:swap;src:url(../fonts/manrope-400.woff2) format('woff2')}
@font-face{font-family:'Manrope';font-weight:500;font-display:swap;src:url(../fonts/manrope-500.woff2) format('woff2')}
@font-face{font-family:'Manrope';font-weight:600;font-display:swap;src:url(../fonts/manrope-600.woff2) format('woff2')}
@font-face{font-family:'Manrope';font-weight:700;font-display:swap;src:url(../fonts/manrope-700.woff2) format('woff2')}
@font-face{font-family:'Manrope';font-weight:800;font-display:swap;src:url(../fonts/manrope-800.woff2) format('woff2')}
@font-face{font-family:'JetBrains Mono';font-weight:400;font-display:swap;src:url(../fonts/jetbrains-400.woff2) format('woff2')}
@font-face{font-family:'JetBrains Mono';font-weight:500;font-display:swap;src:url(../fonts/jetbrains-500.woff2) format('woff2')}

html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:#F3F1EA;color:#121212}
img{max-width:100%}
a{color:#121212}a:hover{color:#4E6B00}
a:focus-visible,button:focus-visible{outline:3px solid #4E6B00;outline-offset:3px;border-radius:6px}
[id]{scroll-margin-top:90px}

/* Menú */
.burger{display:none}
@media (max-width: 860px){.navlinks{display:none !important}.burger{display:inline-flex !important}}
.mobile-menu{border-top:1px solid #DEDAD0;background:#F3F1EA;padding:8px 24px 20px;display:flex;flex-direction:column;font-family:'Manrope',sans-serif}
.mobile-menu[hidden]{display:none}
.mobile-menu a{text-decoration:none;font-weight:700;font-size:18px;padding:14px 0;border-bottom:1px solid #EAE7DD}
.mobile-menu a.mm-cta{margin-top:14px;border:0;text-align:center;background:#C8F04A;border-radius:999px;padding:16px;font-weight:800;box-shadow:inset 0 0 0 1.5px #121212}
@media (min-width: 861px){.mobile-menu{display:none !important}}

/* Animación de scroll (home) */
@keyframes ms-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@keyframes ms-wheel{0%{transform:translateY(0);opacity:1}80%{transform:translateY(9px);opacity:0}100%{transform:translateY(0);opacity:0}}
@keyframes ms-bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(6px)}}
.story{--p:0;position:relative}
.scene{position:sticky;top:0}
.stage{position:relative;width:600px;height:460px;flex:none}
@media (max-width: 680px){.stage{transform:scale(.58);margin:-97px -126px}.slot{height:180px !important}}
@media (max-height: 800px) and (min-width: 681px){.stage{transform:scale(.76);margin:-55px 0}}
.lk{position:absolute;left:50%;top:205px;--t:clamp(0, calc((var(--p) - .1 - var(--d)) / .3), 1);transform:translate(calc(-50% + var(--x) * (1 - var(--t)) * 1px), calc(-50% + var(--y) * (1 - var(--t)) * 1px)) scale(calc(1 - .7 * var(--t)));opacity:calc(1 - clamp(0, calc((var(--t) - .75) * 4), 1))}
.bob{animation:ms-bob 3s ease-in-out infinite}
.lk:nth-child(3n+1) .bob{animation-delay:-1s}
.lk:nth-child(3n+2) .bob{animation-delay:-2s}
.glow{opacity:calc(.7 * min(clamp(0, calc((var(--p) - .12) * 5), 1), clamp(0, calc((.85 - var(--p)) * 5), 1)))}
.gear{transform:rotate(calc(var(--p) * 900deg))}
.sale{position:absolute;left:50%;top:0;--t:clamp(0, calc((var(--p) - .5 - var(--i) * .1) / .12), 1);transform:translate(-50%, calc((250 + (var(--fy) - 250) * var(--t)) * 1px)) scale(calc(.6 + .4 * var(--t)));opacity:var(--t)}
.ph-a{opacity:clamp(0, calc((.3 - var(--p)) * 12), 1)}
.ph-b{opacity:min(clamp(0, calc((var(--p) - .3) * 12), 1), clamp(0, calc((.56 - var(--p)) * 12), 1))}
.ph-c{opacity:clamp(0, calc((var(--p) - .56) * 12), 1)}
.hint{opacity:clamp(0, calc((.12 - var(--p)) * 10), 1)}
.ctas{opacity:clamp(0, calc((var(--p) - .8) * 8), 1);pointer-events:none}
.story[data-done="1"] .ctas{pointer-events:auto}
.bar{transform:scaleX(var(--p));transform-origin:left center}
.wheel{animation:ms-wheel 1.6s ease-in-out infinite}
.chev{animation:ms-bounce 1.4s ease-in-out infinite}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}.bob,.wheel,.chev{animation:none}}

/* Botón flotante en celular */
@media (max-width: 480px){.wa-float{padding:14px 16px !important;font-size:14px !important;right:14px !important;bottom:14px !important}}

/* Ajustes celular */
span[style*="background: #C8F04A"]{-webkit-box-decoration-break:clone;box-decoration-break:clone}
@media (max-width: 680px){.wa-float{transition:opacity .3s, transform .3s}.story-active .wa-float{opacity:0;transform:translateY(20px);pointer-events:none}}