/* ==========================================
   RESET
========================================== */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html,
body{
    width:100%;
    min-height:100%;
    overflow-x:hidden;
    font-family:Arial, Helvetica, sans-serif;
    background:#eef4f4;
}

/* ==========================================
   ESCENARIO
========================================== */

.escenario{
    position:relative;
    width:110%;
    max-width:1600px;
    margin:0 auto;
    padding-top:150px;
}

.fondo-principal{
    width:100%;
    display:block;
    height:auto;
    position:relative;
    z-index:1;
}

/* ==========================================
   PERSONAJES PORTADA
========================================== */

.personaje{
    position:absolute;
    z-index:900;
    animation:flotar 4s ease-in-out infinite;
}

.personaje img{
    width:100%;
    display:block;
}

/* SUPERIOR IZQUIERDA */

.personaje-1{
    top:40%;
    left:10%;

    width:clamp(
        60px,
        10vw,
        140px
    );
}

/* SUPERIOR DERECHA */

.personaje-2{
    top:45%;
    right:30%;

    width:clamp(
        60px,
        10vw,
        140px
    );
}

/* INFERIOR IZQUIERDA */

.personaje-3{
    bottom:15%;
    left:20%;

    width:clamp(
        70px,
        11vw,
        150px
    );
}

/* INFERIOR DERECHA */

.personaje-4{
    bottom:8%;
    right:20%;

    width:clamp(
        70px,
        11vw,
        150px
    );
}

@keyframes flotar{

    0%{
        transform:
            translateY(0px)
            rotate(0deg);
    }

    25%{
        transform:
            translateY(-6px)
            rotate(-1deg);
    }

    50%{
        transform:
            translateY(-10px)
            rotate(0deg);
    }

    75%{
        transform:
            translateY(-6px)
            rotate(1deg);
    }

    100%{
        transform:
            translateY(0px)
            rotate(0deg);
    }

}

/* ==========================================
   BOTONES
========================================== */

.btn-ruta{
    position:absolute;
    border:none;
    background:none;
    padding:0;
    cursor:pointer;
    z-index:400;
}

.btn-ruta img{
    width:clamp(80px,15vw,190px);
    display:block;
    transition:.3s ease;
}

.btn-ruta:hover img{
    transform:scale(1.08) rotate(-2deg);
}

.btn-mision{
    top:35%;
    left:32%;
}

.btn-vision{
    top:48%;
    right:10%;
}

.btn-historia{
    top:73%;
    left:10%;
}

/* ==========================================
   OVERLAY
========================================== */

#overlay{
    display:none;

    position:fixed;
    inset:0;

    background:transparent;

    z-index:9999;
}

/* ==========================================
   MODAL
========================================== */

.modal-box{

    display:none;

    position:fixed;

    top:380px;

    left:50%;

    width:min(1200px,100vw);

    transform:translateX(-50%);

    z-index:1100;
}

.modal-box > img{
    width:100%;
    display:block;
}

/* ==========================================
   CONTENIDO DEL MODAL
========================================== */

.contenido-modal{

    position:absolute;

    top:10%;

    left:24%;

    right:28%;

    bottom:18%;

    display:flex;

    flex-direction:column;

    overflow:hidden;
}


/* AUDIO */

.contenido-modal audio{

    width:100%;

    display:block;

    margin:
        0 auto
        30px auto;

    transform:scale(.90);

    transform-origin:center top;
    
}

/* TEXTO */

.contenido-texto{

    flex:1;

    overflow-y:auto;

    padding:10px 15px;

    width:100%;
}

.contenido-texto h2{

    text-align:center;

    color:#126f62;

    margin-top:0;

    font-size:22px;

    margin-bottom:15px;
}

.contenido-texto p{

    font-size:15px;

    line-height:1.9;

    color:#2f2f2f;

    

}


/* ==========================================
   SCROLL
========================================== */

.contenido-texto::-webkit-scrollbar{
    width:8px;
}

.contenido-texto::-webkit-scrollbar-thumb{
    background:#63b39c;
    border-radius:12px;
}

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

@media (max-width:1024px){

    /* RECUADRO COMPLETO */

    .modal-box{

        position:fixed;

        top:280px;

        left:50%;

        width:60vw;

        max-width:540px;

        transform:translateX(-50%);

        z-index:1100;
    }

    /* ÁREA ÚTIL DEL PNG */

    .contenido-modal{

        top:12%;

        left:23%;

        right:23%;

        bottom:28%;
    }

    /* AUDIO */

    .contenido-modal audio{

        width:75%;

        display:block;

        margin:-15px auto 8px auto;
    }

    /* TEXTO */

    .contenido-texto{

        padding:4px 6px;
    }

    .contenido-texto p{

        font-size:11px;

        line-height:1.25;

        margin-bottom:5px;
    }

    /* MENÚ */

    .menu-interno{

        height:140px;
    }

    .pasto-frontal{

        height:45%;

        bottom:45%;

        width:200%;

        object-fit:cover;

        max-height:200%;
    }

    .menu-opciones img{

        width:30px;
    }

}

