/* Doctor Leyend Shop — Halloween (tarea #136, solo 31-oct-2026). Todo cuelga de html.halloween,
   que pone halloween.js y que deja de ponerse sola el 1-nov a las 12:00 CDMX.
   Fondo: degradado naranja → rojo. Texto oscuro sobre el degradado: #2a0a04 sobre #ff9a2e 9.4:1, sobre #ef4b2b 5.2:1. */
html.halloween {
  --hw-naranja: #ff9a2e;
  --hw-rojo:    #ef4b2b;
  --hw-tinta:   #2a0a04;
  --hw-noche:   #1c0603;
}
html.halloween body { background: var(--hw-rojo); }
html.halloween body::before { content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(165deg, var(--hw-naranja) 0%, #f7712c 45%, var(--hw-rojo) 100%); }

/* Las secciones claras dejan ver el degradado; las tarjetas siguen blancas para leer bien. */
html.halloween .catalogo, html.halloween .pedir, html.halloween .promo { background: transparent; }
html.halloween .catalogo .ceja, html.halloween .pedir .ceja, html.halloween .promo .ceja,
html.halloween .catalogo .intro, html.halloween .catalogo h2, html.halloween .pedir h2,
html.halloween .cierre p, html.halloween .enlace-ig { color: var(--hw-tinta); }
html.halloween .filtro[aria-pressed="true"] { background: var(--hw-tinta); border-color: var(--hw-tinta); }

/* Las oscuras se vuelven noche de Halloween. */
html.halloween .portada { background: radial-gradient(120% 80% at 80% 10%, #8a2a0c 0%, var(--hw-noche) 62%); }
html.halloween .subido { background: linear-gradient(180deg, rgba(28, 6, 3, .94), rgba(58, 12, 5, .94)); }
html.halloween .barra { background: rgba(28, 6, 3, .94); border-bottom-color: rgba(255, 154, 46, .45); }
html.halloween .tira { background: var(--hw-naranja); color: var(--hw-tinta); }
html.halloween .pie { background: var(--hw-noche); }
html.halloween .flotante { background: rgba(28, 6, 3, .92); }

/* A la vista */
html.halloween .hw-junto { font-size: .8em; }

/* Escondidas: chiquitas, medio tapadas y transparentes; al tocarlas brincan. */
html.halloween .portada, html.halloween .promo-caja, html.halloween .contenedor,
html.halloween .pie, html.halloween .tarjeta .foto { position: relative; }
html.halloween .portada, html.halloween .pie { overflow: hidden; }
.hw-esc { position: absolute; z-index: 1; font-size: 26px; line-height: 1; opacity: .55; cursor: pointer;
  user-select: none; -webkit-user-select: none; transition: transform .3s, opacity .3s; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .35)); }
.hw-esc:hover { opacity: .9; transform: scale(1.15); }
.hw-esc.hw-hallada { opacity: 1; transform: scale(1.4) rotate(-12deg); }
.hw-e1 { right: 6px; bottom: 150px; transform: rotate(-18deg); }
.hw-e2 { right: -10px; top: -12px; font-size: 22px; transform: rotate(20deg); }
.hw-e3 { left: -6px; top: -8px; font-size: 20px; }
.hw-e4 { right: 0; top: 4px; font-size: 22px; opacity: .4; }
.hw-e5 { right: 4px; bottom: -6px; }
.hw-e6 { left: 10px; bottom: 6px; font-size: 18px; opacity: .35; }
.hw-mini { position: absolute; right: 6px; bottom: 6px; font-size: 18px; line-height: 1; opacity: .7; pointer-events: none;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .4)); }

/* Rocío: caen sin estorbar los toques ni el carrito. */
.hw-capa { position: fixed; inset: 0; z-index: 25; pointer-events: none; overflow: hidden; }
.hw-cae { position: absolute; top: -60px; line-height: 1; opacity: 0; will-change: transform;
  animation-name: hw-caer; animation-timing-function: linear; animation-fill-mode: forwards; }
@keyframes hw-caer {
  0%   { transform: translate3d(0, 0, 0) rotate(0deg); opacity: 0; }
  8%   { opacity: .95; }
  50%  { transform: translate3d(var(--hw-vaiven), 55vh, 0) rotate(calc(var(--hw-giro) / 2)); }
  90%  { opacity: .9; }
  100% { transform: translate3d(0, calc(100vh + 80px), 0) rotate(var(--hw-giro)); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .hw-capa { display: none; }
  .hw-esc { transition: none; }
}