@charset "UTF-8";
@import "https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700;800;900&display=swap";
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
  scroll-behavior: smooth;
}

body {
  /* Aqui un ejemplo perfecto de como colocar un fondo simple y rapido a una pagina */
  height: 100vh;
  background-color: #ffffff; /* #be3c3c */
  background-size: cover;
  background-position: center;
}

li {
  list-style: none;
}

a {
  text-decoration: none;
  color: #fff;
  font-size: 1rem;
}
a:hover {
  color: #949494;
}

.divWsp {
  display: flex;
  justify-content: center;
  gap: 10px;
}
.divWsp .wspLogo {
  width: 20px;
  height: 20px;
}

/* HEADER */
header {
  position: fixed;
  z-index: 1000;
  top: 0;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: center; /* Centra horizontalmente */
  align-items: center; /* Centra verticalmente */
  /* DROPDOWN MENU */
}
header .navBar {
  max-width: 1200px;
  height: 90px;
  margin-top: 10px;
  padding: 0 1rem;
  display: flex;
  align-items: center;
  gap: 40px;
  justify-content: space-between;
  border-radius: 20px;
  background: rgba(0, 0, 0, 0.7);
  -webkit-backdrop-filter: blur(15px);
          backdrop-filter: blur(15px);
}
header .navBar .logo {
  color: #fff;
  font-size: 30px;
  text-align: center;
  margin-left: -30px;
}
header .navBar .logoImg {
  width: 80px;
  height: 80px;
}
header .navBar .links {
  display: flex;
  gap: 1.5rem;
}
header .navBar .toggleBtn {
  margin-left: 20px;
  color: #fff;
  font-size: 1.5rem;
  cursor: pointer;
  display: none;
}
header .actionBtn {
  background-color: #25d366;
  color: #fff;
  padding: 0.5rem 1rem;
  border: 1px solid #1dac51;
  outline: none;
  border-radius: 20px;
  font-size: 0.9rem;
  font-weight: bold;
  min-width: 220px;
  cursor: pointer;
  transition: scale 0.2 ease;
}
header .actionBtn:hover {
  scale: 1.05;
  color: #fff;
}
header .actionBtn:active {
  scale: 0.95;
}
header .dropdownMenu {
  display: none;
  position: absolute;
  right: 2rem;
  top: 70px;
  height: 0;
  width: 300px;
  background: rgba(0, 0, 0, 0.7);
  -webkit-backdrop-filter: blur(15px);
          backdrop-filter: blur(15px);
  border-radius: 15px;
  overflow: hidden;
  transition: height 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
header .dropdownMenu ul li {
  padding: 0.7rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
header .dropdownMenu .actionBtn {
  width: 60%;
  display: flex;
  justify-content: center;
}
header .dropdownMenu.open {
  height: 350px;
}

main {
  width: 100%;
  position: relative;
  /* Section: HERO */
}
main #hero {
  position: relative;
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
main #hero img {
  -o-object-fit: cover;
     object-fit: cover;
  width: 100%;
  height: 100vh;
}
main #hero::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 300px;
  z-index: 10;
  background: linear-gradient(to top, #03a0f5, transparent);
}
main #hero::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 300px;
  z-index: 10;
  background: linear-gradient(to bottom, #0280c4, transparent);
}
main #hero .content {
  position: absolute;
  z-index: 100;
  max-width: 900px;
  text-align: center;
}
main #hero .content h1 {
  color: #ffffff;
  font-size: 4.5em;
}
main #hero .content p {
  color: white;
  font-size: 2em;
}
main #hero .content .btn {
  position: relative;
  display: inline-block;
  margin-top: 20px;
  background: white;
  color: #333;
  text-decoration: none;
  padding: 12px 25px;
  border-radius: 30px;
  transition: 0.5s;
}
main #hero .content .btn:hover {
  background: rgba(255, 255, 255, 0.9);
}
main #detergentes,
main #baño,
main #cocina,
main #hogar,
main #papeles,
main #automovil {
  position: relative;
  min-height: 100vh;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  background-color: #03a0f5;
  padding-bottom: 40px;
  padding-top: 130px; /* Ajusta según la altura de tu navbar */
}
main #detergentes h2,
main #baño h2,
main #cocina h2,
main #hogar h2,
main #papeles h2,
main #automovil h2 {
  color: white;
  font-size: 4em;
  z-index: 100;
}
main #detergentes .subTitle,
main #baño .subTitle,
main #cocina .subTitle,
main #hogar .subTitle,
main #papeles .subTitle,
main #automovil .subTitle {
  color: white;
  font-size: 2em;
  padding: 0 80px;
  z-index: 100;
}
main #detergentes .services,
main #baño .services,
main #cocina .services,
main #hogar .services,
main #papeles .services,
main #automovil .services {
  height: auto;
  width: 100%;
  background-color: #03a0f5;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  flex-flow: wrap;
  gap: 30px;
  margin-top: 30px;
  padding: 20px 200px 20px 200px;
}
main #detergentes .services h3,
main #baño .services h3,
main #cocina .services h3,
main #hogar .services h3,
main #papeles .services h3,
main #automovil .services h3 {
  margin-top: 10px;
  color: white;
  font-size: 1.2em;
}
main #detergentes .services .product,
main #baño .services .product,
main #cocina .services .product,
main #hogar .services .product,
main #papeles .services .product,
main #automovil .services .product {
  min-width: 320px; /* Establece un ancho fijo para las cartas */
  max-width: 320px;
  min-height: 430px;
  max-height: 430px;
  background: rgba(0, 0, 0, 0.7);
  transition: 0.5s;
  border-radius: 10px;
  padding: 20px;
  margin: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
