/* Generated by build-motion-css.js from motion/lib/pieces.css. Do not edit by hand. */
:root { --fast: .3s; --medium: .6s; --slow: 1s; --gutter: var(--gut); --cobre-hondo: #875A40; }
/* Tesón · styles for the motion pieces (import after motion.css). One block per module. */

/* ---------- El servido (pour.js) ---------- */
.pour { position: relative; }
.pour__stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.pour__canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.pour__copy { position: absolute; z-index: 2; left: var(--gutter); top: 18vh; max-width: 420px; display: grid; gap: 18px; }
.pour__steps { display: flex; gap: 6px; list-style: none; padding: 0; margin: 6px 0 0; flex-wrap: wrap; }
.pour__steps li { font-family: var(--caps); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; padding: 8px 14px; border-radius: 999px; border: 1px solid rgba(29,29,27,.18); color: var(--ink-muted); transition: all var(--medium) var(--ease-out); }
.pour__steps li.is-on { background: var(--tinta); color: var(--crema); border-color: var(--tinta); }
.pour__notes { list-style: none; margin: 0; padding: 0; position: absolute; inset: 0; pointer-events: none; z-index: 3; }
.pour__pill { --tx: -50%; position: absolute; transform: translate(var(--tx), -50%) translateY(14px); opacity: 0; filter: blur(6px);
  display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px 10px 12px; border-radius: 999px; white-space: nowrap;
  background: rgba(255, 252, 245, .62); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid rgba(29,29,27,.08);
  box-shadow: 0 10px 30px -18px rgba(29,29,27,.45); font-size: 16px; font-style: italic; color: var(--tinta);
  transition: opacity var(--medium) var(--ease-out), transform var(--slow) var(--ease-out), filter var(--medium) var(--ease-out); }
.pour__pill b { font-family: var(--caps); font-style: normal; font-weight: 400; font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--cobre-hondo); }
.pour__dot { width: 8px; height: 8px; border-radius: 50%; background: #7a1530; box-shadow: 0 0 0 3px rgba(122,21,48,.15); }
.pour__pill[data-side="r"] { --tx: 0%; }
.pour__pill[data-side="l"] { --tx: -100%; }
.pour__pill.is-in { opacity: 1; transform: translate(var(--tx), -50%); filter: none; animation: pill-float 6s var(--d, 0s) ease-in-out infinite; }
@keyframes pill-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -6px; } }
@media (max-width: 700px) {
  .pour__copy { top: 76px; right: var(--gutter); max-width: none; gap: 10px; }
  .pour__copy .lede { display: none; }
  .pour__pill { font-size: 14px; padding: 8px 12px 8px 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .pour__stage { position: relative; }
  .pour__pill { opacity: 1; transform: translate(var(--tx), -50%); filter: none; }
}
/* ---------- Botella viva (bottle.js) ---------- */
.bv { --h: min(74vh, 700px); --ry: 0; --lift: .5; position: relative; display: grid; place-items: center; min-height: calc(var(--h) * 1.22);
  background: var(--stage, var(--crema)); color: var(--stage-ink, var(--tinta)); transition: background var(--slow) var(--ease-io), color var(--slow) var(--ease-io); perspective: 1400px; overflow: hidden; isolation: isolate; }
.bv__halo { position: absolute; left: 50%; top: 46%; width: calc(var(--h) * .95); aspect-ratio: 1; translate: calc(-50% + var(--ry) * -18px) -50%; border-radius: 50%; z-index: -1;
  background: radial-gradient(closest-side, rgba(255, 247, 232, .95), rgba(255, 238, 214, .35) 55%, transparent 72%); transition: opacity var(--slow) var(--ease-io); }
.bv--dark .bv__halo { background: radial-gradient(closest-side, rgba(255, 236, 214, .22), rgba(193, 126, 85, .10) 55%, transparent 72%); }
.bv__floor { position: absolute; left: 50%; top: calc(50% + var(--h) * .5); width: 0; height: 0; }
.bv__shadow { position: absolute; left: 0; top: 0; width: calc(var(--h) * .36); height: calc(var(--h) * .06); translate: calc(-50% + var(--ry) * 10px) -50%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(29, 29, 27, .5), transparent); scale: calc(1.08 - var(--lift) * .16); opacity: calc(1 - var(--lift) * .3); }
.bv--dark .bv__shadow { background: radial-gradient(closest-side, rgba(0, 0, 0, .75), transparent); }
.bv__caustic { position: absolute; left: 0; top: 0; width: calc(var(--h) * .34); height: calc(var(--h) * .07); translate: calc(-35% + var(--ry) * -22px) 10%; border-radius: 50%;
  background: radial-gradient(closest-side, var(--wine-rim), transparent); opacity: .22; mix-blend-mode: multiply; filter: blur(6px); }
