/* Campamento Evermonth · Halloween reel (halloween.html). Also the reel engine of the home (index.html).
   Loads after styles.css (tokens, fonts, .btn, .display, .eyebrow, .ticket).
   Does NOT load halloween.css. The parts it needs are copied here.

   How it works:
   - .m-reel is the scroller. Each .m-slide snaps to the top (one swipe = one slide).
   - halloween-m.js sets --in / --out (0..1) on each slide while you scroll.
     The outgoing content drifts slower than the scroll and fades: the next one "pushes" it.
     Slides have no own edges (no background, border, corners or shadow).
   - The live slide gets .is-live. Its [data-step] children play in order.
     Leaving the slide resets them, so it replays like a reel. */

.m-page {
  --noche: #0b2430;
  --navy-hw: #133243;
  --calabaza: #e85f1b;
  --amber: #f0a015;
  --oxido: #5a2619;
  --oxido-claro: #983215;
  --navy: #0b2430;
  /* Background tones the JS fades between (r, g, b). Version B changes them. */
  --tone-noche: 11, 36, 48;
  --tone-oxido: 59, 26, 18;
  --tone-calabaza: 232, 95, 27;
  --gut: 20px;          /* side gutter */
  --top: 84px;          /* room for the logo */
  --bar: 76px;          /* height of the bottom bar, without the iPhone home area */
  --bottom: calc(var(--bar) + 28px + env(safe-area-inset-bottom)); /* bar + clear space above it */
  height: 100%;
  overflow: hidden;
  background: var(--noche);
  color: var(--pergamino);
}
html:has(.m-page) { height: 100%; overflow: hidden; scroll-behavior: auto; }

/* ---------- Shell, scroller, slides ---------- */
.m-shell { position: fixed; inset: 0; overflow: hidden; background: var(--bg, var(--noche)); container-type: size; }
.m-reel {
  position: absolute; inset: 0;
  overflow-y: auto; overflow-x: hidden;
  scroll-snap-type: y mandatory;
  overscroll-behavior: contain;
  scrollbar-width: none;
  outline: none;
}
.m-reel::-webkit-scrollbar { display: none; }

/* Slides have no background, border or shadow of their own: the page reads as one
   continuous night. Any edge you see is on purpose (a photo block, a paper card). */
.m-slide {
  position: relative;
  min-height: 100%;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  display: flex; flex-direction: column;
  overflow: clip; /* nothing from one slide ever shows on top of the next */
  isolation: isolate;
  --in: 0; --out: 0;
}
/* Push: the outgoing content fades and shrinks a little in place.
   It does not move, so it never slides into the next slide. */
.m-slide__in {
  position: relative;
  flex: 1 0 auto;
  display: flex; flex-direction: column;
  transform: scale(calc(1 - var(--out) * .05));
  transform-origin: 50% 0;
  opacity: calc(1 - var(--out) * 1.3);
  will-change: transform, opacity;
}

/* Long slides: content can be taller than the screen. You scroll inside, then snap on. */
.m-pad { padding-left: var(--gut); padding-right: var(--gut); }
.m-pad--top { padding-top: var(--top); padding-bottom: var(--bottom); justify-content: center; gap: 22px; }

/* ---------- Play-in steps ----------
   Without JS everything just shows. The <head> script adds .js; only then do
   steps start hidden and wait for their slide to go live. */
[data-step] {
  --d: 0;
  --rot: rotate(calc(var(--r, 0) * 1deg));
  transform: var(--rot);
  transition: opacity .45s ease, transform .6s cubic-bezier(.2,.7,.2,1);
}
.js [data-step] { opacity: 0; transform: translateY(26px) var(--rot); }
.js [data-step][data-fx="fade"]  { transform: var(--rot); }
.js [data-step][data-fx="left"]  { transform: translateX(-46px) var(--rot); }
.js [data-step][data-fx="right"] { transform: translateX(46px) var(--rot); }
.js [data-step][data-fx="zoom"]  { transform: scale(.7) var(--rot); }
.js [data-step][data-fx="stamp"] { transform: scale(1.8) rotate(calc(var(--r, 0) * 1deg - 8deg)); }
.js [data-step][data-fx="drop"]  { transform: translateY(-90px) rotate(calc(var(--r, 0) * 1deg - 14deg)); }
.js [data-step][data-fx="swing"] { transform: rotate(calc(var(--r, 0) * 1deg - 18deg)); transform-origin: 0 50%; }
.js [data-step][data-fx="deal"]  { transform: translate(60px, 40px) rotate(calc(var(--r, 0) * 1deg + 10deg)); }
.js [data-step][data-fx="grow"]  { transform: scaleY(0); transform-origin: 50% 0; }
.js [data-step][data-fx="fly"]   { transform: translate(-140px, 80px) rotate(-40deg) scale(.6); }
[data-step][data-fx="stamp"], [data-step][data-fx="drop"], [data-step][data-fx="deal"], [data-step][data-fx="swing"], [data-step][data-fx="fly"] {
  transition: opacity .3s ease, transform .55s cubic-bezier(.3,1.5,.5,1);
}

/* "First frame": step 0 (photo, eyebrow) is already there while the slide slides in. */
.m-slide.is-near [data-step="0"],
.m-slide.is-live [data-step] {
  opacity: 1;
  transform: var(--rot);
  transition-delay: calc(var(--d) * 170ms + 120ms);
}

