@font-face {
    font-family: 'MiTipografia1';
    src: url(../font/Montreal-Bold.ttf);
}
@font-face {
    font-family: 'MiTipografia2';
    src: url(../Font/Montreal-Regular.ttf);
}
@font-face {
    font-family: 'MiTipografia3';
    src: url(../font/Syne-VariableFont_wght.ttf);
}
@font-face {
    font-family: 'MiTipografia4';
    src: url(../font/PPNeueMontreal-Bold.otf);
}
@font-face {
    font-family: 'MiTipografia5';
    src: url(../font/PPNeueMontreal-Book.otf);
}
@font-face {
    font-family: 'MiTipografia6';
    src: url(../font/PPNeueMontreal-Italic.otf);
}
@font-face {
    font-family: 'MiTipografia7';
    src: url(../font/PPNeueMontreal-Medium.otf);
}
@font-face {
    font-family: 'MiTipografia8';
    src: url(../font/PPNeueMontreal-SemiBolditalic.otf);
}
@font-face {
    font-family: 'MiTipografia9';
    src: url(../font/PPNeueMontreal-Thin.otf);
}
 @font-face {
    font-family: 'Manrope';
    src: url(../font/Manrope-VariableFont_wght.ttf);
}
@font-face {
    font-family: 'Oswald';
    src: url(../font/Oswald-VariableFont_wght.ttf);
}

footer {
    display: flex;
    justify-content: center; /* Centra el contenido horizontalmente */
    width: 100%;
    align-items: center;
    position: relative;
}

.footer-solo{
    padding-top: 30px;
    background-color: black;
    z-index: 2;
}

.footer-container {
    display: flex;
    justify-content: space-between;
    font-family: 'MiTipografia5';
    color: white;
    width: 80%;    /*cambiar esto para alinear footer*/
    box-sizing: border-box;
}

.footer-part .footer2 {
    font-size: 70px;
}

.partners {
    padding-top: 10px;
    margin-left: 290px;

}

.footer-logo {
    margin-bottom: 20px;
    margin-left: -150px;
}

.social-media {
    display: flex;
    justify-content: center; /* Centra los íconos horizontalmente */
    align-items: flex-end; /* Coloca los íconos en la parte inferior del div */
}

.social-icon {
    width: 100px; /* Ajuste del tamaño de los iconos de redes sociales */
}

.l1{
    display: none;
}

.footer-links {
    padding-left: 20px;
    padding-bottom: 50px; /*cambia estp para el footer 80%*/
}

.footer-links a {
    color: white;
    text-decoration: none;
    margin-right: 5px;
}

.footer-links a:hover {
    text-decoration: underline;
}

.partner-logo {
    width: 150px; /* Ajuste del tamaño de los logos de empresas socias */
    height: 70px;
}

.footer-links a {
    color: white;
    text-decoration: none;
    margin-right: 5px;
    transition: text-shadow 0.3s ease; /* Transición para suavizar el efecto */
}

.footer-links a:hover {
    text-decoration: underline;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.7); /* Efecto de iluminación */
}


/* Estilo inicial del enlace */
.illuminate {
    color: white;
    text-decoration: none;
    position: relative;
    font-family: 'MiTipografia5';
    font-size: 80px; /* Ajusta según sea necesario */
    display: inline-block;
}

/* Estilo del enlace cuando se apunta con el cursor */
.illuminate:hover {
    background: linear-gradient(90deg, orange, rgb(251, 132, 5), red);
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent; /* Oculta el color inicial del texto */
    animation: gradientMove 5s infinite;
    background-size: 200% 200%; /* Aumenta el tamaño del fondo para permitir el movimiento */
}

/* Animación para mover el degradado */
@keyframes gradientMove {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

/************************FOOTER SOLO PARA INICIO***********************/
/* Contenedor para el video de fondo solo en el footer */
.footer-video-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
}

/* Estilo del video de fondo */
.footer-video {
    width: 100%;
    height: 100%; /* Asegura que el video llene el contenedor */
    object-fit: cover; /* Hace que el video cubra el área del contenedor sin distorsionarse */

}
.footerV {
    /* ... otros estilos del footer ... */
    position: relative; /* Necesario para posicionar el elemento pseudo */
}
  
.footer-video-container::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 50px; /* Ajusta esta altura según tu preferencia */
    background: linear-gradient(to bottom, transparent, black);
}

/* Tu CSS existente para el footer sigue igual */
.footer-form-container {
    display: flex;
    flex-wrap: wrap; /* Permite que el contenido se ajuste en pantallas pequeñas */
    align-items: center;
    width: 80%;
    margin: 0 auto;
    bottom: 10px;
    position: relative; /* Asegura que se posicione dentro del contenedor */
    z-index: 1; /* Mantiene el contenido por encima del video */
}

.form-image {
    flex: 1;
    width: 50%;
}

.form-content {
    background-color: rgba(44, 44, 44, 0.408);
    flex: 1;
    width: 50%;
    padding: 50px;
    border-radius: 50px;
}

.form-image {
    display: flex;
    justify-content: center;
    align-items: center;
}

.form-image img {
    width: 100%; /* Ajusta el tamaño de la imagen */
}

.form-content h2 {
    font-family: 'MiTipografia5';
    font-size: 50px;
    text-align: center;
    color: #eeeded;
}

