/* THE BUBBLE WASH - Apple-style motion layer.
   Loaded after gallery.css. Everything here is progressive: without JS or with
   reduced motion the page renders exactly as before. */
:root {
  --am-ease: cubic-bezier(.16, 1, .3, 1);
  --am-glass: rgba(2, 27, 60, .84);
  /* Scroll reveals stay short so fast scrolling never lands on an empty section. */
  --am-fade: .6s;
  --am-move: .8s;
  --am-turn: .9s;
}

/* Frosted-glass navigation, like apple.com: solid over the hero, glass once content scrolls under it. */
body.tbw-gallery .gallery-header { transition: background-color .4s ease, box-shadow .4s ease; }
body.tbw-gallery .gallery-header.am-scrolled {
  background: var(--am-glass);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .06);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  body.tbw-gallery .gallery-header.am-scrolled { background: var(--gallery-dark); }
}

/* The closed cart drawer sits just off-screen; its shadow bled into the right edge on phones. */
body.tbw-gallery .cart-drawer { transition: transform 220ms ease-out, box-shadow 220ms ease-out; }
body.tbw-gallery .cart-drawer:not(.open) { box-shadow: none; }

/* Split words keep their heading's typography (older sheets restyle every span inside headings). */
body.tbw-gallery .gallery-main :is(.am-word, .am-scrub-word) { letter-spacing: inherit; font: inherit; color: inherit; }

