/* Reset */
html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    padding: 0;
    font-family: "Lato", sans-serif;
    font-weight: 300, !important;
    position: relative;
    background-color: #ffffff; 
    
}
    /* Header y navegación */

    .header-visible {
        transform: translateY(-100px);
        transition: ease-in;
        transition-duration: 300ms;
    }
    
    nav {
        background-color: #f7f7f7; /* Fondo semitransparente */
        position: fixed;
        height: 10vh;
        width: 100%;
        z-index: 10;
        transition: ease-in-out;
        transition-duration: 200ms;
        padding: 0;
        display: flex; /* Usamos flexbox para alinear elementos */
        align-items: center; /* Centrar verticalmente */
        justify-content: center /* Espacio entre los elementos del nav */
    }
    
    /* Elementos barra navegación */
    
    #logo_superior {
        position: absolute; /* Cambiado a absolute */
        left: 3%; /* Ajusta la posición según sea necesario */
        top: 50%; /* Centrado verticalmente */
        transform: translateY(-50%); /* Ajusta la posición verticalmente */
        width: auto; /* Ajusta según el tamaño deseado */
        height: 40px; /* Ajusta la altura del logo */
        cursor: pointer;
    }

    #sdc-logo {
        display: none;
    }
    
    nav ul.global-dropdown {
        list-style: none;
        display: flex; /* Usar flexbox para distribuir los elementos de manera uniforme */
        justify-content: space-between; /* Espacio equidistante entre elementos */
        width: 35%; /* Ajusta automáticamente según el contenido */
        text-align: center;
        align-items: center;
    }
    
    nav ul.global-dropdown li {
        text-align: center; /* Centra el texto dentro de cada elemento */

    }

    nav ul.global-dropdown li:nth-child(1) {
        padding-left: 0%;
    }

    nav ul.global-dropdown li:nth-child(2) { /* Suponiendo que el tercer elemento es el central */
        position: absolute; /* Permite que el elemento central se posicione sobre los otros */
        left: 50%; /* Mueve el elemento central al medio del contenedor */
        transform: translateX(-50%); /* Compensa su ancho para centrarlo */
    }
    
    
    /* Agrega este estilo si aún no lo tienes para centrar el texto en los enlaces */
    nav ul.global-dropdown li a {
        width: 9vw;
        text-decoration: none; /* Elimina el subrayado de los enlaces */
        color: #000000; /* Color del texto */
        font-size: 1vw; /* Tamaño del texto */
        font-family: "Inter", serif, !important;
        font-weight: 650;
        padding: 7px 13px;
        border-radius: 3px;
        text-transform: uppercase;
        display: flex; /* Asegúrate de que los enlaces se comporten como flex items */
        text-align: center;
        align-items: center;
        justify-content: center;
    }
    
    
   
    nav #inscription {
        position: absolute;
        right: 3%;
        text-decoration: none; /* Elimina el subrayado de los enlaces */
        color: #007bff; /* Color del texto */
        font-size: 1vw; /* Tamaño del texto */
        font-family: "Inter", serif, !important;
        font-weight: 650;
        padding: 4px 10px;
        border-radius: 8px;
        background-color: #ffffff00;
        border: 2px solid #007bff;
    
        display: flex;
        align-items: center; /* Centra verticalmente la selección de idiomas */
    
        text-align: center;
        transition: background-color 0.3s ease;
    }

    nav #inscription #icon{
        padding-right: 7px;
        align-items: center; /* Centra verticalmente la selección de idiomas */
    }
    nav #inscription p{
        padding-right: 3px;
        align-items: center; /* Centra verticalmente la selección de idiomas */
    }
    
    nav #inscription a, nav #inscription-mobile a {
        text-decoration: none; /* Elimina el subrayado de los enlaces */
        color: #007bff; /* Color del texto */
        font-size: 1vw; /* Tamaño del texto */
        font-family: "Inter", serif, !important;
    }

    
    nav #inscription-mobile {
        display: none;
        text-align: center;
        width: 24vw;
        text-decoration: none; /* Elimina el subrayado de los enlaces */
        font-size: 4vw; /* Tamaño del texto */
        font-family: "Inter", serif, !important;
        margin-left: 10px;
    }
    
    nav ul.global-dropdown label {
        text-decoration: none; /* Elimina el subrayado de los enlaces */
        color: #ffffff; /* Color del texto */
        font-size: 1vw; /* Tamaño del texto */
        font-family: "Inter", serif;
        font-weight: 650;
        padding: 7px 13px;
        border-radius: 3px;
        text-transform: uppercase;
        cursor: pointer;
        visibility: hidden;
    }
    
    nav ul.global-dropdown .material-symbols-outlined {
        padding: 0;
        margin: 0;
        display: flex;
    }
    
    a.active, ul.global-dropdown a:hover {
        background: #ccc;
        transition: .5s;
    }
      
    
    /* MENU DESPLEGABLE */

    
    .checkbtn {
        color:black;
        float: left;
        line-height: 80px;
        margin-left: 30px;
        cursor: pointer;
        display: none;
        position: relative;
        z-index: 15;
        user-select: none;
    }
    
    .checkbtn span {
        font-size: 22px;
        transition: transform 0.3s ease;
        display: flex;
        font-weight: 600;
    }
    
    #check:checked + .checkbtn span {
        transform: rotate(180deg); /* O cualquier otra transformación que desees */
        color: white;
    }
    
    #check {
        display: none;
    }
    
    .logo-icons-mobile-dropdown {
        position: absolute;
        bottom: 5%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
    }

    
    #social-icons-mobile-dropdown {
        display: none; /* Change to flex to apply flexbox properties */
        justify-content: center;
        align-items: center;
        gap: 10px; /* Optional: Adds space between the social media icons */
    }
    


