/* ===========================================================
   Proyecto : Método IPOV
   Archivo  : responsive.css
   Versión  : 0.1
   Autor    : OpenAI + Pablo Gustavo Díaz
=========================================================== */


/* ===========================================================
   XXL
=========================================================== */

@media (min-width:1400px){

    .container{

        max-width:1320px;

    }

}


/* ===========================================================
   NOTEBOOK
=========================================================== */

@media (max-width:1200px){

    #hero h1{

        font-size:3.2rem;

    }

    #hero h2{

        font-size:1.8rem;

    }

    .hero-book{

        width:430px;

    }

}


/* ===========================================================
   TABLET HORIZONTAL
=========================================================== */

@media (max-width:992px){

    /* ---------- NAVBAR ---------- */

    .navbar{

        padding:15px 0;

    }

    .navbar-brand img{

        height:46px;

    }

    .navbar-collapse{

        background:#08130F;

        margin-top:18px;

        padding:25px;

        border-radius:18px;

    }

    .nav-link{

        margin:12px 0;

    }

    .btn-header{

        width:100%;

        margin-top:15px;

    }

    /* ---------- FIX menú mobile: ancho completo, sin desborde ---------- */

    .navbar-collapse .navbar-nav{

        margin-left:0 !important;

        width:100%;

    }

    .navbar-collapse .nav-item{

        margin-left:0 !important;

        width:100%;

    }

    /* ---------- HERO ---------- */

    #hero{

        text-align:center;

        padding-top:120px;

        padding-bottom:80px;

    }

    #hero .row{

        flex-direction:column-reverse;

    }

    .hero-book{

        width:340px;

        margin-bottom:50px;

    }

    #hero h1{

        font-size:2.8rem;

    }

    #hero h2{

        font-size:1.6rem;

    }

    #hero p{

        margin:auto;

        font-size:1.05rem;

    }

    .hero-buttons{

        margin-top:35px;

    }

    .hero-buttons .btn{

        width:100%;

        margin-right:0;

    }

    /* ---------- SECCIONES ---------- */

    section{

        padding:90px 0;

    }

    .section-title h2{

        font-size:2.3rem;

    }

}


/* ===========================================================
   TABLET VERTICAL
=========================================================== */

@media (max-width:768px){

    body{

        font-size:16px;

    }

    #hero{

        min-height:auto;

    }

    .hero-tag{

        font-size:.75rem;

    }

    #hero h1{

        font-size:2.2rem;

        line-height:1.15;

    }

    #hero h2{

        font-size:1.35rem;

    }

    #hero p{

        font-size:1rem;

        line-height:1.8;

    }

    .hero-book{

        width:min(86%, 430px);

    }

    .section-title{

        margin-bottom:45px;

    }

    .section-title h2{

        font-size:2rem;

    }

    .formula{

        font-size:2.1rem;

        line-height:1.4;

        word-break:break-word;

    }

    .formula-box{

        padding:30px;

    }

    .card-ipov{

        padding:28px;

        margin-bottom:25px;

    }

}


/* ===========================================================
   MOBILE
=========================================================== */

@media (max-width:576px){

    .navbar-brand img{

        height:38px;

    }

    .container{

        padding-left:22px;

        padding-right:22px;

    }

    #hero{

        padding-top:86px;

    }

    .hero-tag{

        padding:8px 15px;

        font-size:.70rem;

        letter-spacing:1px;

    }

    #hero h1{

        font-size:1.85rem;

    }

    #hero h2{

        font-size:1.15rem;

    }

    #hero p{

        font-size:.96rem;

    }

    .hero-book{

        width:90%;

        max-width:380px;

        margin-bottom:28px;

    }

    .hero-buttons .btn{

        font-size:.95rem;

        padding:14px 22px;

    }

    section{

        padding:70px 0;

    }

    .section-title h2{

        font-size:1.7rem;

    }

    .formula{

        font-size:1.55rem;

    }

    footer{

        text-align:center;

    }

}


/* ===========================================================
   SMALL MOBILE
=========================================================== */

@media (max-width:390px){

    #hero h1{

        font-size:1.6rem;

    }

    #hero h2{

        font-size:1.05rem;

    }

    .hero-book{

        width:92%;

        max-width:340px;

    }

    .formula{

        font-size:1.35rem;

    }

}

/*==========================================================
FORMULA IPOV
==========================================================*/

@media(max-width:992px){

    .formula{

        font-size:3rem;

    }

    .formula-box{

        padding:55px 25px;

    }

}

@media(max-width:576px){

    .formula{

        font-size:2rem;

        line-height:1.4;

    }

    .formula-box{

        padding:35px 18px;

    }

}

/*==========================================================
PANEL360
==========================================================*/

@media(max-width:992px){

    .dashboard-img{

        margin-top:60px;

        max-width:520px;

    }

}

/*==========================================================
CREDENCIALES
==========================================================*/

@media(max-width:768px){

    .numero-ipov{

        font-size:3rem;

    }

}

/*==========================================================
AUTOR
==========================================================*/

@media(max-width:992px){

    .autor-foto{

        margin-bottom:45px;

        max-width:280px;

    }

}