/* Reseteo general */
html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}

/* El contenido debe ocupar el espacio disponible */
main {
    flex: 1;
}

footer {
    position: relative;
    width: 100%;
    background: #00837f;
    min-height: 400px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}


footer .contacto {
    text-align: center;      /* centra el texto */
    margin: 20px 0;          /* espaciado arriba y abajo */
}

footer .contacto h1 {
    margin: 0;               /* quita márgenes extra */
    font-size: 1.8em;
    font-weight: bold;
}

footer .contacto p {
    margin: 5px 0 0;         /* reduce espacio extra */
    font-size: 1.2em;
    color: #fff;
}



footer .social_icon {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 10px 0;
    flex-wrap: wrap;
}

footer .social_icon li {
    list-style: none;
}

footer .social_icon li a{
    font-size: 2em;
    color: #fff;
    margin: 0 5px;
    display: inline-block;
    transition: 0.5s;
}

footer .social_icon li a:hover {
    transform: translateY(-10px);
    color: #AE874C;
}

/* 🔹 Nuevo CSS para el logo */
footer .logo_footer {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 15px;
}

footer .logo_footer img {
    max-width: 150px; /* tamaño mediano */
    height: auto;
}

footer p {
    color: #fff;
    text-align: center;
    margin-top: 15px;
    margin-bottom: 10px;
    font-size: 1.1em;
}

footer .wave {
    position: absolute;
    top: -100px;
    left: 0;
    width: 100%;
    height: 100px;
    background: url(/UTPN/assets/img/wave.png);
}

footer .wave#wave1 {
    z-index: 1000;
    opacity: 1;
    bottom: 0;
    animation: animatewave 4s linear infinite;
}

footer .wave#wave2 {
    z-index: 999;
    opacity: 0.5;
    bottom: 10px;
    animation: animatewave_02 4s linear infinite;
}

footer .wave#wave3 {
    z-index: 1000;
    opacity: 0.2;
    bottom: 15px;
    animation: animatewave 3s linear infinite;
}

footer .wave#wave4 {
    z-index: 900;
    opacity: 0.7;
    bottom: 20px;
    animation: animatewave_02 3s linear infinite;
}

@keyframes animatewave {
    0% { background-position-x: 1000px; }
    100% { background-position-x: 0px; }
}

@keyframes animatewave_02 {
    0% { background-position-x: 0px; }
    100% { background-position-x: 1000px; }
}

.contacto h1 {
    color: white;
}

.contacto p {
    font-size: 20px;
}

/* ========================
   FOOTER RESPONSIVE
======================== */
@media (max-width: 700px) {

    footer {
        min-height: auto;          /* altura automática */
        margin-top: 10rem;
    }

    footer .contacto h1 {
        font-size: 1.5em;          /* más pequeño */
    }

    footer .contacto p {
        font-size: 1em;            /* más pequeño */
    }

    footer .social_icon {
        flex-direction: row;       /* apila horizontalmente */
        flex-wrap: wrap;           /* permite que bajen si no caben */
        margin-left: 0;            /* quita desplazamiento negativo */
    }

    footer .social_icon li a {
        font-size: 1.5em;          /* iconos más pequeños */
        margin: 5px;               /* más espacio entre iconos */
    }

    footer .logo_footer img {
        max-width: 120px;          /* logo más pequeño */
    }

    footer .wave {
        height: 100px;              /* reduce tamaño de las olas */
        top: -90px;
    }
}