/*
 * css/banner.css
 * ============================================================
 * SLIDER DEL BANNER — SLIDES, FLECHAS, DOTS
 *
 * Elementos que estiliza:
 *   .banner         — contenedor principal (height: 340px desktop)
 *   .slider         — área de slides, posición relative
 *   .slide          — slide individual (absolute, oculto por defecto)
 *   .slide.active   — slide visible (opacity: 1)
 *   .slide-1..5     — gradiente de fondo único por slide
 *   .slide-icon     — SVG ilustrativo del servicio
 *   .slide-content  — texto del slide
 *   .slide-tag      — etiqueta superior (ej: "Our Services")
 *   .slide-title    — título grande del slide
 *   .slide-desc     — descripción corta
 *   .slide-cta      — botón de llamada a la acción
 *   .slider-dots    — contenedor de indicadores
 *   .dot            — punto indicador individual
 *   .dot.active     — dot del slide actual (más ancho, azul)
 *   .slider-prev/next — flechas de navegación
 *
 * Template: template-parts/banner.php
 * JS:       js/slider.js
 *
 * PARA CAMBIAR EL TIEMPO DE AUTOPLAY:
 *   Edita el valor 5000 (ms) en js/slider.js
 *
 * PARA AGREGAR UN SLIDE:
 *   1. Copia un bloque .slide en banner.php
 *   2. Añade .slide-6 aquí con su gradiente
 *   3. Añade un .dot en banner.php
 * ============================================================
 */

/* --- Contenedor del banner --- */
.banner {
  /* margin-top: 0 — header es sticky, no necesita compensación */
  height: 300px;
  background-color: #263778;
  position: relative;
  overflow: hidden;
  width: 100%;
}

/* --- Área de slides --- */
.slider {
  width: 100%;
  height: 100%;
  position: relative;
}

/* --- Slide base (oculto) --- */
.slide {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 0 60px;
  opacity: 0;
  transition: opacity 0.8s ease;
  pointer-events: none;
}
.slide.active {
  opacity: 1;
  pointer-events: auto;
}

/* --- Gradientes individuales por slide --- */
.slide-1 { background: linear-gradient(120deg, #0E1B52 0%, #1B4D9E 100%); }
.slide-2 { background: linear-gradient(120deg, #0E1B52 0%, #123A7C 60%, #1a5488 100%); }
.slide-3 { background: linear-gradient(120deg, #060B1E 0%, #1B2E78 100%); }
.slide-4 { background: linear-gradient(120deg, #0E1B52 0%, #0e3a6e 100%); }
.slide-5 { background: linear-gradient(120deg, #060B1E 0%, #263778 100%); }
/* .slide-6 { background: linear-gradient(120deg, #0E1B52 0%, #1a4060 100%); } */

/* --- Ícono SVG del slide --- */
.slide-icon {
  flex-shrink: 0;
  width: 110px;
  height: 110px;
  margin-right: 40px;
  opacity: 0.9;
}

/* --- Contenido del slide --- */
.slide-content { max-width: 600px; }

.slide-tag {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: #6dc4ff;
  margin-bottom: 10px;
  border-left: 3px solid #6dc4ff;
  padding-left: 10px;
}

.slide-title {
  font-size: clamp(1.4rem, 3.5vw, 2.4rem);
  font-weight: 700;
  color: #ffffff;
  line-height: 1.1;
  margin-bottom: 12px;
  letter-spacing: -0.02em;
}

.slide-desc {
  font-size: clamp(0.8rem, 1.3vw, 0.95rem);
  color: #b8cee8;
  line-height: 1.7;
  margin-bottom: 18px;
}

.slide-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #6dc4ff;
  color: #060B1E;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 10px 22px;
  border-radius: 3px;
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease;
}
.slide-cta:hover {
  background: #ffffff;
  color: #060B1E;
  text-decoration: none;
}

/* --- Dots indicadores --- */
.slider-dots {
  position: absolute;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  z-index: 10;
}
.dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255,255,255,0.3);
  cursor: pointer;
  transition: background 0.3s, width 0.3s;
  border: none;
}
.dot.active {
  background: #6dc4ff;
  width: 24px;
  border-radius: 4px;
}

/* --- Flechas prev / next --- */
.slider-prev,
.slider-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(9,16,45,0.5);
  border: 1px solid rgba(109,196,255,0.3);
  color: #fff;
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
  border-radius: 3px;
  transition: background 0.2s;
  font-size: 1rem;
}
.slider-prev { left: 16px; }
.slider-next { right: 16px; }
.slider-prev:hover,
.slider-next:hover { background: rgba(109,196,255,0.3); }