/* ==========================================================
   FOOTER - yirehmana (Alineación Perfecta)
========================================================== */

.footer-section {
    background: #05111A;
    color: #ffffff;
    width: 100%;
    margin-top: 0;
    padding-top: 0;
    padding-bottom: 12px; /* Reducido de 25px */
}

/* Línea divisoria horizontal pegada al borde superior */
.footer-top-divider {
    width: 100%;
    height: 1px;
    background: rgba(255, 255, 255, 0.12);
    margin-bottom: 20px; /* Reducido de 35px */
}

/*==============================
   CONTENEDOR PRINCIPAL
===============================*/

.footer-container {
    display: grid;
    grid-template-columns: 1.8fr repeat(4, 1fr);
    gap: 25px;
    align-items: flex-start;
    padding-bottom: 20px; /* Reducido de 35px */
}

/*==============================
   LOGO Y LEMA
===============================*/

.footer-brand img {
    height: 32px; /* Reducido de 38px */
    width: auto;
    margin-bottom: 6px; /* Reducido de 12px */
    display: block;
}

.footer-brand p {
    color: #94a3b8;
    font-size: 0.78rem;
    line-height: 1.35; /* Interlineado más compacto (estaba en 1.5) */
    margin: 0;
}

/*==============================
   COLUMNAS Y ENLACES
===============================*/

.footer-column h4 {
    color: #ffffff;
    font-size: 0.80rem;
    font-weight: 800;
    margin-top: 0;
    margin-bottom: 10px; /* Reducido de 16px */
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.footer-column a {
    display: block;
    color: #94a3b8;
    text-decoration: none;
    margin-bottom: 4px; /* Reducido de 8px a 4px */
    line-height: 1.3;
    font-size: 0.78rem;
    transition: color 0.2s, transform 0.2s;
}

    .footer-column a:hover {
        color: #C89B3C;
        transform: translateX(3px);
    }

/*==============================
   REDES SOCIALES
===============================*/

.footer-social {
    display: flex;
    gap: 12px;
    align-items: center;
}
    .footer-social .social-icon {
        font-size: 17px;
        display: inline-flex;
        justify-content: center;
        align-items: center;
        text-decoration: none;
        transition: transform 0.2s ease, opacity 0.2s ease;
    }

        .footer-social .social-icon:hover {
            transform: translateY(-2px);
            opacity: 0.85;
        }

    /* Colores de marca exactos */
    .footer-social .facebook {
        color: #1877F2;
    }

    .footer-social .instagram {
        color: #E4405F;
    }

    .footer-social .youtube {
        color: #FF0000;
    }

    .footer-social .tiktok {
        color: #FFFFFF;
    }

    .footer-social .whatsapp {
        color: #25D366;
    }

/* ==========================================================
   BOTÓN FLOTANTE GIGANTE DE WHATSAPP
========================================================== */

.btn-whatsapp-float {
    position: fixed;
    bottom: 25px;
    right: 25px;
    width: 58px;
    height: 58px;
    background-color: #25D366;
    color: #FFFFFF !important;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 32px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
    z-index: 9999;
    text-decoration: none;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

    .btn-whatsapp-float:hover {
        transform: scale(1.08);
        box-shadow: 0 6px 18px rgba(37, 211, 102, 0.45);
        color: #FFFFFF;
    }

    .footer-social a {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        background: #0d2235;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #ffffff;
        font-size: 14px;
        text-decoration: none;
        transition: background-color 0.2s, transform 0.2s;
    }

        .footer-social a:hover {
            background: #C89B3C;
            color: #05111A;
            transform: translateY(-2px);
        }

/*==============================
   PARTE INFERIOR / COPYRIGHT
===============================*/

.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding-top: 12px; /* Reducido de 20px */
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
}

    .footer-bottom span {
        color: #64748b;
        font-size: 0.75rem;
    }

    .footer-bottom .legal-links {
        display: flex;
        gap: 20px;
    }

        .footer-bottom .legal-links a {
            color: #64748b;
            text-decoration: none;
            font-size: 0.75rem;
            transition: color 0.2s;
        }

            .footer-bottom .legal-links a:hover {
                color: #C89B3C;
            }

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

@media (max-width: 991px) {
    .footer-container {
        grid-template-columns: repeat(2, 1fr);
        gap: 30px;
    }

    .footer-brand {
        grid-column: span 2;
    }
}

/* ==========================================================
   RESPONSIVE OPTIMIZADO (TABLETS Y MÓVILES)
========================================================== */

/* 1. TABLET (iPad, pantallas entre 768px y 991px) */
@media (min-width: 768px) and (max-width: 991px) {
    .footer-container {
        /* Distribuimos en 2 columnas equilibradas */
        grid-template-columns: repeat(2, 1fr);
        gap: 25px 30px;
        align-items: start;
        text-align: left;
        padding-bottom: 25px;
    }

    /* El logo ocupa la fila superior completa */
    .footer-brand {
        grid-column: span 2;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
        padding-bottom: 12px;
        margin-bottom: 5px;
    }

        .footer-brand img {
            height: 32px;
        }

    /* Alineación de redes en tablet */
    .footer-social {
        justify-content: flex-start;
        gap: 15px;
    }

    /* Modificamos padding del container para que no choque */
    .footer-section .container-xl {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
}


/* 2. MÓVIL (Smartphones hasta 767px) */
/* ==========================================================
   CORRECCIÓN DEFINITIVA PARA MÓVIL (Hasta 767px)
========================================================== */

@media (max-width: 767px) {

    /* 1. Reset estricto del contenedor general */
    .footer-section .container-xl {
        padding-left: 15px !important;
        padding-right: 15px !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* 2. Convertimos el grid a 1 SOLA COLUMNA y centramos todo */
    .footer-container {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        width: 100% !important;
        gap: 16px !important;
        padding-bottom: 15px !important;
        box-sizing: border-box !important;
    }

    /* 3. Ajustes de cada bloque de enlaces */
    .footer-brand,
    .footer-column {
        width: 100% !important;
        margin: 0 auto !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
    }

        .footer-brand img {
            height: 30px;
            margin-bottom: 6px;
        }

        .footer-brand p {
            font-size: 0.75rem;
        }

        .footer-column h4 {
            margin-top: 4px;
            margin-bottom: 6px;
            font-size: 0.78rem;
        }

        .footer-column a {
            margin-bottom: 3px;
            font-size: 0.75rem;
        }

    /* 4. Redes Sociales en línea horizontal centrada */
    .footer-social {
        display: flex !important;
        flex-direction: row !important;
        justify-content: center !important;
        align-items: center !important;
        width: 100% !important;
        gap: 14px !important;
        margin-top: 4px;
    }

        .footer-social .social-icon {
            background: transparent !important;
            width: auto !important;
            height: auto !important;
            font-size: 18px;
        }

    /* 5. Copyright y Legales centrados */
    .footer-bottom {
        flex-direction: column !important;
        text-align: center !important;
        align-items: center !important;
        width: 100% !important;
        gap: 8px;
        padding-top: 12px;
    }

        .footer-bottom .legal-links {
            display: flex !important;
            justify-content: center !important;
            gap: 15px;
        }

            .footer-bottom span,
            .footer-bottom .legal-links a {
                font-size: 0.70rem;
            }
}