style.css

:root {
  --space-max: 5%;
  --space-min: 2%;
  --space-btn: 4%;
  --radius: 8px;
  --header-mobile-height: 15vh;
  --header-desktop-height: 1vh;
  /* tamaños fuentes */
  --typo-xxs: 14px;
  --typo-xs: 16px;
  --typo-sm: 22px;
  --typo-md: clamp(1.75rem, 1.36vi + 1.41rem, 2.5rem);
  --typo-xl: clamp(1.5rem, 1.54vi + 1.12rem, 2.34rem);
  --typo-xxl: 50px;
  --typo-h1-header: clamp(0.88rem, 0.45vi + 0.76rem, 1.13rem);
  /* colores */
  --header-hover: #d9e5e3;
  --btn-general: #ebaa20;
  --btn-especial: #d9017a;
  --items-background: #f7f8f9;
  --primary-color: black;
  --secondary-color: #004d43;
  --envio-color: #51c531;
  --precio-color: #b71c1c;
  --bottom-line: 0.2px solid rgb(140, 140, 140);
  /* para pruebas */
  --border-red: 2px solid red;
  --border-blue: 2px solid blue;
  --border-plum: 2px solid plum;
}

/* formateo general de estilos */
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

/* borramos viñetas de todas las li */
ul {
  list-style-type: none;
}

/* borramos el subrayado y el dolor de resaltado de todos los anchor */
a {
  text-decoration: none;
  color: var(--primary-color);
}

.ver-ficha,
.añadir,
/*! .nav-bar-secondary, */
.librerias,
.login span,
.librerias span {
  display: none;
}

body {
  font-size: var(--typo-xs);
  /* width: 99vw; */
  /* padding: 0.5vw; */
  min-height: 100vh;
  background-color: #e9ebef;
}

/*todo mobile first */

.header-container {
  width: 100vw;
  display: flex;
  flex-direction: column;
  background-color: antiquewhite;
  width: 100vw;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1;
  padding: 10px;
}

.nav-bar-first {
  display: grid;
  grid-template-columns: 1fr 3fr 1fr 1fr;
  grid-template-rows: repeat(2, minmax(30px, 1fr));
  align-items: center;
  /* justify-items: center; no puedo usarlo porque se me descuadra la segunda fila */
  grid-template-areas:
    'menu logo cuenta cesta'
    'search search search search';
  gap: 10px;
}

.nav-bar-first .ico-menu,
.login,
.cesta,
.ico-lupa {
  width: clamp(20px, calc(20px + 1vw), 30px);
  height: auto; /* Mantiene la proporción */
  /* min-width: 20px;
  max-width: 30px; */
  align-self: center;
  justify-self: center;
  /* background-color: black; */
}

.ico-menu {
  grid-area: menu;
  justify-self: center;
  /* grid-column: 1 / 2;
  grid-row: 1 / 2; */
}

.logo {
  grid-area: logo;
  /* justify-self: start; */
  /* grid-column: 2 /3;
  grid-row: 1 / 2; */
  /* width: 70px; */
  justify-self: center;
}

/* ! __________importante__________ */
.logo img {
  width: clamp(125px, 10vw, 150px);
  height: auto; /* Mantiene la proporción */
  /* min-width: 125px;
  max-width: 300px; */
}

.barra-busqueda {
  grid-area: search;
  /* border-top: 1px solid black; */
  /* grid-column: 1 /5;
  grid-row: 2 / 3; */
  border: 1px solid rgb(140, 140, 140);
  /* margin: 0 1vw; */
}

.barra-busqueda form {
  display: flex;
  gap: var(--space-min);
  /* justify-content: space-between; */
  padding: var(--space-min);
  padding: 0; /*para evitar desplazamientos fuera del header*/

  /* display: grid;
  grid-template-columns: 4fr 1fr;
  grid-template-rows: 1fr;
  grid-template-areas: 'input lupa';*/
}

