@import url('https://fonts.googleapis.com/css2?family=Shantell+Sans:ital,wght@0,300..800;1,300..800&display=swap');

/* ================ESTILOS GENERALES============ */
body {
  background-color: #000;
  font-family: 'Poppins', sans-serif;
  color: #fff;
  text-align: center; /* CENTRADO GLOBAL */
}

h2, h3 {
  font-family: "Shantell Sans", cursive;
  text-align: center; /* Títulos centrados */
}

:root {
  --gold: #d4af37;
  --gold-rose: #e7b9a6;
}

/* ===== INSTRUCTORA ========================== */
.instructora-img-wrapper {
  display: flex;
  justify-content: center; 
  align-items: center;
}

.instructora-img-wrapper img {
  border: 4px solid var(--gold);
  border-radius: 10px;
}

/* ======== CARDS EXPERIENCIA ================= */
.card-experiencia {
  border: 2px solid var(--gold);
  transition: 0.3s;
  background: #111;
  border-radius: 12px;
  text-align: center; /* Centrado del contenido */
}

.card-experiencia:hover {
  transform: scale(1.03);
  box-shadow: 0 0 20px var(--gold);
}

/* ============ MASONRY CERTIFICADOS =========== */
.masonry {
  column-count: 3;
  column-gap: 15px;
  text-align: center;
}

.masonry img {
  width: 100%;
  margin-bottom: 15px;
  border-radius: 10px;
  border: 3px solid var(--gold-rose);
  object-fit: cover;
}

@media (max-width: 768px) {
  .masonry {
    column-count: 1;
  }
}

/* ====== SLIDER GENERACIONES 100% RESPONSIVO Y CENTRADO =================== */
.timeline {
  display: flex;
  justify-content: center;  /* 🔥 CENTRADO */
  align-items: center;       /* 🔥 CENTRADO VERTICAL */
  overflow: hidden;
  width: 100%;
  padding: 20px 0;
  position: relative;
  text-align: center;
}

.timeline-slider {
  display: flex;
  justify-content: center; /* Para que el contenido quede centrado */
  align-items: center;
  animation: autoSlide 25s linear infinite;
  gap: 20px;
}

.timeline-item {
  min-width: 280px;
  max-width: 90vw;
  background: #000000;
  border: 2px solid var(--gold);
  border-radius: 15px;
  padding: 15px;
  text-align: center;
  flex-shrink: 0;
  box-shadow: 0 0 15px rgba(255, 215, 0, 0.2);
}

/* Imágenes internas justificadas */
.timeline-item img {
  width: 100%;
  height: auto;
  border-radius: 10px;
  margin: 10px 0;
  object-fit: cover;
}

/* Animación */
@keyframes autoSlide {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* Pausa con hover */
.timeline:hover .timeline-slider {
  animation-play-state: paused;
}

/* RESPONSIVE */
@media (max-width: 600px) {
  .timeline-item {
    min-width: 220px;
    padding: 12px;
  }

  .timeline-slider {
    gap: 12px;
  }
}

/* ==========================================================
   CARRUSEL VIP / BEBIDAS VIP CENTRADO
   ========================================================== */
.vip-slider {
  display: flex;
  justify-content: center; /* 🔥 Centrado horizontal */
  gap: 15px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 10px 0;
  scrollbar-width: none;
  text-align: center;
}

.vip-slider::-webkit-scrollbar {
  display: none;
}

.vip-slide {
  flex: 0 0 auto;
  width: 260px;
  scroll-snap-align: center;
  border: 2px solid var(--gold);
  border-radius: 15px;
  background: #000;
  padding: 10px;
  transition: .3s;
  text-align: center;
}

.vip-slide:hover {
  transform: scale(1.05);
  box-shadow: 0 0 15px var(--gold);
}

.vip-slide img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: 12px;
}

/* ======================================================
   FOOTER
====================================================== */
footer {
  background: var(--negro);
  color: var(--blanco);
}

footer h2 {
  color: var(--dorado);
  text-shadow: 0 0 10px var(--golden-rose);
}

footer a {
  color: var(--dorado);
  transition: 0.2s;
}

footer a:hover {
  color: var(--golden-rose);
}

footer img {
  filter: drop-shadow(0 0 6px var(--golden-rose));
}

.contacto-info h2 {
  color: var(--gold);
}