/* Aquí establecemos una configuración para cuando el ancho de la pantalla sea inferior a 1024px. */
@media (max-width: 1024px) {

    .info {

        /* Aquí establecemos una separación de 40px en anchura entre columnas. */
        column-gap: 40px;

        /* Aquí establecemos una separación de 25px en altura entre filas. */
        row-gap: 25px;
    }
}

/* Aquí establecemos una configuración para cuando el ancho de la pantalla sea inferior a 768px. */
@media (max-width: 768px) {

    /* ===== HEADER ===== */

    header {

        /* Aquí establecemos que el contenedor sea flexible. */
        display: flex;

        /* Aquí establecemos que los elementos se separen entre sí. */
        justify-content: space-between;

        /* Aquí establecemos que los elementos se centren verticalmente. */
        align-items: center;
    }

    .logo {

        /* Aquí establecemos que el contenedor sea flexible. */
        display: flex;

        /* Aquí establecemos que los elementos se centren verticalmente. */
        align-items: center;
    }

    .hamburguesa {

        /* Aquí establecemos que el elemento se muestre en pantalla. */
        display: block;
    }

    nav {

        /* Aquí establecemos que el menú se oculte. */
        display: none;

        /* Aquí establecemos que el menú tenga una anchura del 100%. */
        width: 100%;
    }

    nav.activo {

        /* Aquí establecemos que el menú se muestre. */
        display: block;
    }

    nav ul {

        /* Aquí establecemos que los elementos se coloquen en columna. */
        flex-direction: column;

        /* Aquí establecemos que los elementos se centren horizontalmente. */
        align-items: center;

        /* Aquí establecemos una separación de 15px en altura entre elementos. */
        row-gap: 15px;

        /* Aquí establecemos un margen superior de 15px. */
        margin-top: 15px;
    }

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

    footer {

        /* Aquí establecemos que el contenedor sea flexible. */
        display: flex;

        /* Aquí establecemos que los elementos se coloquen en columna. */
        flex-direction: column;

        /* Aquí establecemos que los elementos se centren horizontalmente. */
        align-items: center;
    }

    .pie_pagina {

        /* Aquí establecemos que la anchura sea del 100%. */
        width: 100%;

        /* Aquí establecemos que la anchura máxima sea de 1200px. */
        max-width: 1200px;

        /* Aquí establecemos que los elementos se coloquen en columna. */
        flex-direction: column;

        /* Aquí establecemos que los elementos se centren horizontalmente. */
        align-items: center;

        /* Aquí establecemos una separación de 40px en altura entre elementos. */
        row-gap: 40px;

        /* Aquí establecemos que el texto esté centrado. */
        text-align: center;
    }

    .info {

        /* Aquí establecemos que los elementos se coloquen en columna. */
        flex-direction: column;

        /* Aquí establecemos que los elementos se centren horizontalmente. */
        align-items: center;

        /* Aquí establecemos una separación de 35px en altura entre elementos. */
        row-gap: 35px;
    }

    .resumen_proyecto,
    .info_1,
    .info_2,
    .info_3 {

        /* Aquí establecemos que la anchura sea como máximo el 100% o 350px. */
        width: min(100%, 350px);
    }

    footer div .logo {

        /* Aquí establecemos que los elementos se coloquen en columna. */
        flex-direction: column;

        /* Aquí establecemos que los elementos se centren horizontalmente. */
        align-items: center;

        /* Aquí establecemos que el texto esté centrado. */
        text-align: center;
    }

    footer div .logo h3 {

        /* Aquí establecemos un margen superior de 10px. */
        margin-top: 10px;
    }
}

/* Aquí establecemos una configuración para cuando el ancho de la pantalla sea inferior a 480px. */
@media (max-width: 480px) { 

    /* ===== HEADER ===== */

    header img {

        /* Aquí establecemos la altura de la imagen en 40px. */
        height: 40px;

        /* Aquí establecemos la anchura de la imagen en 40px. */
        width: 40px;
    }

    header div p {

        /* Aquí establecemos el tamaño de letra en 20px. */
        font-size: 20px;
    }

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

    .info_1:hover,
    .info_2:hover,
    .info_3:hover {

        /* Aquí establecemos que la altura se ajuste automáticamente al contenido. */
        height: auto;
    }
}