:root{
  /* --f-carousel-dot-color: var(--f-carousel-theme-color, currentColor); */
  --f-carousel-dot-color: transparent;
}

@font-face {
  font-family: Bauhaus;
  src: url("../fuentes/BAUHS93.TTF");
}

body {
  font-family: "Roboto", sans-serif;
  background-color: #f7f7f7;
}

/* Estilo para el modal en el centro de la pantalla */
.modal-center {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 100vh;
}

.botonCerrar {
  max-width: 50px;
  max-height: 50px;
}

.modal-fuente,
.bannerFuente {
  font-family: "Roboto", sans-serif;
  color: #fff;
}

.bg-barraNav {
  background-image: url(../img/fondo/fondo.jpg);
  background-size: cover;
  background-repeat: no-repeat;
}

.bg-barraNav {
  border-bottom: 1px solid orangered;
}

h1 {
  font-family: "Bauhaus";
}
a > h1 {
  text-decoration: none;
}

a .sombra {
  background-color: rgba(0, 0, 0, 0.5);
}
a > .sombra:hover {
  background-color: rgba(0, 0, 0, 0.5);
}

.logo {
  max-width: 80px;
  max-height: 80px;
}

.btn-redondo {
  border: 1px solid #000;
  border-radius: 10px;
}

.icono-menu {
  background-image: url(../img/iconos/menu.png);
  background: linear-gradient(to top, yellow, white);
  max-width: 100px;
  max-height: 100px;
}

.btn-buscar {
  background-image: url(../img/iconos/buscar.png);
  background-repeat: no-repeat;
  background-size: contain;
  content: "";
  height: 50px;
  width: 50px;
  margin: 0 5px;
}
.btn-buscar:hover {
  background-color: #fff4ac;
}

.bolsaCarrito {
  background-image: url(../img/iconos/bolsa.png);
  background-size: contain;
  background-repeat: no-repeat;
  content: "";
  width: 50px;
  height: 50px;
}
.bolsaCarrito:hover {
  background-color: #fff4ac;
}

.lista {
  list-style: none;
}

.camion {
  background-image: url(../img/iconos/envio.png);
  background-size: contain;
  background-repeat: no-repeat;
  content: "";
  width: 40px;
  height: 40px;
  max-width: 50px;
  max-height: 50px;
}
.bg-cabeza,
.bg-footer {
  background-color: #fff8c8;
}

.btn-barraNav {
  color: #000;
  font-family: "Roboto", sans-serif;
  font-size: 20px;
  padding-left: 10px;
}

.btn-barraNav:hover {
  background-image: linear-gradient(to bottom, yellow, orange);
  color: orangered;
  border-radius: 10px;
  padding-left: 10px;
  transition: all 0.2s;
}

#pagina_activa {
  background-image: linear-gradient(to bottom, yellow, orange);
  padding: 0 15px;
  border-radius: 10px;
}

.carouselBanner {
  width: 100%;
  /* aspect-ratio: 2/1; */
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  max-height: 400px;
}
.carousel-indicators .active {
  opacity: 1;
}
.carousel-indicators [data-bs-target] {
  background-image: url(../img/iconos/bolita.png);
  box-sizing: content-box;
  flex: 0 1 auto;
  width: 30px;
  height: 30px;
  padding: 0;
  margin-right: 3px;
  margin-left: 3px;
  cursor: pointer;
  background-color: #fff;
  background-clip: padding-box;
  opacity: 0.5;
  transition: opacity 0.6s ease;
  border: 1px solid;
  border-radius: 50%;
  background-color: #000;
}

/* Estilo personalizado para las flechas izquierda y derecha */
.carousel-control-prev-icon {
  background-image: url(../img/iconos/izquierda_prev.png);
  width: 50px;
  height: 50px;
}

.carousel-control-next-icon {
  background-image: url(../img/iconos/derecha_next.png);
  width: 50px;
  height: 50px;
}

/*Carrusel de banderas */
.banderitas1 {
  border-radius: 5px;
  box-shadow: 5px 5px 5px #e0c1c1;
  margin-bottom: 10px;
  max-width: 100px;
  max-height: 130px;
}

