/* ==========================================================
   COMPONENTE SITE FOOTER
   Reconstruido desde 0. Namespace: .site-footer
   Requiere: Bootstrap 4 (grid)
========================================================== */

.site-footer{
    padding:var(--space-xl) 0;
    background:var(--color-secondary-blue);
    color:var(--color-white);
}

/* ==========================================================
   TOP: logo + tagline
========================================================== */

.site-footer__top{
    padding-bottom:var(--space-lg);
    border-bottom:2px solid rgba(255,255,255,.35);
}

.site-footer__logo{
    width:220px;
    height:auto;
    display:block;
}

.site-footer__tagline{
    margin: 0;
    color: var(--color-white);
    font-size: 2.1rem;
    font-weight: var(--font-weight-extrabold);
    line-height: var(--line-height-tight);
    text-align: end;
    padding-left: 10rem;
}

/* ==========================================================
   DIVIDER (entre contacto y descarga app)
========================================================== */

.site-footer__divider--sm{
    width:100%;
    max-width:422px;
    height:1px;
    margin-left:0;
    margin-bottom:var(--space-sm);
    background:rgba(255,255,255,.3);
}

/* ==========================================================
   ASIDE (Contacto + Descarga app, pegado al borde derecho)
========================================================== */

.site-footer__aside{
    max-width: 340px;
    margin-left: auto;
    text-align: end;
}

.site-footer__aside-row{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:var(--space-sm);
}

/* ==========================================================
   COLUMNAS DE LINKS
========================================================== */

.site-footer__col{
    padding-top:var(--space-xl);
}

.site-footer__col-title{
    max-width:151px;
    margin-bottom:var(--space-sm);
    color:var(--color-white);
    font-size:var(--font-size-body-lg);
    font-weight:var(--font-weight-bold);
}

.site-footer__list{
    margin:0;
    padding:0;
    list-style:none;
}

.site-footer__list li{
    margin-bottom:.35rem;
}

.site-footer__link{
    color:var(--color-white);
    transition:opacity var(--transition-fast);
}

.site-footer__link:hover{
    color:var(--color-white);
    opacity:.5;
    text-decoration:none;
}

.site-footer__contact-icon{
    margin-right:.5rem;
    color:var(--color-white);
}

/* ==========================================================
   REDES / APP
========================================================== */

.site-footer__social{
    display:inline-flex;
    gap:6px;
    margin-bottom:.5rem;
}

.site-footer__social-icon{
    display:inline-flex;
    justify-content:center;
    align-items:center;
    width:38px;
    height:38px;
    border-radius:50%;
    background:var(--color-white);
    color:var(--color-secondary-blue);
    font-size:1rem;
    transition:var(--transition-fast);
}

.site-footer__social-icon:hover{
    color:var(--color-primary-blue);
    text-decoration:none;
}

/* ==========================================================
   WHATSAPP FLOTANTE
========================================================== */

.site-footer__whatsapp{
    position:fixed;
    right:35px;
    bottom:15px;
    z-index:var(--z-modal);
}

.site-footer__whatsapp-btn{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:.65rem 1.5rem;
    border-radius:var(--radius-pill);
    background:#22C35E;
    color:var(--color-white);
    font-family:var(--font-body-family);
    font-size:var(--font-size-body);
    font-weight:var(--font-weight-bold);
    box-shadow:var(--shadow-md);
    transition:var(--transition-fast);
}

.site-footer__whatsapp-btn i{
    font-size:1.3rem;
}

.site-footer__whatsapp-btn:hover{
    background:#1CA750;
    color:var(--color-white);
    text-decoration:none;
    transform:translateY(-2px);
}

/* ==========================================================
   RESPONSIVE
========================================================== */

@media (max-width:991.98px){

    .site-footer__top{
        text-align:center;
    }

    .site-footer__tagline{
        max-width:none;
        padding-left:0;
        text-align:center;
        font-size:1.6rem;
        margin-top:var(--space-sm);
    }

    .site-footer__logo{
        margin:0 auto;
    }

    .site-footer__aside{
        max-width:none;
        margin-left:0;
    }

    .site-footer__aside-row{
        grid-template-columns:1fr;
        gap:0;
    }

    .site-footer__col{
        padding-top:var(--space-lg);
    }

    .site-footer__divider--sm{
        margin-bottom:var(--space-md);
    }
}

@media (max-width:575.98px){

    .site-footer__logo{
        width:170px;
    }
}