body {
    font-family: Helvetica;
}

ul {
    font-size:1.8vw;
    margin: 2vw 1vw;
}

/** PORTADA **/

#index_portada {
    display: grid;
    grid-template-areas:
        'titulo logo'
        'titulo img1'
        'subtitulo img1';
    background-image: radial-gradient(100% 100% at left, #4f14ff 20%, #200966 30% ,#200966 60%, #450145 70%);
    padding: 4vw 0vw 0vw 5vw;
    grid-template-columns: 8fr 1fr;
    grid-template-rows: 1fr 1fr 2fr;
    color: white;
}

#index_portadaImagen {
    background-image:url('Tigre.webp');
    width: 18.7vw;
    height: 20vw;
    background-size:contain;
    margin-right: 5vw;
}

#index_portadaLogo {
    background-image: url(logoCollab.webp);
    width: 15vw;
    height: 4.7vw;
    background-size: contain;
    margin-bottom: 2vw;
    margin-right: 2vw;
    justify-self: right;
}

#index_portadaTitulo {
    align-content: end;
}

/** FRAME 1 **/

#index_frame1 {
    display: grid;
    grid-template-areas:
        'titulo'
        'subtitulo'
        'menu';
    background-image: radial-gradient(100% 100% at left, #4f14ff 0%,#4f14ff 60%, #855EFE 80%,#855EFE 90%, #ff96ff 100%);
    padding: 4vw 0vw 0vw 5vw;
    grid-template-columns: 1fr;
    color: white;
}


#index_frame1Menu_contenedor {
    display:grid;
    grid-template-areas:'boton1 titulo boton2'
                        'planes planes planes';
    grid-template-columns:1fr 2fr 1fr;
    justify-items:center;
    padding:3vw;
}

#index_frame1Titulo, #index_frame1Subtitulo {
    text-align:center;
}

/** FRAME 2 **/

#index_frame2 {
    display: grid;
    grid-template-areas:
        'img1 titulo'
        'img1 subtitulo';
    background-image: radial-gradient(100% 100% at right, #450145 20%, #db00be 40% ,#db00be 90%, #cf8880 100%);
    padding: 4vw 2vw 0vw 2vw;
    color: white;
}

#index_frame2Imagen {
    background-image:url('chicaSticker.webp');
    width: 32vw;
    height: 30.7vw;
    background-size:contain;
    align-self: end;
}

/** FRAME 3 **/

#index_frame3 {
    display: grid;
    grid-template-areas:
        'titulo img1'
        'subtitulo img1';
    grid-template-columns: 2fr 1fr;
    background-image: radial-gradient(100% 100% at left, #4f14ff 0%, #200966 20% ,#200966 80%, #4f14ff 100%);
    padding: 4vw 2vw 0vw 5vw;
    color: white;
}

#index_frame3Imagen {
    background-image:url('MGSticker.webp');
    width: 25vw;
    height: 31.5vw;
    background-size:contain;
    align-self: end;
}

#index_frame3Lista {
    padding: 2vw 2vw;
}

#index_frame3Titulo {
    font-size: 6vw;
}

/** PIE CUERPO **/

#index_pie {
    background-color: #4f14ff;
    padding-block: 2vw;
}

#index_pieLogo {
    background-image: url("logoCollab.webp");
    width: 30vw;
    height: 9.25vw;
    background-size: contain;
    margin-inline: auto;
    
}

/**   FLECHA   **/


#index_flecha {
    display:none;
    position: absolute;
}

/** CLASES ESTATICAS **/

.index_Beam_titulo {
    grid-area: titulo;
    font-size: 8vw;
}
.index_Beam_subtitulo {
    grid-area: subtitulo;
    font-size: 3.16vw;
}

.index_textoMenu {
    font-size: 3vw;
}

.index_textoLista {
    font-size: 2.5vw;
}
.index_frame1Menu_contenedorMenu2 {
    grid-template-areas: "plan1 plan2";
    grid-template-columns: 1fr 1fr;
}
.index_frame1Menu_contenedorMenu3 {
    grid-template-areas: "plan1 plan2 plan3";
    grid-template-columns: 1fr 1fr 1fr;
}

.index_boton {
    padding: 2vw 3vw;
    background-color: #00000060;
    border-radius: 2vw;
    margin: 1vw 2vw; 
    cursor: pointer;
    transition: 0.5s ease;
    text-align: center;
    font-size: 2vw;
    align-content:center;
    color: white;
    border: 0;
}.index_boton:hover {
    background-color: #ffffffF0;
    color: #200966;
    filter: drop-shadow(0 0 0.5vw black);
}

.index_link {
    color: #855EFE;
    text-decoration: underline;
}

