/* Contenedor centrado */
.yt-container {
  display: flex;
  justify-content: center;
}

/* Card principal */
.yt-card {
  display: block;
  width: 70%;
  max-width: 800px;
  text-decoration: none;
}

/* Thumbnail wrapper */
.yt-thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 16/9;
  overflow: hidden;
}

/* Imagen */
.yt-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease;
}

/* Overlay oscuro */
.yt-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.3s ease;
}

/* Botón play */
.yt-play {
  width: 70px;
  height: 70px;
  background: rgba(255,255,255,0.9);
  border-radius: 50%;
  position: relative;

  /* Latido */
  animation: yt-pulse 1.8s ease-in-out infinite;

  transition: transform 0.3s ease;
}

/* Triángulo play */
.yt-play::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-40%, -50%);
  width: 0;
  height: 0;
  border-left: 18px solid black;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
}

/* Hover effects */
.yt-card:hover img {
  transform: scale(1.05);
}

.yt-card:hover .yt-overlay {
  background: rgba(0,0,0,0.4);
}

.yt-card:hover .yt-play {
  transform: scale(1);
  animation: none; /* detiene el latido en hover */
}

/* Animación de latido */
@keyframes yt-pulse {
  0% {
    transform: scale(0.8);
  }
  50% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(0.8);
  }
}