/*
============================================================
FOOTER LAYOUT V4
Corrige solamente la distribución del footer.
Respeta la estructura HTML existente.
============================================================
*/

/* =========================================================
   ESCRITORIO
   La estructura real es:

   row
   ├── col-xl-9
   │   └── row
   │       ├── descripción
   │       ├── menú
   │       └── contacto
   └── col-xl-3
       └── especialidades
========================================================= */

@media (min-width: 1200px) {

    /* Centrar el contenido completo y aprovechar el ancho */
    .footer > .container {
        width: calc(100% - 64px) !important;
        max-width: 1380px !important;

        margin-left: auto !important;
        margin-right: auto !important;

        padding-left: 0 !important;
        padding-right: 0 !important;
    }


    /* FILA EXTERIOR:
       bloque principal + especialidades
    */
    .footer > .container > .row.g-5 {
        display: grid !important;

        grid-template-columns:
            minmax(0, 3.25fr)
            minmax(235px, 0.95fr);

        gap: clamp(42px, 4vw, 72px);

        width: 100% !important;

        margin-left: 0 !important;
        margin-right: 0 !important;

        align-items: start;
    }


    /* Quitar solamente los anchos Bootstrap
       de los dos hijos exteriores.
    */
    .footer > .container > .row.g-5 > .col-xl-9,
    .footer > .container > .row.g-5 > .col-xl-3 {
        width: auto !important;
        max-width: none !important;

        flex: none !important;

        padding-left: 0 !important;
        padding-right: 0 !important;

        margin: 0 !important;
    }


    /* El mb-5 intermedio no necesita espacio inferior
       porque estamos dentro de una sola fila visual.
    */
    .footer > .container > .row.g-5
    > .col-xl-9
    > .mb-5 {
        margin-bottom: 0 !important;
    }


    /* FILA INTERIOR REAL:
       descripción | menú | contacto
    */
    .footer > .container > .row.g-5
    > .col-xl-9
    > .mb-5
    > .row.g-4 {

        display: grid !important;

        grid-template-columns:
            minmax(275px, 1.05fr)
            minmax(165px, 0.62fr)
            minmax(355px, 1.33fr);

        gap: clamp(32px, 3vw, 56px);

        width: 100% !important;

        margin-left: 0 !important;
        margin-right: 0 !important;

        align-items: start;
    }


    /* Anular únicamente los anchos Bootstrap
       de las tres columnas interiores.
    */
    .footer > .container > .row.g-5
    > .col-xl-9
    > .mb-5
    > .row.g-4
    > [class*="col-"] {

        width: auto !important;
        max-width: none !important;

        min-width: 0 !important;

        flex: none !important;

        padding-left: 0 !important;
        padding-right: 0 !important;
    }


    /* =====================================================
       TEXTOS
       No partir palabras normales.
    ===================================================== */

    .footer .footer-item {
        min-width: 0;
    }


    .footer .footer-item h4 {
        word-break: normal !important;
        overflow-wrap: normal !important;
    }


    .footer .footer-item p {
        word-break: normal !important;
    }


    /* Menú y especialidades */
    .footer .footer-item > a:not([class*="footer-social"]) {
        word-break: normal !important;
    }


    /* =====================================================
       INFO DE CONTACTO
    ===================================================== */

    /* Identifica exclusivamente la columna que contiene mailto */
    .footer .footer-item:has(> a[href^="mailto:"]) {
        min-width: 0;
    }


    /* Ubicación */
    .footer .footer-item:has(> a[href^="mailto:"]) > p {
        display: flex !important;

        align-items: flex-start;

        gap: 10px;

        margin-bottom: 14px;
    }


    /* Teléfono */
    .footer .footer-item:has(> a[href^="mailto:"])
    > a[href^="tel:"] {

        display: flex !important;

        align-items: center;

        gap: 10px;

        width: fit-content;

        white-space: nowrap;

        margin-bottom: 14px;
    }


    /* Correo */
    .footer .footer-item:has(> a[href^="mailto:"])
    > a[href^="mailto:"] {

        display: flex !important;

        align-items: center;

        gap: 10px;

        width: fit-content;

        max-width: 100%;

        white-space: nowrap;

        font-size: clamp(
            0.86rem,
            0.82vw,
            1rem
        );
    }


    /* Los iconos ya reciben espacio mediante gap */
    .footer .footer-item:has(> a[href^="mailto:"])
    > p > i,

    .footer .footer-item:has(> a[href^="mailto:"])
    > a > i {

        flex: 0 0 auto;

        margin-right: 0 !important;
    }


    /* =====================================================
       DESCRIPCIÓN PRINCIPAL
    ===================================================== */

    .footer > .container > .row.g-5
    > .col-xl-9
    > .mb-5
    > .row.g-4
    > :first-child
    .footer-item
    > p {

        max-width: 330px;

        line-height: 1.9;
    }


    /* =====================================================
       ESPECIALIDADES
    ===================================================== */

    .footer > .container > .row.g-5
    > .col-xl-3
    .footer-item {

        min-width: 220px;
    }


    .footer > .container > .row.g-5
    > .col-xl-3
    .footer-item > a {

        white-space: nowrap;
    }
}


/* =========================================================
   TABLET

   Aquí NO convertimos la estructura a grid.
   Dejamos que Bootstrap haga su trabajo responsive.
========================================================= */

@media (min-width: 768px) and (max-width: 1199.98px) {

    .footer > .container {
        width: calc(100% - 48px) !important;
        max-width: 960px !important;

        margin-left: auto !important;
        margin-right: auto !important;
    }


    .footer .footer-item {
        min-width: 0;
    }


    .footer .footer-item h4 {
        word-break: normal !important;
    }


    .footer .footer-item:has(> a[href^="mailto:"])
    > a[href^="mailto:"] {

        overflow-wrap: anywhere;
        word-break: normal;
    }
}


/* =========================================================
   MÓVIL

   Bootstrap conserva la estructura vertical original.
   Solo evitamos palabras rotas.
========================================================= */

@media (max-width: 767.98px) {

    .footer > .container {
        width: calc(100% - 32px) !important;

        margin-left: auto !important;
        margin-right: auto !important;
    }


    .footer .footer-item {
        width: 100%;

        min-width: 0;
    }


    .footer .footer-item h4,
    .footer .footer-item p,
    .footer .footer-item a {

        word-break: normal !important;
    }


    .footer .footer-item:has(> a[href^="mailto:"])
    > a[href^="mailto:"] {

        overflow-wrap: anywhere;
    }
}


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

   NO se modifica:
   .footer-btn
   .footer-social-facebook
   .footer-social-linkedin
========================================================= */