/* MENU DESPLEGABLE */



#check {
    display: none;
}

.logo-icons-mobile-dropdown {
    position: absolute;
    bottom: 5%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}
#logo-mobile-dropdown {
    width: 200px;
    display: none; /* Make sure the logo is displayed */
    margin-bottom: 30px; /* Optional: Adds some space between the logo and icons */
}

#social-icons-mobile-dropdown {
    display: none; /* Change to flex to apply flexbox properties */
    justify-content: center;
    align-items: center;
    gap: 10px; /* Optional: Adds space between the social media icons */
}



.social-media-container {
    font-size: 22px;
    color: #ccc;
    text-decoration: none;
    margin-bottom: 15px;
}

.social-media-icon {
    margin: 0 15px;
}

.social-media-icon img {
    max-width: 30px;
    max-height: 30px;
    object-fit: cover;
}

#icon {
    visibility: visible;
  }
  
.material-symbols-outlined::before {
    content: '';
    visibility: hidden;
}

.icons {
    height: 25px;
}

/* ICONOS */

#lan-angle {
    color: #000000;
    transition: all .5s;
    font-weight: 600;
    display: flex;
}

#lan-angle-mobile {
    color: #fff;
    transition: all .5s;
    left: 0;
    margin-left: 2%;
    font-weight: 600;
}



/* OTROS */

.no-scroll {
    overflow: hidden;
}

.element-hidden {
    display: none; /* Puedes ajustar la propiedad si prefieres ocultarla de otra manera */
}


#copyright {
    margin:0;
    padding-top:20px;
    background-image: url("../imagenes/sdccopyright.png");
    background-repeat: repeat-x;
    animation: borderAnimation 20s linear infinite;
    background-size: 25%;
    box-shadow: 0px -5px 15px rgba(0, 0, 0, 0.1);
    height: 20px;
}


footer {
    background-color: #ffffff;
    padding: 0.1rem;
    color: #000000;
    text-align: center;
}


.social-media-container {
    font-size: 22px;
    color: #ccc;
    text-decoration: none;
    margin-bottom: 15px;
    text-align: center;
}

