/* V2GO — Banners gráficos de servicios (pieza completa) */

.v2go-banners {
  background-color: var(--v2go-cream);
  padding-block: var(--space-16);
}

/* Banners full-width: la pieza rompe el contenedor y va de borde a borde */
.v2go-banners > .v2go-container {
  max-width: none;
  padding-inline: 0;
}

.v2go-banners__carousel {
  position: relative;
}

.v2go-banners__track {
  position: relative;
  aspect-ratio: 2500 / 583;
  overflow: hidden;
  background-color: var(--v2go-navy);
}

/* Cada banner ocupa TODO el espacio (sin columnas) */
.v2go-banner {
  position: absolute;
  inset: 0;
  display: block;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--duration-slow) var(--ease-out), visibility 0s var(--duration-slow);
}

.v2go-banner.is-active {
  opacity: 1;
  visibility: visible;
  transition: opacity var(--duration-slow) var(--ease-out), visibility 0s 0s;
}

/* La pieza final (imagen) llena todo el banner */
.v2go-banner picture {
  display: block;
  width: 100%;
  height: 100%;
}

.v2go-banner__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Placeholder mientras llega el arte */
.v2go-banner__placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  text-align: center;
  padding: var(--space-6);
}

.v2go-banner__placeholder--1 { background: linear-gradient(120deg, var(--v2go-amber-hover) 0%, var(--v2go-navy) 115%); }
.v2go-banner__placeholder--2 { background: linear-gradient(120deg, var(--v2go-navy-light) 0%, var(--v2go-navy-deep) 100%); }
.v2go-banner__placeholder--3 { background: linear-gradient(120deg, var(--v2go-navy-mid) 0%, var(--v2go-amber-hover) 135%); }

.v2go-banner__placeholder::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(255, 255, 255, 0.10) 1.5px, transparent 1.5px);
  background-size: 30px 30px;
  pointer-events: none;
}

.v2go-banner__tag {
  position: relative;
  z-index: 1;
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: clamp(var(--text-sm), 2vw, var(--text-lg));
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--v2go-white);
  border: 1px dashed rgba(255, 255, 255, 0.45);
  padding: var(--space-3) var(--space-6);
}

.v2go-banner__hint {
  position: relative;
  z-index: 1;
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.65);
}

/* Controles */
.v2go-banners__btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 4;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(255, 255, 255, 0.9);
  color: var(--v2go-navy);
  border: none;
  transition: background-color var(--duration-fast), color var(--duration-fast);
}

.v2go-banners__btn:hover {
  background-color: var(--v2go-amber);
  color: var(--v2go-navy);
}

.v2go-banners__btn--prev { left: var(--space-4); }
.v2go-banners__btn--next { right: var(--space-4); }

/* Indicadores */
.v2go-banners__dots {
  position: absolute;
  bottom: var(--space-4);
  left: 50%;
  transform: translateX(-50%);
  z-index: 4;
  display: flex;
  gap: var(--space-2);
}

.v2go-banners__dot {
  width: 28px;
  height: 4px;
  background-color: rgba(255, 255, 255, 0.45);
  border: none;
  transition: background-color var(--duration-fast);
}

.v2go-banners__dot.is-active {
  background-color: var(--v2go-amber);
}

/* ─── Responsive ───────────────────────────── */
@media (max-width: 767px) {
  /* Móvil: la pieza vertical (2250×2813 ≈ 4/5) */
  .v2go-banners__track {
    aspect-ratio: 4 / 5;
  }

  .v2go-banners__btn { width: 38px; height: 38px; }
}