/* ══════════════════════════════════════════════════════════════════
   Temporada Halloween y Día de Muertos.
   Todo aplica SOLO bajo html[data-temporada="halloween"], que pone
   catalog.js cuando la temporada está vigente (Ajustes → Temporada).
   Fuera de fechas este archivo no cambia nada de la tienda.

   Base: el negro y el dorado de siempre. Acentos: naranja calabaza y
   cempasúchil. Contraste AA: texto naranja solo sobre fondo oscuro
   (≈7.9:1) y, sobre naranja, texto casi negro (≈7.8:1).
   ══════════════════════════════════════════════════════════════════ */

html[data-temporada="halloween"] {
  --halloween:        #f28c38;
  --halloween-hover:  #f6a35e;
  --halloween-soft:   rgba(242, 140, 56, .12);
  --halloween-border: rgba(242, 140, 56, .45);
  --halloween-glow:   rgba(242, 140, 56, .28);
  --halloween-ink:    #1a0e05;   /* texto sobre fondo naranja */
  --cempasuchil:      #f7b32b;
}

/* ── Decoración del hero ─────────────────────────────────────────── */
html[data-temporada="halloween"] .deco-temporada {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
html[data-temporada="halloween"] .deco-telarana,
html[data-temporada="halloween"] .deco-murcielagos { position: absolute; }
html[data-temporada="halloween"] .deco-telarana {
  top: 0; right: 0;
  width: 110px; height: 110px;
  color: var(--text-primary);
  opacity: .10;
  transform: scaleX(-1);
}
html[data-temporada="halloween"] .deco-murcielagos {
  top: 18px; left: 4%;
  width: 150px; height: 66px;
  color: var(--halloween);
  opacity: .22;
}
html[data-temporada="halloween"] .murcielago {
  transform-box: fill-box;
  transform-origin: center;
  animation: ht-vuelo 7s ease-in-out infinite;
}
html[data-temporada="halloween"] .murcielago.m2 { animation-delay: -2.3s; animation-duration: 8.5s; }
html[data-temporada="halloween"] .murcielago.m3 { animation-delay: -4.6s; animation-duration: 6.2s; }
@keyframes ht-vuelo {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(6px, -5px) scale(.94); }
}
@media (min-width: 900px) {
  html[data-temporada="halloween"] .deco-telarana { width: 170px; height: 170px; }
  html[data-temporada="halloween"] .deco-murcielagos { width: 210px; height: 92px; }
}

/* ── Pestaña Halloween ───────────────────────────────────────────── */
html[data-temporada="halloween"] .ftab-temporada {
  color: var(--halloween);
  border-color: var(--halloween-border);
  background: var(--halloween-soft);
  transition: border-color var(--transition), box-shadow var(--transition), background var(--transition), color var(--transition);
}
html[data-temporada="halloween"] .ftab-temporada:hover {
  border-color: var(--halloween);
  box-shadow: 0 0 0 3px var(--halloween-soft), 0 0 14px var(--halloween-glow);
}
html[data-temporada="halloween"] .ftab-temporada.active {
  background: var(--halloween);
  border-color: var(--halloween);
  color: var(--halloween-ink);
  box-shadow: 0 0 16px var(--halloween-glow);
}

/* ── Tarjetas de paquetes de temporada (grid) ────────────────────── */
html[data-temporada="halloween"] .pcard-temporada {
  border-color: var(--halloween-border) !important;   /* la tarjeta de paquete trae borde dorado en línea */
  box-shadow: 0 4px 20px var(--halloween-soft) !important;
}
html[data-temporada="halloween"] .pcard-temporada:hover {
  transform: translateY(-4px);
  border-color: var(--halloween) !important;
  box-shadow: 0 18px 44px rgba(0, 0, 0, .55), 0 0 0 1px var(--halloween-border), 0 0 22px var(--halloween-glow) !important;
}
html[data-temporada="halloween"] .tag-temporada {
  position: absolute;
  top: 8px; left: 8px;
  z-index: 2;
  display: flex; align-items: center; gap: 4px;
  padding: 2px 8px;
  border-radius: 12px;
  background: var(--halloween);
  color: var(--halloween-ink);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .4px;
}
html[data-temporada="halloween"] .pcard-temporada .card-marca { color: var(--halloween) !important; }