.form-content p {
    font-family: 'MiTipografia5';
    font-size: 1rem;
    color: #f34a4a;
    margin-bottom: 20px;
    text-align: center;
}

.form-group {
    display: flex;
    gap: 10px;
    margin-bottom: 10px;
}

.form-group input {
    width: 100%;
    padding: 8px;
    font-size: 1rem;
    border: none;
    background: #303030;
    color: white;
    border-radius: 5px;
}

select {
    width: 100%;
    padding: 8px;
    font-size: 1rem;
    border: none;
    background: #303030;
    color: white;
    border-radius: 5px;
    margin-bottom: 15px;
}

button {
    width: 100%;
    padding: 10px;
    font-size: 1rem;
    background-color: rgb(240, 152, 0);
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s;
}

button:hover {
    background-color: #f9341f;
}


/********************************MEDIA QUERY*********************************************/
@media (max-width: 480px) {
    .footer-container {
        flex-direction: column; /* Cambia a disposición de columna */
        align-items: center; /* Centra el contenido verticalmente */
        width: 100%; /* Ajusta el ancho al 100% */
    }

    .footer-part {
        text-align: center; /* Alinea el texto al centro */
        margin-left: 0; /* Elimina el margen izquierdo */
        margin-right: 0; /* Elimina el margen derecho */
    }

    .footer2 {
        margin-top: 20px; /* Añade espacio arriba */
    }

    .footer-video{
        display: none;
    }

    .social-media {
        display: flex;
        flex-wrap: wrap;
        justify-content: center; /* Centra los íconos horizontalmente */
        gap: 10px; /* Espacio entre los íconos */
        margin-top: 20px; /* Añade espacio arriba */
    }

    .social-icon {
        width: 70px; /* Ajuste del tamaño de los íconos de redes sociales */
        height: auto; /* Altura automática según el ancho */
    }

    .footer-links {
        padding: 10px 0; /* Añade padding arriba y abajo */
        text-align: center; /* Alinea los enlaces al centro */
    }

    .partner-logo {
        width: 100px; /* Ajuste del tamaño de los logos de empresas socias */
        height: auto; /* Altura automática según el ancho */
        margin: auto; /* Añade espacio alrededor de los logos */
    }

    .illuminate {
        font-size: 30px; /* Ajuste del tamaño del texto iluminado */
    }

    .partners{
        margin-left: -0px;
        padding-block-end: 20px;
    }


    /*media solo para el footer del inicio*/

    
      .footer-form-container {
        flex-direction: column; /* Cambia de fila a columna */
        width: 100%; /* Ajusta el ancho al 100% */
        padding: 10px; /* Añade espacio interno */
      }
    
      .form-image {
        width: 100%; /* Ajusta la imagen al ancho completo */
        margin-bottom: 20px; /* Añade un margen inferior */
      }
    
      .form-content {
        width: 100%; /* Ajusta el formulario al ancho completo */
        padding: 20px; /* Reduce el padding para pantallas más pequeñas */
        border-radius: 20px; /* Ajusta el radio de los bordes */
      }
    
      .form-content h2 {
        font-size: 30px; /* Reduce el tamaño de la fuente */
      }
    
      .form-content p {
        font-size: 0.9rem; /* Reduce el tamaño de la fuente */
      }
    
      .form-group input,
      select {
        font-size: 0.9rem; /* Reduce el tamaño de la fuente de los inputs */
        padding: 6px; /* Reduce el padding */
      }
    
      button {
        font-size: 0.9rem; /* Reduce el tamaño del texto del botón */
        padding: 8px; /* Ajusta el padding */
      }
    
      button:hover {
        background-color: #f9341f; /* Asegura que el hover siga funcionando bien */
      }
}

/********************************MEDIA QUERY 900px*********************************************/
@media (min-width: 481px) and (max-width: 600px) {
    .footer-container {
        flex-direction: column; /* Cambia a disposición de columna */
        align-items: center; /* Centra el contenido verticalmente */
        width: 100%; /* Ajusta el ancho al 100% */
    }

    .footer-part {
        text-align: center; /* Alinea el texto al centro */
        margin-left: 0; /* Elimina el margen izquierdo */
        margin-right: 0; /* Elimina el margen derecho */
    }


    .footer2 {
        margin-top: 20px; /* Añade espacio arriba */
    }

    .social-media {
        display: flex;
        flex-wrap: wrap;
        justify-content: center; /* Centra los íconos horizontalmente */
        gap: 10px; /* Espacio entre los íconos */
        margin-top: 20px; /* Añade espacio arriba */
    }

    .social-icon {
        width: 100px; /* Ajuste del tamaño de los íconos de redes sociales */
        height: auto; /* Altura automática según el ancho */
    }

    .footer-links {
        padding: 10px 0; /* Añade padding arriba y abajo */
        text-align: center; /* Alinea los enlaces al centro */
        font-size: 20px;
    }

    .partner-logo {
        width: 150px; /* Ajuste del tamaño de los logos de empresas socias */
        height: auto; /* Altura automática según el ancho */
        margin: auto; /* Añade espacio alrededor de los logos */
    }

    .illuminate {
        font-size: 50px; /* Ajuste del tamaño del texto iluminado */
    }

    .partners{
        margin-left: -0px;
        padding-block-end: 20px;
    }
}