footer {
    background: #000;
}

footer p, footer span {
    color: #FFF !important;
}

footer > div {
    padding: 0 !important;
}

div.footer-grid > div.e-con-inner > div {
    padding: 0 !important;
}



/* ============================================
   FOOTER GRID - KICKS HYPE
   Reset de estilos de Elementor + Grid areas
   ============================================ */

/* Resetear el contenedor principal */
div.footer-grid.e-con {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto !important;
    grid-auto-flow: row !important;
    grid-template-areas:
        "logo"
        "social"
        "news"
        "links"
        "atencion"
        "pagos"
        "bottom" !important;
}

/* Resetear el inner container de Elementor */
div.footer-grid.e-con > div.e-con-inner {
    display: contents !important;
}

/* Asignar áreas a cada hijo */
div.footer-grid div.footer-logo {
    grid-area: logo !important;
    position: relative !important;
}

div.footer-grid div.footer-newsletter {
    grid-area: news !important;
    position: relative !important;
}

div.footer-grid div.footer-social {
    grid-area: social !important;
    position: relative !important;
}

div.footer-grid div.footer-links {
    grid-area: links !important;
    position: relative !important;
}

div.footer-grid div.footer-atencion {
    grid-area: atencion !important;
    position: relative !important;
}

div.footer-grid div.footer-pagos {
    grid-area: pagos !important;
    position: relative !important;
}









    /* ====== FOOTER GRID ====== */

div.footer-grid > div.e-con-inner div {
    gap: 0;
}



    /* ====== FOOTER lOGO ====== */

div.footer-logo {
    flex-direction: row !important;
    align-content: start !important;
    flex-wrap: wrap;
    align-items: center;
}

div.footer-logo__logo {
    text-align: start;
    width: 100%;
}

div.footer-logo__icon-location {
    line-height: 0;
    height: fit-content;  /* Soluciona el problema del contenedor mas grande que la imagen */
}

div.footer-logo__location {
    flex-grow: 1;
}

div.footer-logo__social-media {
    width: 100%;
}

div.footer-logo__social-media > div.elementor-social-icons-wrapper {
    display: flex;
    justify-content: end;
    gap: 1rem !important; /*****************      Convertirlo en general, para los iconos en desktop y mobile     *********************************/
}



    /* ===== NEWSLETTER ===== */

div.footer-newsletter span, div.footer-newsletter p {
    font-family: "Montserrat" !important;
}

div.footer-newsletter__title {
    margin-bottom: .8rem !important;
    line-height: 1.3rem;
}

div.footer-newsletter__title span {
    font-weight: 900 !important;
    margin-bottom: 1rem;
}

div.footer-newsletter__text {
    margin-bottom: 1.6rem !important;
}

div.footer-newsletter__text p {
    color: #808080 !important;
    font-weight: 400 !important;
    line-height: 1.15rem;
}



    /* ====== FORMULARIO NEWSLETTER ====== */

#sib_signup_form_2 div.sib_signup_box_inside_2 {
    display: flex;
}

#sib_signup_form_2 p.sib-email-area {
    flex: 1;
}

#sib_signup_form_2 input.sib-email-area {
    padding: 1rem 1rem;
    font-size: .8rem;
    font-family: 'Montserrat';
    background-color: #FFF;
    border: 1px solid #FFF;
    border-radius: 1rem 0 0 1rem;
    outline: none;
    color: #000;
}

#sib_signup_form_2 input.sib-email-area::placeholder {
    color: #999;
}

#sib_signup_form_2 .sib-default-btn {
    font-family: 'Montserrat';
    padding: 1rem 1rem;
    font-size: .8rem;
    border: 1px solid #FFF;
    color: #FFF;
    border-radius: 0 1rem 1rem 0;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

#sib_signup_form_2 .sib-default-btn:hover {
    background-color: #e0e0e0;
    color: #999;
}



    /* ====== ICONS SOCIAL MEDIA ====== */

div.footer-social__social-media span {
    font-family: "Montserrat" !important;
}

div.footer__icons-social-media a.elementor-social-icon {
    background: transparent;
    width: auto;
    height: auto;
}


















div.footer-grid, div.footer-bottom {
    width: 90%;
    max-width: 26rem;
}










    /* ====== ACCORDION MENU ====== */

div.footer-links div.lam-accordion {
    font-family: "Montserrat";
    width: 100%;
}

div.footer-links div.lam-accordion-item {
    border-bottom: 1px solid #333;
}

div.footer-links div.lam-accordion-item:first-child {
    border-top: 1px solid #333;
}

div.footer-links div.lam-accordion-header {
    display: flex;
    cursor: pointer;
    padding: 1rem 0;
    transition: all 0.3s ease;
    user-select: none;
}

