@charset "UTF-8";
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: "Inter", sans-serif;
  font-style: normal;
}

.active {
  display: none;
}

/* HEADER */
.header-contacto {
  background-color: #324e9f;
}
.header-contacto .header-contacto-info {
  margin: 7px 13px;
}
.header-contacto .header-contacto-info a {
  color: rgb(255, 255, 255);
  text-decoration: none;
  margin: 0 10px;
  font-size: 15px;
}
.header-contacto .header-contacto-iconos {
  margin: 7px 13px;
}
.header-contacto .header-contacto-iconos svg {
  width: 25px;
  color: white;
}

.header-principal .menu-phone {
  display: none;
}
.header-principal .header-principal-logo {
  margin: 0px 50px;
}
.header-principal .header-principal-logo img {
  width: 180px;
  margin-right: 90px;
}
.header-principal .header-principal-buscador {
  width: 400px;
}
.header-principal .header-principal-iconos {
  margin: 0px 40px;
}
.header-principal .header-principal-iconos svg {
  color: #324ea0;
  font-weight: 400;
}

@media (max-width: 640px) {
  .header-contacto {
    align-items: center;
    background-color: #324e9f;
  }
  .header-contacto .header-contacto-info {
    margin: 2px 8px;
  }
  .header-contacto .header-contacto-info a {
    color: rgb(255, 255, 255);
    text-decoration: none;
    margin: 0 5px;
    font-size: 10px;
  }
  .header-contacto .header-contacto-iconos {
    margin: 0px 10px;
  }
  .header-contacto .header-contacto-iconos svg {
    width: 15px;
    color: white;
    margin-bottom: 3px;
  }
  .header-principal .menu-phone {
    display: inline;
    margin-left: 5px;
  }
  .header-principal .header-principal-logo {
    margin: 10px 50px;
  }
  .header-principal .header-principal-logo img {
    width: 120px;
  }
  .header-principal .header-principal-buscador {
    display: none;
  }
  .header-principal .header-principal-iconos {
    margin-left: 0px;
    margin-right: 3px;
  }
}
/* BARRA DE NAVEGACION */
.nav-bar-menu {
  background-color: #f3f3f3;
  height: 40px;
}
.nav-bar-menu .nav-bar-menu-links {
  color: #e3e3e3;
  height: 40px;
}
.nav-bar-menu .nav-bar-menu-links li {
  margin: 0px 10px;
  list-style-type: none;
}
.nav-bar-menu .nav-bar-menu-links li a {
  margin: auto;
  font-size: 15px;
  text-decoration: none;
  color: #5c5c5c;
  font-weight: 400;
  text-transform: uppercase;
}

/* CARROUSEL */
.carousel {
  background-color: #ffffff;
}

.bi-chevron-left {
  color: #3150a6;
}

.bi-chevron-right {
  color: #3150a6;
}

.carruselInfo {
  display: flex;
  justify-content: center;
  flex-direction: column;
}

.carruselImg {
  width: 100%;
}

@media (max-width: 640px) {
  .carruselInfoPhone {
    height: 200px;
    margin: auto;
  }
  .carruselInfo {
    display: flex;
    justify-content: center;
    flex-direction: column;
    width: 170px;
  }
  .carruselInfo .btn {
    width: 100px;
  }
  .carruselInfo p {
    display: none;
  }
  .carousel-img {
    margin: auto;
  }
}
/* NAV-BAR-INFO */
.nav-info {
  display: flex;
  justify-content: center;
}

.nav-info {
  margin: 30px 0px;
}
.nav-info .nav-info-body {
  width: 250px;
  margin-top: 0px;
}
.nav-info .nav-info-body .nav-info-body-text {
  margin-left: 10px;
}
.nav-info .nav-info-body .nav-info-body-text h3 {
  font-size: 18px;
  margin: 0px;
  font-weight: 200;
  color: #202020;
}
.nav-info .nav-info-body .nav-info-body-text a {
  text-decoration: none;
  color: #324ea0;
  font-size: 14px;
  font-weight: 500;
}

@media (max-width: 640px) {
  .nav-info {
    display: non;
  }
}
/* MAIN-CARD-PROMOS */
main {
  background-color: #f3f3f3;
}
main .main-promos-text a {
  font-size: 35px;
  font-weight: 400;
  text-decoration: none;
  color: #202020;
}

.card-title-promo {
  text-decoration: line-through;
  height: 10px;
}

.main-promos {
  background-color: #f3f3f3;
  padding: 50px;
}