/* Space cards: soft tone wash and a gentle lift. */
body.tbw-gallery .store-home .store-space { position: relative; overflow: hidden; isolation: isolate; transition: opacity var(--am-fade) var(--am-ease) var(--am-delay, 0ms), translate var(--am-move) var(--am-ease) var(--am-delay, 0ms), transform .6s var(--am-ease), box-shadow .6s var(--am-ease), border-color .3s ease; }
body.tbw-gallery .store-home .store-space::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .9; transition: opacity .6s var(--am-ease); }
body.tbw-gallery .store-home .store-space[data-tone="sky"]::before { background: radial-gradient(120% 70% at 0% 0%, #dff1ff 0%, rgba(223, 241, 255, 0) 62%); }
body.tbw-gallery .store-home .store-space[data-tone="mint"]::before { background: radial-gradient(120% 70% at 0% 0%, #dcf6ee 0%, rgba(220, 246, 238, 0) 62%); }
body.tbw-gallery .store-home .store-space[data-tone="blue"]::before { background: radial-gradient(120% 70% at 0% 0%, #e1e8ff 0%, rgba(225, 232, 255, 0) 62%); }

/* Scent cards: each family carries its own colour. */
body.tbw-gallery .store-scent[data-aroma] { --scent: #63c7ec; position: relative; isolation: isolate; }
body.tbw-gallery .store-scent[data-aroma="vanilla"] { --scent: #f2c48d; }
body.tbw-gallery .store-scent[data-aroma="coffee"] { --scent: #c8916a; }
body.tbw-gallery .store-scent[data-aroma="lavender"] { --scent: #b9a4f4; }
body.tbw-gallery .store-scent[data-aroma="citrus"] { --scent: #f4dc62; }
body.tbw-gallery .store-scent[data-aroma] > span:first-child { display: inline-flex; align-items: center; gap: 8px; color: var(--scent); }
body.tbw-gallery .store-scent[data-aroma] > span:first-child::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--scent); box-shadow: 0 0 12px var(--scent); }
body.tbw-gallery .store-scent[data-aroma]::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(70% 90% at 30% 40%, color-mix(in srgb, var(--scent) 22%, transparent), transparent 70%); opacity: 0; transition: opacity .6s var(--am-ease); }

@media (hover: hover) and (pointer: fine) {
  body.tbw-gallery .store-home .store-space:hover { transform: translateY(-6px); box-shadow: 0 24px 50px -24px rgba(2, 27, 60, .28); }
  body.tbw-gallery .store-scent[data-aroma]:hover::after { opacity: 1; }
  body.tbw-gallery .store-scent[data-aroma] .store-scent-arrow { transition: transform .5s var(--am-ease), color .3s ease; }
  body.tbw-gallery .store-scent[data-aroma]:hover .store-scent-arrow { transform: translateX(4px); color: var(--scent); }
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }

  /* Hero: words rise out of a soft blur, then the supporting copy follows. */
  body.tbw-gallery .am-hero .am-word { display: inline-block; animation: amRise .9s var(--am-ease) both; animation-delay: calc(100ms + var(--i) * 55ms); }
  body.tbw-gallery .am-hero .store-hero-copy > :not(h1) { animation: amRise .9s var(--am-ease) both; }
  body.tbw-gallery .am-hero .store-hero-copy > .gallery-eyebrow { animation-delay: 50ms; }
  body.tbw-gallery .am-hero .store-hero-copy > .store-intro { animation-delay: 450ms; }
  body.tbw-gallery .am-hero .store-hero-copy > .gallery-actions { animation-delay: 560ms; }
  body.tbw-gallery .am-hero .store-hero-copy > .conversion-proof { animation-delay: 660ms; }

  /* Hero photo settles in from a slow zoom; JS adds a light parallax via `translate`. */
  body.tbw-gallery .am-hero .store-hero-photo { overflow: hidden; }
  body.tbw-gallery .am-hero .store-hero-photo img { animation: amSettle 1.4s var(--am-ease) both; will-change: scale, translate; }
  body.tbw-gallery .am-hero .store-hero-photo figcaption { position: relative; z-index: 1; animation: amRise .9s var(--am-ease) 650ms both; }

  /* Scroll reveals (classes are only added by apple-motion.js, to content below the fold). */
  body.tbw-gallery .am-reveal { opacity: 0; translate: 0 24px; transition: opacity var(--am-fade) var(--am-ease), translate var(--am-move) var(--am-ease); transition-delay: var(--am-delay, 0ms); }
  body.tbw-gallery .am-reveal.am-in { opacity: 1; translate: 0 0; }

  /* Words that light up as you scroll. */
  body.tbw-gallery .am-scrub-on .am-scrub-word { opacity: var(--o, .16); transition: opacity .25s linear; }

  /* Images that open like a window as they reach the centre of the screen. */
  body.tbw-gallery .am-expand { will-change: clip-path; }
}

@keyframes amRise {
  from { opacity: 0; transform: translateY(28px); filter: blur(12px); }
  to { opacity: 1; transform: none; filter: blur(0); }
}
@keyframes amSettle {
  from { opacity: 0; scale: 1.18; }
  to { opacity: 1; scale: 1.08; }
}

/* Bubble Pay: three phones that turn and fan out with scroll.
   --spin and --fan go 0 -> 1 (set by apple-motion.js); without JS they stay at 1, the final pose. */
body.tbw-gallery .gallery-main .pay-3d { position: relative; overflow-x: clip; color: white; background: radial-gradient(70% 60% at 70% 48%, #0d3b6e 0%, #071d38 58%, #041429 100%); }
body.tbw-gallery .pay-3d > .pay-3d-pin { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); align-items: center; max-width: 1160px; min-height: 680px; margin: 0 auto; padding: 0 24px; }
body.tbw-gallery .pay-3d .pay-3d-copy { position: relative; z-index: 2; padding: 96px 0; text-align: left; }
body.tbw-gallery .gallery-main .pay-3d h2 { margin: 0; color: white; font-size: clamp(40px, 4.4vw, 60px); line-height: 1.03; letter-spacing: -.055em; }
body.tbw-gallery .pay-3d .pay-3d-copy > p:not(.gallery-eyebrow) { max-width: 420px; margin: 24px 0; color: #c1d1e1; font-size: 19px; line-height: 1.5; }
body.tbw-gallery .pay-stage { --spin: 1; --fan: 1; position: relative; height: min(620px, 80vh); display: grid; place-items: center; perspective: 1600px; perspective-origin: 50% 35%; --phone-w: clamp(160px, 15.5vw, 236px); }
body.tbw-gallery .pay-phone { position: absolute; width: var(--phone-w); aspect-ratio: 1550 / 3010; transform-style: preserve-3d; will-change: transform; }
body.tbw-gallery .pay-stage img.pay-phone-front { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: contain; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
body.tbw-gallery .pay-phone-back { position: absolute; inset: 3% 6%; display: grid; place-items: center; border-radius: 19% / 9.4%; transform: rotateY(180deg) translateZ(1px); -webkit-backface-visibility: hidden; backface-visibility: hidden; background: linear-gradient(150deg, #3a74b4 0%, #154581 34%, #0a2a55 70%, #061c3b 100%); box-shadow: inset 0 0 0 2px rgba(200, 222, 245, .45), inset 0 0 26px rgba(255, 255, 255, .1); }
body.tbw-gallery .pay-phone-back img { width: 40%; height: auto; opacity: .9; }
body.tbw-gallery .pay-phone-camera { position: absolute; top: 3%; left: 7%; width: 40%; aspect-ratio: 1; border-radius: 26%; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22), 0 2px 8px rgba(0, 0, 0, .25);
  background:
    radial-gradient(circle at 29% 29%, #070b12 0 15%, #44566d 16% 19%, transparent 20%),
    radial-gradient(circle at 29% 71%, #070b12 0 15%, #44566d 16% 19%, transparent 20%),
    radial-gradient(circle at 71% 50%, #070b12 0 15%, #44566d 16% 19%, transparent 20%),
    radial-gradient(circle at 74% 22%, rgba(255, 255, 255, .55) 0 4%, transparent 5%),
    linear-gradient(150deg, rgba(255, 255, 255, .2), rgba(255, 255, 255, .05)); }

body.tbw-gallery .pay-phone-center { z-index: 3; transform: translate3d(0, calc((1 - var(--spin)) * 70px), 0) rotateZ(calc((1 - var(--spin)) * -12deg)) rotateY(calc((1 - var(--spin)) * -180deg)) rotateX(calc((1 - var(--spin)) * 10deg)) scale(calc(.88 + var(--spin) * .12)); }
body.tbw-gallery .pay-phone-left { z-index: 1; opacity: min(1, calc(var(--fan) * 4)); transform: translate3d(calc(var(--fan) * -82%), calc(var(--fan) * 22px), calc(var(--fan) * -180px)) rotateY(calc(180deg - var(--fan) * 154deg)); }
body.tbw-gallery .pay-phone-right { z-index: 2; opacity: min(1, calc(var(--fan) * 4)); transform: translate3d(calc(var(--fan) * 82%), calc(var(--fan) * 22px), calc(var(--fan) * -180px)) rotateY(calc(-180deg + var(--fan) * 154deg)); }

body.tbw-gallery .pay-glow { position: absolute; width: 78%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(62, 205, 247, .32) 0%, rgba(8, 121, 201, .14) 38%, transparent 68%); opacity: calc(.2 + var(--spin) * .8); transform: scale(calc(.6 + var(--spin) * .45)); pointer-events: none; }
body.tbw-gallery .pay-floor { position: absolute; top: calc(50% + var(--phone-w) * .94); width: 70%; height: 34px; border-radius: 50%; background: radial-gradient(closest-side, rgba(0, 0, 0, .6), transparent); opacity: calc(.35 + var(--spin) * .65); transform: scaleX(calc(.45 + var(--fan) * .55)); pointer-events: none; }

/* Desktop: the scene pins while the phones turn (JS adds .pay-3d-live). */
@media (min-width: 834px) and (min-height: 600px) and (prefers-reduced-motion: no-preference) {
  body.tbw-gallery .gallery-main .pay-3d.pay-3d-live { height: 210vh; height: 210svh; }
  body.tbw-gallery .gallery-main .pay-3d.pay-3d-live > .pay-3d-pin { position: sticky; top: 56px; height: calc(100vh - 56px); height: calc(100svh - 56px); min-height: 0; }
}
@media (max-width: 833px) {
  body.tbw-gallery .pay-3d > .pay-3d-pin { grid-template-columns: 1fr; min-height: 0; }
  body.tbw-gallery .pay-3d .pay-3d-copy { padding: 72px 0 8px; text-align: center; }
  body.tbw-gallery .pay-3d .pay-3d-copy > p:not(.gallery-eyebrow) { margin-inline: auto; font-size: 17px; }
  body.tbw-gallery .pay-stage { height: 470px; margin-bottom: 32px; }
  body.tbw-gallery .pay-stage { --phone-w: 168px; }
  body.tbw-gallery .pay-phone-left { transform: translate3d(calc(var(--fan) * -62%), calc(var(--fan) * 18px), calc(var(--fan) * -160px)) rotateY(calc(180deg - var(--fan) * 154deg)); }
  body.tbw-gallery .pay-phone-right { transform: translate3d(calc(var(--fan) * 62%), calc(var(--fan) * 18px), calc(var(--fan) * -160px)) rotateY(calc(-180deg + var(--fan) * 154deg)); }
}

/* Bubble Pay page: each section's phone arrives turned in 3D and straightens as it scrolls in.
   --turn goes 0 -> 1 (JS); without JS it stays 1, the resting pose. */
body.tbw-gallery :is(.bubble-pay-preview, .bubble-pay-privacy, .bubble-lock-proof) figure { perspective: 1400px; }
body.tbw-gallery .am-turn { --turn: 1; transform-origin: 50% 60%; transform: translate3d(0, calc((1 - var(--turn)) * 70px), 0) rotateY(calc((1 - var(--turn)) * var(--turn-from, -42deg))) rotateX(calc((1 - var(--turn)) * 12deg)) rotateZ(calc((1 - var(--turn)) * var(--turn-tilt, 4deg))); will-change: transform; }
body.tbw-gallery .bubble-pay-privacy .am-turn { --turn-from: 42deg; --turn-tilt: -4deg; }

/* ---------- Nuestra historia ---------- */

/* Story cards (milestones and principles): card surface, pointer tilt with a soft glare. */
body.tbw-gallery .gallery-grid-three:has(.story-card) { perspective: 1400px; }
body.tbw-gallery .gallery-main .story-card { position: relative; isolation: isolate; overflow: hidden; padding: 36px 32px 34px; border: 1px solid var(--gallery-line); border-radius: 24px; background: #fff; box-shadow: 0 1px 2px rgba(2, 27, 60, .04); transform-origin: 50% 0; transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: opacity var(--am-fade) var(--am-ease) var(--am-delay, 0ms), translate var(--am-move) var(--am-ease) var(--am-delay, 0ms), rotate var(--am-turn) var(--am-ease) var(--am-delay, 0ms), transform .6s var(--am-ease), box-shadow .6s var(--am-ease); }
body.tbw-gallery .gallery-main .story-card::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(circle at var(--mx, 50%) var(--my, 0%), rgba(62, 205, 247, .18), transparent 58%); opacity: 0; transition: opacity .4s ease; }
body.tbw-gallery .gallery-main .story-card.am-tilting { transition-duration: var(--am-fade), var(--am-move), var(--am-turn), .12s, .6s; box-shadow: 0 34px 60px -32px rgba(2, 27, 60, .38); }
body.tbw-gallery .gallery-main .story-card.am-tilting::after { opacity: 1; }
body.tbw-gallery .story-card .gallery-milestone { font-variant-numeric: tabular-nums; }

/* Archive photo frame and glare. */
body.tbw-gallery .prototype-record { perspective: 1600px; }
body.tbw-gallery .prototype-record figure.am-card3d { position: relative; overflow: hidden; border-radius: 18px; box-shadow: 0 50px 90px -40px rgba(0, 0, 0, .75); }
body.tbw-gallery .am-glare { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, .16) 47%, transparent 58%) no-repeat; background-size: 260% 100%; background-position: calc(100% - var(--card, 1) * 100%) 0; opacity: calc(1 - var(--card, 1) * .7); }

/* Founder portrait: room for parallax inside its frame. */
body.tbw-gallery .gallery-founder figure[data-am-parallax] { margin: 0; overflow: hidden; }

@media (prefers-reduced-motion: no-preference) {
  /* Centered heroes (e.g. Nuestra historia). */
  body.tbw-gallery .gallery-hero.am-hero > :is(.gallery-eyebrow, .gallery-lead, .gallery-link) { animation: amRise .9s var(--am-ease) both; }
  body.tbw-gallery .gallery-hero.am-hero > .gallery-lead { animation-delay: 450ms; }
  body.tbw-gallery .gallery-hero.am-hero > .gallery-link { animation-delay: 580ms; }

  /* Hero photo lies back and rises to face you as you scroll (JS sets --rise 0 -> 1). */
  body.tbw-gallery .gallery-story-photo[data-am-rise] { perspective: 1800px; }
  body.tbw-gallery .gallery-story-photo[data-am-rise] img { transform-origin: 50% 100%; transform: rotateX(calc((1 - var(--rise, 1)) * 34deg)) scale(calc(.84 + var(--rise, 1) * .16)); will-change: transform; }
  body.tbw-gallery .gallery-story-photo[data-am-rise] figcaption { opacity: calc(var(--rise, 1) * 1.6 - .6); }

  /* Archive photo turns in like a card (JS sets --card 0 -> 1). */
  body.tbw-gallery .prototype-record figure.am-card3d { transform-origin: 50% 50%; transform: translate3d(0, calc((1 - var(--card, 1)) * 60px), calc((1 - var(--card, 1)) * -160px)) rotateY(calc((1 - var(--card, 1)) * 38deg)) rotateX(calc((1 - var(--card, 1)) * 10deg)) rotateZ(calc((1 - var(--card, 1)) * -6deg)); will-change: transform; }

  /* Story cards fall into place like dominoes. */
  body.tbw-gallery .story-card.am-reveal:not(.am-in) { rotate: 1 0 0 -62deg; }

  /* Founder portrait drifts slower than the page. */
  body.tbw-gallery .gallery-founder figure[data-am-parallax] img { scale: 1.14; translate: 0 var(--drift, 0px); will-change: translate; }
}

/* ---------- Aromas, Colección y Catálogo ---------- */

/* Each scent family's colour, usable anywhere with data-aroma. */
body.tbw-gallery [data-aroma] { --scent: #63c7ec; }
body.tbw-gallery [data-aroma="vanilla"] { --scent: #f2c48d; }
body.tbw-gallery [data-aroma="coffee"] { --scent: #c8916a; }
body.tbw-gallery [data-aroma="lavender"] { --scent: #b9a4f4; }
body.tbw-gallery [data-aroma="citrus"] { --scent: #f4dc62; }

/* Aromas: the showcase glows in the colour of the scent in view. */
@property --showcase-tint { syntax: "<color>"; inherits: true; initial-value: #3ecdf7; }
body.tbw-gallery .aromas-showcase { position: relative; isolation: isolate; transition: --showcase-tint .9s ease; }
body.tbw-gallery .aromas-showcase::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(55% 45% at 80% 26%, color-mix(in srgb, var(--showcase-tint) 34%, transparent), transparent 70%), radial-gradient(45% 40% at 10% 88%, color-mix(in srgb, var(--showcase-tint) 18%, transparent), transparent 70%); }

/* Aromas: selector pills and cards carry their scent colour. */
body.tbw-gallery .gallery-aroma-selector a[data-aroma] { display: inline-flex; align-items: center; gap: 8px; }
body.tbw-gallery .gallery-aroma-selector a[data-aroma]::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--scent); box-shadow: 0 0 10px var(--scent); }
body.tbw-gallery .aromas-showcase .gallery-aroma-grid { perspective: 1400px; }
body.tbw-gallery .aromas-showcase .gallery-aroma[data-aroma] { position: relative; isolation: isolate; overflow: hidden; transform-origin: 50% 0; transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: opacity var(--am-fade) var(--am-ease) var(--am-delay, 0ms), translate var(--am-move) var(--am-ease) var(--am-delay, 0ms), rotate var(--am-turn) var(--am-ease) var(--am-delay, 0ms), transform .6s var(--am-ease), border-color .3s ease, background-color .3s ease; }
body.tbw-gallery .aromas-showcase .gallery-aroma[data-aroma]:hover { transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); border-color: color-mix(in srgb, var(--scent) 70%, transparent); }
body.tbw-gallery .aromas-showcase .gallery-aroma[data-aroma].am-tilting { transition-duration: var(--am-fade), var(--am-move), var(--am-turn), .12s, .3s, .3s; }
body.tbw-gallery .aromas-showcase .gallery-aroma[data-aroma]::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(circle at var(--mx, 70%) var(--my, 0%), color-mix(in srgb, var(--scent) 28%, transparent), transparent 62%); opacity: .35; transition: opacity .4s ease; }
body.tbw-gallery .aromas-showcase .gallery-aroma[data-aroma]:hover::after { opacity: 1; }
body.tbw-gallery .aromas-showcase .gallery-aroma[data-aroma] .gallery-aroma-topline .gallery-eyebrow { display: inline-flex; align-items: center; gap: 8px; color: var(--scent); }
body.tbw-gallery .aromas-showcase .gallery-aroma[data-aroma] .gallery-aroma-topline .gallery-eyebrow::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--scent); box-shadow: 0 0 12px var(--scent); }

/* Colección: big line numbers turn in on their vertical axis. */
body.tbw-gallery .gallery-collection { perspective: 900px; }
body.tbw-gallery .gallery-collection-number.am-reveal { transition: opacity var(--am-fade) var(--am-ease) var(--am-delay, 0ms), translate var(--am-move) var(--am-ease) var(--am-delay, 0ms), rotate var(--am-turn) var(--am-ease) var(--am-delay, 0ms); }

@media (prefers-reduced-motion: no-preference) {
  /* Centered heroes: actions follow the headline. */
  body.tbw-gallery .gallery-hero.am-hero > .gallery-actions { animation: amRise .9s var(--am-ease) 580ms both; }

  /* Aromas hero copy and photo. */
  body.tbw-gallery .aromas-hero.am-hero .aromas-hero-copy > :not(h1) { animation: amRise .9s var(--am-ease) both; }
  body.tbw-gallery .aromas-hero.am-hero .aromas-hero-copy > .gallery-eyebrow { animation-delay: 50ms; }
  body.tbw-gallery .aromas-hero.am-hero .aromas-hero-copy > .gallery-lead { animation-delay: 450ms; }
  body.tbw-gallery .aromas-hero.am-hero .aromas-hero-copy > .gallery-actions { animation-delay: 560ms; }
  body.tbw-gallery .aromas-hero.am-hero .aromas-hero-copy > .aromas-hero-detail { animation-delay: 660ms; }
  body.tbw-gallery .aromas-hero.am-hero .aromas-hero-image img { animation: amSettle 1.4s var(--am-ease) both; will-change: scale, translate; }

  /* A wide image that lies back and rises to face you (JS sets --rise). */
  body.tbw-gallery img[data-am-rise] { transform-origin: 50% 100%; transform: perspective(1800px) rotateX(calc((1 - var(--rise, 1)) * 30deg)) scale(calc(.86 + var(--rise, 1) * .14)); will-change: transform; }

  /* Cards fall into place like dominoes; line numbers swing in. */
  body.tbw-gallery .gallery-aroma.am-reveal:not(.am-in) { rotate: 1 0 0 -62deg; }
  body.tbw-gallery .gallery-collection-number.am-reveal:not(.am-in) { rotate: 0 1 0 85deg; }
}

/* Colección: the three lines stack like cards; the one underneath recedes (JS adds .am-stack and --cover). */
@media (min-width: 834px) and (min-height: 700px) and (prefers-reduced-motion: no-preference) {
  body.tbw-gallery .gallery-collections.am-stack > .gallery-collection { position: sticky; top: 56px; transform-origin: 50% 0; transform: scale(calc(1 - var(--cover, 0) * .06)); filter: brightness(calc(1 - var(--cover, 0) * .35)); border-radius: calc(var(--cover, 0) * 28px); box-shadow: 0 -24px 48px -30px rgba(2, 27, 60, .35); }
}

/* ---------- Envíos, páginas legales, producto y 404 ---------- */
@media (prefers-reduced-motion: no-preference) {
  /* Centered heroes whose call to action sits directly under the lead (Envíos, 404). */
  body.tbw-gallery .gallery-hero.am-hero > .gallery-button { animation: amRise .9s var(--am-ease) 560ms both; }

  /* Legal and help pages: the heading writes itself in, then the reading column arrives. */
  body.tbw-gallery .policy-hero.am-hero > :not(h1) { animation: amRise .9s var(--am-ease) both; }
  body.tbw-gallery .policy-hero.am-hero > .gallery-eyebrow { animation-delay: 50ms; }
  body.tbw-gallery .policy-hero.am-hero > p:not(.gallery-eyebrow) { animation-delay: 450ms; }
  body.tbw-gallery .policy-hero.am-hero > span { animation-delay: 560ms; }
  body.tbw-gallery .policy-hero.am-hero + .policy-layout { animation: amFadeUp .8s var(--am-ease) 620ms both; }

  /* Product page: content arrives after the catalog request, so CSS (not the scroll script) runs it.
     The photo settles and the details follow; name, price and button only fade, never move. */
  body.tbw-gallery .product-detail-media { animation: amMediaIn 1.1s var(--am-ease) both; }
  body.tbw-gallery .product-detail-copy { animation: amFade .6s ease-out 150ms both; }
  body.tbw-gallery .product-information > div { animation: amFadeUp .7s var(--am-ease) both; }
  body.tbw-gallery .product-information > div:nth-child(2) { animation-delay: 80ms; }
  body.tbw-gallery .product-information > div:nth-child(3) { animation-delay: 160ms; }
  body.tbw-gallery .product-information > div:nth-child(4) { animation-delay: 240ms; }
  body.tbw-gallery .product-detail-state { animation: amFade .5s ease-out both; }
}
@keyframes amFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes amFadeUp { from { opacity: 0; translate: 0 24px; } to { opacity: 1; translate: 0 0; } }
@keyframes amMediaIn { from { opacity: 0; scale: .94; } to { opacity: 1; scale: 1; } }