.hero {
   overflow: hidden;
   height: 100vh;
   position: relative;
   display: flex;
   justify-content: center;
   align-items: center;
   flex-direction: column;
   z-index: 1;
   width: 100%;
 }

 .hero h1 {
   font-size: 160px;
   width: 100%;
   margin: 0;
   padding: 0;
   box-sizing: border-box;
   /* transition: opacity 0.3s ease; */
   font-weight: 600;
   line-height: 140px;
   /* letter-spacing: -9.6px; */
   text-align: center;
   color: var(--title-color)
 }



 .hero .next-events-buttons {

   display: flex;
   width: 100%;
   position: absolute;
   bottom: 460px;
   left: 0;
   z-index: 3;
   padding: 0 40px 0 22px;
   box-sizing: border-box;
 }

 .hero .next-events {
   padding: 0;
   opacity: 0;
   z-index: 2;
   text-align: left;
   position: relative;
   transition: opacity 0.3s ease;
   width: 100%;
 }

 /* .word {
      opacity: 0;
      display: inline-block;
      transform: translateY(100%);
      transition: transform 0.6s ease, opacity 0.6s ease;
    }

    .word.show {
      opacity: 1;
      transform: translateY(0);
      color: white;
    } */

 .animated-title {
   /* opacity: 1; */
   /* transform: translate(-50%, -50%); */
   /* animation: fadeSlideUp 2s ease forwards; */
   /* animation-delay: 0.3s; */
   text-align: center;
   margin: 0;
   /* position: fixed;
        top: 50%;
        left: 50%; */
   /* transition: top 0.3s ease, transform 0.3s ease; */
   width: 100%;
   box-sizing: border-box;
 }

 @keyframes fadeSlideUp {
   to {
     opacity: 1;
     transform: translate(-50%, -50%);
   }
 }

 .hero .text {
   width: 100%;
   padding: 0 50px;
 }

 .hero p {
   z-index: 2;
 }

 #carouselEventsHome {
   z-index: 1;
   opacity: 0;
   /* transform: translateY(100vh); */
   transition: opacity 0.8s ease, transform 0.8s ease;
   position: absolute;
   bottom: 0px;
   display: flex;
   justify-content: center;
   align-items: center;
   width: 100%;
   max-width: 1200px;
 }

 #carouselEventsHome.disabled {
   /**
   pointer-events: none;
   **/
 }

 #carouselEventsHome.disabled .embla__viewport {
   /**
   pointer-events: none;
   touch-action: none;
   **/
   /* bloquea gestos en móviles */
   /**
   user-select: none;
   **/
   /* opcional: evita selección de texto accidental */
 }


 /* Estado activo del carrusel (5 slides, 90% ancho) */
 #carouselEventsHome:not(.disabled) {
   /*width: 90%;*/
   /*max-width: none;*/
 }

 #carouselEventsHome .embla__viewport {
   /*overflow: hidden;*/
   /*width: 100%;*/
   /*max-width: 100%;*/
   /* Asegurar que no se desborde */
 }

 #carouselEventsHome .embla__container {
   display: flex;
   gap: 1rem;
   will-change: transform;
   /*width: 100%;*/
   height: 460px;
 }

 #carouselEventsHome .embla__slide {
   flex: 0 0 25%;
   position: relative;
   /*transform: scale(0.6);*/
   transition: opacity 0.5s ease, transform 0.8s ease;
   display: flex;
   justify-content: center;
   align-items: center;
   max-width: calc((100% - 3rem) / 4);
 }

 #carouselEventsHome .embla__slide img {
   width: auto;
   max-width: 100%;
   height: 100%;
   display: block;
   max-width: 100%;
   object-fit: contain;
   transition: transform 0.8s ease;
   border-radius: 4px;
 }



 .next-events-buttons .embla__buttons {
   position: relative;
   display: flex;
   z-index: 100;
   opacity: 0;
   transition: opacity 0.8s ease;
 }






 .embla__button:disabled {
   opacity: 0.5;
   cursor: not-allowed;
 }


 /* Contenedor de los textos */
 .event-text {

   opacity: 0;
   transition: opacity 0.5s ease;
   scale: 0;
 }


 #carouselEventsHome.disabled .link-evento {
  /** 
  pointer-events: auto;
  **/
 }

 #carouselEventsHome .image-container {
  height: 100%;
}
#carouselEventsHome .image-container img {
  height: 100%;
  object-fit: cover;
}

 @media (max-width: 1200px) {
   .hero h1 {
     font-size: 125px;
     line-height: 1;
   }
 }


 @media (max-width: 1024px) {


   .hero h1 {
     font-size: 110px;
     line-height: 1;
   }


   .hero .next-events-buttons {
     padding: 0 22px;
     bottom: 300px;
   }

   #carouselEventsHome .embla__container {
     gap: 0.5rem;
     height: auto;
   }

   #carouselEventsHome .embla__slide {
     flex: 0 0 30%;
     max-width: calc((100% - 3rem) * 0.30);
     height: auto;
     min-height: 300px;
     padding-left: 10px;
     /* 4 diapositivas inicialmente */
     /*
        flex: 0 0 75%;
        max-width: 75%;
        display: flex;
        justify-content: center;
        align-items: center;
        */
   }

   #carouselEventsHome:not(.disabled) .embla__slide {
     /* 1 diapositiva cuando está activo */
     /*
        flex: 0 0 75%;
        max-width: 75%;
        justify-content: center;
        align-items: center;
        */
   }
 }

 /* Ajustes para versión móvil */
 @media (max-width: 767px) {

  .hero .next-events-buttons {
    bottom: 320px;
  }

   .next-events-buttons .embla__buttons {
     margin-right: 0;
   }

   .hero h1 {
     font-size: 5vh;
     line-height: 1.2;
   }



   #carouselEventsHome .embla__slide {
     flex: 0 0 75%;
     max-width: 198px/*calc((100% - 3rem) * 0.75)*/;
     height: auto;
     min-height: 300px;
     /*
        position: relative;
        max-width: 75%;
        display: flex;
        justify-content: center;
        align-items: center;
        */
   }

   #carouselEventsHome:not(.disabled) .embla__slide {
     /*
        flex: 0 0 75%;
        max-width: 75%;
        display: flex;
        justify-content: center;
        align-items: center;
        height: auto;
        min-height: 300px;
        */
   }

   /*
      #carouselEventsHome:not(.disabled) .embla__slide .link-evento {
        width: auto;
      }

      #carouselEventsHome .embla__container {
        gap: 0.5rem;
        height: auto;
        min-height: 300px;
      }

      #carouselEventsHome .image-container {
        width: auto;
        max-width: 100%;
        height: auto;
        display: inline-block;
        position: relative;
        text-align: center;
      }

      #carouselEventsHome .embla__slide img {
        width: 100%;
        max-width: 100%;
        height: auto;
        min-height: 300px;
        object-fit: cover;
        border-radius: 4px;
        display: block;
        margin: 0 auto;
      }
    */
 }