/* === PALETA DE COLORES === */
:root {
  --negro: #0d0d0d;
  --gris: #e5e5e5;
  --rojo: #CE2226;
  --rojo-hover: #a93226;
  --blanco: #ffffff;
}

/* Navbar */
#mainNav {
  background-color: var(--negro) !important;
}

#mainNav .navbar-nav .nav-link {
  color: var(--blanco) !important;
  transition: color 0.3s;
}

#mainNav .navbar-nav .nav-link:hover {
  color: var(--rojo) !important;
}

/* Header */
header.masthead {
  position: relative;
  background: linear-gradient(rgba(0,0,0,0.7), rgba(192,57,43,0.6)),
              url("../img/carro-barado.jpg") center/cover no-repeat;
  color: var(--blanco);
}

header.masthead .intro-text .intro-heading a {
  font-size: 2rem;
  font-weight: 800;
}

/* Secciones */
section {
  padding: 100px 0;
}

section h2.section-heading {
  color: var(--rojo);
}

section#about {
  background: var(--negro);
  color: var(--blanco);
}

section#services {
  background: var(--gris);
}

.service-heading {
  color: var(--rojo);
}

/* Botones */
.btn-primary {
  background-color: var(--rojo);
  border-color: var(--rojo);
  border-radius: 6px;
  transition: background 0.3s;
}

.btn-primary:hover {
  background-color: var(--rojo-hover);
  border-color: var(--rojo-hover);
}

/* Contacto */
#contact {
  background: var(--negro);
  color: var(--blanco);
}

#contact input, 
#contact textarea {
  border: 1px solid var(--gris);
  background: #1a1a1a;
  color: var(--blanco);
}

#contact input:focus, 
#contact textarea:focus {
  border-color: var(--rojo);
  outline: none;
  box-shadow: 0 0 5px var(--rojo);
}

/* Footer */
footer {
  background: var(--negro);
  color: var(--gris);
}

footer .social-buttons a {
  color: var(--blanco);
  transition: color 0.3s;
}

footer .social-buttons a:hover {
  color: var(--rojo);
}