@import url('https://fonts.googleapis.com/css2?family=Lora&family=Montserrat:wght@600&display=swap');

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --color-principal: hsl(305, 82%, 24%);
  --color-textos: hsl(0, 2%, 15%);
  --color-fondo: hsl(308, 100%, 93%);
  --color-contraste: hsl(308, 80%, 55%);
  --sombra: .5em .5em .5em silver;
  --espacio-chico: 1rem;
  --espacio-medio: 1.5rem;
  --fuente-textos: "Lora", serif;
  --fuente-titulos: "Montserrat", sans-serif;
}

body {
  font-family: var(--fuente-textos);
  color: var(--color-textos);
  background-color: var(--color-fondo);
  padding: var(--espacio-chico);
}

.navegacion ul {
  display: flex;
  list-style: none;
  gap: 1rem;
  flex-wrap: wrap;
}

img {
  max-width: 100%;
}

a {
  text-decoration: none;
  color: hsl(0, 2%, 15%);
  font-family: var(--fuente-titulos);
  font-weight: bold;
  background-color:var(--color-fondo);
  padding: 0.5rem 1rem;
  border-radius: 8px;
  display: inline-block;
}

.carta {
  background: hsl(308, 74%, 76%);
  border-radius: 10px;
  box-shadow: var(--sombra);
  width: clamp(17.5rem, 90%, 26.8rem);
  padding: var(--espacio-medio);
  margin: var(--espacio-medio);
}

.carta img {
  margin-bottom: var(--espacio-medio);
}

h1 {
  color: var(--color-contraste);
  font-family: var(--fuente-titulos);
  margin-bottom: 1rem;
  margin-top: 1rem;
}

h2,
h3 {
  color: var(--color-principal);
  font-family: var(--fuente-titulos);
  text-wrap: balance;
}

.equipo {
  list-style: square;
  padding: var(--espacio-chico);
}

header,
footer {
  background-color: var(--color-contraste);
  border-radius: 10px;
  padding: var(--espacio-chico);
}

p {
  text-wrap: pretty;
}