/* ==========================================================
   RESPONSIVE.CSS — PRODUZZA LANDING
   ÚNICO ARQUIVO RESPONSIVO
========================================================== */

html,
body,
#app{
    width:100%;
    max-width:100%;
    overflow-x:hidden;
}

*,
*::before,
*::after{
    box-sizing:border-box;
}

img,
svg,
video{
    max-width:100%;
    height:auto;
}

/* ==========================================================
   1200px
========================================================== */

@media(max-width:1200px){

    .pz-container{
        width:min(calc(100% - 64px),1180px);
    }

    .hero,
    .hero-container{
        min-height:auto;
    }

    .hero-container{
        grid-template-columns:1fr;
        padding-top:150px;
        padding-bottom:90px;
        text-align:center;
    }

    .hero-content{
        max-width:760px;
        margin:0 auto;
    }

    .hero-description,
    .hero-proof{
        margin-left:auto;
        margin-right:auto;
    }

    .hero-actions{
        justify-content:center;
    }

    .hero-media{
        position:relative;
        right:auto;
        bottom:auto;
        width:100%;
        height:auto;
        margin-top:60px;
        justify-content:center;
    }

    .hero-photo{
        width:min(560px,100%);
        height:auto;
        object-fit:contain;
        mask-image:none;
        -webkit-mask-image:none;
    }

    .hero-bg-line{
        display:none;
    }

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

    .method-flow::before{
        display:none;
    }

    .future-line{
        display:none;
    }

    .future-item{
        grid-template-columns:1fr;
        gap:24px;
        text-align:center;
    }

    .future-number{
        margin:0 auto;
    }

    .betina-grid,
    .cases-dashboard{
        grid-template-columns:1fr;
    }

    .betina-photo{
        min-height:auto;
        order:-1;
    }

    .footer-grid{
        grid-template-columns:1fr 1fr;
    }
}

/* ==========================================================
   992px
========================================================== */

@media(max-width:992px){

    .pz-container{
        width:calc(100% - 48px);
    }

    .pz-navbar{
        top:0;
    }

    .pz-navbar-content{
        grid-template-columns:1fr auto;
    }

    .pz-navbar-menu,
    .pz-navbar .pz-btn{
        display:none;
    }

    .hero-title{
        font-size:58px;
        line-height:1;
    }

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

    .problem-grid,
    .method-flow{
        grid-template-columns:1fr;
    }

    .diagnosis-box{
        padding:60px 42px;
    }

    .footer-grid{
        grid-template-columns:1fr;
        gap:50px;
    }
}

/* ==========================================================
   768px
========================================================== */

