@media (max-width: 768px){

    body{
        overflow-x: hidden;
    }

    *{
        max-width: 100% !important;
    }

    img{
        width: 100% !important;
        height: auto !important;
    }

    table, div, section, article{
        display: block;
        width: 100% !important;
    }

}

@media (max-width: 768px){

    /* Evita el scroll horizontal en general */
    body{
        overflow-x: hidden;
    }

    /* El texto se adapta y baja de línea */
    p, span, a, li, h1, h2, h3, h4, h5, h6{
        word-wrap: break-word;
        overflow-wrap: break-word;
        white-space: normal !important;
    }

    /* Contenedores largos se encogen */
    div, section, article{
        max-width: 100% !important;
    }
}
@media (max-width: 768px){
    h1{ font-size: 1.6rem }
    h2{ font-size: 1.3rem }
    p{ font-size: 1rem }
}
@media (max-width: 768px){

    header{
        width: 100% !important;
        max-width: 100% !important;
        overflow: hidden;
        padding: 10px !important;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 10px;
    }

    header img{
        max-width: 80% !important;
        height: auto !important;
    }

    header nav{
        width: 100%;
    }

    header nav ul{
        display: flex;
        flex-direction: column;
        gap: 6px;
        padding: 0;
        margin: 0;
        width: 100%;
        text-align: center;
    }

    header nav ul li{
        width: 100%;
        display: block;
    }

    header nav ul li a{
        display: block;
        width: 100%;
    }

    /* opcional pero recomendado */
    header h1, header h2, header h3{
        font-size: 1.3rem !important;
        word-wrap: break-word;
        overflow-wrap: break-word;
    }
}