/* ---------- Shared bits (copied from halloween.css) ---------- */
.eyebrow--calabaza { color: var(--calabaza); }
.m-page .eyebrow { font-size: 11px; letter-spacing: .22em; line-height: 1.4; text-box: none; }
.hw-duo { background: var(--calabaza); overflow: hidden; }
.hw-duo img { display: block; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.15) brightness(.9); mix-blend-mode: multiply; }
.hw-btn-b { background: var(--calabaza); color: #fbf7ec; border: 3px solid var(--amber); --btn-sh: var(--amber); }
.hw-chip { align-self: flex-start; background: var(--amber); color: var(--noche); padding: 10px 14px 8px; font-family: var(--f-label); font-weight: 700; font-size: 12px; letter-spacing: .2em; text-transform: uppercase; line-height: 1; }
.hw-stub { position: relative; background: var(--amber); color: var(--noche); }
.hw-stub::before, .hw-stub::after { content: ""; position: absolute; top: 50%; width: 24px; height: 24px; border-radius: 50%; background: var(--bg, var(--noche)); transform: translateY(-50%); }
.hw-stub::before { left: -12px; } .hw-stub::after { right: -12px; }

.m-title { font-size: clamp(34px, 10cqi, 46px); line-height: .95; color: var(--calabaza); text-box: none; }
.m-amber { color: var(--amber); }
.m-head { display: flex; flex-direction: column; gap: 14px; }
.m-body { font-size: 16px; line-height: 1.5; opacity: .9; }
.m-btn { align-self: stretch; padding: 18px 20px 16px; }
.m-page .btn--outline { border: 2px solid var(--pergamino); color: var(--pergamino); filter: none; }
.m-page .btn--amber.m-btn { --btn-sh: var(--calabaza); color: var(--noche); }

.m-labels { display: flex; flex-direction: column; gap: 8px; font-weight: 400; }
.m-label {
  align-self: flex-start;
  background: var(--papel); color: var(--noche);
  padding: 12px 16px 10px; border-radius: 3px;
  font-family: var(--f-display); font-size: clamp(26px, 7.6cqi, 34px); line-height: 1.02;
  box-shadow: 0 8px 12px rgba(0,0,0,.3);
}
.m-label:nth-child(2) { align-self: flex-end; }
.m-label--third { align-self: flex-start; margin-left: 14%; }
.m-label--calabaza { color: var(--calabaza); }

/* ---------- Chrome: logo, rail, sticky CTA ---------- */
.m-logo { position: absolute; z-index: 40; left: 50%; top: calc(10px + env(safe-area-inset-top)); transform: translateX(-50%); filter: drop-shadow(0 4px 8px rgba(0,0,0,.45)); }
.m-logo img { width: 52px; height: 52px; }

.m-rail { position: absolute; z-index: 40; right: 6px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 6px; }
.m-rail button {
  width: 14px; height: 14px; padding: 0; border: 0; background: none; cursor: pointer;
  display: grid; place-items: center;
}
.m-rail button::before { content: ""; width: 3px; height: 10px; border-radius: 2px; background: rgba(230,218,180,.35); transition: height .3s ease, background .3s ease; }
.m-rail button.is-on::before { height: 22px; background: var(--amber); }
.m-rail button:focus-visible { outline: 2px solid var(--amber); }
.m-shell.on-hero .m-rail { opacity: 0; pointer-events: none; }
.m-rail { transition: opacity .4s ease; }

/* Bottom bar: a solid UI block (darker than the page, amber top rule), not a fade.
   Every slide that shows it keeps --bottom of free space above it. */
.m-sticky {
  position: absolute; z-index: 40; left: 0; right: 0; bottom: 0;
  min-height: calc(var(--bar) + env(safe-area-inset-bottom));
  padding: 12px var(--gut) calc(12px + env(safe-area-inset-bottom));
  display: flex; align-items: center; gap: 16px;
  background: color-mix(in srgb, var(--bg, var(--noche)) 78%, #000);
  border-top: 2px solid var(--amber);
  box-shadow: 0 -12px 30px rgba(0,0,0,.35);
  transform: translateY(calc(100% + 16px));
  transition: transform .45s cubic-bezier(.2,.7,.2,1);
}
.m-sticky__info { display: flex; flex-direction: column; gap: 4px; flex-shrink: 0; }
.m-sticky__info b { font-family: var(--f-display); font-weight: 400; font-size: 20px; line-height: 1; color: var(--amber); }
.m-sticky__info small { font-family: var(--f-label); font-weight: 700; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; opacity: .85; }
.m-sticky .btn { flex: 1; padding: 15px 10px 13px; font-size: 12px; letter-spacing: .1em; --btn-off: 4px; }
.m-shell.show-cta .m-sticky { transform: none; }

/* =========================================================
   01 · Hero
   ========================================================= */
.m-hero .m-slide__in { justify-content: flex-end; padding: 0 var(--gut) calc(110px + env(safe-area-inset-bottom)); }
.m-hero__photo { position: absolute; left: 0; right: 0; top: 0; height: 66%; }
.m-hero__photo img { object-position: 50% 30%; }
.m-hero__photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11,36,48,.45) 0%, rgba(11,36,48,0) 30%, rgba(11,36,48,0) 55%, var(--noche) 100%); }
.m-hero.is-live .m-hero__photo img { animation: m-kenburns 9s ease-out both; }
.m-hero__film {
  position: absolute; right: 0; top: 0; width: 22px; height: 66%;
  background: repeating-linear-gradient(180deg, var(--noche) 0 14px, transparent 14px 28px);
  animation: m-film 4s linear infinite;
  mask-image: linear-gradient(180deg, #000 70%, transparent);
}
.m-hero__bat { position: absolute; left: 14px; top: 92px; width: 96px; height: auto; z-index: 2; --r: -10; }
.m-hero.is-live .m-hero__bat { animation: m-float 5s ease-in-out 2.4s infinite; }
.m-hero__copy { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 16px; }
.m-hero__big { font-size: clamp(40px, 15.5cqi, 74px); line-height: .9; color: var(--calabaza); text-box: none; letter-spacing: -.01em; }
.m-hero__big span { display: inline-block; }
.m-hero__amber { color: var(--amber); }
.m-hero__dare { font-family: var(--f-label); font-weight: 700; font-size: 15px; letter-spacing: .2em; text-transform: uppercase; color: var(--pergamino); }
.m-swipe {
  position: absolute; z-index: 3; left: 50%; bottom: calc(26px + env(safe-area-inset-bottom));
  translate: -50% 0;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  background: none; border: 0; cursor: pointer; padding: 6px 14px;
  font-family: var(--f-label); font-weight: 700; font-size: 11px; letter-spacing: .24em; text-transform: uppercase; color: var(--amber);
}
.m-swipe__arrow { width: 16px; height: 16px; border-left: 3px solid var(--amber); border-top: 3px solid var(--amber); transform: rotate(45deg); }
.m-hero.is-live .m-swipe__arrow { animation: m-nudge 1.3s ease-in-out 3s infinite; }

/* =========================================================
   02 · Qué es
   ========================================================= */
.m-que .m-slide__in { padding-bottom: var(--bottom); }
.m-que__photo { position: relative; height: 50cqh; flex-shrink: 0;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 22%); mask-image: linear-gradient(180deg, transparent, #000 22%); }
.m-que__photo img { position: absolute; inset: 0; object-position: 50% 30%; }
.m-que__num { position: absolute; left: 14px; bottom: 6px; font-size: 120px; line-height: 1; color: var(--noche); text-box: none; }
.m-que__text { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 22px; padding-top: 26px; }
.m-que__text .m-title span { display: inline-block; }
.m-que__list { display: flex; flex-direction: column; gap: 12px; }
.m-que__list li {
  position: relative; padding-left: 28px;
  font-family: var(--f-label); font-weight: 700; font-size: 14px; letter-spacing: .1em; text-transform: uppercase; line-height: 1.3;
}
.m-que__list li::after { content: ""; position: absolute; left: 0; top: .15em; width: 13px; height: 13px; background: var(--calabaza); transform: rotate(45deg); }

/* =========================================================
   03 · Actividades (sideways carousel)
   ========================================================= */
.m-act .m-slide__in { gap: 22px; }
.m-cards {
  display: flex; gap: 14px;
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  padding: 4px var(--gut) 8px;
  scroll-padding: 0 var(--gut);
  scrollbar-width: none;
}
.m-cards::-webkit-scrollbar { display: none; }
.m-card {
  position: relative; flex: 0 0 82%;
  height: min(54cqh, 460px);
  scroll-snap-align: start;
  border-radius: 6px; overflow: hidden;
  display: flex; flex-direction: column; justify-content: flex-end; gap: 8px;
  padding: 20px;
  box-shadow: 0 12px 20px rgba(0,0,0,.35);
}
.m-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.m-card::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(11,36,48,0) 35%, rgba(11,36,48,.92)); }
.m-card { isolation: isolate; }
.m-card__n { position: absolute; top: 14px; left: 16px; font-size: 18px; color: var(--amber); text-box: none; }
.m-card h3 { font-family: var(--f-display); font-weight: 400; font-size: 30px; line-height: 1; color: var(--amber); }
.m-card p { font-size: 15px; line-height: 1.4; }
.m-dots { display: flex; justify-content: center; gap: 8px; }
.m-dots i { width: 8px; height: 8px; border-radius: 50%; background: rgba(230,218,180,.3); transition: background .3s, width .3s; }
.m-dots i.is-on { width: 22px; border-radius: 4px; background: var(--amber); }

