/* =====================================================
   RESPONSIVE.CSS
   PARTE 1/3
===================================================== */

/* ===============================
   DESKTOP MÉDIO
================================ */

@media (max-width:1200px){

    .hero h1{
        font-size:50px;
    }

    .hero p{
        font-size:19px;
    }

    .benefits h2,
    .steps h2,
    .faq h2,
    .cta h2{
        font-size:38px;
    }

}

/* ===============================
   TABLETS
================================ */

@media (max-width:992px){

    .header .container{

        height:70px;

    }

    .hero{

        padding-top:120px;

        padding-bottom:70px;

    }

    .hero-container{

        grid-template-columns:1fr;

        gap:50px;

        text-align:center;

    }

    .hero-text{

        order:2;

    }

    .hero-image{

        order:1;

        max-width:520px;

        margin:auto;

    }

    .hero h1{

        font-size:44px;

        max-width:100%;

    }

    .hero p{

        max-width:100%;

    }

    .badge{

        justify-content:center;

    }

    .hero-buttons{

        justify-content:center;

    }

    .cards{

        grid-template-columns:1fr;

        gap:25px;

    }

    .step-grid{

        grid-template-columns:1fr;

        gap:25px;

    }

    footer .container{

        flex-direction:column;

        text-align:center;

    }

}

/* ===============================
   CELULARES
================================ */

@media (max-width:768px){

    .container{

        width:92%;

    }

    .header{

        backdrop-filter:blur(10px);

    }

    .logo{

        font-size:21px;

    }

    .btn-header{

        padding:12px 20px;

        font-size:14px;

    }

    .hero{

        padding-top:110px;

        padding-bottom:60px;

    }

    .hero h1{

        font-size:36px;

        line-height:1.15;

    }

    .hero p{

        font-size:18px;

        line-height:1.7;

    }

    .benefits,
    .steps,
    .faq,
    .cta{

        padding:70px 0;

    }

    .benefits h2,
    .steps h2,
    .faq h2,
    .cta h2{

        font-size:32px;

    }

    .card{

        padding:35px;

    }

    .step{

        padding:40px 30px;

    }

    .faq-item button{

        font-size:18px;

        padding:24px;

    }

    .faq-item p{

        padding:0 24px 24px;

    }

    .btn-primary{

        width:100%;

        padding:18px;

    }

    .btn-primary.big{

        width:100%;

        padding:20px;

    }

}

/* =====================================================
   RESPONSIVE.CSS
   PARTE 2/3
===================================================== */

/* ===============================
   CELULARES (até 480px)
================================ */

@media (max-width:480px){

    html{

        font-size:16px;

    }

    .header .container{

        height:66px;

    }

    .logo{

        font-size:18px;

        letter-spacing:.5px;

    }

    .btn-header{

        padding:10px 16px;

        font-size:13px;

    }

    .hero{

        padding-top:95px;
        padding-bottom:50px;

    }

    .hero-container{

        gap:35px;

    }

    .badge{

        width:100%;
        justify-content:center;
        padding:12px 18px;
        font-size:14px;

    }

    .hero h1{

        font-size:31px;
        line-height:1.15;

    }

    .hero p{

        font-size:17px;
        line-height:1.7;
        margin-bottom:35px;

    }

    .hero-image img{

        border-radius:22px;

    }

    .btn-primary{

        width:100%;
        min-height:58px;
        font-size:18px;
        border-radius:18px;

    }

    .btn-primary.big{

        min-height:62px;
        font-size:19px;
        border-radius:18px;

    }

    .benefits,
    .steps,
    .faq,
    .cta{

        padding:60px 0;

    }

    .benefits h2,
    .steps h2,
    .faq h2,
    .cta h2{

        font-size:28px;
        margin-bottom:40px;

    }

    .cards{

        gap:18px;

    }

    .card{

        padding:28px;

        border-radius:20px;

    }

    .icon{

        font-size:42px;
        margin-bottom:18px;

    }

    .card h3{

        font-size:22px;

    }

    .card p{

        font-size:16px;

    }

    .step{

        padding:30px 25px;
        border-radius:20px;

    }

    .step span{

        width:60px;
        height:60px;
        font-size:24px;

    }

    .step h3{

        font-size:22px;

    }

    .step p{

        font-size:16px;

    }

    .faq-item{

        border-radius:18px;

    }

    .faq-item button{

        padding:22px;

        font-size:17px;

    }

    .faq-item p{

        font-size:16px;

    }

    .cta p{

        font-size:18px;

    }

    footer{

        padding:35px 0;

    }

    .footer-links{

        flex-direction:column;

        gap:14px;

    }

}

/* ===============================
   CELULARES PEQUENOS (360px)
================================ */

@media (max-width:360px){

    .hero h1{

        font-size:27px;

    }

    .hero p{

        font-size:16px;

    }

    .benefits h2,
    .steps h2,
    .faq h2,
    .cta h2{

        font-size:25px;

    }

    .card{

        padding:22px;

    }

    .step{

        padding:25px 20px;

    }

    .faq-item button{

        font-size:16px;

    }

    .btn-primary{

        font-size:17px;

    }

}

/* =====================================================
   RESPONSIVE.CSS
   PARTE 3/3
===================================================== */

/* ===============================
   CELULAR EM MODO PAISAGEM
================================ */

@media (max-width:900px) and (orientation:landscape){

    .hero{

        padding-top:100px;
        padding-bottom:60px;

    }

    .hero-container{

        grid-template-columns:1fr 1fr;
        gap:40px;
        text-align:left;

    }

    .hero-text{

        order:1;

    }

    .hero-image{

        order:2;
        max-width:420px;

    }

    .hero-buttons{

        justify-content:flex-start;

    }

    .badge{

        width:auto;

    }

}

/* ===============================
   TELAS MUITO GRANDES
================================ */

@media (min-width:1600px){

    .container{

        max-width:1400px;

    }

    .hero{

        min-height:90vh;
        display:flex;
        align-items:center;

    }

    .hero h1{

        font-size:72px;

    }

    .hero p{

        font-size:24px;
        max-width:700px;

    }

    .hero-image{

        max-width:700px;

    }

    .benefits h2,
    .steps h2,
    .faq h2,
    .cta h2{

        font-size:54px;

    }

    .cards{

        gap:40px;

    }

    .step-grid{

        gap:40px;

    }

}

/* ===============================
   TELAS 4K
================================ */

@media (min-width:2200px){

    html{

        font-size:18px;

    }

    .container{

        max-width:1700px;

    }

    .hero h1{

        font-size:84px;

    }

    .hero p{

        font-size:28px;

    }

}

/* ===============================
   TOUCH
================================ */

@media (hover:none){

    .card:hover,
    .step:hover,
    .btn-primary:hover,
    .btn-header:hover{

        transform:none;

    }

}

/* ===============================
   ACESSIBILIDADE
================================ */

@media (prefers-reduced-motion:reduce){

    *{

        animation:none !important;

        transition:none !important;

        scroll-behavior:auto !important;

    }

}

/* ===============================
   IMPRESSÃO
================================ */

@media print{

    .header,
    .btn-primary,
    .btn-header,
    .cta{

        display:none !important;

    }

    body{

        background:#fff;
        color:#000;

    }

}

/* ===============================
   FIM RESPONSIVE.CSS
================================ */