* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Arial, Helvetica, sans-serif;
}

.nav-container {
    width: 100%;
    display: flex;
    align-items: center;
    padding: 10px 0;
}

.logos {
    width: 60%;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 15px; /* Espacio entre las imágenes */
}

.inudilogo img,
.ecoslogo img {
    width: 80px;  /* Ajusta el tamaño de las imágenes */
    height: auto;
}

.divider {
    width: 1px;
    height: 50px; /* Altura del separador */
    background-color: #b1b1b1; /* Color del borde plomo */
}


/*-----------------------------*/
/*--------IMAGEN BANER START-----------*/

.container-image {
    position: relative;
    width: 100%;
    overflow: hidden;
    margin-bottom: -5px;
}

.container-image img {
    width: 100%;
    height: 450px;
}

.dark-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Oscurecido */
    z-index: 1;
}

.centered-image {
    position: absolute;
    top: 30%;
    left: 50%;
    transform: translate(-50%, -50%); /* Centrado */
    z-index: 2;
}

.center-image {
    width: 300px !important; /* Ajusta el tamaño de la imagen central */
    height: auto;
}

@media (max-width: 768px) {
    .container-image img {
        height: 300px;
    }
    .center-image {
        width: 100px; /* Tamaño reducido para pantallas más pequeñas */
    }
}

@media (max-width: 500px) {
    .container-image img {
        height: 220px;
    }
    .center-image {
        width: 80px; /* Tamaño más pequeño para pantallas móviles */
    }
}




/*-----------------------------*/
.barra-inscri{
    margin-top: 0px;
    text-align: center;
    margin: 0;
    width: 100%;
    background-color: #087588;
    padding: 24px;
}
.barra-inscri:hover{
    background: linear-gradient(90deg, #0b8ea5, #022a31);

}

.barra-inscri a{
    text-decoration: none;
    font-weight: 700;
    color: white;
}


/*-----------------------------*/
/*-----------------------------*/
.presentacion-convocatoria-container{
    width: 60%;
    margin: 0 auto;
}
.presentacion-convocatoria{
    margin: 0 auto;
    padding: 30px;
    border: 1px #1498af solid;
    border-radius: 5px;
    margin: 20px;
    box-shadow: 0px 4px 10px rgba(9, 92, 107, 0.3);
    position: relative;
}
.presentacion-convocatoria p {
    font-size: 20px;
    color: #666;
    text-align: justify;
    font-style: oblique 10deg; /* Inclinación ligera */
    transition: transform 0.9s ease;
}
.presentacion-convocatoria p:hover {
    transform: scale(1.03); /* Agranda un 5% solo el texto */
}
.presentacion-convocatoria::before {
    content: '';
    position: absolute;
    bottom: 0; /* Posicionado en la parte inferior */
    left: 0;
    width: 0; /* Inicialmente la línea está oculta */
    height: 4px; /* Grosor de la línea */
    background: linear-gradient(to right, #12b2ce, #043e47); /* Degradado con dos colores */
    transition: width 0.6s ease; /* Animación de expansión */
}

/* Al pasar el cursor por el cuadro, la línea se expande */
.presentacion-convocatoria:hover::before {
    width: 100%; /* La línea se extiende al 100% de ancho */
}

@media (max-width: 1110px) {
    .presentacion-convocatoria-container{
        width: 85%;
    }

}
@media (max-width: 768px) {
    .presentacion-convocatoria-container{
        width: 95%;
    }
    .presentacion-convocatoria p {
        font-size: 18px;

    }


}
@media (max-width: 500px) {
    .presentacion-convocatoria-container{
        width: 100%;
    }
    .presentacion-convocatoria p {
        font-size: 15px;

    }

}
/*-----------------------------*/
/*-----------------------------*/



/*--------------BANNER START---------------*/
.banner-container {
    background-color: #0d1a2e; /* Dark background */
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 40px 0;
  }
  
  .banner-content {
    text-align: center;
    color: #f0e4d0; /* Text color similar to gold */
    font-family: 'Arial', sans-serif;
  }
  
  .banner-images {
    display: flex;
    justify-content: center;
    margin-bottom: 10px;
  }
  
  .banner-image {
    max-width: 1200px;
  }
  
  .banner-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
  }
  
  .banner-image img:hover {
    transform: scale(1.1); /* Slight zoom on hover */
  }
  
  .banner-text{
    max-width: 1100px;
    margin: 0 auto;
  }
  .banner-text h2 {
    font-size: 38px;
    color: #e7c582; /* Gold-like color for text */
  }
  .banner-text span {
    font-weight: 900;
  }
  
  @media (max-width: 768px) {
    .banner-images {
      flex-wrap: wrap;
      gap: 5px;
    }
    .banner-image {
        max-width: 1200px;
    }
    .banner-text h2 {
      font-size: 18px;
    }
  }
  
/*--------------BANNER END---------------*/

.line-container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 20px 0;
  }
  
  .line-left,
  .line-right {
    width: 100px; /* Adjust the length of the line */
    height: 3px;
    background-color: #3ac5f2; /* Blue color similar to the image */
    box-shadow: 0px 0px 15px #3ac5f2; /* Shadow effect */
  }
  
  .line-diamond {
    width: 23px;
    height: 23px;
    background-color: #3ac5f2; /* Same blue color for the diamond */
    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
    margin: 0 10px;
    box-shadow: 0px 5px 15px #3ac5f2; /* Shadow for the diamond */
  }
  
  @media (max-width: 768px) {
    .line-left,
    .line-right {
      width: 60px; /* Adjust for smaller screens */
    }
  }
  
  /* --------------------------- */