main #detergentes .services .product h3,
main #baño .services .product h3,
main #cocina .services .product h3,
main #hogar .services .product h3,
main #papeles .services .product h3,
main #automovil .services .product h3 {
  color: #ffffff;
  font-size: 1.5em;
  text-align: center;
  margin: 0;
}
main #detergentes .services .product img,
main #baño .services .product img,
main #cocina .services .product img,
main #hogar .services .product img,
main #papeles .services .product img,
main #automovil .services .product img {
  max-width: 250px;
  height: 200px;
  margin-top: 10px;
  padding: 20px;
}
main #detergentes .services .product .description,
main #baño .services .product .description,
main #cocina .services .product .description,
main #hogar .services .product .description,
main #papeles .services .product .description,
main #automovil .services .product .description {
  font-size: 1em;
  margin-top: 10px;
  overflow: hidden;
}
main #detergentes .services .product .paragraphTwo,
main #baño .services .product .paragraphTwo,
main #cocina .services .product .paragraphTwo,
main #hogar .services .product .paragraphTwo,
main #papeles .services .product .paragraphTwo,
main #automovil .services .product .paragraphTwo {
  color: #ffffff;
  font-size: 1.6em;
  font-weight: bold;
  top: 0;
  margin-top: 10px;
}
main #detergentes .services .product:hover,
main #baño .services .product:hover,
main #cocina .services .product:hover,
main #hogar .services .product:hover,
main #papeles .services .product:hover,
main #automovil .services .product:hover {
  background: rgba(6, 58, 94, 0.7);
}
main #footer {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  background-color: #005e91;
}
main #footer .copyright {
  margin-top: 20px;
  margin-bottom: 20px;
  color: #ffffff;
  font-size: 18px;
  font-weight: 600;
  text-align: center;
}
main #footer .copyright a {
  color: #03a0f5;
  font-size: 20px;
}
main #footer .copyright a:hover {
  color: #cfcfcf;
}

