/* ===========================================================
   MOBILE  – até 770 px
   =========================================================== */
   @media (max-width: 770px) {

    /* ---------------- Corpo ---------------- */
    body{
        font-weight: 500;
        font-size: .95em;
        max-width: 95%;
        /*padding: var(--space)*/
    }

    
    /* ---------------- Imagens --------------- */  
    
    img{
        width: 100% !important;
        height: auto !important;
        object-fit: cover !important;
    }
    
    img.naoresponsivo{
        width: 2rem !important;
        height: auto !important;
        object-fit: cover !important;
    }

  

    /* Tamanho padrão dos ícones nos cards  */
    .card-icon{
        width: clamp(48px, 18vw, 80px);
    }


    h1, h2, h3, h4{
        font-size: 5vw;
    }


    /* Colunas */
    .coluna-2,
    .coluna-3,
    .coluna-4,
    .coluna-5,
    .coluna-6,
    .coluna-7,
    .coluna-8,
    .coluna-9,
    .coluna-10,
    .coluna-11,
    .coluna-12{
        width: 100%;
    }
    
    
    .telatodamobile{
        display: block;
        width: 100% !important;
    }
    
    .banner {
        width: 23rem;
        height: 15rem;

        flex-shrink: 0;
    }

    .banner-logo {
        width: 5ren;
        height: 3rem;
        object-fit: contain;
        flex-shrink: 0;
    }

    .banner-error{
        background:#fff3f3;
        border:1px solid #ffcccc;
    }
    
    table, thead, tbody, tr, th, td{
        display:block;
        width:100%
    }
    tr{
        margin-bottom:.5rem
    }
    td{
        border-bottom:1px solid #eee
    }
    
    
    input[type=text], input[type=number], input[type=password], select {
        width:100%
    }
    
    input[type=button], button {
        display: block;
        width: 100%;
        white-space: normal !important; /* Permite a quebra de linha normal */
        word-break: break-word; /* Força a quebra de palavras longas */
    }
    
    
}