/* GANADORES */
.winner-container {
    background-color: #0d1a2e; /* Dark background */
    width: 100%;
    font-family: 'Arial', sans-serif;
  }
  
  .winner-body {
    max-width: 1200px;
    color: #f8f8f8;
    padding: 20px;
    margin: 0 auto;
  }
  
  .winner-container ul {
    list-style: none;
    padding: 0;
  }
  
  .winner-container ul li {
    font-size: 1.5rem;
    margin: 10px 0;
    display: flex;
    align-items: center;
  }
  
  .winner-container ul li span {
    color: #3ac5f2; /* Blue hash (#) */
    margin-right: 10px;
    font-weight: bold;
  }
  
  .winner-container ul li {
    transition: color 0.3s;
  }
  
  .winner-container ul li:hover {
    color: #e7c582; /* Hover effect for the list items */
  }
  
  .name-winner {
    color: #74c0da;
    transition: color 0.3s;
  }
  
  .name-winner:hover {
    color: #e7c582;
  }
  
  /* Responsivo */
  
  /* Ajustes para pantallas más pequeñas, como tablets */
  @media (max-width: 768px) {
    .winner-container ul li {
      font-size: 1.2rem;
    }
    
    .winner-body {
      padding: 15px;
    }
  }
  
  /* Ajustes para pantallas pequeñas, como móviles */
  @media (max-width: 480px) {
    .winner-container ul li {
      font-size: 1rem;
      flex-direction: column;
      align-items: flex-start;
    }
  
    .winner-container ul li span {
      margin-right: 5px;
      font-size: 1.1rem;
    }
    
    .winner-body {
      padding: 10px;
    }
  }
  
  
  /* --------------------------- */
  /* GANADORES ENDS*/
  



