/* =========================================================
   SOMOS PASTAS · TEMÁTICA DE HALLOWEEN
   halloween.css — se carga SOLO si está activa en el panel.

   Paleta: negro noche, violeta profundo, naranja calabaza y
   destellos ámbar. Cambia la portada entera, los botones y lo
   que se abre (armador, carrito, checkout). Logo y combos quedan.

   Reglas de oro:
     · Lo decorativo nunca intercepta clics (pointer-events:none),
       salvo las calabazas y fantasmas que se tocan a propósito.
     · Solo se anima transform y opacity (no recalcula el layout).
     · "Reducir movimiento" del sistema = cero animaciones.
   ========================================================= */

body.hw {
  --hw-noche:    #0b0712;
  --hw-noche-2:  #140b1f;
  --hw-violeta:  #2a1442;
  --hw-violeta-2:#4b2470;
  --hw-calabaza: #ff7518;
  --hw-calabaza-2:#ff9a3c;
  --hw-ambar:    #ffc04d;
  --hw-hueso:    #f4ead8;
  --hw-brillo:   0 0 18px rgba(255, 117, 24, .55), 0 0 42px rgba(255, 117, 24, .25);
}

/* ---------------------------------------------------------
   1. COLORES DE MARCA → HALLOWEEN (toda la web)
   --------------------------------------------------------- */
body.hw {
  --verde:      #1d0f2c;   /* barras y botones verdes → violeta noche */
  --verde-osc:  #0e0717;
  --verde-cla:  #3a1d57;
  --tomate:     #ff7518;   /* acción → naranja calabaza */
  --tomate-osc: #e25d00;
  --oro:        #ffa43a;
  --oro-cla:    #ffc773;
  --sh-v: 0 10px 30px rgba(255, 117, 24, .28);

  /* Telaraña reutilizable (esquinas de armador, carrito, etc.) */
  --hw-tela: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120' fill='none' stroke='%23f4ead8' stroke-width='.8' opacity='.55'%3E%3Cpath d='M120 0 L0 6 M120 0 L8 46 M120 0 L36 86 M120 0 L74 112 M120 0 L114 120'/%3E%3Cpath d='M96 1 Q98 9 98 9 Q106 14 111 21 Q115 22 119 24'/%3E%3Cpath d='M72 2 Q76 18 76 18 Q90 28 101 41 Q110 44 118 48'/%3E%3Cpath d='M46 4 Q54 28 54 28 Q74 44 91 63 Q104 67 117 72'/%3E%3Cpath d='M20 5 Q31 37 31 37 Q58 59 82 84 Q99 89 116 96'/%3E%3C/svg%3E");
}