@media(max-width:768px){

    .pz-container{
        width:calc(100% - 32px);
    }

    .hero-container{
        padding-top:120px;
        padding-bottom:70px;
    }

    .hero-title{
        font-size:42px;
        line-height:1.02;
        letter-spacing:-1.5px;
    }

    .hero-description{
        font-size:17px;
        line-height:1.7;
    }

    .hero-actions{
        display:flex;
    }

    .hero-actions .pz-btn{
        width:100%;
        justify-content:center;
    }

    .hero-proof{
        flex-direction:column;
        gap:10px;
        text-align:center;
    }

    .hero-photo{
        width:min(390px,100%);
    }

    .problem,
    .future,
    .method,
    .betina,
    .cases,
    .diagnosis,
    .manifest{
        padding-top:90px;
        padding-bottom:90px;
    }

    .problem-header,
    .future-header,
    .method-header,
    .cases-header{
        margin-bottom:52px;
    }

    .problem-title,
    .future-title,
    .method-title,
    .betina-title,
    .cases-title,
    .diagnosis-title,
    .manifest h2{
        font-size:38px;
        line-height:1.05;
        letter-spacing:-1px;
    }

    .problem-text,
    .future-description,
    .method-description,
    .betina-text,
    .cases-description,
    .diagnosis-description,
    .manifest p{
        font-size:16px;
        line-height:1.7;
    }

    .problem-card,
    .method-step,
    .case-metrics article{
        padding:28px;
        border-radius:24px;
    }

    .problem-card h3,
    .method-step h3{
        font-size:22px;
    }

    .future-item{
        padding:34px 0;
    }

    .future-number{
        width:88px;
        height:88px;
        font-size:26px;
    }

    .future-content h3{
        font-size:25px;
    }

    .future-content p{
        font-size:15px;
        line-height:1.7;
    }

    .betina{
        padding-top:90px;
    }

    .betina-grid{
        gap:52px;
    }

    .betina-photo img{
        width:min(390px,100%);
    }

    .betina-timeline{
        padding-left:26px;
    }

    .timeline-item{
        gap:16px;
        margin-bottom:28px;
    }

    .timeline-item h4{
        font-size:20px;
    }

    .timeline-item span{
        font-size:14px;
    }

    .case-main{
        min-height:auto;
        padding:32px;
        border-radius:28px;
    }

    .case-main h3{
        font-size:28px;
    }

    .case-number{
        font-size:68px;
        margin-top:42px;
    }

    .case-main p{
        font-size:16px;
    }

    .case-metrics strong{
        font-size:34px;
    }

    .diagnosis-box{
        padding:38px 26px;
        border-radius:28px;
    }

    .diagnosis-checks{
        flex-direction:column;
        margin:42px auto;
    }

    .diagnosis-checks div,
    .diagnosis-button{
        width:100%;
        justify-content:center;
    }

    .diagnosis .pz-btn{
        max-width:100%;
        padding:18px 26px;
        font-size:1.05rem;
    }

    .footer{
        padding-top:80px;
        text-align:center;
    }

    .footer-brand{
        display:flex;
        flex-direction:column;
        align-items:center;
    }

    .footer-brand img{
        width:150px;
    }

    .footer-bottom{
        justify-content:center;
        text-align:center;
    }
}

/* ==========================================================
   480px
========================================================== */

@media(max-width:480px){

    .pz-container{
        width:calc(100% - 24px);
    }

    .hero-container{
        padding-top:105px;
    }

    .hero-title{
        font-size:35px;
    }

    .hero-description{
        font-size:15.5px;
    }

    .problem-title,
    .future-title,
    .method-title,
    .betina-title,
    .cases-title,
    .diagnosis-title,
    .manifest h2{
        font-size:32px;
    }

    .problem-card,
    .method-step,
    .case-main,
    .case-metrics article{
        padding:24px;
    }

    .hero-photo,
    .betina-photo img{
        width:min(330px,100%);
    }

    .case-number{
        font-size:58px;
    }

    .footer-background{
        font-size:90px;
        letter-spacing:-5px;
    }
}

/* ==========================================================
   HERO V2
========================================================== */

@media(max-width:1200px){

    .hero{
        min-height:auto;
    }

    .hero-container{
        grid-template-columns:1fr;
        text-align:center;
        padding-top:140px;
        padding-bottom:70px;
        min-height:auto;
    }

    .hero-content{
        max-width:760px;
        margin:auto;
    }

    .hero-description,
    .hero-proof{
        margin-left:auto;
        margin-right:auto;
    }

    .hero-actions{
        justify-content:center;
    }

    .hero-media{
        position:relative;
        width:100%;
        height:auto;
        right:auto;
        bottom:auto;
        margin-top:40px;
        justify-content:center;
    }

    .hero-photo-wrapper{
        height:auto;
    }

    .hero-photo-wrapper::before{
        width:460px;
        height:460px;
        left:50%;
        right:auto;
        bottom:0;
        transform:translateX(-50%);
    }

    .hero-photo{
        width:min(500px,100%);
        height:auto;
        max-width:100%;
        object-fit:contain;

        mask-image:none;
        -webkit-mask-image:none;
    }

}

/* ==========================================================
   CASES
========================================================== */

@media (max-width: 1100px){

    .cases-grid{
        grid-template-columns:1fr;
    }

    .case-main{
        min-height:auto;
    }

    .case-main::before{
        font-size:11rem;
        right:-15px;
        bottom:-15px;
    }

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

}