.banderitas {
  border-radius: 5px;
  box-shadow: 5px 5px 5px #e0c1c1;
  margin-bottom: 10px;
  max-width: 100px;
  max-height: 100px;
}

/*banderas dentro del acordeon*/
.degrade {
  background: linear-gradient(to top, rgb(243, 243, 167), white);
}

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* Crea 3 columnas de igual ancho */
  margin: auto;
}
@media (min-width: 768px) {
  .grid-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* Crea 3 columnas de igual ancho */
    margin: auto;
  }
}
@media (min-width: 1200px) {
  .grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* Crea 3 columnas de igual ancho */
    margin: auto;
  }
}

.grid-item {
  display: flex;
  justify-content: center; /* Centra las imágenes horizontalmente */
  align-items: center; /* Centra las imágenes verticalmente */
}

.grid-talles-contenedor {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  grid-gap: 5px;
  
  
}
@media (min-width: 768px) {
  .grid-talles-contenedor {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 5px;
  }
}
@media (min-width: 1200px) {
  .grid-talles-contenedor {
    display: grid;
    align-content: start;
    grid-template-columns: repeat(1, 1fr);
    grid-gap: 5px;
  }
  .grid-talles {
    border: 1px solid #ffdd00;
    text-align: center;
    margin-bottom: 10px;
    padding: 15px;
    border-radius: 5px;
    cursor: pointer;
    
  }
}
.grid-talles {
  border: 1px solid #ffdd00;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  margin: 0;
  border-radius: 5px;
  cursor: pointer;
  width:  30px;
  height: 30px;
  
}

.grid-talles:hover {
  background-color: rgb(255, 221, 0);
  color: #000;
  transition: all 0.5s;
  cursor: pointer;
}

.btnDeshabilitado {
  background-color: #cccccc;
  color: #838385;
}

.modelos {
  background-image: linear-gradient(to bottom, yellow, white);
  box-shadow: 5px 5px 5px rgba(255, 255, 255, 0.5);
}
.modelosArribos {
  background-image: linear-gradient(to bottom, yellow, blue);
  box-shadow: 5px 5px 5px rgba(255, 255, 255, 0.5);
}

.modeloSubtitulo {
  border-bottom: 1px solid #ffdd00;
}


.carousel-caption {
  text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.516);
  background-color: #00000080;
  border-radius: 10px;
  width: 50%;
  margin: auto;
}

.botonesPromo {
  width: 150px;
  height: 150px;
}
.fotoFooter {
  max-width: 250px;
  max-height: 250px;
  margin: 10px auto;
  border-radius: 20px;
  box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.5);
  border: 5px solid #ffed7b;
  padding: 10px;
}

footer {
  background-color: #fff4ac;
  color: #000;
  height: 500px;
  margin-top: 20px;
}

/* .textoFooter {
  font-size: 14px;
  
} */

.fondoFooter {
  width: 100%;
  height: 100px;
  position: fixed;
  bottom: -20px;
  left: 0;
  overflow: hidden;
  margin: 0;
  padding: 0;
  z-index: 1000;
}

.footerSubir {
  position: fixed;
  width: 50px;
  height: 50px;
  bottom: 30px;
  right: 50px;
  z-index: 2000;
  display: none;
}

@media (min-width: 570px) {
  .footerSubir {
    position: fixed;
    width: 50px;
    height: 50px;
    bottom: 45px;
    right: 470px;
    z-index: 2000;
  }
}
@media (min-width: 768px) {
  .footerSubir {
    display: block;
    position: fixed;
    width: 50px;
    height: 50px;
    bottom: 30px;
    right: 80px;
    z-index: 2000;
  }
}

.degradeFooter {
  background: black;
  opacity: 0.8;
}

.itemsFooterA {
  text-decoration: none;
  text-align: center;
}

.itemsFooter:hover {
  background-color: #fff4ac;
  cursor: pointer;
  color: #fff;
  border-radius: 5px;
  transition: all 1s;
}
/*----------------------------------------------------- */
/*PRODUCTOS ------------------------------------------- */
/*----------------------------------------------------- */

.botonesTalles {
  cursor: pointer;
}

