/* ==========================================================================
   Temática HALLOWEEN · se carga después de main.css cuando está activa (panel → Temática).
   Noche morada con naranja calabaza. Solo cambia colores y suma adornos: nada se mueve de lugar.
   Las fotos de producto siguen sobre fondo claro (usan mix-blend-mode: multiply y sobre oscuro se apagan).
   ========================================================================== */

:root[data-theme="halloween"] {
  --bg: #141018;
  --bg-rgb: 20, 16, 24;
  --bg-alt: #1b1521;
  --surface: #211a29;
  --surface-2: #2c2336;
  --text: #f4eee6;
  --muted: #b3a8bd;
  --line: rgba(244, 238, 230, 0.1);
  --line-strong: rgba(244, 238, 230, 0.22);
  /* --ink queda oscuro: se usa como fondo de las bandas negras (pie, beneficios) y en etiquetas. */
  --ink: #0b090d;
  --ink-rgb: 11, 9, 13;
  /* Naranja que se lee igual sobre la noche y con letra blanca encima (≈4,3:1 en ambos casos). */
  --red: #d6500a;
  --red-deep: #a63c06;
  --red-glow: rgba(255, 122, 26, 0.35);
  --pumpkin: #ff8a2b;
  --witch: #8b5cf6;
  --gold: var(--pumpkin);
  --tile: #f5eee4;
  --ok: #3ccf7a;
  --shadow: 0 14px 30px -16px rgba(0, 0, 0, 0.8);
  color-scheme: dark;
}