/* =========================================================
   04 · Programa (sideways: wood beam on top, each stop hangs from it)
   ========================================================= */
.m-plan .m-slide__in { gap: 20px; }
/* The beam is the scroller's own background (attachment: local), so it runs the
   full width and moves with the cards. A noche layer hides the wood below 16px. */
.m-plan__cards {
  list-style: none; margin: 0;
  padding-top: 0;
  background:
    linear-gradient(var(--noche), var(--noche)) 0 16px / 100% 100% no-repeat local,
    linear-gradient(180deg, rgba(0,0,0,.3), rgba(0,0,0,0) 45%, rgba(0,0,0,.5)) 0 0 / 100% 16px no-repeat local,
    url("../img/madera.webp") 0 0 / 176px 88px repeat-x local;
}
.m-stop { position: relative; flex: 0 0 76%; scroll-snap-align: start; padding-top: 38px; display: flex; flex-direction: column; }
.js .m-stop[data-step][data-fx="swing"] { transform-origin: 50% 0; transform: rotate(calc(var(--r, 0) * 1deg - 16deg)); }
.m-slide.is-live .m-stop[data-step] { transform: var(--rot); }
.m-stop:not([data-step]) { transform: rotate(calc(var(--r, 0) * 1deg)); transform-origin: 50% 0; }
/* String from the beam to the card */
.m-stop::before { content: ""; position: absolute; left: 50%; top: 8px; width: 3px; height: 32px; background: #c9a06a; box-shadow: 0 2px 3px rgba(0,0,0,.4); transform: translateX(-50%); }
.m-stop__photo { position: relative; height: min(34cqh, 300px); border-radius: 4px; box-shadow: 0 10px 18px rgba(0,0,0,.35); }
.m-stop__photo img { position: absolute; inset: 0; }
.m-stop--night .m-stop__photo img { filter: none; mix-blend-mode: normal; }
.m-stop__tag {
  position: relative; z-index: 1;
  margin: -38px 10px 0;
  display: grid; grid-template-columns: auto 1fr; column-gap: 12px; row-gap: 4px; align-items: baseline;
  background: var(--papel); color: var(--tinta);
  padding: 12px 14px 12px; border-radius: 3px;
  box-shadow: 0 8px 12px rgba(0,0,0,.3);
  transform: rotate(-1.5deg);
}
.m-stop:nth-child(even) .m-stop__tag { transform: rotate(1.2deg); }
.m-tag__time { font-family: var(--f-display); font-size: 26px; line-height: 1; color: var(--noche); }
.m-tag__day { font-family: var(--f-label); font-weight: 700; font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--oxido-claro); text-align: right; }
.m-stop__tag p { grid-column: 1 / -1; font-size: 14px; line-height: 1.35; }
.m-stop--night .m-stop__tag { background: var(--calabaza); color: var(--pergamino); }
.m-stop--night .m-tag__time { color: var(--pergamino); }
.m-stop--night .m-tag__day { color: var(--noche); }

/* =========================================================
   05 · Destino
   ========================================================= */
