@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;700;800&display=swap");

:root {
  --naranja: hsl(35, 77%, 62%);
  --rojo: hsl(5, 85%, 63%);
  --blanco: hsl(36, 100%, 99%);
  --celeste: hsl(233, 8%, 79%);
  --azul1: hsl(236, 13%, 42%);
  --azul2: #00001a;
}
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  text-decoration: none;
  font-family: "Inter", sans-serif;
  list-style: none;
  border: none;
}

header {
  margin: auto;
  height: 75px;
  width: 80%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
/* MENU HAMBURGUESA Ocultar en Desktop  */

.menu-icon1 {
  display: none;
}

.navbar-list {
  display: flex;
  gap: 25px;
}
nav a {
  cursor: pointer;
  color: var(--azul1);
  font-size: 15px;
  font-weight: 400;
}
nav a:hover {
  color: var(--rojo);
}
/*GLASMORPHISM:
  Fondo semitransparente que
  añade un difuminado al fondo del div en el que se aplique. En este caso, lo usamos para que al abrir el menú
  hamburguesa lo demás de la página se vea borroso abajo de este div de clase overlay.
  */

.overlay {
  position: absolute;
  top: 65px;
  left: 0;
  height: 100vh;
  width: 100%;
  z-index: 1; /*Para que quede por encima del resto de las cosas*/

  /*Efecto de Glassmorphismo*/
  background: --azul1, 0.5;
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  display: none;
}

/*Toggle para el overlay (para que funcione unicamente cuando abrimos carrito o menu hamburguesa.
    Aclarar que funciona porque son elementos hermanos y overlay esta debajo de los dos inputs en el código.*/
.show-overlay {
  display: block;
}

/* *******************************************contenedor general luego del header */
section {
  width: 100%;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 55px;
}

/************************************** contenedor de los cuatro divs de  arriba */
.divContUp {
  width: 80%;
  height: 70%;
  display: flex;
  gap: 20px;
}
/*************************** contenedor izquierdo, sin el nav azul de la derecha */
.div1 {
  width: 70%;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
/* contenedor Azul lado derecho: New y sus tres contenidos a la derecha en la parte de arriba */
.div2 {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  padding: 18px;
  width: 30%;
  min-height: 100%;
  background-color: var(--azul2);
}
/* h2 NEW */
.div2 h2 {
  color: var(--naranja);
  font-size: 1.8rem;
}
.divCardsNew {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* cards del contenedor azul oscuro */
.divCardsNew div {
  display: flex;
  flex-direction: column;
  gap: 6px;
  height: 32%;
  justify-content: center;
}
.divBorder {
  border-bottom: solid 1px var(--azul1);
  border-top: solid 1px var(--azul1);
}

/* lado derecho contenedor azul */

.div2 div h4 {
  color: #fff;
  font-size: 1rem;
}

.div2 div h4:hover {
  color: var(--naranja);
  cursor: pointer;
}

.div2 div p {
  color: var(--azul1);
  font-size: 14px;
}

/* imagen mas grande */

.div1__img {
  height: 35vh;
  width: 100%;
  background-image: url(./frontendMentor/assets/images/image-web-3-desktop.jpg);
  background-position: center;
  background-size: cover;
}
/* div contenedor de : titulo, parrafo y btn debajo de img */
.div1__text {
  display: flex;
  gap: 20px;
  height: auto;
}
.div1__h1 {
  width: 50%;
  height: 100%;
  text-align: left;
}
.div1__p {
  width: 50%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.div1__h1 h1 {
  font-size: 3rem;
  font-weight: 800;
  width: min(300px, 100%);
  color: var(--azul2);
}
.div1__p p {
  color: var(--azul1);
}

button {
  font-size: 14px;
  font-weight: 700;
  padding: 12px;
  width: 200px;
  background-color: var(--rojo);
  color: var(--blanco);
  cursor: pointer;
  letter-spacing: 1px;
}
button:hover {
  background-color: var(--azul2);
}
/* contenedor de las tres cards horizontales de abajo */
.divContDown {
  height: 30%;
  width: 80%;
  display: flex;
  justify-content: space-between;
}

/* card individuales */
.cardDown {
  display: flex;
  gap: 14px;
  width: 30%;
  justify-content: center;
  align-items: center;
}

/* las imagenes de cada una */
.imgCard1 {
  height: 95%;
  width: 30%;
  background-size: cover;
  background-image: url(./frontendMentor/assets/images/image-retro-pcs.jpg);
  background-position: center;
}
.imgCard2 {
  height: 95%;
  width: 30%;
  background-size: cover;
  background-image: url(./frontendMentor/assets/images/image-top-laptops.jpg);
  background-position: center;
}
.imgCard3 {
  height: 95%;
  width: 30%;
  background-size: cover;
  background-image: url(./frontendMentor/assets/images/image-gaming-growth.jpg);
  background-position: center;
}

/* div lado derecho con texto */
.textCard {
  width: 70%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}

/* 01 02 03 de cada cards  */
.divContDown .cardDown .textCard span {
  font-size: 24px;
  color: var(--celeste);
  font-weight: 700;
}

.textCard h4 {
  color: var(--azul2);
  font-weight: 800;
  cursor: pointer;
  font-size: 1rem;
}
.textCard h4:hover {
  color: var(--rojo);
}
.textCard p {
  color: var(--azul1);
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  text-align: start;
  width: auto;
}