@media (max-width: 768px){

    .cases{
        padding:110px 0;
    }

    .cases-header{
        margin-bottom:50px;
    }

    .cases-title{
        font-size:2.5rem;
        line-height:1.05;
    }

    .cases-description{
        font-size:1rem;
        max-width:100%;
    }

    .cases-panel{
        padding:18px;
        border-radius:26px;
    }

    .cases-panel::after{
        left:18px;
        right:18px;
    }

    .cases-panel-header{
        padding-bottom:18px;
    }

    .cases-grid{
        gap:18px;
    }

    .case-main{
        padding:28px;
        border-radius:22px;
    }

    .case-main-label{
        margin-bottom:34px;
    }

    .case-main h3{

        font-size:2.2rem;

        line-height:.98;

        max-width:100%;

    }

    .case-main-number{

        margin-top:42px;

        font-size:5.2rem;

    }

    .case-main p{

        margin-top:14px;

        max-width:100%;

    }

    .case-main::before{

        font-size:8rem;

        right:-10px;

        bottom:-12px;

    }

    .case-main::after{

        left:28px;

        right:28px;

        bottom:28px;

    }

    .case-metrics{

        grid-template-columns:repeat(2,1fr);

        gap:18px;

    }

    .case-metrics article{

        min-height:180px;

        padding:22px;

        border-radius:22px;

    }

    .case-metrics article strong{

        font-size:2.3rem;

    }

    .case-metrics article p{

        max-width:100%;

        font-size:.92rem;

    }

    .cases-quote{

        margin-top:18px;

        padding:30px 26px;

        border-radius:22px;

    }

    .cases-quote::before{

        font-size:4rem;

        top:12px;

        left:18px;

    }

    .cases-quote p{

        font-size:1.05rem;

        line-height:1.7;

    }

}


@media (max-width: 560px){

    .cases{

        padding:90px 0;

    }

    .cases-title{

        font-size:2rem;

    }

    .cases-panel{

        padding:14px;

    }

    .cases-panel-header{

        flex-direction:column;

        align-items:flex-start;

        gap:8px;

    }

    .case-main{

        padding:22px;

    }

    .case-main-label{

        margin-bottom:24px;

    }

    .case-main h3{

        font-size:1.9rem;

    }

    .case-main-number{

        font-size:4.5rem;

        margin-top:32px;

    }

    .case-main::before{

        font-size:6rem;

        bottom:-6px;

    }

    .case-main p{

        font-size:.95rem;

    }

    .case-metrics{

        grid-template-columns:1fr;

    }

    .case-metrics article{

        min-height:150px;

        padding:20px;

    }

    .case-metrics article strong{

        font-size:2rem;

    }

    .cases-quote{

        padding:24px 20px;

    }

    .cases-quote p{

        font-size:1rem;

    }

}

/* ==========================================================
   MANIFEST + FOOTER
========================================================== */

@media (max-width:980px){

    .footer-grid{

        grid-template-columns:1fr;

        gap:50px;

    }

    .footer-brand{

        max-width:520px;

    }

}

@media (max-width:768px){

    .manifest{

        padding:110px 0 90px;

    }

    .manifest h2{

        font-size:2.5rem;

    }

    .manifest p{

        font-size:1rem;

        margin-bottom:34px;

    }

    .manifest .pz-btn{

        width:100%;

        min-width:0;

    }

    .footer{

        padding:90px 0 30px;

    }

    .footer-background{

        font-size:7rem;

        top:70px;

    }

    .footer-grid{

        gap:40px;

    }

    .footer-brand img{

        width:160px;

    }

    .footer-divider{

        margin:50px 0 28px;

    }

    .footer-bottom{

        flex-direction:column;

        text-align:center;

    }

}

@media (max-width:560px){

    .manifest h2{

        font-size:2rem;

    }

    .manifest-line{

        margin-bottom:28px;

    }

    .footer-background{

        font-size:4.5rem;

    }

    .footer-column{

        gap:14px;

    }

    .footer-column h4{

        margin-bottom:18px;

    }

}