/** CLASES DINAMICAS **/

.index_left {
    transform: translateX(-2vw);
}
.index_right {
    transform: translateX(-2vw);
}
.index_up {
    transform: translateY(2vw);
}
.index_down {
    transform: translateY(-2vw);
}
.index_hide {
    opacity: 0;
}
.index_t0,.index_t1,.index_t2,.index_t3, .index_tportada {
    transition: 1s ease;
}
.index_tfinal {
    transform: translate(0);
    opacity: 1;
}

.index_bfinalLeft {
    background-position-x: 0vw !important;
}
.index_bfinalRight {
    background-position-x: -31vw !important;
}
.index_bLeft {
    background-position-x: -31vw;
}
.index_bRight{ 
    background-position-x: 0vw;
}
.index_bLeft, .index_bRight, .index_bAltura { 
    background-size: 130vw 130vw; 
}
.bAltura {
    transition: 0.1s ease;
}


@media only screen and (max-width: 500px) {  
    ul {
        font-size: 4.5vw;
        margin: 2vw 0vw;
        padding: 0;
    }
    /** PORTADA  **/
    
    #index_portada {
        grid-template-areas: "titulo titulo"
                             "subtitulo subtitulo"
                             "img1 logo";
        padding: 4vw 0vw 0vw 5vw;
        grid-template-columns: 2fr 1fr;
        grid-template-rows: auto;
        row-gap: 2vw;
    }
    #index_portadaImagen {
        width: 40vw;
        height: 43vw;
    }
    #index_portadaLogo {
        width: 38vw;
        height: 12vw;
        align-self:end;
    }
    
    /** FRAME 1 **/

    #index_frame1Menu_contenedor {
        padding:2vw;
    }
    #index_frame1Imagen {
        width: 30vw;
        height: 40vw;
    }
    
    
    /** FRAME 2 **/
    
    #index_frame2 {
        grid-template-areas:
            'titulo titulo'
            'img1 subtitulo';
        grid-template-columns: 1fr 2fr;
    }
    
    #index_frame2Imagen {
        background-image: url(chicaSticker.webp);
        width: 57vw;
        height: 54.7vw;
        background-size: contain;
        align-self: end;
    }
    
    /** FRAME 3**/
    #index_frame3 {
        grid-template-areas: "titulo" 
                             "subtitulo" 
                             "img1";
        grid-template-columns: 1fr;
                             
    }
    #index_frame3Titulo {
        font-size: 14vw;
    }
    #index_frame3Imagen {
        width: 47vw;
        height: 59.3vw;
        margin-top: 2vw;
        justify-self: center;
    }
    
    /** FLECHA **/
    
    #index_flecha {
        justify-items: center;
        padding: 8vw 5vw;
        row-gap:5vw;
        font-size: 10vw;
        display: grid;
        animation-name: sombra;
        animation-duration: 2.5s;
        animation-iteration-count: infinite;
        animation-timing-function: linear;
        animation-direction: alternate;
        width: 90vw;
        color: white;
    }@keyframes sombra {
        from {
            background-color: #00000000;
            color: black;
        }
        to {
            background-color: #000000A0;
            color: white;
        }
    }
    
    #index_flechaFigura {
        width: 70vw;
        height: 70vw;
        clip-path: polygon(40% 0%, 40% 70%, 20% 70%, 50% 100%, 80% 70%, 60% 70%, 60% 0%);
        background-color:white;
        animation-name: desliza;
        animation-duration: 5s;
        animation-iteration-count: infinite;
        animation-timing-function: linear;
    }@keyframes desliza {
        0% {
            background-color: #FFFFFFFF;
            transform: translateY(-10vw);
        }
        0% {
            background-color: #855EFEFF;
            transform: translateY(0vw);
        }
        100% {
            background-color: #FFFFFFFF;
            transform: translateY(8vw);
        }
    }
    
    /** CLASES ESTTICAS **/
    
    .index_Beam_titulo {
        font-size: 15vw;
    }
    .index_Beam_subtitulo {
        font-size: 7.5vw;
    }
    .index_textoMenu {
        font-size: 6vw;
    }

    .index_textoLista {
        font-size: 5vw;
    }
    .index_boton {
        padding: 3vw 4vw;
        border-radius: 5vw;
        margin: 1.5vw 3vw; 
        font-size: 4vw;
    }

    .index_textoLista {
        font-size: 8vw;
    }
    .index_frame1Menu_contenedorMenu3 {
        grid-template-areas: "plan1 plan1 plan2 plan2"
                             ".     plan3 plan3 .";
        grid-template-columns: 2fr 1fr 1fr 2fr;
    }
}