/* S8 Conoce a tu equipo */

.equipo {
  padding: clamp(72px, 9cqi, 128px) 0;
  overflow-x: clip;
}

.equipo__encabezado {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 760px;
  padding: 0 clamp(20px, 5.5cqi, 80px);
  margin: 0 auto;
  box-sizing: border-box;
  width: 100%;
  max-width: min(760px, 1280px);
}

.equipo__titulo {
  color: var(--ink);
  text-wrap: balance;
}

.equipo__entrada {
  font: 400 var(--fs-cuerpo)/1.5 var(--fb);
  color: var(--ink2);
  margin: 0;
}

/* ---- Carrusel ---- */

.equipo__carrusel {
  position: relative;
  margin-top: 48px;
}

.equipo__pista {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  align-items: flex-start;
  margin: 0;
  padding: 0 clamp(20px, 5.5cqi, 80px) 4px;
  /* El imán de las tarjetas cuenta desde dentro de la sangría: si no, la
     primera no puede quedarse pegada al raíl y el carrusel se niega a
     volver al principio. */
  scroll-padding-inline: clamp(20px, 5.5cqi, 80px);
  list-style: none;
}

.equipo__pista::-webkit-scrollbar {
  display: none;
}

.equipo__pista--deslizando .equipo__tarjeta {
  transition: transform 0.42s cubic-bezier(0.33, 1, 0.68, 1);
}

/* --desliz es la animación de la vuelta del carrusel: las tarjetas
   empiezan donde estaban antes de cambiar el orden y se deslizan hasta su
   sitio. En reposo vale cero y no hace nada. */
.equipo__tarjeta {
  transform: translateX(var(--desliz, 0px));
  flex: 0 0 75%;
  /* Al raíl, no al centro: las paradas del imán coinciden así con el paso
     de las flechas (una tarjeta) y con la línea de la rejilla. */
  scroll-snap-align: start;
}

.equipo__enlace {
  display: flex;
  flex-direction: column;
  gap: 20px;
  color: inherit;
}

.equipo__medio {
  position: relative;
  display: block;
  aspect-ratio: 9 / 16;
  border-radius: 12px;
  overflow: hidden;
  background: #161d38;
}

.equipo__video,
.equipo__imagen {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}


.equipo__video[data-cerca] {
  object-fit: contain;
}

.equipo__texto {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.equipo__nombre {
  font: 700 var(--fs-h3) / 1.15 var(--fd);
  letter-spacing: -0.02em;
  color: #fff;
}

.equipo__descripcion {
  font: 400 var(--fs-pequeno)/1.55 var(--fb);
  color: #b6bcc6;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.equipo__velo {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 40px;
  pointer-events: none;
  z-index: 3;
}

.equipo__velo--izquierda {
  left: 0;
  background: linear-gradient(90deg, #03081b, rgba(3, 8, 27, 0));
}

.equipo__velo--derecha {
  right: 0;
  background: linear-gradient(270deg, #03081b, rgba(3, 8, 27, 0));
}

.equipo__flecha {
  display: none;
  position: absolute;
  top: calc(37.5% - 26px);
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.35);
  background: #03081b;
  color: #fff;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 4;
}

.equipo__flecha--izquierda {
  left: clamp(16px, 3cqi, 48px);
}

.equipo__flecha--derecha {
  right: clamp(16px, 3cqi, 48px);
}

.equipo__acciones {
  display: flex;
  justify-content: center;
  margin-top: 48px;
  padding: 0 clamp(20px, 5.5cqi, 80px);
}

/* En móvil la pista va de lado a lado, sin sangría: la tarjeta mide el
   75 % de la pantalla, como en el diseño. */
@media (max-width: 767px) {
  /* El carrusel arranca en la línea del contenido, igual que el titular, y
     se sale por el borde derecho para que se note que hay más
     (CLAUDE.md · anchos variables). Antes empezaba pegado al borde y el
     velo de la izquierda se comía la primera tarjeta. */
  .equipo__pista {
    padding-left: calc(var(--rail-x) + var(--gi));
    padding-right: 0;
    scroll-padding-left: calc(var(--rail-x) + var(--gi));
    scroll-padding-right: 0;
  }
}

@media (min-width: 768px) {
  .equipo__pista {
    gap: 24px;
  }

  /* El diseño enseña tres tarjetas y media: (ancho − 4 huecos) / 3,5,
     con tope de 383 px. */
  .equipo__tarjeta {
    flex: 0 0 min(383px, calc((100vw - 96px) / 3.5));
  }

  .equipo__velo {
    width: 160px;
  }

  .equipo__flecha {
    display: flex;
  }
}