div.footer-links span.lam-accordion-title {
    font-weight: 500;
    margin: 0;
    flex-grow: 1;
}

div.footer-links div.lam-accordion-content {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.4s ease, opacity 0.3s ease;
}

div.footer-links div.lam-accordion-item.active div.lam-accordion-content {
    opacity: 1;
}

div.lam-accordion-content-inner {
    margin-bottom: 1.4rem;
}

div.footer-links ul.lam-accordion-subitems {
    list-style: none;
    margin: 0;
    padding: 0;
}

div.footer-links li.lam-accordion-subitem {
    margin: 0;
}

li.lam-accordion-subitem a {
    color: #808080;
    text-decoration: none;
    display: block;
    transition: color 0.2s ease;
}

li.lam-accordion-subitem a:hover {
    color: #8080808a;
    text-decoration: none;
}













    /* ====== INFO KICKS HYPE ====== */

div.footer__title-info {
    padding-bottom: .6rem;
}

div.footer__title-info span {
    font-weight: 600 !important;
}

div.footer-atencion > div.footer__text-info > p {
    padding-bottom: .16rem;
}

div.footer__title-info span, div.footer__text-info p {
    font-family: "Montserrat" !important;
}

div.footer__text-info {
    display: contents;
}

div.footer__text-info p {
    font-weight: 400 !important;
    color: #808080 !important;
    line-height: 1.15rem;
}

div.footer-pagos__container-icons {
    flex-direction: row !important;
    padding: 1rem 0 !important;
    gap: .6rem !important;
    flex-wrap: wrap;
}

div.footer-pagos__icons {
    line-height: 0 !important;
}

div.footer-pagos__icons img {
    width: 2.2rem;
}

div.footer-pagos__spacer div.elementor-spacer-inner {
    height: 0 !important;
}

div.footer-pagos__container-icons > div:nth-last-child(-n+5) {
    margin-top: -.6rem;
}



    /* ====== FOOTER BOOTOM ====== */

div.footer-bottom {
    flex-direction: row !important;
    padding: 1rem 0rem !important;
    border-top: 1px solid #FFF;
    
}

div.footer-bottom div {
    font-size: .72rem;

}

div.footer-bottom span, div.footer-bottom nav {
    font-family: "Montserrat" !important;
}

div.footer-bottom__copyright {
    flex: 1;
}

nav.footer-bottom__legal-nav {
    text-align: end;
}

a.footer-bottom__legal-nav-a {
    color: #FFF;
}

a.footer-bottom__legal-nav-a:hover {
    color: #999 !important;
}





/* ============================================
   RESPONSIVE DESIGN: Mobile (-767px)
   ============================================ */

@media screen and (max-width: 767px) {
    
    div.footer-grid, div.footer-bottom {
        max-width: 24rem !important;
        width: 90%;
        
    }    
    
    div.footer-grid {
        padding-top: 2rem !important;
    }
    
    div.product-grid { /***********************************             temporal       ***************/
        margin-bottom: 10rem !important;
    }
    
    
    
        /* ====== FOOTER LOGO ====== */
    
    div.footer-grid > div.e-con-inner > div.footer-logo {
        padding-bottom: 1.6rem !important;
        border-bottom: 1px solid #999;
    }
    
    div.footer-logo__logo img {
        width: 40vw !important;
        max-width: 9.5rem;
        padding-bottom: 1.4rem;
    }
    
    div.footer-logo__icon-location img {
        width: .55rem;
        margin-right: .4rem;
    }
    
    div.footer-logo__location p {
        font-size: clamp(.1rem, 4.5vw, .965rem);
    }
    
    div.footer-logo__social-media {
        margin-top: -1.6rem;
    }
    
    
    
        /* ====== NEWSLETTER ====== */
    
    div.footer-newsletter {
        margin: 1rem 0 .6rem 0;
    }
    
    div.footer-newsletter__title {
        margin-bottom: 1.3rem !important;
    }
    
    div.footer-newsletter__title span {
        font-size: clamp(.1rem, 7vw, 1.6rem);
    }    
    
    
    
        /* ====== FOOTER SOCIAL MEDIA ====== */
    
    div.footer-social {
        display: none;
    }    
    
    
    
        /* ====== INFO KICKS HYPE ====== */
    
    div.footer-atencion {
        margin-top: 1rem;
    }
    
    div.footer-pagos {
        margin-bottom: .4rem;
    }
    
    div.footer-pagos__title {
        padding-top: 1.2rem;
    }
    
    div.footer__title-info span {
        font-size: clamp(.1rem, 6vw, 1.2rem);
    }
    
    div.footer-atencion div.footer__text-info p {
        font-size: clamp(.1rem, 4.4vw, .935rem);
    }
    
    div.footer-pagos div.footer__text-info p {
        font-size: clamp(.1rem, 4.5vw, .95rem);
    }    
    
    div.footer__text-info p {
        width: 90%;
        max-width: 19rem;
    }    
    
    
    
        /* ====== FOOTER BOTTOM ====== */
    
    div.footer-bottom {
        gap: .6rem;
    }
    
    nav.footer-bottom__legal-nav {
        text-align: start;
    }

    a.footer-bottom__legal-nav-a, nav.footer-bottom__legal-nav span.separator {
        color: #999 !important;
    }
    
    a.footer-bottom__legal-nav-a:hover {
        color: #99999994 !important;
    }
}






