.m-dest .m-slide__in { align-items: flex-start; }
.m-dest__lantern { position: absolute; right: 18px; top: 70px; width: 96px; height: auto; transform-origin: 50% 0; --r: 6; filter: drop-shadow(0 0 26px rgba(240,160,21,.55)); }
.m-dest.is-live .m-dest__lantern { animation: m-sway 4s ease-in-out 1s infinite; }
.m-dest__big { font-size: clamp(50px, 15cqi, 70px); line-height: .92; color: var(--calabaza); text-box: none; }
.m-dest__big span { display: inline-block; }
.m-route {
  align-self: stretch;
  display: flex; align-items: center; gap: 10px;
  font-family: var(--f-label); font-weight: 700; font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
}
.m-route__line { position: relative; flex: 1; height: 0; border-top: 3px dashed rgba(230,218,180,.5); }
.m-route__line b { position: absolute; left: 0; top: -8px; width: 13px; height: 13px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 12px var(--amber); }
.m-dest.is-live .m-route__line b { animation: m-bus 2.6s ease-in-out 1.6s infinite alternate; }
.m-dest__txt { font-size: 16px; line-height: 1.5; opacity: .9; max-width: 32ch; }

/* =========================================================
   06 · Seguridad
   ========================================================= */
.m-seg .m-slide__in { gap: 16px; padding-top: 74px; }
.m-stickers { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.m-sticker {
  display: flex; flex-direction: column; gap: 6px;
  padding: 14px 12px 12px; border-radius: 3px;
  color: var(--pergamino);
  filter: drop-shadow(0 6px 6px rgba(0,0,0,.25));
}
.m-sticker b { font-family: var(--f-display); font-weight: 400; font-size: 19px; line-height: 1; }
.m-sticker span { font-family: var(--f-label); font-weight: 700; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; line-height: 1.25; }

/* =========================================================
   07 · Admisión
   ========================================================= */
.m-adm .m-slide__in { gap: 16px; padding-top: 74px; }
.m-adm .m-title { font-size: clamp(28px, 8.2cqi, 40px); }
.m-stubs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.m-stub { display: flex; align-items: center; gap: 14px; padding: 10px 20px 10px 22px; }
.m-stub__num { font-size: 34px; line-height: 1; color: var(--calabaza); text-box: none; flex-shrink: 0; }
.m-stub h3 { font-family: var(--f-display); font-weight: 400; font-size: 17px; line-height: 1.05; color: var(--noche); }
.m-stub p { font-size: 12.5px; line-height: 1.3; color: var(--tinta); margin-top: 3px; }

/* =========================================================
   08 · Incluye
   ========================================================= */
.m-check {
  list-style: none; margin: 0;
  background: var(--papel); color: var(--tinta);
  border-radius: 3px; padding: 16px 18px;
  box-shadow: 0 10px 18px rgba(0,0,0,.25);
  --r: -1;
  font-size: 15px; line-height: 1.35;
}
.m-check li { position: relative; padding: 5px 0 5px 28px; }
.m-check li::before { content: "✔"; position: absolute; left: 2px; top: 5px; color: var(--calabaza); font-weight: 700; }
.js .m-check li[data-step] { transform: translateX(-14px); }
.m-inc.is-live .m-check li[data-step] { transform: none; transition-delay: calc(var(--d) * 120ms + 200ms); }

/* =========================================================
   09 · Precio (on calabaza): photo, big price, 3 strong points as tiles.
   ========================================================= */
.m-precio .m-slide__in { padding-bottom: 40px; }
.m-btn--noche { background: var(--noche); color: #fbf7ec; border: 3px solid var(--noche); --btn-sh: var(--amber); }
.m-btn--noche:focus-visible { outline-color: var(--noche); }

.m-pb { padding-bottom: 40px; }
.m-pb__photo { position: relative; height: 44cqh; flex-shrink: 0;
  -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent); mask-image: linear-gradient(180deg, #000 55%, transparent); }
.m-pb__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.m-pb__body { position: relative; z-index: 1; margin-top: -84px; display: flex; flex-direction: column; gap: 14px; }
.m-pb__facts { font-family: var(--f-label); font-weight: 700; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--noche); }
.m-pb__num { font-size: clamp(104px, 38cqi, 150px); line-height: .82; color: #fbf7ec; text-box: none; text-shadow: 5px 5px 0 var(--noche); letter-spacing: -.02em; }
.m-pb__iva { display: inline-block; margin-left: .12em; vertical-align: top; font-family: var(--f-label); font-weight: 700; font-size: max(14px, .16em); letter-spacing: .08em; text-shadow: none; }
/* Phones: "+ IVA" wraps under $125 anyway. Give it a short line of its own, not a 150px one. */
@container (max-width: 1023px) { .m-pb__iva { display: block; margin: 6px 0 0; line-height: 1; } }
.m-pb__tiles { list-style: none; margin: 4px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.m-pb__tiles li { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; background: var(--noche); border-radius: 4px; padding: 12px 6px 12px; }
.m-pb__tiles img { width: 46px; height: 46px; object-fit: contain; }
.m-pb__tiles b { font-family: var(--f-display); font-weight: 400; font-size: 16px; line-height: 1; color: var(--amber); }
.m-pb__tiles span { font-family: var(--f-label); font-weight: 700; font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; line-height: 1.3; opacity: .9; }
.m-pb__pay { margin: 0; font-family: var(--f-label); font-weight: 700; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--noche); }

/* =========================================================
   10 · Cierre
   ========================================================= */
.m-cierre .m-slide__in { padding-bottom: 48px; gap: 20px; }
.m-cierre__bg {
  position: absolute; inset: 0; z-index: -1;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 25%); mask-image: linear-gradient(180deg, transparent, #000 25%);
  background: linear-gradient(rgba(11,36,48,.35) 0%, rgba(11,36,48,.55) 55%, rgba(11,36,48,.9) 100%), url("../img/hw_campo_calabazas.webp") 50% 50% / cover no-repeat;
}
.m-cierre .m-slide__in { isolation: isolate; }
.m-cierre .m-label { font-size: clamp(28px, 8.4cqi, 38px); }
.m-cierre__ctas { display: flex; flex-direction: column; gap: 14px; margin-top: 8px; }
.m-cierre__prop { position: absolute; height: auto; pointer-events: none; z-index: -1; filter: drop-shadow(0 6px 8px rgba(0,0,0,.35)); }
.m-cierre__prop--l { left: -18px; bottom: 120px; width: 110px; }
.m-cierre__prop--r { right: 10px; top: 76px; width: 70px; transform-origin: 50% 0; }

/* =========================================================
   11 · Footer, its own last slide
   ========================================================= */
.m-footer .m-slide__in { padding-bottom: 36px; gap: 34px; justify-content: center; }
.m-footer__brand { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.m-footer__brand img { width: 120px; height: 120px; }
.m-footer__brand .display { font-size: 28px; color: var(--pergamino); }
.m-footer__brand small { font-family: var(--f-label); font-weight: 700; font-size: 12px; letter-spacing: .22em; text-transform: uppercase; color: var(--amber); }
.m-footer__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 26px 20px; padding-top: 26px; border-top: 2px solid rgba(240,160,21,.5); }
.m-footer__cols > div { display: flex; flex-direction: column; }
.m-footer__contact { grid-column: 1 / -1; }
.m-footer__h { font-family: var(--f-label); font-weight: 700; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--amber); margin-bottom: 6px; }
.m-footer__cols a, .m-footer__cols span { font-size: 15px; line-height: 1.3; padding: 7px 0; }
.m-footer__cols span { opacity: .75; }
.m-footer__legal { font-size: 11px; line-height: 1.5; opacity: .6; text-align: center; }
.m-footer__pay { display: flex; align-items: center; gap: 10px; margin: 6px 0 0; font-size: 13px; color: rgba(251,247,236,.75); }
.m-footer__pay img { width: 96px; height: auto; }

/* ---------- Tones ----------
   halloween-m.js fades --bg on .m-shell between 3 tones and sets data-tone
   (noche / oxido / calabaza) on .m-shell and on the slides that use it.
   These rules only fix contrast on the warmer tones. */
.m-slide[data-tone="oxido"] .eyebrow { color: var(--amber); }

.m-slide[data-tone="calabaza"] .eyebrow { color: var(--noche); }
.m-shell[data-tone="calabaza"] .m-rail button::before { background: rgba(11,36,48,.35); }
.m-shell[data-tone="calabaza"] .m-rail button.is-on::before { background: var(--noche); }

/* ---------- Keyframes ---------- */
@keyframes m-kenburns { from { transform: scale(1.18); } to { transform: scale(1); } }
@keyframes m-film { from { background-position: 0 0; } to { background-position: 0 28px; } }
@keyframes m-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -12px; } }
@keyframes m-sway { 0%, 100% { rotate: -4deg; } 50% { rotate: 4deg; } }
@keyframes m-nudge { 0%, 100% { translate: 0 0; } 50% { translate: 0 -8px; } }
@keyframes m-bus { from { left: 0; } to { left: calc(100% - 13px); } }