.contenedor-img {
  width: 15rem;
  height: 200px;
}
.contenedor-img img {
  height: 200px;
}
.contenedor-img .total-promo {
  position: absolute;
  top: 0px;
  right: 0px;
  background-color: rgba(255, 0, 0, 0.807);
  color: #ffffff;
  width: 60px;
  height: 30px;
  font-size: 18px;
  border-radius: 5px;
  text-align: center;
  margin: 7px 10px;
}

.card-text {
  width: 80%;
  height: 36px;
  color: #636363;
}

.btn-agregar {
  margin: auto;
  width: 100px;
  padding: 6px;
  background-color: #324e9f;
  border-radius: 10px;
  text-align: center;
  color: white;
  text-decoration: none;
}

.card {
  width: 16rem;
  height: 100%;
  transition: 0.5s;
}

.card:hover {
  box-shadow: 5px 5px 5px 5px rgba(14, 41, 110, 0.27);
}

@media (max-width: 640px) {
  .marcas {
    margin-top: 4px;
    text-align: center;
  }
  .card-none {
    display: none;
  }
  .main-promos {
    padding: 5px;
  }
  .card {
    width: 170px;
    margin: 5px;
  }
  .contenedor-img {
    width: 100%;
  }
  .contenedor-img img {
    height: 180px;
  }
  main {
    background-color: #f3f3f3;
  }
  main .main-promos-text .marcas {
    margin-top: 20px;
    text-align: center;
  }
}
/* SECTION GUANTES */
.section-container {
  height: 414px;
  width: 95%;
  background-color: white;
}

.section-img {
  margin-top: 30px;
  background-color: rgb(255, 255, 255);
  border-radius: 0%;
  width: 50%;
}
.section-img .section-img-guantes {
  margin: auto;
  border-radius: 10%; /* Ajusta el valor según sea necesario */
  padding-bottom: 100px;
  width: 380px;
}

.section-guantes-text {
  margin: auto;
  width: 50%;
}
.section-guantes-text h4 {
  font-size: 40px;
  margin-bottom: 10px;
}
.section-guantes-text p {
  width: 600px;
  color: #636363;
}

.section-guantes-text-dos {
  margin: auto;
  width: 50%;
  padding-left: 200px;
}
.section-guantes-text-dos h4 {
  font-size: 40px;
  margin-bottom: 10px;
}
.section-guantes-text-dos p {
  width: 500px;
  color: #636363;
}

@media (max-width: 640px) {
  .section-container {
    height: 230px;
    width: 100%;
    margin: auto;
  }
  .section-img {
    margin-top: 30px;
    background-color: rgb(255, 255, 255);
    border-radius: 0%;
  }
  .section-img .section-img-guantes {
    margin: auto;
    border-radius: 10%; /* Ajusta el valor según sea necesario */
    padding-bottom: 100px;
    width: 180px;
  }
  .section-guantes-text {
    margin: auto;
    width: 50%;
    padding: 15px;
  }
  .section-guantes-text h4 {
    font-size: 30px;
    margin-bottom: 10px;
  }
  .section-guantes-text p {
    width: 100%;
    color: #636363;
    margin-bottom: 5px;
  }
  .section-guantes-text-dos {
    margin: auto;
    width: 50%;
    padding: 12px;
  }
  .section-guantes-text-dos h4 {
    font-size: 30px;
    margin-bottom: 10px;
  }
  .section-guantes-text-dos p {
    width: 100%;
    color: #636363;
    margin-bottom: 5px;
  }
}
/* SUSCRIPCION */
.suscripcion {
  display: none;
  background-color: white;
 
}

.suscripcion-text {
  margin: 0px 25px;
}
.suscripcion-text h4 {
  font-size: 20px;
}

.header-principal-buscador {
  width: 500px;
}
.header-principal-buscador .input-group .btn {
  background-color: #3150a6;
  color: #ffffff;
}

@media (max-width: 640px) {
  .suscripcion {
    background-color: #f3f3f3;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  .header-principal-buscador {
    width: 80%;
  }
}
/* FOOTER */
footer {
  height: 250px;
  padding: 40px;
  background-color: #f3f3f3;
}
footer .footer-ayuda ul, footer .footer-contacto ul {
  list-style-type: none;
  padding-left: 0px;
  color: #585858;
}
footer .footer-ayuda ul a, footer .footer-contacto ul a {
  color: #585858;
  text-decoration: none;
  list-style-type: none;
}
footer .footer-suscripcion p {
  color: #585858;
}
footer .footer-suscripcion .btn {
  background-color: #324e9f;
  color: white;
}