/* ==========================================
   MOVIL
========================================== */



@media (max-width:760px){

    /* ==========================================
       MODAL
    ========================================== */

    .modal-box{

        position:fixed;

        top:200px;

        left:50%;

        width:100vw;

        max-width:1200px;

        transform:translateX(-50%);

        z-index:2500;
    }

    /* ==========================================
       ÁREA INTERNA DEL RECUADRO
    ========================================== */

    .contenido-modal{

        top:10%;

        left:23%;

        right:23%;

        bottom:1%;
    }

    /* ==========================================
       AUDIO
    ========================================== */

    .contenido-modal audio{

        width:90%;

        display:block;

        margin:-5px auto 8px auto;
    }

    /* ==========================================
       TEXTO
    ========================================== */

    .contenido-texto{

        padding:4px 6px;
    }

    .contenido-texto p{

        font-size:11px;

        line-height:1.5;

        margin-bottom:5px;
    }

    /* ==========================================
       MENÚ
    ========================================== */

    .menu-interno{

        height:180px;

        overflow:visible;
    }

    .pasto-frontal{

        position:absolute;

        bottom:-10px;

        left:0;

        width:100%;

        height:auto;

        max-height:90px;

        object-fit:cover;

        z-index:6;
    }

    .menu-opciones{

        top:0;
    }

    .menu-opciones img{

        width:120px;
    }

    /* ==========================================
       FONDO PRINCIPAL
    ========================================== */

    .escenario{

        padding-top:80px;
    }

    .fondo-principal{

        width:100%;

        height:auto;

        display:block;
    }
}


/* ==========================================
   MOVIL PEQUEÑO
========================================== */

@media (max-width:480px){


    /* ==========================================
       MODAL
    ========================================== */

    .modal-box{

        position:fixed;

        top:30%;

        left:50%;

        width:90vw;

        max-width:2000px;

        transform:translateX(-50%);

        z-index:3000;
    }

    /* ==========================================
       ÁREA INTERNA DEL RECUADRO
    ========================================== */

    .contenido-modal{

        top:20%;

        left:25%;

        right:25%;

        bottom:24%;
    }

    /* ==========================================
       AUDIO
    ========================================== */

    .contenido-modal audio{

        width:50%;

        display:block;

        margin:-10px auto 8px auto;
    }

    /* ==========================================
       TEXTO
    ========================================== */

    .contenido-texto{

        padding:4px 6px;
    }

    .contenido-texto p{

        font-size:8px;

        line-height:1.5;

        margin-bottom:5px;
    }

    /* ==========================================
       MENÚ
    ========================================== */

    .menu-interno{

        height:180px;

        overflow:visible;
    }    

    .pasto-frontal{

        position:absolute;

        bottom:-10px;

        left:0;

        width:100%;

        height:auto;

        max-height:90px;

        object-fit:cover;

        z-index:6;
    }

    .menu-opciones{

        top:0;
    }

    .menu-opciones img{

        width:120px;
    }

    /* ==========================================
       FONDO PRINCIPAL
    ========================================== */

    .escenario{

        padding-top:80px;
    }

    .fondo-principal{

        width:100%;

        height:auto;

        display:block;
    }
}

/* ==========================================
   MENÚ INTERNO
========================================== */

.menu-interno{

    display:none;

    position:fixed;

    top:0;

    left:50%;

    transform:translateX(-50%);

    width:100%;

    max-width:1650px;

    height:175px;

    z-index:20000;

    overflow:hidden;
}


/* ==========================================
   LETREROS
========================================== */

.menu-opciones{

    position:absolute;

    top:-5px;

    left:0;
    right:0;

    display:flex;

    justify-content:space-evenly;

    z-index:20;
}

.menu-opciones button{

    border:none;

    background:none;

    padding:0;

    cursor:pointer;
}

.menu-opciones img{

    width:180px;

    height:auto;

    display:block;

    transition:.3s ease;
}

.menu-opciones img:hover{

    transform:
        scale(1.05)
        rotate(-2deg);
}/* ==========================================
   PASTO FRONTAL
========================================== */

.pasto-frontal{

    position:absolute;

    bottom:-40px;

    left:0;

    width:100%;

    height:auto;

    max-height:200px;

    object-fit:cover;

    z-index:6;
}


/* ==========================================
   ANIMACIÓN PASTO
========================================== */

@keyframes vientoPasto{

    0%{
        transform:translateX(0);
    }

    50%{
        transform:translateX(2px);
    }

    100%{
        transform:translateX(0);
    }
}

.pasto-frontal{

    animation:
        vientoPasto 1s ease-in-out infinite;
}

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

@media (max-width:768px){

    .menu-interno{

        height:95px;
    }    

    .menu-opciones{

        top:4px;
    }

    .menu-opciones img{

        width:90px;
    }

    .pasto-frontal{

        height:90px;

        bottom:4px;
    }
}