.botonesTalles:hover {
  background-color: #ffdd00;
}
/*CARRITO - COMPRAR*/
.imagenesCarrito {
  max-width: 200px;
  max-height: 200px;
  box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.5);
  border-radius: 5px;
}

.quitarCarrito {
  font-weight: bold;
  color: red;
}

@media (min-width: 570px) {
  .ajusteTablaCompra {
    display: flex;
  }
}
@media (min-width: 576px) {
  .ajusteTablaCompra {
    display: flex;
  }
}
.botonForm {
  background-color: #fff4ac;
 
}
.botonForm:hover {
  background-color: #fff4ac;
  box-shadow: 5px 5px 5px rgba(255, 255, 255, 0.5);
  border: 1px solid #403838;
}
.botonFormCancelar{
  background-color:  rgb(198, 187, 251, .3);
  transition: all .5s;
}
.botonFormCancelar:hover {
  background-color: rgb(198, 187, 251, .5);
  box-shadow: 5px 5px 5px rgba(255, 255, 255, 0.5);
  border: 1px solid #403838;
}



.escudo{
  width:  50px;
  height: 50px;
  max-width:  50px;
  max-height: 50px;
}

#myCarouselMarcas { 
  --f-carousel-spacing: 10px;
  --f-carousel-slide-width: 20%;
  --f-progress-color: transparent;
}

#myCarouselMarcas .f-carousel__slide {
  padding: 10px;
  background: linear-gradient(to top, rgb(243, 243, 167), white);
  /* background: #eee; */
  /* max-width: 100px; */

}



.marcas{
  width: 100%;
  padding: 0;
  margin: 0;

}


/*COMPRAR.HTML ----------*/
.precio{
  background-color: #fff8c8;
}
.precioTotal{
  background-color: rgba(113, 211, 226, .3);
}

.bg-comprar{
  background-color: #bdecb6;
  
}
.bg-comprar:hover{
  background-color: #bcffb2;
}
.bg-cancelar{
  background-color: rgba(203, 50, 52, .3);
  
}
.bg-cancelar:hover{
  background-color: #ff8587;
}
.bg-cantidad:hover{
  background-color: #fb7173;
  color: #fff;
}

/*---------------------------------------------------------
------ INICIO --------------------------------------------
----------------------------------------------------------*/
.maskOferta{
  height: 50px;
}
.imgRatio{
  aspect-ratio: 1 / 1;
}
.bg-verMas{
  background-color: #bcffb2;
}
.bg-verMas:hover{
  background-color: #82ff6f;
}
.oferta{
  max-width: 40px;
}
.productosCards{
  max-width: 70%;
}
.mejoresProductos{
  min-height: 200px;
  background-size: cover;
  background-position: center;
  width: 100%;
  background-repeat: no-repeat;
  top: 50%;
  background-image: url(../img/banner/banner_nike.png);
  border-radius: 10px;
}
.mejoresProductos1{
  min-height: 200px;
  background-size: cover;
  background-position: center;
  width: 100%;
  background-repeat: no-repeat;
  background-image: url(../img/banner/banner_topper.png);
  border-radius: 10px;
}
.mejoresProductos2{
  min-height: 200px;
  background-size: cover;
  background-position: center;
  width: 100%;
  background-repeat: no-repeat;
  background-image: url(../img/banner/banner_puma.png);
  border-radius: 10px;
}
.mejoresProductos3{
  min-height: 200px;
  background-size: cover;
  background-position: center;
  width: 100%;
  background-repeat: no-repeat;
  background-image: url(../img/banner/banner_lecoq.png);
  border-radius: 10px;
}
.btn-suscribite{
  background-color: #82ff6f;
}
.btn-suscribite:hover{
  background-color: #44ff28;
  border: 1px solid grey;
}

/*---------------------------------------------------------- 
* ------ redes sociales ------------------------------------
----------------------------------------------------------*/
#social {
  list-style: none;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  margin: 0;
  padding: 0;
  
}
@media (min-width: 768px) {
  #social {
    list-style: none;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
}


#social li a {
  display: inline-block;
  background: url(../img/iconos/social.png);
  width:  84px;
  height: 84px;
  max-width:  84px;
  max-height: 84px;
  font-size: 0px;
}

