/* SCSS HSL 
$black: hsla(120, 100%, 1%, 1);
$dark-coffee: hsla(25, 40%, 15%, 1);
$taupe: hsla(17, 10%, 53%, 1);
$almond-cream: hsla(32, 64%, 85%, 1);
$snow: hsla(300, 100%, 99%, 1);

*/

:root{
    --color-fondo:hsla(32, 64%, 85%, 1);
    --color-texto:hsla(25, 40%, 15%, 1); 
    --color-principal:rgb(209, 169, 124);
    --color-acento:hsla(17, 10%, 53%, 1);
    --color-secundario:brown;
    --espaciado: 0.2rem;
    --fuente: system-ui, sans-serif;
}

body {
    background-color: var(--color-fondo);
    color: var(--color-texto);
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    text-align: justify;

}

h1 {
    color: var(--color-texto);
    text-align: center;
    margin-top: 20px;
}
h2 {
    color: var(--color-texto);
    margin-left: var(--espaciado);
    font-size: 1.5rem;
    font-weight: bold;
    text-align: center;
}
h3 {
    color: var(--color-texto);
   text-align: center;
    font-size: 1.25rem;
    font-weight: bold; 
}
nav ul {
  display: flex;
  padding: 0;
  list-style-type: none;
  justify-content: space-between;
  gap: 10px;
}
nav li{
    flex: 1;
}
nav a {
  text-decoration: none;
  background-color: var(--color-acento);
  display: block;
  text-align: center;
  padding: 10px;
}
nav a:hover,
nav a:focus {
  background-color: var(--color-principal);
    color: var(--color-secundario);
}
a {
    color: var(--color-secundario);
    text-decoration: none;
}
a:hover,
a:focus {
  text-decoration: none;
  color: var(--color-principal);
}
li{
     list-style-type: none;
}
article {
    display: block;
    margin: var(--espaciado);
}
.container {
    display: grid;
    gap: var(--espaciado-base);
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    margin-top: calc(var(--espaciado) * 2);
}
.card {
    border-radius: 8px;
    padding: var(--espaciado);
    transition: transform 0.2s 
ease, box-shadow 0.2s 
ease;
}
/* efecto hover (movimiento y sombra)
.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
    */
footer a:hover,
a:focus {
  text-decoration: none;
  color: var(--color-fondo);
}
footer{
    background-color: var(--color-acento);
    color: var(--color-texto);
    padding: var(--espaciado);
    text-align: center;
}

.footer-content{
    margin-top: 1.5rem;
    display: block;
}