/* ── Franja especial ─────────────────────────────────────────────── */
/* Mismo ancho que el catálogo (1200px, centrada) y 16px de orilla en celular:
   antes ocupaba toda la pantalla y se veía como un bloque. */
html[data-temporada="halloween"] .temporada-franja {
  position: relative;
  max-width: 1200px;
  margin: 12px 16px 24px;
  padding: 40px 0 22px;
  border: 1px solid var(--halloween-border);
  border-radius: 24px;
  background:
    radial-gradient(80% 120% at 100% 0%, var(--halloween-soft), transparent 65%),
    radial-gradient(70% 90% at 0% 100%, rgba(247, 179, 43, .07), transparent 60%),
    var(--bg-card);
  box-shadow: 0 18px 50px rgba(0, 0, 0, .35);
  overflow: hidden;
}
@media (min-width: 1232px) {
  html[data-temporada="halloween"] .temporada-franja { margin-left: auto; margin-right: auto; }
}
/* Papel picado: banderitas chicas que se repiten (antes un SVG estirado de lado a lado). */
html[data-temporada="halloween"] .temporada-franja::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 26px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='128' height='34' viewBox='0 0 128 34'%3E%3Cpath d='M0 2H128' stroke='%23f7b32b' stroke-opacity='.55'/%3E%3Cpath d='M8 2h48v22l-6 6-6-6-6 6-6-6-6 6-6-6-6 6-6-6z' fill='%23f7b32b' fill-opacity='.5'/%3E%3Cpath d='M72 2h48v22l-6 6-6-6-6 6-6-6-6 6-6-6-6 6-6-6z' fill='%23f28c38' fill-opacity='.55'/%3E%3C/svg%3E") repeat-x 8px 0 / 96px 26px;
  pointer-events: none;
}

html[data-temporada="halloween"] .tf-inner {
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-width: 0;
}
html[data-temporada="halloween"] .tf-head { padding: 0 20px; }
/* En escritorio: el texto a la izquierda y el carrusel a la derecha, sin hueco vacío. */
@media (min-width: 900px) {
  html[data-temporada="halloween"] .temporada-franja { padding: 44px 0 26px; }
  html[data-temporada="halloween"] .tf-inner {
    display: grid;
    grid-template-columns: minmax(280px, 360px) minmax(0, 1fr);
    align-items: center;
    gap: 8px;
  }
  html[data-temporada="halloween"] .tf-head { padding: 0 8px 0 32px; }
  html[data-temporada="halloween"] .tf-carrusel { padding-right: 28px; }
}
html[data-temporada="halloween"] .tf-kicker {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--cempasuchil);
}
html[data-temporada="halloween"] .tf-head h2 {
  margin: 6px 0 6px;
  font-size: clamp(22px, 5.5vw, 32px);
  line-height: 1.15;
  color: var(--text-primary);
}
html[data-temporada="halloween"] .tf-head p {
  margin: 0 0 14px;
  max-width: 560px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-muted);
}
html[data-temporada="halloween"] .tf-btn {
  display: inline-flex; align-items: center; gap: 4px;
  min-height: 44px;
  padding: 0 20px;
  border: 1px solid var(--halloween);
  border-radius: 999px;
  background: var(--halloween);
  color: var(--halloween-ink);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: background var(--transition), box-shadow var(--transition), transform var(--transition);
}
html[data-temporada="halloween"] .tf-btn:hover {
  background: var(--halloween-hover);
  box-shadow: 0 0 18px var(--halloween-glow);
  transform: translateY(-1px);
}
html[data-temporada="halloween"] .tf-btn:focus-visible,
html[data-temporada="halloween"] .tf-card:focus-visible,
html[data-temporada="halloween"] .tt-op:focus-visible {
  outline: 2px solid var(--cempasuchil);
  outline-offset: 3px;
}

