/* styles.css */



:root {

  --azul-marino: #1A2E45;

  --blanco: #ffffff;

  --gris-oscuro: #4A4A4A;

  --dorado: #C9A14A;

  --fuente-base: 'Open Sans', sans-serif;

  --fuente-titulos: 'Merriweather', serif;

}



* {

  box-sizing: border-box;

  margin: 0;

  padding: 0;

}



body {

  font-family: var(--fuente-base);

  background-color: var(--blanco);

  color: var(--gris-oscuro);

  line-height: 1.6;

}



header {

  background-color: var(--azul-marino);

  color: var(--blanco);

  padding: 2rem 1rem;

  text-align: center;

}



header h1 {

  font-family: var(--fuente-titulos);

  font-size: 2.5rem;

  margin-bottom: 0.5rem;

}



header p {

  font-style: italic;

  color: var(--dorado);

}



nav ul {

  list-style: none;

  display: flex;

  justify-content: center;

  flex-wrap: wrap;

  margin-top: 1rem;

  gap: 0.5rem;

}



nav ul li a {

  color: var(--blanco);

  text-decoration: none;

  font-weight: bold;

  padding: 0.5rem 1rem;

  border: 1px solid var(--dorado);

  border-radius: 4px;

  transition: background 0.3s ease;

}



nav ul li a:hover {

  background-color: var(--dorado);

  color: var(--azul-marino);

}



section {

  padding: 2rem 1rem;

  max-width: 960px;

  margin: auto;

}



h2 {

  font-family: var(--fuente-titulos);

  color: var(--azul-marino);

  border-bottom: 2px solid var(--dorado);

  padding-bottom: 0.5rem;

  margin-bottom: 1rem;

}



ul {

  padding-left: 1.5rem;

  margin-bottom: 1rem;

}



blockquote {

  border-left: 4px solid var(--dorado);

  padding-left: 1rem;

  margin: 1rem 0;

  font-style: italic;

  color: var(--azul-marino);

}



form {

  display: flex;

  flex-direction: column;

  gap: 1rem;

  margin-top: 1rem;

}



input, textarea, button {

  padding: 0.75rem;

  font-size: 1rem;

  border: 1px solid var(--gris-oscuro);

  border-radius: 4px;

}



input, textarea {

  width: 100%;

}



button {

  background-color: var(--azul-marino);

  color: var(--blanco);

  border: none;

  cursor: pointer;

  transition: background 0.3s ease;

}



button:hover {

  background-color: var(--dorado);

  color: var(--azul-marino);

}



img {

  max-width: 100%;

  height: auto;

  display: block;

  margin-top: 1rem;

}



footer {

  background-color: var(--azul-marino);

  color: var(--blanco);

  text-align: center;

  padding: 1rem;

  font-size: 0.9rem;

}