@media (max-width: 640px) {
  footer {
    height: 120px;
    padding: 10px;
    flex-wrap: wrap;
  }
  footer .footer-ayuda h4, footer .footer-contacto h4 {
    font-size: 10px;
  }
  footer .footer-ayuda ul, footer .footer-contacto ul {
    list-style-type: none;
    padding-left: 0px;
    color: #585858;
  }
  footer .footer-ayuda ul a, footer .footer-contacto ul a {
    color: #585858;
    text-decoration: none;
    list-style-type: none;
    font-size: 8px;
  }
  footer .footer-ayuda li, footer .footer-contacto li {
    font-size: 8px;
  }
  footer .footer-seguinos h4 {
    font-size: 10px;
  }
  footer .footer-seguinos svg, footer .footer-seguinos path {
    width: 15px;
    height: 15px;
  }
  footer .footer-suscripcion {
    display: none;
  }
  .seccionContactanos {
    display: flex !important;
    flex-direction: column;
  }
}
/*   <!--PRODUCTOS CARD PAPELERIA--> */
.info-gam {
  display: flex;
  justify-content: center;
}
.info-gam .logo-gam {
  display: flex;
  justify-content: center;
  width: 100%;
  margin: auto;
}
.info-gam .logo-gam-container {
  width: 205px;
  height: 192px;
  border-radius: 80%;
  padding: 10px;
  border: 2px solid #374f97;
  display: flex;
  margin-left: 100px;
}
.info-gam .gam-text {
  margin: auto;
}
.info-gam .gam-text .gam-text-titulo {
  border-bottom: solid 2px #374f97;
  width: 90%;
  margin-top: 15px;
}
.info-gam .gam-text .gam-textP p {
  margin-top: 15px;
  width: 80%;
}

/* --- Productos.html --- */
/* PRODUCTOS INFO */
.container-productos {
  background-color: white;
  padding: 25px;
}
.container-productos .section-producto-info p {
  margin: 5px;
  color: #5b5b5b;
}
.container-productos .section-producto-filtrado .btn {
  margin-right: 10px;
  background-color: #f3f3f3;
  width: 100px;
}

@media (max-width: 640px) {
  .info-gam {
    display: none;
  }
  .section-producto-filtrado {
    display: flex;
  }
}
/* PRODUCTOS CARD */
.container-card .container-card-filtrado {
  padding-left: 25px;
  width: 30%;
}
.container-card .container-card-filtrado ul {
  padding-left: 0;
}
.container-card .container-card-filtrado ul li {
  list-style-type: none;
}
.container-card .container-card-filtrado ul li a {
  color: rgb(98, 98, 98);
  text-decoration: none;
}
.container-card .container-card-productos .card {
  margin: 10px;
}

/* --- contacto.html --- */
.main-form {
  margin: 40px 0px;
}
.main-form .form-phone {
  width: 50%;
}
.main-form .form-contacto {
  width: 50%;
}
.main-form .form-contacto p {
  color: #555555;
}
.main-form .form-contacto a {
  color: #202020;
  text-decoration: none;
  margin: 10px;
}

.form-form .btn {
  margin: 16px 0px;
  background-color: #324ea0;
  color: white;
}

@media (max-width: 640px) {
  .form {
    display: flex;
    flex-direction: column;
    width: 100%;
  }
  .main-form {
    margin: 40px 0px;
  }
  .main-form .form-phone {
    width: 100%;
  }
  .main-form .form-contacto {
    width: 100%;
  }
  .main-form .form-contacto p {
    width: 90%;
    color: #555555;
  }
  .main-form .form-contacto a {
    color: #202020;
    text-decoration: none;
    margin: 10px;
  }
  .iframe {
    width: 10px;
  }
}
/* ingresoUsiario.html */
.container-ingreso-usuario {
  width: 300px;
  margin: 50px 0px;
}
.container-ingreso-usuario h1 {
  text-align: center;
  font-weight: 300;
  margin-bottom: 20px;
}
.container-ingreso-usuario .btn {
  width: 100%;
  margin: 5px 0px;
  background-color: #324ea0;
  color: white;
  margin-top: 20px;
}

/* registroUsiario.html */
.container-registro-usuario {
  width: 100%;
  margin: 50px 0px;
}
.container-registro-usuario h1 {
  text-align: center;
  font-weight: 300;
  margin-bottom: 20px;
}
.container-registro-usuario .btn {
  text-align: center;
  width: 25%;
  margin: 5px 0px;
  background-color: #324ea0;
  color: white;
  margin-top: 20px;
}
.container-registro-usuario .form-control {
  width: 300px;
  margin: 10px;
}
.container-registro-usuario .section-registro-usuario {
  width: 100%;
}

