﻿
@media (max-width: 768px) {
    .navMenu {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
    }

    .navMenu a {
        margin-right: 2vw;
        font-size: 12px;
    }

    .navMenu-icons {
        max-width: 60px;
        max-height: 30px;
    }

    .fixed-menu {
        top: 14%;
        right: -4px;
        gap: 8px;
    }

    .fixed-menu .menu-item {
        padding: 4px 8px;
        font-size: 12px;
    }

    .fixed-menu .menu-icon {
        width: 20px;
        height: 20px;
    }

    .simbolo {
        width: auto;
        height: 20%;
        margin-top: 3%;
        padding: 4px;
    }
    .simbolo .text h1 {
        font-size: 8px; /* texto do símbolo menor */
    }
    .simbolo h2 {
        position: absolute;
        top: 27%;
        left: 0;
        margin-left: 0.5%;
        padding: 10px;
        font-size: 10px;
        max-width: 30%;
        color: white;
    }
    .simbolo-traco {
        margin-left: 1%;
        margin-top: 5%;
        background-color: white;
        width: 2%;
        height: 20%;
    }
    .fixed-menu-left {
        top: 40%; /* ajusta mais para cima/baixo conforme necessário */
        margin-left: -0.5%; /* reduz o deslocamento lateral */
    }

    .fixed-menu-left .menu-item span {
        font-size: 12px; /* texto menor */
    }

    .fixed-menu-left .menu-icon-right,
        .fixed-menu-left .menu-icon-acessibilidade {
        width: 30px;
        height: 30px; /* ícones menores */
    }
    #slider {
        margin-top: -47px;
        height: 94%;
        position: relative;
        perspective: 1000px;
        transform-style: preserve-3d;
        width: 48%;
    }

    #slider label {
        margin: auto;
        width: 80%;
        height: 100%;
        border-radius: 26px;
        position: absolute;
        left: 0;
        right: 0;
        cursor: pointer;
        transition: transform 0.4s ease;
    }
    .card-btn {
        padding: 4px 8px; /* menos padding */
        font-size: 13px; /* texto menor */
        border-radius: 25px; /* bordas um pouco menores */
    }
    #slider .card-text h2 {
        font-size: 18px; /* texto do card ainda menor */
    }

    #slider .card-text p {
        font-size: 12px; /* texto do card ainda menor */
    }
    .footer-text {
        position: absolute;
        bottom: 0;
        left: 0;
        font-size: 9px;
        margin-left: 2%;
        max-width: 30%;
        color: white;
    }
    .footer-info h7 {
        font-size: 7pt;
    }

    .footer-info p {
        font-size: 6pt;
        margin-bottom: 0;
    }
    .content-right {
        padding-top: 54px;
        padding-left: 17px;
        /* controle do scroll */
        max-height: calc(100vh - 54px); /* ocupa até a tela toda, menos o header */
        overflow-y: auto; /* cria scroll vertical só quando necessário */
        overflow-x: hidden; /* evita scroll horizontal */
    }

    .info-cards-clientes h4 {
        font-size: 2.1vw;
        margin-left: 3px;
    }

    .info-cards-clientes h1 {
        font-size: 1.8em;
    }

    .info-cards-clientes img {
        width: 65%;
        height: 35%;
    }

    .info-cards-clientes {
        width: 40%;
    }

    .info-cards-ensino {
        height: 54%;
        padding-top: 30px;
        height: 50% !important;
    }

    .info-cards-clientes p {
        font-size: 2.5vw;
    }

    .info-cards-ensino h5 {
        font-size: 0.9rem;
    }
    .cards-etapas {
        height: 40%;
    }
    .main-page-title {
        margin-top: -11% !important;
        font-size: 1.5rem !important;
    }
    .cardSecretario {
        height: 95%;
        width: 65%;
    }

    .cardSecretario-content {
        height: 35%;
    }

    .cardSecretario-content-text {
        height: 40%;
    }

    .cardSecretario-image {
        width: 20%;
    }
    .social-links img {
        width: 15px;
        height: 17px;
    }
    .cardSecretario h2{
        font-size: 1rem;
    }
}

