.elementor-259 .elementor-element.elementor-element-e4cf69f:not(.elementor-motion-effects-element-type-background), .elementor-259 .elementor-element.elementor-element-e4cf69f > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://deviwatermexico.org/wp-content/uploads/2026/05/title-bg.jpg");background-position:center center;background-repeat:no-repeat;background-size:cover;}.elementor-259 .elementor-element.elementor-element-e4cf69f{transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;padding:30px 10px 30px 10px;}.elementor-259 .elementor-element.elementor-element-e4cf69f > .elementor-background-overlay{transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}.elementor-259 .elementor-element.elementor-element-6fbdca2{text-align:center;}.elementor-259 .elementor-element.elementor-element-c47df2f{--divider-border-style:solid;--divider-color:#B2DEF3;--divider-border-width:2px;}.elementor-259 .elementor-element.elementor-element-c47df2f .elementor-divider-separator{width:110px;margin:0 auto;margin-center:0;}.elementor-259 .elementor-element.elementor-element-c47df2f .elementor-divider{text-align:center;padding-block-start:6px;padding-block-end:6px;}.elementor-259 .elementor-element.elementor-element-44a22696{--display:flex;--padding-top:50px;--padding-bottom:50px;--padding-left:0px;--padding-right:0px;}:root{--page-title-display:none;}/* Start custom CSS for text-editor, class: .elementor-element-25ccfeb0 *//* ========================================================
   ESTILOS PREMIUM - MI CUENTA WOOCOMMERCE (DEVI WATER)
======================================================== */

/* Contenedor principal: Diseño a dos columnas con mucho aire */
.woocommerce {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    align-items: flex-start;
    margin-top: 20px;
}

/* 1. ESTILOS DEL MENÚ LATERAL (Navegación) */
.woocommerce-MyAccount-navigation {
    flex: 1 1 250px;
    max-width: 300px;
    background-color: #FBFBFB; /* Fondo blanco roto */
    border-radius: 8px;
    overflow: hidden;
    /* Sombra súper sutil y elegante */
    box-shadow: 0 10px 30px rgba(13, 43, 90, 0.05); 
}

.woocommerce-MyAccount-navigation ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Ocultar los <br> que trae WooCommerce por defecto */
.woocommerce-MyAccount-navigation ul li a br {
    display: none;
}

.woocommerce-MyAccount-navigation ul li {
    border-bottom: 1px solid #EEF6F6; /* Línea separadora turquesa muy clara */
}

.woocommerce-MyAccount-navigation ul li:last-child {
    border-bottom: none;
}

.woocommerce-MyAccount-navigation ul li a {
    display: block;
    padding: 18px 25px;
    color: #263238; /* Texto gris-azulado oscuro */
    text-decoration: none;
    font-weight: 500;
    transition: all 0.3s ease;
}

/* Efecto al pasar el ratón (Hover) */
.woocommerce-MyAccount-navigation ul li a:hover {
    color: #CFA968; /* Luz dorada sutil */
    background-color: #FFFFFF;
    padding-left: 30px; /* Efecto de movimiento elegante */
}

/* Pestaña Activa */
.woocommerce-MyAccount-navigation ul li.is-active a {
    background-color: #0D2B5A; /* Azul Cobalto Profundo */
    color: #FFFFFF;
    border-left: 4px solid #CFA968; /* Acento Dorado */
}

/* 2. ESTILOS DEL ÁREA DE CONTENIDO (Derecha) */
.woocommerce-MyAccount-content {
    flex: 3 1 400px;
    background-color: #FFFFFF;
    padding: 40px;
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(13, 43, 90, 0.05);
    color: #263238;
    line-height: 1.8;
}

/* Enlaces dentro del texto de bienvenida */
.woocommerce-MyAccount-content a {
    color: #0D2B5A; /* Azul Cobalto */
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px solid #7CD1C4; /* Subrayado Turquesa Suave */
    transition: all 0.3s ease;
}

.woocommerce-MyAccount-content a:hover {
    color: #CFA968; /* Cambia a dorado al pasar el ratón */
    border-bottom-color: #CFA968;
}

/* 3. RESPONSIVE (Móviles) */
@media (max-width: 768px) {
    .woocommerce {
        flex-direction: column;
        gap: 20px;
    }
    .woocommerce-MyAccount-navigation {
        max-width: 100%;
        width: 100%;
    }
    .woocommerce-MyAccount-content {
        padding: 25px;
        width: 100%;
    }
}/* End custom CSS */