:root{--bg:#130f1f;--sf:#1e1830;--ln:#3a3350;--tx:#f5f1ff;--mu:#a69fc0;--m:#ff2e88;--c:#28f0d8;--disp:"Bowlby One",Impact,sans-serif;--body:"Outfit",system-ui,sans-serif}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--tx);font:400 1.05rem/1.6 var(--body)}
img{max-width:100%;display:block}
a{color:inherit}
:focus-visible{outline:3px solid var(--c);outline-offset:3px}
.top{position:fixed;inset:0 0 auto;z-index:20;display:flex;justify-content:space-between;align-items:center;padding:.9rem clamp(1rem,4vw,3rem);background:linear-gradient(#130f1fcc,#130f1f00)}
.logo{font:1.6rem var(--disp);text-decoration:none;letter-spacing:.04em}
.top nav{display:flex;gap:1.4rem;align-items:center}
.top nav a{text-decoration:none;font-weight:600}
.wa,.btn{background:var(--m);color:#fff;padding:.7rem 1.3rem;border-radius:999px;font-weight:800;text-decoration:none;display:inline-block;transition:transform .15s,box-shadow .15s}
.wa:hover,.btn:hover{transform:translateY(-2px);box-shadow:0 0 24px #ff2e8888}
.hero{position:relative;height:100svh;min-height:540px;overflow:hidden}
.slide{position:absolute;inset:0;opacity:0;transition:opacity 0s .06s;display:grid;align-content:center;padding:0 clamp(1rem,6vw,6rem);isolation:isolate}
.slide.on{opacity:1}
.slide>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transform:scale(1.18)}
.slide.on>img{animation:zoom 4.5s ease-out forwards}
.slide::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,#130f1fe6 10%,#130f1f33)}
.slide h1{font:clamp(3rem,11vw,9rem)/.92 var(--disp);max-width:11ch;text-transform:uppercase;text-shadow:4px 0 var(--m),-4px 0 var(--c)}
.slide.on h1{animation:glitch .5s steps(3) .08s both}
.slide p{font-size:clamp(1.1rem,2.2vw,1.6rem);max-width:30ch;margin:1.2rem 0 1.8rem;font-weight:600}
@keyframes zoom{to{transform:scale(1)}}
@keyframes glitch{0%{transform:translateX(-40px);text-shadow:14px 0 var(--m),-14px 0 var(--c);opacity:0}50%{transform:translateX(10px);opacity:1}100%{transform:none;text-shadow:4px 0 var(--m),-4px 0 var(--c)}}
.flash{position:absolute;inset:0;z-index:5;background:#fff;opacity:0;pointer-events:none}
.flash.on{animation:fl .45s ease-out}
@keyframes fl{0%{opacity:0}12%{opacity:.95}30%{opacity:.1}45%{opacity:.7}100%{opacity:0}}
.dots{position:absolute;right:clamp(1rem,4vw,3rem);bottom:2rem;z-index:6;display:flex;gap:.5rem}
.dots button{width:2.2rem;height:.4rem;border:0;background:#ffffff55;cursor:pointer}
.dots [aria-current=true]{background:var(--c)}
.cue{position:absolute;left:50%;bottom:1.4rem;z-index:6;transform:translateX(-50%);display:grid;justify-items:center;gap:.4rem;text-decoration:none;font-weight:600;font-size:.95rem}
.cue i{width:1.6rem;height:2.6rem;border:2px solid var(--tx);border-radius:1rem;position:relative}
.cue i::after{content:"";position:absolute;left:50%;top:.45rem;width:.3rem;height:.6rem;margin-left:-.15rem;background:var(--c);border-radius:2px;animation:wheel 1.4s infinite}
@keyframes wheel{to{transform:translateY(.9rem);opacity:0}}
.sec{padding:clamp(3rem,8vw,6rem) clamp(1rem,6vw,6rem)}
.sec h2,.legal h2{font:clamp(2rem,5vw,3.6rem)/1 var(--disp);margin-bottom:.6rem}
.lead{color:var(--mu);margin-bottom:2rem}
.cats{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1.2rem}
.cat{position:relative;aspect-ratio:4/5;overflow:hidden;border-radius:1.2rem;text-decoration:none;display:flex;align-items:end}
.cat img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .4s}
.cat:hover img{transform:scale(1.06)}
.cat div{position:relative;padding:1.4rem;width:100%;background:linear-gradient(transparent,#130f1fee)}
.cat h3{font:1.6rem var(--disp)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:1.4rem}
.card{background:var(--sf);border:1px solid var(--ln);border-radius:1rem;overflow:hidden;text-decoration:none;display:block}
.card:hover{border-color:var(--m)}
.card img{aspect-ratio:1;object-fit:cover;width:100%}
.card div{padding:1rem 1.1rem 1.2rem}
.card h3{font-size:1.15rem}
.card p{color:var(--mu);font-size:.95rem;margin:.3rem 0 .8rem}
.meta{display:flex;justify-content:space-between;align-items:center}
.stars{--r:0;font-size:1.1rem;letter-spacing:.08em}
.stars::before{content:"★★★★★";background:linear-gradient(90deg,var(--c) calc(var(--r)/5*100%),var(--ln) 0);-webkit-background-clip:text;background-clip:text;color:transparent}
.page{padding:7rem clamp(1rem,6vw,6rem) 4rem}
.crumb{color:var(--mu);font-size:.95rem;margin-bottom:1.2rem}
.prod{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:2.5rem;align-items:start}
.vista{overflow:hidden;border-radius:1.2rem;position:relative;border:1px solid var(--ln)}
.pista{display:flex;transition:transform .35s}
.pista img{min-width:100%;aspect-ratio:1;object-fit:cover}
.prev,.next{position:absolute;top:50%;translate:0 -50%;width:2.8rem;height:2.8rem;border-radius:50%;border:0;background:#130f1fcc;color:#fff;font-size:1.4rem;cursor:pointer}
.prev{left:.6rem}.next{right:.6rem}
.mini{display:flex;gap:.5rem;margin-top:.7rem}
.mini button{width:4rem;padding:0;border:2px solid transparent;border-radius:.5rem;overflow:hidden;background:none;cursor:pointer}
.mini [aria-current=true]{border-color:var(--c)}
.mini img{aspect-ratio:1;object-fit:cover}
.prod h1{font:clamp(2rem,4vw,3rem)/1.05 var(--disp)}
.price{font:2.4rem var(--disp);color:var(--c);margin:.8rem 0}
.det{white-space:pre-line;color:var(--mu);margin-bottom:1.5rem}
.legal{max-width:70ch}
.legal h3{margin:1.6rem 0 .3rem}
footer{border-top:1px solid var(--ln);padding:3rem clamp(1rem,6vw,6rem) 2rem;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:2rem;color:var(--mu)}
footer h4{color:var(--tx);margin-bottom:.6rem}
footer a{display:block;text-decoration:none;padding:.15rem 0}
footer a:hover{color:var(--c)}
.copy{grid-column:1/-1;font-size:.9rem}
@media(max-width:560px){.top nav a:not(.wa){display:none}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}html{scroll-behavior:auto}}