.social-media-icon {
    margin: 0 15px;

}

.social-media-icon img {
    max-width: 30px;
    max-height: 30px;
    object-fit: cover;
}   

#copytext{
    color: #909090;
    margin-bottom: 10px;
}

.divrutas img{
    height: auto;
    width: 100%;
    object-fit: fill;
    margin-top: 60px;
    margin-bottom: 30px;
}




@media (max-width: 858px) {
    
    /* Cambia la barra de navegación por un menú desplegable en móviles*/
    .checkbtn {
        display: block;
    }

    nav {
        justify-content: start;
        height: 70px;
    }

    #logo_superior {
        width: auto; /* Ajusta según el tamaño deseado */
        height: 40px; /* Ajusta la altura del logo */
        margin-left: 3%;
        cursor: pointer;
        display: flex;
        align-items: center; /* Centra verticalmente el logo */
        visibility: hidden;
    }

    #sdc-logo {
        display: flex;
        height: 25px;
        margin: 0;
        padding-left: 20px;
        justify-content: left;
        font-family: "Spectral", serif;
        font-weight: 800;
        font-stretch: expanded;
        font-style: italic;
    }

    #logo-vertical-line {
        height: 25px;
        margin-left: 20px;
        border-left: 2px solid rgba(0, 0, 0, 0.233);
        color: black;
    }


    nav ul.global-dropdown {
        position: fixed;
        width: 100vw;
        background: rgb(0, 0, 0);
        top: 0;
        bottom: 0;
        left: -100%;
        z-index: 3;
        transition: all .5s;
        text-align: left; /* Alinear texto a la izquierda */
        opacity: 0;
        visibility: hidden;
        justify-content: flex-start;
        flex-direction: column; /* Cambia a columna */
        display: flex; /* Flexbox para usar flex-direction */
        list-style: none;
        padding: 0;
        margin: 0;
        padding-top: 70px; /* Espacio arriba */
    }


    
    nav ul.global-dropdown li {
        margin: 10px 0; /* Margen vertical entre elementos */
        height: 50px; /* Altura de los li */
        width: 100%; /* Que ocupe todo el ancho */
        display: flex; /* Asegúrate que cada li se comporte como un contenedor flex */
        padding-left: 10%; /* Espaciado a la izquierda */
        text-align: left;
        justify-content: start;
    }

    nav ul.global-dropdown li:nth-child(2) {
        position: static; /* Cambia a static para que se comporte como un elemento normal en el flujo */
        left: auto; /* Resetea el valor de left */
        transform: none; /* Resetea el valor de transform */
    }

    nav ul.global-dropdown li:nth-child(1) {
        padding-left: 10%;
    }

    nav ul.global-dropdown li a {
        font-size: 16px;
        color: #fff;
        width: 100%; /* Hacer que el enlace ocupe todo el ancho */
        justify-content: start;
    }
    
    nav #inscription p {
        font-size: 3vw;
    }

    nav ul.global-dropdown label {
        visibility: visible;
        font-size: 16px;
        color: #fff;
    }
    

    #check:checked ~ul.global-dropdown{
        left: 0;
        opacity: 1;
        visibility: visible;
    }

    #logo-mobile-dropdown {
        display: block;
        
    }

    #social-icons-mobile-dropdown {
        display: block;
    }

    #copyright {
        margin:0;
        padding-top: 20px;
        background-image: url("../imagenes/sdccopyright.png");
        background-repeat: repeat-x;
        background-size: 60vw;
        height: 30px;
        animation: borderAnimation 5s linear infinite;
    }
    
    /* ------------------------------------------- */

    /* Cambia la selección de idiomas por un menú diferente en móviles*/


}


@keyframes borderAnimation {
    0% {
        background-position: 0; /* Comienza en la izquierda */
    }
    100% {
        background-position: 100%; /* Se mueve hacia la derecha */
    }
}