/* =========================================================
   FOOTER.CSS
   CORPORACIÓN APOLO
   PALETA MORADO + AMARILLO
========================================================= */


/* =========================================================
   FOOTER PRINCIPAL
========================================================= */

.footer {

    width: 100%;

    margin-top: 60px;

    background-color: var(--superficie);

    color: var(--texto);

    border-top: 1px solid var(--borde);

    transition:
        background-color 0.3s ease,
        color 0.3s ease,
        border-color 0.3s ease;
}


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

.footer-contenedor {

    width: 100%;

    max-width: 1200px;

    margin: 0 auto;

    padding: 55px 24px 40px;

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 70px;
}


/* =========================================================
   SECCIONES
========================================================= */

.footer-ubicacion,
.footer-contacto {

    display: flex;

    flex-direction: column;

    align-items: flex-start;

    gap: 10px;
}


/* =========================================================
   TÍTULOS
========================================================= */

.footer h2 {

    margin: 0 0 10px;

    color: var(--texto);

    font-family: var(--fuente-principal);

    font-size: 22px;

    font-weight: 800;

    line-height: 1.2;
}


/* =========================================================
   TEXTOS
========================================================= */

.footer p {

    margin: 0;

    color: var(--texto-secundario);

    font-size: 15px;

    line-height: 1.6;
}


/* =========================================================
   TEXTO DESTACADO
========================================================= */

.footer strong {

    color: var(--texto);

    font-weight: 800;
}


/* =========================================================
   ENLACES
========================================================= */

.footer a {

    color: var(--texto-secundario);

    text-decoration: none;

    transition:
        color var(--transicion),
        transform var(--transicion);
}


/* =========================================================
   ENLACES DE CONTACTO
========================================================= */

.footer-contacto a {

    font-weight: 700;
}


.footer-contacto a:hover {

    color: var(--morado);
}

/* =========================================================
   FOCUS
========================================================= */

.footer a:focus-visible {

    outline: 3px solid var(--amarillo);

    outline-offset: 3px;

    border-radius: 4px;
}


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

.footer-inferior {

    width: 100%;

    border-top: 1px solid var(--borde);
}


.footer-inferior p {

    width: 100%;

    max-width: 1200px;

    margin: 0 auto;

    padding: 22px 24px;

    color: var(--texto-secundario);

    font-size: 14px;

    text-align: center;
}


/* =========================================================
   MODO OSCURO
========================================================= */

body.modo-oscuro .footer {

    background-color: #111111;

    color: #FFFFFF;

    border-top-color: #2D2D2D;
}


body.modo-oscuro .footer h2 {

    color: #FFFFFF;
}


body.modo-oscuro .footer p {

    color: #A9A9A9;
}


body.modo-oscuro .footer strong {

    color: #FFFFFF;
}


body.modo-oscuro .footer a {

    color: #A9A9A9;
}


body.modo-oscuro .footer-contacto a:hover {

    color: var(--morado);
}

body.modo-oscuro .footer-inferior {

    border-top-color: #2D2D2D;
}


body.modo-oscuro .footer-inferior p {

    color: #A9A9A9;
}


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

@media (max-width: 850px) {

    .footer {

        margin-top: 45px;
    }


    .footer-contenedor {

        padding: 45px 20px 35px;

        gap: 45px;
    }


    .footer h2 {

        font-size: 20px;
    }
}


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

@media (max-width: 650px) {

    .footer-contenedor {

        grid-template-columns: 1fr;

        gap: 35px;

        padding: 40px 18px 30px;
    }


    .footer-inferior p {

        padding: 20px 18px;

        font-size: 13px;
    }
}


/* =========================================================
   MÓVIL PEQUEÑO
========================================================= */

@media (max-width: 400px) {

    .footer-contenedor {

        padding-left: 15px;

        padding-right: 15px;
    }


    .footer-inferior p {

        padding-left: 15px;

        padding-right: 15px;
    }
}
.footer-contacto a[href^="mailto:"] {
    display: inline-block;
    max-width: 100%;
    overflow-wrap: anywhere;
}