:root{
  --negro:#000;
  --blanco:#ffffff;
  --mostaza:#E3B52F;
}

/* ===== CONTENEDOR CENTRAL ===== */

body{
  background:var(--blanco);
  color:var(--negro);
  font-family:Arial, sans-serif;
  margin:0;
}

main{
  max-width:900px;
  margin:auto;
}

/* ===== HEADER ===== */

header{
  background:var(--blanco);
}

/* LOGO */

.logo img{
  height:80px;
}

/* ===== MENU ===== */

nav ul li a{
  text-decoration:none;
  color:white;
  background-color:var(--negro);
  padding:10px 15px;
  border-radius:10px;
  transition:all .3s;
}

nav ul li a:hover{
  background-color:var(--mostaza);
  color:black;
}

/* ===== TARJETAS ===== */

.content-box{
  background:#fff;
  border-radius:10px;
  box-shadow:0 2px 6px rgba(0,0,0,.08);
  padding:12px;
  text-align:center;
}

/* ===== BOTONES ===== */

.learn-more{
  background:var(--negro);
  color:white;
  padding:8px 14px;
  border-radius:8px;
  text-decoration:none;
}

.learn-more:hover{
  background:var(--mostaza);
  color:black;
}

/* ===== FOOTER ===== */

footer{
  background:var(--negro);
  color:white;
  padding:40px 0;
}

.footer-container{
  max-width:900px;
  margin:auto;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:30px;
}

.footer-column h2{
  color:var(--mostaza);
}

.footer-column ul{
  list-style:none;
  padding:0;
}

.footer-column ul li{
  margin-bottom:8px;
}

.footer-column ul li a{
  color:white;
  text-decoration:none;
}

.footer-column ul li a:hover{
  color:var(--mostaza);
}

/* ===== RESPONSIVE ===== */

@media (max-width:768px){

.footer-container{
  grid-template-columns:1fr 1fr;
}

}

@media (max-width:500px){

.footer-container{
  grid-template-columns:1fr;
}

}