/* ===============================
   CSS RESPONSIVO GLOBAL
   =============================== */

/* Garante que tudo respeite o tamanho da tela */
html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    overflow-x: hidden;
}

/* Imagens e vídeos nunca estouram a tela */
img, video {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Textos se adaptam */
h1, h2, h3, h4, h5, h6, p, span, a, li {
    word-wrap: break-word;
}

/* Layout base */
.container {
    width: 100%;
    max-width: 1200px; /* limite para desktop */
    margin: 0 auto;
    padding: 0 15px;
}

/* ===============================
   RESPONSIVIDADE POR TELAS
   =============================== */

/* Tablet */
@media (max-width: 1024px) {
    .container {
        max-width: 95%;
    }

    .col-2, .col-3, .col-4 {
        width: 100% !important;
    }
}

/* Celular */
@media (max-width: 768px) {
    .container {
        max-width: 100%;
        padding: 0 10px;
    }

    /* Força colunas em blocos no mobile */
    .col-2, .col-3, .col-4, .sidebar {
        width: 100% !important;
    }

    nav ul {
        flex-direction: column;
        gap: 10px;
    }
}