/* Campamento Evermonth · Halloween reel, VERSION B
   Chosen look (2026-10-14). halloween.html has .tema-b on <html> at all times.
   Source: the client's brochure "El Halloween que siempre quisiste vivir".
   What B changes against A:
   - Palette: warm black + strong orange + white glow (A: navy night + amber paper).
   - Photos in full colour, cinematic, no orange duotone.
   - Orange photo frames with a thin white outline (brochure page 3).
   - Paper labels become black blocks; big headings glow.
   - Cartoon art from the brochure: spider web, ghosts, spider on a thread, pumpkin row.
   - Rhythm: black → burnt orange (Padres, Admisión, Incluye) → black (Precio, Cierre).
   Every rule is scoped to .tema-b, so version A never changes. */

.tema-b .m-page {
  --noche: #0d0907;          /* warm black */
  --navy-hw: #17100c;
  --calabaza: #f07c1a;       /* brochure orange */
  --amber: #ffb04a;
  --oxido: #3a1a0c;
  --oxido-claro: #c4561d;
  --navy: #0d0907;
  --quemado: #9e4318;        /* burnt orange panels */
  --tone-noche: 13, 9, 7;
  --tone-oxido: 158, 67, 24;
  --tone-calabaza: 13, 9, 7;  /* the price stays on black and glows */
  --glow: 0 0 20px rgba(255, 140, 40, .55), 0 0 2px rgba(255, 210, 160, .7);
}

/* ---------- Decoration from the brochure ---------- */
.tema-b .m-b { display: block; position: absolute; z-index: 1; height: auto; pointer-events: none; }
.tema-b .m-b--web { top: 0; right: 0; width: clamp(110px, 26cqi, 250px); }
.tema-b .m-b--ghost { right: 6%; bottom: calc(var(--bottom) + 6px); width: clamp(90px, 22cqi, 190px); }
.tema-b .m-dest.is-live .m-b--ghost { animation: m-float 5s ease-in-out 2.2s infinite; }
.tema-b .m-b--spider { top: 0; right: 9%; width: clamp(30px, 6cqi, 56px); transform-origin: 50% 0; }
.tema-b .m-inc.is-live .m-b--spider { animation: b-dangle 4s ease-in-out 2s infinite; }
.tema-b .m-b--ghostbag { right: 3%; bottom: 7%; width: clamp(110px, 9cqi, 160px); }
.tema-b .m-b--pumpkins { right: 4%; bottom: 0; width: clamp(220px, 26cqi, 420px); z-index: 2; }
@keyframes b-dangle { 0%, 100% { translate: 0 0; } 50% { translate: 0 18px; } }

