/* ==========================
   TABLETS
========================== */
@media(max-width:992px){
    section{
        padding:80px 6%;
    }
}
/* ==========================
   CELULARES
========================== */
@media(max-width:768px){
    section{
        padding:70px 5%;
    }
}

/*==============================
HEADER RESPONSIVE
==============================*/
#menuToggle{
    display:none;
}
@media(max-width:992px){
    nav{
        position:fixed;
        top:85px;
        left:-100%;
        width:260px;
        height:100vh;
        background:#181818;
        display:flex;
        flex-direction:column;
        padding:40px;
        transition:.35s;
        gap:25px;
    }
    nav.active{
        left:0;
    }
    #menuToggle{
        display:flex;
    }
    .btn-pedido{
      display:none;
    }
}

/*=====================================
HERO RESPONSIVE
=====================================*/

@media(max-width:992px){
    .hero-content{
        grid-template-columns:1fr;
        text-align:center;
    }
    .hero-buttons{
        justify-content:center;
    }
    .hero h1{
        font-size:3rem;
    }
    .hero-image{
        order:-1;
    }
}
@media(max-width:576px){
    .hero h1{
        font-size:2.3rem;
    }
    .hero-buttons{
        flex-direction:column;
    }
}

/* =========================================================
   REGISTRO RESPONSIVE
========================================================= */

@media (max-width: 950px) {
    .registro-contenedor {
        grid-template-columns: 1fr;
        max-width: 650px;
        gap: 40px;
    }
    .registro-presentacion {
        text-align: center;
    }
    .registro-presentacion > p {
        margin-left: auto;
        margin-right: auto;
    }
    .registro-beneficios {
        max-width: 500px;
        margin: auto;
        text-align: left;
    }
    .registro-presentacion h1 {
        font-size: 3rem;
    }
}
@media (max-width: 600px) {
    .registro {
        padding:
            130px 5% 60px;
    }
    .registro-presentacion {
        padding: 0;
    }
    .registro-presentacion h1 {
        font-size: 2.4rem;
    }
    .registro-formulario {
        padding: 25px 20px;
        border-radius: 22px;
    }
    .registro-form-header h2 {
        font-size: 1.7rem;
    }
    .registro-beneficio {
        align-items: flex-start;
    }
}