/* ----------------------------------------------------------------
	Custom CSS

	Add all your Custom Styled CSS here for New Styles or
	Overwriting Default Theme Styles for Better Handling Updates
-----------------------------------------------------------------*/

/* Crea un overlay directamente sobre la capa de vídeo */
.rev_slider .rs-background-video-layer::after {
    content: "";
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background-color: rgba(0,0,0,0.5); /* ajusta la opacidad */
    z-index: 2;
}

/* Asegura que los captions queden por encima del overlay */
.rev_slider .tp-caption {
    z-index: 3 !important;
}


/* Baja un poco el overlay para que no cubra el header */
.rev_slider .rs-background-video-layer::after {
    z-index: 1;
}

/* Eleva el header para que quede encima del overlay */
#header {
    position: relative;
    z-index: 2;
}

/* Asegura que los enlaces del menú siempre sean blancos */
#header nav.primary-menu .menu-link,
#header .primary-menu-trigger button {
    color: #fff !important;
}




/* Cuando el header recibe la clase not-dark (scroll) */
#header.not-dark {
    background-color: #fff !important;
    color: #333 !important;
}

/* Links oscuros al hacer scroll */
#header.not-dark nav.primary-menu .menu-link,
#header.not-dark .primary-menu-trigger button,
#header.not-dark .header-misc-icon a {
    color: #333 !important;
}

/* Asegura que los iconos (lupa, carrito) también cambien */
#header.not-dark .header-misc-icon i,
#header.not-dark .top-cart-number {
    color: #333 !important;
}

#header .not-dark nav.primary-menu .menu-link {
    color: #333 !important;
}

.sub-menu-container .menu-item > .menu-link div {
    color: #000000 !important;
}


@media (max-width: 767px) {
    /* Caps Text (el pequeño encima del título) */
    .revo-slider-caps-text {
        font-size: 12px !important;
        top: 15% !important;    /* sube un poco */
    }

    /* Emphasis Text (el headline gordo) */
    .revo-slider-emphasis-text {
        font-size: 32px !important;
        top: 20% !important;
        padding: 8px 12px !important;
    }

    /* Desc Text (párrafo descriptivo) */
    .revo-slider-desc-text {
        font-size: 14px !important;
        width: 90% !important;  /* ancho más adaptable */
        top: 35% !important;
        line-height: 1.4 !important;
    }

    /* Botón */
    .tp-caption a.button {
        top: 48% !important;
        font-size: 14px !important;
        padding: 8px 14px !important;
    }
}