* {
    box-sizing: border-box;
}

/* Clases de utilidad */
.invisible {
    display: none;
    visibility: hidden;
}

.toHidden {
    visibility: visible;
    display: none;
}

.bkColor {
    background-color: #725224;
}

/* --- ESTILO BASE (Mobile First) --- */
body {
    color: #FFFFFF;
    background-color: #000000;
    font-family: Roboto, sans-serif;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    margin: 0;
    /* Espacio para el footer en móvil */
   padding-bottom: 130px;
}

header {
    transition: max-height .5s ease-out;
    /*max-height: 20em;*/
    overflow: hidden;
    background: #000000;
    width: 100%;
}

main {
    padding: 1rem; /* Padding más ajustado en móviles */
    flex: 1; 
}

footer {
    z-index: 1000;
    color: #fff;
    background-color: #725224;
    position: fixed; /* Si quieres que sea fijo, debe ser fijo desde el inicio */
    bottom: 0;
    left: 0;
    width: 100%;
    height: 130px;
    
    display: flex;
    flex-direction: column; /* Vertical en móviles */
    justify-content: center;
    align-items: center;
    text-align: center;
    font-size: 0.9rem;
}

footer h6, footer span {
    margin: 0;
    font-size: 0.85rem;
    color: #FFD700;
}

footer .social-icons {
    font-size: 1.5rem;
    gap: 15px;
    display: flex;
    justify-content: center;
}

/*Ajustes para pantallas*/
/* --- SMALL (sm: Móviles grandes/horizontales >= 576px) --- */
@media (min-width: 576px) {
    body {
        padding-bottom: 120px;
    }
    footer {
        height: 120px;
        flex-direction: row; /* Intentamos poner elementos al lado del otro */
        flex-wrap: wrap;
        padding: 0 1rem;
    }
}

/* --- MEDIUM (md: Tablets >= 768px) --- */
@media (min-width: 768px) {
    body {
        padding-bottom: 50px;
    }
    footer {
        height: 50px;
        padding: 0 2rem;
    }
    main {
        padding: 2rem;
    }
}

/* --- LARGE (lg: Laptops >= 992px) --- */
@media (min-width: 992px) {
    body {
        padding-bottom: 80px;
    }
    footer {
        height: 80px;
    }
}

/* --- EXTRA LARGE (xl: Monitores >= 1200px) --- */
@media (min-width: 1200px) {
    /* Mantenemos la misma altura pero ajustamos márgenes de contenido */
    main {
        padding: 2rem 10%;
    }
}

/* --- EXTRA EXTRA LARGE (xxl: >= 1400px) --- */
@media (min-width: 1400px) {
    main {
        padding: 3rem 15%;
    }
}
/* --- AJUSTES PARA PANTALLAS GRANDES (Tablet/Desktop >= 768px) --- */
/*@media (min-width: 767.98px) {
    body {
        /* Reducimos el padding porque el footer será más bajo en desktop * / 
        padding-bottom: 7vh; 
    }

    main {
        padding: 2rem;
    }

    footer {
        height: 7vh;
        flex-direction: row; /* Horizontal en desktop * /
        justify-content: space-between;
        padding: 0 2rem;
    }
}*/



/*@media (min-width: 767.98px) {
    footer h6 {
        margin: 0; /* Quitamos margen extra en horizontal * /
    }
}*/