.barra-busqueda form > input {
  /* grid-column: 1 /2;
  grid-row: 1 / 2; */
  /* grid-area: input; */
  flex: 4;
  border: none;
  background-color: antiquewhite;
}

.barra-busqueda form > input::placeholder {
  text-align: center;
  font-size: var(--typo-xs);
}

.login {
  grid-area: cuenta;
  justify-self: center;
  /* grid-column: 3 /4;
  grid-row: 1 / 2; */
}

.cesta {
  grid-area: cesta;
  justify-self: center;
  /* grid-column: 4 /5;
  grid-row: 1 / 2; */
}

/* ? main */

main {
  /* width: 99vw; */
  width: 100vw;
  /*espacio para que sea sea visible todo el contenido del main y no quede solapado con el header*/
  /* margin-top: calc(var(--header-mobile-height) + var(--space-min));  */
  margin-top: var(--header-mobile-height);
}

.banner-promo {
  width: 98%;
  margin: auto; /*para centrar el banner*/
}

.banner-promo > img {
  width: 100%;
}

.promo {
  display: flex;
  /* flex-direction: column; */
  flex-wrap: wrap;
  background-color: black;
  color: white;
  padding: var(--space-max);
  gap: 10px;
}

.promo h2,
p {
  line-height: 1.5;
}

.promo > h2 {
  font-size: var(--typo-md);
}

p {
  font-size: var(--typo-xs);
}

main button {
  width: 90%;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-weight: 400;
  padding: var(--space-btn);
  background-color: var(--btn-general);
  border-radius: var(--radius);
  border: none;
  display: block;
  margin: var(--space-min) auto 0;
}

article {
  padding: var(--space-max);
}

article > img {
  width: 100%;
}

/* ? banner-news */

