/************************Ultimos eventos****************************/
/*****************Fondo Ultimos eventos****************/
.fondo-azul {
    width: 100%;
    height: 912px;
    flex-shrink: 0;
    background: #F9F9F9;
    margin-top: -400px;
}

.ultimoseventostxt {
    color: #000;
    width: 246px;
    margin-top: -159px;
    margin-left: 273px;
    text-align: justify;
    font-family: Montserrat;
    font-size: 55px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    letter-spacing: 0.55px;
}

/************ Contenedor de los eventos ***************/
.eventosContainer {
    height: 520px;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: auto;
    margin-left: 712px;
    margin-top: -327px;
    display: flex;
    gap: 24px;
}

.eventosContainer::-webkit-scrollbar {
    height: 8pxs;
}

.scroll-container {
    display: inline-block;
}

.eventosContainer::after {
    content: "";
    display: none;
    min-width: 50vw;
}
/************* Tarjetas ultimos eventos *************/
.event-card {
    display: flex;
    width: 392px;
    height: 520px;
    flex-shrink: 0;
    border-radius: var(--Corner-Medium, 12px);
    background: rgba(94, 159, 186, 0.20);
    justify-content: center;
}

/***** Titulo de tarjeta ******/
.title-event-card {
    color: #FFF;
    font-family: Montserrat;
    font-size: 40px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    letter-spacing: 0.4px;
}

/*****Contenido de la tarjeta*****/
.text-event-card {
    color: #FFF;
    font-family: Montserrat;
    font-size: 20px;
    font-style: normal;
    text-align: justify;
    font-weight: 500;
    line-height: normal;
    letter-spacing: 0.2px;
}

/****** Contenido de la tarjetas ******/
.content-event-card {
    width: 328px;
    height: 120px;
    flex-shrink: 0;
}

#event1 {
    margin-top: 355px;
}

#event2 {
    margin-top: 296px;
}

#event3 {
    margin-top: 352px;
}

#event1-card {
    background: url("../../../photos/hci.png") lightgray -255.733px 0px / 197.619% 100% no-repeat;
}

#event2-card {
    background: url("../../../photos/chi1.png") lightgray -255.733px 0px / 197.619% 100% no-repeat;
}

#event3-card {
    background: url("../../../photos/feria1.png") lightgray -255.733px 0px / 197.619% 100% no-repeat;
}

/* Para pantallas pequeñas como teléfonos (≤ 480px) */
@media (max-width: 480px) {
  .fondo-azul {
    height: 30VH;
    margin-top: -200px;
    padding: 40px 20px;
  }

  .ultimoseventostxt {
    width: auto;
    margin: 0 auto 24px;
    font-size: 32px;
    text-align: center;
  }

  .eventosContainer {
    margin: 0 auto;
    padding: 0 16px;
    height: auto;
    flex-direction: column;
    overflow-x: hidden;
    gap: 16px;
  }

  .event-card {
    width: 100%;
    height: 400px;
  }

  .content-event-card {
    width: 100%;
    height: auto;
    padding: 16px;
  }

  .title-event-card {
    font-size: 24px;
    text-align: center;
  }

  .text-event-card {
    font-size: 16px;
  }

  #event1, #event2, #event3 {
    margin-top: 0;
  }
}

@media (min-width: 768px) and (max-width: 1024px) and (min-height: 512px) and (max-height: 1366px){
    .ultimoseventostxt {
        margin-left: 30px;
        font-size: 30px;
    }

    .eventosContainer {
        margin-left: 200px;
        gap: 12px;
    }

    .event-card{
        width: 285px;
        height: 380px;
    }

    #event1 {
        margin-top: 255px;
    }
    
    #event2 {
        margin-top: 256px;
    }
    
    #event3 {
        margin-top: 302px;
    }

    .title-event-card{
        font-size: 20px;
    }

    .content-event-card{
        width: 245px;
    }

    .eventosContainer{
        height: 388px;
    }

    .text-event-card{
        font-size: 14px;
    }



}