/* START INSTITUTOS */
.certification-partnership {
    background: linear-gradient(to bottom,#0d1a2e 0%, #09323f 50%, #0b3b4a 100%);

    padding: 2rem 0; /* Espaciado en la parte superior e inferior */
    text-align: center; /* Centra el texto y los logotipos horizontalmente */
}

.partnership-title {
    font-size: 2rem; /* Tamaño grande para el título */
    color: #d3d2d2; /* Color del texto */
    margin-bottom: 4rem; /* Espaciado debajo del título */
    font-weight: bold; /* Haciendo el título en negrita */
}

.logos-inudi {
    display: flex; /* Usa flexbox para alinear los logotipos */
    justify-content: center; /* Centra los logotipos horizontalmente */
    gap: 5rem; /* Espacio entre los logotipos */
    margin-bottom: 2rem; /* Espaciado debajo de los logotipos */
    position: relative; /* Necesario para el posicionamiento de los textos descriptivos */
}

.logo-item {
    position: relative; /* Necesario para posicionar el texto descriptivo */
}

.logoinstitute {
    width: 250px; /* Tamaño estándar para los logotipos */
    height: auto; /* Mantiene la relación de aspecto */
    transition: transform 0.3s ease-in-out; /* Animación para el zoom */
}

.logoinstitute:hover {
    transform: scale(1.1); /* Aumenta el tamaño de la imagen en un 10% */

}

.logo-description {
    font-size: 16px; /* Tamaño de fuente para la descripción */
    color: #ddd; /* Color de texto de la descripción */
    padding: 12px 8px 18px 8px;
    text-align: justify;
    height: 100%;
    line-height: 1.3;
    position: absolute; /* Posicionamiento absoluto */
    background: linear-gradient(to top, rgba(58, 86, 88, 0.8), rgba(58, 86, 88, 0.3)); /* Gradiente de color */
    border-radius: 5px; /* Bordes redondeados */
    max-width: 270px; /* Ancho máximo del contenedor de la descripción */
    opacity: 0; /* Inicialmente oculta */
    transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out; /* Animación para la visibilidad y transformación */
    display: flex; /* Usar flexbox para centrar */
    justify-content: center; /* Centra horizontalmente */
    align-items: center; /* Centra verticalmente */
    font-weight: 500;
    box-shadow: 0 4px 8px rgba(13, 81, 121, 0.664);

}

.description-left {
    left: -320px; /* Posiciona a la izquierda del logotipo */
    top: 50%;
    transform: translateY(-50%); /* Centra verticalmente */
    border-right: #0194ce solid 4px;
}

.description-right {
    right: -300px; /* Posiciona a la derecha del logotipo */
    top: 50%;
    transform: translateY(-50%); /* Centra verticalmente */
    border-left: #0194ce solid 4px;
}

.logo-item:hover .logo-description {
    opacity: 1; /* Muestra la descripción al pasar el cursor */
    transform: translateY(-50%) translateX(10px); /* Pequeño movimiento al aparecer */
}

.partnership-text {
    color: #a8a8a8;
}

.class-hipocrates{
    color: #10afd7;
}
.class-inudi{
    color: #e7c582;
}
@media (max-width: 1200px) {
    .logos {
        gap: 2rem; /* Espacio entre los logotipos */
        /* Necesario para el posicionamiento de los textos descriptivos */
    }
}
@media (max-width: 1110px) {
    .logos-inudi{
        display: flex;
        flex-direction: column;
    }
    .description-left {
        left: -65px; /* Posiciona a la izquierda del logotipo */
        top: 50%;
        transform: translateY(-50%); /* Centra verticalmente */
        border-right: #0194ce solid 4px;
    }
    
    .description-right {
        right: -55px; /* Posiciona a la derecha del logotipo */
        top: 50%;
        transform: translateY(-50%); /* Centra verticalmente */
        border-left: #0194ce solid 4px;
    }
}
@media (max-width: 1010px) {
    .description-left {
        left: -25px; /* Posiciona a la izquierda del logotipo */
    }
    
    .description-right {
        right: -15px; /* Posiciona a la derecha del logotipo */
    }
}
@media (max-width: 920px) {
    body {
        margin: 0;
        padding: 0;
    }
    .logos-inudi {
        display: flex;
        flex-direction: column; /* Alinea los logotipos en una columna */
        justify-content: center;
        align-items: center;
        gap: 1rem; /* Espacio entre los logotipos */
    }

    /* Contenedor de la sección */
    .certification-partnership {
        padding: 2rem;
        background-color: #f9f9f9; /* Fondo claro para la sección */
    }

    /* Título de la sección */
    .partnership-title {
        text-align: center;
        font-size: 21px; /* Tamaño de fuente ajustado para pantallas más pequeñas */
        margin-bottom: 1.5rem; /* Ajusta el margen inferior */
        color: #bebebe;
    }

    /* Contenedor de cada logotipo */
    .logo-item {
        position: relative; /* Necesario para el posicionamiento absoluto de la descripción */
        display: block; /* Cambia a block para que ocupe todo el ancho disponible */
        width: 100%; /* Asegura que ocupe el 100% del contenedor */
        max-width: 270px; /* Ajusta el tamaño máximo de la imagen */
        overflow: hidden; /* Oculta cualquier contenido que sobresalga del contenedor */
    }

    /* Imagen del logotipo */
    .logoinstitute {
        display: block;
        width: 100%;
        height: auto;
        transition: opacity 0.3s ease-in-out;
    }

    /* Descripción del logotipo */
    .logo-description {
        font-size: 15px; /* Tamaño de fuente ajustado para pantallas más pequeñas */
        color: #fff;
        padding: 16px; /* Ajusta el padding para que la descripción sea visible */
        text-align: center;
        line-height: 1.3;
        position: absolute; /* Posicionamiento absoluto sobre la imagen */
        left: -10px; /* Alinea la descripción en la parte izquierda del contenedor */
        right:  0; /* Alinea la descripción en la parte derecha del contenedor */
        bottom: 0; /* Alinea la descripción en la parte inferior del contenedor */
        background: rgba(0, 0, 0, 0.822); /* Fondo oscuro con transparencia */
        border-radius: 8px;
        opacity: 0; /* Inicialmente oculta */
        transition: opacity 0.3s ease-in-out;
        display: flex; /* Usar flexbox para centrar el texto */
        justify-content: center; /* Centra horizontalmente */
        align-items: center; /* Centra verticalmente */
        box-shadow: 0 4px 8px rgba(13, 81, 121, 0.664);
    }

    /* Efecto hover */
    .logo-item:hover .logo-description {
        opacity: 1; /* Muestra la descripción al pasar el cursor */
    }

    /* Efecto en la imagen al pasar el cursor */
    .logo-item:hover .logoinstitute {
        opacity: 0.7; /* Aplicar tono oscuro a la imagen */
    }
}

@media (max-width: 480px) {
    body {
        margin: 0;
        padding: 0;
    }

    /* Título de la sección */
    .partnership-title {
        text-align: center;
        font-size: 18px; /* Tamaño de fuente ajustado para pantallas más pequeñas */
        margin-bottom: 1.5rem; /* Ajusta el margen inferior */
        color: #bebebe;
    }

    /* Contenedor de cada logotipo */
    .logo-item {
        position: relative; /* Necesario para el posicionamiento absoluto de la descripción */
        display: block; /* Cambia a block para que ocupe todo el ancho disponible */
        width: 100%; /* Asegura que ocupe el 100% del contenedor */
        overflow: hidden; /* Oculta cualquier contenido que sobresalga del contenedor */
        max-width: 270px;
    }


    /* Descripción del logotipo */
    .logo-description {
        font-size: 15px; /* Tamaño de fuente ajustado para pantallas más pequeñas */
        color: #fff;
        padding: 18px; /* Ajusta el padding para que la descripción sea visible */
        text-align: center;
        line-height: 1.3;
        position: absolute; /* Posicionamiento absoluto sobre la imagen */
        left: -10px; /* Alinea la descripción en la parte izquierda del contenedor */
        right: 0; /* Alinea la descripción en la parte derecha del contenedor */
        bottom: 0px; /* Alinea la descripción en la parte inferior del contenedor */
        background: rgba(0, 0, 0, 0.822); /* Fondo oscuro con transparencia */
        border-radius: 8px;
        opacity: 0; /* Inicialmente oculta */
        transition: opacity 0.3s ease-in-out;
        display: flex; /* Usar flexbox para centrar el texto */
        justify-content: center; /* Centra horizontalmente */
        align-items: center; /* Centra verticalmente */
        box-shadow: 0 4px 8px rgba(13, 81, 121, 0.664);
    }

    /* Efecto hover */
    .logo-item:hover .logo-description {
        opacity: 1; /* Muestra la descripción al pasar el cursor */
    }

    /* Efecto en la imagen al pasar el cursor */
    .logo-item:hover .logoinstitute {
        opacity: 0.7; /* Aplicar tono oscuro a la imagen */
    }
}
/* end Institutos */

  /* ---------------------------------------------------------*/
/* START FOOTER*/
.unique-footer {
    background-color: #111C22;
    color: #ccc;
    padding: 20px 5px;
    font-size: 16px;
}

.unique-footer-container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.unique-footer-content {
    display: flex;
    justify-content: space-between;
    width: 100%;
    gap: 30px;
    padding-top: 30px;
}
.footer-columnlogo{
    width: 22%;
}
.informacion-inudi{
    color: #d3d6d6;
    text-decoration: none;
}
.custom-icon3{
    color: #10afd7;
  }
.informacion-inudi p{
    color: #10afd7;
    font-weight: 600;
    margin-bottom: 6px;
}
.informacion-inudi span{
    color: #a5a5a5;
}
.footer-logo img {
   
    width: 50px;
    margin-bottom: 10px;
}
.footer-logo{
    display: flex;
    align-items: center;
    justify-content: center;
}
.row-footerlogo{
    padding-top: 20px;
    display: flex;
    padding-bottom: 15px;
}
.row-footerlogo p{
    padding-left: 5px;
    font-size: 16px;
    margin-top: 0px;
    color: #d3d6d6;
}
.span-name{
    color: #10afd7;
    font-weight: 600;
}
.currency-selector button {
    background-color: #333;
    color: #ccc;
    border: none;
    padding: 5px 10px;
    cursor: pointer;
}

.footer-column {
    width: 22%;
}

.footer-column h3 {
    color: #d3d3d3;
    margin-bottom: 10px;
}

.footer-column ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.footer-column p{
    margin-top: -5px;
    font-size: 12px;
    color: #7c7c7c;
    margin-bottom: 20px;
}

.certificado-button{
    background-color: #0194ce;
    padding: 10px;
    border: none;
    font-size: 16px;
    color: #ddd;
    font-weight: 600;
    border-radius: 4px;
    text-decoration: none;
}
.certificado-button:hover{
    box-shadow: #186e9185 0px 2px 10px 3px;
    background-color: #169ed4b7;
}
.footer-column ul li {
    margin-bottom: 7px;
}
.column1{
    border-left: #78348b 3px solid;
}
.column2{
    border-left: #4b69c4 3px solid;
}
.column3{
    border-left: #626060 3px solid;
}
.column4{
    border-left: #c8201b 3px solid;
}
.column5{
    border-left: #2c8f48 3px solid;
}
.column6{
    border-left: #a6bb23 3px solid;
}
.column7{
    border-left: #b877f2 3px solid;
}
.column8{
    border-left: #00afef 3px solid;
}

.footer-column ul li a {
    color: #a3a3a3ce;
    text-decoration: none;
    margin-left: 5px;
    box-sizing: border-box;
    display: inline-block;
}

.footer-column ul li a:hover {
color: #075b7d ;
}

.footer-bottom {
    width: 100%;
    text-align: center;
    margin-top: 20px;
}

.footer-bottom p {
    margin: 0;
}

.social-icons {
    margin-top: 10px;
}

.social-icons a {
    display: inline-block;
    margin: 0 5px;
}

.social-icons img {
    width: 35px;
    height: 35px;
    
}
/* START facebook*/
.facebook{
    position: relative; /* Necesario para posicionar el pseudo-elemento */
    transition: transform 0.3s ease-in-out;
}

.facebook::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px; /* Altura del borde */
    background: linear-gradient(to right, #1bc7fc, #106CFF); /* Gradiente de dos colores */
    z-index: -1; /* Coloca el pseudo-elemento detrás del contenido */
    transform: scaleX(0); /* Inicialmente no se ve */
    transform-origin: bottom right; /* Efecto de expansión desde la derecha */
    transition: transform 0.3s ease-in-out; /* Transición suave */
}

.facebook:hover::before {
    transform: scaleX(1); /* Expande el borde en hover */
}

.facebook::after {
    content: "";
    position: absolute;
    bottom: -5px; /* Ajusta la posición vertical de la sombra */
    left: 0;
    width: 100%;
    height: 10px; /* Altura de la sombra */
    background: linear-gradient(to right,#1bc7fc, #106CFF); /* Gradiente de sombra */
    z-index: -2; /* Asegúrate de que esté detrás del borde */
    filter: blur(6px); /* Difumina la sombra */
    transition: opacity 0.3s ease-in-out; /* Transición suave */
    opacity: 0; /* Inicialmente no se ve */
}

.facebook:hover::after {
    opacity: 1; /* Muestra la sombra en hover */
}

.facebook:hover {
    transform: scale(1.2);
}
/* END facebook*/
/* START youtube*/
.youtube{
    position: relative; /* Necesario para posicionar el pseudo-elemento */
    transition: transform 0.3s ease-in-out;
}

.youtube::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px; /* Altura del borde */
    background: linear-gradient(to right, #FE0908, #5a0505); /* Gradiente de dos colores */
    z-index: -1; /* Coloca el pseudo-elemento detrás del contenido */
    transform: scaleX(0); /* Inicialmente no se ve */
    transform-origin: bottom right; /* Efecto de expansión desde la derecha */
    transition: transform 0.3s ease-in-out; /* Transición suave */
}

.youtube:hover::before {
    transform: scaleX(1); /* Expande el borde en hover */
}

.youtube::after {
    content: "";
    position: absolute;
    bottom: -5px; /* Ajusta la posición vertical de la sombra */
    left: 0;
    width: 100%;
    height: 10px; /* Altura de la sombra */
    background: linear-gradient(to right,#FE0908, #5a0505); /* Gradiente de sombra */
    z-index: -2; /* Asegúrate de que esté detrás del borde */
    filter: blur(6px); /* Difumina la sombra */
    transition: opacity 0.3s ease-in-out; /* Transición suave */
    opacity: 0; /* Inicialmente no se ve */
}

.youtube:hover::after {
    opacity: 1; /* Muestra la sombra en hover */
}

.youtube:hover {
    transform: scale(1.2);
}
/* end youtube*/
/* START TIKTOK*/
.tiktok {
    position: relative; /* Necesario para posicionar el pseudo-elemento */
    transition: transform 0.3s ease-in-out;
}

.tiktok::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px; /* Altura del borde */
    background: linear-gradient(to right, #00F8EE, #E61050); /* Gradiente de dos colores */
    z-index: -1; /* Coloca el pseudo-elemento detrás del contenido */
    transform: scaleX(0); /* Inicialmente no se ve */
    transform-origin: bottom right; /* Efecto de expansión desde la derecha */
    transition: transform 0.3s ease-in-out; /* Transición suave */
}

.tiktok:hover::before {
    transform: scaleX(1); /* Expande el borde en hover */
}

.tiktok::after {
    content: "";
    position: absolute;
    bottom: -5px; /* Ajusta la posición vertical de la sombra */
    left: 0;
    width: 100%;
    height: 10px; /* Altura de la sombra */
    background: linear-gradient(to right, #00F8EE,#E61050); /* Gradiente de sombra */
    z-index: -2; /* Asegúrate de que esté detrás del borde */
    filter: blur(6px); /* Difumina la sombra */
    transition: opacity 0.3s ease-in-out; /* Transición suave */
    opacity: 0; /* Inicialmente no se ve */
}

.tiktok:hover::after {
    opacity: 1; /* Muestra la sombra en hover */
}

.tiktok:hover {
    transform: scale(1.2);
}

/* END TIKTOK*/
/* START INSTAGRAM*/
.instagram{
    position: relative; /* Necesario para posicionar el pseudo-elemento */
    transition: transform 0.3s ease-in-out;
}

.instagram::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px; /* Altura del borde */
    background: linear-gradient(to right, #FFC000, #FD0AC7); /* Gradiente de dos colores */
    z-index: -1; /* Coloca el pseudo-elemento detrás del contenido */
    transform: scaleX(0); /* Inicialmente no se ve */
    transform-origin: bottom right; /* Efecto de expansión desde la derecha */
    transition: transform 0.3s ease-in-out; /* Transición suave */
}

.instagram:hover::before {
    transform: scaleX(1); /* Expande el borde en hover */
}

.instagram::after {
    content: "";
    position: absolute;
    bottom: -5px; /* Ajusta la posición vertical de la sombra */
    left: 0;
    width: 100%;
    height: 10px; /* Altura de la sombra */
    background: linear-gradient(to right, #FFC000,#FD0AC7); /* Gradiente de sombra */
    z-index: -2; /* Asegúrate de que esté detrás del borde */
    filter: blur(6px); /* Difumina la sombra */
    transition: opacity 0.3s ease-in-out; /* Transición suave */
    opacity: 0; /* Inicialmente no se ve */
}

.instagram:hover::after {
    opacity: 1; /* Muestra la sombra en hover */
}

.instagram:hover {
    transform: scale(1.2);
}
/* END INSTAGRAM*/
/* START whatsapp*/
.whatsapp{
    position: relative; /* Necesario para posicionar el pseudo-elemento */
    transition: transform 0.3s ease-in-out;
}

.whatsapp::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px; /* Altura del borde */
    background: linear-gradient(to right, #31AB22, #0a4203); /* Gradiente de dos colores */
    z-index: -1; /* Coloca el pseudo-elemento detrás del contenido */
    transform: scaleX(0); /* Inicialmente no se ve */
    transform-origin: bottom right; /* Efecto de expansión desde la derecha */
    transition: transform 0.3s ease-in-out; /* Transición suave */
}

.whatsapp:hover::before {
    transform: scaleX(1); /* Expande el borde en hover */
}

.whatsapp::after {
    content: "";
    position: absolute;
    bottom: -5px; /* Ajusta la posición vertical de la sombra */
    left: 0;
    width: 100%;
    height: 10px; /* Altura de la sombra */
    background: linear-gradient(to right,#31AB22, #0a4203); /* Gradiente de sombra */
    z-index: -2; /* Asegúrate de que esté detrás del borde */
    filter: blur(6px); /* Difumina la sombra */
    transition: opacity 0.3s ease-in-out; /* Transición suave */
    opacity: 0; /* Inicialmente no se ve */
}

.whatsapp:hover::after {
    opacity: 1; /* Muestra la sombra en hover */
}

.whatsapp:hover {
    transform: scale(1.2);
}
@media (max-width: 1110px) {
    .unique-footer-container {
        width: 98%;
    }
}
@media (max-width: 1010px) {
    body {
        margin: 0;
        padding: 0;
    }
    .unique-footer-content {
        display: grid; /* Usa grid para dos columnas */
        grid-template-columns: repeat(2, 1fr); /* Dos columnas iguales */
        gap: 20px; /* Espacio entre columnas */
    }
    .footer-columnlogo{
        width: 90%;
    }
    .footer-column {
        grid-column: span 1; /* Ocupa una columna en pantallas pequeñas */
    width: 90%;
    }

}
@media (max-width: 480px) {
    body {
        margin: 0;
        padding: 0;
    }
    .unique-footer-content {
        display: flex;
        flex-direction: column;
    }
    .footer-columnlogo{
        width: 95%;
    }
    .footer-column {
    width: 95%;
    }
    .footer-column ul li {
        margin-bottom: 7px;
    }
    .social-icons img {
        width: 28px;
        height: 28px; 
    }
    .facebook::before {
        transform: scaleX(1); 
    }
    .facebook::after {
        opacity: 1; 
    }
    .facebook {
        transform: scale(1); 
    }

    .youtube::before {
        transform: scaleX(1); 
    }
    .youtube::after {
        opacity: 1; 
    }
    .youtube {
        transform: scale(1); 
    }

    .tiktok::before {
        transform: scaleX(1); 
    }
    .tiktok::after {
        opacity: 1; 
    }
    .tiktok {
        transform: scale(1); 
    }

    .instagram::before {
        transform: scaleX(1); 
    }
    .instagram::after {
        opacity: 1; 
    }
    .instagram {
        transform: scale(1); 
    }

    .whatsapp::before {
        transform: scaleX(1); 
    }
    .whatsapp::after {
        opacity: 1; 
    }
    .whatsapp {
        transform: scale(1); 
    }
}
/* START lINE */
.linea {
    width: 90%; /* Ajusta el ancho según sea necesario */
    height: 3px; /* Este será el grosor central de la línea */
    background: linear-gradient(to right, transparent, rgb(0, 123, 194), transparent); /* Ajusta el color a azul o el que necesites */
    position: relative;
    margin: 20px ; /* Centrar horizontalmente */
    margin-top: 3rem;
}

.linea::before, .linea::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: inherit;
    top: -50%;
    left: 0;
    filter: blur(4px); /* Ajusta el nivel de difuminado para los bordes */
}

.linea::after {
    top: 50%;
}
/* END lINE */
/* START lINE2 */
.linea2 {
    width: 90%; /* Ajusta el ancho según sea necesario */
    height: 1px; /* Este será el grosor central de la línea */
    background: linear-gradient(to right, transparent, rgb(0, 123, 194), transparent); /* Ajusta el color a azul o el que necesites */
    position: relative;
    margin: 20px ; /* Centrar horizontalmente */
    margin-top: 1rem;
}

.linea2::before, .linea2::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: inherit;
    top: -50%;
    left: 0;
    filter: blur(4px); /* Ajusta el nivel de difuminado para los bordes */
}

.linea2::after {
    top: 50%;
}
/* END lINE2 */
/* END whatsapp*/
/* END FOOTER*/