#social #ig a:hover {
  background-position: 0 -84px;
  background-image: url(../img/iconos/social_hover.png);
  transition: all 0.5s none;
}

#social #fb a {
  background-position: -84px -84px;
  background-image: url(../img/iconos/social.png);
}
#social #fb a:hover {
  background-position: -84px -84px;
  background-image: url(../img/iconos/social_hover.png);
  transition: all 0.7s linear;
}

#social #tw a {
  background-position: -164px -84px;
  background-image: url(../img/iconos/social.png);
}
#social #tw a:hover {
  background-position: -164px -84px;
  background-image: url(../img/iconos/social_hover.png);
  transition: all 0.7s linear;
}

/*---------------------------------------------------------
---- NOSOTROS --------------------------------------------
----------------------------------------------------------*/

.seccion, .seccionTestimonios{
  margin: auto;
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: 1rem;
}
/***************************************************/
/******************* 768 ***************************/
/***************************************************/
@media screen and (min-width: 768px) {
  .seccion, .seccionTestimonios {
    margin: auto;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
  }
  

}
/***************************************************/
/******************* 990 ***************************/
/***************************************************/
@media screen and (min-width: 900px) {
  .seccion{
    margin: auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
  }
 
  .item-01{
    grid-column: 2 / 4;
    grid-row: 1 / 1;
  }
  .item-02{
    grid-column: 1 / 2;
    grid-row: 1 / 1;
  }

  .item-03{
    grid-column: 1 / 3;
    grid-row: 2 / 2;
  }
  .item-04{
    grid-column: 3 / 4;
    grid-row: 2 / 2;
  }

  .item-06{
    grid-column: 2 / 4;
    grid-row: 3 / 3;
  }
 

}

.resaltar,
.resaltar1,
.resaltar2 {
  position: relative;
  display: inline-block;
  color: #ddd;
  transition: transform 0.5s;
  border-radius: 10px;
  padding: 7px;
}

.resaltar::before,
.resaltar1::before,
.resaltar2::before {
  position: absolute;
  content: "";
  display: inline-block;
  width: 100%;
  height: 100%;
  background-color: #48a3ee;
  z-index: -1;
  padding: 0 4px;
  transform: rotate(-2deg) translate(-4px, -2px);
  transition: transform 0.5s;
}
.resaltar1::before {
  background-color: #ffcb7d;
  transform: rotate(-2deg) translate(-4px, -2px);
}
.resaltar2::before {
    background-color: #ffd390;
    transform: rotate(2deg) translate(-4px, -2px);
    width: 100%;
    
  }

  /*TESTIMONIALES -------------------------- 
  -----------------------------------------
  ---------------------------------------*/
  .contenedorT{
    display: flex;
    flex-direction: column;
    width:  100%;
    height: 100%;
    background-color: rgba(72, 163, 238, .4);
    border-radius: 10px;
    box-shadow: 5px 5px 10px #000;
    
  }


.imgTestimonio{
  max-width:  100px;
  max-height: 100px;
  border-radius: 50%;
  border: 2px solid #333;

}
.bg-testimonios{
  background-color: #455a64;
}

/***************************************************/
/******************* 990 ***************************/
/***************************************************/
@media screen and (min-width: 900px) {
  .seccionTestimonios{
    margin: auto;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: repeat(3, 1fr);
    gap: 2rem;
  }
 
  .itemT-01{
    grid-column: 1 / 4;
    grid-row: 1 / 1;
  }

  .itemT-02{
    grid-column: 4 / 7;
    grid-row: 1 / 1;
  }

  .itemT-03{
    grid-column: 1 / 5;
    grid-row: 2 / 3;
  }
  .itemT-04{
    grid-column: 5 / 7;
    grid-row: 2 / 4;
  }

  .itemT-05{
    grid-column: 1 / 5;
    grid-row: 3 / 4;
  }

}

/*---------------------------------------------------------
---- CONTACTO --------------------------------------------
----------------------------------------------------------*/
.redes{
  max-width:  50px;
  max-height: 50px;
  display: flex;
 justify-content: center;
 align-items: center;
}