/* Carrusel: scroll-snap nativo, se desliza con el dedo; la página no se desborda. */
html[data-temporada="halloween"] .tf-carrusel {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 16px;
  padding: 4px 16px 14px;
  scrollbar-width: thin;
  scrollbar-color: var(--halloween-border) transparent;
  -webkit-overflow-scrolling: touch;
}
html[data-temporada="halloween"] .tf-card {
  flex: 0 0 72%;
  max-width: 240px;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 0 0 12px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--bg-card2);
  color: var(--text-primary);
  font-family: var(--font-body);
  text-align: left;
  text-decoration: none;   /* ahora es un link a la página del perfume */
  cursor: pointer;
  overflow: hidden;
  transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition);
}
@media (min-width: 600px) { html[data-temporada="halloween"] .tf-card { flex-basis: 210px; } }
html[data-temporada="halloween"] .tf-card:hover {
  transform: translateY(-4px);
  border-color: var(--halloween-border);
  box-shadow: 0 12px 30px rgba(0, 0, 0, .5), 0 0 18px var(--halloween-glow);
}
html[data-temporada="halloween"] .tf-img {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  aspect-ratio: 1 / 1;
  background: var(--bg-card);
  color: var(--text-faint);
  font-size: 32px;
  margin-bottom: 6px;
}
html[data-temporada="halloween"] .tf-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
html[data-temporada="halloween"] .tf-card.agotado .tf-img img { filter: grayscale(1); opacity: .6; }
html[data-temporada="halloween"] .tf-agotado {
  position: absolute;
  top: 8px; left: 8px;
  padding: 2px 8px;
  border-radius: 12px;
  background: #ef4444;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
}
html[data-temporada="halloween"] .tf-nombre { padding: 0 12px; font-size: 14px; font-weight: 600; line-height: 1.25; }
html[data-temporada="halloween"] .tf-precio { padding: 0 12px; font-size: 13px; color: var(--halloween); font-weight: 700; }
html[data-temporada="halloween"] .tf-ahorro {
  align-self: flex-start;
  margin: 2px 12px 0;
  padding: 2px 8px;
  border-radius: 10px;
  background: var(--cempasuchil);
  color: var(--halloween-ink);
  font-size: 11px;
  font-weight: 700;
}

/* ── Truco o Trato (modal del paquete) ───────────────────────────── */
html[data-temporada="halloween"] .tt-selector {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 12px 0 4px;
}
html[data-temporada="halloween"] .tt-op {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-card2);
  color: var(--text-primary);
  font-family: var(--font-body);
  text-align: left;
  cursor: pointer;
  transition: border-color var(--transition), background var(--transition), box-shadow var(--transition);
}
html[data-temporada="halloween"] .tt-op strong { display: flex; align-items: center; gap: 6px; font-size: 14px; }
html[data-temporada="halloween"] .tt-op small { font-size: 12px; line-height: 1.35; color: var(--text-muted); }
html[data-temporada="halloween"] .tt-op:hover { border-color: var(--halloween-border); }
html[data-temporada="halloween"] .tt-op.on {
  border-color: var(--halloween);
  background: var(--halloween-soft);
  box-shadow: 0 0 14px var(--halloween-soft);
}
html[data-temporada="halloween"] .tt-op.on strong { color: var(--halloween); }

/* Línea de la sorpresa en el carrito */
html[data-temporada="halloween"] .cart-item-sorpresa {
  margin-top: 2px;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--halloween);
}

/* ── Sin movimiento para quien lo pide ───────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html[data-temporada="halloween"] .murcielago { animation: none; }
  html[data-temporada="halloween"] .pcard-temporada,
  html[data-temporada="halloween"] .tf-card,
  html[data-temporada="halloween"] .tf-btn,
  html[data-temporada="halloween"] .ftab-temporada,
  html[data-temporada="halloween"] .tt-op { transition: none; }
  html[data-temporada="halloween"] .pcard-temporada:hover,
  html[data-temporada="halloween"] .tf-card:hover,
  html[data-temporada="halloween"] .tf-btn:hover { transform: none; }
  html[data-temporada="halloween"] .tf-carrusel { scroll-behavior: auto; }
}

/* ══ Scroll de temporada ══════════════════════════════════════════ */
html[data-temporada="halloween"] {
  scrollbar-color: rgba(242, 140, 56, .6) var(--bg-dark);
  scroll-behavior: smooth;
}
html[data-temporada="halloween"]::-webkit-scrollbar { width: 10px; }
html[data-temporada="halloween"]::-webkit-scrollbar-track { background: var(--bg-dark); }
html[data-temporada="halloween"]::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--halloween), var(--cempasuchil));
  border: 2px solid var(--bg-dark);
  border-radius: 999px;
}