.banner-news ul {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.banner-news a > img {
  width: 100%;
}

.banner-news h2 {
  line-height: 1.5;
  letter-spacing: 1.2px;
  font-family: 'work sans';
  font-weight: 500;
}

.banner-news .btn-especial {
  background-color: var(--btn-especial);
  color: white;
}

.banner-news ul li > * {
  border-bottom: 1px solid rgb(140, 140, 140);
}

section > h2 {
  font-family: 'inter';
  font-weight: 500;
  font-size: var(--typo-md);
  line-height: 1.8;
  letter-spacing: 1.5px;
  margin: 0 var(--space-min);
  border-bottom: var(--bottom-line);
}

/* ? recomendaciones */

.recomendaciones ul {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: 10px;
}

.recomendaciones ul > article {
  display: flex;
  /* flex-wrap: wrap; */
  flex-direction: column;
  align-items: center;
  width: 300px;
  /*min-width: 300px;
  max-width: 300px; */
  justify-content: space-between;
}

.recomendaciones ul li article div {
  display: flex;
  flex-direction: column;
  gap: 10px;
  justify-content: center;
  align-items: center;
  /* width: 300px;
  min-width: 300px;
  max-width: 300px */
}

.recomendaciones div > h2 {
  font-size: 1.5rem;
  line-height: 1.2;
  text-align: center;
}

.recomendaciones img {
  justify-content: center;
  align-self: center;
  /* asignamos un ancho fijo y que la altura se autoajuste. Con esto aseguramos que todos los elementos tengan el mismo tamaño y esten alineados */
  width: 250px;
  height: auto;
}

a.search-button-recomendaciones {
  background-color: var(--btn-especial);
  border-radius: var(--radius);
  padding: var(--space-btn);
  color: white;
  margin-top: var(--space-min);
  text-align: center;
  display: block; /*anchor es un elemento inline, por lo tanto, para aplicarle padding y margin, debemos convertirlo a block*/
  letter-spacing: 2px;
}

/* ? best-sellers */

/* tanto el ul como el article de best-sellers estan en flex column */
.best-sellers ul,
article {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.best-sellers ul li article img {
  /* align-self: center; */
  width: 250px;
  height: auto;
}

.best-sellers article {
  gap: 2px;
  font-family: 'inter';
}

p.tipo-tapa-libro {
  font-size: var(--typo-xs);
  line-height: 2.5;
  border-bottom: var(--bottom-line);
}

h2.titulo-libro {
  font-weight: 550;
  font-size: var(--typo-sm);
  margin-top: var(--space-min);
}

p.autor {
  font-weight: 200;
  font-size: var(--typo-xs);
}

p.precio {
  font-weight: 550;
  font-size: var(--typo-sm);
  color: var(--precio-color);
}

p.envio {
  font-weight: 500;
  font-size: var(--typo-xs);
  color: var(--envio-color);
  text-transform: uppercase;
  letter-spacing: 1.5px;
}

/* ? categorias-destacadas */

.categorias-destacadas ul,
li {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* gap: 10px; */
  transition: transform 0.5s ease-in-out;
}

.categorias-destacadas li > img {
  margin-top: 20px;
}

.categorias-destacadas li > a {
  font-family: 'inter';
  font-size: var(--typo-xs);
  margin-top: var(--space-min);
  color: var(--secondary-color);
}

/*! footer */

/*? social-media */

footer {
  width: 100vw;
}

.social-media ul {
  display: flex;
  gap: var(--space-min);
  justify-content: space-around;
  margin: var(--space-max);
  flex-wrap: wrap;
}

.social-media img {
  width: 8vw;
}

/* ? nav */

.footer-nav {
  padding: var(--space-min);
  font-family: 'inter';
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.footer-nav section {
  line-height: 2;
}

.footer-nav section > h3 {
  font-size: var(--typo-md);
  color: var(--secondary-color);
  text-align: center;
}

.footer-nav section a {
  color: rgb(60, 58, 58);
  font-size: var(--typo-xs);
}

footer > p {
  background-color: black;
  color: white;
  line-height: 2;
  text-align: center;
  width: 100%;
}
button {
  transition: transform 0.3s ease-in-out;
}

/* ! efectos sobre nav del header!!!! */
button:hover {
  /* background: rgb(168, 133, 69); */
  background-color: orange;
  color: white;
  /* transform: scale(1.1); */
}

.categorias-destacadas li:hover,
.categorias-destacadas li:hover a {
  /* transform: scale(1.1); */
  filter: drop-shadow(10px 10px 20px orange);
  text-decoration: underline;
  color: black;
}

/* ! menu desplegable al hacer hover en .ico-menu */
/* en este caso queremos que el menu se superponga al contenido y ocupe el 100vw, es decir, no necesitamos ningun desplazamiento  */

/* contenedor respecto al que vamos a situar el menu */
header .nav-bar-first .ico-menu {
  position: relative;
  border: 2px solid black;
  cursor: pointer;
}

header .nav-bar-secondary {
  position: absolute;
  /*para sacar del flujo del documento y ubicar el elemento respecto al .ico-menu*/
  left: 0; /*lo ubicamos en el borde izquierdo del .ico-menu*/
  top: 55px;
  /*lo ubicamos justo por debajo del .ico-menu*/
  width: 100vw; /*queremos que el menu ocupe el 100% de la pantalla*/

  transition: transform 0.3s ease-in-out;
  transform: translateX(-100%);
}

/* ordenamos los elementos del menu */
header .nav-bar-secondary ul {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 10px;
  align-items: flex-start;
  background-color: antiquewhite;
  width: 100%;
}

.header-container:has(.ico-menu:hover) .nav-bar-secondary,
.nav-bar-secondary:hover {
  transition: transform 0.3s ease-in-out;
  transform: translateX(0);
}

/* ! __________importante __________ */
.nav-bar-secondary ul li {
  margin-left: 50px; /*para que quede mas o menos debajo del logo*/
}

header .nav-bar-secondary ul li a {
  align-self: center;
  justify-content: center;
  margin: auto;
  /*damos una altura fija a los anchor para que al hacer hover y agregar un padding no cambie tamaño del header (noo de saltos)*/
  width: 140px;
  height: 20px;
  transition: all 0.4s ease-in-out;
}

.nav-bar-secondary ul li a:hover {
  color: white;
  /* border: 1px solid black; */
  background-color: orange;
  border-radius: 10px;
  padding: 0.5px 18px;
  text-align: center; /* ! porque no puedo hacerlo con el transform??????*/
  /* transform: text-align center 0.3s; */
}

/* !explicacion de header:has(.ico-menu:hover) .nav-bar-secondary
    ?header:has(.ico-menu:hover)
      * header es el elemento sobre el que aplicamos el :has().
      * :has(.ico-menu:hover) selecciona el header si dentro de él hay un .ico-menu que está en estado hover.

    ?.nav-bar-secondary
      * Luego, aplicamos estilos a .nav-bar-secondary dentro del header que cumple la condición anterior.
      * En otras palabras: si el usuario pasa el cursor sobre .ico-menu, el menú desplegable (.nav-bar-secondary) cambiará su estado.
    ? .nav-bar-secondary:hover 
      * si el usuario hace hover en el menú que se despliega al hacer hover en .ico-menu, el menú se mantendrá visible.

*/

/* ! ************************************************************* */

/* todo:  */

@media (min-width: 500px) {
  /* ? menu's */
  /* mantenemos el menu desplegable para ver las opciones del nav-bar-secondary */

  /*? dar visibilidad al resto de iconos del header. NOTA: ver ficha y añadir son los botones del .acciones (lo que se mostrara al hacer hover en los best sellers) */
  .ver-ficha,
  .añadir,
  .librerias,
  .login {
    display: block;
  }

  .header-container {
    width: 98vw;
  }

  /* ? navbar's del header */

  .nav-bar-first {
    /* grid-template-columns: 1fr 3fr 1fr 1fr 1fr;
  grid-template-rows: 1fr;
  grid-template-areas: 'logo search librerias cuenta cesta'; */
    display: flex;
    gap: var(--space-min);
  }

  .barra-busqueda {
    flex: 1 1 300px;
    border: var(--bottom-line);
  }

  .barra-busqueda form {
    padding: 0;
  }

  /*todo: si usaramos  grid en el nav-bar-first
      .nav-bar-secondary {
        display: flex;
      }
      .librerias {
        grid-area: librerias;
      } 
  */

  /* ? main */
  main {
    width: 98vw;
    /*espacio para que sea sea visible todo el contenido del main y no quede solapado con el header*/
    margin-top: 60px;
    padding: 0 10px;
  }

  /* ? .banner-promo */

  .banner-promo {
    display: flex;
    flex-direction: column;
    width: 100%;
  }

  .promo {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-min);
  }

  .promo > div {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .promo button {
    width: clamp(15%, 22%, 30%);
    padding: 10px;
    margin: 0;
    font-size: var(--typo-xxs);
  }

  /* ? banner-news */

  .banner-news {
    width: 100%;
  }

  /* ! ------- para corregir el problema de elementos desalineados/desordenados dentro del grid del ul ---- POR QUE??*/
  .banner-news * {
    height: 100%;
    width: 100%;
  }

  /* todo:  esto es lo mismo que .banner-news * :
      .banner-news ul,
      .banner-news ul li,
      .banner-news ul li > article {
        height: 100%;
      } 
  */

  .banner-news ul {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    align-items: center;
    padding: 0px;
    padding-top: 10px; /* para separar de la seccion anterior */
    gap: 10px;
  }

  /* ! -------- usamos grid-template-rows: 2fr 0fr 0fr; para corregir el sobredimensionamiento de altura en la grilla del article. ---- POR QUE?? */
  .banner-news ul li > article {
    display: grid;
    grid-template-rows: 2fr 0fr 0fr;
    /* grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); */
    padding: 0px;
    gap: 10px;
    border: none; /*para quitar el border-botton establecido en .banner-news ul li > *  */
    justify-content: center;
  }

  .banner-news ul li article > h2 {
    font-size: var(--typo-xs);
    text-align: center;
    align-content: center; /*para centrar el contenido verticalmente*/
    /* ! para que todos tengan la misma altura y no se sobredimensionen */
    height: clamp(60px, calc(20px + 1vw), 110px);
    margin: 0 10px;
    width: 400px; /* para que no se sobredimensionen/desborden */
  }

  .banner-news ul li article button,
  .banner-news ul li article .btn-especial {
    font-size: 10px;
    margin: 0;
    /* para que todos tengan la misma altura y ancho y no se sobredimensionen */
    height: clamp(30px, calc(30px + 1vw), 70px);
    width: 100%;
  }

  .banner-news ul li article img,
  banner-news ul li article a img {
    width: 400px;
    height: 260px;
  }

  /* ? recomendaciones */

  .recomendaciones ul {
    display: grid;
    /* usamos  autofit para que de forma automatica genere las columnas justas segun la cantidad de items */
    grid-template-columns: repeat(auto-fit, minmax(325px, 1fr));
    gap: 10px;
  }

  .recomendaciones img {
    /* ! ------importante: en este caso, para controlar la "deformacion" del grid provocada por los tamaños desiguales de las imagenes, no podemos usar la funcion clamp para hacerlas responsive como con los iconos y otros elementos, en su lugar nos vemos obligados a darles un ancho y alto fijos */
    width: 200px;
    height: 300px;
    object-fit: cover;
  }

  .recomendaciones ul li > article {
    flex-direction: row;
    gap: 10px;
    border: var(--bottom-line);
    padding: 5px; /*para corregir desbordamiento, de lo contrario habria que jugar con el minmax del grid-temprate-column del ul*/
  }

  .recomendaciones ul li article > div {
    justify-content: space-around;
    /*para que el contenedor tenga un ancho y alto uniforme para todos los elementos*/
    width: 120px;
    height: 300px;
    /* ? Para cuidar la separacion del div con el borde derecho, ya que sino algunos elementos llegaran a dicho borde y otros no */
    /* margin-top: 10px; */
    /* margin-right: 10px; */
    margin: 10px 10px 0px 0;
  }

  .recomendaciones ul li article div > h2 {
    font-size: var(--typo-xs);
    border-top: 1px solid gray;
    border-bottom: 1px solid gray;
    /* width: clamp(115px, calc(115 + 1vw), 125px); */
    width: 100%; /*para que el ancho del titulo sea uniforme siempre y la lineas horizontales ocupen todo el ancho*/
    height: clamp(60px, calc(59px + 1vw), 80px);
    align-content: center;
  }

  /*? un botón dentro de una celda de un grid con 1fr en la configuración de las filas o columnas, el botón ocupa todo el alto porque, de forma predeterminada, los elementos dentro de una celda tienden a expandirse para llenar el espacio disponible. Asi que para controlar esto, se puede establecer el alto del botón (en caso de la celda fuese 1fr)*/

  .recomendaciones button,
  a.search-button-recomendaciones {
    width: 100%;
    text-transform: lowercase;
    letter-spacing: 2px;
    padding: 8px;
  }

  /* ? Mas vendidos */

  .best-sellers ul {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    grid-auto-flow: column; /*! Asegura el scroll horizontal */
    /* grid-template-rows: 1fr; */
    gap: 10px;
    /* width: 100%; */
    overflow-x: scroll;
  }

  /* todo: Evita que los elementos se reduzcan
  .best-sellers ul li {
      flex: 0 0 auto;
    }
*/

  .best-sellers ul li > article {
    /* display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-template-rows: 2fr 1fr;
  height: 100%; */
    display: flex;
    flex-direction: column;
    /* height: 100%; */
    position: relative;
    padding: 10px;
    transition: all 0.4s ease-in-out;
  }

  .best-sellers ul li article img {
    /* ! -----importante: aqui tambien asignamos alto y ancho fijo para evitar desalineacion. Sin embargo, como al momento de indicar el ancho minimo de la grilla, establecimos que seria de 230px, el width de las imagenes debe ser inferior a este para evitar solapamientos */
    width: 200px;
    height: 300px;
    margin: auto; /* para centrar la imagen */
    /* object-fit: cover; */
  }

  .best-sellers ul,
  article {
    align-items: start;
    justify-content: start;
    /* padding: 0; */
  }

  /* ! resaltar con un borde el articulo seleccionado (lo aplicaremos en el article mas arriba con un transition 'all' para que se vea animado */
  .best-sellers ul li article:hover {
    border: 2px solid black;
    border-radius: 10px;
    box-shadow: 0px 0px 20px 2px;
  }

  /* ! div .acciones: mostrando botones con transition y usuando las propiedades visibility y opacity */
  .best-sellers ul li article .acciones {
    /* display: none; */
    width: 100%;
    opacity: 0; /* Oculto */
    visibility: hidden; /* Oculto */
    /* usamos transform para bajar el elemento 10px (Esto asegura que el elemento esté invisible y abajo del contenedor, listo para ser animado al subir cuando se haga hover): */
    transform: translateY(10px);
    /* usamos transition para que los cambios de opacity, visibility y transform sean animados en 0.8 segundos: */
    transition: opacity 0.6s ease-in-out, visibility 0.6s ease-in-out,
      transform 0.6s ease-in-out;

    /* usamos position: absolute para sacar .acciones del flujo normal para que no ocupe espacio cuando esté oculto */
    position: absolute; /* Lo saca del flujo normal del documento */
    bottom: 10px; /* Lo coloca 10px arriba del borde inferior del artículo */
    left: 0; /* Lo posiciona a la izquierda del artículo (alineamos con el borde izquierdo del articulo) */
  }

  /*todo: si hubiesemos querido centrarlo:
    .best-sellers ul li article .acciones {
    width: 100%;
    opacity: 0; /* Oculto 
    visibility: hidden; /* Oculto 
    /* usamos transform para bajar el elemento 10px(Esto asegura que el elemento esté invisible y abajo del contenedor, listo para ser animado al subir cuando se haga hover): 
    transform: translateY(10px);
    /* usamos transition para que los cambios de opacity, visibility y transform sean animados en 0.8 segundos: 
    transition: opacity 0.6s ease-in-out, visibility 0.6s ease-in-out,
      transform 0.6s ease-in-out;

    /* usamos position: absolute para sacar .acciones del flujo normal para que no ocupe espacio cuando esté oculto 
    position: absolute; /* Lo saca del flujo normal del documento 
    bottom: 10px; /* Lo coloca 10px arriba del borde inferior del artículo 
    !left: 50%; /* Lo posiciona en el centro del ancho del artículo (centramos dentro del article) 
    !transform: translateX(-50%) translateY(10) 
    ?Esto mueve el elemento hacia la izquierda un 50% de su propio ancho, centrándolo correctamente pero lo mantiene a la misma altura establecida antes con transform: translateY(10px).
    }
*/

  /* cuando hacemos hover sobre algun articulo mostramos el div con la clase "acciones" */
  .best-sellers ul li article:hover .acciones {
    /* display: block; */
    opacity: 1;
    visibility: visible;
    /* lo submos a su posicion posición normal, dando un efecto de deslizamiento pero manteniendolo centrado a la izquierda: */
    transform: translateX(0px) translateY(0);
  }

  /* establecemos cómo sera la transicion para mostrar y/o ocultar los elementos con la clase "acciones"  usando las propiedades opacity y visibility*/
  .best-sellers ul li article .precio,
  .best-sellers ul li article .envio {
    /* display: block; */
    transition: opacity 0.5s ease-in-out, visibility 0.3s ease-in-out;
  }

  /* Ocultamos .precio y .envio al hacer hover */
  .best-sellers ul li article:hover .precio,
  .best-sellers ul li article:hover .envio {
    /* display: none; */
    opacity: 0;
    visibility: hidden;
  }

  .info-libro {
    height: 120px;
  }

  /* para que los botones del div .acciones no solapen el contenido del article, modificamos su altura al hacer hover */
  .best-sellers ul li article:hover .info-libro {
    height: 140px;
  }

  .best-sellers ul li article > .precio {
    height: 20px;
    font-size: var(--typo-xs);
  }

  .best-sellers ul li article > .envio {
    color: green;
    height: 30px;
    padding: 5px 0;
    font-size: var(--typo-xs);
  }

  .info-libro h2 {
    text-align: left;
    font-size: var(--typo-xs);
  }

  /*? categorias destacadas */

  .categorias-destacadas ul {
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--space-max);
    justify-content: space-around;
    position: relative;
  }

  .categorias-destacadas button {
    display: inline;
    width: auto;
    padding: 10px;
    margin-right: 10px;
  }

  /* ? footer */

  footer {
    background-color: rgb(210, 204, 204);
    padding: 5px;
    margin-top: 2vh;
    border: 1px solid black;
    border-radius: 10px;
    width: 99vw;
  }

  /* social media */

  .social-media ul {
    justify-content: start;
    margin: 10px;
  }

  .social-media img {
    width: 30px;
  }

  /* nav */

  .footer-nav {
    flex-direction: row;
    gap: var(--space-max);
    flex-wrap: wrap;
    justify-content: center;
    padding: 10px;
  }

  .footer-nav section > h3 {
    font-size: var(--typo-xs);
  }

  .footer-nav section > h3:hover {
    color: black;
  }

  .footer-nav section a {
    font-size: var(--typo-xxs);
  }

  .footer-nav section a:hover {
    filter: drop-shadow(5px 5px 5px rgb(255, 166, 0));
    color: black;
  }

  footer p {
    border-radius: 10px;
    width: 100%;
    margin: 0;
  }
}

@media (min-width: 900px) {
  .ico-menu {
    display: none;
  }

  header {
    height: var(--header-desktop-height);
    display: flex;
    flex-direction: column;
    gap: 10px;
    justify-content: center;
    align-items: center;
    padding: 0 10px;
  }

  /* ? navbar's del header */

  .header-container {
    width: 99vw;
  }

  header .nav-bar-first {
    margin-bottom: 10px;
  }

  header .nav-bar-first .ico-menu,
  header .nav-bar-secondary {
    position: static;
  }

  header .nav-bar-secondary {
    transition: none;
    transform: none;
    width: 100%;
    /* margin: 0px 2.5%; */
  }

  header .nav-bar-secondary ul {
    flex-direction: row;
    flex-wrap: wrap;
    /* justify-content: space-between; */
    align-items: center;
    padding: 0px;
    gap: 5px;
    justify-content: center;
  }

  .nav-bar-secondary ul li {
    margin-left: 0;
    /*quitamos la alineacion de la vista par movil*/
  }

  .nav-bar-secondary ul li a {
    text-align: center;
  }

  /* ! ------- hace algo ? */
  .barra-busqueda {
    flex: 1 1 300px;
    border: var(--bottom-line);
  }

  .logo .librerias .login .cesta {
    flex: 1;
  }
  /* ! -------  */

  main {
    width: 90vw;
    margin: 0 5vw;
    margin-top: calc(var(--header-desktop-height) + 83px);
  }

  .banner-news ul {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 475px));
    align-items: center;
    padding: 0px;
    padding-top: 10px; /* para separar de la seccion anterior */
    justify-content: space-between;
    gap: 10px;
  }

  .banner-news ul li article > h2 {
    width: 465px; /* para que no se sobredimensionen/desborden */
    margin: 0 auto;
  }

  .banner-news ul li article img,
  banner-news ul li article a img {
    width: 99%; /*para evitar desbordamiento teniendo en cuenta el borde*/
    margin: 0 auto; /*para  centrar dentro del contenedor*/
  }
}