/* Ajustes del tema de Halloween para WordPress + WooCommerce real (no cambian halloween.css del diseño; se cargan después).
   Cuando se corrija algo aquí, avisar para actualizar la bóveda. */

/* 1. GeneratePress pinta el menú con fondo blanco propio; el diseño asume menú transparente sobre la barra morada (texto claro). */
body[data-tema="halloween"] .site-header .main-navigation,
body[data-tema="halloween"] .site-header .main-navigation ul { background: transparent; }

/* 2. Franja de cielo (luna y murciélagos) y espacio bajo la barra: el diseño usa <main class="contenedor">; en WordPress el elemento es <main class="site-main">. Mismas reglas con el selector real. */
body[data-tema="halloween"] main.site-main { position: relative; padding-top: 150px; }
body[data-tema="halloween"] main.site-main::before { content: ""; position: absolute; z-index: -1; right: 2%; top: -62px; width: 300px; height: 300px; pointer-events: none;
  background: var(--hal-luna) center / contain no-repeat; }
body[data-tema="halloween"] main.site-main::after { content: ""; position: absolute; z-index: 3; left: 1%; top: 6px; width: 500px; height: 163px; pointer-events: none;
  background: var(--hal-murcielagos) 0 0 / 100% 100% no-repeat; animation: hal-vuelo 11s ease-in-out infinite alternate; }
@media (max-width: 880px) {
  body[data-tema="halloween"] main.site-main { padding-top: 104px; }
  body[data-tema="halloween"] main.site-main::before { width: 190px; height: 190px; right: 0; }
  body[data-tema="halloween"] main.site-main::after { width: 300px; height: 98px; }
}

/* 3. Títulos de página que en WordPress/WooCommerce no llevan la clase .titulo-pagina del diseño: quedan sobre el fondo oscuro (carrito, pago, cuenta, pedido recibido y archivos de producto). */
body[data-tema="halloween"] :is(.woocommerce .woocommerce-products-header__title, .woocommerce h1.page-title, .woocommerce-cart .entry-title, .woocommerce-checkout .entry-title, .woocommerce-account .entry-title) {
  color: var(--texto-fondo); text-shadow: 0 2px 8px rgba(0,0,0,.65); }

/* 4. Pago: el formulario de datos (columna izquierda) está sobre el fondo oscuro, no sobre una hoja; títulos y etiquetas pasan a texto claro. */
body[data-tema="halloween"] .woocommerce-checkout #customer_details :is(h3, label, label .optional, .form-row > strong, .woocommerce-form__label-text) {
  color: var(--texto-fondo); text-shadow: 0 1px 4px rgba(0,0,0,.6); }
body[data-tema="halloween"] .woocommerce-checkout #customer_details select.country_to_state--single { color: var(--texto-fondo); }
body[data-tema="halloween"] .woocommerce-checkout #customer_details input[type="checkbox"] { accent-color: #ff8a1f; outline: 2px solid var(--texto-fondo); outline-offset: 1px; }

/* 5. Celular: el botón del menú (hamburguesa) no tiene fondo propio y su icono oscuro se perdía sobre la barra morada; mismo fondo lavanda de los otros botones de la barra. */
body[data-tema="halloween"] .site-header .menu-toggle { background: var(--panel); }

/* 6. Murciélagos y arañas: contorno de luz blanco suave para que se distingan del fondo oscuro (pedido del responsable, 2026-10-01). */
body[data-tema="halloween"]::after,
body[data-tema="halloween"] main.site-main::after,
body[data-tema="halloween"] .categorias li:nth-child(2)::after,
body[data-tema="halloween"] .categorias li:nth-child(4)::after {
  filter: drop-shadow(0 0 1.5px rgba(255,255,255,.95)) drop-shadow(0 0 5px rgba(255,255,255,.5)); }

/* 7. Fantasmas del pie: flotan. En el diseño van dibujados dentro de la escena del cementerio (una sola imagen); se sacaron de la escena (generar-imagenes-halloween.py) y son dos elementos aparte (inc/temporadas.php) colocados donde estaban: la escena mide 1500 x 250 px, centrada, con su borde superior a -211 px del pie, y ×1,25 respecto al SVG original. Se apagan solos con "reducir movimiento" (regla general de halloween.css). */
body[data-tema="halloween"] .hal-fantasma { position: absolute; z-index: -1; width: 75px; height: 102.5px; pointer-events: none;
  background: var(--hal-fantasma-1) 0 0 / 100% 100% no-repeat; animation: hal-flota 6s ease-in-out infinite alternate; }
body[data-tema="halloween"] .hal-fantasma--1 { left: calc(50% - 76.5px); top: -118.5px; }
body[data-tema="halloween"] .hal-fantasma--2 { left: calc(50% + 176px); top: -87.75px; background-image: var(--hal-fantasma-2); animation-duration: 7.5s; animation-delay: -2.5s; }
@keyframes hal-flota { 0% { transform: translate(0, 0) rotate(-2deg); } 50% { transform: translate(9px, -15px) rotate(2deg); } 100% { transform: translate(-7px, -6px) rotate(-1deg); } }

/* 8. Contenido más cerca de la barra superior (pedido del responsable, 2026-10-01): el espacio de 150 px / 104 px que el diseño deja para la franja de cielo se quita; luna, murciélagos y araña pasan DETRÁS del contenido (z-index negativo), así que el contenido los tapa en vez de que ellos tapen el texto. */
body[data-tema="halloween"] main.site-main { padding-top: 0; }
@media (max-width: 880px) { body[data-tema="halloween"] main.site-main { padding-top: 0; } }
body[data-tema="halloween"] main.site-main::after,
body[data-tema="halloween"]::after { z-index: -1; }
/* La luna queda detrás del texto (migas de pan, títulos): más tenue para que no reste legibilidad; en celular, donde choca con las migas, más aún. */
body[data-tema="halloween"] main.site-main::before { opacity: .55; }
@media (max-width: 880px) {
  body[data-tema="halloween"] main.site-main::before { opacity: .32; }
  body[data-tema="halloween"] main.site-main::after { opacity: .7; }
}

/* 9. La portada (tienda = inicio) vuelve a como estaba: espacio de cielo, murciélagos y araña por delante y luna completa (pedido del responsable: el ajuste de cercanía era solo para las páginas internas, como las publicaciones). */
body.home[data-tema="halloween"] main.site-main { padding-top: 150px; }
body.home[data-tema="halloween"] main.site-main::before { opacity: 1; }
body.home[data-tema="halloween"] main.site-main::after,
body.home[data-tema="halloween"]::after { z-index: 3; }
@media (max-width: 880px) {
  body.home[data-tema="halloween"] main.site-main { padding-top: 104px; }
  body.home[data-tema="halloween"] main.site-main::before { opacity: 1; }
  body.home[data-tema="halloween"] main.site-main::after { opacity: 1; }
}