/* Transición general para fondo y texto */
body {
    transition: background-color 0.5s ease-in-out, color 0.5s ease-in-out;
    position: relative; /* Para limitar elementos dentro del body */
    overflow: auto; /* Evitar que elementos desborden fuera */
    background-color: #000000; /* Fondo completamente negro */
    color: #ffffff; /* Texto blanco */
}

/* Transición para header y footer */
header, footer {
    transition: background-color 0.5s ease-in-out, color 0.5s ease-in-out;
    background-color: #000000; /* Fondo completamente negro */
    color: #ffffff; /* Texto blanco */
}

/* Estilo inicial para otras páginas (opcional, si aplica) */
body:not(.black-friday),
header:not(.black-friday),
footer:not(.black-friday) {
    background-color: #ffffff; /* Fondo original */
    color: #000000; /* Texto original */
}

/* Estilo específico para la página Black Friday */
body.black-friday {
    background-color: #000000; /* Fondo completamente negro */
    color: #ffffff; /* Texto blanco */
}

header.black-friday,
footer.black-friday {
    background-color: #000000; /* Fondo completamente negro */
    color: #ffffff; /* Texto blanco */
}

/* Ajustar z-index para cabecera y footer */
header, footer {
    z-index: 10;
}

.sub-menu{
	color: #ffffff;
}

/* Ocultar texto sobre la cabecera */
.texto-sobre-cabecera {
    display: none;
}

/* Estilo para el contenedor principal */
.entry-content, .content-area, .site-content, .hentry {
    background-color: #000000 !important; /* Fondo negro */
    color: #ffffff !important; /* Texto blanco */
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
}

/* Estilo para widgets o áreas de barra lateral */
.widget-area, .widget {
    background-color: #000000 !important;
    color: #ffffff !important;
}

/* Estilo para el contenedor del cuerpo */
body .wrap {
    background-color: #000000 !important;
    color: #ffffff !important;
}

/* Ajuste para cualquier fondo residual */
html, body {
    background-color: #000000 !important;
}

/* Estilo para el breadcrumb */
.storefront-breadcrumb {
	display: none;
    background-color: #000000 !important;
    margin-bottom: 0 !important;
}
header#masthead {
    border: none !important;
    box-shadow: none !important; /* Por si hay sombras simulando un borde */
}
#smoke-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none; /* No interfiere con los clics ni interacción */
    z-index: 9999; /* Asegura que el humo esté sobre el contenido */
}

#smokeCanvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 9999; /* Está sobre todo */
}

#smoke-container, #smokeCanvas {
    pointer-events: none;  /* Evita que el canvas interfiera con el scroll */
}