@media (max-width: 640px) {
  .container-registro-usuario .form-control {
    width: 90%;
    margin: 5px;
  }
}
/* Carrito de compras */
.carrito-compras {
  position: absolute;
  top: 100px;
  right: 50px;
  width: 25%;
  background-color: #ffffff;
  border: rgb(87, 87, 87) solid 0.2px;
  border-radius: 5px;
}
.carrito-compras h2 {
  padding: 10px;
  font-size: 20px;
  font-weight: 300;
}
.carrito-compras .producto-carrito-compras {
  padding: 15px;
  border-bottom: #cecece 0.5px solid;
}
.carrito-compras .producto-carrito-compras img {
  border-radius: 10px;
}
.carrito-compras .producto-carrito-compras .carrito-compras-descripcion {
  width: 100%;
}
.carrito-compras .producto-carrito-compras .carrito-compras-descripcion .carrito-compras-descripcion-info h2 {
  padding: 0;
  font-weight: 400;
}
.carrito-compras .producto-carrito-compras .carrito-compras-descripcion .carrito-compras-descripcion-info p {
  color: #363636;
  font-size: 17px;
}

.total-precio {
  padding-top: 20px;
}
.total-precio .total {
  font-size: 20px;
}
.total-precio .total-num {
  font-size: 20px;
  margin-left: 5px;
}

@media (max-width: 640px) {
  .carrito-compras {
    position: absolute;
    top: 100px;
    right: 0px;
    width: 100%;
    border-radius: 0px;
  }
  .carrito-compras h2 {
    padding: 3px;
  }
}
/* Ingreso usuarios */
.ingreso-usuario-ventana {
  position: absolute;
  top: 100px;
  right: 75px;
  padding: 10px;
  width: 30%;
  background-color: #ffffff;
  border: rgb(87, 87, 87) solid 0.2px;
  border-radius: 5px;
}
.ingreso-usuario-ventana h2 {
  padding: 10px;
  font-size: 20px;
  font-weight: 300;
}
.ingreso-usuario-ventana .btn {
  width: 100%;
  margin: 5px 0px;
  background-color: #324ea0;
  color: white;
  margin-top: 5px;
}

@media (max-width: 640px) {
  .nav-bar-menu {
    display: none;
  }
  .ingreso-usuario-ventana {
    position: absolute;
    right: 0px;
    padding: 10px;
    width: 100%;
    height: 50%;
    border-radius: 0px;
  }
  .ingreso-usuario-ventana h2 {
    padding: 10px;
    font-size: 20px;
    font-weight: 300;
  }
}
/* ---- infomarcion productos --- */
.info-container {
  position: fixed;
  top: 130px;
  width: 100%; /* Ancho fijo del contenedor padre */
  height: 75%; /* Altura fija del contenedor padre */
  margin: auto; /* Centra el contenedor padre horizontalmente en la ventana */
}
.info-container .info-prodcutos {
  background-color: #e5e5e5;
  margin: auto;
  width: 1000px;
  height: 100%;
  border-radius: 1.5%;
  box-shadow: 0px 0px 67px 0px rgba(0, 0, 0, 0.75);
}

/*WSP*/
.iconoWsp {
  position: fixed;
  bottom: 28px;
  right: 40px;
}

@media (max-width: 640px) {
  .iconoWsp {
    position: fixed;
    bottom: 50px;
    right: 40px;
  }
}
.btn-whatsapp {
  position: relative;
}

.btn-whatsapp img {
  position: relative;
  z-index: 2;
  width: 46px;
  height: 47px;
}

.btn-whatsapp:before,
.btn-whatsapp:after {
  content: "";
  position: absolute;
  left: 0px;
  width: 45px;
  height: 45px;
  border-radius: 50%;
  background-color: #00e676;
  opacity: 0;
  animation: onda 1.7s infinite;
}

.btn-whatsapp:before {
  animation-delay: 1s;
}

.btn-whatsapp::after {
  animation-delay: 1.3s;
}

@keyframes onda {
  0% {
    transform: scale(1);
  }
  15% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: scale(2.5);
  }
}
.seccionContactanos h4 {
  font-size: 35px;
  font-weight: 400;
  border-bottom: 3px solid rgb(160, 184, 236);
  padding-bottom: 10px;
}
.seccionContactanos p {
  font-size: 20px;
}

.seccion-texto-contactanos {
  margin: 100px 0px 0px 50px;
}

.imagen-con-capa {
  position: relative;
  overflow: hidden;
  display: inline-block;
}