/*============== Celulares (telas pequenas) ============================================*/
@media (max-width: 576px) {
    .navMenu {
        flex-direction: column;
        align-items: center;
        gap: 5px;
    }

    .navMenu a {
        font-size: 10px;
        text-align: center;
    }

    .navMenu-icons {
        max-width: 40px;
        max-height: 20px;
    }

    .fixed-menu {
        top: 14%;
        right: -4px;
        gap: 5px;
        flex-direction: column;
    }

    .fixed-menu .menu-item {
        padding: 3px 6px;
        font-size: 10px;
    }

    .fixed-menu .menu-icon {
        width: 18px;
        height: 18px;
    }

    .fixed-menu .menu-item span {
        font-size: 10px;
    }

    .simbolo {
        width: auto;
        height: 20%;
        margin-top: 2%;
        padding: 3px;
    }

    .simbolo .text h1 {
        font-size: 8px;
    }

    .simbolo h2 {
        position: absolute;
        top: 26.5%;
        left: 0;
        margin-left: 0.5%;
        padding: 10px;
        font-size: 6px;
        max-width: 30%;
        color: white;
    }

    .simbolo-traco {
        margin-left: 1%;
        margin-top: 5%;
        background-color: white;
        width: 2%;
        height: 20%;
    }

    .fixed-menu-left {
        top: 32%;
        margin-left: -0.3%;
    }

    .fixed-menu-left .menu-item span {
        font-size: 10px;
    }

    .fixed-menu-left .menu-icon-right,
        .fixed-menu-left .menu-icon-acessibilidade {
        width: 25px;
        height: 25px;
    }

    #slider {
        height: auto;
        position: relative;
        perspective: 1000px;
        transform-style: preserve-3d;
        width: 80%;
        top: 28%;
    }

    #slider label {
        margin: auto;
        width: 75%;
        height: 65%;
        border-radius: 26px;
        position: absolute;
        left: 18px;
        right: 0;
        cursor: pointer;
        transition: transform 0.4s ease;
    }

    .card-btn {
        padding: 3px 6px;
        font-size: 11px;
        border-radius: 20px;
    }

    #slider .card-text h2 {
        font-size: 14px;
    }

    #slider .card-text p {
        font-size: 10px;
    }

    .footer-text {
        position: absolute;
        bottom: 0;
        left: 0;
        font-size: 8px;
        margin-left: 2%;
        max-width: 30%;
        color: white;
    }

    .footer-info h7 {
        font-size: 6pt;
    }

    .footer-info p {
        font-size: 5pt;
    }

    .content-right {
        padding-top: 54px;
        padding-left: 17px;
        /* controle do scroll */
        max-height: calc(100vh - 54px);
        overflow-y: auto;
        overflow-x: hidden;
    }


    .info-cards-clientes h4 {
        font-size: 2.2vw;
        margin-left: 3px;
    }
    .info-cards-clientes h1 {
        font-size: 1.8em;
    }

    .info-cards-clientes img {
        width: 65%;
        height: 35%;
    }
    .info-cards-clientes {
        height: 42%;
        width: 40%;
    }

    .info-cards-ensino {
        height: 54%;
        padding-top: 30px;
        height: 50% !important;
    }
    .info-cards-clientes p {
        font-size: 2.5vw;
    }
    .info-cards-ensino h5{
        font-size: 0.9rem;
    }
    .main-page-title {
        font-size: 1.1rem !important;
    }
    .cardSecretario {
        height: 80%;
        width: 80%;
    }
    .cardSecretario-content {
        height: 18%;
    }
    .cardSecretario-content-text {
        height: 50%;
    }
    .cardSecretario-image {
        width: 30%;
    }
    .noticias-quadro {
        height: 25%;
        width: 60%;
        margin-left: 18px;
    }
    .noticias-quadro-texto {
        font-size: 3.5vw;
        width: 60%;
        text-align: center;
    }
    .quadro-noticias-geral {
        display: block !important;
        margin-left: 40px;
        height: auto !important;
    }
    .div-seta {
        width: 35%;
        height: 25%;
    }
    .seta {
        width: 100%;
        height: 100%;
    }
    .button-noticias {
        font-size: 3.7vw;
    }
}