/* =========================================================
   Short phone screens. Real phones show less than 812px once the browser
   bars take their space (iPhone Safari ~664, Android ~640, small iPhone ~600).
   These rules keep every slide inside one screen there.
   ========================================================= */
/* Padres: on the phone the "ask an adviser" CTA is a text link; the bottom bar has the main button. */
@media (max-width: 1023.98px) {
  .m-page .m-seg a.m-seg__ask {
    align-self: flex-start; padding: 6px 0; background: none; box-shadow: none; color: var(--amber);
    text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 2px;
  }
}
@container (max-width: 1023px) and (max-height: 780px) {
  .m-reel { --top: 66px; }
  .m-logo img { width: 44px; height: 44px; }
  .m-pad--top { gap: 16px; }
  .m-head { gap: 10px; }
  .m-title { font-size: clamp(28px, 8.4cqi, 40px); }
  .m-que__photo { height: 40cqh; }
  .m-que__num { font-size: 92px; }
  .m-que__text { gap: 16px; padding-top: 18px; }
  .m-que__list { gap: 8px; }
  .m-que__list li { font-size: 13px; }
  .m-card { height: 46cqh; }
  .m-stop { padding-top: 32px; }
  .m-stop__photo { height: 27cqh; }
  .m-labels { gap: 4px; }
  .m-label { font-size: clamp(22px, 6.2cqi, 27px); padding: 8px 12px 7px; }
  .m-seg .m-slide__in { gap: 8px; }
  .m-body { font-size: 14.5px; }
  .m-stickers { gap: 7px; }
  .m-sticker { padding: 10px 10px 9px; gap: 4px; }
  .m-sticker b { font-size: 16px; }
  .m-sticker span { font-size: 9.5px; }
  .m-adm .m-title { font-size: clamp(26px, 7.6cqi, 36px); }
  .m-stub { padding: 8px 18px 8px 20px; }
  .m-stub__num { font-size: 28px; }
  .m-stub h3 { font-size: 16px; }
  .m-stub p { font-size: 12px; }
  .m-check { padding: 12px 16px; font-size: 14px; }
  .m-check li { padding: 3px 0 3px 26px; }
  .m-check li::before { top: 3px; }
  .m-footer .m-slide__in { gap: 22px; }
  .m-footer__brand img { width: 84px; height: 84px; }
  .m-footer__cols { gap: 16px 20px; padding-top: 18px; }
  .m-footer__cols a, .m-footer__cols span { padding: 4px 0; font-size: 14px; }
}
/* Android-size screens: stickers keep only their titles. */
@container (max-width: 1023px) and (max-height: 660px) {
  .m-sticker span { display: none; }
  .m-sticker { padding: 11px 10px 10px; }
}
@container (max-width: 1023px) and (max-height: 620px) {
  .m-reel { --top: 60px; }
  .m-seg .m-slide__in { gap: 7px; }
  .m-pb__photo { height: 38cqh; }
  .m-que__photo { height: 34cqh; }
  .m-card { height: 41cqh; }
  .m-stop__photo { height: 23cqh; }
  .m-check { font-size: 13px; }
  .m-check li { padding: 2px 0 2px 24px; }
  .m-check li::before { top: 2px; }
}

