/*
Custom CSS - Energetic & Modern Theme
Primary: #2C3E50 (Navy Blue)
Accent: #E63946 (Vibrant Red-Coral)
Background: #F8F9FA (Light Gray)
*/

/* ===== Bootstrap Success Overrides ===== */

/* Text */
.text-success {
  color: #2C3E50 !important;
}

/* Backgrounds */
.bg-success {
  background-color: #2C3E50 !important;
}

/* Buttons - Vibrant red-coral for CTAs */
.btn-success {
  background-color: #E63946 !important;
  border-color: #E63946 !important;
  color: #fff !important;
}
.btn-success:hover,
.btn-success:focus {
  background-color: #CC2E3A !important;
  border-color: #CC2E3A !important;
  color: #fff !important;
}
.btn-success:active,
.btn-success.active {
  background-color: #B8242F !important;
  border-color: #B8242F !important;
}

/* Outline buttons */
.btn-outline-success {
  color: #E63946 !important;
  border-color: #E63946 !important;
  background-color: transparent !important;
}
.btn-outline-success:hover,
.btn-outline-success:focus {
  background-color: #E63946 !important;
  border-color: #E63946 !important;
  color: #fff !important;
}

/* Border */
.border-success {
  border-color: #2C3E50 !important;
}

/* Badges */
.badge.bg-success {
  background-color: #2C3E50 !important;
}

/* Spinner */
.spinner-border.text-success {
  color: #2C3E50 !important;
}

/* Pagination */
.pagination .page-link:hover,
.pagination .page-link.active {
  background-color: #E63946;
  border-color: #E63946;
  color: #fff;
}

/* ===== Navbar brand ===== */
.navbar-brand.text-success {
  color: #2C3E50 !important;
}

/* ===== Links ===== */
a.text-success:hover {
  color: #E63946 !important;
}

/* ===== text-muted más oscuro y legible ===== */
.text-muted {
  color: #6b7280 !important;
}

/* ===== Hero Carousel ===== */

/* Carousel siempre ocupa toda la pantalla menos el navbar */
#hero-carousel .carousel-item {
  min-height: calc(100vh - 80px) !important;
}

/* Imagen: siempre ocupa todo el ancho de su columna, altura fija, sin distorsion */
#hero-carousel .order-lg-last img {
  width: 100%;
  height: 28rem;
  object-fit: contain;
}

/* Textos: limitar lineas para que no rompan el layout */
#hero-carousel .carousel-item h1 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

#hero-carousel .carousel-item h3 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

#hero-carousel .carousel-item p {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ===== Mobile Responsive ===== */

@media (max-width: 767.98px) {
  /* Hero: sin altura mínima forzada en móvil */
  #hero-carousel .carousel-item {
    min-height: auto !important;
  }
  /* Imagen del slide más pequeña en móvil */
  #hero-carousel .order-lg-last img {
    height: 200px !important;
    margin-bottom: 1rem;
  }
  /* About hero image en móvil */
  .bg-success .col-md-4 img {
    max-height: 180px;
  }
}

/* ===== About Hero ===== */

/* Imagen: contener dentro de su columna sin desbordar */
.bg-success .col-md-4 img {
  width: 100%;
  max-height: 416px;
  object-fit: contain;
}

/* Textos: limitar para que no expandan el hero */
.bg-success .col-md-8 h1 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.bg-success .col-md-8 p {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}