/* RESPONSIVE DESIGN */
@media (max-width: 1600px) {
  header {
    width: 100%;
  }
  header .navBar {
    max-width: 360px;
    min-width: 360px;
    height: 120px;
    gap: 0;
  }
  header .navBar .links {
    display: none;
  }
  header .navBar .logo {
    color: #fff;
    font-size: 30px;
    text-align: center;
    margin-left: -30px;
  }
  header .navBar .logoImg {
    margin-left: -10px;
  }
  header .navBar .toggleBtn {
    display: block;
    margin-left: -10px;
  }
  header .actionBtn {
    display: none;
  }
  header .dropdownMenu {
    margin-top: 75px;
    display: block;
    left: 2rem;
    width: unset;
  }
}
@media (max-width: 1115px) {
  main #detergentes,
  main #baño,
  main #cocina,
  main #hogar,
  main #papeles,
  main #automovil {
    position: relative;
    min-height: 100vh;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    background-color: #03a0f5;
    padding-bottom: 40px;
    padding-top: 0px; /* Ajusta según la altura de tu navbar */
  }
  main #detergentes h2,
  main #baño h2,
  main #cocina h2,
  main #hogar h2,
  main #papeles h2,
  main #automovil h2 {
    color: white;
    font-size: 4em;
    z-index: 100;
  }
  main #detergentes .subTitle,
  main #baño .subTitle,
  main #cocina .subTitle,
  main #hogar .subTitle,
  main #papeles .subTitle,
  main #automovil .subTitle {
    color: white;
    font-size: 2em;
    padding: 0 80px;
    z-index: 100;
  }
  main #detergentes .services,
  main #baño .services,
  main #cocina .services,
  main #hogar .services,
  main #papeles .services,
  main #automovil .services {
    padding: 0px;
  }
  main #detergentes .services .product,
  main #baño .services .product,
  main #cocina .services .product,
  main #hogar .services .product,
  main #papeles .services .product,
  main #automovil .services .product {
    transform: scale(0.8);
  }
}
@media (max-width: 850px) {
  main #hero .content {
    font-size: 90%;
  }
  main #detergentes h2,
  main #baño h2,
  main #cocina h2,
  main #hogar h2,
  main #papeles h2,
  main #automovil h2 {
    font-size: 3em;
  }
  main #detergentes .subTitle,
  main #baño .subTitle,
  main #cocina .subTitle,
  main #hogar .subTitle,
  main #papeles .subTitle,
  main #automovil .subTitle {
    font-size: 1.8em;
  }
}
@media (max-width: 780px) {
  main #hero .content {
    font-size: 80%;
  }
  main #footer .copyright {
    padding: 0px 20px;
  }
}
@media (max-width: 650px) {
  main #hero .content {
    font-size: 70%;
  }
}
@media (max-width: 560px) {
  main #hero .content {
    font-size: 60%;
  }
}
@media (max-width: 470px) {
  header .navBar {
    transform: scale(0.8);
  }
  main #hero .content {
    font-size: 50%;
  }
  main #detergentes h2,
  main #baño h2,
  main #cocina h2,
  main #hogar h2,
  main #papeles h2,
  main #automovil h2 {
    font-size: 2.5em;
  }
  main #detergentes .subTitle,
  main #baño .subTitle,
  main #cocina .subTitle,
  main #hogar .subTitle,
  main #papeles .subTitle,
  main #automovil .subTitle {
    font-size: 1.2em;
  }
}
@media (max-width: 400px) {
  main #hero .content {
    font-size: 40%;
  }
  main #detergentes h2,
  main #baño h2,
  main #cocina h2,
  main #hogar h2,
  main #papeles h2,
  main #automovil h2 {
    font-size: 2.2em;
  }
  main #detergentes .subTitle,
  main #baño .subTitle,
  main #cocina .subTitle,
  main #hogar .subTitle,
  main #papeles .subTitle,
  main #automovil .subTitle {
    font-size: 1em;
  }
}
/* BAR */
::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background: #cfcfcf;
}

::-webkit-scrollbar-thumb {
  background: #b1b1b1;
  height: 120px;
}

::-webkit-scrollbar-thumb:hover {
  background: #969696;
}/*# sourceMappingURL=style.css.map */