/*==================================
     REPONSIVE CSS GENERAL
==================================*/


/*==================================
       SEGURIDAD GENERAL
==================================*/

html,
body{

    overflow-x:hidden;

}


/*==================================
    TIPOGRAFÍA Y ESPACIADO FLUIDO
==================================*/

.hero h2,
.hero h1{

    font-size:clamp(2.1rem, 1.1rem + 4.2vw, 4rem);

}

.titulo h2{

    font-size:clamp(1.8rem, 1.1rem + 3vw, 3rem);

}

.card h5{

    font-size:clamp(2rem, 1.2rem + 3vw, 3rem);

}

#contacto h2{

    font-size:clamp(2rem, 1.2rem + 3vw, 3rem);

}

.discord-card h3{

    font-size:clamp(1.5rem, 1rem + 2vw, 2rem);

}

pre#codigo{

    min-height:clamp(220px, 45vw, 420px);

    padding:clamp(18px, 4vw, 30px);

    font-size:clamp(.78rem, .3vw + .7rem, .95rem);

}

#sobre,
#planes{

    padding:clamp(60px, 12vw, 140px) 0;

}


/*==================================
     NAVBAR + MENÚ HAMBURGUESA
==================================*/

@media(max-width:1050px){

    nav{

        padding:0 20px;

    }

    .logo img{

        height:150px;

    }

    /* Botón hamburguesa: oculto en escritorio, visible aquí */

    .nav-toggle{

        display:flex;

        flex-direction:column;

        justify-content:center;

        align-items:center;

        gap:5px;

        width:44px;

        height:44px;

        background:none;

        border:none;

        cursor:pointer;

        z-index:1100;

    }

    .nav-toggle span{

        display:block;

        width:24px;

        height:2px;

        background:var(--texto);

        border-radius:2px;

        transition:.3s;

    }

    nav.abierto .nav-toggle span:nth-child(1){

        transform:translateY(7px) rotate(45deg);

    }

    nav.abierto .nav-toggle span:nth-child(2){

        opacity:0;

    }

    nav.abierto .nav-toggle span:nth-child(3){

        transform:translateY(-7px) rotate(-45deg);

    }

    /* El <ul> pasa de menú horizontal a panel desplegable */

    .nav-derecha ul{

        position:fixed;

        top:90px;

        left:0;

        width:100%;

        flex-direction:column;

        align-items:stretch;

        gap:0;

        background:rgba(255,255,255,.98);

        backdrop-filter:blur(16px);

        max-height:0;

        overflow:hidden;

        transition:max-height .35s ease;

        box-shadow:0 15px 30px rgba(0,0,0,.08);

        z-index:999;

    }

    nav.abierto .nav-derecha ul{

        max-height:400px;

    }

    .nav-derecha ul li{

        width:100%;

    }

    .nav-derecha ul li a{

        padding:18px 8%;

        border-bottom:1px solid rgba(0,0,0,.06);

        font-size:1.05rem;

    }

}

@media(min-width:1051px){

    /* En escritorio no existe el botón */

    .nav-toggle{

        display:none;

    }

}


/*==================================
        LAYOUT GENERAL
==================================*/

@media(max-width:1050px){

    .hero{

        grid-template-columns:1fr;

        min-height:auto;

        padding-top:130px;

        gap:40px;

        text-align:center;

    }

    .hero-texto{

        order:1;

    }

    .editor{

        order:2;

        margin:0 auto;

        width:100%;

        max-width:520px;

        transform:none;

    }

    .editor:hover{

        transform:scale(1.02);

    }

    .sobre-grid{

        grid-template-columns:1fr;

        gap:45px;

    }

    /* auto-fit */

    .cards{

        grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));

        gap:28px;

        margin-bottom:60px;

    }

    .destacada{

        transform:none;

    }

    .footer-contenido{

        grid-template-columns:1fr;

        text-align:center;

        padding:clamp(45px, 9vw, 80px) 0;

    }

    .discord-card{

        max-width:100%;

        padding:clamp(28px, 6vw, 45px);

    }

    .discord{

        padding:clamp(50px, 10vw, 90px) 6%;
    }

    .faq{

        padding:clamp(50px, 10vw, 90px) 6%;

    }

}


/*==================================
     BANDA ESPECÍFICA DE TABLET
          (768px – 1050px)
==================================*/

@media(min-width:768px) and (max-width:1050px){

    .hero{

        grid-template-columns:1fr 1fr;

        text-align:left;

        align-items:center;

    }

    .hero-texto{

        order:0;

    }

    .editor{

        order:0;

        margin:0;

        max-width:none;

    }

    .sobre-grid{

        grid-template-columns:1fr 1fr;

    }

}


/*==================================
       MÓVIL (≤650px)
==================================*/

@media(max-width:650px){

    .card{

        padding:35px 25px;

    }

    .botones{

        flex-direction:column;

        gap:14px;

    }

    .btn{

        width:100%;

        text-align:center;

    }

    .caracteristicas{

        gap:14px;

    }

    .faq-pregunta{

        padding:20px 22px;

        font-size:1rem;

    }

    .faq-item.activo .faq-respuesta{

        max-height:260px;

    }
}


/*==================================
     MÓVILES PEQUEÑOS (≤420px)
==================================*/

@media(max-width:420px){

    nav{

        padding:0 16px;

    }

    .logo img{

        height:32px;

    }

    .caracteristicas{

        grid-template-columns:1fr;

    }

    pre#codigo{

        min-height:200px;

    }

    .discord-card{

        padding:24px;

    }

    .faq-pregunta{

        padding:18px;

        font-size:.95rem;

    }

}


/*==================================
     SECCIÓN NUESTRO TRABAJO
==================================*/

@media(max-width:1050px){

    #trabajo{

        padding:105px 28px;

        min-height:0;

    }

    .process{

        grid-template-columns:1fr;

        justify-items:center;

        text-align:center;

        gap:30px;

    }

    .process__desc{

        max-width:46ch;

        margin-left:auto;

        margin-right:auto;

    }

    .process__controls{

        justify-content:center;

    }

    .step-item__btn{

        text-align:center;

        justify-content:center;

    }

}

@media(max-width:650px){

    #trabajo{

        padding:74px 20px;

    }

    .process__ring-wrap{

        max-width:290px;

    }

    .process__title{

        font-size:clamp(20px, 6vw, 24px);

    }

}

@media(max-width:420px){

    #trabajo{

        padding:56px 16px;

    }

    .process__ring-wrap{

        max-width:245px;

    }

    .ctrl-btn{

        height:40px;

        padding:0 12px;

    }

    .ctrl-btn--play{

        padding:0 16px;

        font-size:13px;

    }

}