.bv--dark .bv__caustic { mix-blend-mode: screen; opacity: .35; }
.bv__tilt { will-change: transform; }
/* flat on purpose: preserve-3d breaks masked, blended layers in Chrome */
.bv__float { position: relative; will-change: transform; transition: opacity .45s var(--ease-io), filter .45s var(--ease-io), translate .45s var(--ease-io), scale .45s var(--ease-io); }
.bv__bottle { position: relative; height: var(--h); aspect-ratio: 431 / 1600; }
.bv__img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 2px 1px rgba(0,0,0,.15)); }
.bv__fx { position: absolute; inset: 0; pointer-events: none;
  -webkit-mask: var(--mask) center / 100% 100% no-repeat; mask: var(--mask) center / 100% 100% no-repeat; }
/* wine glowing through the shoulder and the heel, never over the label or the capsule */
.bv__wine { mix-blend-mode: screen; opacity: .85;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--wine-rim) 60%, transparent) 0%, color-mix(in srgb, var(--wine-rim) 18%, transparent) 7%, transparent 16%, transparent 84%, color-mix(in srgb, var(--wine-rim) 22%, transparent) 94%, color-mix(in srgb, var(--wine-rim) 45%, transparent) 100%),
    radial-gradient(34% 11% at calc(33% + var(--ry) * -14%) 33.5%, color-mix(in srgb, var(--wine-rim) 80%, transparent), transparent 72%),
    radial-gradient(40% 8% at calc(40% + var(--ry) * -12%) 92%, color-mix(in srgb, var(--wine-rim) 80%, transparent), transparent 80%);
  -webkit-mask: var(--mask) center / 100% 100% no-repeat, linear-gradient(180deg, transparent 20%, #000 25%, #000 calc(var(--label-top) - 2%), transparent var(--label-top), transparent var(--label-bot), #000 calc(var(--label-bot) + 1.5%), #000 97%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask: var(--mask) center / 100% 100% no-repeat, linear-gradient(180deg, transparent 20%, #000 25%, #000 calc(var(--label-top) - 2%), transparent var(--label-top), transparent var(--label-bot), #000 calc(var(--label-bot) + 1.5%), #000 97%, transparent 100%);
  mask-composite: intersect; }
