:root {
  --color-principal: #007BFF; /* Azul eléctrico */
  --color-secundario: #000000; /* Rojo tomate */
  --color-acento: #FFD700; /* Amarillo dorado */
  --color-fondo: #F0F8FF; /* Azul Alice */
  --color-texto: #333333; /* Gris oscuro para contraste */
  --color-hamair:   #3383ff;
}

body {
  background-color: black;
  color: var(--color-texto);
  font-family: Arial, Helvetica, sans-serif;
  margin: 0;
  padding: 0;
}

/* Barra de navegación */
.navbar {
  background-color: var(--color-principal);
  color: white;
}

.navbar a {
  color: white;
  text-decoration: none;
}

.navbar a:hover {
  color: var(--color-acento);
}

/* Botones */
.btn {
  background-color: var(--color-principal);
  color: white;
  border: none;
  padding: 10px 20px;
  text-transform: uppercase;
  cursor: pointer;
}

.btn:hover {
  background-color: var(--color-secundario);
  color: white;
}

/* Encabezados */
h1, h2, h3, h4, h5, h6 {
  color: var(--color-principal);
}

/* Enlaces */
a {
  color: var(--color-secundario);
  text-decoration: none;
}

a:hover {
  color: var(--color-principal);
}

/* Tarjetas */
.card {
  border: 1px solid var(--color-principal);
  background-color: white;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.card h5 {
  color: var(--color-principal);
}

.card a {
  color: var(--color-secundario);
}

.card a:hover {
  color: var(--color-acento);
}

/* Pie de página */
footer {
  background-color:  var(--color-principal);
  color: #ffffff;
  padding: 15px 0;
  text-align: center;
}