:root {
  --azul-sierra: #1f4aa8;
  --rojo-camino: #c0392b;
  --amarillo-sol: #f1c40f;
  --gris-claro: #f7f7f7;
}

body {
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  background-color: #ffffff;
  color: #1f1f1f;
}

.navbar {
  background: #ffffff;
  border-bottom: 3px solid var(--azul-sierra);
}

.navbar-brand {
  font-weight: 700;
  color: var(--azul-sierra);
}

.btn-camino {
  background-color: var(--rojo-camino);
  color: #ffffff;
  border: none;
}

.btn-camino:hover,
.btn-camino:focus {
  background-color: #a93226;
  color: #ffffff;
}

.hero {
  background: linear-gradient(120deg, var(--azul-sierra), #2d6cdf);
  color: #ffffff;
}

.badge-camino {
  background: var(--amarillo-sol);
  color: #2d2d2d;
}

.section-title {
  color: var(--azul-sierra);
  font-weight: 700;
}

.highlight-card {
  border: none;
  border-top: 4px solid var(--rojo-camino);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

.route-point {
  border-left: 4px solid var(--amarillo-sol);
  padding-left: 1rem;
  margin-bottom: 1rem;
}

.bg-soft {
  background-color: var(--gris-claro);
}

.footer {
  background-color: #0f2f6b;
  color: #ffffff;
}

.footer a {
  color: var(--amarillo-sol);
  text-decoration: none;
}

@media (max-width: 991.98px) {
  .hero {
    text-align: center;
  }

  .highlight-card {
    margin-top: 1.5rem;
  }
}

@media (max-width: 767.98px) {
  .hero .display-5 {
    font-size: 2.2rem;
  }
}