:root{--progress:0}*{box-sizing:border-box}html{scroll-behavior:smooth}html.scroll-locked,html.scroll-locked body{overflow:hidden}body{margin:0;background:var(--color-background);color:var(--color-foreground);font-family:var(--primitive-fontFamily-display);overflow-x:hidden}a{color:inherit;text-decoration:none}button{font:inherit}.loader{position:fixed;inset:0;z-index:1000;background:var(--color-background);display:grid;place-items:center;transition:opacity var(--primitive-duration-slow),visibility var(--primitive-duration-slow)}.loader-mark{position:relative;height:72px;aspect-ratio:216/156}.loader-mark img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:.16}.loader-sweep{position:absolute;inset:0;-webkit-mask:url(../brand/verdepower-mark.png) center/contain no-repeat;mask:url(../brand/verdepower-mark.png) center/contain no-repeat;background:linear-gradient(102deg,transparent 36%,var(--color-foreground) 47%,var(--color-primary) 53%,var(--color-accent) 58%,transparent 68%);background-size:280% 100%;animation:sweep 2.1s ease-in-out infinite}.loader-meter{position:absolute;left:0;right:0;bottom:0}.loader-labels{display:flex;justify-content:space-between;padding:0 var(--primitive-spacing-4) var(--primitive-spacing-2);font-family:var(--primitive-fontFamily-mono);font-size:var(--primitive-fontSize-xs);letter-spacing:var(--primitive-letterSpacing-label-wide);color:var(--color-foreground-subtle)}.loader-percent{color:var(--color-foreground-muted)}.loader-track{height:3px;background:var(--color-border-subtle)}.loader-track i{display:block;height:100%;width:4%;background:linear-gradient(90deg,var(--progress-fill-start),var(--progress-fill-end));transition:width .3s cubic-bezier(.25,.9,.3,1)}@keyframes sweep{0%{background-position:-160% 0}100%{background-position:260% 0}}@media (prefers-reduced-motion:reduce){.loader-sweep{animation:none;background:var(--color-foreground)}.loader-track i{transition:none}}.loader.hidden{opacity:0;visibility:hidden}.site-header{height:76px;padding:0 3vw;position:fixed;z-index:50;top:0;left:0;width:100%;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;border-bottom:1px solid #ffffff2b;background:linear-gradient(#050607d6,transparent);transition:background .3s}.site-header.scrolled{background:#050607e8;backdrop-filter:blur(16px)}.brand{display:inline-flex;align-items:center}.brand-mark{height:38px;width:auto;display:block}.site-header nav{display:flex;gap:34px;font:13px var(--primitive-fontFamily-mono);text-transform:uppercase}.site-header nav a{position:relative}.site-header nav a:after{content:"";height:1px;width:0;background:var(--color-accent);position:absolute;left:0;bottom:-6px;transition:.25s}.site-header nav a:hover:after{width:100%}.header-actions{justify-self:end;display:flex;align-items:center;gap:16px}.header-login{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;flex:none;border-radius:50%;border:1px solid #ffffff6b;background:transparent;color:var(--color-foreground);cursor:pointer;padding:0;transition:border-color .25s ease,color .25s ease}.header-login svg{width:17px;height:17px}.header-login:hover{border-color:var(--color-accent);color:var(--color-accent)}.menu-button{display:none}.nav-item--mega{position:relative;display:inline-flex;align-items:center;gap:3px}.nav-mega-toggle{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;padding:0;border:0;background:none;color:inherit;cursor:pointer}.nav-mega-toggle svg{width:11px;height:11px;transition:transform .25s ease}.nav-mega{position:absolute;top:100%;padding-top:20px;left:50%;transform:translateX(-50%);display:grid;grid-template-columns:repeat(5,1fr);gap:16px;width:560px;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .2s ease}.nav-mega-panel{grid-column:1/-1;display:grid;grid-template-columns:repeat(5,1fr);gap:16px;padding:22px;background:#0b0d0ef2;backdrop-filter:blur(16px);border:1px solid #ffffff1f;border-radius:16px}.nav-item--mega:hover .nav-mega,.nav-item--mega:focus-within .nav-mega{opacity:1;visibility:visible;pointer-events:auto}.nav-item--mega:hover .nav-mega-toggle svg{transform:rotate(180deg)}.nav-mega a{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;font-size:9px;letter-spacing:normal;text-transform:none;color:var(--color-foreground-muted)}.nav-mega a:hover{color:var(--color-accent)}.nav-mega a:after{display:none}.nav-mega img{width:100%;max-width:60px;height:60px;object-fit:contain}
.intro{height:100vh;height:100svh;min-height:680px;position:relative;overflow:hidden}.intro-media{position:absolute;inset:0;background:var(--color-background-deep) url(../media/intro-5-productos-desktop.jpg) center center/cover no-repeat;transform:scale(1.04);animation:breathe 9s ease-in-out infinite alternate}.intro-products{display:none}@keyframes breathe{to{transform:scale(1.08)}}.intro-shade{position:absolute;inset:0;background:linear-gradient(90deg,#020304f2 0,#020304b8 30%,transparent 68%),linear-gradient(0deg,var(--color-background) 0,transparent 24%);opacity:1;transition:opacity 1s ease}.intro-shade.intro-shade--hidden{opacity:0}.intro-copy{position:absolute;z-index:2;left:7vw;top:50%;transform:translateY(-45%);max-width:650px}.intro-copy .eyebrow{color:var(--color-foreground)}.eyebrow{font:10px var(--primitive-fontFamily-mono);letter-spacing:.12em;color:var(--color-accent)}.intro h1{font-size:clamp(44px,6.8vw,100px);line-height:.82;letter-spacing:-.07em;margin:25px 0 36px;font-weight:900}.intro h1 span{color:var(--color-accent)}.intro-copy>p:not(.eyebrow){max-width:370px;color:var(--color-foreground);font-size:16px;line-height:1.45}.intro-copy-highlight{color:var(--color-accent)}.pill{display:inline-flex;align-items:center;gap:22px;margin-top:26px;border-radius:var(--button-outline-radius);background:transparent;border:1px solid #ffffffb0;color:var(--color-foreground);padding:8px 8px 8px 28px;font:11px var(--primitive-fontFamily-mono);letter-spacing:.03em;transition:color .25s ease,border-color .25s ease}.nav-label--desktop{display:none}@media(min-width:801px){.nav-label--mobile{display:none}.nav-label--desktop{display:inline}.intro-shade{background:linear-gradient(90deg,#020304f2 0,#020304b8 30%,transparent 68%),linear-gradient(0deg,#050607d9 0,transparent 32%)}.intro-copy{max-width:480px}.intro h1{font-size:clamp(38px,4.6vw,64px);letter-spacing:-.04em;margin:16px 0 22px;font-weight:800}.intro-copy>p:not(.eyebrow){font-size:15px;max-width:320px}}.pill b{display:grid;place-items:center;width:38px;height:38px;flex:none;border-radius:50%;border:1px solid #ffffffb0;font-size:15px;font-weight:400;transition:border-color .25s ease}.pill:hover{color:var(--color-accent);border-color:var(--color-accent)}.pill:hover b{border-color:var(--color-accent)}.intro-note{position:absolute;right:3vw;bottom:28px;font:9px var(--primitive-fontFamily-mono);color:var(--color-foreground-muted)}.intro-note span{color:var(--color-accent);margin-right:18px}
.intro-bridge{position:fixed;inset:0;z-index:1;overflow:hidden;display:grid;place-items:center end;pointer-events:none;opacity:1;transition:opacity .25s ease}.intro-bridge.past{opacity:0;visibility:hidden}.intro-bridge.intro-bridge--pending{opacity:0;visibility:hidden;transition:opacity 1s ease}.intro-bridge-canvas{position:absolute;inset:0;width:100%;height:100%;display:block}.intro-bridge-shade{position:absolute;inset:0;background:linear-gradient(90deg,#020304df 0,#020304a0 28%,transparent 65%,#02030475),linear-gradient(0deg,#020304d9 0,transparent 38%,#0203044d 100%);opacity:1;transition:opacity 1s ease}.intro-bridge-shade.intro-shade--hidden{opacity:0}.intro-bridge-label{position:fixed;z-index:1;top:50%;right:7vw;transform:translateY(calc(-50% + 60vh));text-align:right;font-size:clamp(32px,6vw,72px);line-height:.92;letter-spacing:-.04em;font-weight:900;pointer-events:none}.intro-bridge-label span{color:var(--color-accent)}
/* iOS Safari: inset:0 on a fixed box follows the URL bar as it hides/shows, resizing the bridge canvas mid-scroll. A fixed height (100lvh = viewport with the bar hidden) keeps it still. */.intro-bridge{bottom:auto;height:100vh;height:100lvh}
.intro-products{position:absolute;inset:0;z-index:1;pointer-events:none}.float-p{--rot:0deg;position:absolute;pointer-events:auto;animation:floatY 6s ease-in-out infinite;transform:rotate(var(--rot))}.float-p img{display:block;width:auto;height:100%;object-fit:contain;filter:drop-shadow(var(--primitive-shadow-float));transition:transform .4s cubic-bezier(.34,1.56,.64,1)}.float-p:hover img{transform:scale(1.18) rotate(calc(var(--rot) * -1))}@keyframes floatY{0%,100%{transform:rotate(var(--rot)) translateY(0)}50%{transform:rotate(var(--rot)) translateY(-18px)}}.float-p1{left:63%;top:10%;height:30vh;--rot:-8deg;animation-delay:0s}.float-p2{left:82%;top:5%;height:22vh;--rot:5deg;animation-delay:.8s}.float-p3{left:85%;top:50%;height:30vh;--rot:4deg;animation-delay:1.6s}.float-p4{left:65%;top:60%;height:22vh;--rot:-6deg;animation-delay:2.4s}.float-p5{left:73%;top:31%;height:17vh;--rot:8deg;animation-delay:3.2s}
.story{height:600vh;position:relative;background:var(--color-background-deep)}.story-sticky{height:100vh;height:100svh;min-height:650px;position:sticky;top:0;overflow:visible}.panorama-wrap{position:absolute;inset:0;overflow:hidden}.panorama{position:absolute;inset:0;width:100%;height:100%;display:block;transition:opacity .5s ease}.story-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center top;opacity:0;transition:opacity .5s ease;pointer-events:none}.story.video-act .panorama{opacity:0}.story.video-act .story-video{opacity:1}.story-vignette.spray-in{opacity:0}.story-vignette{position:absolute;inset:0;background:linear-gradient(90deg,#020304df 0,transparent 33%,transparent 72%,#02030475),linear-gradient(0deg,#020304d9 0,transparent 38%,#0203044d 100%);opacity:1;transition:opacity .55s ease;pointer-events:none}.story-top{display:none}.story-percent{font-size:12px;color:var(--color-accent)}.story-scroll-cue{position:absolute;z-index:3;top:105px;left:4vw;display:flex;flex-direction:column;align-items:flex-start;gap:10px;font:9px var(--primitive-fontFamily-mono);color:var(--color-foreground-muted);opacity:clamp(0,calc(1 - var(--progress) * 12),1);transition:opacity .2s linear;pointer-events:none}.story-scroll-cue svg{display:block;width:20px;height:20px;animation:scrollCue 1.6s ease-in-out infinite}@keyframes scrollCue{0%,100%{transform:translateY(0)}50%{transform:translateY(6px)}}.progress{position:absolute;z-index:4;right:4vw;bottom:6vh;width:min(430px,52vw);display:grid;grid-template-columns:repeat(3,1fr)}.progress-line{position:absolute;top:-15px;left:0;width:100%;height:1px;background:#ffffff45}.progress-line i{display:block;width:calc(var(--progress)*100%);height:2px;background:linear-gradient(90deg,var(--color-primary),var(--color-accent))}.progress button{border:0;background:none;color:var(--color-foreground-subtle);text-align:left;padding:0;font:9px var(--primitive-fontFamily-mono);cursor:pointer}.progress button:last-child{text-align:right}.progress button:nth-child(3){text-align:center}.progress button.active{color:var(--color-foreground)}
.products{background:var(--color-surface-alt);color:var(--color-foreground-on-accent);padding:130px 5vw 100px}.products .eyebrow{color:var(--color-primary)}.products-head .eyebrow{font-size:14px}.products-head{display:grid;grid-template-columns:1fr 2.2fr 1fr;align-items:end;gap:40px;margin-bottom:90px}.products-head h2{font-size:clamp(34px,4vw,58px);line-height:.92;letter-spacing:-.04em;margin:0}.products-head>p:last-child{max-width:360px;font-size:19px;line-height:1.45;color:var(--color-foreground-on-alt-muted)}.product-list{display:flex;flex-direction:column;background:var(--color-border-on-alt);gap:1px;border-top:1px solid var(--color-border-on-alt);border-bottom:1px solid var(--color-border-on-alt)}.product-card{background:var(--color-surface-alt);display:flex;align-items:center;gap:6vw;padding:70px 4vw;overflow:hidden;position:relative}.product-side-photo{display:none}@media(min-width:1300px){.product-side-photo{display:block;flex:0 0 240px;align-self:stretch;overflow:hidden}.product-side-photo picture{display:block;width:100%;height:100%}.product-side-photo img{width:100%;height:100%;object-fit:cover;object-position:center 20%;-webkit-mask-image:linear-gradient(to right,transparent,#000 8%),linear-gradient(to bottom,transparent,#000 4%,#000 96%,transparent);-webkit-mask-composite:source-in;mask-image:linear-gradient(to right,transparent,#000 8%),linear-gradient(to bottom,transparent,#000 4%,#000 96%,transparent);mask-composite:intersect}.product-side-photo--left img{-webkit-mask-image:linear-gradient(to left,transparent,#000 8%),linear-gradient(to bottom,transparent,#000 4%,#000 96%,transparent);mask-image:linear-gradient(to left,transparent,#000 8%),linear-gradient(to bottom,transparent,#000 4%,#000 96%,transparent)}}.product-card:nth-child(even){flex-direction:row-reverse}.product-media{flex:0 0 32%;position:relative;display:flex;justify-content:center}.product-media img{max-width:100%;max-height:420px;width:auto;object-fit:contain;transition:transform .5s ease}.product-media::after{content:"";position:absolute;left:50%;bottom:-10px;width:62%;height:34px;transform:translateX(-50%);background:radial-gradient(ellipse at center,rgba(0,0,0,.2),rgba(0,0,0,0) 70%);z-index:-1;pointer-events:none}.product-card:hover .product-media img{transform:translateY(-6px)}.product-seal{position:absolute;top:0;right:0;width:150px;height:150px;transform:translate(30%,-20%) rotate(-10deg);pointer-events:none;z-index:2;animation:seal-pulse 3s ease-in-out infinite}.product-seal svg{width:100%;height:100%}@keyframes seal-pulse{0%,100%{transform:translate(30%,-20%) rotate(-10deg) scale(1)}50%{transform:translate(30%,-20%) rotate(-10deg) scale(1.05)}}@media(max-width:800px){.product-seal{width:112px;height:112px;transform:translate(-5%,0%) rotate(-10deg)}@keyframes seal-pulse{0%,100%{transform:translate(-5%,0%) rotate(-10deg) scale(1)}50%{transform:translate(-5%,0%) rotate(-10deg) scale(1.05)}}}.product-copy{flex:1;position:relative;max-width:520px}.product-index{position:absolute;top:-56px;right:0;font:800 9vw/1 Arial;color:#00000010;pointer-events:none}.product-copy .eyebrow{display:block;margin:0 0 14px}.product-copy h3{font-size:clamp(34px,4vw,58px);line-height:.9;letter-spacing:-.055em;margin:0 0 16px}.product-copy h3 span{color:var(--color-primary)}.product-desc{font-size:16px;line-height:1.5;color:var(--color-foreground-on-alt);margin:0 0 22px;max-width:440px}.feature-cta{display:inline-flex;align-items:center;gap:8px;background:var(--color-primary);color:var(--color-foreground);padding:16px 30px;border-radius:var(--button-primary-radius);font:11px var(--primitive-fontFamily-mono);letter-spacing:.02em;margin-bottom:34px;transition:transform .25s ease,background .25s ease,color .25s ease}.feature-cta:hover{transform:translateY(-3px);background:var(--color-accent);color:var(--color-foreground-on-accent)}.product-card .feature-cta{position:relative;overflow:hidden;isolation:isolate;padding:21px 40px;font-size:15px;gap:10px;min-width:280px;white-space:nowrap;justify-content:center;animation:cta-pulse 2.6s ease-in-out infinite,cta-bob 1.6s ease-in-out infinite}.product-card .feature-cta:hover{animation:none}.product-card .feature-cta::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 40%,#ffffff59 50%,transparent 60%);background-size:250% 100%;background-position:150% 0;animation:cta-sweep 3.4s ease-in-out infinite;pointer-events:none}.product-card .feature-cta:hover::after{animation-play-state:paused;background-position:-50% 0}.cta-arrow{display:inline-block;transition:transform .25s ease,color .25s ease}.product-card .feature-cta .cta-arrow{color:var(--color-accent)}.product-card .feature-cta:hover .cta-arrow{transform:translate(4px,-4px);color:var(--color-foreground-on-accent)}@keyframes cta-pulse{0%,100%{box-shadow:0 0 0 0 #B6FF2859}50%{box-shadow:0 0 0 9px #B6FF2800}}@keyframes cta-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}@keyframes cta-sweep{0%,25%{background-position:150% 0}55%,100%{background-position:-50% 0}}@media(min-width:801px){.act .feature-cta{position:relative;overflow:hidden;isolation:isolate;padding:21px 40px;font-size:15px;gap:10px;animation:cta-pulse 2.6s ease-in-out infinite,cta-bob 1.6s ease-in-out infinite}.act .feature-cta:hover{animation:none}.act .feature-cta::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 40%,#ffffff59 50%,transparent 60%);background-size:250% 100%;background-position:150% 0;animation:cta-sweep 3.4s ease-in-out infinite;pointer-events:none}.act .feature-cta:hover::after{animation-play-state:paused;background-position:-50% 0}.act .feature-cta .cta-arrow{color:var(--color-accent)}.act .feature-cta:hover .cta-arrow{transform:translate(4px,-4px);color:var(--color-foreground-on-accent)}}.feature-stats{display:flex;flex-wrap:wrap;gap:28px 34px;padding-top:24px;border-top:1px solid #9b9c9550;max-width:440px}.feature-stats div{display:flex;flex-direction:column}.feature-stats b{font-size:20px;letter-spacing:-.02em;color:var(--color-foreground-on-accent)}.feature-stats span{margin-top:4px;font:9px var(--primitive-fontFamily-mono);color:var(--color-foreground-on-alt-subtle);letter-spacing:.03em}
.reveal{opacity:0}
.wholesale{position:relative;z-index:0;background:var(--color-background);padding:130px 6vw 0;border-top:1px solid #ffffff1f}.wholesale::before{content:"";position:absolute;z-index:-1;inset:0;background:url(../media/celulas-pattern.png) repeat;background-size:420px auto;opacity:.12;mix-blend-mode:screen;mask-image:linear-gradient(180deg,transparent,#000 14%,#000 80%,transparent);-webkit-mask-image:linear-gradient(180deg,transparent,#000 14%,#000 80%,transparent);pointer-events:none}
.wholesale-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:6vw;align-items:start;max-width:1560px;margin:0 auto}
.wholesale h2{font-size:clamp(58px,7.6vw,128px);line-height:.78;letter-spacing:-.085em;font-weight:900;margin:26px 0 0;display:flex;flex-wrap:wrap;align-items:center;gap:.12em .28em}
.wholesale-logo{display:block;height:1.42em;width:auto}
.wholesale-lead{max-width:430px;color:var(--color-foreground-muted);font-size:16px;line-height:1.5;margin:34px 0 0;text-wrap:pretty}
.wholesale-chips{display:flex;flex-wrap:wrap;gap:10px 12px;margin-top:40px}
.wholesale-chips span{padding:9px 16px;border:1px solid var(--color-border-default);border-radius:var(--chip-radius);font:10px var(--primitive-fontFamily-mono);color:var(--color-foreground-muted)}
.wholesale-benefits{margin-top:64px;border-top:1px solid #ffffff26}
.wholesale-benefit{display:grid;grid-template-columns:46px 1fr;gap:24px;align-items:start;padding:26px 0;border-bottom:1px solid #ffffff26}
.wholesale-benefit>span{font:10px var(--primitive-fontFamily-mono);color:var(--color-accent)}
.wholesale-benefit h3{font-size:24px;letter-spacing:-.045em;margin:0 0 8px;font-weight:700}
.wholesale-benefit p{margin:0;color:var(--color-foreground-subtle);font-size:15px;line-height:1.5;max-width:520px}
.wholesale-form{border:1px solid var(--color-border-default);padding:44px 40px;background:var(--color-background-deep);position:sticky;top:108px}
.wholesale-form h3{font-size:34px;line-height:.9;letter-spacing:-.06em;margin:12px 0 10px;font-weight:900}
.wholesale-form-note{margin:0 0 30px;color:var(--color-foreground-subtle);font-size:14px;line-height:1.5}
.wholesale-fields{display:grid;gap:22px}
.wholesale-fields label{display:grid;gap:8px;min-width:0}
.wholesale-fields label>span{font:9px var(--primitive-fontFamily-mono);letter-spacing:.08em;color:var(--color-foreground-muted)}
.wholesale-row{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.wholesale-fields input,.wholesale-fields select{background:transparent;border:0;border-bottom:1px solid var(--color-border-default);color:var(--color-foreground);font:15px var(--primitive-fontFamily-display);padding:8px 0;outline:none;width:100%;border-radius:0}
.wholesale-fields select{appearance:none;cursor:pointer}
.wholesale-fields select option{background:var(--color-background);color:var(--color-foreground)}
.wholesale-fields input::placeholder{color:var(--color-foreground-on-alt-muted)}
.wholesale-fields input:focus,.wholesale-fields select:focus{border-bottom-color:var(--color-accent)}
.wholesale-fields input:invalid.touched{border-bottom-color:#ff6b4a}
.wholesale-submit{margin-top:34px;width:100%;justify-content:center;border:0;cursor:pointer;margin-bottom:0}
.wholesale-alt{margin-top:20px;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.wholesale-alt span{font:9px var(--primitive-fontFamily-mono);color:var(--color-foreground-on-alt-muted)}
.wholesale-alt a{font:10px var(--primitive-fontFamily-mono);color:var(--color-accent);border-bottom:1px solid var(--color-accent);padding-bottom:3px}
.wholesale-legal{margin:26px 0 0;font:9px var(--primitive-fontFamily-mono);color:var(--color-foreground-on-alt-muted);line-height:1.7}
.wholesale-facts{max-width:1560px;margin:96px auto 0;padding:30px 0 110px;border-top:1px solid #ffffff26;display:grid;grid-template-columns:repeat(4,1fr);gap:30px;font:10px var(--primitive-fontFamily-mono)}
.wholesale-facts b{display:block;color:var(--color-foreground);font-size:13px;letter-spacing:.02em;margin-bottom:8px}
.wholesale-facts span{color:var(--color-foreground-subtle)}
@media(max-width:800px){.site-header{grid-template-columns:1fr auto auto}.site-header nav{display:none;position:absolute;top:76px;left:0;width:100%;background:var(--color-background);padding:35px 7vw;flex-direction:column;font-size:14px}.site-header nav.open{display:flex}.menu-button{display:block;order:3;border:0;background:transparent;color:var(--color-foreground);font:10px var(--primitive-fontFamily-mono)}.header-actions{order:2}.nav-item--mega{flex-direction:column;align-items:flex-start;width:100%}.nav-mega-toggle{width:34px;height:34px}.nav-mega-toggle svg{width:14px;height:14px}.nav-mega{position:static;transform:none;width:100%;padding-top:0;opacity:1;visibility:visible;pointer-events:auto;display:none}.nav-mega-panel{grid-template-columns:repeat(3,1fr);gap:22px 14px;padding:22px 0 4px;background:none;border:0}.nav-mega.open{display:grid}.nav-mega-toggle[aria-expanded="true"] svg{transform:rotate(180deg)}.intro-copy{left:6vw}.intro-products{display:none}.intro-media{background-image:url(../media/intro-5-productos-mobile.jpg)}.intro h1{font-size:76px}.intro-shade{background:linear-gradient(0deg,var(--color-background) 0,transparent 22%),#020304a3}.progress{left:6vw;right:6vw;width:auto;bottom:7vh}.products{padding:90px 18px 50px}.products-head{grid-template-columns:1fr;margin-bottom:55px}.products-head h2{font-size:clamp(30px,9vw,42px)}.product-card,.product-card:nth-child(even){flex-direction:column;align-items:flex-start;gap:28px;padding:46px 22px;text-align:left}.product-desc{text-align:justify}.product-media{flex:none;width:100%}.product-media img{max-height:300px}.product-copy{max-width:none}.product-index{font-size:26vw;top:-9vw}.feature-stats{gap:22px 30px}.feature-stats--two-rows{column-gap:12px;row-gap:0}.feature-stats--two-rows::after{content:"";flex-basis:100%;order:1}.feature-stats--two-rows>:nth-child(n+4){order:2;margin-top:22px}.feature-stats--two-rows b{font-size:min(20px,calc((100vw - 96px)/16))}.product-card .feature-cta{align-self:center}.wholesale{padding:90px 22px 0}.wholesale-grid{grid-template-columns:1fr;gap:56px}.wholesale h2{font-size:56px}.wholesale-form{position:static;padding:32px 24px}.wholesale-row{grid-template-columns:1fr}.wholesale-facts{grid-template-columns:1fr 1fr;gap:26px;margin-top:64px;padding-bottom:70px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.intro-media{animation:none}.reveal{opacity:1!important;transform:none!important}.product-card .feature-cta,.act .feature-cta{animation:none;box-shadow:none}.product-card .feature-cta::after,.act .feature-cta::after{display:none}.cta-arrow{transition:none}}

/* === Story: relato de escritorio y movil (metraje de producto) ===
   Cuatro actos en ambos breakpoints: sellado / destape / gatillo / alivio. El cuarto
   acto lo resuelve un clip real (.story-video) en vez de la secuencia de frames — ver
   .video-act mas arriba y el toggle en script.js. En movil el object-fit:cover recorta
   el clip (horizontal) muy de cerca sobre una pantalla angosta; el cliente vio ese
   recorte y le gusto, asi que queda igual en los dos breakpoints. */
.story-act{font-weight:400;color:var(--color-foreground);transition:color .55s ease}
.story-vignette{background:linear-gradient(90deg,#020304f0 0,#020304c4 26%,transparent 58%,transparent 74%,#0203048c),linear-gradient(0deg,#020304e0 0,transparent 40%,transparent 66%,#020304d9 100%)}
.story.video-act .story-vignette{background:linear-gradient(90deg,#020304f0 0,#020304c4 26%,transparent 58%)}
/* Mobile's crop doesn't need the desktop left-only treatment (protecting the can
   on the right) — keep the normal full vignette during the video act on mobile. */
@media(max-width:800px){.story.video-act .story-vignette{background:radial-gradient(130% 95% at 0% 100%,#020304f7 0%,#020304c2 32%,transparent 64%),linear-gradient(90deg,#020304f0 0,#020304c4 26%,transparent 58%,transparent 74%,#0203048c),linear-gradient(0deg,#020304e0 0,transparent 40%,transparent 66%,#020304d9 100%)}}
.acts{display:block;position:absolute;z-index:60;left:6vw;bottom:17vh;width:min(460px,36vw)}
.act{position:absolute;left:0;bottom:0;opacity:0;transform:translateY(140px);transition:opacity .55s ease,transform .55s ease;pointer-events:none}
.act.active{opacity:1;transform:none}
.act.past{opacity:0;transform:translateY(-85vh);transition:transform .22s ease-in,opacity 0s linear .22s}
.act h2{font-size:clamp(34px,4.2vw,58px);line-height:.94;letter-spacing:-.06em;font-weight:900;margin:18px 0 26px;text-wrap:balance;transition:color .55s ease}
.act h2 .accent{color:var(--color-accent)}
.act>p:not(.eyebrow){margin:0;max-width:390px;color:var(--color-foreground-muted);font-size:16px;line-height:1.45;text-wrap:pretty;transition:color .55s ease}
.act .eyebrow{display:block;transition:color .55s ease}
.act .feature-cta{margin:30px 0 0;pointer-events:auto}
.story-icons{display:flex;flex-wrap:nowrap;gap:8px;max-width:340px;margin:30px 0 0;pointer-events:none}
.story-icon{display:flex;flex-direction:column;align-items:center;gap:8px;flex:1 1 0;min-width:0;opacity:0;transform:translateY(18px);transition:opacity .5s ease,transform .5s ease}
.story-icon.on{opacity:1;transform:none}
.story-icon-badge{display:grid;place-items:center;width:40px;height:40px;flex:none;border-radius:50%;border:1px solid var(--color-border-default);color:var(--color-foreground)}
.story-icon-badge svg{width:19px;height:19px}
.story-icon-label{display:block;font:7px var(--primitive-fontFamily-mono);letter-spacing:.03em;color:var(--color-foreground-muted);text-align:center;line-height:1.3;overflow-wrap:break-word}
.progress--acts{display:grid;grid-template-columns:repeat(4,1fr)}
.progress--acts button{transition:color .55s ease}
.progress--acts button:nth-child(2),.progress--acts button:nth-child(3){text-align:left}
.progress--acts button:nth-child(4){text-align:center}
.progress--acts button:nth-child(5){text-align:right}
/* Texto del acto un poco mas grande en escritorio: legibilidad para
   clientes mayores, sin desbordar el ancho del bloque (max-width:390px). */
@media(min-width:801px){
.act>p:not(.eyebrow){font-size:18px;line-height:1.5}
/* El clip de escritorio necesita el espejo (encuadre original); el clip
   propio de movil trae su propia etiqueta legible y no debe voltearse. */
.story-video{transform:scaleX(-1)}
}
@media(max-width:800px){
.acts{width:min(460px,84vw);bottom:22vh}
.act h2{font-size:38px;margin:12px 0 18px}
.act>p:not(.eyebrow){max-width:290px}
.act:nth-of-type(-n+2)>p:not(.eyebrow){position:relative}
.act:nth-of-type(-n+2)>p:not(.eyebrow)::before{content:"";position:absolute;z-index:-1;inset:-10px -16px;background:rgba(2,3,4,.8);border-radius:14px;filter:blur(6px);pointer-events:none}
.story-icons{gap:5px;max-width:280px;margin-top:22px}
.story-icon-badge{width:30px;height:30px}
.story-icon-badge svg{width:15px;height:15px}
.story-icon-label{font-size:6px}
}
@media(prefers-reduced-motion:reduce){.act,.story-icon{transition:none}.story-scroll-cue svg{animation:none}}

/* Intro móvil: mismo formato que escritorio (foto + copy superpuesto),
   usando el primer frame del scroll vertical como fondo para que enlace
   visualmente con el story que sigue justo debajo. */
@media(max-width:800px){
.intro-copy{max-width:82vw}
.intro h1{font-size:clamp(38px,12vw,52px);margin:16px 0 22px}
.intro-copy>p:not(.eyebrow){font-size:15px;max-width:340px}
}

/* === Mayoristas escritorio: mantiene "VENDE" y el logo en el mismo renglón === */
@media(min-width:801px){
.wholesale h2{flex-wrap:nowrap;gap:.12em .14em}
.wholesale-logo{height:1.25em}
}

/* === Mayoristas móvil: versión resumida (escritorio intacto) === */
.wholesale-mini{display:none}
@media(max-width:800px){
.wholesale{padding:70px 22px 0}
.wholesale-grid{gap:34px}
.wholesale h2{font-size:46px;margin-top:18px}
.wholesale-lead,.wholesale-chips,.wholesale-benefits,.wholesale-form-note,.wholesale-legal{display:none}
.wholesale-mini{display:block;margin-top:26px}
.wholesale-mini-lead{margin:0;color:var(--color-foreground-muted);font-size:15px;line-height:1.45;text-wrap:pretty}
.wholesale-mini-list{list-style:none;margin:20px 0 0;padding:0;border-top:1px solid #ffffff26}
.wholesale-mini-list li{padding:13px 0 13px 26px;border-bottom:1px solid #ffffff26;font-size:15px;line-height:1.25;color:var(--color-foreground);position:relative}
.wholesale-mini-list li::before{content:"—";position:absolute;left:0;color:var(--color-accent)}
.wholesale-mini-jump{display:inline-block;margin-top:20px;font:10px var(--primitive-fontFamily-mono);letter-spacing:.1em;color:var(--color-accent);border-bottom:1px solid var(--color-accent);padding-bottom:3px}
.wholesale-form{padding:28px 22px}
.wholesale-form h3{font-size:30px}
.wholesale-fields{gap:18px}
.wholesale-submit{margin-top:26px}
.wholesale-facts{margin-top:44px;padding:22px 0 56px;gap:20px}
}

/* === Contraste móvil: bridge + story (escritorio intacto) ===
   Ajuste de contraste para que todo el texto de estas dos secciones cumpla
   WCAG AA en pantallas angostas, sin tocar tipografías, tamaños ni paleta —
   solo velos más opacos, sombras de texto y el par de color del botón. */
@media(max-width:800px){
.intro-bridge-shade{background:linear-gradient(0deg,#020304d9 0,transparent 30%)}
.intro-bridge-label{right:calc(7vw - 80px);padding:100px 80px 100px 90px;margin:0;background:radial-gradient(60% 52% at 52% 50%,#020304fa 0%,#020304f0 28%,#020304c4 48%,#02030459 72%,transparent 92%);text-shadow:0 2px 16px rgba(2,3,4,.9)}
.intro-shade{background:radial-gradient(120% 52% at 0% 42%,#020304f2 0%,#020304e0 40%,#020304a8 66%,#02030459 86%,transparent 100%),linear-gradient(0deg,var(--color-background) 0,transparent 26%),#02030459}
.intro-copy{left:0;max-width:none;width:min(100%,88vw);padding:110px 150px 110px 6vw;background:radial-gradient(74% 54% at 30% 50%,#020304f7 0%,#020304ed 32%,#020304b8 54%,#02030445 76%,transparent 92%);opacity:0;transition:opacity 1s ease}
.intro-copy.intro-copy--visible{opacity:1}
.intro h1{text-shadow:0 2px 18px rgba(2,3,4,.85)}
.intro-copy>p:not(.eyebrow){color:#EDEFEC;text-shadow:0 1px 10px rgba(2,3,4,.9)}
.pill{border-color:#fff;background:#02030473}
.story-vignette{background:radial-gradient(132% 56% at 0% 96%,#020304fa 0%,#020304ed 36%,#020304a6 60%,#02030433 80%,transparent 94%),linear-gradient(0deg,#020304f0 0%,#02030499 26%,transparent 52%),linear-gradient(180deg,#020304c4 0%,transparent 22%)}
.story.video-act .story-vignette{background:radial-gradient(132% 58% at 0% 96%,#020304fa 0%,#020304ed 36%,#020304a6 60%,#02030433 80%,transparent 94%),linear-gradient(0deg,#020304f0 0%,#02030499 26%,transparent 52%),linear-gradient(180deg,#020304c4 0%,transparent 22%)}
.act:nth-of-type(-n+2)>p:not(.eyebrow)::before{display:none}
.act>p:not(.eyebrow){color:#EDEFEC;text-shadow:0 1px 10px rgba(2,3,4,.9)}
.act h2{text-shadow:0 2px 14px rgba(2,3,4,.85)}
.story-icon-label{font-size:7px;color:var(--color-foreground)}
.story-icon-badge{background:#02030480;border-color:#ffffff8c}
.progress button{color:#C9CBC8}
.progress button.active{color:#FFFFFF}
.act .feature-cta{background:var(--color-accent);color:var(--color-foreground-on-accent)}
.act .feature-cta:hover{background:var(--color-primary);color:var(--color-foreground)}
}

/* === Producto móvil: foto de uso primero, a sangre, superpuesta sobre la foto
   del producto ===
   Antes .product-side-photo era display:none en movil (solo aparecia desde 1300px),
   luego pasó a sangrar al cierre de la card, luego a ir primero con un degrade por
   CSS (mask-image) — ese degrade no renderizaba en Safari/iOS (mostraba la foto a
   sangre completa, sin fundido, tapando la foto del producto). Ahora el recorte y el
   degrade van horneados directamente en el archivo (PNG/WebP con canal alfa real en
   /products/mobile/), servido solo en este breakpoint vía <picture>; no depende de
   ningún soporte de mask-image. El bloque de 1300px y escritorio (que siguen usando
   el jpg original con su propio mask-image lateral) quedan intactos. */
@media(max-width:800px){
.product-side-photo{display:block;order:-1;align-self:stretch;width:auto;margin:0 -22px -60px;aspect-ratio:4/2.97;overflow:hidden;position:relative;z-index:0}
.product-side-photo img{width:100%;height:100%;object-fit:cover}
.product-side-photo picture{display:block;width:100%;height:100%}
.product-media{position:relative;z-index:1}
}

/* <picture> con WebP: no debe alterar el layout de la imagen de producto */
.product-media picture,.float-p picture{display:contents}