/* responsive.css */

/* Variáveis para breakpoints */
:root {
    --breakpoint-mobile: 576px;
    --breakpoint-tablet: 768px;
    --breakpoint-desktop: 992px;
    --breakpoint-large-desktop: 1200px;
}

/* Desktop Padrão */
@media screen and (min-width: 993px) and (max-width: 1200px) {
    .container {
        max-width: 1000px;
        margin: 0 auto;
    } 

    .sections-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .modalResult {
        height: 73.5%;
        left: 13.4rem;
    }
    
}

/* Large Desktop */
@media screen and (min-width: 1201px) {
    .container1 {
        max-width: 1400px;
        /* max-width: 1200px; */
        /* max-width: 1000px; */
        margin: 0 auto;
    }

    .sections-grid {
        /* grid-template-columns: repeat(3, 1fr); */
        grid-template-columns: repeat(5, 1fr); /*Quadro com 5 boxes na 1a linha */
    }
    
}


/* Media Queries para Responsividade */
@media (max-width: 992px) {
    .index-container {
        gap: 1.5rem;
    }

    .sidebar-info {
        flex-basis: 200px;
    }

    .main-content {
        flex-basis: 500px;
    }

    .block {
        flex-basis: calc(50% - 1rem);
    }

    .avalComp {
        max-width: 87%;
        line-height: 1.3;
    }

    .container.geral {
        max-width: 90%;
    }
    
}

/* Mapa de Navegação */
@media screen and (max-width: 769px) {
    .mapa-secoes {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
        width: auto;
    }

    .mapa-secao {
        padding: 10px;
        font-size: 12px;
    }

    .mapa-secao p {
        font-size: 0.7rem;
        line-height: 1.3;
    }

    .resultado-secao {
        width: 100%;
        margin-bottom: 10px;
    }

    .total-pontuacao {
        flex-direction: column;
    }

    .total-pontuacao p {
        margin-bottom: 10px;
    }

    .modalResult {
        left: 11.4rem;
        top: 1.5rem;
    }

    .resultado-mensagem {
        padding: .5em 1rem;
    }

    .pontuacao-percentual {
        font-size: 1.4rem;
    }

    .modalResult {
        left: 5.4rem;
        width: 60%;
        height: 97.4%;
    }

    .btn-resposta,
    .btn-modal-info,
    .neomorphic-btn {
        min-height: 44px;
        min-width: 44px;
    }

    .help-btn {
        min-height: 28px;
        min-width: 28px;
    }

    .site-header {
        padding: 10px 0;
    }

    .header-content {
        padding: 0 15px; /* Menor padding lateral no header */
    }

    .logoSm {
        width: 9rem; /* Logo menor */
    }

    .site-nav .btn-cta-header {
        padding: 6px 10px;
        font-size: 0.8rem;
    }
    
    /* .site-nav .whatsapp-icon { /* Esconder texto, mostrar só ícone *
        font-size: 0;
    } */

    .site-nav .whatsapp-icon svg {
        margin-right: 0;
    }

    /* .topColor {
        padding: 30px 15px;
        /* height: auto; (já removido altura fixa) *
    } */
    /* .topColor h1 {
        font-size: 1.8rem;
    } */

    .description1 {
        font-size: 1rem;
        padding: 15px;
        margin: 20px auto 30px auto;
    }

    .descriptionAdjust {
        font-size: 1.2rem;
        /* padding: 15px;
        margin: 20px auto 30px auto; */
    }

    .sidebar-info {
        border-radius: 0 50px 50px 0; /* Raio menor */
        font-size: 1rem;
        padding: 8px 12px;
        width: 90%; /* Ocupar mais da largura, mas não 100% para o efeito */
        max-width: none; /* Remover max-width para que o 90% funcione */
        margin-left: 0; /* Remover margem para o efeito de "saliência" */
    }

    .avalComp {
        font-size: 1.1rem;
        margin: 1rem 1rem 1rem 2rem;
    }

    .avalComp ul li::before {
        margin-left: -1.1em; /* Ajuste para bullet */
    }

    .btn-secondary {
        font-size: 1rem;
        padding: 10px 20px;
        min-width: auto; /* Deixar largura se ajustar ao conteúdo */
        width: 90%; /* Ocupar boa parte da largura */
        max-width: 300px; /* Mas não mais que isso */
    }

    .payment {
        flex-direction: column; /* Empilhar itens */
        align-items: center;
        gap: 25px; /* Aumentar gap vertical */
        font-size: 0.9rem;
        margin: 30px 0;
    }

    .payment .cache {
        width: auto; /* Ajustar largura */
    }
    
    .payment .fa-solid {
        font-size: 2rem;
    }

    .index-container {
        flex-direction: column;
        padding: .1rem;
    }

    .sidebar-info,
    .main-content {
        flex-basis: 100%;
        /* width: 100%; */
    }

    .assessment-blocks-container {
        flex-direction: column;
        align-items: center;
        gap: 1rem;
    }

    .block {
        flex-basis: 90%;
        width: 100%;
        max-width: 400px;
    }

    h1 {
        font-size: 1.8rem;
    }
    
    .topColor {
        height: 204px;
        padding-top: 5.5rem !important;
    }

}