/* ============================================
   RESPONSIVE DESIGN: Tablet (+1024px)
   ============================================ */

@media (min-width: 768px) and (max-width: 1023px) {
    
    div.footer-grid.e-con {
        grid-template-columns: 1fr 1fr !important;
        grid-template-areas:
            "logo     news"
            "atencion news"
            "pagos    links"
            "social   links" !important;
    }
    
    
    
    div.footer-grid, div.footer-bottom {
        padding-top: 1rem !important;
        max-width: 50rem !important;
        width: 86%;
    }
    
    
    
    
    
    
    
        /* ====== INFO KICKS HYPE ====== */
    
    div.footer-pagos__title {
        padding-top: 1.2rem;
    }
    
    div.footer__title-info span {
        font-size: clamp(.1rem, 2.5vw, 1.05rem);
    }
    
    div.footer__text-info p {
        font-size: clamp(.1rem, 2.08vw, 1rem);
    }        
    
    div.footer__text-info p {
        width: 90%;
        max-width: 19rem;
    }
    
    
    
        /* ====== FOOTER BOTTOM ====== */
    
    div.footer-bottom__copyright span {
        line-height: 1.3;
        display: block;
        width: 18rem;
    }
    
    nav.footer-bottom__legal-nav {
        width: 21rem;
    }   
    
}





/* ============================================
   RESPONSIVE DESIGN: Desktop (+1024px)
   ============================================ */

@media (min-width: 1024px) {
    
    div.footer-grid {
        width: 98%;
        max-width: 80rem !important;
        padding-top: 2.4rem !important;
    }
    
    div.footer-bottom {
        width: 92.5%;
        max-width: 76.5rem !important;
    }
    
    div.footer-grid.e-con {
        grid-template-columns: 1fr 1fr 1fr !important;
        grid-template-areas:
            "logo    atencion  news"
            "links   pagos     social" !important;
    }
    
    div.footer-grid > div.e-con-inner > div {
        padding: 0 1.8rem !important;
    }
    
    
    
        /* ====== FOOTER LOGO ====== */
    
    div.footer-logo__logo img {
        width: 14vw !important;
        padding-bottom: 1.2rem;    
        padding-top: .6rem;
        max-width: 11rem;
    }
    
    div.footer-logo__icon-location img {
        width: .6rem;
    }
    
    div.footer-logo__location {
        margin-top: .1rem;
        margin-left: .4rem;
        height: fit-content; 
    }
    

    
        /* ====== NEWSLETTER ====== */
    
    div.footer-newsletter__title span {
        font-size: clamp(.1rem, 2.4vw, 1.8rem);
    }
    
    div.footer-newsletter__text p {
        font-size: clamp(.1rem, 1.4vw, 1rem);
    }
    
    
    
        /* ====== SOCIAL MEDIA ====== */
    
    div.footer-logo__social-media {
        display: none;
    }    
    
    div.footer-social__social-media {
        padding-bottom: .6rem;
    }
    
    div.footer-social__icons-social-media > div.elementor-social-icons-wrapper {
        justify-content: start;
        gap: .8rem !important;
        display: flex;
    }
    
    
    
        /* ====== NAV MENU ACCORDION ====== */
    
    div.footer-links {
        margin-top: -3.8rem;
    }
    

    
        /* ====== INFO KICKS HYPE ====== */
    
    div.footer-pagos {
        margin-top: -4.4rem;
    }    
    
    div.footer__title-info span {
        font-size: clamp(.1rem, 1.8vw, 1.2rem);
    }
    
    div.footer-atencion div.footer__text-info p {
        font-size: clamp(.1rem, 1.38vw, .95rem) !important;
        max-width: 19rem;
    }
    
    div.footer__text-info p {
        font-size: clamp(.1rem, 1.4vw, 1rem);
        max-width: 19rem;
    }
    


        /* ====== FOOTER BOTTOM ====== */

    nav.footer-bottom__legal-nav {
        width: 22rem;
    }
}

















