.elementor-177 .elementor-element.elementor-element-13fbe97{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--overlay-opacity:0.5;--padding-top:155px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-177 .elementor-element.elementor-element-13fbe97:not(.elementor-motion-effects-element-type-background), .elementor-177 .elementor-element.elementor-element-13fbe97 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-638d055 );background-image:url("https://kind-dirac.212-227-255-79.plesk.page/wp-content/uploads/2026/05/productos-al-mayor-para-tu-peluqueria.webp");background-position:center center;background-repeat:no-repeat;background-size:cover;}.elementor-177 .elementor-element.elementor-element-13fbe97::before, .elementor-177 .elementor-element.elementor-element-13fbe97 > .elementor-background-video-container::before, .elementor-177 .elementor-element.elementor-element-13fbe97 > .e-con-inner > .elementor-background-video-container::before, .elementor-177 .elementor-element.elementor-element-13fbe97 > .elementor-background-slideshow::before, .elementor-177 .elementor-element.elementor-element-13fbe97 > .e-con-inner > .elementor-background-slideshow::before, .elementor-177 .elementor-element.elementor-element-13fbe97 > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{background-color:var( --e-global-color-638d055 );--background-overlay:'';}.elementor-177 .elementor-element.elementor-element-5af1e64{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--align-items:flex-start;--padding-top:7em;--padding-bottom:7em;--padding-left:0em;--padding-right:0em;}.elementor-177 .elementor-element.elementor-element-53c60c5{text-align:center;}.elementor-177 .elementor-element.elementor-element-53c60c5 .elementor-heading-title{font-family:var( --e-global-typography-a435f28-font-family ), Sans-serif;font-size:var( --e-global-typography-a435f28-font-size );font-weight:var( --e-global-typography-a435f28-font-weight );line-height:var( --e-global-typography-a435f28-line-height );letter-spacing:var( --e-global-typography-a435f28-letter-spacing );color:var( --e-global-color-text );}.elementor-177 .elementor-element.elementor-element-575c1ab{text-align:start;}.elementor-177 .elementor-element.elementor-element-575c1ab .elementor-heading-title{color:var( --e-global-color-text );}.elementor-177 .elementor-element.elementor-element-6fcf4f8c{--display:flex;--padding-top:100px;--padding-bottom:100px;--padding-left:0px;--padding-right:0px;}:root{--page-title-display:none;}@media(max-width:1024px){.elementor-177 .elementor-element.elementor-element-13fbe97{--padding-top:130px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-177 .elementor-element.elementor-element-5af1e64{--justify-content:center;--padding-top:4em;--padding-bottom:4em;--padding-left:1em;--padding-right:1em;}.elementor-177 .elementor-element.elementor-element-53c60c5 .elementor-heading-title{font-size:var( --e-global-typography-a435f28-font-size );line-height:var( --e-global-typography-a435f28-line-height );letter-spacing:var( --e-global-typography-a435f28-letter-spacing );}}@media(max-width:767px){.elementor-177 .elementor-element.elementor-element-13fbe97{--padding-top:110px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-177 .elementor-element.elementor-element-5af1e64{--padding-top:2em;--padding-bottom:2em;--padding-left:1em;--padding-right:1em;}.elementor-177 .elementor-element.elementor-element-53c60c5 .elementor-heading-title{font-size:var( --e-global-typography-a435f28-font-size );line-height:var( --e-global-typography-a435f28-line-height );letter-spacing:var( --e-global-typography-a435f28-letter-spacing );}}@media(min-width:768px){.elementor-177 .elementor-element.elementor-element-5af1e64{--width:40%;}}@media(max-width:1024px) and (min-width:768px){.elementor-177 .elementor-element.elementor-element-5af1e64{--width:60%;}}/* Start custom CSS for container, class: .elementor-element-6fcf4f8c *//* ========================================================
   WOOCOMMERCE - MI CUENTA & LOGIN (B2B STYLE - NO RADIUS)
======================================================== */

/* 1. ESTRUCTURA DEL FORMULARIO DE ACCESO (LOGIN) */
.woocommerce form.login, 
.woocommerce form.register {
    border: 1px solid #E2E8F0;
    padding: 2.5rem;
    background: #FFFFFF;
    border-radius: 0 !important; /* Bordes cuadrados estrictos */
    max-width: 500px;
    margin: 0 auto;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05); /* Sombra muy sutil */
}

/* Título de Acceder */
.woocommerce h2 {
    color: #0A192F;
    text-align: center;
    margin-bottom: 1.5rem;
    font-weight: 700;
}

/* 2. CAMPOS DE TEXTO (INPUTS) */
.woocommerce form .form-row label {
    color: #0A192F;
    font-weight: 600;
    margin-bottom: 0.5rem;
    display: block;
}

.woocommerce form .form-row input.input-text {
    width: 100%;
    padding: 0.85rem 1rem;
    border: 1px solid #E2E8F0;
    border-radius: 0 !important; /* Bordes cuadrados */
    background-color: #F8FAFC;
    color: #475569;
    transition: all 0.3s ease;
}

.woocommerce form .form-row input.input-text:focus {
    border-color: #2563EB;
    background-color: #FFFFFF;
    outline: none;
    box-shadow: none;
}

/* 3. BOTONES DE WOOCOMMERCE */
.woocommerce button.button {
    background-color: #1A365D !important;
    color: #FFFFFF !important;
    border: none;
    padding: 1rem 2rem;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 1px;
    border-radius: 0 !important; /* Sin bordes redondeados */
    width: 100%;
    margin-top: 1rem;
    cursor: pointer;
    transition: background 0.3s ease !important;
}

.woocommerce button.button:hover {
    background-color: #2563EB !important;
}

/* Checkbox "Recuérdame" */
.woocommerce-form__label-for-checkbox {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 1rem;
    cursor: pointer;
}

/* Enlace de Olvidé mi contraseña */
.woocommerce-LostPassword a {
    color: #2563EB;
    text-decoration: none;
    font-weight: 600;
    display: block;
    text-align: center;
    margin-top: 1rem;
}
.woocommerce-LostPassword a:hover {
    text-decoration: underline;
}

/* ========================================================
   DISEÑO INTERNO (CUANDO EL USUARIO YA INICIÓ SESIÓN)
======================================================== */

@media (min-width: 768px) {
    .woocommerce-account .woocommerce {
        display: flex;
        gap: 30px;
        align-items: flex-start;
    }
    
    .woocommerce-MyAccount-navigation {
        flex: 0 0 25%; /* El menú ocupa 25% */
    }
    
    .woocommerce-MyAccount-content {
        flex: 1; /* El contenido ocupa el resto */
    }
}

/* Menú de navegación lateral */
.woocommerce-MyAccount-navigation ul {
    list-style: none;
    padding: 0;
    margin: 0;
    border: 1px solid #E2E8F0;
    background: #FFFFFF;
    border-radius: 0 !important;
}

.woocommerce-MyAccount-navigation ul li {
    border-bottom: 1px solid #E2E8F0;
}

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

.woocommerce-MyAccount-navigation ul li a {
    display: block;
    padding: 1rem 1.2rem;
    color: #475569;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
}

/* Estado activo y hover del menú */
.woocommerce-MyAccount-navigation ul li a:hover,
.woocommerce-MyAccount-navigation ul li.is-active a {
    background-color: #F8FAFC;
    color: #1A365D;
    border-left: 4px solid #1A365D; /* Línea azul fuerte a la izquierda */
}

/* Caja de contenido principal */
.woocommerce-MyAccount-content {
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    padding: 2rem;
    border-radius: 0 !important;
}

.woocommerce-MyAccount-content p {
    color: #475569;
    line-height: 1.6;
}

.woocommerce-MyAccount-content a {
    color: #2563EB;
    font-weight: 600;
    text-decoration: none;
}

.woocommerce-MyAccount-content a:hover {
    text-decoration: underline;
}/* End custom CSS */