/* Self-hosted fonts (Cormorant Garamond, Great Vibes, Inter from @fontsource, SIL Open Font License): latin +
   latin-ext only — Spanish and the colón sign ₡ (U+20A1, in latin-ext). No request to Google: visitors' IPs stay private. */
@font-face {font-family: 'Cormorant Garamond';font-style: normal;font-display: swap;font-weight: 300;src: url(fonts/cormorant-garamond-latin-ext-300-normal.woff2) format('woff2');unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face {font-family: 'Cormorant Garamond';font-style: normal;font-display: swap;font-weight: 300;src: url(fonts/cormorant-garamond-latin-300-normal.woff2) format('woff2');unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face {font-family: 'Cormorant Garamond';font-style: normal;font-display: swap;font-weight: 400;src: url(fonts/cormorant-garamond-latin-ext-400-normal.woff2) format('woff2');unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face {font-family: 'Cormorant Garamond';font-style: normal;font-display: swap;font-weight: 400;src: url(fonts/cormorant-garamond-latin-400-normal.woff2) format('woff2');unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face {font-family: 'Cormorant Garamond';font-style: normal;font-display: swap;font-weight: 500;src: url(fonts/cormorant-garamond-latin-ext-500-normal.woff2) format('woff2');unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face {font-family: 'Cormorant Garamond';font-style: normal;font-display: swap;font-weight: 500;src: url(fonts/cormorant-garamond-latin-500-normal.woff2) format('woff2');unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face {font-family: 'Cormorant Garamond';font-style: normal;font-display: swap;font-weight: 600;src: url(fonts/cormorant-garamond-latin-ext-600-normal.woff2) format('woff2');unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face {font-family: 'Cormorant Garamond';font-style: normal;font-display: swap;font-weight: 600;src: url(fonts/cormorant-garamond-latin-600-normal.woff2) format('woff2');unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face {font-family: 'Cormorant Garamond';font-style: italic;font-display: swap;font-weight: 300;src: url(fonts/cormorant-garamond-latin-ext-300-italic.woff2) format('woff2');unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face {font-family: 'Cormorant Garamond';font-style: italic;font-display: swap;font-weight: 300;src: url(fonts/cormorant-garamond-latin-300-italic.woff2) format('woff2');unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face {font-family: 'Cormorant Garamond';font-style: italic;font-display: swap;font-weight: 400;src: url(fonts/cormorant-garamond-latin-ext-400-italic.woff2) format('woff2');unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face {font-family: 'Cormorant Garamond';font-style: italic;font-display: swap;font-weight: 400;src: url(fonts/cormorant-garamond-latin-400-italic.woff2) format('woff2');unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face {font-family: 'Cormorant Garamond';font-style: italic;font-display: swap;font-weight: 500;src: url(fonts/cormorant-garamond-latin-ext-500-italic.woff2) format('woff2');unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face {font-family: 'Cormorant Garamond';font-style: italic;font-display: swap;font-weight: 500;src: url(fonts/cormorant-garamond-latin-500-italic.woff2) format('woff2');unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face {font-family: 'Great Vibes';font-style: normal;font-display: swap;font-weight: 400;src: url(fonts/great-vibes-latin-ext-400-normal.woff2) format('woff2');unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face {font-family: 'Great Vibes';font-style: normal;font-display: swap;font-weight: 400;src: url(fonts/great-vibes-latin-400-normal.woff2) format('woff2');unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face {font-family: 'Inter';font-style: normal;font-display: swap;font-weight: 400;src: url(fonts/inter-latin-ext-400-normal.woff2) format('woff2');unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face {font-family: 'Inter';font-style: normal;font-display: swap;font-weight: 400;src: url(fonts/inter-latin-400-normal.woff2) format('woff2');unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face {font-family: 'Inter';font-style: normal;font-display: swap;font-weight: 500;src: url(fonts/inter-latin-ext-500-normal.woff2) format('woff2');unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face {font-family: 'Inter';font-style: normal;font-display: swap;font-weight: 500;src: url(fonts/inter-latin-500-normal.woff2) format('woff2');unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
:root{
  --night:#14040a;--wine:#5a0c18;--wine-2:#3a0610;--red:#d4203a;--red-2:#a3142a;
  --pine:#0f3d2a;--pine-2:#082419;--gold:#d8b25e;--gold-2:#f2d58c;
  --cream:#f7eed8;--paper:#fbf5e8;--rompope:#f0e0ad;--ink:#2a0d0d;--muted:#cbb99a;
  --serif:'Cormorant Garamond',Georgia,serif;--script:'Great Vibes',cursive;--sans:'Inter',system-ui,sans-serif;
  --ease:cubic-bezier(.16,1,.3,1);--ease-out:cubic-bezier(.16,1,.3,1);--ease-in:cubic-bezier(.7,0,.84,0);
  --dur-1:.18s;--dur-2:.32s;--dur-3:.7s;
}
*{margin:0;padding:0;box-sizing:border-box}
html{background:var(--night);scroll-behavior:smooth;scrollbar-width:none}
html::-webkit-scrollbar,body::-webkit-scrollbar{display:none;width:0;height:0}
body{background:var(--night);color:var(--cream);font-family:var(--sans);font-weight:400;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%}
a{color:inherit}
#snow{position:fixed;inset:0;pointer-events:none;z-index:60;opacity:.55}
::selection{background:var(--gold-2);color:var(--ink)}
:focus-visible{outline:2px solid var(--gold-2);outline-offset:3px}
.light :focus-visible{outline-color:var(--red-2)}
.skip{position:fixed;left:16px;top:-80px;z-index:300;padding:12px 18px;border-radius:999px;background:var(--gold-2);color:var(--ink);font:500 14px var(--sans);text-decoration:none;transition:top var(--dur-2) var(--ease-out)}
.skip:focus{top:16px}

/* ── NAV ── */
.nav-wrap{position:fixed;top:14px;left:0;right:0;z-index:100;display:flex;justify-content:center;padding:0 16px;pointer-events:none;transition:transform var(--dur-3) var(--ease-out)}
.nav-wrap.hide{transform:translateY(-150%)}
.nav{pointer-events:auto;width:min(1180px,100%);display:flex;align-items:center;justify-content:space-between;gap:20px;padding:7px 7px 7px 22px;border-radius:999px;background:rgba(30,6,14,.3);border:1px solid rgba(255,255,255,.1);box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 12px 40px -18px rgba(0,0,0,.65);backdrop-filter:blur(14px) saturate(1.5);-webkit-backdrop-filter:blur(14px) saturate(1.5);transition:background var(--dur-2),border-color var(--dur-2)}
.nav-wrap.solid .nav{background:rgba(24,5,11,.66);border-color:rgba(242,213,140,.16)}
.brand{display:flex;align-items:center;gap:10px;min-height:44px;text-decoration:none;font-family:var(--serif);font-size:18px;letter-spacing:.14em;text-transform:uppercase;color:var(--cream)}
.brand__logo{width:34px;height:34px;border-radius:50%;box-shadow:0 0 0 1px rgba(242,213,140,.35),0 2px 8px rgba(0,0,0,.35)}
@media(max-width:600px){.brand{font-size:14px;letter-spacing:.1em}.nav{padding-left:16px}}

/* ── BUTTONS (pill, magnetic) ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:50px;padding:0 28px;border-radius:999px;font:500 14px/1 var(--sans);letter-spacing:.05em;text-decoration:none;cursor:pointer;border:0;transition:background var(--dur-2),color var(--dur-2),box-shadow var(--dur-2),transform var(--dur-3) var(--ease-out),scale var(--dur-1) var(--ease-out);will-change:transform}
.btn:active{scale:.97}
.btn svg{width:17px;height:17px;fill:currentColor}
.btn-red{background:var(--red);color:#fff;box-shadow:0 10px 30px -8px rgba(212,32,58,.7)}
.btn-red:hover{background:#b81a31;box-shadow:0 14px 40px -8px rgba(212,32,58,.9)}
.btn-gold{background:var(--gold-2);color:var(--ink)}
.btn-gold:hover{background:#fff0c2}
.btn-ghost{background:transparent;color:var(--cream);box-shadow:inset 0 0 0 1px rgba(247,238,216,.35)}
.btn-ghost:hover{box-shadow:inset 0 0 0 1px var(--gold-2);color:var(--gold-2)}
.btn-dark{background:var(--ink);color:var(--cream)}
.btn-sm{min-height:44px;padding:0 20px;font-size:13px}
.link-cta{display:inline-flex;align-items:center;gap:8px;min-height:44px;margin-top:14px;color:var(--gold-2);font:500 13px var(--sans);letter-spacing:.14em;text-transform:uppercase;text-decoration:underline;text-underline-offset:7px;text-decoration-color:rgba(242,213,140,.45);transition:text-decoration-color var(--dur-2)}
.link-cta svg{width:18px;height:18px;transition:transform var(--dur-2) var(--ease-out)}
.link-cta:hover{text-decoration-color:var(--gold-2)}
.link-cta:hover svg{transform:translateX(4px)}

/* ── LABELS ── */
.stamp{display:inline-block;font:500 12px/1 var(--sans);letter-spacing:.26em;text-transform:uppercase;color:var(--gold-2)}
.stamp::before{content:'[ '}.stamp::after{content:' ]'}
.script{font-family:var(--script);font-weight:400;letter-spacing:0}

/* ── HERO: real scene. The plate is sized exactly like the cover-scaled photo, so the bottles are pinned to a
   point on the real table (no floating) at every viewport size. --py chooses which band of the photo shows. ── */
.hero{position:relative;height:100svh;min-height:560px;overflow:hidden;background:#1d0907;isolation:isolate}
/* pinned: the first screen of scrolling drives the card → scene expansion, so every input (scrollbar, wheel, trackpad, keys, touch) works */
.has-intro .hero-pin{height:calc(200svh)}
.has-intro .hero{position:sticky;top:0}
.hero{--cw:clamp(300px,30vw,470px);--ch:min(580px,68svh)}
/* the card-intro backdrop: a pre-blurred still of the set (assets/hero-bg-*.webp, baked from the old live blur(26px)),
   so fading it during the opening costs the compositor one opacity change instead of a full-screen blur per frame */
.hero__bg{position:absolute;inset:-40px;opacity:0;pointer-events:none;will-change:opacity}
.hero__bg-set{position:absolute;inset:40px;background:#26040a url(hero-bg-land.webp) center/cover no-repeat}
@media (max-aspect-ratio:3/4){.hero__bg-set{background-image:url(hero-bg-port.webp)}}
.hero__scene{position:absolute;inset:0;will-change:transform}
.hero__lens{position:absolute;inset:0;transform-origin:50% 62%;will-change:transform}
.hero__veil{position:absolute;inset:0;background:rgba(14,4,6,.5);opacity:0;pointer-events:none}
.hero__frame{position:absolute;left:50%;top:50%;width:var(--cw);height:var(--ch);margin:calc(var(--ch) / -2) 0 0 calc(var(--cw) / -2);border-radius:24px;box-shadow:0 0 0 1px rgba(242,213,140,.28),0 40px 90px -30px rgba(0,0,0,.85);opacity:0;pointer-events:none;will-change:transform,opacity}
.hero__intro{position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;pointer-events:none;visibility:hidden}
.hero__intro-title{display:flex;flex-direction:column;align-items:center;font:300 clamp(56px,8.6vw,148px)/.9 var(--serif);letter-spacing:-.025em;color:var(--cream);text-shadow:0 10px 50px rgba(0,0,0,.55)}
.hero__intro-title em{font-style:italic;color:var(--gold-2)}
.hero__intro-meta{position:absolute;left:0;right:0;top:calc(50% + var(--ch) / 2 + 16px);display:flex;flex-direction:column;align-items:center;gap:6px;font:500 12px var(--sans);letter-spacing:.26em;text-transform:uppercase;color:var(--gold-2)}
.hero__intro-meta span:first-child{font:400 clamp(26px,2.4vw,36px) var(--script);letter-spacing:0;text-transform:none;color:var(--rompope)}
[data-split]{display:block;will-change:transform,opacity}
/* first paint before JS: collapsed card (no flash of the expanded hero) */
.intro-pending .hero__bg{opacity:1}
.intro-pending .hero__veil{opacity:1}
.intro-pending .hero__frame{opacity:1}
.intro-pending .hero__intro{visibility:visible}
.intro-pending .hero__copy-in,.intro-pending .hero__shade,.intro-pending .hero__next{opacity:0}
.intro-pending .hero__scene{clip-path:inset(calc((100svh - var(--ch)) / 2) calc((100vw - var(--cw)) / 2) round 24px)}
.intro-pending .hero__lens{transform:scale(1.12)}
.hero__plate{--pw:max(100vw,66.667svh);--py:.72;position:absolute;left:50%;width:var(--pw);height:calc(var(--pw) * 1.5);top:calc((100svh - var(--pw) * 1.5) * var(--py));transform:translateX(-50%)}
/* the set: a vintage family Christmas card drawn in SVG (tools/hero-art.js) — warm velvet wall with tone-on-tone
   snowflakes and gold dust, lamplight behind the bottles, a walnut table, pine, holly and old glass ornaments */
.hero__set{position:absolute;inset:0;overflow:hidden;background:radial-gradient(70% 60% at 50% 58%,#8a1823 0%,#6b101b 36%,#430812 70%,#26040a 100%)}
.hero__set::after{content:"";position:absolute;inset:0;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");opacity:.16;mix-blend-mode:overlay;pointer-events:none}
.hero__wall-snow{position:absolute;inset:0;background:url(hero-snow.svg) 0 0/520px 520px repeat}
.hero__dust{position:absolute;top:0;bottom:0;width:clamp(80px,11vw,200px);background:url(hero-dust.svg) 0 0/100% auto repeat-y}
.hero__dust--l{left:0}
.hero__dust--r{right:0;transform:scaleX(-1)}
.hero__deco{position:absolute;display:block;height:auto;max-width:none;pointer-events:none;user-select:none}
.hero__deco--tr{top:0;right:0;width:clamp(260px,38vw,680px)}
.hero__deco--bl{left:0;bottom:0;width:clamp(240px,28vw,500px)}
.hero__glow{position:absolute;left:48.9%;top:63%;width:95%;aspect-ratio:1;translate:-50% -50%;background:radial-gradient(closest-side,rgba(255,176,96,.26),rgba(255,140,80,.09) 45%,rgba(255,140,80,0) 75%);pointer-events:none}
.hero__table{position:absolute;left:0;right:0;top:76.5%;bottom:0;background:url(hero-wood.svg) 0 0/100% 100% no-repeat}
.hero__table::before{content:"";position:absolute;left:0;right:0;bottom:100%;height:3%;background:linear-gradient(to top,rgba(24,3,7,.5),rgba(24,3,7,0))}
.hero__pool{position:absolute;left:48.9%;top:77.4%;width:62%;height:7%;translate:-50% -50%;background:radial-gradient(closest-side,rgba(255,190,120,.24),rgba(255,190,120,0));mix-blend-mode:screen;pointer-events:none}
/* base line (y 188 of 240) sits at 78.8% of the plate, just in front of the table edge */
.hero__deco--br{right:0;bottom:0;width:clamp(260px,38vw,680px)} /* the top-right piece mirrored, rising from the corner */
/* product anchored on the table: base at 76.5% of the plate height (the table edge) */
.hero__product{position:absolute;left:46.19%;bottom:23.4%;height:17.5%;aspect-ratio:321/1106} /* the 1 L bottle alone, centred on screen */
.hero__bottles,.hero__reflection{position:absolute;left:0;bottom:0;width:100%;height:100%;display:block}
.hero__reflection{transform:scaleY(-1);transform-origin:50% 100%;opacity:.2;-webkit-mask-image:linear-gradient(to top,transparent 70%,#000 100%);mask-image:linear-gradient(to top,transparent 70%,#000 100%)}
.hero__contact{position:absolute;left:-55%;right:-55%;bottom:-1.4%;height:4.2%;border-radius:50%;background:radial-gradient(closest-side,rgba(8,2,1,.7),rgba(8,2,1,.3) 60%,transparent);pointer-events:none}
.hero__shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(14,4,6,.9) 0%,rgba(14,4,6,.72) 26%,rgba(14,4,6,.18) 48%,transparent 60%),linear-gradient(180deg,rgba(14,4,6,.55) 0%,transparent 22%,transparent 80%,rgba(14,4,6,.45) 100%);pointer-events:none}
.hero__copy{position:absolute;z-index:2;left:6vw;top:50%;width:min(36vw,560px);transform:translateY(-46%);will-change:transform,opacity}
/* layers the opening fades in get their own pre-rasterised surfaces, so their first visible frame (big text-shadow,
   glowing buttons, full-screen gradient) is not painted mid-gesture */
.hero__copy-in,.hero__shade,.hero__next,.hero__veil{will-change:opacity}
.hero__tag{display:block;margin:16px 0 4px;font-size:clamp(28px,2.6vw,42px);color:var(--rompope)}
.hero__title{font:300 clamp(54px,6.4vw,112px)/.88 var(--serif);letter-spacing:-.025em;color:var(--cream);text-shadow:0 8px 40px rgba(0,0,0,.5)}
.hero__title em{display:block;font-style:italic;color:var(--gold-2)}
.hero__lead{margin:22px 0 30px;max-width:420px;font-size:16px;line-height:1.7;color:rgba(247,238,216,.82)}
.hero__cta{display:flex;flex-wrap:wrap;gap:12px}
@media(min-width:901px) and (max-width:1366px){.hero__cta .btn{padding:0 22px}}
.hero__next{position:absolute;z-index:2;left:50%;bottom:22px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:8px;min-width:44px;min-height:44px;padding:6px 10px;background:none;border:0;cursor:pointer;color:rgba(247,238,216,.78);font:500 11px var(--sans);letter-spacing:.3em;text-transform:uppercase}
.hero__next i{display:block;width:1px;height:30px;background:linear-gradient(var(--gold-2),transparent);animation:hint 2.2s var(--ease) infinite;transform-origin:top}
@media(max-width:900px){
  .hero{--cw:74vw;--ch:58svh}
  .hero__plate{--pw:max(100vw,74.667svh)}
  .hero__intro-title{font-size:clamp(46px,13vw,72px)}
  .hero__product{left:45.21%;height:22%}
  .hero__deco--bl{display:none}
  .hero__deco--br{width:40vw}
  .hero__deco--tr{width:54vw}
  .hero__dust{width:64px}
  .hero__shade{background:linear-gradient(180deg,rgba(14,4,6,.86) 0%,rgba(14,4,6,.6) 30%,rgba(14,4,6,.05) 50%,transparent 70%,rgba(14,4,6,.6) 100%)}
  .hero__copy{left:6vw;right:6vw;top:calc(84px + 2svh);bottom:calc(18px + env(safe-area-inset-bottom));width:auto;transform:none;text-align:center;pointer-events:none}
  .hero__tag{margin:10px 0 2px;font-size:30px}
  .hero__title{font-size:clamp(46px,13vw,72px)}
  .hero__lead,.hero__next{display:none}
  .hero__copy-in{position:absolute;inset:0}
  .hero__cta{position:absolute;left:0;right:0;bottom:0;flex-direction:column;align-items:center;gap:10px;pointer-events:auto}
}
html.lenis{scroll-behavior:auto}

/* ══════════════════ AFTER THE HERO — editorial (Cursor DESIGN.md) dressed as a Christmas set ══════════════════
   Model rules kept: flat surfaces (no gradients), 4px radius on every card, button and photo, weight-400 headlines with
   tighter tracking as size grows, a serif for prose, mono for small metadata, warm double shadows on paper cards,
   free calm scroll with quiet fade-ups. Departures, on purpose: the parchment canvas becomes a lit Christmas studio
   per section (pine, wine, red with a floor, deep pine, wine, an out-of-focus tree), and headlines use the hero's
   Cormorant Garamond so the whole page shares one festive voice. Photos always render at their own aspect ratio. */
.after{
  --x-night:#14040a;--x-pine:#0f3d2a;--x-pine-deep:#082419;--x-wine:#5a0c18;--x-wine-deep:#3a0610;--x-red:#a3142a;
  --x-cream:#f7eed8;--x-paper:#fbf5e8;--x-ink:#2a0d0d;--x-gold:#f2d58c;--x-forest:#34785c;--x-forest-hover:#2c664e;
  --x-sans:'Inter',ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --x-serif:'Cormorant Garamond','Iowan Old Style','Palatino Linotype',Georgia,serif;
  --x-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --x-ease-out:cubic-bezier(.23,1,.32,1);--x-ease-io:cubic-bezier(.77,0,.175,1);--x-ease-ui:cubic-bezier(.4,0,.2,1);
  --x-r:4px;--x-gap:20px;--x-section:clamp(76px,8.5vw,120px);
  --x-shadow:0 28px 70px rgba(0,0,0,.32),0 14px 32px rgba(0,0,0,.22);
  position:relative;font-family:var(--x-sans);-webkit-font-smoothing:antialiased;font-feature-settings:"kern","tnum"
}
.after ::selection{background:var(--x-gold);color:var(--x-ink)}
.x-dark{--x-accent:var(--x-gold);--x-muted:rgba(247,238,216,.74);color:var(--x-cream)}
.x-light{--x-accent:var(--x-red);--x-muted:rgba(42,13,13,.72);color:var(--x-ink)}
.x-dark :focus-visible{outline:2px solid var(--x-gold);outline-offset:3px}
.x-light :focus-visible{outline:2px solid var(--x-red);outline-offset:3px}
.x-pine{background:radial-gradient(130% 100% at 88% -8%,#1f5f43 0%,#0f3d2a 42%,#06190f 100%)}
/* Galería: the plain cream paper the reviews wore in the first version (#fbf5e8, ink text, red italic emphasis) */
.x-paperbg{background:var(--x-paper)}
.x-light .x-h2 em{color:var(--x-red)}
.x-pine-deep{background:radial-gradient(120% 95% at 10% -10%,#134530 0%,#082419 46%,#03110b 100%)}
.x-wine{background:radial-gradient(130% 100% at 86% -10%,#80172a 0%,#5a0c18 40%,#260408 100%)}
/* "Un solo rompope": Christmas velvet backdrop — deep red pile, soft folds, a sheen where the light lands (top right),
   a crushed-velvet glint lower left, fine pile grain (velvet-grain.svg); painted once, nothing animates */
.x-studio{--x-accent:var(--x-cream);--floor:clamp(96px,11vw,150px);background:radial-gradient(55% 45% at 74% 6%,rgba(255,160,160,.22) 0%,rgba(255,160,160,0) 70%),radial-gradient(40% 35% at 16% 72%,rgba(255,120,130,.09) 0%,rgba(255,120,130,0) 70%),repeating-linear-gradient(90deg,rgba(24,0,5,.24) 0,rgba(24,0,5,0) 70px,rgba(255,140,150,.07) 120px,rgba(24,0,5,0) 170px,rgba(24,0,5,.24) 240px),repeating-linear-gradient(90deg,rgba(24,0,5,0) 0,rgba(24,0,5,.14) 90px,rgba(24,0,5,0) 190px,rgba(255,140,150,.05) 290px,rgba(24,0,5,0) 380px),url(velvet-grain.svg) 0 0/220px 220px,radial-gradient(110% 90% at 78% -6%,#b4203a 0%,#86112a 42%,#44060f 100%);box-shadow:inset 0 0 220px rgba(24,0,5,.45)}
/* Historia (since 2026-10-09): a deep pine woven cloth (assets/fabric-pine.webp from tools/linen-art.js, 3 px threads)
   with soft drapes running across it, light falling from the top-right corner and the edges sinking into shade, and
   out-of-focus Christmas lights floating over it — the blurred bulbs (warm gold, candle white, red, green) come from
   sections.js ([data-lights]): big soft ones far away, small brighter ones near, thickest at the edges, calm behind the copy */
.x-pinelights{background:radial-gradient(68% 58% at 86% 4%,rgba(200,240,210,.13) 0%,rgba(200,240,210,0) 62%),linear-gradient(112deg,rgba(0,6,3,0) 0%,rgba(0,6,3,.2) 13%,rgba(210,245,220,.05) 26%,rgba(0,6,3,.22) 41%,rgba(210,245,220,.045) 57%,rgba(0,6,3,.2) 73%,rgba(210,245,220,.04) 87%,rgba(0,6,3,0) 100%),radial-gradient(125% 105% at 50% 44%,rgba(0,8,4,0) 48%,rgba(0,8,4,.55) 100%),url(fabric-pine.webp) 0 0/384px 384px,#163f2d}
.x-pinelights .bokeh-scrim{top:55%;width:min(1180px,120%);height:88%;background:radial-gradient(closest-side,rgba(2,14,8,.72),rgba(2,14,8,0))}
.bokeh--soft{background:radial-gradient(circle,rgba(var(--c),.55) 0,rgba(var(--c),.18) 40%,rgba(var(--c),0) 70%)}
/* Destacados: warm cream card stock with a soft lift in the middle and a fine paper grain (paper-grain.svg) */
.x-cream{background:url(paper-grain.svg) 0 0/220px 220px,radial-gradient(120% 95% at 50% 42%,#fcf6e8 0%,#f6ebd2 58%,#eddcb8 100%)}
/* gilt frame: a double rule with our own scroll-and-holly corners and a star at the top and bottom centre
   (tools/frame-art.js; inspired by the client's vintage frame references, not copied). Light gold on dark backgrounds,
   a deeper antique gold (-oncream files) on cream */
.x-framed{--fr:clamp(7px,1.6vw,22px);--fc:clamp(84px,min(9vw,16vh),140px)}
.x-framed::before{content:"";position:absolute;inset:var(--fr);border:1px solid rgba(217,185,104,.5);outline:1px solid rgba(217,185,104,.3);outline-offset:-8px;pointer-events:none;z-index:0}
.x-framed::after{content:"";position:absolute;inset:calc(var(--fr) - 8px);background:url(frame-corner-tl.svg) left top/var(--fc) no-repeat,url(frame-corner-tr.svg) right top/var(--fc) no-repeat,url(frame-corner-bl.svg) left bottom/var(--fc) no-repeat,url(frame-corner-br.svg) right bottom/var(--fc) no-repeat,url(frame-mid-top.svg) center top 2px/96px 40px no-repeat,url(frame-mid-bottom.svg) center bottom 2px/96px 40px no-repeat;opacity:.85;pointer-events:none;z-index:0}
.x-cream.x-framed::before{border-color:rgba(168,128,58,.62);outline-color:rgba(168,128,58,.36)}
.x-cream.x-framed::after{background-image:url(frame-corner-tl-oncream.svg),url(frame-corner-tr-oncream.svg),url(frame-corner-bl-oncream.svg),url(frame-corner-br-oncream.svg),url(frame-mid-top-oncream.svg),url(frame-mid-bottom-oncream.svg);opacity:.95}
/* on cream the gold sparkles turn antique gold, like foil flecks in the card */
.x-cream .spk{background:radial-gradient(circle,rgba(184,140,58,.95) 0 22%,rgba(184,140,58,.35) 40%,rgba(184,140,58,0) 70%)}
.x-cream .glint::before,.x-cream .glint::after{background:linear-gradient(90deg,rgba(184,140,58,0),#c9a24e 42%,#b0832f 50%,#c9a24e 58%,rgba(184,140,58,0))}
.x-studio::after{content:"";position:absolute;left:0;right:0;bottom:0;height:var(--floor);background:linear-gradient(to bottom,#6a0a17 0%,#a2182a 9%,#8d1223 55%,#640a16 100%);box-shadow:0 -1px 0 rgba(255,170,160,.16)}
.x-bokeh{background:radial-gradient(120% 100% at 50% 38%,#1c6a33 0%,#0f4a22 44%,#05230f 100%)}
.after section{position:relative;scroll-margin-top:52px;overflow:clip}
.after section>*:not(.x-decor){position:relative;z-index:1}
.x-wrap{width:min(1180px,100% - 48px);margin-inline:auto}
.x-nw{white-space:nowrap}

/* type: whisper-weight headlines, tracking tightens as size grows */
.x-display{font:500 clamp(48px,7vw,88px)/1.02 var(--x-serif);letter-spacing:-.012em;text-wrap:balance}
.x-h2{font:500 clamp(38px,4.8vw,60px)/1.05 var(--x-serif);letter-spacing:-.01em;text-wrap:balance}
.x-display em,.x-h2 em{font-style:italic;color:var(--x-gold)}
.x-studio .x-display em{color:#ffe9b8}
.x-script{font-family:var(--script);font-weight:400;font-style:normal;color:var(--x-gold);font-size:1.18em;line-height:.8;letter-spacing:0}
.x-prose{font:500 clamp(19px,1.6vw,21px)/1.5 var(--x-serif);color:var(--x-muted);max-width:46ch}
.x-link{display:inline-flex;align-items:center;gap:2px;min-height:44px;color:var(--x-accent);font:400 16px/1.3 var(--x-sans);text-decoration:none;transition:color .15s var(--x-ease-ui)}
.x-link svg{width:16px;height:16px;transition:transform .2s var(--x-ease-out)}
.x-link:hover{text-decoration:underline;text-underline-offset:4px}
@media (hover:hover) and (pointer:fine){.x-link:hover svg{transform:translateX(3px)}}

/* buttons: 4px, flat, one filled + one ghost per group */
.x-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 20px;border-radius:var(--x-r);font:400 15px/1 var(--x-sans);text-decoration:none;white-space:nowrap;transition:background-color .15s var(--x-ease-ui),color .15s var(--x-ease-ui),scale .16s var(--x-ease-out)}
.x-btn:active{scale:.97}
.x-btn svg{width:18px;height:18px;fill:currentColor}
.x-btn--cream{background:var(--x-cream);color:var(--x-ink)}
.x-btn--cream:hover{background:#efe2c2}
.x-btn--forest{background:var(--x-forest);color:var(--x-paper)}
.x-btn--forest:hover{background:var(--x-forest-hover)}
.x-btn--ghost{background:transparent;color:var(--x-cream);box-shadow:inset 0 0 0 1px rgba(247,238,216,.55)}
.x-btn--ghost:hover{background:rgba(247,238,216,.1)}
.x-btn--sm{min-height:32px;padding:0 12px;font-size:13px}
.x-btn--lg{min-height:50px;padding:0 26px;font-size:16px}

/* reveal: quiet fade-up, staggered; content stays visible if the script never runs */
.after.is-ready .x-rv{opacity:0;transform:translate3d(0,16px,0);transition:opacity .7s var(--x-ease-out),transform .7s var(--x-ease-out);transition-delay:calc(var(--i,0) * 60ms)}
.after.is-ready .x-rv.is-in{opacity:1;transform:none}
/* phones: no fade-up reveals — content is simply there (only the hero keeps its two transitions; see hero.js PHONE) */
@media(max-width:700px){.after.is-ready .x-rv{opacity:1;transform:none;transition:none}}

/* photos: shown whole, 4px corners */
.x-photo{border-radius:var(--x-r)}

/* ── local nav: night bar that reads over every section ── */
.lnav{position:sticky;top:0;z-index:90;height:52px;background:rgba(20,4,10,.88);backdrop-filter:saturate(140%) blur(12px);-webkit-backdrop-filter:saturate(140%) blur(12px);border-bottom:1px solid rgba(242,213,140,.14);color:var(--x-cream);transition:transform .45s var(--x-ease-out),opacity .3s ease}
.lnav.is-tucked{transform:translateY(-100%);opacity:0;pointer-events:none}
.lnav__in{height:100%;width:min(1180px,100% - 48px);margin-inline:auto;display:flex;align-items:center;gap:20px}
.lnav__logo{flex:0 0 auto;display:block;margin-right:-6px;border-radius:50%}
.lnav__logo img{display:block;width:34px;height:34px;border-radius:50%;box-shadow:0 0 0 1px rgba(242,213,140,.35)}
.lnav__slogan{margin-right:auto;min-width:0;font:400 clamp(22px,2.2vw,28px)/1 var(--script);color:var(--x-gold);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-top:4px}
@media(max-width:560px){.lnav__slogan{font-size:17px;line-height:1.05;white-space:normal;max-width:16em}}
.lnav :focus-visible{outline:2px solid var(--x-gold);outline-offset:2px}

/* Destacados (cream card, gilt frame): two real photos of the bottles in identical frames (a thin ivory mat with an
   antique-gold hairline),
   laid over each other like a collage: the 1 L tilted left at the back, the 500 ml tilted right in front, lower and
   overlapping its counter (never the other bottle). The message sits beside them; the whole section fits one screen.
   --h is the photo height; both photos are 3:5, so both frames match */
.hl{height:calc(100svh - 52px);min-height:560px;display:flex;flex-direction:column;justify-content:center;padding:clamp(48px,8vh,80px) 0 clamp(40px,7vh,72px);overflow:hidden}
.hl__grid{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(32px,6vw,96px);align-items:center}
.hl__collage{--h:clamp(260px,min(100svh - 370px,34vw),520px);--w:calc(var(--h) * .6);position:relative;width:calc(var(--w) * 1.74 + 40px);height:calc(var(--h) * 1.2 + 72px);margin-inline:auto}
.hl__print{position:absolute;z-index:1} /* the layering never changes: the 500 ml always lies on top of the 1 L */
.hl__print--a{left:10px;top:12px}
.hl__print--b{z-index:2;left:calc(var(--w) * .74 + 10px);top:calc(var(--h) * .2 + 12px)}
.hl__frame{margin:0}
.hl__print--a .hl__frame{rotate:-4deg}
.hl__print--b .hl__frame{rotate:3.5deg}
.hl__frame img{display:block;width:var(--w);height:var(--h);max-width:none;border-radius:0;box-shadow:0 0 0 5px #fffdf8,0 0 0 6px rgba(168,128,58,.55),0 22px 46px rgba(42,13,13,.24),0 8px 18px rgba(42,13,13,.16)}
.hl__frame figcaption{margin-top:16px;font:italic 600 clamp(16px,1.3vw,19px)/1.2 var(--x-serif);color:var(--x-red)}
.hl__copy .x-h2{margin-bottom:24px}
.hl__copy .x-link{margin-top:18px}
/* below ~1240px the page wrap reaches the side light-string menu: keep the copy clear of it */
@media(min-width:901px) and (max-width:1240px){.hl__copy{padding-right:32px}}
/* only the print under the mouse grows a little, in its own layer (bringing the 1 L to the front made it jump over the
   500 ml); the other stays as it is. The reveal owns
   transform/opacity on .x-rv, so the zoom uses the separate scale property and joins its transition list */
.hl__frame{transition:scale .28s var(--x-ease-out)}
.after.is-ready .hl__frame.x-rv{transition:opacity .7s var(--x-ease-out),transform .7s var(--x-ease-out),scale .28s var(--x-ease-out);transition-delay:calc(var(--i,0) * 60ms),calc(var(--i,0) * 60ms),0s}
@media(hover:hover) and (pointer:fine){.hl__print:hover .hl__frame{scale:1.03}}
@media(prefers-reduced-motion:reduce){.pd__bottle{transition:opacity .2s ease;transform:none}.hl__frame,.after.is-ready .hl__frame.x-rv{transition:none}.hl__print:hover .hl__frame{scale:none}}
@media(max-width:900px){
  .hl{height:auto;min-height:calc(100svh - 52px);justify-content:flex-start;padding:36px 0 104px}
  .hl__grid{grid-template-columns:1fr;gap:22px}
  .hl__copy{order:-1}
  .hl__copy .x-h2{margin-bottom:14px}
  .hl__copy .x-link{margin-top:6px}
  .hl__collage{--h:clamp(200px,min(100svh - 600px,62vw),320px);height:calc(var(--h) * 1.2 + 56px)}
  .hl__frame img{box-shadow:0 0 0 4px #fffdf8,0 0 0 5px rgba(168,128,58,.55),0 14px 28px rgba(42,13,13,.22)}
  .hl__frame figcaption{margin-top:10px;font-size:15px}
}
/* phones: the two photos a bit larger (≈ +16 % at 390 px) */
@media(max-width:700px){.hl__collage{--h:clamp(220px,min(100svh - 520px,72vw),340px)}}
@keyframes twinkle{from{opacity:1}to{opacity:.28}}


/* ── Historia: editorial — a big title on the left with the frame's gilt flourish under it, the two paragraphs side by
   side in columns below, the signature to close; the ad (assets/ad-1l.webp, rendered from ads/ad-1l.html) framed on
   the right by a floating gold hairline, as tall as the copy block, with sprigs tucked behind two of its corners ── */
.ed{height:calc(100svh - 52px);min-height:620px;display:flex;flex-direction:column;justify-content:center;padding:clamp(44px,7vh,72px) 0 clamp(40px,7vh,68px)}
.ed__grid{--ph:clamp(300px,min(100svh - 260px,38vw),520px);display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:clamp(48px,6vw,96px);align-items:center}
.ed__title{font-size:clamp(44px,5.4vw,74px);line-height:1.02;letter-spacing:-.015em;margin:0 0 16px;max-width:13ch}
.ed__orn{display:block;width:96px;height:auto;margin:0 0 clamp(18px,3vh,30px) -4px;opacity:.9}
.ed__cols{display:grid;grid-template-columns:1fr 1fr;column-gap:clamp(24px,3vw,44px)}
.ed__cols .x-prose{max-width:none}
.ed__sign{display:block;margin-top:clamp(18px,3vh,28px);font-size:clamp(34px,3vw,42px);line-height:1.2;color:var(--x-gold)}
.ed__media{position:relative;margin:0}
.ed__media>img{position:relative;z-index:1;display:block;height:var(--ph);width:auto;max-width:none;border-radius:2px;outline:1px solid rgba(217,185,104,.5);outline-offset:12px;box-shadow:0 30px 70px rgba(0,0,0,.5),0 12px 28px rgba(0,0,0,.35)}
@media(min-width:901px) and (max-width:1180px){.ed__cols{grid-template-columns:1fr;row-gap:14px}}
@media(min-width:901px) and (max-width:1320px){.ed__grid{padding-right:44px}} /* the framed ad stays clear of the side light-string menu */
@media(max-width:900px){
  .ed{height:auto;min-height:calc(100svh - 52px);justify-content:flex-start;padding:40px 0 104px}
  .ed__grid{grid-template-columns:1fr;row-gap:36px}
  .ed__title{font-size:clamp(38px,10vw,48px);max-width:none}
  .ed__orn{width:80px;margin-bottom:18px}
  .ed__cols{grid-template-columns:1fr;row-gap:14px}
  .ed__media{justify-self:center;width:min(66vw,360px)}
  .ed__media>img{width:100%;height:auto;outline-offset:8px}
}

/* ── El rompope: wine; bottles on a deeper stage, the price callout as a paper card ── */
.pd{padding:var(--x-section) 0 0}
@media(min-width:901px){
  .pd{min-height:calc(100svh - 52px);display:flex;flex-direction:column;justify-content:flex-end;padding-top:clamp(28px,5vh,64px)}
  .pd.x-studio{--floor:clamp(96px,min(11vw,16vh),150px)}
  .pd .x-display{font-size:clamp(48px,min(7vw,10.5vh),88px)}
}
.pd__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"stage copy";gap:clamp(32px,6vw,96px);align-items:center}
.pd__copy{grid-area:copy;padding-bottom:calc(var(--floor) + 16px)}
.pd__stage{grid-area:stage;align-self:end;position:relative;display:flex;align-items:flex-end;justify-content:center;padding-bottom:calc(var(--floor) * .42)}
/* the chosen size, alone on the studio floor (no card or frame); 1 L tall swing-top, 500 ml round swing-top,
   210 ml milk bottle with a bow — heights 100 / 78 / 49 % baked into same-size images */
.pd__frame{position:relative;z-index:1;flex:0 0 auto;width:clamp(180px,18vw,240px);height:clamp(340px,38vw,500px);margin:0}
.pd__bottle{position:absolute;left:50%;bottom:0;width:auto;max-width:none;translate:-50% 0;opacity:0;transform:translateY(10px) scale(.96);transform-origin:50% 100%;transition:opacity .32s var(--x-ease-out),transform .42s var(--x-ease-out);filter:drop-shadow(0 10px 12px rgba(0,0,0,.45))}
.pd__bottle.is-on{opacity:1;transform:none}
.pd__bottle{height:100%} /* all three images share one 420×1200 canvas with the real relative heights baked in */
.pd__baubles{position:relative;z-index:2;flex:0 0 auto;width:clamp(140px,15vw,210px);margin-left:-3%;transform:translateY(16.7%)}
.pd__baubles svg,.pd__baubles img{display:block;width:100%;height:auto}
.pd__shadow{position:absolute;z-index:0;left:50%;bottom:calc(var(--floor) * .42 - 18px);width:clamp(280px,30vw,420px);height:40px;translate:-62% 0;background:radial-gradient(closest-side,rgba(30,0,6,.62),rgba(30,0,6,0))}
.pd__copy .x-display{margin-bottom:20px}
.pd__callout{display:inline-flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:32px;padding:10px 10px 10px 20px;border-radius:var(--x-r);background:var(--x-paper);color:var(--x-ink);box-shadow:var(--x-shadow)}
.pd__price{min-width:4.6em;display:flex;flex-direction:column;gap:3px;font:500 16px/1.2 var(--x-sans)}
.pd__price strong{font-weight:500;font-variant-numeric:tabular-nums}
.pd__price span{font:400 12px/1.3 var(--x-mono);color:rgba(42,13,13,.66)}
.pd__seg{display:flex;gap:2px;padding:3px;border-radius:var(--x-r);background:#efe5cf}
.pd__opt{min-height:38px;padding:0 10px;white-space:nowrap;border:0;border-radius:3px;background:transparent;color:rgba(42,13,13,.72);font:400 14px/1 var(--x-sans);cursor:pointer;transition:background-color .15s var(--x-ease-ui),color .15s var(--x-ease-ui),box-shadow .15s var(--x-ease-ui)}
.pd__opt[aria-checked="true"]{background:var(--x-paper);color:var(--x-ink);box-shadow:0 1px 2px rgba(42,13,13,.12),0 0 0 1px rgba(42,13,13,.08)}
.pd__opt:active{scale:.97}
.pd__note{margin-top:24px;font:400 15px/1.5 var(--x-sans);color:var(--x-muted);max-width:46ch}
.pd__note .x-link{min-height:auto;font-size:15px}
@media(max-width:900px){.pd__grid{grid-template-columns:1fr;grid-template-areas:"copy" "stage"}.pd__copy{padding-bottom:0}.pd__frame{height:clamp(260px,68vw,400px)}}
/* phones: the framed bottle sits right above the size picker, so a tap shows its bottle without scrolling */
@media(max-width:900px){.pd__grid{display:flex;flex-direction:column;align-items:stretch;gap:0}.pd__copy{display:contents}.pd__copy .x-display{order:1}.pd__copy .x-prose{order:2}.pd__stage{order:3;align-self:center;margin-top:28px;padding-bottom:0}.pd__callout{order:4}.pd__note{order:5}.pd__legal{order:6;padding-bottom:calc(var(--floor) + 16px)}.pd__frame{width:clamp(150px,40vw,200px);height:clamp(260px,70vw,340px)}.pd__shadow{display:none}.pd__baubles{width:clamp(90px,26vw,130px);margin-left:-12%}}
@media(max-width:700px){
  .pd__callout{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;padding:14px}
  .pd__callout .x-btn{flex:1 0 100%}
}

/* ── Galería: a collage-carousel on cream paper — five prints, all the same size (a 3:4 photo in a white border with its
   caption written underneath), fanned on the table and tilted by hand, the chosen one lying in front. sections.js
   places them (transform + z-index) and adds .is-deck; without JS they sit in a plain row ── */
.gl{height:calc(100svh - 52px);min-height:620px;display:flex;flex-direction:column;justify-content:center;padding:clamp(60px,10vh,96px) 0 clamp(56px,9vh,88px)}
.gl__in{display:flex;flex-direction:column}
.gl .x-h2{margin:0;text-align:center} /* centred between the frame's corner ornaments */
.gl__nav{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:8px}
.gl__count{min-width:3.4em;text-align:center;font:400 13px/1 var(--x-mono);letter-spacing:.04em;color:var(--x-muted);font-variant-numeric:tabular-nums}
.gl__arrow{display:flex;align-items:center;justify-content:center;width:48px;height:48px;padding:0;border:1px solid rgba(42,13,13,.22);border-radius:var(--x-r);background:rgba(255,253,248,.7);color:var(--x-ink);cursor:pointer;transition:border-color .15s var(--x-ease-ui),background-color .15s var(--x-ease-ui),scale .12s var(--x-ease-ui)}
.gl__arrow svg{width:22px;height:22px}
.gl__arrow--prev svg{transform:scaleX(-1)}
@media(hover:hover) and (pointer:fine){.gl__arrow:hover{border-color:var(--x-ink);background-color:#fffdf8}}
.gl__arrow:active{scale:.94}
.gl__deck{--h:clamp(240px,min(100svh - 455px,36vw),480px);--pw:calc(var(--h) * .75 + 24px);position:relative;margin-top:clamp(20px,4vh,40px);display:flex;flex-wrap:wrap;justify-content:center;gap:20px}
.gl__deck.is-deck{display:block;height:calc(var(--h) + 96px);touch-action:pan-y;user-select:none;-webkit-user-select:none}
.gl__print{width:var(--pw);margin:0;padding:12px 12px 0;background:#fffdf8;border-radius:2px;box-shadow:0 0 0 1px rgba(42,13,13,.05),0 18px 40px rgba(42,13,13,.18),0 4px 10px rgba(42,13,13,.1)}
/* the prints glide on the iOS drawer curve (CSS transitions retarget mid-flight, so quick clicks never queue up); a print
   that wraps round the back fades out and in at its new place instead of flying across (sections.js) */
.is-deck .gl__print{position:absolute;left:50%;top:0;margin-left:calc(var(--pw) / -2);transform-origin:50% 60%;transition:transform .6s cubic-bezier(.32,.72,0,1),opacity .45s ease,translate .3s var(--x-ease-out);will-change:transform}
.gl__btn{display:block;width:100%;padding:0;border:0;background:none;cursor:pointer}
.gl__print.is-front .gl__btn{cursor:zoom-in}
.gl__btn img{display:block;width:100%;height:auto;aspect-ratio:3/4;-webkit-user-drag:none}
.gl__print figcaption{height:50px;display:flex;align-items:center;justify-content:center;padding:0 6px;font:italic 500 clamp(15px,1.25vw,18px)/1.2 var(--x-serif);color:rgba(42,13,13,.8);text-align:center}
/* a print under the mouse lifts a little (translate composes with the placed transform) */
@media(hover:hover) and (pointer:fine){.is-deck .gl__print:hover{translate:0 -6px}}
@media(prefers-reduced-motion:reduce){.is-deck .gl__print{transition:none}.is-deck .gl__print:hover{translate:none}}
@media(max-width:900px){
  .gl{height:auto;min-height:calc(100svh - 52px);justify-content:flex-start;padding:56px 0 112px}
  .gl .x-h2{padding:0 16px}
  .gl__nav{margin-top:6px}
  .gl__deck{--h:clamp(220px,min(100svh - 470px,84vw),380px);margin-top:22px}
  .gl__print{padding:9px 9px 0}
  .gl__print figcaption{height:40px;font-size:14px}
}
#lb{position:fixed;inset:0;z-index:200;background:rgba(20,4,10,.95);display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .3s ease}
#lb.on{opacity:1;pointer-events:auto}
#lb img{max-width:88vw;max-height:86vh;width:auto;height:auto;border-radius:4px;transform:scale(.97);transition:transform .45s cubic-bezier(.23,1,.32,1)}
#lb.on img{transform:scale(1)}
.lb-btn{position:fixed;width:48px;height:48px;border-radius:4px;border:1px solid rgba(247,238,216,.28);background:rgba(20,4,10,.6);color:#f7eed8;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:border-color .15s,scale .16s}
.lb-btn svg{width:22px;height:22px}
.lb-btn:hover{border-color:#f7eed8}
.lb-btn:active{scale:.94}
.lb-x{top:24px;right:24px}.lb-p{left:24px;top:50%;margin-top:-24px}.lb-n{right:24px;top:50%;margin-top:-24px}

/* ── Reseñas: cream, a single serif quote ── */
.rq{padding:var(--x-section) 0;text-align:center}
.rq__title{font:italic 500 clamp(26px,2.6vw,32px)/1.2 var(--x-serif);color:var(--x-gold);margin-bottom:clamp(24px,3vw,36px)}
.rq__stage{display:grid;min-height:clamp(200px,20vw,250px);align-items:center}
.rq__q{grid-area:1/1;opacity:0;filter:blur(6px);transform:translate3d(0,10px,0);transition:opacity .7s ease,filter .7s ease,transform .7s var(--x-ease-out);pointer-events:none}
.rq__q.is-on{opacity:1;filter:none;transform:none;pointer-events:auto}
.rq__q blockquote{font:italic 500 clamp(28px,3.4vw,42px)/1.25 var(--x-serif);max-width:24ch;margin:0 auto;text-wrap:balance}
.rq__q figcaption{display:inline-flex;align-items:center;gap:10px;margin-top:22px;font:italic 500 17px/1.3 var(--x-serif);letter-spacing:.01em;color:rgba(242,213,140,.88)}
.rq__q figcaption img{width:28px;height:28px;border-radius:50%;box-shadow:0 0 0 1px rgba(242,213,140,.35)}
.rq__ctrl{display:flex;align-items:center;justify-content:center;gap:18px;margin-top:28px}
.rq__dots{display:flex;justify-content:center;gap:6px}
.rq__pause{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 12px;border:1px solid rgba(247,238,216,.3);border-radius:var(--x-r);background:transparent;color:rgba(247,238,216,.85);font:400 13px/1 var(--x-sans);cursor:pointer}
.rq__pause svg{width:14px;height:14px;fill:currentColor}
.rq__pause:hover{border-color:rgba(247,238,216,.7)}
.rq__dot{position:relative;width:16px;height:3px;border:0;padding:0;border-radius:1.5px;background:rgba(247,238,216,.28);cursor:pointer;transition:background-color .3s ease,width .45s var(--x-ease-out)}
.rq__dot::after{content:"";position:absolute;inset:-20px -4px}
.rq__dot.is-on{background:var(--x-gold);width:32px}

/* ── Pedidos: Christmas red ── */
.cl{padding:calc(var(--x-section) + 40px) 0 var(--x-section);text-align:center;overflow:hidden}
.cl__lead{margin:20px auto 0;max-width:40ch;font:500 clamp(20px,1.8vw,23px)/1.45 var(--x-serif);color:rgba(247,238,216,.9)}
.cl__cta{display:flex;justify-content:center;flex-wrap:wrap;gap:12px;margin-top:36px}
.cl__place{margin-top:24px;font:400 12px/1.4 var(--x-mono);letter-spacing:.02em;color:rgba(247,238,216,.74)}
@media(max-width:700px){.cl__cta .x-btn{width:100%}}

/* ── set dressing: sparkles, sprigs, ornaments, bokeh (all behind the content, none over a photo) ── */
.x-decor{position:absolute;inset:0;pointer-events:none;z-index:0}
.x-studio .x-decor{bottom:var(--floor)}
.spk{position:absolute;width:var(--s);height:var(--s);margin:calc(var(--s) / -2) 0 0 calc(var(--s) / -2);border-radius:50%;background:radial-gradient(circle,#fff3c4 0 22%,rgba(242,205,120,.55) 40%,rgba(242,205,120,0) 70%);opacity:var(--o)}
.glint{position:absolute;width:var(--s);height:var(--s);margin:calc(var(--s) / -2) 0 0 calc(var(--s) / -2);opacity:0;animation:glint var(--d,4s) ease-in-out var(--dl,0s) infinite}
.glint::before,.glint::after{content:"";position:absolute;left:0;top:50%;width:100%;height:1.5px;margin-top:-.75px;border-radius:1px;background:linear-gradient(90deg,rgba(255,244,207,0),#fff4cf 42%,#fff 50%,#fff4cf 58%,rgba(255,244,207,0))}
.glint::after{transform:rotate(90deg)}
@keyframes glint{0%,100%{opacity:0;transform:scale(.4) rotate(0deg)}50%{opacity:.95;transform:scale(1) rotate(25deg)}}
.x-sprig{position:absolute;pointer-events:none;width:var(--w,220px);height:var(--w,220px);z-index:0} /* square box like the 300x300 viewBox, so a baked still (which overhangs it) sits exactly where the SVG did */
.x-sprig svg{display:block;width:100%;height:auto}
/* baked sprig: drawn with 40px of the 300px viewBox as margin on every side (leaves overhang the frame) */
.x-sprig img{display:block;width:126.667%;max-width:none;height:auto;margin:-13.333% 0 0 -13.333%}
.ed__media .x-sprig--a{--w:clamp(170px,20vw,300px);left:-22%;bottom:-12%;transform:scale(-1,-1)}
.ed__media .x-sprig--b{--w:clamp(150px,18vw,270px);right:-16%;top:-10%}
.rq .x-sprig--l{--w:clamp(140px,17vw,270px);left:-28px;bottom:-24px}
.rq .x-sprig--r{--w:clamp(130px,16vw,250px);right:-28px;top:-12px;transform:scale(-1,-1)}
.bokeh{position:absolute;width:var(--s);height:var(--s);margin:calc(var(--s) / -2) 0 0 calc(var(--s) / -2);border-radius:50%;background:radial-gradient(circle,rgba(var(--c),.9) 0 46%,rgba(var(--c),.35) 62%,rgba(var(--c),0) 72%);opacity:var(--o)}
.bokeh-orn{position:absolute;width:var(--w);margin-left:calc(var(--w) / -2);filter:blur(var(--bl));opacity:.8;animation:drift var(--d,16s) ease-in-out var(--dl,0s) infinite alternate}
.bokeh-orn svg{display:block;width:100%;height:auto}
.bokeh-orn.is-baked{filter:none} /* blur baked into the still */
.bokeh-orn img{display:block;max-width:none;height:auto}
@keyframes drift{from{transform:translate3d(0,-6px,0)}to{transform:translate3d(0,6px,0)}}
.bokeh-scrim{position:absolute;left:50%;top:52%;width:min(980px,110%);height:78%;translate:-50% -50%;background:radial-gradient(closest-side,rgba(3,22,9,.62),rgba(3,22,9,0))}
@media(max-width:700px){.bokeh{opacity:calc(var(--o) * .5)}.bokeh-orn{opacity:.55}.x-sprig{--w:120px!important}.ed__media .x-sprig--a{left:-8%;bottom:-8%}.ed__media .x-sprig--b{right:-6%;top:-8%}.bokeh-orn{width:calc(var(--w) * .6);margin-left:calc(var(--w) * -.3)}}

/* ── Footer: night, the hero's own colour, closes the page ── */
footer{background:#14040a;color:rgba(247,238,216,.62);padding:0 0 28px;font-family:'Inter',system-ui,sans-serif}
.foot{width:min(1180px,100% - 48px);margin:0 auto;display:grid;grid-template-columns:2fr 1fr 1fr;gap:40px;padding:40px 0}
@media(max-width:900px){.foot{grid-template-columns:1fr 1fr}.foot>div:first-child{grid-column:1 / -1}}
@media(max-width:800px){.foot{grid-template-columns:1fr;gap:24px}}
.foot h3{font:600 22px/1.2 var(--serif);color:#f7eed8;margin-bottom:8px}
.foot h4{font:500 13px/1.3 'Inter',system-ui,sans-serif;color:#f7eed8;margin-bottom:10px}
.foot p,.foot li{font:400 13px/1.7 'Inter',system-ui,sans-serif;list-style:none}
.foot a{color:rgba(247,238,216,.82);text-decoration:none}.foot a:hover{text-decoration:underline;text-underline-offset:3px}
.foot-bottom{width:min(1180px,100% - 48px);margin:0 auto;padding-top:16px;border-top:1px solid rgba(242,213,140,.14);display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;font:400 12px/1.4 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.foot-bottom a{color:rgba(247,238,216,.82)}
@media(min-width:701px){.foot-bottom{padding-right:84px}}
footer :focus-visible{outline:2px solid #f2d58c;outline-offset:3px}

/* the dark global capsule fully leaves once the local nav takes over (its shadow would otherwise peek in) */
.past-hero .nav-wrap{transition:transform var(--dur-3) var(--ease-out),opacity .3s ease}
.past-hero .nav-wrap.hide{opacity:0}

/* ── Section rail: a garland wire on the right edge; each bulb is a section, the lit one is on screen ── */
.rail{position:fixed;right:clamp(4px,1.4vw,20px);top:50%;transform:translateY(-50%);z-index:96;font-family:'Inter',system-ui,sans-serif}
.rail__list{position:relative;list-style:none;display:flex;flex-direction:column}
.rail__list::before{content:"";position:absolute;left:50%;top:12px;bottom:12px;width:1px;margin-left:-.5px;background:rgba(242,213,140,.3)}
.rail__item{position:relative;display:grid;place-items:center;width:34px;height:34px;text-decoration:none;color:#f7eed8;-webkit-tap-highlight-color:transparent}
.rail__bulb{position:relative;width:8px;height:12px;margin-top:4px;border-radius:50% 50% 50% 50% / 58% 58% 42% 42%;background:var(--bulb,#e3263f);opacity:.42;transition:opacity .25s ease,transform .3s cubic-bezier(.23,1,.32,1),box-shadow .3s ease}
.rail__bulb::before{content:"";position:absolute;left:50%;top:-4px;width:5px;height:4px;margin-left:-2.5px;border-radius:1px;background:#3a3328}
.rail li:nth-child(4n+2) .rail__bulb{--bulb:#f4c25b}.rail li:nth-child(4n+3) .rail__bulb{--bulb:#2fb36a}.rail li:nth-child(4n+4) .rail__bulb{--bulb:#fff1cf}
.rail__item.is-on .rail__bulb{opacity:1;transform:scale(1.35);box-shadow:0 0 10px 2px var(--bulb,#e3263f)}
.rail__label{position:absolute;right:38px;top:50%;padding:6px 10px;border-radius:4px;background:rgba(20,4,10,.86);font:400 12px/1 'Inter',system-ui,sans-serif;white-space:nowrap;color:rgba(247,238,216,.82);pointer-events:none;opacity:0;transform:translate3d(6px,-50%,0);transition:opacity .2s ease,transform .25s cubic-bezier(.23,1,.32,1)}
.rail__item.is-on .rail__label{color:#f2d58c}
.rail.is-flash .rail__item.is-on .rail__label{opacity:1;transform:translate3d(0,-50%,0)}
@media (hover:hover) and (pointer:fine){
  .rail__item:hover .rail__bulb{opacity:.9;transform:scale(1.2)}
  .rail__item.is-on:hover .rail__bulb{transform:scale(1.35)}
  .rail:hover .rail__label{opacity:.9;transform:translate3d(0,-50%,0)}
  .rail__item:hover .rail__label{opacity:1;color:#fff8e6}
}
.rail:has(:focus-visible) .rail__label{opacity:.9;transform:translate3d(0,-50%,0)}
.rail__item:focus-visible{outline:2px solid #f2d58c;outline-offset:-4px;border-radius:4px}
.rail__item:active .rail__bulb{transform:scale(1.1)}
@media(max-width:700px){.rail{right:0}.rail__item{width:24px;height:32px}.rail__label{right:28px}}

/* Floating WhatsApp */
.wa-float{position:fixed;right:24px;bottom:24px;z-index:90;width:60px;height:60px;border-radius:50%;background:#25d366;display:flex;align-items:center;justify-content:center;box-shadow:0 10px 30px rgba(37,211,102,.45);transition:transform .4s var(--ease)}
.wa-float:hover{transform:scale(1.08)}
.wa-float svg{width:30px;height:30px;fill:#fff}
.wa-float::after{content:'';position:absolute;inset:0;border-radius:50%;box-shadow:0 0 0 0 rgba(37,211,102,.55);animation:ring 2.6s 1.5s 3}
@keyframes ring{to{box-shadow:0 0 0 22px rgba(37,211,102,0)}}
.cta-bar{display:none}
@media(max-width:700px){
  .wa-float{display:none}
  .cta-bar{position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));z-index:95;display:flex;align-items:center;gap:12px;min-height:56px;padding:0 22px;border-radius:999px;background:var(--red);color:#fff;text-decoration:none;font:500 15px var(--sans);box-shadow:0 14px 40px -12px rgba(0,0,0,.6);transform:translateY(160%);transition:transform var(--dur-3) var(--ease-out),scale var(--dur-1)}
  .cta-bar.show{transform:none}
  .cta-bar:active{scale:.98}
  .cta-bar svg{width:22px;height:22px;fill:currentColor}
  .cta-bar small{margin-left:auto;font-size:13px;opacity:.9;letter-spacing:.04em}
  footer{padding-bottom:110px}
}

/* Reduced motion: no sliding, no fades in motion; every section readable in its final state */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  #snow{display:none}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .after.is-ready .x-rv{opacity:1;transform:none}
  .glint{animation:none;opacity:.7}
  .bokeh-orn{animation:none}
  .rail__label,.rail__bulb{transition:none}
  .rq__q{filter:none;transform:none}
}
/* footer logo (the client's round label, phone line removed) */
.foot__logo{display:block;width:96px;height:96px;margin-bottom:16px;border-radius:50%;box-shadow:0 0 0 1px rgba(242,213,140,.3),0 8px 24px rgba(0,0,0,.35)}

/* ── accessibility & compliance (2026-10-10) ── */
/* "Pedir" buttons say where the order goes; the extra words hide only on very narrow screens (the aria-label keeps them) */
@media(max-width:600px){.btn__more{display:none}}
/* the lightbox, while closed, leaves the tab order and the accessibility tree (it fades, so visibility flips after) */
#lb{visibility:hidden;transition:opacity .3s ease,visibility 0s linear .3s}
#lb.on{visibility:visible;transition:opacity .3s ease,visibility 0s}
/* liquor notice (Ley 9047: no sale to minors) — next to the size picker and above the footer's last line */
.pd__legal{margin-top:12px;font:400 12.5px/1.5 var(--x-sans);letter-spacing:.01em;color:rgba(247,238,216,.82)}
.foot-legal{width:min(1180px,100% - 48px);margin:0 auto 14px;padding:12px 16px;border:1px solid rgba(242,213,140,.22);border-radius:4px;font:500 13px/1.5 'Inter',system-ui,sans-serif;color:#f7eed8;text-align:center}