/* Each scene keeps its products in a shared, proportional composition. */
html { scroll-padding-top: 0; }
.category-index { display: flex; flex-wrap: wrap; gap: 8px 28px; padding: 0 var(--margin) 42px; background: var(--paper); }
.category-index a { display: inline-flex; min-height: 44px; align-items: center; border-bottom: 1px solid #a38a7360; font-size: 14px; }
.category-index a:hover { border-color: currentColor; }
.scene { position: relative; isolation: isolate; overflow: hidden; height: max(720px, 100svh); --scene-ink: #3f3027; --scene-button: #3f3027; --scene-paper: #fff6e9; color: var(--scene-ink); scroll-margin-top: 0; }
.scene-bg { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; z-index: -2; }
.scene [data-piece] { translate: var(--float-x, 0px) var(--float-y, 0px); }
.scene-topline { position: absolute; z-index: 8; top: 30px; left: var(--margin); right: var(--margin); display: flex; align-items: center; justify-content: space-between; font-size: 12px; letter-spacing: .035em; }
.scene-topline a { min-height: 44px; display: inline-flex; align-items: center; padding: 0 13px; border: 1px solid #49382b22; border-radius: 99px; background: #fff5e6df; color: #3b3026; }
.scene h2 { margin: 0; font-weight: 500; line-height: .87; letter-spacing: -.055em; }
.eyebrow { font-size: clamp(12px, 1.1vw, 16px); letter-spacing: .02em; line-height: 1.5; }
.scene-detail { position: relative; z-index: 6; }
.scene-detail p { margin: 0 0 25px; font-size: clamp(15px, 1.35vw, 20px); line-height: 1.6; letter-spacing: -.025em; }
.scene-cta { display: inline-flex; align-items: center; justify-content: space-between; gap: 26px; min-height: 54px; padding: 17px 26px; background: var(--scene-button); color: var(--scene-paper); font-size: 15px; border-radius: 99px; transition: box-shadow 180ms, filter 180ms; }
.scene-cta:hover { filter: brightness(1.12); box-shadow: 0 8px 25px #00000018; }
.scene-cta span { font-size: 20px; }
.scene-next { position: absolute; z-index: 7; left: var(--margin); bottom: 32px; font-size: 12px; display: inline-flex; gap: 25px; min-height: 44px; align-items: center; }
.scene-next span { font-size: 23px; }
.scene :focus-visible { outline-color: currentColor; }
.wide-title { position: absolute; z-index: 1; top: 12%; left: 5%; width: 90%; text-align: center; }
.scene-fiestas { --scene-ink: #976573; --scene-button: #966071; background: #efe4d5; }
.scene-fiestas .scene-bg { object-fit: fill; }
.fiestas-copy { position: absolute; z-index: 3; left: 7%; top: 19%; width: 62%; }
.fiestas-copy h2 { font-family: Georgia, 'Times New Roman', serif; font-size: clamp(120px, 19vw, 360px); letter-spacing: -.075em; margin: 22px 0 35px; }
.fiestas-copy .scene-detail { color: #684b48; }
.fiestas-stage { position: absolute; width: min(72vw, 118svh); aspect-ratio: 1 / .85; right: -4%; bottom: 3%; z-index: 4; pointer-events: none; }
.fiestas-platform { position: absolute; width: 110%; max-width: none; left: -5%; top: 72%; }
.fiestas-dress { position: absolute; width: 94%; right: -3%; top: -2%; z-index: 3; transform-origin: 50% 90%; }
.fiestas-backflowers { position: absolute; width: 27%; right: 0; bottom: 12%; z-index: 2; }
.fiestas-vase { position: absolute; width: min(15vw, 26svh); left: -1%; bottom: 3%; z-index: 2; pointer-events: none; }
.fiestas-flowers { position: absolute; width: min(24vw, 38svh); left: -9%; bottom: -18%; z-index: 6; pointer-events: none; }
.scene-fiestas .scene-next { left: 24%; }
.scene-fiestas .scene-topline, .scene-fiestas .eyebrow, .scene-fiestas .scene-next { color: #704c54; }
.scene-pesca { --scene-ink: #f6f2dd; --scene-button: #d5eb78; --scene-paper: #17211c; background: #10191c; }
.pesca-product { position: absolute; width: min(54vw, 83svh); left: 1%; bottom: -8%; z-index: 3; transform-origin: 45% 85%; }
.pesca-copy { position: absolute; z-index: 4; left: 53%; right: 5%; top: 30%; }
.pesca-copy h2 { font-size: clamp(100px, 13vw, 250px); font-weight: 800; font-style: italic; letter-spacing: -.075em; margin: 20px 0 30px; }
.pesca-copy .eyebrow { color: #d5eb78; }
.pesca-copy h2::after { content: ''; display: block; width: 90px; height: 3px; background: #d5eb78; margin-top: 27px; }
.scene-zapatillas { --scene-ink: #123d90; --scene-button: #164eae; background: #c4dcf6; }
.scene-zapatillas .wide-title { font-size: 14.5vw; font-weight: 800; letter-spacing: -.075em; top: 15%; }
.sneaker { position: absolute; z-index: 3; object-fit: contain; }
.sneaker-left { width: min(38vw, 65svh); left: 7%; top: 29%; transform-origin: 60% 55%; }
.sneaker-right { width: min(46vw, 79svh); right: 0%; top: 26%; transform-origin: 40% 55%; }
.sneaker-detail { position: absolute; left: 8%; bottom: 14%; }
.sneaker-detail p { max-width: 270px; }
.scene-perfumeria { --scene-ink: #fff0d0; --scene-button: #fff1d5; --scene-paper: #652315; background: #9b1a0a; }
.scene-perfumeria .wide-title { font: 400 clamp(90px, 15.8vw, 290px)/.95 Georgia, 'Times New Roman', serif; letter-spacing: -.07em; top: 12%; }
.perfume-composition { position: absolute; width: min(57vw, 78svh); right: 2%; bottom: 0%; z-index: 3; transform-origin: 55% 80%; }
.perfume-detail { position: absolute; left: 7%; bottom: 15%; max-width: 35%; }
.scene-mascotas { --scene-ink: #294a30; --scene-button: #ad491d; --scene-paper: #fff7e8; background: #ced3ae; }
.scene-mascotas .wide-title { font-size: 17.8vw; font-weight: 800; letter-spacing: -.065em; top: 15%; }
.pet-dogo { position: absolute; z-index: 4; height: 77%; width: auto; max-width: 55%; object-fit: contain; right: 9%; bottom: 5%; transform-origin: 50% 92%; }
.pet-shadow { position: absolute; width: 31%; height: 3%; bottom: 6%; right: 14%; background: #213d252b; filter: blur(14px); border-radius: 50%; }
.pet-accessories { position: absolute; width: min(24vw, 39svh); right: 0%; bottom: 1%; z-index: 5; }
.pet-detail { position: absolute; left: 7%; bottom: 24%; max-width: 34%; }
.scene-ropa { --scene-ink: #fff6dc; --scene-button: #172a33; --scene-paper: #fff6e8; background: #90bcde; }
.scene-ropa .wide-title { top: 11%; font-size: 29vw; font-weight: 800; letter-spacing: -.09em; text-shadow: 0 8px 0 #eef1df, 0 16px 25px #426d7c30; }
.fashion-model { position: absolute; z-index: 3; width: min(65vw, 95svh); left: 0%; bottom: -5%; transform-origin: 55% 45%; }
.fashion-detail { position: absolute; right: 7%; bottom: 18%; color: #172a33; }
.fashion-detail p { font-size: clamp(19px, 2vw, 30px); font-weight: 500; }
.scene-ropa .scene-next { left: auto; right: 7%; bottom: 86px; color: #172a33; }
.scene-ropa .scene-topline { color: #172a33; }
.scene-trajes { --scene-ink: #472f20; --scene-button: #482d1c; background: #dcc1a0; }
.scene-trajes .scene-bg { object-fit: fill; }
.suit-copy { position: absolute; left: 7%; top: 15%; z-index: 4; }
.suit-copy h2 { font: 400 clamp(86px, min(9vw, 14svh), 160px)/.86 Georgia, 'Times New Roman', serif; letter-spacing: -.055em; margin: 30px 0 30px; }
.suit-copy h2 em { font-family: 'Instrument Serif', Georgia, serif; font-size: 1.1em; }
.scene-trajes .scene-cta { border-radius: 0; }
.suit-shoes { position: absolute; z-index: 3; width: min(37vw, 60svh); left: 12%; bottom: -1%; }
.watch-chapter { position: relative; height: 155svh; min-height: 1116px; background: #171613; }
.scene-relojes { position: sticky; top: 0; --scene-ink: #f1e8d4; --scene-button: #e6d3ae; --scene-paper: #302417; background: radial-gradient(ellipse at 83% 18%, #62503d33, transparent 50%), linear-gradient(125deg, #1b1a18, #0e0e0d); }
.scene-relojes::after { content: ''; position: absolute; z-index: -1; height: 24%; left: 0; right: 0; bottom: 0; background: linear-gradient(0deg, #38322b6b, #18171500); border-top: 1px solid #b8a68b0c; }
.watch-copy { position: absolute; left: 7%; top: 27%; width: 40%; z-index: 6; }
.watch-copy h2 { font-size: clamp(70px, 9vw, 168px); margin: 24px 0 32px; font-weight: 400; }
.watch-rule { width: 64px; height: 1px; background: #d2b88b; margin-bottom: 28px; }
.watch-copy .scene-detail p { letter-spacing: .1em; font-size: 13px; }
.watch-stage { position: absolute; width: min(58vw, 92svh); aspect-ratio: 1; right: 1%; top: 6%; z-index: 3; }
.watch-stage img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.watch-exploded { opacity: 0; }
.watch-stage.is-exploded .watch-assembled { opacity: 0; }
.watch-stage.is-exploded .watch-exploded { opacity: 1; }
.watch-controls { margin-top: 30px; }
.watch-controls button { display: inline-flex; gap: 24px; align-items: center; background: transparent; border-bottom: 1px solid #ad977172; min-height: 44px; padding: 0; font-size: 13px; }
.watch-caption { display: block; color: #c5b9a4; font-size: 12px; margin-top: 14px; }
.scene-accesorios { --scene-ink: #fff0cb; --scene-button: #f2e5c4; --scene-paper: #363c20; background: #4a5030; }
.scene-accesorios .wide-title { font: 400 clamp(96px, 16.1vw, 300px)/.92 Georgia, 'Times New Roman', serif; letter-spacing: -.065em; top: 12%; }
.bag-composition { position: absolute; z-index: 3; width: min(66vw, 112svh); left: -1%; bottom: -12%; transform-origin: 50% 80%; }
.bag-detail { position: absolute; z-index: 4; right: 8%; top: 56%; }
.bag-detail p { font-size: clamp(15px, 1.5vw, 23px); }
.scene-accesorios .scene-next { left: auto; right: 8%; bottom: 86px; }
.scene-otros { --scene-ink: #493225; --scene-button: #4c3528; background: #e6d8c8; }
.scene-otros .scene-bg { object-fit: fill; }
.other-copy { position: absolute; z-index: 4; left: 7%; top: 18%; }
.other-copy h2 { font: 400 clamp(74px, 8.7vw, 166px)/1 Georgia, 'Times New Roman', serif; margin: 22px 0 24px; }
.closing { padding: 100px var(--margin) 0; background: #eee3d3; }
.closing > h2 { margin: 24px 0 60px; font-size: clamp(52px, 7vw, 130px); line-height: 1.02; letter-spacing: -.065em; font-weight: 500; }
.closing > h2 em { font: italic 400 1.15em 'Instrument Serif', Georgia, serif; }
.closing-bottom { display: flex; align-items: center; justify-content: space-between; gap: 28px; padding-bottom: 90px; }
.closing-bottom p { color: #624f41; font-size: 17px; line-height: 1.7; }
.site-footer { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; padding: 30px 0; border-top: 1px solid #927b666b; font-size: 12px; }
.site-footer a { min-height: 44px; display: flex; align-items: center; }
.site-footer > span { display: flex; align-items: center; color: #715f50; }
.journey-tools { position: fixed; z-index: 15; right: 22px; bottom: 18px; display: flex; align-items: center; gap: 15px; padding: 5px 16px; color: #38291e; background: #faf3e7f2; border: 1px solid #8d786b45; border-radius: 99px; box-shadow: 0 5px 30px #1b120e0a; font-size: 11px; }
.journey-tools[hidden] { display: none; }
.journey-tools button, .journey-tools a { display: inline-flex; min-height: 38px; padding: 0; background: transparent; align-items: center; }
.journey-tools button { font-size: 11px; }
.journey-current { font-weight: 600; }
.demo-dialog { color: var(--ink); background: var(--paper); border: 0; border-radius: 8px; padding: 54px; width: min(620px, calc(100vw - 32px)); max-height: calc(100svh - 32px); }
.demo-dialog::backdrop { background: #24170c80; }
.demo-dialog h2 { font-size: clamp(34px, 4vw, 48px); font-weight: 500; line-height: 1.05; letter-spacing: -.05em; margin: 22px 0 28px; }
.demo-dialog h2 em { font: italic 400 1.2em 'Instrument Serif', Georgia, serif; }
.demo-dialog > p:not(.eyebrow) { font-size: 16px; line-height: 1.65; color: var(--muted); }
.demo-dialog .primary-button { font-size: 15px; margin-top: 18px; }
html.motion-paused { scroll-behavior: auto !important; }
html.motion-paused .watch-chapter { height: auto; min-height: 0; }
html.motion-paused .scene-relojes { position: relative; }

@media (min-width: 761px) and (max-height: 780px) {
  .fiestas-copy { top: 16%; }
  .fiestas-copy h2 { font-size: 17vw; margin-bottom: 22px; }
  .suit-copy { top: 13%; }
  .suit-copy h2 { font-size: min(9vw, 14svh); margin: 20px 0; }
}
@media (max-width: 760px), (max-width: 1100px) and (max-aspect-ratio: 1/1) {
  .category-index { gap: 0 23px; padding-bottom: 32px; }
  .category-index a { font-size: 13px; }
  .scene { height: max(800px, 100svh); }
  .scene-topline { top: 16px; font-size: 10px; }
  .scene-next { bottom: 14px; font-size: 10px; gap: 18px; }
  .eyebrow { font-size: 12px; }
  .scene-detail p { font-size: 14px; margin-bottom: 18px; }
  .scene-cta { padding: 15px 21px; font-size: 13px; min-height: 50px; gap: 18px; }
  .scene-fiestas .scene-bg { object-fit: cover; object-position: 63% center; }
  .fiestas-copy { left: 7%; top: 12%; width: 86%; }
  .fiestas-copy h2 { font-size: 28vw; margin: 24px 0; }
  .fiestas-copy .eyebrow { max-width: 220px; }
  .fiestas-copy .scene-detail { margin-top: 4px; }
  .fiestas-stage { width: 115%; right: -19%; bottom: 12%; }
  .fiestas-vase { width: 29%; left: -4%; bottom: 11%; }
  .fiestas-flowers { width: 40%; left: -18%; bottom: -3%; }
  .scene-fiestas .scene-next { left: 7%; }
  .pesca-product { width: 94%; left: -17%; bottom: -2%; max-width: none; }
  .pesca-copy { left: 7%; right: 7%; top: 13%; }
  .pesca-copy h2 { font-size: 28vw; margin: 20px 0 20px; }
  .pesca-copy h2::after { margin-top: 20px; }
  .scene-pesca .scene-next { left: 7%; right: auto; }
  .scene-zapatillas .wide-title { top: 16%; font-size: 13.7vw; left: 3%; width: 94%; }
  .sneaker-left { width: 70%; left: -7%; top: 27%; }
  .sneaker-right { width: 80%; right: -14%; top: 36%; }
  .sneaker-detail { left: 7%; bottom: 14%; }
  .scene-perfumeria .wide-title { font-size: 17vw; top: 15%; }
  .perfume-composition { width: 112%; max-width: none; right: -20%; bottom: 25%; }
  .perfume-detail { left: 7%; bottom: 10%; max-width: 88%; }
  .perfume-detail p { max-width: 250px; }
  .scene-mascotas .wide-title { font-size: 19vw; top: 15%; }
  .pet-dogo { height: 53%; max-width: 86%; right: 3%; bottom: 25%; }
  .pet-shadow { width: 60%; bottom: 25%; right: 10%; }
  .pet-accessories { width: 45%; right: -3%; bottom: 20%; }
  .pet-detail { left: 7%; bottom: 10%; max-width: 87%; }
  .scene-ropa .wide-title { top: 13%; font-size: 32vw; }
  .fashion-model { width: 112%; max-width: none; left: -13%; bottom: 26%; }
  .fashion-detail { right: auto; left: 7%; bottom: 10%; }
  .fashion-detail p { font-size: 17px; line-height: 1.4; }
  .scene-ropa .scene-next { left: 7%; right: auto; bottom: 14px; }
  .scene-trajes { background: #e9d6bf; }
  .scene-trajes .scene-bg { object-fit: cover; object-position: center; }
  .suit-copy { left: 7%; right: 7%; top: 9%; }
  .suit-copy .eyebrow { max-width: none; }
  .suit-copy h2 { font-size: 20vw; margin: 20px 0; }
  .suit-copy .scene-detail p { max-width: none; font-size: 13px; }
  .scene-trajes .scene-cta { max-width: 270px; }
  .suit-shoes { width: 67%; left: -8%; bottom: 3%; }
  .scene-trajes .scene-next { left: 7%; right: auto; }
  .watch-chapter { height: auto; min-height: 0; }
  .scene-relojes { position: relative; }
  .watch-copy { top: 12%; left: 7%; width: 86%; }
  .watch-copy h2 { font-size: 20vw; margin: 20px 0; }
  .watch-rule { margin-bottom: 20px; }
  .watch-stage { width: 95%; right: 0%; top: 50%; }
  .watch-controls { margin-top: 18px; }
  .watch-caption { font-size: 10px; }
  .scene-relojes .scene-next { bottom: 10px; }
  .scene-accesorios .wide-title { top: 15%; font-size: 16.5vw; }
  .bag-composition { width: 113%; max-width: none; left: -23%; bottom: 22%; }
  .bag-detail { right: auto; left: 7%; top: auto; bottom: 10%; }
  .scene-accesorios .scene-next { left: 7%; right: auto; bottom: 14px; }
  .scene-otros .scene-bg { object-fit: cover; object-position: center; }
  .other-copy { top: 12%; left: 7%; right: 7%; }
  .other-copy h2 { font-size: 17vw; margin: 20px 0; }
  .other-copy .scene-detail p { max-width: 220px; }
  .closing { padding-top: 70px; }
  .closing > h2 { font-size: clamp(44px, 10vw, 76px); margin-bottom: 28px; }
  .closing-bottom { flex-direction: column; align-items: flex-start; padding-bottom: 55px; gap: 16px; }
  .closing-bottom p { font-size: 15px; }
  .site-footer { gap: 0 20px; padding-bottom: 80px; }
  .site-footer > span { width: 100%; order: 3; }
  .journey-tools { bottom: 10px; right: 12px; gap: 13px; padding: 2px 13px; }
  .journey-current { display: none; }
  .journey-tools button { font-size: 0; width: 30px; min-height: 44px; justify-content: center; }
  .journey-tools button::before { content: 'Ⅱ'; font-size: 15px; }
  .journey-tools button[aria-pressed="true"]::before { content: '▷'; }
  .journey-tools a { min-height: 44px; }
  .demo-dialog { padding: 45px 26px 32px; }
}
@media (min-width: 600px) and (max-width: 1100px) and (max-aspect-ratio: 1/1) {
  .fiestas-stage { width: min(100%, 90svh); right: -10%; bottom: 5%; }
  .fiestas-vase { width: 22%; }
  .fiestas-flowers { width: 31%; left: -13%; }
  .sneaker-left { width: 55%; top: 28%; left: -2%; }
  .sneaker-right { width: 60%; top: 32%; right: -3%; }
  .perfume-composition { width: min(84%, 58svh); right: 2%; bottom: 25%; }
  .scene-ropa .wide-title { font-size: 26vw; top: 12%; }
  .fashion-model { width: min(98%, 60svh); left: -2%; bottom: 24%; }
  .bag-composition { width: min(100%, 70svh); left: -8%; bottom: 23%; }
  .watch-copy { top: 10%; }
  .watch-copy h2 { font-size: 14vw; }
  .watch-stage { width: min(90%, 56svh); top: 46%; right: 0; }
  .suit-shoes { width: min(53%, 48svh); left: -2%; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  .watch-chapter { height: auto; min-height: 0; }
  .scene-relojes { position: relative; }
}