/* =========================================================
   Wider screens. Same reel, same motion: one wheel or swipe = one section.
   --col is the side padding that keeps text in a centered column.
   ========================================================= */
@media (min-width: 640px) {
  .m-reel { --col: max(var(--gut), calc((100cqi - 600px) / 2)); }
  .m-pad { padding-left: var(--col); padding-right: var(--col); }
  .m-cards { padding-left: var(--col); scroll-padding: 0 var(--col); }
  .m-card { flex-basis: 340px; }
  .m-stop { flex-basis: 300px; }
}

@media (min-width: 1024px) {
  .m-page { --gut: clamp(40px, 6cqi, 120px); --top: 100px; --bottom: 104px; }
  .m-logo img { width: 64px; height: 64px; }

  /* Rail: bigger, with the section name on hover */
  .m-rail { right: 22px; gap: 4px; }
  .m-rail button { width: 22px; height: 22px; position: relative; }
  .m-rail button::before { width: 4px; height: 12px; }
  .m-rail button.is-on::before { height: 26px; }
  .m-rail button::after {
    content: attr(aria-label); position: absolute; right: 28px; top: 50%; translate: 6px -50%;
    font-family: var(--f-label); font-weight: 700; font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
    color: var(--pergamino); white-space: nowrap; opacity: 0; transition: opacity .2s, translate .2s; pointer-events: none;
  }
  .m-rail button:hover::after, .m-rail button:focus-visible::after { opacity: 1; translate: 0 -50%; }

  /* Sticky CTA becomes a floating button, bottom right */
  .m-sticky { left: auto; right: 64px; bottom: 28px; min-height: 0; padding: 0; background: none; border: 0; box-shadow: none; gap: 18px; transform: translateY(calc(100% + 60px)); }
  .m-sticky__info { align-items: flex-end; text-align: right; }
  .m-sticky .btn { flex: none; padding: 18px 28px 16px; font-size: 13px; }

  .m-title { font-size: clamp(40px, 3.8cqi, 60px); }

  /* ---- 01 · Hero: copy left, photo right (like the desktop page) ---- */
  .m-hero .m-slide__in { justify-content: center; padding: var(--top) 0 var(--bottom) clamp(40px, 7cqi, 150px); }
  .m-hero__photo { left: 48%; height: 100%; }
  .m-hero__photo::after {
    background:
      linear-gradient(90deg, rgba(11,36,48,.6) 0%, rgba(11,36,48,0) 12%),
      linear-gradient(180deg, rgba(11,36,48,.35) 0%, rgba(11,36,48,0) 25%, rgba(11,36,48,0) 70%, var(--noche) 100%);
  }
  .m-hero__film { left: calc(48% - 2px); right: auto; width: 30px; height: 100%; background-size: 100% 28px; mask-image: linear-gradient(180deg, transparent, #000 15%, #000 85%, transparent); }
  .m-hero__bat { left: calc(48% - 150px); top: 16%; width: 140px; }
  .m-hero__copy { max-width: 44cqi; gap: 24px; }
  .m-hero__big { font-size: clamp(72px, 8.2cqi, 140px); }
  .m-hero__dare { font-size: 17px; }

  /* ---- 02 · Qué es: photo left half, text right half ---- */
  .m-que .m-slide__in { flex-direction: row; padding: 0; }
  .m-que__photo { width: 50%; height: auto;
    -webkit-mask-image: linear-gradient(180deg, transparent, #000 16%, #000 84%, transparent);
    mask-image: linear-gradient(180deg, transparent, #000 16%, #000 84%, transparent); }
  .m-que__num { left: 40px; bottom: 9%; font-size: clamp(140px, 14cqi, 240px); }
  .m-que__text { flex: 1; padding: var(--top) clamp(40px, 7cqi, 140px) var(--bottom); gap: 30px; }
  .m-que__text .m-title { font-size: clamp(52px, 5.6cqi, 92px); }
  .m-que__list { gap: 16px; }
  .m-que__list li { font-size: 17px; padding-left: 32px; }
  .m-que__list li::after { width: 15px; height: 15px; }

  /* ---- 04 · Programa: heading left, hanging carousel right ---- */
  .m-plan .m-slide__in {
    display: grid; grid-template-columns: minmax(300px, 32%) minmax(0, 1fr); grid-template-rows: auto auto;
    align-content: center; column-gap: 48px; row-gap: 22px;
    padding-left: clamp(40px, 7cqi, 150px);
  }
  .m-plan .m-head { grid-column: 1; grid-row: 1 / span 2; align-self: center; padding: 0; }
  .m-plan .m-title { font-size: clamp(40px, 4cqi, 66px); }
  .m-plan__cards { grid-column: 2; grid-row: 1; padding-left: 0; scroll-padding: 0; padding-right: 80px; }
  .m-plan .m-dots { grid-column: 2; grid-row: 2; justify-content: flex-start; padding-left: 4px; }
  .m-stop { flex-basis: 290px; }
  .m-stop__photo { height: min(42cqh, 380px); }
}

/* ---------- Desktop motion ----------
   The phone "stamp" starts at 1.8x. On desktop the stamped things are big
   (giant words, wide stickers), so 1.8x threw them off the screen. Smaller here.
   :not(.is-live) keeps this from fighting the live state. */
@media (min-width: 1024px) {
  .js .m-slide:not(.is-live) [data-fx="stamp"][data-step] { transform: scale(1.18) rotate(calc(var(--r, 0) * 1deg - 5deg)); }
}

/* ---------- Desktop-only and phone-only content ---------- */
@media (max-width: 1023.98px) { .m-desk { display: none !important; } }
@media (min-width: 1024px) { .m-mob { display: none !important; } }

@media (min-width: 1024px) {
  /* Wide slides use the full width with a side margin, not the 600px column. */
  .m-act .m-slide__in, .m-dest .m-slide__in, .m-seg .m-slide__in, .m-adm .m-slide__in,
  .m-inc .m-slide__in, .m-cierre .m-slide__in, .m-footer .m-slide__in {
    padding-left: clamp(40px, 7cqi, 150px); padding-right: clamp(40px, 7cqi, 150px);
  }

  /* ---- 02 · Qué es: lead and quote ---- */
  .m-que__text { gap: 18px; padding-bottom: 72px; }
  .m-que__text .m-title { font-size: clamp(46px, 4.4cqi, 84px); }
  .m-que__lead { font-size: 17px; line-height: 1.55; max-width: 42ch; opacity: .9; }
  .m-que__quote {
    margin: 0; max-width: 24ch; padding-left: 18px; border-left: 4px solid var(--calabaza);
    font-family: var(--f-display); font-size: clamp(22px, 2cqi, 32px); line-height: 1.12; color: var(--amber);
  }

  /* ---- 03 · Actividades: all four cards in a row, big photos, full text ---- */
  .m-act .m-slide__in { gap: 28px; }
  .m-act .m-head { padding: 0; }
  .m-act .m-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; overflow: visible; padding: 0; }
  .m-act .m-card { height: min(56cqh, 540px); padding: 24px 22px; }
  .m-act .m-card img { transition: transform .7s ease; }
  .m-act .m-card:hover img { transform: scale(1.06); }
  .m-act .m-card h3 { font-size: clamp(24px, 2.1cqi, 34px); }
  .m-act .m-card p { font-size: 14.5px; line-height: 1.45; }
  .m-act .m-dots { display: none; }

  /* ---- 05 · Destino: giant place name, route with times, big lantern ---- */
  .m-dest .m-slide__in { gap: 26px; }
  .m-dest__big { font-size: clamp(80px, 8cqi, 150px); }
  .m-dest__lantern { width: clamp(160px, 14cqi, 250px); right: 7%; top: 9%; }
  .m-route { align-self: auto; width: min(100%, 900px); font-size: 14px; }
  .m-route > span { display: flex; flex-direction: column; gap: 6px; }
  .m-route > span:last-child { text-align: right; }
  .m-route small { font-size: 11px; letter-spacing: .12em; color: var(--amber); }
  .m-dest__txt { font-size: 18px; max-width: 52ch; }
  .m-dest__more { font-size: 15px; line-height: 1.55; max-width: 60ch; opacity: .72; }

  /* ---- 06 · Padres: story left, six stickers right ---- */
  .m-seg .m-slide__in {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    column-gap: clamp(40px, 5cqi, 96px); row-gap: 14px; align-content: center;
  }
  .m-seg .m-stickers { grid-column: 2; grid-row: 1 / span 5; align-self: center; gap: 16px; }
  .m-seg .m-label { font-size: clamp(28px, 2.5cqi, 44px); }
  .m-seg__text { display: flex; flex-direction: column; gap: 14px; }
  .m-seg__text .m-body { font-size: 17px; max-width: 46ch; }
  .m-seg__why { border-top: 1px solid rgba(240,160,21,.4); padding-top: 16px; max-width: 46ch; }
  .m-seg__why h3 { font-family: var(--f-display); font-weight: 400; font-size: 24px; color: var(--amber); }
  .m-seg__why p { font-size: 15px; line-height: 1.5; opacity: .88; margin-top: 6px; }
  .m-seg .m-btn { justify-self: start; align-self: start; padding: 18px 30px 16px; }
  .m-sticker { padding: 20px 18px; gap: 8px; }
  .m-sticker b { font-size: 26px; }
  .m-sticker span { display: none; }
  .m-sticker em { display: block; font-style: normal; font-size: 14px; line-height: 1.4; }

  /* ---- 07 · Admisión: heading left, four stubs in a 2x2 grid ---- */
  .m-adm .m-slide__in {
    display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.2fr);
    column-gap: clamp(40px, 5cqi, 96px); align-content: center; align-items: center;
  }
  .m-adm .m-title { font-size: clamp(44px, 4.4cqi, 74px); }
  .m-stubs { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 24px; }
  .m-stub { flex-direction: column; align-items: flex-start; gap: 10px; padding: 24px 30px; min-height: 200px; }
  .m-stub__num { font-size: 56px; }
  .m-stub h3 { font-size: 22px; }
  .m-stub p { font-size: 14.5px; line-height: 1.45; }

  /* ---- 08 · Incluye: heading and a giant "50" left, two-column list right ---- */
  .m-inc .m-slide__in {
    display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
    column-gap: clamp(40px, 5cqi, 96px); align-content: center; align-items: center;
  }
  .m-inc .m-title { font-size: clamp(44px, 4.2cqi, 70px); }
  .m-inc__cap { display: flex; align-items: center; gap: 18px; margin-top: 18px; }
  .m-inc__cap b { font-size: clamp(110px, 11cqi, 190px); line-height: .8; color: var(--calabaza); text-box: none; font-weight: 400; }
  .m-inc__cap span { font-family: var(--f-label); font-weight: 700; font-size: 14px; letter-spacing: .16em; text-transform: uppercase; line-height: 1.5; color: var(--amber); }
  .m-check { columns: 2; column-gap: 30px; padding: 28px 32px; font-size: 16px; }
  .m-check li { break-inside: avoid; padding: 7px 0 7px 28px; }
  .m-check li::before { top: 7px; }

  /* ---- 09 · Precio: photo left half, price and tiles right ---- */
  .m-precio .m-pb { flex-direction: row; padding: 0; }
  .m-pb__photo { width: 48%; height: auto;
    -webkit-mask-image: linear-gradient(90deg, #000 62%, transparent); mask-image: linear-gradient(90deg, #000 62%, transparent); }
  .m-pb__body {
    flex: 1; margin: 0 0 0 -90px; justify-content: center; gap: 18px;
    padding: var(--top) clamp(40px, 7cqi, 150px) 56px 0;
  }
  .m-pb__num { font-size: clamp(150px, 15cqi, 250px); text-shadow: 7px 7px 0 var(--noche); }
  .m-pb__facts { font-size: 14px; }
  .m-pb__tiles { gap: 14px; max-width: 620px; }
  .m-pb__tiles li { padding: 20px 12px 18px; gap: 8px; }
  .m-pb__tiles img { width: 64px; height: 64px; }
  .m-pb__tiles b { font-size: 21px; }
  .m-pb__tiles span { font-size: 11px; }
  .m-pb .m-btn { align-self: flex-start; padding: 20px 36px 18px; }

  /* ---- 10 · Cierre: centered, bigger labels, two buttons side by side ---- */
  .m-cierre .m-slide__in { align-items: center; text-align: center; gap: 24px; }
  .m-cierre .m-labels { align-items: center; }
  .m-cierre .m-label { font-size: clamp(40px, 4.4cqi, 72px); align-self: center; }
  .m-cierre__txt { font-size: 18px; line-height: 1.5; max-width: 46ch; opacity: .9; }
  .m-cierre__ctas { flex-direction: row; justify-content: center; }
  .m-cierre__ctas .m-btn { align-self: auto; padding: 20px 34px 18px; }
  .m-cierre__prop--l { width: 220px; left: 6%; bottom: 10%; }
  .m-cierre__prop--r { width: 130px; right: 9%; top: 12%; }

  /* ---- 11 · Footer: brand left, three columns right ---- */
  .m-footer .m-slide__in {
    display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: clamp(48px, 6cqi, 120px); row-gap: 48px;
    align-content: center; align-items: center;
  }
  .m-footer__brand { align-items: flex-start; text-align: left; }
  .m-footer__brand img { width: 150px; height: 150px; }
  .m-footer__brand .display { font-size: 34px; }
  .m-footer__cols { grid-template-columns: repeat(3, auto); justify-content: start; gap: 60px; padding: 0 0 0 clamp(40px, 5cqi, 80px); border-top: 0; border-left: 2px solid rgba(240,160,21,.5); }
  .m-footer__contact { grid-column: auto; min-width: 290px; }
  .m-footer__legal { grid-column: 1 / -1; text-align: left; padding-top: 22px; border-top: 1px solid rgba(240,160,21,.25); }
}

/* Carousel arrows: only on devices with a mouse */
.m-arrow { display: none; }
@media (hover: hover) and (pointer: fine) {
  .m-dots { align-items: center; gap: 10px; }
  .m-arrow {
    display: grid; place-items: center; width: 40px; height: 40px; padding: 0 0 3px; cursor: pointer;
    background: none; border: 2px solid var(--amber); border-radius: 50%; color: var(--amber);
    font-family: var(--f-label); font-weight: 700; font-size: 22px; line-height: 1;
    transition: background .2s, color .2s;
  }
  .m-arrow--prev { margin-right: 8px; } .m-arrow--next { margin-left: 8px; }
  .m-arrow:hover, .m-arrow:focus-visible { background: var(--amber); color: var(--noche); outline: none; }
}

/* ---------- Reduced motion: show everything, no push ---------- */
@media (prefers-reduced-motion: reduce) {
  [data-step], .m-slide.is-live [data-step] { opacity: 1 !important; transform: var(--rot) !important; transition: none !important; }
  .m-slide__in { transform: none !important; opacity: 1 !important; }
  .m-hero__film, .m-hero__photo img, .m-hero__bat, .m-swipe__arrow, .m-dest__lantern, .m-route__line b { animation: none !important; }
}

/* The footer slide shows its own big logo, so the fixed one steps aside. */
.m-logo { transition: opacity .35s ease, translate .35s ease; }
.m-shell.hide-logo .m-logo { opacity: 0; translate: 0 -20px; pointer-events: none; }

/* Footer social links on one line */
.m-footer__social { display: flex; flex-wrap: wrap; gap: 4px 18px; }
.m-footer__social a { text-decoration: underline; text-underline-offset: 4px; text-decoration-color: rgba(240,160,21,.6); }

/* Version B decoration is hidden in version A (halloween-b.css shows it). */
.m-b { display: none; }

/* ---------- Buttons: one style on every reel page (2026-10-14) ----------
   Soft corners (--btn-r, 8px: the page is mostly square) + the hard offset shadow of the old square buttons.
   Each button only picks its shadow color (--btn-sh) and size (--btn-off).
   Hover lifts it toward the light; press pushes it into its shadow.

   Two motions live on a button and must not mix:
   - play-in (data-step): opacity + transform, delayed by its step number.
   - hover/press: the separate `translate` property + box-shadow, never delayed.
   Before this split, the step delay also delayed the hover (it looked missing), and
   opacity had no transition (the play-in looked stepped). */
.m-page .btn {
  --btn-sh: var(--amber);
  --btn-off: 5px;
  --btn-r: 8px;
  border-radius: var(--btn-r);
  box-shadow: var(--btn-off) var(--btn-off) 0 var(--btn-sh);
  transform: var(--rot, none);
  transition-property: opacity, transform, translate, box-shadow, filter;
  transition-duration: .45s, .6s, .15s, .15s, .15s;
  transition-timing-function: ease, cubic-bezier(.2,.7,.2,1), ease, ease, ease;
  transition-delay: 0s;
}
.js .m-page .btn[data-step] { transform: translateY(26px) var(--rot); }
.js .m-page .btn[data-step][data-fx="fade"] { transform: var(--rot); }
.m-page .m-slide.is-live .btn[data-step],
.m-page .m-slide.is-near .btn[data-step="0"] {
  transform: var(--rot);
  transition-delay: calc(var(--d) * 170ms + 120ms), calc(var(--d) * 170ms + 120ms), 0s, 0s, 0s;
}
.m-page .btn:hover { translate: -2px -2px; box-shadow: calc(var(--btn-off) + 2px) calc(var(--btn-off) + 2px) 0 var(--btn-sh); filter: brightness(1.05); }
.m-page .btn:active { translate: 3px 3px; box-shadow: calc(var(--btn-off) - 3px) calc(var(--btn-off) - 3px) 0 var(--btn-sh); }
.m-page .btn--outline { --btn-sh: var(--calabaza); }
@media (prefers-reduced-motion: reduce) {
  .m-page .btn, .m-page .m-slide.is-live .btn[data-step] { transform: none !important; transition: none !important; }
}