/* ---- Fondo oscuro de la página (opcional desde el panel) ---- */
body.hw-oscuro {
  background:
    radial-gradient(1200px 600px at 12% 0%, rgba(75, 36, 112, .45), transparent 60%),
    radial-gradient(900px 500px at 100% 30%, rgba(255, 117, 24, .10), transparent 60%),
    radial-gradient(1000px 700px at 0% 85%, rgba(75, 36, 112, .30), transparent 60%),
    var(--hw-noche);
  background-attachment: fixed;
  color: var(--hw-hueso);
}
@media (max-width: 720px) {
  body.hw-oscuro { background-attachment: scroll; }   /* fixed repinta al scrollear en celular */
}
body.hw-oscuro .seccion { background: transparent; position: relative; }
body.hw-oscuro .cab h2 { color: var(--hw-hueso); }
body.hw-oscuro .cab h2 em { color: var(--hw-calabaza); }
body.hw-oscuro .cab p  { color: rgba(244, 234, 216, .72); }
body.hw-oscuro .esqueleto { background: rgba(255, 255, 255, .06); }
body.hw-oscuro .collage { --verde-tablero: #140b1f; }
body.hw-oscuro .pie {
  background: radial-gradient(700px 300px at 50% 0%, rgba(255, 117, 24, .10), transparent 70%), #07040b;
  position: relative;
}

/* Barra superior: noche con filo naranja */
body.hw .nav {
  background: rgba(14, 7, 23, .94);
  backdrop-filter: blur(12px);
  box-shadow: inset 0 -1px 0 rgba(255, 117, 24, .3);
}
body.hw .epigrafe { color: var(--hw-calabaza-2); }
body.hw .vitrina-card { box-shadow: 0 14px 40px rgba(0, 0, 0, .55); }
body.hw .vitrina-card:hover { box-shadow: 0 0 0 2px rgba(255, 117, 24, .7), 0 0 40px rgba(255, 117, 24, .25), 0 24px 60px rgba(0, 0, 0, .6); }
body.hw .vitrina-card .info .p,
body.hw .vitrina-card .p {
  background: linear-gradient(180deg, #ffb057, #ff7518) !important;
  color: #1a0d22 !important;
  box-shadow: 0 6px 18px rgba(255, 117, 24, .45);
}

/* ---------------------------------------------------------
   1b. BOTONES DE HALLOWEEN — en toda la web
   Naranja calabaza con brillo de vela, violeta embrujado y
   fantasma de vidrio para los secundarios.
   --------------------------------------------------------- */
body.hw .btn-armar,
body.hw .btn-tomate {
  background: linear-gradient(180deg, #ffa04a 0%, #ff7518 48%, #d9530a 100%);
  color: #1a0d22;
  font-weight: 800;
  border: 1.5px solid rgba(255, 214, 140, .55);
  text-shadow: 0 1px 0 rgba(255, 220, 160, .45);
  box-shadow:
    0 10px 30px rgba(255, 117, 24, .45),
    0 0 0 3px rgba(26, 13, 34, .35),
    inset 0 1px 0 rgba(255, 255, 255, .35),
    inset 0 -6px 12px rgba(120, 30, 0, .25);
  position: relative;
}
body.hw .btn-armar { color: #1a0d22; }
body.hw .btn-armar:hover,
body.hw .btn-tomate:hover:not(:disabled) {
  background: linear-gradient(180deg, #ffb565 0%, #ff8a2e 48%, #e25d00 100%);
  box-shadow:
    0 14px 44px rgba(255, 117, 24, .65),
    0 0 0 5px rgba(255, 117, 24, .16),
    inset 0 1px 0 rgba(255, 255, 255, .4);
  animation: hw-vela-btn 1.6s ease-in-out infinite;
}
@keyframes hw-vela-btn {
  0%, 100% { filter: brightness(1); }
  40% { filter: brightness(1.08); }
  60% { filter: brightness(.97); }
}
/* Telarañita en la esquina de los botones grandes */
body.hw .btn-armar::after,
body.hw .btn-lg.btn-tomate::after,
body.hw .btn-block.btn-tomate::after {
  content: '';
  position: absolute; top: 0; right: 14px;
  width: 30px; height: 30px;
  background: var(--hw-tela) no-repeat right top / contain;
  opacity: .45;
  pointer-events: none;
  filter: invert(1) brightness(.2);
}
body.hw .btn-armar .em,
body.hw .btn-armar > span:first-child { filter: drop-shadow(0 0 6px rgba(255, 230, 150, .8)); }

body.hw .btn-verde {
  background: linear-gradient(180deg, #5a2c86 0%, #2a1442 100%);
  color: var(--hw-hueso);
  border: 1.5px solid rgba(255, 154, 60, .55);
  box-shadow: 0 10px 28px rgba(75, 36, 112, .55), 0 0 18px rgba(255, 117, 24, .15), inset 0 1px 0 rgba(255, 255, 255, .15);
}
body.hw .btn-verde:hover:not(:disabled) {
  background: linear-gradient(180deg, #6b36a0 0%, #34185a 100%);
  border-color: var(--hw-calabaza);
  box-shadow: 0 14px 36px rgba(75, 36, 112, .65), 0 0 26px rgba(255, 117, 24, .35);
}

body.hw .btn-linea {
  background: rgba(36, 21, 57, .55);
  color: var(--hw-hueso);
  border: 1.5px solid rgba(255, 154, 60, .45);
  backdrop-filter: blur(6px);
}
body.hw .btn-linea:hover { border-color: var(--hw-calabaza); color: #ffb057; background: rgba(42, 20, 66, .8); }

/* Carrito de la barra superior */
body.hw .nav-cart {
  background: linear-gradient(180deg, #ffa04a, #ff7518);
  color: #1a0d22;
  border: 1.5px solid rgba(255, 214, 140, .55);
  box-shadow: 0 6px 20px rgba(255, 117, 24, .35);
}
body.hw .nav-cart:hover { background: linear-gradient(180deg, #ffb565, #ff8a2e); }
body.hw .nav-cart .n { background: #1a0d22; color: #ffb057; }

body.hw .repetir-pedido {
  background: rgba(36, 21, 57, .6);
  border-color: rgba(255, 154, 60, .5);
}
body.hw .repetir-pedido:hover { background: rgba(42, 20, 66, .85); border-color: var(--hw-calabaza); }

/* Avisos (toasts) */
body.hw .aviso-toast {
  background: #1d0f2c; color: var(--hw-hueso);
  border: 1.5px solid rgba(255, 154, 60, .5);
}
body.hw .aviso-toast.mal { background: #ff7518; color: #1a0d22; }

/* Barra del pedido abajo */
body.hw .barra-movil {
  background: rgba(20, 11, 31, .95);
  border-color: rgba(255, 117, 24, .35);
  box-shadow: 0 -8px 32px rgba(0, 0, 0, .5);
}

/* ---------------------------------------------------------
   1c. ARMADOR, CARRITO Y CHECKOUT EMBRUJADOS
   Se reasignan los colores SOLO adentro de lo que se abre:
   fondo noche, tarjetas violeta, acentos ámbar.
   --------------------------------------------------------- */
body.hw .modal,
body.hw .carrito {
  --crema:   #150b20;
  --crema-2: #1f1130;
  --papel:   #241539;
  --masa:    #2e1a46;
  --tinta:   #f6ecdc;
  --tinta-2: rgba(246, 236, 220, .76);
  --tinta-3: rgba(246, 236, 220, .52);
  --linea:   rgba(255, 170, 90, .16);
  --linea-2: rgba(255, 170, 90, .3);
  --verde:   #ffa43a;   /* acento: precios, elegidos, tildes */
  --verde-osc: #ff7518;
  --oro:     #ffc04d;
  color: var(--tinta);
}
body.hw .modal-fondo { background: rgba(8, 4, 14, .8); }
body.hw .modal {
  background:
    radial-gradient(120% 60% at 50% 115%, rgba(255, 117, 24, .14), transparent 60%),
    var(--crema);
  box-shadow: 0 0 0 1.5px rgba(255, 117, 24, .45), 0 0 60px rgba(255, 117, 24, .18), 0 30px 90px rgba(0, 0, 0, .75);
}

/* Cabeceras: noche violeta con telaraña y luna */
body.hw .modal-cab,
body.hw .carrito-cab {
  position: relative;
  background:
    radial-gradient(160px 90px at 88% -20%, rgba(255, 196, 120, .22), transparent 70%),
    linear-gradient(120deg, #2a1442 0%, #12081c 100%);
  color: var(--hw-hueso);
  border-bottom: 1.5px solid rgba(255, 117, 24, .35);
  overflow: hidden;
}
body.hw .modal-cab::after,
body.hw .carrito-cab::after {
  content: '';
  position: absolute; top: 0; right: 0;
  width: 120px; height: 120px;
  background: var(--hw-tela) no-repeat right top / contain;
  pointer-events: none;
}
body.hw .modal-cab > *, body.hw .carrito-cab > * { position: relative; z-index: 1; }
body.hw .modal-cab h2,
body.hw .carrito-cab h2 { color: var(--hw-hueso); }
body.hw .modal-cab h2::before,
body.hw .carrito-cab h2::before { content: '🎃 '; }
body.hw .modal-cab .sub { color: rgba(255, 192, 120, .85); }
body.hw .cerrar { background: rgba(255, 117, 24, .16); color: var(--hw-hueso); border: 1px solid rgba(255, 154, 60, .35); }
body.hw .cerrar:hover { background: rgba(255, 117, 24, .35); }

/* Barra de pasos */
body.hw .pasos-barra { background: #110919; border-bottom-color: rgba(255, 117, 24, .2); }
body.hw .paso { background: #1f1130; color: var(--tinta-2); border-color: rgba(255, 170, 90, .2); }
body.hw .paso.activo {
  background: linear-gradient(180deg, #ffa04a, #ff7518);
  color: #1a0d22;
  border-color: transparent;
  box-shadow: 0 0 18px rgba(255, 117, 24, .45);
}
body.hw .paso.activo .n { background: rgba(26, 13, 34, .25); color: #1a0d22; }
body.hw .paso.hecho { color: var(--hw-hueso); }
body.hw .paso.hecho .n { background: #ffa43a; color: #1a0d22; }

/* Avisos dentro del armador */
body.hw .incluye,
body.hw .topping-aviso {
  background: rgba(255, 117, 24, .08) !important;
  border-color: rgba(255, 154, 60, .35) !important;
  color: var(--tinta-2);
}
body.hw .incluye b { color: #ffb057; }

/* Tarjetas de opciones */
body.hw .opcion { background: var(--papel); border-color: rgba(255, 170, 90, .18); color: var(--tinta); }
body.hw .opcion:hover { border-color: rgba(255, 154, 60, .6); box-shadow: 0 0 24px rgba(255, 117, 24, .22), 0 12px 30px rgba(0, 0, 0, .45); }
body.hw .opcion.elegida {
  border-color: var(--hw-calabaza);
  box-shadow: 0 0 0 1px var(--hw-calabaza), 0 0 30px rgba(255, 117, 24, .45), 0 12px 30px rgba(0, 0, 0, .5);
}
body.hw .opcion.elegida::after {
  content: '🎃';
  background: #1a0d22;
  border: 2px solid var(--hw-calabaza);
  font-size: 15px;
  box-shadow: 0 0 14px rgba(255, 117, 24, .6);
}
body.hw .opcion.multi.elegida { background: #2c1544; }
body.hw .opcion.multi:not(.elegida):not(.agotada)::after {
  background: rgba(20, 10, 30, .85);
  color: #ffb057;
  border: 1.5px solid rgba(255, 154, 60, .6);
}
body.hw .opcion .precio { color: #ffb057; }
body.hw .opcion .extra { color: var(--tinta-3); }
body.hw .opcion .extra.incluido { color: #ffc04d; }
body.hw .opcion .extra.suma { background: rgba(255, 117, 24, .18); color: #ffb057; }
body.hw .opcion .combo-chip { background: rgba(255, 192, 77, .14); color: #ffc04d; }
body.hw .opcion.sin-extra { background: #1a0f28; border-style: dashed; }
body.hw .opcion .foto { background: #2e1a46; }
body.hw .cinta-agotado { background: #1a0d22; color: #ffb057; border: 1px solid rgba(255, 154, 60, .6); box-shadow: none; }

body.hw .multi-resumen { background: #1a0f28; border-color: rgba(255, 154, 60, .3); }
body.hw .multi-resumen b { color: #ffb057; }
body.hw .multi-resumen .suma { color: #ffb057; }

body.hw .modal-pie,
body.hw .carrito-pie {
  background: #12081c;
  border-top: 1.5px solid rgba(255, 117, 24, .25);
}
body.hw .modal-pie .precio-vivo,
body.hw .totales .total .v,
body.hw .resumen .tot .v {
  color: #ffb057;
  text-shadow: 0 0 18px rgba(255, 117, 24, .45);
}

/* Carrito */
body.hw .carrito { box-shadow: -22px 0 66px rgba(0, 0, 0, .7), -1px 0 0 rgba(255, 117, 24, .4); }
body.hw .item { background: var(--papel); border-color: rgba(255, 170, 90, .18); }
body.hw .item .combo-nom { color: #ffc04d; }
body.hw .item .sub { color: var(--hw-hueso); }
body.hw .cant { background: #1a0f28; }
body.hw .cant button:hover { background: var(--hw-calabaza); color: #1a0d22; }
body.hw .aviso-envio { background: rgba(255, 117, 24, .08); border-color: rgba(255, 154, 60, .3); }

/* Checkout: campos y opciones */
body.hw .modal .input,
body.hw .modal .textarea,
body.hw .modal input,
body.hw .modal textarea { background: #1a0f28; color: var(--hw-hueso); border-color: rgba(255, 170, 90, .28); }
body.hw .modal .input:focus,
body.hw .modal .textarea:focus { border-color: var(--hw-calabaza); box-shadow: 0 0 0 4px rgba(255, 117, 24, .18); }
body.hw .opcion-btn,
body.hw .pago-btn { background: #1f1130; color: var(--hw-hueso); border-color: rgba(255, 170, 90, .25); }
body.hw .opcion-btn.on,
body.hw .pago-btn.on {
  border-color: var(--hw-calabaza);
  background: rgba(255, 117, 24, .12);
  color: #ffb057;
  box-shadow: 0 0 22px rgba(255, 117, 24, .3);
}
body.hw .resumen { background: #1a0f28; border-color: rgba(255, 170, 90, .2); }
body.hw .exito .tilde {
  background: radial-gradient(circle at 50% 40%, #ffb057, #ff7518 60%, #c24a00);
  color: #1a0d22;
  box-shadow: 0 0 40px rgba(255, 117, 24, .6);
}
body.hw .exito .num { background: #1a0f28; color: #ffb057; }

/* Fantasmita que espía desde el pie del armador */
body.hw .modal-pie { position: relative; }
body.hw .modal-pie::before {
  content: '👻';
  position: absolute; left: 50%; top: -18px;
  font-size: 22px;
  filter: drop-shadow(0 0 8px rgba(220, 210, 255, .6));
  animation: hw-espia 6s ease-in-out infinite;
  pointer-events: none;
}
@keyframes hw-espia {
  0%, 60%, 100% { transform: translate(-50%, 18px); opacity: 0; }
  70%, 90%      { transform: translate(-50%, 0);    opacity: .9; }
}
@media (prefers-reduced-motion: reduce) {
  body.hw .modal-pie::before { display: none; }
  body.hw .btn-armar:hover, body.hw .btn-tomate:hover { animation: none; }
}

/* ---------------------------------------------------------
   1d. PORTADA DE HALLOWEEN — reemplaza por completo la de
   siempre: ni la foto fija ni el carrusel. Manda el video,
   o la foto de Halloween, o la escena nocturna incluida.
   --------------------------------------------------------- */
body.hw .portada { background: #0b0712; }
body.hw .portada::before {
  background-image: var(--hw-portada-img, none) !important;
  background-position: center 40% !important;
}
body.hw .portada-fondos { display: none !important; }
body.hw .portada::after {
  background:
    linear-gradient(180deg, rgba(11, 7, 18, .6) 0%, rgba(11, 7, 18, .3) 40%, rgba(11, 7, 18, .88) 100%),
    radial-gradient(80% 60% at 50% 100%, rgba(255, 117, 24, .2), transparent 70%) !important;
}
body.hw .portada h1 { color: var(--hw-hueso) !important; text-shadow: 0 4px 30px rgba(0, 0, 0, .6); }
body.hw .portada h1 em {
  color: var(--hw-calabaza) !important;
  text-shadow: 0 0 18px rgba(255, 117, 24, .65), 0 0 46px rgba(255, 117, 24, .35);
}
body.hw .cintita { border-color: rgba(255, 154, 60, .55); color: #ffcf8f; background: rgba(26, 13, 34, .45); }
body.hw .sello { border-color: rgba(255, 154, 60, .35) !important; background: rgba(26, 13, 34, .5) !important; }
body.hw .logo-grande img { box-shadow: 0 0 0 4px rgba(255, 117, 24, .55), 0 0 50px rgba(255, 117, 24, .45) !important; }

/* Escena nocturna incluida (cuando no hay video ni foto) */
.hw-escena {
  position: absolute; inset: 0;
  z-index: 0;
  overflow: hidden;
  background:
    radial-gradient(1200px 700px at 50% 120%, rgba(255, 117, 24, .28), transparent 60%),
    radial-gradient(900px 600px at 15% 0%, rgba(90, 44, 134, .55), transparent 65%),
    linear-gradient(180deg, #0b0712 0%, #1b0d2b 55%, #2a1240 100%);
}
.hw-escena .luna {
  position: absolute; top: 12%; right: 12%;
  width: clamp(110px, 16vw, 230px); aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 36%, #fff6d8 0%, #ffe6a3 45%, #f2b960 75%, #c97f2a 100%);
  box-shadow: 0 0 60px 18px rgba(255, 200, 110, .35), 0 0 160px 60px rgba(255, 140, 40, .18);
}
.hw-escena .luna::before, .hw-escena .luna::after {
  content: ''; position: absolute; border-radius: 50%; background: rgba(190, 120, 50, .25);
}
.hw-escena .luna::before { width: 22%; height: 22%; top: 28%; left: 52%; }
.hw-escena .luna::after  { width: 14%; height: 14%; top: 60%; left: 30%; }
.hw-escena .estrellas {
  position: absolute; inset: 0 0 40% 0;
  background-image:
    radial-gradient(1.5px 1.5px at 10% 20%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 30% 8%, #fff 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 46% 30%, #ffe 50%, transparent 51%),
    radial-gradient(1px 1px at 62% 14%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 78% 40%, #fff 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 20% 44%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 90% 10%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 54% 52%, #fff 50%, transparent 51%);
  opacity: .7;
  animation: hw-titilar 4s ease-in-out infinite alternate;
}
@keyframes hw-titilar { from { opacity: .45; } to { opacity: .85; } }
.hw-escena svg.siluetas {
  position: absolute; left: 0; right: 0; bottom: 0;
  width: 100%; height: 42%;
  min-height: 180px;
}
@media (prefers-reduced-motion: reduce) { .hw-escena .estrellas { animation: none; } }

/* ---------------------------------------------------------
   2. VIDEO DE PORTADA
   --------------------------------------------------------- */
.hw-video {
  position: absolute; inset: 0;
  z-index: 1;                    /* mismo plano que el carrusel */
  overflow: hidden;
  background: transparent;       /* mientras carga se ve la escena/foto de Halloween */
}
.hw-video video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;             /* llena sin deformar (mantiene proporción) */
  object-position: center 40%;
  opacity: 0;
  transition: opacity 1s ease;
}
.hw-video video.on { opacity: 1; }   /* el que se está viendo (fundido al cambiar) */
.hw-video.fallo { display: none; } /* si falla, se ve la foto de siempre */

/* Controles del video: viven dentro del dock flotante (ver abajo) */
.hw-vctrl { display: flex; gap: 8px; align-items: center; }
.hw-vctrl.oculto { display: none; }
.hw-vbtn {
  display: inline-flex; align-items: center; gap: 8px;
  height: 44px; padding: 0 16px;
  border-radius: 999px;
  border: 1.5px solid rgba(255, 192, 77, .45);
  background: rgba(14, 7, 23, .62);
  backdrop-filter: blur(10px);
  color: var(--hw-hueso);
  font: 700 14px/1 'Inter', sans-serif;
  cursor: pointer;
  transition: transform .15s ease, background .2s ease, box-shadow .2s ease;
}
.hw-vbtn:hover { background: rgba(42, 20, 66, .85); transform: translateY(-1px); }
.hw-vbtn:focus-visible { outline: 3px solid var(--hw-ambar); outline-offset: 2px; }
.hw-vbtn .ic { font-size: 16px; line-height: 1; }
.hw-redondo { width: 44px; padding: 0; justify-content: center; }
.hw-redondo .ic { font-size: 13px; letter-spacing: -1px; }

/* "Activar sonido": destacado hasta que se toca */
.hw-sonido {
  background: linear-gradient(180deg, #ff8a2e, #f26a0b);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 8px 26px rgba(255, 117, 24, .5);
  animation: hw-llamar 2.4s ease-in-out infinite;
}
.hw-sonido:hover { background: linear-gradient(180deg, #ff9a45, #ff7518); }
.hw-sonido.on {
  background: rgba(14, 7, 23, .62);
  border-color: rgba(255, 192, 77, .45);
  box-shadow: none;
  animation: none;
}
@keyframes hw-llamar {
  0%, 100% { box-shadow: 0 8px 26px rgba(255, 117, 24, .45), 0 0 0 0 rgba(255, 117, 24, .45); }
  50%      { box-shadow: 0 8px 26px rgba(255, 117, 24, .55), 0 0 0 10px rgba(255, 117, 24, 0); }
}
@media (max-width: 720px) {
  .hw-vbtn { height: 42px; font-size: 13px; padding: 0 14px; }
  .hw-redondo { width: 42px; padding: 0; }
}

/* ---------------------------------------------------------
   3. DOCK FLOTANTE (abajo a la izquierda)
      🎃 apagar/prender efectos · 🔊 sonido mientras navega
   --------------------------------------------------------- */
.hw-dock {
  position: fixed;
  left: 18px; bottom: 18px;
  z-index: 70;                   /* debajo de la barra del pedido (80) */
  display: flex; gap: 8px;
  transition: bottom .35s cubic-bezier(.2, .8, .2, 1);
}
.hw-dock .hw-vbtn { box-shadow: 0 8px 24px rgba(0, 0, 0, .4); }
.hw-dock .hw-vbtn[hidden] { display: none; }
.hw-dock .hw-efectos .ic { font-size: 19px; }
.hw-dock .hw-efectos.off { filter: grayscale(1); opacity: .75; }
@media (max-width: 939px) {
  body:has(.barra-movil.on) .hw-dock { bottom: 96px; }
}

/* ---------------------------------------------------------
   4. CAPA DECORATIVA FIJA (arañas, hojas, murciélagos)
   --------------------------------------------------------- */
.hw-capa {
  position: fixed; inset: 0;
  z-index: 50;                   /* sobre el contenido, bajo barra y modales */
  pointer-events: none;
  overflow: hidden;
  contain: strict;
}
body.hw-sin-efectos .hw-capa,
body.hw-sin-efectos .hw-local { display: none !important; }

/* Pausa general (pestaña oculta o fuera de vista) */
body.hw-pausa .hw-capa *,
body.hw-pausa .hw-local *,
.hw-local.pausa * { animation-play-state: paused !important; }

/* ---- Telarañas de las esquinas ---- */
.hw-tela {
  position: absolute;
  width: clamp(90px, 13vw, 170px);
  opacity: .55;
  color: rgba(244, 234, 216, .75);
}
.hw-tela svg { display: block; width: 100%; height: auto; }
.hw-tela.ti { top: var(--nav-h, 72px); left: 0; }
.hw-tela.td { top: var(--nav-h, 72px); right: 0; transform: scaleX(-1); }
.hw-tela.chica { width: clamp(60px, 8vw, 110px); opacity: .4; }

/* ---- Arañas colgando ----
   .hw-arana es el "péndulo" entero (gira desde arriba).
   El hilo crece/encoge con scaleY y la araña baja con translateY,
   las dos con la MISMA animación → siempre van pegadas. */
.hw-arana {
  position: absolute;
  top: var(--nav-h, 72px);
  width: 30px; margin-left: -15px;
  transform-origin: 50% 0;
  animation: hw-pendulo var(--balanceo, 5s) ease-in-out infinite alternate;
}
.hw-arana .hilo {
  position: absolute; left: 50%; top: 0;
  width: 1px; margin-left: -.5px;
  height: var(--baja, 200px);
  background: linear-gradient(180deg, rgba(244, 234, 216, .1), rgba(244, 234, 216, .65));
  transform-origin: 50% 0;
  transform: scaleY(0);
  animation: hw-hilo var(--dur, 14s) var(--retraso, 0s) ease-in-out infinite;
}
.hw-arana .bicho {
  position: absolute; left: 0; top: 0;
  width: 30px;
  transform: translateY(-40px);
  animation: hw-bajar var(--dur, 14s) var(--retraso, 0s) ease-in-out infinite;
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .55));
}
.hw-arana .bicho svg { display: block; width: 100%; height: auto; }
.hw-arana .bicho .patas { transform-origin: 50% 45%; animation: hw-patitas .5s ease-in-out infinite alternate; }

@keyframes hw-pendulo { from { transform: rotate(-3.5deg); } to { transform: rotate(3.5deg); } }
@keyframes hw-hilo {
  0%, 6%    { transform: scaleY(0); }
  38%, 62%  { transform: scaleY(1); }
  50%       { transform: scaleY(.93); }
  94%, 100% { transform: scaleY(0); }
}
@keyframes hw-bajar {
  0%, 6%    { transform: translateY(-40px); }
  38%, 62%  { transform: translateY(calc(var(--baja, 200px) - 6px)); }
  50%       { transform: translateY(calc(var(--baja, 200px) * .93 - 6px)); }
  94%, 100% { transform: translateY(-40px); }
}
@keyframes hw-patitas { from { transform: scaleX(1); } to { transform: scaleX(.86); } }

/* Variante: araña que se queda colgada y solo se hamaca */
.hw-arana.quieta .hilo  { animation: none; transform: none; }
.hw-arana.quieta .bicho { animation: hw-respira 4s ease-in-out infinite; transform: translateY(calc(var(--baja) - 6px)); }
@keyframes hw-respira {
  0%, 100% { transform: translateY(calc(var(--baja) - 6px)); }
  50%      { transform: translateY(calc(var(--baja) - 18px)); }
}

/* ---- Hojas secas que caen ---- */
.hw-hoja {
  position: absolute; top: -30px;
  width: var(--t, 16px);
  opacity: var(--op, .7);
  animation: hw-caer var(--dur, 16s) var(--retraso, 0s) linear infinite;
  will-change: transform;
}
.hw-hoja svg { display: block; width: 100%; height: auto; animation: hw-girar var(--giro, 5s) ease-in-out infinite alternate; }
@keyframes hw-caer {
  0%   { transform: translate3d(0, -40px, 0); }
  25%  { transform: translate3d(var(--deriva, 40px), 25vh, 0); }
  50%  { transform: translate3d(calc(var(--deriva, 40px) * -.4), 50vh, 0); }
  75%  { transform: translate3d(var(--deriva, 40px), 75vh, 0); }
  100% { transform: translate3d(0, 108vh, 0); }
}
@keyframes hw-girar { from { transform: rotate(-35deg) rotateY(0); } to { transform: rotate(45deg) rotateY(160deg); } }

/* ---- Murciélagos ---- */
.hw-murcielago {
  position: absolute; left: 0; top: 0;
  width: var(--t, 46px);
  color: #0a0510;
  filter: drop-shadow(0 0 6px rgba(255, 117, 24, .35));
  will-change: transform;
}
.hw-murcielago svg { display: block; width: 100%; height: auto; overflow: visible; }
.hw-murcielago .ala-i { transform-origin: 46% 45%; animation: hw-aleteo-i .18s ease-in-out infinite alternate; }
.hw-murcielago .ala-d { transform-origin: 54% 45%; animation: hw-aleteo-d .18s ease-in-out infinite alternate; }
@keyframes hw-aleteo-i { from { transform: scaleY(1) rotate(0); } to { transform: scaleY(.35) rotate(14deg); } }
@keyframes hw-aleteo-d { from { transform: scaleY(1) rotate(0); } to { transform: scaleY(.35) rotate(-14deg); } }

/* ---------------------------------------------------------
   5. PIEZAS LOCALES (viven dentro de una sección)
   --------------------------------------------------------- */
.hw-local {
  position: absolute; inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 2;
}
.portada > .hw-local { z-index: 2; }          /* niebla/chispas: sobre el video, bajo el velo */
.portada > .hw-local.arriba { z-index: 4; }   /* calabazas y fantasmas: se pueden tocar */

/* ---- Niebla ---- */
.hw-niebla {
  position: absolute; left: -25%; right: -25%; bottom: -10%;
  height: 55%;
  background:
    radial-gradient(40% 55% at 20% 70%, rgba(220, 210, 235, .16), transparent 70%),
    radial-gradient(35% 50% at 55% 80%, rgba(220, 210, 235, .13), transparent 70%),
    radial-gradient(45% 60% at 85% 75%, rgba(220, 210, 235, .15), transparent 70%);
  animation: hw-niebla 38s ease-in-out infinite alternate;
  will-change: transform;
}
.hw-niebla.b {
  height: 40%; bottom: -6%;
  opacity: .8;
  animation-duration: 52s;
  animation-direction: alternate-reverse;
}
@keyframes hw-niebla { from { transform: translate3d(-8%, 0, 0); } to { transform: translate3d(8%, -3%, 0); } }

/* ---- Chispas naranjas que suben ---- */
.hw-chispa {
  position: absolute; bottom: -10px;
  width: var(--t, 4px); height: var(--t, 4px);
  border-radius: 50%;
  background: radial-gradient(circle, #ffd27a 0%, #ff7518 55%, transparent 70%);
  box-shadow: 0 0 8px 2px rgba(255, 117, 24, .6);
  opacity: 0;
  animation: hw-subir var(--dur, 9s) var(--retraso, 0s) ease-out infinite;
}
@keyframes hw-subir {
  0%   { transform: translate3d(0, 0, 0); opacity: 0; }
  10%  { opacity: .95; }
  70%  { opacity: .6; }
  100% { transform: translate3d(var(--deriva, 20px), calc(var(--alto, 300px) * -1), 0); opacity: 0; }
}

/* ---- Ojos que brillan en la oscuridad ---- */
.hw-ojos {
  position: absolute;
  display: flex; gap: var(--sep, 9px);
  opacity: 0;
  animation: hw-aparecen var(--dur, 11s) var(--retraso, 0s) ease-in-out infinite;
}
.hw-ojos i {
  display: block;
  width: var(--t, 9px); height: calc(var(--t, 9px) * .62);
  border-radius: 50% 50% 45% 45%;
  background: radial-gradient(circle at 50% 55%, #fff6c2 0%, #ffc04d 35%, #ff7518 70%, transparent 72%);
  box-shadow: 0 0 10px 2px rgba(255, 160, 40, .55);
  animation: hw-parpadeo 4.5s var(--retraso, 0s) infinite;
  transform-origin: 50% 50%;
}
@keyframes hw-aparecen { 0%, 100% { opacity: 0; } 18%, 72% { opacity: .9; } }
@keyframes hw-parpadeo { 0%, 46%, 50%, 100% { transform: scaleY(1); } 48% { transform: scaleY(.08); } }

/* ---- Calabazas (se arrastran y se encienden al tocarlas) ---- */
.hw-calabaza {
  position: absolute;
  width: var(--t, 64px);
  pointer-events: auto;
  cursor: grab;
  touch-action: none;            /* para poder arrastrar con el dedo */
  user-select: none; -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  z-index: 4;
}
.hw-calabaza .flota { animation: hw-flotar var(--dur, 5s) var(--retraso, 0s) ease-in-out infinite; }
.hw-calabaza svg {
  display: block; width: 100%; height: auto; overflow: visible;
  filter: drop-shadow(0 8px 14px rgba(0, 0, 0, .55)) drop-shadow(0 0 14px rgba(255, 117, 24, .35));
  transition: filter .3s ease, transform .2s ease;
}
.hw-calabaza .cara { transition: fill .25s ease; animation: hw-vela 3.2s ease-in-out infinite; }
.hw-calabaza:hover svg { transform: scale(1.06) rotate(-3deg); }
.hw-calabaza.arrastrando { cursor: grabbing; z-index: 60; }
.hw-calabaza.arrastrando svg { transform: scale(1.12); filter: drop-shadow(0 18px 24px rgba(0, 0, 0, .6)) drop-shadow(0 0 22px rgba(255, 117, 24, .6)); }
.hw-calabaza.encendida svg {
  filter: drop-shadow(0 8px 14px rgba(0, 0, 0, .5)) drop-shadow(0 0 26px rgba(255, 180, 60, .95)) drop-shadow(0 0 60px rgba(255, 117, 24, .7));
}
.hw-calabaza.encendida .cara { fill: #fff3b0; animation: none; }
@keyframes hw-flotar {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50%      { transform: translateY(-10px) rotate(2deg); }
}
@keyframes hw-vela { 0%, 100% { opacity: 1; } 45% { opacity: .82; } 50% { opacity: .95; } 55% { opacity: .78; } }

/* Chispazo al tocar una calabaza */
.hw-chispazo {
  position: absolute; left: 50%; top: 50%;
  width: 6px; height: 6px; margin: -3px 0 0 -3px;
  border-radius: 50%;
  background: #ffd27a;
  box-shadow: 0 0 10px #ff9a3c;
  pointer-events: none;
  animation: hw-chispazo .7s ease-out forwards;
}
@keyframes hw-chispazo {
  from { transform: translate(0, 0) scale(1); opacity: 1; }
  to   { transform: translate(var(--dx), var(--dy)) scale(.3); opacity: 0; }
}

/* ---- Fantasmas (cruzan la parte de arriba; si los tocás, se esfuman) ---- */
.hw-fantasma {
  position: absolute; left: 0;
  width: var(--t, 54px);
  pointer-events: auto;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  animation: hw-cruzar var(--dur, 30s) var(--retraso, 0s) linear infinite;
  animation-direction: var(--dir, normal);
  will-change: transform;
}
.hw-fantasma .cuerpo-f {
  animation: hw-ondear 3.4s ease-in-out infinite;
  opacity: .82;
  transition: opacity .6s ease, transform .6s ease, filter .6s ease;
  filter: drop-shadow(0 0 12px rgba(220, 210, 255, .45));
}
.hw-fantasma svg { display: block; width: 100%; height: auto; }
.hw-fantasma.esfumado { pointer-events: none; }
.hw-fantasma.esfumado .cuerpo-f { opacity: 0; transform: scale(1.5) translateY(-20px); filter: blur(6px); }
@keyframes hw-cruzar {
  from { transform: translate3d(-120px, 0, 0); }
  to   { transform: translate3d(calc(var(--ancho, 100vw) + 120px), 0, 0); }
}
@keyframes hw-ondear {
  0%, 100% { transform: translateY(0) rotate(-4deg); }
  50%      { transform: translateY(-14px) rotate(4deg); }
}

/* ---------------------------------------------------------
   6. ENTRADA SUAVE de todo lo decorativo
   --------------------------------------------------------- */
.hw-capa, .hw-local { animation: hw-entrar 1.4s ease both; }
@keyframes hw-entrar { from { opacity: 0; } to { opacity: 1; } }

/* ---------------------------------------------------------
   7. "REDUCIR MOVIMIENTO": la web sigue de Halloween pero quieta
   --------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .hw-capa *, .hw-local *, .hw-sonido { animation: none !important; }
  .hw-hoja, .hw-chispa, .hw-murcielago, .hw-fantasma, .hw-ojos { display: none !important; }
  .hw-arana .hilo { transform: none; }
  .hw-arana .bicho { transform: translateY(calc(var(--baja) - 6px)); }
}

/* Celular: luna chica en la esquina, que no pise los textos */
@media (max-width: 720px) {
  .hw-escena .luna { width: 84px; top: 5%; right: 5%; }
}

/* Botón de música del dock */
.hw-musica.on { border-color: var(--hw-calabaza); box-shadow: 0 0 16px rgba(255, 117, 24, .45); }
.hw-musica.llama { animation: hw-llamar 2.4s ease-in-out infinite; }
.hw-musica .ic { transition: transform .3s ease; }
.hw-musica.on .ic { animation: hw-nota 1.2s ease-in-out infinite alternate; }
@keyframes hw-nota { from { transform: rotate(-12deg) translateY(0); } to { transform: rotate(12deg) translateY(-2px); } }
@media (max-width: 720px) {
  .hw-dock { gap: 6px; flex-wrap: wrap; max-width: calc(100vw - 36px); }
  .hw-musica .tx, .hw-sonido.on .tx { display: none; }
  .hw-musica { width: 42px; padding: 0; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) { .hw-musica.llama, .hw-musica.on .ic { animation: none; } }