@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap");
/* variables */
:root {
  --bg-primario: hsl(50, 14%, 42%);
  --bg-acento-2: hsl(50, 14%, 38%);
  --bg-acento-3: hsl(23, 58%, 83%);
  --bg-acento-4: hsl(212, 61%, 17%);
  --bg-secundario: hsl(29, 42%, 31%);
  --bg-acento: hsl(131, 13%, 50%);
  --letra: hsl(232, 48%, 91%);
  --h1-fuente: 5rem;
  --detalles-ancho: 25%;
  --barra-nav-altura: 8rem;
  --pie-altura: 6rem;
}

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

/* estilos generales */
html {
  font-family: "Roboto", sans-serif;
  background-color: var(--bg-acento-3);
  color: var(--letra);
}

/* clases */
/* NAV */
.barra-nav {
  background-color: var(--bg-acento-2);
  display: flex;
  align-items: center;
  gap: 1.5rem;
  position: sticky;
  top: 0;
  height: var(--barra-nav-altura);
}

/* ASIDE */
.detalles {
  padding: 2rem;
  display: flex;
  flex-direction: column;
  width: clamp(var(--detalles-ancho), 15%, 30%);
  background-color: var(--bg-primario);
  height: calc(100vh - var(--barra-nav-altura));
  top: var(--barra-nav-altura);
  left: 0;
  position: fixed;
  background-color: var(--bg-primario);
  gap: 5%;
  overflow-y: scroll;
  overflow-x: hidden;
}

.detalles__article {
  background-color: var(--bg-acento);
  padding: 2rem;
  border-radius: 5%;
}
/* MAIN */
.informacion {
  margin-left: var(--detalles-ancho);
  color: var(--bg-acento-4);
  padding-left: 1rem;
}

/* FOOTER */
.pie {
  display: flex;
  background-color: var(--bg-acento-2);
  margin-left: var(--detalles-ancho);
  gap: 3rem;
  justify-content: center;
  padding-top: 3rem;
  padding-bottom: 3rem;
}

@media (max-width: 955px) {
  .detalles {
    position: static;
    display: flex;
    width: 100%;
    height: auto;
    gap: 3rem;
    overflow-y: none;
    overflow-x: hidden;
  }

  .detalles__article {
    width: 80%;
  }

  .barra-nav__img {
    height: 6rem;
    width: 6rem;
  }

  .informacion {
    margin: 2rem;
  }

  .pie {
    width: 100%;
    margin-left: 0;
  }
}