:root {
  --navy-blue: #0A1B3A;
  --brand-red: #E31C23;
  --brand-blue: #0066CC;
}

.text-navy {
  color: var(--navy-blue);
}

.bg-navy {
  background-color: var(--navy-blue);
}

/* ===================================================
   HERO CAROUSEL CON DEGRADADO
   =================================================== */

/* Ajuste general del slide */
.carousel-item {
  min-height: 520px;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

/* Degradado de la imagen hacia el azul corporativo (--navy-blue) */
.hero-overlay {
  background: linear-gradient(90deg, rgba(10, 27, 58, 0.95) 0%, rgba(10, 27, 58, 0.45) 100%);
  min-height: 520px;
  width: 100%;
}

/* Indicadores de navegación (puntos) */
.carousel-indicators [data-bs-target] {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: #fff;
  opacity: 0.5;
}

.carousel-indicators .active {
  opacity: 1;
  background-color: var(--brand-red);
  width: 28px;
  border-radius: 6px;
  transition: all 0.3s ease;
}

/* Estilos de botones */
.btn-danger {
  background-color: var(--brand-red);
  border-color: var(--brand-red);
}

.btn-danger:hover {
  background-color: #c4131a;
}

/* Divisores verticales */
@media (min-width: 768px) {
  .border-end-md {
    border-right: 1px solid #dee2e6 !important;
  }
}

footer a:hover {
  color: #fff !important;
}

/* Ajuste de altura fija y recorte proporcional para imágenes estándar */
.section-img-custom {
  height: 280px; /* Define la altura máxima que prefieras */
  width: 100%;   /* Mantiene el ancho total del contenedor */
  object-fit: cover; /* Recorta la imagen arriba y abajo sin deformarla */
  object-position: center; /* Mantiene enfocado el centro de la imagen */
}

.text-justify {
  text-align: justify;
}