/* backlight rim on the silhouette */
.bv__rim { mix-blend-mode: screen; background: linear-gradient(90deg, rgba(255, 236, 220, .55) 0%, transparent 5%, transparent 95%, rgba(255, 236, 220, .4) 100%); }
/* specular streaks: slide against the tilt so the glass reads as a cylinder; weaker over the paper label */
.bv__spec { mix-blend-mode: screen;
  background: linear-gradient(90deg, transparent calc(15% - var(--ry) * 7%), rgba(255, 255, 255, .55) calc(19% - var(--ry) * 7%), rgba(255, 255, 255, .12) calc(23% - var(--ry) * 7%), transparent calc(27% - var(--ry) * 7%),
    transparent calc(76% - var(--ry) * 5%), rgba(255, 255, 255, .22) calc(80% - var(--ry) * 5%), transparent calc(83% - var(--ry) * 5%));
  -webkit-mask: var(--mask) center / 100% 100% no-repeat, linear-gradient(180deg, #000 0, #000 calc(var(--label-top) - 1%), rgba(0,0,0,.28) var(--label-top), rgba(0,0,0,.28) var(--label-bot), #000 calc(var(--label-bot) + 1%));
  -webkit-mask-composite: source-in;
  mask: var(--mask) center / 100% 100% no-repeat, linear-gradient(180deg, #000 0, #000 calc(var(--label-top) - 1%), rgba(0,0,0,.28) var(--label-top), rgba(0,0,0,.28) var(--label-bot), #000 calc(var(--label-bot) + 1%));
  mask-composite: intersect; }
/* slow diagonal sweep of light, also catches the foil on the label */
.bv__sweep { mix-blend-mode: soft-light; overflow: hidden; }
.bv__sweep::before { content: ""; position: absolute; top: -20%; bottom: -20%; left: -60%; width: 55%; transform: skewX(-16deg) translateX(-120%);
  background: linear-gradient(90deg, transparent, rgba(255, 244, 228, .9) 45%, rgba(255, 255, 255, 1) 50%, rgba(255, 244, 228, .9) 55%, transparent);
  animation: bv-sweep 7.5s var(--ease-io) 1.2s infinite; }
@keyframes bv-sweep { 0% { transform: skewX(-16deg) translateX(-120%); } 38%, 100% { transform: skewX(-16deg) translateX(420%); } }
.bv__reflect { position: absolute; left: 0; right: 0; top: 100%; height: 100%; opacity: .2; transform: scaleY(-1);
  -webkit-mask: linear-gradient(to top, #000, transparent 26%); mask: linear-gradient(to top, #000, transparent 26%); pointer-events: none; }
.bv__reflect img { width: 100%; height: 100%; object-fit: contain; }
.bv--dark .bv__reflect { opacity: .14; }
/* switching */
.bv.is-leaving .bv__float { opacity: 0; filter: blur(6px); translate: 0 36px; scale: .98; }
.bv.is-entering .bv__float { opacity: 0; filter: blur(6px); translate: 0 48px; scale: .98; transition: none; }
.bv:not(.is-leaving) .bv__float { transition-duration: 1s; transition-timing-function: var(--ease-out); }
@media (prefers-reduced-motion: reduce) {
  .bv__sweep::before { animation: none; display: none; }
}
@keyframes ts-stamp { 0% { opacity: 0; transform: scale(1.35) rotate(-8deg); filter: blur(3px); } 55% { opacity: 1; transform: scale(.97) rotate(0); filter: none; } 100% { transform: none; } }
@keyframes ts-foil { from { transform: translateX(-140%) skewX(-18deg); } to { transform: translateX(260%) skewX(-18deg); } }
/* ---------- Transición líquida (wave.js) ---------- */
.tw-canvas { position: fixed; inset: 0; width: 100vw; height: 100vh; height: 100dvh; z-index: 9000; pointer-events: none; visibility: hidden; }
/* ---------- La gota (drop.js) ---------- */
.drop { position: relative; min-height: var(--len, 320vh); }
.drop__stage { position: sticky; top: 0; height: 100vh; height: 100svh; margin-bottom: -100vh; margin-bottom: -100svh; pointer-events: none; }
.drop__canvas { width: 100%; height: 100%; display: block; }
.drop__copy { position: relative; z-index: 2; margin-left: 58%; width: min(420px, 36%); padding: 40vh 0 50vh; display: grid; gap: 60vh; }
.drop__copy article { display: grid; gap: 14px; }
@media (max-width: 760px) {
  .drop__copy { margin: 0 var(--gutter); width: auto; padding: 88vh 0 40vh; gap: 70vh; }
  .drop__copy article { background: rgba(255, 247, 232, .72); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); padding: 20px; border-radius: 4px; }
}
@keyframes tl-in { from { opacity: 0; translate: 0 8px; } to { opacity: 1; translate: 0 0; } }
/* SpellLoader timing from teson-ds. Animates the individual `translate`/`scale` properties, not `transform`,
   so the glyphs keep their SVG transform="matrix(..)" (a CSS transform would replace it), and no
   transform-box/origin (they would also move the attribute matrix). Dots only fade. */
@keyframes tl-letter { from { opacity: 0; translate: 0 6px; } to { opacity: 1; translate: 0 0; } }
@keyframes tl-dot { from { opacity: 0; } to { opacity: 1; } }
@keyframes tc-bump { 0% { transform: scale(1); } 30% { transform: scale(1.45); } 100% { transform: scale(1); } }
@keyframes tc-catch { 0% { transform: translateY(0); } 30% { transform: translateY(3px) scaleY(.96); } 100% { transform: none; } }
/* ---------- Brillo del foil (cart.js · TesonFoil) ---------- */
.tf { display: grid; place-items: center; }
.tf__card { position: relative; width: 100%; will-change: transform;   /* no preserve-3d: in Chrome it drops the mask on the blended sheen */
  filter: drop-shadow(0 24px 30px rgba(29,29,27,.28)); }
.tf__img { width: 100%; height: auto; }
.tf__sheen { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: color-dodge;
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  background:
    radial-gradient(circle at var(--gx, 50%) var(--gy, 40%), rgba(255, 222, 178, .85), rgba(255, 196, 150, .3) 12%, transparent 30%),
    linear-gradient(115deg, transparent calc(var(--gx, 50%) - 14%), rgba(255, 232, 200, .4) var(--gx, 50%), transparent calc(var(--gx, 50%) + 14%)); }
/* ---------- La botella desciende (descend.js + spin.js) ---------- */
.descend { position: relative; background: var(--page, var(--crema)); color: var(--ink, var(--tinta)); transition: background var(--slow) var(--ease-io), color var(--slow) var(--ease-io); }
.descend__stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.descend__canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.descend__lines { position: absolute; inset: 0; pointer-events: none; }
.descend__lines [data-at] { position: absolute; top: 50%; max-width: min(34vw, 460px); margin: 0; opacity: 0; filter: blur(8px);
  font-family: var(--display); font-style: italic; font-weight: 500; font-size: clamp(34px, 5vw, 72px); line-height: .98; letter-spacing: -.01em;
  transition: opacity .7s var(--ease-out), translate 1s var(--ease-out), filter .7s var(--ease-out); }
.descend__lines [data-side="l"] { left: var(--gutter); translate: -30px -50%; }
.descend__lines [data-side="r"] { right: var(--gutter); text-align: right; translate: 30px -50%; }
.descend__lines [data-at].is-in { opacity: 1; filter: none; translate: 0 -50%; }
.descend__lines small { display: block; font-family: var(--caps); font-style: normal; font-size: 11px; letter-spacing: .24em; text-transform: uppercase; margin-bottom: 14px; opacity: .75; }
@media (max-width: 700px) {
  .descend__lines [data-at] { top: auto; bottom: 9vh; left: var(--gutter); right: var(--gutter); max-width: none; text-align: left; font-size: 34px; translate: 0 20px; }
  .descend__lines [data-at].is-in { translate: 0 0; }
}
/* ---------- Servir en la caja (cart.js · TesonBox) ---------- */
.tb { display: inline-flex; align-items: center; gap: 12px; }
.tb__box { position: relative; width: 74px; height: 50px; display: block; }
.tb__slots { position: absolute; left: 6px; right: 6px; top: 2px; height: 24px; display: grid; grid-template-columns: repeat(6, 1fr); gap: 2px; align-items: end; }
.tb__slots i { display: block; height: 22px; width: 7px; justify-self: center; border-radius: 3px 3px 0 0; background: var(--cap, #222);
  box-shadow: inset 2px 0 0 rgba(255,255,255,.18); transform: translateY(18px); opacity: 0; transition: transform .5s var(--ease-out), opacity .2s; }
.tb__slots i.is-in { transform: none; opacity: 1; animation: tb-pop .55s var(--ease-out); }
@keyframes tb-pop { 0% { transform: translateY(18px); } 60% { transform: translateY(-4px); } 100% { transform: none; } }
.tb__front { position: absolute; left: 0; right: 0; bottom: 0; height: 30px; background: linear-gradient(180deg, #d9b48f, #c49a73); border: 1.5px solid var(--cobre-hondo); border-radius: 2px;
  display: grid; place-items: center; box-shadow: inset 0 2px 0 rgba(255,255,255,.35); }
.tb__front b { font-family: var(--display); font-style: italic; font-weight: 500; font-size: 18px; color: var(--cobre-hondo); line-height: 1; }
.tb__lid { position: absolute; left: -2px; right: -2px; bottom: 28px; height: 6px; background: #c49a73; border: 1.5px solid var(--cobre-hondo); border-radius: 2px; transform-origin: 0 100%; transform: rotate(-70deg) scaleX(.5); opacity: 0; transition: transform .6s var(--ease-out), opacity .2s; }
.tb.is-full .tb__lid { opacity: 1; transform: none; transition-delay: .25s; }
.tb.is-full .tb__slots i { transform: translateY(10px); transition-delay: .1s; }
.tb.is-bump .tb__box { animation: tb-squash .45s var(--ease-out); }
@keyframes tb-squash { 0% { transform: none; } 35% { transform: scaleY(.9) scaleX(1.05); } 100% { transform: none; } }
.tb__txt { display: grid; line-height: 1.1; text-align: left; }
.tb__n { font-family: var(--caps); font-size: 15px; letter-spacing: .08em; }
.tb__txt small { font-family: var(--display); font-style: italic; font-size: 13px; letter-spacing: 0; text-transform: none; opacity: .75; }
.tb.is-full .tb__n { color: var(--rojo); }
.tb-fly { height: 1px; position: fixed; left: 0; top: 0; z-index: 9500; pointer-events: none; width: auto; max-width: none; filter: drop-shadow(0 8px 10px rgba(0,0,0,.25)); }