:root{--bg: #0a0a0a;--cream: #f3ecdf;--ink: #0f0f0f;--pink: #ff2d87;--pink-dark: #e5226f;--beige: #c9bfa9;--muted: rgba(243, 236, 223, .6)}*{box-sizing:border-box}html,body,#root{margin:0;padding:0;height:100%;background:#111;font-family:Inter,system-ui,sans-serif;color:var(--cream);-webkit-font-smoothing:antialiased}.stage{min-height:100vh;display:grid;place-items:center;padding:24px}.screen{width:min(1194px,100%);aspect-ratio:1194 / 834;background:radial-gradient(circle at 30% 20%,rgba(255,255,255,.04),transparent 60%),repeating-linear-gradient(45deg,rgba(0,0,0,.15) 0 2px,transparent 2px 6px),#0b0b0b;border-radius:18px;box-shadow:0 30px 80px #00000080;position:relative;overflow:hidden;padding:30px 44px;display:flex;flex-direction:column}.screen.cream{background:var(--cream);color:var(--ink)}.screen.pink{background:var(--pink);color:var(--cream)}.screen:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background-image:radial-gradient(rgba(255,255,255,.06) 1px,transparent 1px);background-size:3px 3px;pointer-events:none;mix-blend-mode:overlay;opacity:.5}.headline{font-family:Bebas Neue,Impact,sans-serif;font-weight:400;letter-spacing:.01em;line-height:.95;text-transform:uppercase}.h1{font-size:clamp(48px,7vw,96px)}.h2{font-size:clamp(36px,5vw,56px)}.h3{font-size:clamp(22px,2.4vw,32px)}.label-small{font-family:Inter,sans-serif;font-size:14px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}.body-copy{font-size:15px;line-height:1.55;color:var(--cream);max-width:542px}.screen.cream .body-copy{color:var(--ink)}.progress{position:absolute;top:30px;left:140px;right:44px;height:6px;background:#ffffff26;border-radius:3px;overflow:hidden}.screen.cream .progress{background:#00000026}.progress>span{display:block;height:100%;background:var(--pink);transition:width .35s ease}.back{position:absolute;top:24px;left:44px;background:none;border:none;color:inherit;cursor:pointer;font-family:Bebas Neue,sans-serif;font-size:22px;letter-spacing:.08em;display:inline-flex;align-items:center;gap:8px;padding:0;text-transform:uppercase}.back:before{content:"‹";font-size:26px;line-height:1}.btn{display:inline-flex;align-items:center;justify-content:center;height:73px;padding:0 36px;border:none;border-radius:6px;font-family:Bebas Neue,sans-serif;font-size:28px;letter-spacing:.12em;text-transform:uppercase;cursor:pointer;transition:transform .15s ease,background .2s ease;color:var(--cream);background:var(--pink)}.btn:hover{transform:translateY(-1px)}.btn:active{transform:translateY(1px)}.btn--wide{width:100%}.btn--ghost{background:transparent;color:inherit;border:2px solid currentColor}.btn--inactive{background:var(--beige);color:#0006;cursor:not-allowed}.options{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:32px}.option{height:73px;border-radius:6px;background:var(--cream);color:var(--ink);border:none;font-family:Bebas Neue,sans-serif;font-size:26px;letter-spacing:.1em;text-transform:uppercase;cursor:pointer;padding:0 32px;text-align:left;transition:background .15s,color .15s,transform .1s}.option:hover{transform:translateY(-1px)}.option.selected{background:var(--ink);color:var(--cream)}.bottle{width:100%;aspect-ratio:1 / 2.3;background:linear-gradient(180deg,#ffffff26,#ffffff05 30%,#0006),linear-gradient(180deg,#2a221a,#1a140e);border-radius:120px 120px 20px 20px/240px 240px 20px 20px;position:relative;box-shadow:inset 0 0 60px #0009}.bottle:after{content:"ESPOLÒN";position:absolute;bottom:18%;left:10%;right:10%;aspect-ratio:1 / 1.1;background:var(--cream);color:var(--ink);display:grid;place-items:center;font-family:Bebas Neue,sans-serif;font-size:22px;letter-spacing:.2em;border-radius:6px;box-shadow:0 4px 12px #0006}.split{display:grid;grid-template-columns:1fr 1fr;gap:40px;height:100%;padding-top:60px}.split-left{display:flex;align-items:center;justify-content:center}.footer-row{margin-top:auto;display:flex;gap:16px}.fineprint{font-size:11px;letter-spacing:.05em;color:var(--muted);text-align:center;margin-top:12px}.screen.cream .fineprint{color:#0000008c}.intro-hero{display:grid;place-items:center;text-align:center;flex:1;gap:18px}.intro-hero .title{font-size:clamp(72px,11vw,140px);line-height:.9}.intro-hero .subtitle{font-size:20px;letter-spacing:.2em;text-transform:uppercase}.frame{background:#0000004d;border:1px dashed rgba(255,255,255,.25);border-radius:8px;display:grid;place-items:center;height:100%;min-height:360px;color:var(--muted);font-family:Bebas Neue,sans-serif;letter-spacing:.1em;overflow:hidden;position:relative}.frame video,.frame img{width:100%;height:100%;object-fit:cover}@keyframes pulse{0%,80%,to{opacity:.2;transform:translateY(0)}40%{opacity:1;transform:translateY(-4px)}}.dots{display:inline-flex;gap:6px}.dots span{width:8px;height:8px;border-radius:50%;background:currentColor;animation:pulse 1.2s infinite ease-in-out}.dots span:nth-child(2){animation-delay:.15s}.dots span:nth-child(3){animation-delay:.3s}.pick-stage{flex:1;display:grid;place-items:center;position:relative}.pick-stage .bottle{width:280px}.pagination{position:absolute;bottom:28px;left:44px;display:flex;gap:12px}.pagination button{width:52px;height:52px;border-radius:50%;border:2px solid var(--cream);background:transparent;color:var(--cream);font-family:Bebas Neue,sans-serif;font-size:22px;cursor:pointer}.pagination button.active{background:var(--cream);color:var(--pink)}@keyframes sway{0%,to{transform:rotateY(-12deg)}50%{transform:rotateY(12deg)}}.bottle.sway{animation:sway 6s ease-in-out infinite;transform-origin:center}.thumbs{display:flex;gap:10px;margin-top:20px}.thumb{width:90px;height:90px;border-radius:50%;background:#ffffff14;border:2px solid rgba(255,255,255,.15)}.thumb.active{border-color:var(--pink)}.top-right{position:absolute;top:24px;right:44px;font-family:Bebas Neue,sans-serif;letter-spacing:.12em;font-size:16px;background:none;border:none;color:inherit;cursor:pointer}.pink-stripe{color:var(--pink)}
