/* ==================================== */
/* ARQUIVO RESPONSIVE.CSS */
/* ==================================== */

/* --- Ajustes Gerais para Telas Menores --- */
@media (max-width: 1200px) {
    /* Centraliza o conteúdo principal e o deixa maior */
    main {
        width: 85%;
    }
}

@media (max-width: 900px) {
    /* Ajusta o container principal para telas pequenas */
    main {
        width: 95%; /* Ocupa quase a largura total da tela */
        padding: 0 10px; /* Adiciona um pequeno padding nas laterais */
    }

    /* Reduz o recuo de parágrafo para economizar espaço e evitar quebras */
    p {
        text-indent: 10px;
    }

    /* Ajusta o cabeçalho superior para quebrar as seções, se necessário */
    .sup-main-header {
        flex-direction: column;
        align-items: center;
        gap: 5px;
        padding: 5px 0;
    }

    /* Ajusta o container de contato para não ser muito largo */
    .sup-main-header-contact {
        padding-bottom: 5px;
    }

    /* Centraliza os ícones sociais (já estão em linha, mas garante o alinhamento) */
    .sup-main-header-contact ul {
        padding: 0;
    }
}

/* --- Layout Principal: Cards Empilhados --- */
@media (max-width: 768px) {
    /* Faz os cards irem um abaixo do outro */
    .main-section-options {
        flex-direction: column;
        gap: 20px; /* Aumenta o espaço entre os cards empilhados */
        padding: 0 10px;
    }

    /* Ajusta a largura dos cards para ocupar a largura total do container */
    .main-section-options-card {
        width: 100%;
        gap: 15px;
    }

    /* Remove a transformação de hover em dispositivos de toque para evitar comportamento indesejado */
    .main-section-options-card:hover {
        transform: none;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
        background-color: rgb(126, 126, 156); /* Mantém a cor original */
    }
}