.imagen-con-capa::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(77, 77, 251, 0); /* Puedes ajustar el color y la opacidad según tus preferencias */
  z-index: 3; /* Ajusta el índice z según sea necesario para superponer la capa */
}

.imagen-con-capa-dos {
  position: relative;
  overflow: hidden;
  display: inline-block;
}

.imagen-con-capa-dos::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(118, 77, 251, 0); /* Puedes ajustar el color y la opacidad según tus preferencias */
  z-index: 3; /* Ajusta el índice z según sea necesario para superponer la capa */
}

.imagen-con-capa-tres {
  position: relative;
  overflow: hidden;
  display: inline-block;
}

.imagen-con-capa-tres::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(106, 77, 251, 0); /* Puedes ajustar el color y la opacidad según tus preferencias */
  z-index: 3; /* Ajusta el índice z según sea necesario para superponer la capa */
}

.custom-next-btn {
  color: black; /* Puedes ajustar el color según tus preferencias */
}

.custom-prev-btn {
  color: black; /* Puedes ajustar el color según tus preferencias */
}

@media (max-width: 640px) {
  .imagen-con-capa {
    height: 200px;
  }
  .imagen-con-capa-dos {
    height: 200px;
  }
  .imagen-con-capa-tres {
    height: 150px;
  }
  .seccion-texto-contactanos {
    margin: 10px 0px 0px 10px;
  }
  .section-guantes-phone {
    display: none;
  }
}
.nosotros {
  background-image: url("../imagens/fondo contacto.png");
  height: 100vh; /* Ocupa el 100% del alto de la ventana visible */
  width: 100%;
  background-size: cover; /* o "contain" según tus preferencias */
  background-position: center; /* Ajusta según tus necesidades */
  background-repeat: no-repeat; /* Evita la repetición de la imagen */
}
.nosotros .nosotros-contenedor {
  display: flex;
  justify-content: center;
  margin: auto;
}
.nosotros .nosotros-contenedor h1 {
  font-size: 30px;
}
.nosotros .nosotros-contenedor p {
  width: 100%;
  color: #313131;
}

.carousel-dark {
  width: 50%;
}

.card-desktop {
  display: flex;
}

.card-phone {
  display: none;
}

.nosotros-text-contenedor {
  width: 50%;
  margin-top: 40px;
}

@media (max-width: 640px) {
  .nosotros {
    height: 80vh; /* Ocupa el 100% del alto de la ventana visible */
  }
  .nosotros-text-contenedor {
    width: 90%;
    margin-top: 0px;
    margin-bottom: 30px;
  }
  .nosotros-text {
    width: 80%;
    margin-top: 0px;
    font-size: 10px;
  }
  .nosotros-contenedor {
    display: flex;
    justify-content: center;
    margin: auto;
    flex-direction: column;
    align-items: center;
  }
  .nosotros-contenedor img {
    width: 30%;
  }
  .carousel-item {
    width: 100%;
  }
  .carousel-item img {
    width: 100%;
    height: 100%;
    margin: auto;
  }
  .costum-row {
    display: flex;
    flex-direction: column;
    margin: auto;
    margin-left: 30px;
  }
  .carousel-dark {
    width: 100%;
  }
  .card-desktop {
    display: none;
  }
  .card-phone {
    display: flex;
  }
  .marcas {
    flex-direction: column;
    align-items: center;
  }
  .marcas-phone {
    display: none;
  }
  .tipo-de-guantes-phone {
    display: none;
  }
}

/*# sourceMappingURL=style.css.map */

 /* Definir el estilo de texto predeterminado */
.hover-darken {
    transition: color 0.2s ease-in-out; /* Agrega una transición suave */
}

/* Definir el estilo del texto cuando se hace hover */
.hover-darken:hover {
   color: rgba(0, 0, 0, 0.7); /* Oscurecer el color del texto al 70% */
}



.slider {
  width: 80%;
  height: auto;
  margin: auto;
  overflow: hidden;
}
.slider h4 {
  color: white;
  text-decoration: none;
  width: 100%;
  font-size: 17px;
  text-align: center;
  margin-bottom: 0px;
  margin: 2px;
}

.slider .slide-track {
  display: flex;
  animation: scroll 40s linear infinite;
  -webkit-animation: scroll 40s linear infinite;
  width: calc(200px * 14);
}

.slider .slide {
  width: 250px;
  margin-left: 20px;
  text-align: center;
}

.slider .slide img {
  width: 100%;
}

@keyframes scroll {
  0% {
      -webkit-transform: translateX(0);
      transform: translateX(0);
  }
  100% {
      -webkit-transform: translateX(calc(-200px * 7));
      transform: translateX(calc(-200px * 7));
  }
}