/* Fondo: murciélagos y estrellas muy tenues en vez del bulldog (que sobre oscuro no se ve). */
:root[data-theme="halloween"] body {
  background:
    radial-gradient(1200px 600px at 85% -10%, rgba(139, 92, 246, 0.16), transparent 60%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320' viewBox='0 0 320 320'%3E%3Cg fill='%23f4eee6' fill-opacity='.045'%3E%3Cpath d='M60 70c6-8 14-10 20-6 2-6 6-8 8-8s6 2 8 8c6-4 14-2 20 6-8-2-14 0-18 6-3-3-6-3-10 0s-7 3-10 0c-4-6-10-8-18-6z'/%3E%3Cpath d='M210 210c5-6 11-8 16-5 1.5-5 5-6 6.5-6s5 1 6.5 6c5-3 11-1 16 5-6.5-1.5-11 0-14.5 5-2.5-2.5-5-2.5-8 0s-5.5 2.5-8 0c-3.5-5-8-6.5-14.5-5z'/%3E%3Ccircle cx='250' cy='60' r='1.6'/%3E%3Ccircle cx='30' cy='200' r='1.2'/%3E%3Ccircle cx='150' cy='150' r='1'/%3E%3Ccircle cx='290' cy='280' r='1.4'/%3E%3Ccircle cx='110' cy='290' r='1'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 320px 320px,
    var(--bg);
}

/* El logo del encabezado pasa al de fondo oscuro (el mismo del pie): lo cambia header.html con `theme.dark`. */
:root[data-theme="halloween"] .site-header.is-scrolled { box-shadow: 0 12px 24px -18px rgba(0, 0, 0, 0.9); }

/* Barra de anuncio: de calabaza a morado. */
:root[data-theme="halloween"] .announce { background: linear-gradient(90deg, #a63c06, #6d28d9 55%, #a63c06); }

/* Títulos: el acento brilla como una calabaza encendida. */
:root[data-theme="halloween"] .display em { color: var(--pumpkin); text-shadow: 0 0 28px rgba(255, 122, 26, 0.45); }

/* Botones. */
:root[data-theme="halloween"] .btn--primary:hover { --btn-bg: #e85d0c; }
:root[data-theme="halloween"] .btn--light:hover { --btn-bg: #fff; box-shadow: 0 14px 36px -12px rgba(0, 0, 0, 0.8); }

/* Hero: el disco gira en naranja, negro y morado; la tarjeta del producto pasa a la noche. */
:root[data-theme="halloween"] .hero__tile { background: var(--tile); border-color: transparent; box-shadow: 0 14px 26px -18px rgba(0, 0, 0, 0.9); }
:root[data-theme="halloween"] .hero__wall { opacity: 0.55; }
:root[data-theme="halloween"] .hero__stage[data-plate="1"] .hero__plate { --plate: #1d1625; --plate-ink: var(--pumpkin); }
:root[data-theme="halloween"] .hero__stage[data-plate="2"] .hero__plate { --plate: #5b21b6; --plate-ink: #f4eee6; }
:root[data-theme="halloween"] .hero__plate { box-shadow: 0 0 90px -20px rgba(255, 122, 26, 0.45), 0 50px 70px -40px rgba(0, 0, 0, 0.9); }
:root[data-theme="halloween"] .hero__card { background: var(--surface); box-shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.9); }

/* Bandas que en main.css fijan su propio rojo. */
:root[data-theme="halloween"] .wholesale { --red: #d6500a; }
:root[data-theme="halloween"] .offer-band { background: linear-gradient(120deg, #7c2d12, #c2410c 50%, #6d28d9); }
:root[data-theme="halloween"] .tag--points { background: var(--surface); }

/* Tarjeta de Strong Puntos: brillo de calabaza y morado. */
:root[data-theme="halloween"] .points-card {
  background: radial-gradient(circle at 100% 0, rgba(255, 122, 26, 0.55), transparent 55%), linear-gradient(135deg, #2e1f45, var(--ink) 60%);
  border: 1px solid rgba(244, 238, 230, 0.12);
}

/* Tarjetas: el producto sigue sobre su fondo claro, el resto de la tarjeta va de noche. */
:root[data-theme="halloween"] .p-card:hover { border-color: rgba(255, 138, 43, 0.5); box-shadow: 0 18px 40px -18px rgba(255, 122, 26, 0.35); }

/* Categorías: letra clara y las fotos sobre una placa clara (sin ella el multiply las hundía en la noche). */
:root[data-theme="halloween"] .cat-card { color: var(--text); }
:root[data-theme="halloween"] .cat-card:hover { border-color: rgba(255, 138, 43, 0.5); box-shadow: 0 24px 50px -24px rgba(255, 122, 26, 0.45); }
:root[data-theme="halloween"] .cat-card__media:not(.cat-card__media--photo) { background: var(--tile); border-radius: 12px; }
:root[data-theme="halloween"] .cat-card__media:not(.cat-card__media--photo) img { height: 88%; top: 6%; }
:root[data-theme="halloween"] .field__suggest { color: var(--text); }

/* Textos largos (descripción de la ficha, guías, páginas legales): en main.css van en gris oscuro fijo. */
:root[data-theme="halloween"] .prose { color: #ddd5e3; }

/* El pie y las bandas negras fijan su propio rojo: aquí también calabaza. */
:root[data-theme="halloween"] .site-footer { --red: #d6500a; --surface: #1d1725; --surface-2: #2a2133; }

/* Formularios: campos oscuros con letra clara. */
:root[data-theme="halloween"] input:not([type="checkbox"]):not([type="radio"]),
:root[data-theme="halloween"] select,
:root[data-theme="halloween"] textarea { background-color: var(--surface); color: var(--text); }
:root[data-theme="halloween"] ::placeholder { color: var(--muted); opacity: 1; }

/* ---------- Ambiente por sección de la portada (solo fondos: nada encima del contenido) ---------- */
/* Base de todas las secciones: brillo morado y calabaza hacia adentro (no en los bordes, para que no se note el corte
   entre una sección y otra) y cada fondo empieza y termina en --bg. */
:root[data-theme="halloween"] .section {
  background:
    radial-gradient(60% 31% at 12% 22%, rgba(139, 92, 246, 0.12), transparent 70%),
    radial-gradient(50% 31% at 88% 78%, rgba(255, 122, 26, 0.08), transparent 70%),
    var(--bg);
}
:root[data-theme="halloween"] .section--alt {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 220' fill='none' stroke='%23f4eee6' stroke-opacity='.07' stroke-width='1.2'%3E%3Cpath d='M0 0 220 30M0 0 200 120M0 0 130 200M0 0 30 220M50 7Q48 30 44 38Q32 46 8 50M100 14Q94 50 88 74Q66 88 16 100M150 21Q140 74 132 112Q100 132 24 150'/%3E%3C/svg%3E") 0 0 / 220px 220px no-repeat,
    radial-gradient(70% 31% at 50% 22%, rgba(109, 40, 217, 0.18), transparent 70%),
    radial-gradient(40% 31% at 88% 78%, rgba(255, 122, 26, 0.1), transparent 70%),
    linear-gradient(180deg, var(--bg), #1c1426 22%, #19121f 78%, var(--bg));
}
/* Objetivos: neblina morada con telarañas en las dos esquinas de arriba. */
:root[data-theme="halloween"] #objetivos {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 220' fill='none' stroke='%23f4eee6' stroke-opacity='.07' stroke-width='1.2'%3E%3Cpath d='M0 0 220 30M0 0 200 120M0 0 130 200M0 0 30 220M50 7Q48 30 44 38Q32 46 8 50M100 14Q94 50 88 74Q66 88 16 100M150 21Q140 74 132 112Q100 132 24 150'/%3E%3C/svg%3E") 0 0 / 260px 260px no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 220' fill='none' stroke='%23f4eee6' stroke-opacity='.07' stroke-width='1.2'%3E%3Cpath d='M0 0 220 30M0 0 200 120M0 0 130 200M0 0 30 220M50 7Q48 30 44 38Q32 46 8 50M100 14Q94 50 88 74Q66 88 16 100M150 21Q140 74 132 112Q100 132 24 150'/%3E%3C/svg%3E") 100% 0 / 260px 260px no-repeat,
    radial-gradient(80% 31% at 20% 22%, rgba(139, 92, 246, 0.22), transparent 70%),
    radial-gradient(60% 31% at 88% 78%, rgba(255, 122, 26, 0.12), transparent 70%),
    linear-gradient(180deg, var(--bg), #1c1426 22%, #19121f 78%, var(--bg));
}
:root[data-theme="halloween"] #objetivos { background-position: 0 0, 100% 0, 0 0, 0 0, 0 0; }
/* Destacados: un foco de luna cae sobre los productos y abajo queda neblina. */
:root[data-theme="halloween"] #destacados {
  background:
    radial-gradient(45% 31% at 50% 22%, rgba(255, 236, 200, 0.16), transparent 70%),
    radial-gradient(120% 30% at 50% 78%, rgba(200, 186, 230, 0.12), transparent 70%),
    linear-gradient(180deg, var(--bg), #1c1426 22%, #19121f 78%, var(--bg));
}
/* Categorías: árbol seco que asoma por la esquina de arriba a la derecha. */
:root[data-theme="halloween"] #categorias {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 320'%3E%3Cg fill='none' stroke='%2308060a' stroke-opacity='.8' stroke-linecap='round'%3E%0A%3Cpath stroke-width='20' d='M18 330C34 260 14 210 40 150'/%3E%0A%3Cpath stroke-width='11' d='M38 168C84 132 124 146 176 100'/%3E%0A%3Cpath stroke-width='6' d='M124 134C146 150 168 148 192 162M176 100C206 74 228 84 262 60M150 116C160 90 178 80 186 56'/%3E%0A%3Cpath stroke-width='9' d='M40 150C52 104 88 70 108 22'/%3E%0A%3Cpath stroke-width='5' d='M84 70C112 58 134 70 156 46M98 46C88 30 92 16 84 4M262 60C276 52 290 56 304 44M228 82C242 92 260 94 274 104'/%3E%0A%3Cpath stroke-width='7' d='M34 190C14 172 6 160 -6 160'/%3E%0A%3Cpath stroke-width='3' d='M192 162C204 172 214 170 226 182M156 46C162 34 172 30 176 18M304 44L318 40'/%3E%0A%3C/g%3E%3C/svg%3E") 100% 0 / clamp(200px, 26vw, 360px) no-repeat,
    radial-gradient(40% 31% at 88% 22%, rgba(139, 92, 246, 0.2), transparent 70%),
    radial-gradient(50% 31% at 12% 78%, rgba(255, 122, 26, 0.1), transparent 70%),
    var(--bg);
}
:root[data-theme="halloween"] #categorias { background-position: right -110px top -20px, 0 0, 0 0, 0 0; }
/* Ropa: cielo estrellado. */
:root[data-theme="halloween"] #ropa {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cg fill='%23f4eee6'%3E%3Ccircle cx='20' cy='30' r='1.2' opacity='.5'/%3E%3Ccircle cx='120' cy='18' r='.9' opacity='.4'/%3E%3Ccircle cx='200' cy='60' r='1.4' opacity='.55'/%3E%3Ccircle cx='70' cy='110' r='.8' opacity='.35'/%3E%3Ccircle cx='160' cy='140' r='1.1' opacity='.45'/%3E%3Ccircle cx='30' cy='190' r='1' opacity='.4'/%3E%3Ccircle cx='220' cy='210' r='.8' opacity='.35'/%3E%3Ccircle cx='110' cy='220' r='1.3' opacity='.5'/%3E%3Cpath d='M180 100l1.5 4 4 1.5-4 1.5-1.5 4-1.5-4-4-1.5 4-1.5z' opacity='.6'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 240px 240px,
    radial-gradient(70% 31% at 80% 22%, rgba(109, 40, 217, 0.22), transparent 70%),
    linear-gradient(180deg, var(--bg), #1c1426 22%, #19121f 78%, var(--bg));
}
/* Opiniones: el brillo de una calabaza detrás de las tarjetas. */
:root[data-theme="halloween"] #opiniones {
  background:
    radial-gradient(40% 57% at 50% 60%, rgba(255, 122, 26, 0.12), transparent 70%),
    radial-gradient(50% 31% at 12% 22%, rgba(139, 92, 246, 0.14), transparent 70%),
    var(--bg);
}
/* Preguntas: árbol retorcido abajo a la izquierda y neblina. */
:root[data-theme="halloween"] #preguntas {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 320'%3E%3Cg fill='none' stroke='%2308060a' stroke-opacity='.8' stroke-linecap='round'%3E%0A%3Cpath stroke-width='20' d='M18 330C34 260 14 210 40 150'/%3E%0A%3Cpath stroke-width='11' d='M38 168C84 132 124 146 176 100'/%3E%0A%3Cpath stroke-width='6' d='M124 134C146 150 168 148 192 162M176 100C206 74 228 84 262 60M150 116C160 90 178 80 186 56'/%3E%0A%3Cpath stroke-width='9' d='M40 150C52 104 88 70 108 22'/%3E%0A%3Cpath stroke-width='5' d='M84 70C112 58 134 70 156 46M98 46C88 30 92 16 84 4M262 60C276 52 290 56 304 44M228 82C242 92 260 94 274 104'/%3E%0A%3Cpath stroke-width='7' d='M34 190C14 172 6 160 -6 160'/%3E%0A%3Cpath stroke-width='3' d='M192 162C204 172 214 170 226 182M156 46C162 34 172 30 176 18M304 44L318 40'/%3E%0A%3C/g%3E%3C/svg%3E") 0 100% / clamp(220px, 28vw, 380px) no-repeat,
    radial-gradient(100% 31% at 30% 78%, rgba(200, 186, 230, 0.12), transparent 70%),
    radial-gradient(50% 31% at 88% 22%, rgba(139, 92, 246, 0.16), transparent 70%),
    linear-gradient(180deg, var(--bg), #1c1426 22%, #19121f 78%, var(--bg));
}
:root[data-theme="halloween"] #preguntas { background-position: left -60px bottom -40px, 0 0, 0 0, 0 0; }
/* Sucursales: el pueblo embrujado (con un gimnasio de letrero mancuerna) y luces encendidas. */
:root[data-theme="halloween"] #sucursales {
  padding-bottom: clamp(150px, 16vw, 210px);
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 150' preserveAspectRatio='xMidYMax meet'%3E%3Cg fill='%230b090d'%3E%0A%3Cpath d='M0 150V104h34V84l22-26 22 26v66zM70 150V96l40-40 40 40v54z'/%3E%0A%3Cpath d='M150 150V78h12V60h10v18h40v72z'/%3E%0A%3Cpath d='M212 150V70l26-36 26 36v80z'/%3E%0A%3Cpath d='M264 150V92h150v58z'/%3E%3Cpath d='M276 92V70h126v22z'/%3E%0A%3Cpath d='M414 150V100l34-34 34 34v50zM482 150V82h14V64h10v18h22v68z'/%3E%0A%3Cpath d='M528 150V108l28-30 28 30v42zM584 150V96h56v54z'/%3E%0A%3C/g%3E%0A%3Cg fill='%23ff9a3c'%3E%3Crect x='90' y='100' width='9' height='12' rx='1'/%3E%3Crect x='120' y='100' width='9' height='12' rx='1'/%3E%3Crect x='232' y='84' width='10' height='14' rx='5'/%3E%3Crect x='170' y='96' width='8' height='10'/%3E%3Crect x='186' y='96' width='8' height='10' opacity='.4'/%3E%3Crect x='440' y='108' width='9' height='12' opacity='.6'/%3E%3Crect x='500' y='96' width='8' height='10'/%3E%3Crect x='600' y='110' width='9' height='11'/%3E%3Crect x='46' y='108' width='8' height='10' opacity='.5'/%3E%3C/g%3E%0A%3Cg fill='%23fde68a'%3E%3Crect x='296' y='108' width='18' height='16' rx='2'/%3E%3Crect x='330' y='108' width='18' height='16' rx='2'/%3E%3Crect x='364' y='108' width='18' height='16' rx='2'/%3E%3C/g%3E%0A%3Cg fill='%23d6500a'%3E%3Crect x='311' y='77' width='56' height='4' rx='2'/%3E%3Crect x='300' y='71' width='10' height='16' rx='2'/%3E%3Crect x='368' y='71' width='10' height='16' rx='2'/%3E%3C/g%3E%0A%3Cpath fill='%230b090d' d='M552 78c-2-10 4-18 4-18s6 8 4 18z'/%3E%0A%3C/svg%3E") 50% 100% / auto clamp(110px, 14vw, 170px) repeat-x,
    radial-gradient(60% 31% at 50% 78%, rgba(255, 154, 60, 0.16), transparent 70%),
    radial-gradient(50% 31% at 88% 22%, rgba(139, 92, 246, 0.14), transparent 70%),
    var(--bg);
}
/* Strong Puntos: la banda clara pasa a un morado profundo con brillo naranja. */
:root[data-theme="halloween"] .points-band {
  background:
    radial-gradient(40% 70% at 80% 50%, rgba(255, 122, 26, 0.16), transparent 70%),
    radial-gradient(60% 31% at 12% 22%, rgba(139, 92, 246, 0.2), transparent 70%),
    linear-gradient(180deg, var(--bg), #1c1426 22%, #19121f 78%, var(--bg));
}
@media (max-width: 767px) {
  /* Celular: árboles chicos en la esquina, sin pasar por detrás de títulos ni botones. */
  :root[data-theme="halloween"] #categorias { background-position: right -60px top -30px, 0 0, 0 0, 0 0; background-size: 150px, auto, auto, auto; }
  :root[data-theme="halloween"] #preguntas { background-position: left -50px bottom -30px, 0 0, 0 0, 0 0; background-size: 170px, auto, auto, auto; }
}

/* Encabezados de sección: una calaverita antes del texto chico («Los más pedidos»…). */
:root[data-theme="halloween"] .eyebrow::before {
  content: ""; display: inline-block; width: 1.15em; height: 1.2em; margin-right: 0.55em; vertical-align: -0.22em;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 64'%3E%3Cpath fill-rule='evenodd' d='M30 2C15 2 4 13 4 27c0 9 4 15 10 19v8c0 3 2 5 5 5h22c3 0 5-2 5-5v-8c6-4 10-10 10-19C56 13 45 2 30 2zM13 28a7 7 0 1 0 14 0a7 7 0 1 0-14 0zM33 28a7 7 0 1 0 14 0a7 7 0 1 0-14 0zM30 36l-4 7h8zM23 51h2.5v8H23zM29 51h2.5v8H29zM35 51h2.5v8H35z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 64'%3E%3Cpath fill-rule='evenodd' d='M30 2C15 2 4 13 4 27c0 9 4 15 10 19v8c0 3 2 5 5 5h22c3 0 5-2 5-5v-8c6-4 10-10 10-19C56 13 45 2 30 2zM13 28a7 7 0 1 0 14 0a7 7 0 1 0-14 0zM33 28a7 7 0 1 0 14 0a7 7 0 1 0-14 0zM30 36l-4 7h8zM23 51h2.5v8H23zM29 51h2.5v8H29zM35 51h2.5v8H35z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Tarjetas de producto: telaraña en la esquina de la foto y, al pasar el mouse, baja una araña por su hilo. */
:root[data-theme="halloween"] .p-card__media::after {
  content: ""; position: absolute; top: 0; right: 0; width: 64px; height: 64px; pointer-events: none; opacity: 0.4;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60' fill='none' stroke='%231a1420' stroke-width='.9'%3E%3Cpath d='M60 0 2 6M60 0 14 34M60 0 34 54M60 0 58 60M44 2Q46 9 51 9Q53 13 59 16M28 3Q33 15 42 19Q47 28 59 31M12 5Q20 24 36 31Q42 44 58 46'/%3E%3C/svg%3E") center / contain no-repeat;
}
:root[data-theme="halloween"] .p-card__media::before {
  content: ""; position: absolute; z-index: 2; top: -100px; right: 22px; width: 22px; height: 100px; pointer-events: none;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 30'%3E%3Cg fill='none' stroke='%231a1420' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M14 12 4 4M14 15 2 14M15 18 5 26M26 12l10-8M26 15l12-1M25 18l10 8'/%3E%3C/g%3E%3Cellipse cx='20' cy='16' rx='7' ry='8' fill='%231a1420'/%3E%3Ccircle cx='20' cy='6' r='4.5' fill='%231a1420'/%3E%3Ccircle cx='18.3' cy='5.5' r='1.1' fill='%23ff8a2b'/%3E%3Ccircle cx='21.7' cy='5.5' r='1.1' fill='%23ff8a2b'/%3E%3C/svg%3E") bottom / 22px 17px no-repeat,
    linear-gradient(#1a1420, #1a1420) top / 1px calc(100% - 14px) no-repeat;
  transition: transform 0.7s cubic-bezier(0.34, 1.4, 0.64, 1);
}
:root[data-theme="halloween"] .p-card:hover .p-card__media::before { transform: translateY(100px); }

/* ---------- Adornos (partials/themes/halloween/*.html) ---------- */
/* Capa de la primera pantalla: al bajar se va con la página y no tapa productos ni el carrito. */
.hw-fx { position: absolute; top: 0; left: 0; right: 0; height: 100svh; z-index: 40; pointer-events: none; overflow: hidden; }
.hw-web { position: absolute; top: calc(var(--header-h) + 36px); width: clamp(90px, 14vw, 180px); height: clamp(90px, 14vw, 180px); color: rgba(244, 238, 230, 0.16); }
.hw-web--left { left: 0; }
.hw-web--right { right: 0; transform: scaleX(-1); }
/* Arañas colgando: el hilo es el borde del span y la araña su ícono, sube y baja a distinto ritmo. */
.hw-drop { position: absolute; top: calc(var(--header-h) + 36px); width: 26px; height: var(--len, 110px); color: #0b090d; animation: hw-dangle var(--t, 6s) ease-in-out infinite; transform-origin: 50% 0; }
.hw-drop::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 16px; border-left: 1px solid rgba(244, 238, 230, 0.35); }
.hw-drop svg { position: absolute; left: 0; bottom: 0; width: 26px; height: 20px; filter: drop-shadow(0 0 4px rgba(255, 138, 43, 0.5)); }
.hw-drop--1 { left: clamp(46px, 7vw, 96px); --len: 120px; --t: 7s; }
.hw-drop--2 { right: clamp(60px, 9vw, 120px); --len: 170px; --t: 9s; animation-delay: -3s; }
.hw-drop--3 { left: 46%; top: var(--header-h); --len: 64px; --t: 5s; animation-delay: -1s; }
@keyframes hw-dangle { 0%, 100% { height: var(--len); rotate: -3deg; } 50% { height: calc(var(--len) + 34px); rotate: 3deg; } }
/* Murciélagos que cruzan la pantalla de vez en cuando. */
.hw-bat { position: absolute; left: -60px; width: 44px; height: 22px; color: #0b090d; filter: drop-shadow(0 0 6px rgba(255, 138, 43, 0.4)); opacity: 0; animation: hw-fly 22s linear infinite; }
.hw-bat svg { width: 100%; height: 100%; fill: currentColor; animation: hw-flap 0.28s ease-in-out infinite alternate; transform-origin: 50% 60%; }
.hw-bat:nth-of-type(4) { top: 22%; animation-delay: 2s; }
.hw-bat:nth-of-type(5) { top: 38%; width: 30px; height: 15px; animation-delay: 9s; animation-duration: 26s; }
.hw-bat:nth-of-type(6) { top: 14%; width: 36px; height: 18px; animation-delay: 15s; animation-duration: 19s; }
@keyframes hw-fly {
  0% { opacity: 0; transform: translate(0, 0); }
  3% { opacity: 1; }
  25% { transform: translate(55vw, -40px); }
  40% { opacity: 1; transform: translate(105vw, 30px); }
  41%, 100% { opacity: 0; transform: translate(105vw, 30px); }
}
@keyframes hw-flap { to { transform: scaleY(0.45); } }

/* Fantasma que se asoma por la izquierda cada ~30 s y saluda (solo en computador: en celular taparía botones). */
.hw-peek { display: none; }
@media (min-width: 1024px) {
  .hw-peek { display: block; position: fixed; z-index: 45; left: 0; bottom: 18vh; width: 92px; height: 110px; pointer-events: none; transform: translateX(-110%) rotate(24deg); animation: hw-peek 30s ease-in-out 6s infinite; filter: drop-shadow(0 0 18px rgba(244, 238, 230, 0.35)); }
  .hw-peek svg { width: 100%; height: 100%; }
}
@keyframes hw-peek {
  0%, 82%, 100% { transform: translateX(-110%) rotate(24deg); }
  86%, 94% { transform: translateX(-34%) rotate(14deg); }
  90% { transform: translateX(-30%) rotate(8deg); }
}

/* Portada: luna, niebla, fantasma levantando pesas y calabazas. */
.hw-hero { position: absolute; inset: 0; pointer-events: none; }
.hw-moon {
  position: absolute; top: 5%; right: 3%; width: clamp(110px, 13vw, 190px); aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #fffaf0 0%, #f4e7cf 46%, #d9c6a6 100%);
  box-shadow: 0 0 60px 18px rgba(255, 214, 150, 0.28), 0 0 160px 40px rgba(139, 92, 246, 0.25);
  opacity: 0.92;
}
.hw-moon::before, .hw-moon::after { content: ""; position: absolute; border-radius: 50%; background: rgba(170, 146, 112, 0.35); }
.hw-moon::before { width: 22%; height: 22%; top: 28%; left: 54%; }
.hw-moon::after { width: 14%; height: 14%; top: 60%; left: 30%; box-shadow: 34px -6px 0 -2px rgba(170, 146, 112, 0.3); }
.hw-fog { position: absolute; left: 0; right: 0; bottom: 0; height: 34%; overflow: hidden; }
.hw-fog i { position: absolute; bottom: -40%; width: 70%; height: 100%; border-radius: 50%; background: radial-gradient(closest-side, rgba(200, 186, 230, 0.2), transparent); filter: blur(10px); animation: hw-fog 26s ease-in-out infinite alternate; }
.hw-fog i:last-child { left: 40%; bottom: -55%; animation-duration: 34s; animation-direction: alternate-reverse; }
@keyframes hw-fog { from { transform: translateX(-12%); } to { transform: translateX(18%); } }
.hw-lifter {
  position: absolute; top: 9%; right: 7%; width: 78px; height: 91px;
  filter: drop-shadow(0 0 16px rgba(244, 238, 230, 0.45)); animation: hw-float 4.5s ease-in-out infinite;
}
.hw-press { animation: hw-press 1.6s ease-in-out infinite; }
.hw-sweat { animation: hw-sweat 1.6s ease-in infinite; }
@keyframes hw-float { 50% { translate: 0 -12px; } }
@keyframes hw-press { 0%, 100% { transform: translateY(6px); } 45%, 60% { transform: translateY(-6px); } }
@keyframes hw-sweat { 0%, 40% { opacity: 0; transform: none; } 55% { opacity: 1; } 100% { opacity: 0; transform: translateY(14px); } }
.hw-patch { position: absolute; left: 4%; bottom: 10px; display: flex; align-items: flex-end; gap: 4px; }
.hw-patch svg { display: block; filter: drop-shadow(0 0 22px rgba(255, 138, 43, 0.55)); animation: hw-flicker 3.2s steps(1) infinite; }
.hw-patch__big { width: 74px; height: 68px; }
.hw-patch__small { width: 48px; height: 44px; animation-delay: -1.3s !important; }
.hw-patch__skull { width: 28px; height: 30px; fill: #d8cfdf; filter: none !important; animation: none !important; opacity: 0.8; }
@keyframes hw-flicker { 0%, 100% { filter: drop-shadow(0 0 22px rgba(255, 138, 43, 0.55)); } 47% { filter: drop-shadow(0 0 10px rgba(255, 138, 43, 0.3)); } 52% { filter: drop-shadow(0 0 28px rgba(255, 160, 60, 0.7)); } }
@media (min-width: 960px) {
  .hw-moon { top: 4%; right: 2%; }
  .hw-lifter { top: 6%; right: auto; left: calc(50% - 150px); width: 112px; height: 130px; }
  .hw-patch { left: max(16px, calc(50% - 600px)); bottom: 16px; }
  .hw-patch__big { width: 96px; height: 88px; }
  .hw-patch__small { width: 62px; height: 57px; }
}
/* Celular: el fantasma hace sus pesas delante de la luna, arriba a la derecha (el título va a la izquierda). */
@media (max-width: 959px) {
  .hw-moon { top: 9%; right: 3%; width: 116px; }
  .hw-lifter { top: calc(9% + 18px); right: calc(3% + 20px); filter: drop-shadow(0 2px 3px rgba(26, 20, 32, 0.55)); }
  .hw-patch { display: none; }
}

/* Pie: el cementerio de las excusas. */
:root[data-theme="halloween"] .site-footer { padding-top: 0; }
.hw-yard { position: relative; margin-bottom: 56px; padding-top: 40px; background: linear-gradient(180deg, #100d14 0%, #0b090d 100%); }
.hw-yard__row { position: relative; display: flex; align-items: flex-end; justify-content: center; gap: clamp(10px, 3vw, 38px); }
.hw-grave {
  position: relative; display: grid; align-content: start; justify-items: center; gap: 6px; text-align: center;
  width: var(--w, 128px); height: var(--h, 150px); padding: 30px 12px 0; margin-bottom: -16px;
  border-radius: 50% 50% 8px 8px / 34% 34% 8px 8px; background: linear-gradient(180deg, #8d829b, #4a4056 70%, #3a3145);
  box-shadow: inset -8px -6px 0 rgba(0, 0, 0, 0.22), inset 3px 3px 0 rgba(255, 255, 255, 0.08);
  color: #1a1420; transform: rotate(var(--r, 0deg)); transform-origin: 50% 100%;
}
.hw-grave b { font-family: var(--font-display); font-weight: 400; font-size: 1.35rem; line-height: 1; letter-spacing: 0.04em; text-transform: uppercase; color: #1a1420; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.18); }
.hw-grave small { font-size: 0.72rem; font-weight: 800; line-height: 1.2; text-transform: uppercase; letter-spacing: 0.04em; color: #241c2c; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.14); }
.hw-grave--1 { --w: 118px; --h: 140px; --r: -4deg; }
.hw-grave--2 { --w: 150px; --h: 176px; --r: 2deg; }
.hw-grave--3 { --w: 126px; --h: 158px; --r: -2deg; border-radius: 12px 12px 8px 8px; padding-top: 22px; }
.hw-grave--4 { --w: 116px; --h: 132px; --r: 5deg; }
.hw-grave--cross::before { content: ""; width: 26px; height: 30px; margin-bottom: 4px; background: linear-gradient(#1a1420, #1a1420) center / 6px 100% no-repeat, linear-gradient(#1a1420, #1a1420) 50% 30% / 100% 6px no-repeat; opacity: 0.6; }
.hw-yard__pumpkin { position: relative; z-index: 2; width: 70px; height: 64px; margin-bottom: -22px; filter: drop-shadow(0 0 20px rgba(255, 138, 43, 0.6)); animation: hw-flicker 3.6s steps(1) infinite; }
.hw-yard__skull { position: relative; z-index: 2; width: 40px; height: 43px; margin-bottom: -18px; fill: #d8cfdf; opacity: 0.85; transform: rotate(-12deg); }
/* Ojos que miran desde el pasto y parpadean. */
.hw-eyes { position: absolute; z-index: 2; bottom: -26px; display: flex; gap: 7px; }
.hw-eyes i { width: 9px; height: 6px; border-radius: 50% 50% 45% 45%; background: #ffd23f; box-shadow: 0 0 10px 2px rgba(255, 210, 63, 0.6); animation: hw-blink 5s infinite; }
.hw-eyes--1 { left: 6%; }
.hw-eyes--2 { right: 5%; bottom: -18px; }
.hw-eyes--2 i { background: #a3e635; box-shadow: 0 0 10px 2px rgba(163, 230, 53, 0.55); animation-delay: -2.4s; }
@keyframes hw-blink { 0%, 44%, 50%, 100% { transform: none; } 47% { transform: scaleY(0.1); } }
/* Loma con pasto donde se entierran las lápidas. */
.hw-yard__ground { display: block; position: relative; z-index: 1; width: 100%; height: 46px; margin-top: -14px; fill: #1c1524; }
@media (max-width: 767px) {
  .hw-grave--4, .hw-yard__skull { display: none; }
  .hw-grave--1 { --w: 96px; --h: 118px; }
  .hw-grave--2 { --w: 118px; --h: 140px; }
  .hw-grave--3 { --w: 100px; --h: 126px; }
  .hw-grave b { font-size: 1.05rem; }
  .hw-grave small { font-size: 0.62rem; }
  .hw-grave { padding-top: 22px; }
  .hw-grave--3 { padding-top: 12px; }
  .hw-grave--cross::before { width: 18px; height: 20px; margin-bottom: 0; }
  .hw-yard__pumpkin { width: 52px; height: 48px; position: absolute; left: 6px; bottom: -22px; }
  .hw-web { width: 84px; height: 84px; top: calc(var(--header-h) + 30px); }
  .hw-bat:nth-of-type(5), .hw-drop--1, .hw-drop--3 { display: none; }
  .hw-drop--2 { right: 34%; --len: 70px; }
}

/* Quien pide menos movimiento ve los adornos quietos. */
@media (prefers-reduced-motion: reduce) {
  .hw-bat, .hw-peek { display: none; }
  .hw-drop, .hw-lifter, .hw-press, .hw-sweat, .hw-fog i, .hw-patch svg, .hw-yard__pumpkin, .hw-eyes i { animation: none; }
  :root[data-theme="halloween"] .p-card__media::before { display: none; }
}