/* ---------- Shared pieces ---------- */
.tema-b .m-title { color: var(--calabaza); }
.tema-b .m-amber { color: #fff; text-shadow: var(--glow); }
.tema-b .hw-chip { background: var(--calabaza); color: #0d0907; }
.tema-b .hw-btn-b { background: var(--calabaza); border-color: var(--calabaza); color: #fff; --btn-sh: #fff; }
.tema-b .m-label { background: #0d0907; color: #fff; box-shadow: 0 10px 18px rgba(0,0,0,.4); }
.tema-b .m-label--calabaza { color: var(--calabaza); }
.tema-b .hw-duo { background: #000; }
.tema-b .hw-duo img { filter: saturate(1.05) contrast(1.05); mix-blend-mode: normal; }
.tema-b .m-sticky { border-top-color: var(--calabaza); }
.tema-b .m-sticky__info b { color: var(--calabaza); }

/* ---------- 01 · Hero: cinematic photo, glowing title ---------- */
.tema-b .m-hero__photo { height: 100%; background: #0d0907 url("../img/hwb_hero_cementerio.webp") 22% 70% / cover no-repeat; }
.tema-b .m-hero__photo img { opacity: 0; }
.tema-b .m-hero.is-live .m-hero__photo { animation: m-kenburns 9s ease-out both; }
.tema-b .m-hero__photo::after {
  background: linear-gradient(180deg, rgba(13,9,7,.5) 0%, rgba(13,9,7,0) 24%, rgba(13,9,7,.12) 50%, rgba(13,9,7,.8) 80%, #0d0907 96%);
}
.tema-b .m-hero__film { display: none; }
.tema-b .m-hero__big { color: #fff; text-shadow: var(--glow); }
.tema-b .m-hero__amber { color: var(--calabaza); text-shadow: 0 0 24px rgba(240,124,26,.6); }
/* The photo fills the whole hero, so the copy sits in the centre (like the brochure cover). */
.tema-b .m-hero .m-slide__in { align-items: center; text-align: center; }
.tema-b .m-hero__copy { align-items: center; }
.tema-b .m-hero .hw-chip { align-self: center; }
.tema-b .m-swipe { color: var(--calabaza); }
.tema-b .m-swipe__arrow { border-color: var(--calabaza); }

/* ---------- 02 · Qué es: the glowing pumpkin field ---------- */
.tema-b .m-que__photo { background: #0d0907 url("../img/hwb_campo_luz.webp") 50% 60% / cover no-repeat; }
.tema-b .m-que__photo img { opacity: 0; }
.tema-b .m-que__num { color: transparent; -webkit-text-stroke: 2px var(--calabaza); }
.tema-b .m-que__list li::after { background: var(--calabaza); }
.tema-b .m-que__quote { color: var(--calabaza); border-left-color: #fff; }

/* ---------- 03 · Actividades: orange frame + white outline (brochure p.3) ---------- */
.tema-b .m-card { border: 7px solid var(--calabaza); border-radius: 0; outline: 2px solid #fff; outline-offset: 5px; box-shadow: none; }
.tema-b .m-cards { padding-top: 10px; padding-bottom: 14px; }
.tema-b .m-card h3 { color: #fff; text-shadow: var(--glow); }
.tema-b .m-card__n { color: var(--calabaza); }

/* ---------- 04 · Programa: a white line instead of the wood beam ---------- */
.tema-b .m-plan__cards {
  background:
    linear-gradient(var(--noche), var(--noche)) 0 16px / 100% 100% no-repeat local,
    linear-gradient(#fff, #fff) 0 7px / 100% 2px no-repeat local;
}
.tema-b .m-stop::before { background: #fff; box-shadow: none; }
.tema-b .m-stop__photo { border: 6px solid var(--calabaza); border-radius: 0; outline: 2px solid #fff; outline-offset: 4px; box-shadow: none; }
.tema-b .m-stop__tag { background: #0d0907; color: #fff; border: 2px solid #fff; border-radius: 0; }
.tema-b .m-stop__tag .m-tag__time { color: var(--calabaza); }
.tema-b .m-stop__tag .m-tag__day { color: var(--amber); }
.tema-b .m-stop--night .m-stop__tag { background: var(--calabaza); border-color: var(--calabaza); }
.tema-b .m-stop--night .m-tag__time { color: #fff; }
.tema-b .m-stop--night .m-tag__day { color: #0d0907; }

/* ---------- 05 · Destino ---------- */
.tema-b .m-dest__big { color: var(--calabaza); }
.tema-b .m-route__line { border-top-color: rgba(255,255,255,.6); }
.tema-b .m-route__line b { background: var(--calabaza); box-shadow: 0 0 14px var(--calabaza); }

/* ---------- 06–08 · Burnt-orange act: Padres, Admisión, Incluye ---------- */
.tema-b .m-slide[data-tone="oxido"] .eyebrow { color: #0d0907; }
.tema-b .m-slide[data-tone="oxido"] .m-title,
.tema-b .m-slide[data-tone="oxido"] .m-title.m-amber,
.tema-b .m-slide[data-tone="oxido"] .m-title .m-amber { color: #fff; text-shadow: none; }
/* Padres: charcoal blocks with orange titles (brochure p.8) */
.tema-b .m-sticker { background: #1a120e !important; border: 0 !important; color: #fff !important; filter: drop-shadow(0 8px 10px rgba(0,0,0,.3)); }
.tema-b .m-sticker b { color: var(--amber); }
.tema-b .m-seg__why { border-top-color: rgba(255,255,255,.35); }
.tema-b .m-seg__why h3 { color: #fff; }
.tema-b .m-page .m-seg a.m-seg__ask { color: #fff; }
/* Admisión: white-ruled boxes on the orange (brochure p.9) */
.tema-b .hw-stub { background: transparent; color: #fff; outline: 2px solid rgba(255,255,255,.9); outline-offset: -2px; }
.tema-b .m-stub__num { color: #fff; }
.tema-b .m-stub h3, .tema-b .m-stub p { color: #fff; }
/* Incluye: black panel, bold white list (brochure p.10) */
.tema-b .m-check { background: #0d0907; color: #fff; box-shadow: 0 12px 22px rgba(0,0,0,.35); }
.tema-b .m-check li::before { color: var(--calabaza); }
.tema-b .m-inc__cap b { color: #fff; }
.tema-b .m-inc__cap span { color: #0d0907; }

/* ---------- 09 · Precio: black, the price glows ---------- */
.tema-b .m-slide[data-tone="calabaza"] .eyebrow { color: var(--amber); }
.tema-b .m-pb__num { color: var(--calabaza); text-shadow: 0 0 34px rgba(240,124,26,.55), 4px 4px 0 #000; }
.tema-b .m-pb__facts { color: var(--amber); }
.tema-b .m-pb__tiles li { background: #1a120e; outline: 2px solid var(--calabaza); outline-offset: -2px; }
.tema-b .m-pb__tiles b { color: var(--calabaza); }
.tema-b .m-pb__pay { color: rgba(251,247,236,.85); }
.tema-b .m-pb__pay b { color: var(--calabaza); }
.tema-b .m-btn--noche { background: var(--calabaza); border-color: var(--calabaza); color: #fff; --btn-sh: #fff; }
.tema-b .m-shell[data-tone="calabaza"] .m-rail button::before { background: rgba(230,218,180,.35); }
.tema-b .m-shell[data-tone="calabaza"] .m-rail button.is-on::before { background: var(--calabaza); }

/* ---------- 10 · Cierre: the ghost under the moon (brochure p.11) ---------- */
.tema-b .m-cierre__bg {
  background: linear-gradient(rgba(13,9,7,.25) 0%, rgba(13,9,7,.55) 55%, rgba(13,9,7,.9) 100%), url("../img/hw_fantasma_luna.webp") 22% 50% / cover no-repeat;
}
.tema-b .m-cierre .m-label { background: transparent; box-shadow: none; padding-left: 0; padding-right: 0; color: #fff; text-shadow: var(--glow); }
.tema-b .m-cierre .m-label--calabaza { color: var(--calabaza); text-shadow: 0 0 22px rgba(240,124,26,.6); }
.tema-b .m-page .m-cierre .btn--outline { background: #fff; color: #0d0907; border-color: #fff; --btn-sh: var(--calabaza); }
.tema-b .m-cierre__prop--l { display: none; }

/* ---------- Desktop ---------- */
@media (min-width: 1024px) {
  .tema-b .m-page .m-seg .btn--amber.m-btn { background: #0d0907; color: #fff; --btn-sh: #fff; }
  .tema-b .m-hero__photo { left: 0; background-position: 50% 60%; }
  /* Darker in the middle behind the centred copy, open at the sides so the photo shows. */
  .tema-b .m-hero__photo::after {
    background:
      radial-gradient(ellipse 55% 60% at 50% 52%, rgba(13,9,7,.62) 0%, rgba(13,9,7,.3) 55%, rgba(13,9,7,.08) 100%),
      linear-gradient(180deg, rgba(13,9,7,.45) 0%, rgba(13,9,7,0) 25%, rgba(13,9,7,0) 72%, #0d0907 100%);
  }
  .tema-b .m-hero .m-slide__in { padding: var(--top) clamp(40px, 7cqi, 150px) var(--bottom); justify-content: center; }
  .tema-b .m-hero__copy { max-width: none; }
  .tema-b .m-hero__bat { left: 16%; top: 18%; }
  .tema-b .m-b--ghost { right: 30%; bottom: 14%; }
  .tema-b .m-b--spider { right: 6%; }
}

/* Reduced motion: decoration stays still */
@media (prefers-reduced-motion: reduce) {
  .tema-b .m-b { animation: none !important; }
  .tema-b .m-hero__photo { animation: none !important; }
}