/* ===========================
   Responsividade
   Mobile-first
=========================== */
/* 1) Base (MOBILE PEQUENO) – vale para tudo abaixo de 480px
   Aqui entra o que você já tem fora das @media:
   - .container, .login-section, .hero-section, etc.
   Se quiser garantir algo só para telas muito pequenas, use abaixo:
*/
@media (max-width: 480px) {
    .login-section {
        width: 100%;
        padding: 20px 14px 28px;
    }

    .hero-section {
        display: none;
        /* esconde o hero pra focar só no login */
    }

    .form-title {
        font-size: 1.25rem;
    }

    .row-txt h1 {
        font-size: 1.3rem;
    }

    .row-txt p {
        font-size: 0.85rem;
    }
}

/* 2) MOBILE NORMAL – 481px até 767px */
@media (min-width: 481px) and (max-width: 767px) {
    .login-section {
        width: 100%;
    }

    .hero-section {
        display: none;
        /* se quiser mostrar um banner, troque para display:flex */
    }

    .form-title {
        font-size: 1.35rem;
    }

    .row-txt h1 {
        font-size: 1.45rem;
    }

    .row-txt p {
        font-size: 0.9rem;
    }
}

/* 3) TABLET – 768px até 1023px */
@media (min-width: 768px) and (max-width: 1023px) {
    .container {
    }

    .login-section {
    }

    .hero-section {
        display: none;
    }

    .row-txt h1 {
        font-size: 1.6rem;
    }

    .row-txt p {
        font-size: 0.95rem;
    }

    .welcome-card, .hero-card {
        max-width: 100%;
    }
}

/* 4) NOTEBOOK / TELA MÉDIA – 1024px até 1199px */
@media (min-width: 1024px) and (max-width: 1199px) {
    .container {
        flex-direction: row;
    }

    .login-section {
        flex: 0 0 478px;
    }

    .hero-section {
        flex: none;
    }

    .row-txt h1 {
        font-size: 22px;
        max-width: 443px;
    }

    .row-txt p {
        font-size: 18px;
    }
}

/* 5) DESKTOP GRANDE – 1200px pra cima */
@media (min-width: 1200px) {
   
}