@media (max-width: 600px) {
    .container-pix {
        width: 95%;
        padding: 15px;
    }
}

/* Reset para dispositivos móveis */
@media screen and (max-width: 576px) {
    body {
        font-size: .85rem;
    }

    .container {
        /* padding: 10px; */
        width: 100%;
    }

    .pQuestao {
        font-size: .85rem;
        line-height: 1.2;
        margin-top: 12px;
    }

    /* Layout Grid */
    .sections-grid,
    .resultados-secoes,
    .mapa-container {
        grid-template-columns: 1fr;
    }

    /* Formulários */
    .form-group {
        width: 100%;
    }

    .neomorphic-input,
    .neomorphic-btn {
        width: 100%;
        padding: 8px 12px;
    }

    .help-btn {
        width: 0;
    }

    /* Modal */
    .modal-conteudo {
        width: 90%;
        margin: 10% auto;
        padding: 15px;
    }

    .modal {
        left: .45rem;
        top: 10rem;
        width: 97%;
        height: 55%;
        padding: 0 10px;
    }

    .modalResult {
        left: 2.2rem !important;
        width: 83% !important;
        height: 64% !important;
    }

    .modal-content {
        padding: 0rem;
        top: 2%;
        margin: 0 auto;
        width: 101%;
    }

    h3 {
        padding-top: 7px;
        font-size: .8rem;
    }

    /* Questões */
    .questoes-header h1 {
        font-size: 1rem;
    }

    .pQuestao {
        font-size: .85rem;
        line-height: 1.2;
    }

    .btn-voltar {
        font-size: .6rem;
    }

    .questao-container {
        padding: 10px;
    }

    .opcoes-resposta {
        /* display: flex; */
        flex-direction: column;
        /* align-items: center; /* Centraliza horizontalmente * */
    }

    .opcao-resposta {
        display: flex;
        align-items: center; /* Alinha verticalmente */
        justify-content: center; /* Centraliza horizontalmente */
        gap: 10px; /* Cria um espaçamento de 10px entre o input e o texto */
        width: 100%; /* Ocupa toda a largura */
        padding: 8px 0; /* Adiciona padding vertical */
    }

    .opcao-resposta input[type="radio"] {
        margin: 0; /* Remove margens padrão */
    }

    .btn-resposta {
        margin: 5px 0;
        padding: 8px;
    }

    .questaoFontColor {
        font-size: 1rem;
    }

    .titResult {
        font-size: 1rem;
    }

    .resultado-header {
        font-size: .9rem;
        line-height: 1.2;
    }

    .doubt-block p {
        font-size: 1rem;
    }

    .header-content {
        padding: 0 10px;
    }

    .logoSm {
        width: 6.5rem;
    }

    .site-nav .btn-cta-header {
        padding: 5px 8px;
        font-size: 0.7rem;
    }

    .site-nav .btn-cta-header svg {
        width: 16px; height: 16px; /* Ícone menor */
    }

    .topColor h1 {
        font-size: 1.1rem;
    }

    .topColor-coupon {
        padding: 0 15px;
    }

    .description1 {
        font-size: 0.9rem;
    }

    .descriptionAdjust {
        font-size: 1.1rem;
        padding: 15px;
        margin: 20px 15px;
    }

    .sidebar-info {
        font-size: 0.9rem;
        /* width: 100%; Ocupar toda a largura */
        /* border-radius: 5px; Pode ser melhor sem o efeito de "saliência" */
        /* text-align: center; */
    }

    .avalComp {
        font-size: 1rem;
        margin: 1rem 1rem 1rem 2rem;
    }

    .avalComp ul li {
        padding-left: 15px;
    }

    .avalComp ul li::before {
        margin-left: -1em;
    }

    .btn-secondary {
        width: 100%;
        font-size: 0.9rem;
    }

    .payment .cache {
        font-size: 0.7rem;
    }

    .payment .cache i {
        font-size: 1.8rem;
    }

    .logoFooter {
        width: 6rem;
    }

    .final.corpo p {
        font-size: 0.8rem;
    }

    footer.bottomColor {
        padding: 10px 0;
        font-size: 0.8rem;
        /* background-color: transparent;  Se for remover a "borda" do body */
        /* color: var(--borders-color); */
    }
}

