.elementor-kit-5{--e-global-color-primary:#EEAD2B;--e-global-color-secondary:#221C10;--e-global-color-text:#F8F7F6;--e-global-color-accent:#FFFFFF;--e-global-color-b5aeb33:#F7F5F2;--e-global-color-c58817e:#23222A;--e-global-color-5420d44:#6C5A4C;--e-global-color-58be983:#ffffff;--e-global-color-09cc561:#0d141a;--e-global-color-a495fd4:#B8C0CC;--e-global-color-dff8941:#F7F5F2;--e-global-typography-primary-font-family:"Roboto";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Roboto Slab";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Roboto";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Roboto";--e-global-typography-accent-font-weight:500;background-color:var( --e-global-color-secondary );}.elementor-kit-5 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS *//* 1. Fondo Gradiente Radial (Base oscura) */
.elementor-kit-5 {
    background: radial-gradient(circle at center, #483c23 0%, #221c10 60%, #15110a 100%);
    position: relative;
    overflow: hidden;
    /* Importante para que las luces no se salgan de la pantalla */
    overflow: clip;
    /* Estándar moderno más estricto */
    contain: paint;
    /* Pide al navegador que no pinte nada fuera de los límites */
    transform: translate3d(0, 0, 0);
    /* Fuerza aceleración por hardware y corrige bugs de renderizado en Safari/Chrome móvil */
    z-index: 0;
    /* Asegura que el contenido quede encima */
}

/* 2. Orbe de Luz 1 (Arriba Izquierda) */
.elementor-kit-5::before {
    content: '';
    position: absolute;
    top: -10%;
    left: -10%;
    width: 50vw;
    /* Tamaño relativo al ancho de pantalla */
    height: 50vw;
    background: rgba(238, 173, 43, 0.08);
    /* Color Primario muy sutil */
    border-radius: 50%;
    filter: blur(120px);
    /* El desenfoque que crea el "glow" */
    animation: pulsar-luz 8s ease-in-out infinite alternate;
    pointer-events: none;
    z-index: -1;
}

/* 3. Orbe de Luz 2 (Abajo Derecha) */
.elementor-kit-5::after {
    content: '';
    position: absolute;
    bottom: -10%;
    right: -10%;
    width: 40vw;
    height: 40vw;
    background: rgba(238, 173, 43, 0.12);
    border-radius: 50%;
    filter: blur(100px);
    animation: pulsar-luz 10s ease-in-out infinite alternate-reverse;
    pointer-events: none;
    z-index: -1;
}

/* 4. Animación de "Pulsar" */
@keyframes pulsar-luz {
    0% {
        opacity: 0.4;
        transform: scale(1);
    }

    100% {
        opacity: 0.8;
        transform: scale(1.1);
    }
}

/* 5. Ajustes para Móvil (Optimización y Prevención de Desbordamiento) */
@media (max-width: 768px) {
    .elementor-kit-5::before {
        width: 70vw;
        /* Ligeramente más grande relativo al ancho móvil, pero controlado */
        height: 70vw;
        filter: blur(60px);
        /* Reducir desenfoque para evitar 'sangrado' excesivo fuera de la caja */
        top: -15%;
        left: -15%;
    }

    .elementor-kit-5::after {
        width: 60vw;
        height: 60vw;
        filter: blur(50px);
        bottom: -15%;
        right: -15%;
    }
}

/**
 * FORCE Global WooCommerce Notices Styling (The "Nuclear" Option)
 * Specially designed to override stubborn themes and Elementor defaults.
 * 
 * INSTRUCTIONS:
 * 1. Go to Appearance > Customize > Additional CSS.
 * 2. DELETE any previous code for notices.
 * 3. PASTE this code.
 * 4. IMPORTANT: Go to Elementor > Tools > Regenerate CSS & Data -> Click "Regenerate Files".
 */
/* 1. Force Wrapper Reset */
html body .woocommerce-notices-wrapper {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 0 20px 0 !important;
    box-shadow: none !important;
    display: block !important;
    /* Ensure it's not hidden */
    width: 100% !important;
    max-width: 100% !important;
}
/* 2. Message Styling - High Specificity Selectors */
html body .woocommerce-message,
html body .woocommerce-info,
html body .woocommerce-error,
html body .woocommerce-notices-wrapper .woocommerce-message {
    background: rgba(255, 255, 255, 0.05) !important;
    /* Slightly more visible background */
    backdrop-filter: blur(15px) !important;
    /* Stronger blur */
    -webkit-backdrop-filter: blur(15px) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-top: 3px solid #eead2b !important;
    /* Thicker Gold Top Border */
    border-radius: 8px !important;
    padding: 15px 25px !important;
    margin-bottom: 20px !important;
    display: flex !important;
    flex-direction: row;
    /* Default row */
    align-items: center !important;
    justify-content: space-between !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    /* Stronger shadow */
    width: 100% !important;
    box-sizing: border-box !important;
    font-family: 'Manrope', sans-serif !important;
    font-size: 15px !important;
    line-height: 1.6 !important;
    position: relative !important;
    z-index: 999 !important;
    /* Force on top */
}
/* 3. Gold Icons */
html body .woocommerce-message::before,
html body .woocommerce-info::before,
html body .woocommerce-error::before {
    color: #eead2b !important;
    margin-right: 20px !important;
    font-family: "WooCommerce" !important;
    /* Ensure generic icon font */
    font-size: 1.4em !important;
    position: static !important;
    display: inline-block !important;
}
/* 4. Error Red Overrides */
html body .woocommerce-error {
    border-top-color: #ef4444 !important;
}
html body .woocommerce-error::before {
    color: #ef4444 !important;
}
/* 5. Buttons ("View Cart") */
html body .woocommerce-message .button,
html body .woocommerce-info .button,
html body .woocommerce-error .button,
html body .woocommerce-message a.button {
    float: right !important;
    /* Force float right to break theme flex issues if needed */
    margin-left: auto !important;
    background: transparent !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    color: #ffffff !important;
    padding: 8px 20px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    border-radius: 6px !important;
    transition: all 0.3s ease !important;
    line-height: normal !important;
    text-decoration: none !important;
    display: inline-block !important;
}
html body .woocommerce-message .button:hover,
html body .woocommerce-message a.button:hover {
    border-color: #eead2b !important;
    color: #eead2b !important;
    background: rgba(238, 173, 43, 0.15) !important;
    box-shadow: 0 0 15px rgba(238, 173, 43, 0.3) !important;
    transform: translateY(-2px);
}
/* Mobile Fixes */
@media (max-width: 768px) {
    html body .woocommerce-message,
    html body .woocommerce-info,
    html body .woocommerce-error {
        flex-direction: column !important;
        align-items: flex-start !important;
        text-align: left !important;
        padding: 20px !important;
    }
    html body .woocommerce-message .button,
    html body .woocommerce-message a.button {
        width: 100% !important;
        margin: 15px 0 0 0 !important;
        text-align: center !important;
        float: none !important;
        display: block !important;
    }
    html body .woocommerce-message::before {
        margin-bottom: 10px !important;
    }
}/* End custom CSS */