@import url("https://fonts.googleapis.com/css?family=Montserrat|Raleway&display=swap");
@import url("https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.4.0/css/all.min.css");

:root {
  --amarillo-oscuro: #f5aa34;
  --amarillo-claro: #fbba00;
  --azul-fuerte: #1f77b4;
  --azul-metal-claro: #4f859e;
  --azul-metal-oscuro: #3a6b82;
  --gris-oscuro: #2f3438;
  --gris-claro: #f5f5f5;
  --texto: #555555;
}

html,
body {
  font-family: Montserrat, sans-serif;
  height: 100%;
}

body {
  color: var(--texto);
  background: #fff;
  margin: 0;
  padding: 0;
}

.montserrat {
  font-family: Montserrat, sans-serif;
}
.raleway {
  font-family: Raleway, sans-serif;
}

.amarilloOscuro {
  color: var(--amarillo-oscuro);
}
.amarilloClaro {
  color: var(--amarillo-claro);
}
.azulFuerte {
  color: var(--azul-fuerte);
}
.azulMetalClaro {
  color: var(--azul-metal-claro);
}
.azulMetalOscuro {
  color: var(--azul-metal-oscuro);
}

.container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 16px;
}

/* Utility */
.text-center {
  text-align: center;
}
.mb-3 {
  margin-bottom: 1rem;
}
.pt-3 {
  padding-top: 1rem;
}

/* Responsive helpers for banner spacing */
@media (max-width: 768px) {
  .container {
    padding: 0 12px;
  }
}

/* Footer styles */
.site-footer {
  background: var(--gris-oscuro);
  color: #fff;
}
.site-footer a.footer-link {
  color: var(--amarillo-claro);
  text-decoration: none;
}
.site-footer a.footer-link {
  color: var(--amarillo-claro);
  text-decoration: none;
  transition: color 200ms ease, transform 150ms ease;
}
.site-footer a.footer-link:hover {
  color: #fff;
  text-decoration: underline;
  transform: translateY(-2px);
}
.site-footer h5 {
  color: #fff;
}
.site-footer .small {
  color: #e6eef3;
}

/* Heading styles */
h2 {
  color: var(--azul-fuerte);
  font-size: 1.6rem;
  line-height: 1.25;
  margin-bottom: 0.75rem;
  padding-left: 0.75rem;
  border-left: 4px solid var(--amarillo-oscuro);
}

@media (max-width: 576px) {
  h2 {
    font-size: 1.35rem;
    padding-left: 0.6rem;
  }
}