/* ══ Decoración alrededor de la pantalla ══════════════════════════
   Fija, sin clics (pointer-events: none) y por debajo del encabezado,
   la barra de filtros, los modales y los botones flotantes. */
html[data-temporada="halloween"] .deco-pantalla {
  position: fixed;
  inset: 0;
  z-index: 0;                 /* detrás del contenido, como las partículas: con 90 el hilo cruzaba la barra de filtros */
  pointer-events: none;
}
html[data-temporada="halloween"] :where(.deco-pantalla svg) { display: block; }   /* sin peso: no le gana a los display:none */

/* Telarañas en las esquinas de arriba (debajo del encabezado). */
html[data-temporada="halloween"] .dp-telarana {
  position: absolute;
  top: 62px;
  width: 64px;
  height: 64px;
  color: var(--text-primary);
  opacity: .08;
}
html[data-temporada="halloween"] .dp-izq { left: 0; }
html[data-temporada="halloween"] .dp-der { right: 0; transform: scaleX(-1); }

/* Calabazas y la araña colgante: solo donde sobra orilla a los lados. */
html[data-temporada="halloween"] .dp-calabaza,
html[data-temporada="halloween"] .dp-colgante { display: none; }

html[data-temporada="halloween"] .cal-cuerpo { fill: var(--halloween); }
html[data-temporada="halloween"] .cal-gajos  { stroke: #b85f1a; stroke-width: 1.4; }
html[data-temporada="halloween"] .cal-tallo  { fill: #5c6b2e; }
html[data-temporada="halloween"] .cal-cara   { fill: #ffd36b; }

@media (min-width: 1300px) {
  html[data-temporada="halloween"] .dp-telarana {
    width: clamp(70px, calc((100vw - 1200px) / 2 - 10px), 150px);
    height: clamp(70px, calc((100vw - 1200px) / 2 - 10px), 150px);
    opacity: .12;
  }
  html[data-temporada="halloween"] .dp-calabaza {
    display: block;
    position: absolute;
    bottom: 120px;
    width: clamp(44px, calc((100vw - 1200px) / 2 - 24px), 72px);
    opacity: .7;
    filter: drop-shadow(0 0 14px rgba(242, 140, 56, .35));
  }
  html[data-temporada="halloween"] .dp-cal-izq { left: 14px; transform: rotate(-8deg); }
  html[data-temporada="halloween"] .dp-cal-der { right: 14px; transform: rotate(6deg) scale(.85); }
  /* Araña colgando de la telaraña izquierda. */
  html[data-temporada="halloween"] .dp-colgante {
    display: block;
    position: absolute;
    top: 62px;
    left: clamp(30px, calc((100vw - 1200px) / 4), 70px);
    width: 16px;
    padding-top: 90px;
    color: var(--text-primary);
    opacity: .35;
    transform-origin: top center;
    animation: ht-columpio 5s ease-in-out infinite;
  }
  html[data-temporada="halloween"] .dp-colgante::before {
    content: "";
    position: absolute;
    top: 0; left: 50%;
    width: 1px; height: 92px;
    background: currentColor;
    opacity: .6;
  }
}
@keyframes ht-columpio {
  0%, 100% { transform: rotate(-4deg); }
  50%      { transform: rotate(4deg); }
}

/* La arañita del scroll: su hilo crece con --bajada (0 arriba, 1 abajo).
   Se detiene antes del botón flotante del carrito. */
html[data-temporada="halloween"] .dp-scroll {
  position: absolute;
  top: 62px;
  right: 3px;
  width: 16px;
  height: calc(100vh - 62px - 160px);
  height: calc(100dvh - 62px - 160px);
  color: var(--halloween);
}
html[data-temporada="halloween"] .dp-hilo {
  position: absolute;
  top: 0; left: 50%;
  width: 1px;
  height: calc(var(--bajada, 0) * 100% + 4px);
  background: currentColor;
  opacity: .45;
}
html[data-temporada="halloween"] .dp-arana {
  position: absolute;
  top: calc(var(--bajada, 0) * 100%);
  left: 0;
  width: 16px;
  opacity: .85;
  filter: drop-shadow(0 0 6px rgba(242, 140, 56, .4));
}
@media (min-width: 1300px) {
  html[data-temporada="halloween"] .dp-scroll { right: 10px; width: 20px; }   /* sale de la esquina de la telaraña */
  html[data-temporada="halloween"] .dp-arana { width: 20px; }
}

/* ══ Modal: 3 diseños ═════════════════════════════════════════════
   catalog.js pone data-variante en .modal-box: calabaza · telarana · muertos.
   En celular la foto va arriba y la X a la derecha: la decoración va a la izquierda.
   En escritorio la columna de texto es la derecha: la decoración va ahí. */
html[data-temporada="halloween"] .modal-deco {
  position: absolute;
  inset: 0;
  z-index: 3;                 /* debajo de la X (z-index 4) */
  pointer-events: none;
  overflow: hidden;
  border-radius: inherit;
}
html[data-temporada="halloween"] .modal-deco > * { display: none; position: absolute; }
html[data-temporada="halloween"] :where(.modal-deco svg) { display: block; }

/* 1 · Calabaza */
html[data-temporada="halloween"] .modal-box[data-variante="calabaza"] {
  border-color: var(--halloween-border);
  background-image: radial-gradient(70% 45% at 100% 100%, var(--halloween-soft), transparent 70%);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .6), 0 0 50px rgba(242, 140, 56, .12);
}
html[data-temporada="halloween"] .modal-box[data-variante="calabaza"] .md-calabaza {
  display: block;
  top: 12px; left: 12px;
  width: 42px;
  filter: drop-shadow(0 0 10px rgba(242, 140, 56, .5));
}

/* 2 · Telaraña */
html[data-temporada="halloween"] .modal-box[data-variante="telarana"] {
  border-color: rgba(255, 255, 255, .16);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .6), 0 0 50px rgba(170, 160, 255, .08);
}
html[data-temporada="halloween"] .modal-box[data-variante="telarana"] .md-telarana {
  display: block;
  top: 0; left: 0;
  width: 96px; height: 96px;
  color: #fff;
  opacity: .32;
}
html[data-temporada="halloween"] .modal-box[data-variante="telarana"] .md-arana {
  display: block;
  top: 0; left: 64px;
  width: 15px;
  padding-top: 44px;
  color: #fff;
  opacity: .55;
  transform-origin: top center;
  animation: ht-columpio 4.5s ease-in-out infinite;
}
html[data-temporada="halloween"] .modal-box[data-variante="telarana"] .md-arana::before {
  content: "";
  position: absolute;
  top: 0; left: 50%;
  width: 1px; height: 46px;
  background: currentColor;
  opacity: .7;
}

/* 3 · Día de Muertos */
html[data-temporada="halloween"] .modal-box[data-variante="muertos"] {
  border-color: rgba(247, 179, 43, .45);
  background-image: radial-gradient(70% 40% at 100% 0%, rgba(247, 179, 43, .09), transparent 70%);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .6), 0 0 50px rgba(247, 179, 43, .10);
}
html[data-temporada="halloween"] .modal-box[data-variante="muertos"] .md-papel {
  display: block;
  top: 0; left: 0;
  width: calc(100% - 64px); height: 24px;   /* termina antes de la X de cerrar */
  color: var(--cempasuchil);
  opacity: .85;
}
html[data-temporada="halloween"] .md-banderas path { fill: var(--cempasuchil); opacity: .7; }
html[data-temporada="halloween"] .md-banderas path:nth-child(3n+2) { fill: var(--halloween); }
html[data-temporada="halloween"] .md-banderas path:nth-child(3n) { fill: #c94f7c; }   /* rosa mexicano */
html[data-temporada="halloween"] .modal-box[data-variante="muertos"] .md-flores {
  display: block;
  top: 30px; left: 10px;
  width: 92px;
  opacity: .8;
}
html[data-temporada="halloween"] .md-flores circle { fill: var(--cempasuchil); }
html[data-temporada="halloween"] .md-flores .md-centro { fill: var(--halloween); }

@media (min-width: 860px) {
  /* Abajo a la izquierda de la foto: abajo a la derecha la tapaba el botón de agregar. */
  html[data-temporada="halloween"] .modal-box[data-variante="calabaza"] .md-calabaza {
    top: auto; bottom: 16px; left: 16px; width: 56px;
  }
  html[data-temporada="halloween"] .modal-box[data-variante="telarana"] .md-telarana {
    left: auto; right: 0; width: 130px; height: 130px; transform: scaleX(-1); opacity: .22;
  }
  /* En escritorio cuelga corto, dentro de la esquina: no tapa el nombre del perfume. */
  html[data-temporada="halloween"] .modal-box[data-variante="telarana"] .md-arana { left: auto; right: 34px; padding-top: 20px; }
  html[data-temporada="halloween"] .modal-box[data-variante="telarana"] .md-arana::before { height: 22px; }
  html[data-temporada="halloween"] .modal-box[data-variante="muertos"] .md-papel { left: 50%; width: 50%; height: 28px; }
  html[data-temporada="halloween"] .modal-box[data-variante="muertos"] .md-flores {
    top: auto; bottom: 12px; left: 14px; width: 120px;
  }
}

/* ══ Sin movimiento para quien lo pide ════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  html[data-temporada="halloween"] { scroll-behavior: auto; }
  html[data-temporada="halloween"] .dp-colgante,
  html[data-temporada="halloween"] .md-arana { animation: none; }
}

/* ══ Carrito vacío: telaraña y una araña esperando ════════════════ */
html[data-temporada="halloween"] .cart-empty { position: relative; overflow: hidden; }
html[data-temporada="halloween"] .cart-empty > :not(.cart-empty-deco) { position: relative; z-index: 1; }
html[data-temporada="halloween"] .cart-empty-deco {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
html[data-temporada="halloween"] .ced-telarana {
  position: absolute;
  top: 0; right: 0;
  width: 130px; height: 130px;
  color: var(--text-primary);
  opacity: .16;
  transform: scaleX(-1);
}
html[data-temporada="halloween"] .ced-telarana.izq {
  right: auto; left: 0;
  width: 80px; height: 80px;
  opacity: .1;
  transform: none;
}
html[data-temporada="halloween"] .ced-arana {
  position: absolute;
  top: 0; right: 46px;
  width: 18px;
  padding-top: 110px;
  color: var(--halloween);
  opacity: .8;
  transform-origin: top center;
  animation: ht-columpio 4s ease-in-out infinite;
}
html[data-temporada="halloween"] .ced-arana::before {
  content: "";
  position: absolute;
  top: 0; left: 50%;
  width: 1px; height: 112px;
  background: currentColor;
  opacity: .5;
}
html[data-temporada="halloween"] .ced-arana svg { display: block; }
html[data-temporada="halloween"] .cart-empty i { color: var(--halloween); opacity: .8; }
@media (prefers-reduced-motion: reduce) {
  html[data-temporada="halloween"] .ced-arana { animation: none; }
}

/* ══ Paquete sorpresa (Calaverita) ════════════════════════════════ */
html[data-temporada="halloween"] .tag-sorpresa {
  background: var(--bg-dark);
  color: var(--halloween);
  border: 1px solid var(--halloween);
}
html[data-temporada="halloween"] .sorpresa-caja {
  border-color: var(--halloween-border);
  background: var(--halloween-soft);
}
html[data-temporada="halloween"] .sorpresa-caja > i,
html[data-temporada="halloween"] .sorpresa-caja .sorpresa-extra,
html[data-temporada="halloween"] .cart-precio-extra,
html[data-temporada="halloween"] .cart-nota-extra,
html[data-temporada="halloween"] .cart-item-extra { color: var(--halloween); }