/* Tablet */
@media screen and (min-width: 577px) and (max-width: 992px) {
    body {
        font-size: 16px;
    }

    /* .container {
        padding: 15px;
    } */

    .sections-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .navegacao-secoes {
        flex-direction: column;
    }

    .neomorphic-btn {
        margin: 5px 0;
    }

    .modal {
        left: 4.5rem;
        top: 1rem;
        width: 81%;
        height: 82.3%;
    }

    #modal-image {
        max-height: 59vh;
    }

    .modalResult {
        width: 55%;
        height: 70.3%;
        left: 8.4rem;
    }
}

/* Typography Responsivo */
@media screen and (max-width: 576px) {
    h1 { font-size: 1.5rem; }
    h2 { font-size: 1.3rem; }
    h3 { font-size: .9rem; }
}


@media (max-width: 568px) {
    .logo {
        display: block;
    }

    .logo img {
        margin: 10px 0 0 0;
        justify-self: center;
        display: flex;
    }

    .logo p {
        font-size: 1rem;
        margin-top: 14px;
        text-align: center;
    }

    .title-block {
        padding: 1rem;
        font-size: 1rem;
    }

    .topColor-index {
        padding-top: 6rem;
    }

    .description1Pad {
        max-width: 480px;
    }

    .grupoTipo {
        width: 45px;
        height: 45px;
    }

    .block {
        width: 90%;
    }

    .block h2 {
        font-size: 1rem;
        line-height: 1.1;
    }

    .cadastro-form, .login-form {
        width: 93%;
        padding: 1rem 1rem 2rem 1rem;
    }
    
    .topColor {
        height: 180px;
        padding-top: 5rem !important;
    }
}   


/* Print Styles */
@media print {
    body {
        font-size: 12pt;
    }

    .container {
        width: 100%;
        margin: 0;
        padding: 0;
    }

    .neomorphic {
        box-shadow: none;
        border: 1px solid #ccc;
    }
}


/* Orientação de Dispositivos */
@media screen and (max-height: 500px) and (orientation: landscape) {
    body {
        font-size: 14px;
    }

    .topColor {
        height: 180px;
        padding-top: 5rem !important;
    }

    .sidebar-info, .title-block {
        padding: .5rem;
    }
    
}

/* Animações Responsivas */
@media (prefers-reduced-motion: reduce) {
    * {
        animation: none !important;
        transition: none !important;
    }
}

@media screen and (max-width: 376px) {
    .mapa-secao p {
         font-size: 0.6rem;
    }
}

/* CSS para o mapa de navegação */
.mapa-container {
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
}



@media screen and (max-width: 376px) {
    .site-nav .btn-cta-header {
        padding: 7px 20px;
        gap: 0;
    }

    .site-nav .whatsapp-icon { /* Esconder texto, mostrar só ícone */
        font-size: 0;
    }

    .block h2, .topColor h1, .avalComp {
        font-size: .9rem;
    }

    .btn-secondary {
        width: 80%;
        font-size: 0.8rem;
    }

    .description1 {
        font-size: 0.8rem;
        margin: 10px 10px 20px 10px;
    }

    .descriptionAdjust {
        font-size: .9rem;
        padding: 15px;
        margin: 15px;
    }

    .sidebar-info {
        font-size: 0.8rem;
    }

    .grupoTipo {
        width: 40px;
        height: 40px;
    }

    .block p {
        font-size: .8rem;
        margin-bottom: .2rem;
    }
    
        
    .topColor {
        height: 180px;
        padding-top: 5rem !important;
    }
}