section#speakers {
  position: relative;
  overflow: hidden; /* contiene la mano dentro de la sección */
}

.speakers-mano {
  position: absolute;
  top: 110px;
  right: 0;
  width: 110px;
  height: auto;
  pointer-events: none;
  /* estado inicial: fuera de pantalla a la derecha */
  transform: translateX(110%);
  transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
  z-index: 3;
}
.speakers-mano.is-visible {
  transform: translateX(0);
}
@media only screen and (min-width: 767px) {
  .speakers-mano {
    width: 230px;
		top: 850px;
  }
}



{# --------- SPEAKERS ----------- #}
.link-arrow {
  text-decoration: none;
  color: inherit;
  transition: font-weight 0.1s;
}

.link-arrow:hover {
  font-weight: 700;
}

.link-arrow svg {
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

.link-arrow:hover svg {
  transform: translateX(3px);
}

.gap--speaker{gap:32px 16px}
.zoom-effect{transition: transform .3s ease;}
.zoom-effect:hover { transform: scale(1.04);}
.fz-20{font-size: 20px;}
.card-6{width: 46%;}
.txt-description {font-size: 14px;}
section#speakers h2 {Width:72%;}

@media only screen and (min-width: 767px) {
.card-6{width: 23%;}
section#speakers h2 {Width:100%;}
}

@media only screen and (min-width: 1020px) {
.card-6{width: 18.5%;}
.txt-description {font-size: 16px;}
}

@media only screen and (min-width: 1200px) {
.card-6 {width: 15.5%;}
}

.speakerjs {opacity: 0; transform: translateY(20px); transition: opacity 1.5s ease, transform 1.5s ease;}
.speakerjs.visible { opacity: 1; transform: translateY(0);}

/* DESKTOP: neutraliza el CSS base de Swiper → se ve como tu grilla actual */
@media (min-width: 767px){
  .speakers-swiper.swiper{ overflow: visible; }
  .speakers-swiper .swiper-wrapper{
    flex-wrap: wrap;
    transform: none !important;
  }
  .speakers-swiper.swiper .swiper-scrollbar{ display: none; }
	
	/* Botón Ver más / Ver menos */
.load-more{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: fit-content;
}
.load-more__chevron{
  flex-shrink: 0;
  transition: transform .25s ease;
}
.load-more.is-expanded .load-more__chevron{
  transform: rotate(180deg);
}
	
	
}

/* MOBILE: carrusel grilla 2×2 + scrollbar progresivo */
@media (max-width: 766px){
  .speakers-swiper.swiper{ overflow: hidden; }
  .speakers-swiper .swiper-wrapper{
    gap: 0;                      /* el espaciado lo maneja spaceBetween */
    justify-content: flex-start; /* Swiper grid arranca desde el inicio */
  }
  .speakers-swiper.swiper .swiper-scrollbar{
    position: relative;          /* lo sube arriba del carrusel (va primero en el DOM) */
    left: auto; bottom: auto;
    width: 100%;
    height: 8px;
    margin: 0 0 20px;
    border-radius: 999px;
    background: #D9E3FC;         /* track gris claro */
  }
  .speakers-swiper .swiper-scrollbar-drag{
    border-radius: 999px;
    background: var(--color-1); /* thumb — ajústalo a tu token azul */
  }
}