/* responsive.css */

/* Establece el viewport para dispositivos móviles */
@media only screen and (max-width: 600px) {
    body {
        font-size: 16px;
        padding: 10px;
    }

    header, nav, main, footer {
        width: 100%;
        box-sizing: border-box;
    }

    img, video {
        max-width: 100%;
        height: auto;
    }

    .container {
        padding: 0 10px;
    }

    /* Ejemplo de menú hamburguesa */
    .menu {
        display: none;
    }
    .menu-mobile {
        display: block;
    }
}

/* Estilos generales para escritorio */
@media only screen and (min-width: 601px) {
    body {
        font-size: 18px;
        padding: 20px;
        width: 30%;
        margin: 0 auto;
    }

    .menu {
        display: block;
    }
    .menu-mobile {
        display: none;
    }
}