body{
    font-family: sans-serif;
    font-size: 1.4rem;
    margin: 0%;
    padding: 0%;
    color: #13005A;
    background: radial-gradient(circle, #ffffff 0.5%, #c0dcfd 100%);
}
p{
 font-family: "Merriweather sans";   
}
h1{
    font-family: Inter;
    filter: drop-shadow(0px 0px 0.2px rgba(0,0,0,0.5));
}
header{
    font-size: 0.5rem;
}

nav{
    font-size: 1rem;
    margin-right: 2%;
    margin-left: 2%;
    display: grid;
    grid-template-columns: 1vh 1fr;
}
main{
    opacity: 1;
    min-height: 180vh;
}

#navButtons{
    display: flex;
    justify-content: end;
    align-items: center;
}
.navButton{
   margin-left: 1%;
   margin-right: 1%;
   text-decoration: none;
   color: #13005A;
   align-items: center;
   font-family: Inter;
}
#logo{
    display: flex;
    justify-content: start;
    text-align: end;
}
.welcome{
    text-align: center;
}
.carrucelImagen{
    display: flex;
    min-width: 50vh;
    max-width: 120vh;
    max-height: 80vh;
    margin: 1vh auto;
    position: relative;
    overflow: hidden;
    perspective: 1000px
}
.carrucel{
    margin: 0 0;
    display: flex;
    overflow-x: auto;
    scroll-snap-type: mandatory;
    scroll-behavior: smooth;
    border-radius: 4vh;
}
.carrucel img{
    flex: 0 0 100%;
    width: 100%;
    object-fit: cover;
    scroll-snap-align: center;
}
.carrucel::-webkit-scrollbar{
    display:none;
}
.nav-carrucel {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 10px;
}
.flecha {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 7vh; 
    height: 7vh;
    background-color: rgba(55, 0, 255 , 0.1); /* Azul de tu paleta, semitransparente */
    border: none;
    border-radius: 50%;
    cursor: pointer;
    z-index: 20; 
    display: flex;
    justify-content: center;
    align-items: center;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

.flecha:hover {
    background-color: rgba(55, 0, 255, 0.2); 
    transform: translateY(-50%) scale(1.1);
}

.flecha::after {
    content: '';
    width: 1.5vh;
    height: 1.5vh;
    border-top: 0.4vh solid white;
    border-right: 0.4vh solid white;
}

.flecha-izq {
    left: 2vh;
}
.flecha-izq::after {
    transform: rotate(-135deg);
    margin-left: 0.5vh; 
}

.flecha-der {
    right: 2vh;
}
.flecha-der::after {
    transform: rotate(45deg);
    margin-right: 0.5vh;
}
#mvv{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap:2vh;
    margin: 1vhv 0;
}
.hidden{
    text-align: center;
    margin: 1% 2%;
}
.hidden button{
    background-color: rgba(0,0,0,0);
    border: none;
    color: #13005A;
    font-family: inter;
    font-size: 3rem;
    font-weight: bold;
    cursor: pointer;
}
.hidden button:hover{
    scale: 1.1;
}
.hidden p{
    font-size: 1.2rem;
    padding: 0;
    opacity: 0;
}

@keyframes fade-in {
    from{
        opacity: 0;
    }
    to {
       opacity: 1;
    }
}

main{
    opacity: 0;
    animation: fade-in 0.5s ease forwards;
}

@media (max-width: 768px) {
    .inicio {
        grid-template-columns: 1fr;
        text-align: center; 
        margin-top: 5vh;
    }

    aside {
        margin-left: 0;
        text-align: center;
    }

    nav {
        grid-template-columns: 1fr;
        gap: 2vh; 
        margin-top: 2vh;
    }

    #logo {
        justify-content: center;
    }

    #navButtons {
        justify-content: center;
        flex-wrap: wrap; 
        gap: 2vh;
    }

    .navButton {
        font-size: 1.2rem;
        margin: 0 2%;
    }
    .carrucelImagen{
    display: flex;
    min-width: 50vh;
    max-width: 60vh;
    max-height: 60vh;
    margin: 1vh auto;
}
}