@import url('https://fonts.googleapis.com/css2?family=Instrument+Sans:ital,wght@0,400..700;1,400..700&display=swap');
:root {
  --color-principal: #0D8BB9;
  --color-secundario: #3399CC; 
  --color-hover: #1976D2; 
  --color-fondo: #000000; 
  --color-texto: #FFFFFF; 

  /*Accesibilidad*/

  --color-principal: #17b6eb; 
  --color-secundario: #00fff2;
  --color-resaltado: #FFD700; 
  --color-banner: #00ff08; 
  --color-opcional: #c8ff00; 
  --color-letra: #0400ff;
  --color-border: #09ff00;
  --color-botton: #ff00ea;

}
*{
    padding:0px;
    margin: 0px;
    box-sizing: border-box;
}
  body {
    margin: 0;
    padding: 0;
    font-family: 'Inter', sans-serif;
    background-color: #000000;
    color: #ffffff;
    }
    /* Menú hamburguesa */
    .hamburger {
      display: none; /* Oculto en pantallas grandes */
      background: none;
      border: none;
      font-size: 24px;
      color: white;
      cursor: pointer;
    }
    /* Marquesina ticker */
    .marquesina {
    background-color: #0D8BB9;
    overflow: hidden;
    white-space: nowrap;
    position: relative;
    letter-spacing: 2px;
    }
    
    .ticker {
      display: inline-block;
      padding: 10px;
      animation: ticker-scroll 30s linear infinite;
      font-size: 14px;
    }
    
    .contact-button{
      background-color: #0D8BB9;
      padding: 10px;
  }
    
      
    @keyframes ticker-scroll {
      0% {
        transform: translateX(100%);
      }
      100% {
        transform: translateX(-100%);
      }
    }
    
    /* Navbar */
  .nav-bar {
    background-color: #000;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 30px;
    position: relative;
  }
 
  .logo-img {
    width: 7%;
    margin-right: 15px;
  }
 
  .logo {
    font-family: 'Lusitana', serif;
    font-size: 28px;
    color: white;
  }
 
  .nav-links {
    list-style: none;
    display: flex;
    gap: 25px;
    margin: 0;
    padding: 0;
  }
 
  .nav-links li a {
    color: white;
    text-decoration: none;
    font-family: 'Jomhuria', cursive;
    font-size: 2em;
    transition: color 0.3s;
  }
  

 
  
 
  .carrito {
    font-size: 1dem;
    color: white;
    cursor: pointer;
  }

  /* Estilos para los controles de accesibilidad */
.accessibility-controls {
  position: fixed;
  top: 450px;
  left: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 1000;
}

.accessibility-controls button {
  background-color: #17b6eb; /* Verde */
  color: white;
  border: none;
  padding: 10px 15px;
  cursor: pointer;
  border-radius: 5px;
  font-size: 16px;
}

.accessibility-controls button:hover {
  background-color: #00fff2;
}

/* Estilos para el modo de alto contraste y daltonismo */
body.high-contrast {
  background-color: #ffffff; /* Gris oscuro */
  color: #ffd900; /* Gris claro */
}

body.high-contrast h1,
body.high-contrast h2,
body.high-contrast h3 {
  color: #00ff08; /* Azul claro */
}
body.high-contrast .seccion-quienes-somos {
  background-color: rgba(0, 0, 0, 0.49);
}

body.high-contrast .ultimo-moda{
  background-color: rgba(0, 0, 0, 0.49);
}

body.high-contrast a {
  color: #ffd900; /* Verde claro */
}

body.high-contrast button,
body.high-contrast .boton,
body.high-contrast .card button {
  background-color: #c8ff00; /* Azul */
  color: #0400ff;
  border: 1px solid #09ff00;
}

body.high-contrast button:hover,
body.high-contrast .boton:hover,
body.high-contrast .card button:hover {
  background-color: #ff00ea;
}

body.high-contrast .nav-bar,
body.high-contrast .modal-carrito,
body.high-contrast .contactanos-derecha form,
body.high-contrast footer {
  background-color: #137013; /* Gris azulado oscuro */
}

body.high-contrast .banner::before {
  background-color: #137013; /* Azul más intenso */
}

body.high-contrast .carrito {
  color: #00f7ff; /* Verde claro */
}

body.high-contrast .card {
  background-color: rgba(0, 255, 64, 0.7); /* Gris azulado oscuro con transparencia */
}

img {
  filter: contrast(120%);
}

body.high-contrast img {
  filter: contrast(150%);
}

.banner::before {
  background-color: #1E88E5;
}
 
  /* Estilos para los controles de accesibilidad */
.accessibility-controls {
  position: fixed;
  top: 450px;
  left: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 1000;
}

.accessibility-controls button {
  background-color: #17b6eb; /* Verde */
  color: white;
  border: none;
  padding: 10px 15px;
  cursor: pointer;
  border-radius: 5px;
  font-size: 16px;
}

.accessibility-controls button:hover {
  background-color: #00fff2;
}

/* Estilos para el modo de alto contraste y daltonismo */
body.high-contrast {
  background-color: #ec9fff; /* Gris oscuro */
  color: #ffd900; /* Gris claro */
}

body.high-contrast h1,
body.high-contrast h2,
body.high-contrast h3 {
  color: #00ff08; /* Azul claro */
}
body.high-contrast .seccion-quienes-somos {
  background-color: rgba(0, 0, 0, 0.49);
}

body.high-contrast .ultimo-moda{
  background-color: rgba(0, 0, 0, 0.49);
}

body.high-contrast a {
  color: #ffd900; /* Verde claro */
}

body.high-contrast button,
body.high-contrast .boton,
body.high-contrast .card button {
  background-color: #c8ff00; /* Azul */
  color: #0400ff;
  border: 1px solid #09ff00;
}

body.high-contrast button:hover,
body.high-contrast .boton:hover,
body.high-contrast .card button:hover {
  background-color: #ff00ea;
}

body.high-contrast .nav-bar,
body.high-contrast .modal-carrito,
body.high-contrast .contactanos-derecha form,
body.high-contrast footer {
  background-color: #137013; /* Gris azulado oscuro */
}

body.high-contrast .banner::before {
  background-color: #137013; /* Azul más intenso */
}

body.high-contrast .carrito {
  color: #00f7ff; /* Verde claro */
}

body.high-contrast .card {
  background-color: rgba(0, 255, 64, 0.7); /* Gris azulado oscuro con transparencia */
}

body.high-contrast .contenido-nuestra-historia p{
  color: rgb(11, 4, 116);
}

body.high-contrast .nuestros-valores p{
  color: rgb(11, 4, 116);
}

body.high-contrast .vision p{
  color: rgb(0, 225, 255);
}
body.high-contrast .mision p{
  color: rgb(0, 225, 255);
}

img {
  filter: contrast(120%);
}
body.high-contrast .coleccion-urbana{
  background-color: rgb(58 44 75);
}

body.high-contrast img {
  filter: contrast(150%);
}  
    /*Banner estilos*/
.banner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 50px;
  position: relative;
  overflow: hidden; /* Para ocultar el desbordamiento del romboide */
}
.banner-content {
  flex: 1;
  color: #FFFFFF;
}

.banner-content h1 {
  font-family: 'Jomhuria', cursive;
  font-size: 7em;
  font-weight: 100;
  margin-bottom: -20px;
}

.banner-content p {
  font-family: 'Lusitana', serif;
  font-size: 2em;
  margin-top: 15px;
  text-align: end;
  letter-spacing: 1.0em; /* Añade espacio entre letras */
}

.banner-image {
  flex: 1;
  text-align: right;
}

.banner-image img {
  width: 400px;
  height: 500px;
}

/* Franja Azul */
.banner::before {
  content: '';
  position: absolute;
  top: 0;
  left: -20%; /* Ajusta para que el romboide comience fuera de la pantalla */
  width:180%; /* Ajusta para que el romboide cubra todo el banner */
  height: 100%;
  background-color: #0D8BB9;
  transform: skew(-82deg);
  z-index: -1;
}
  /*  seccion descuentos */
  
  .seccion-productos {
  padding: 20px;
  }
  /* Estilo para el contenedor de búsqueda */
  .busqueda {
    position: relative;
    max-width: 300px;
    margin: 0 auto 20px;
}

#input-busqueda {
    width: 100%;
    padding: 10px 40px 10px 15px;
    border: 1px solid #ddd;
    border-radius: 2px;
    font-size: 16px;
    background-color: #fff;
    color: #000;
    outline: none;
}

body.modo-busqueda #input-busqueda {
  width: 100%;
  padding: 10px 40px 10px 15px; /* Más padding para mejor espaciado */
  border: 2px solid #0D8BB9; /* Borde azul para destacar */
  border-radius: 2px; /* Bordes más redondeados */
  font-size: 16px;
  background-color: #fff;
  color: #000;
  outline: none;
  margin-top: 5px;
}
body.modo-busqueda #boton-buscar {
  right: 25px; /* Posición ajustada por el nuevo padding */
  color: #0D8BB9; /* Color azul para coincidir con el diseño */
  font-size: 18px; /* Tamaño ligeramente mayor */
}


#input-busqueda:focus {
    border-color: #0D8BB9;
}

#boton-buscar {
    position: absolute;
    color: #0D8BB9;
    right: 10px;
    top: 55%;
    transform: translateY(-55%);
    background: none;
    border: none;
    cursor: pointer;
    font-size: 16px;
    color: #000;
}
#boton-buscar:hover {
  color: #0D8BB9;
  background-color: rgba(13, 139, 185, 0.1); /* Fondo azul muy tenue */
  transform: translateY(-50%) scale(1.1); /* Ligero aumento de tamaño */
}

.sugerencias {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: white;
    border: 1px solid #ddd;
    border-top: none;
    border-radius: 0 0 4px 4px;
    max-height: 300px;
    overflow-y: auto;
    z-index: 1000;
    display: none;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

.sugerencia-item {
    padding: 10px 15px;
    cursor: pointer;
    color: #333;
    border-bottom: 1px solid #eee;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.sugerencia-item:last-child {
    border-bottom: none;
}

.sugerencia-item:hover {
    background-color: #f5f5f5;
    color: #0D8BB9;
}

.sugerencia-nombre {
    font-weight: bold;
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sugerencia-categoria {
    font-size: 12px;
    color: #666;
    margin-right: 10px;
}

.sugerencia-precio {
    color: #0D8BB9;
    font-weight: bold;
    margin-left: auto;
}
/* Ocultar elementos durante la búsqueda */
body.modo-busqueda .titulo-seccion,
body.modo-busqueda .titulo-coleccion,
body.modo-busqueda .titulo-accesorios,
body.modo-busqueda .descripcion-coleccion,
body.modo-busqueda .llamado-accion,
body.modo-busqueda .linea-divisoria {
    display: none !important;
}

/* Mantener siempre visible el buscador y filtros */
.busqueda,
.filtro-orden {
    display: block !important;
}

/* Opcional: estilo para el modo búsqueda */
body.modo-busqueda {
    background-color: #000; /* Mantener fondo negro */
}

body.modo-busqueda .seccion-productos,
body.modo-busqueda .coleccion-urbana,
body.modo-busqueda .accesorios-reciclados {
    padding-top: 0;
    margin-top: 0;
    background-image: none !important;
}

body.modo-busqueda .producto {
  margin-bottom: 40%;
  flex: 0 0 calc(23.333% - 20px); /* 3 columnas con gap */
  max-width: 280px; /* Ancho máximo para cada card */
  
}
    
    
    /* Filtro de ordenamiento */
    .filtro-orden {
      text-align: center;
      margin-bottom: 20px;
    }
    
    .filtro-orden select {
      padding: 8px 12px;
      border-radius: 5px;
      border: none;
      font-weight: bold;
    }
    
    /* Título */
    .titulo-seccion {
      text-align: center;
      font-size: 1.8em;
      color: #fff;
      font-weight: bold;
      margin-bottom: 25px;
      font-family: 'Bungee Inline', cursive; /* Aplicamos la nueva fuente */
    }

  
    
    /* Grid */
    .productos {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(220px, 250px));
      gap: 20px;
      padding-left: 45px;
      justify-content: center;
    }
    
    /* Tarjetas */
    .producto {
      position: relative;
      background-color: #fff;
      color: #000;
      padding: 15px;
      text-align: center;
      box-shadow: 0 2px 6px rgba(255, 255, 255, 0.1);
      transition: transform 0.3s;
      font-family: 'Bungee Inline', cursive; /* Aplicamos la nueva fuente */
      border-radius: 0; /* Elimina el borde redondeado */
      margin-bottom: 50px;
  }
  /* Aplicar color azul en el descuento y color negro en los precios */
  .precio-original {
      color: #000; /* Precios en negro */
      text-decoration: line-through; /* Agrega un tachado a los precios originales */
  }
    
    .producto:hover {
      transform: translateY(-5px);
    }
    
    .producto img {
      max-width: 100%;
      height: auto;
      
    }
    
    /* Favorito */
    .favorito {
      position: absolute;
      top: 10px;
      right: 10px;
      color: red;
      font-size: 1.8em;
      cursor: pointer;
    }
    
    /* Cantidad */
    .cantidad-producto {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 5px;
      margin-top: 10px;
    }
    
    .cantidad-producto button {
      background-color: #000;
      color: #fff;
      border: none;
      padding: 5px 10px;
      border-radius: 4px;
      cursor: pointer;
      font-size: 1em;
    }
    
    .cantidad-producto input {
      width: 40px;
      text-align: center;
      border: 1px solid #ccc;
      border-radius: 4px;
    }
    .etiqueta-descuento {
      position: absolute;
      top: 10px;
      left: 10px;
      background-color: #0D8BB9;
      color: white;
      font-weight: bold;
      padding: 5px 10px;
      font-size: 1em;
      border-radius: 5px;
      z-index: 1;
    }
    .precio-descuento {
      color: #0D8BB9; /* Azul para el precio con descuento */
      font-size: 1.2em;
      font-weight: bold;
  }
  
    
    /* Estilos para la sección de colección urbana reciclada */
  .coleccion-urbana {
      text-align: center;
      background-color: #000000;
      padding: 0px 15px;
      margin: 40px auto 10px auto; /* 60px de espacio arriba, 40px abajo, centrado */
    }
    
    
    .titulo-coleccion {
      text-align: center;
      font-size: 1.8em;
      color: #fff;
      font-weight: bold;
      margin-bottom: 50px;
      font-family: 'Bungee Inline', cursive;
      
      
  }
    
    .descripcion-coleccion {
      font-family: 'Instrument Sans', sans-serif;
      font-size: 1em;
      color: #ffffff;
      max-width: 800px;
      margin: 0 auto 20px;
    }
    
    .resaltado {
      font-weight: bold;
      color: #7ba8c2;
    }
    
    .llamado-accion {
      font-size: 2em;
      font-weight: bold;
      color: #ffffff;
      margin-bottom: 30px;
      font-family: 'Bungee Inline', cursive;
    }
    
    .productos-coleccion {
      display: grid;
      grid-template-columns: repeat(3, minmax(220px, 1fr));
       /* Máximo 3 columnas */
       padding-left: 45px;
      gap: 20px;
      justify-content: center;
      max-width: 800px; /* ✅ Ajusta el ancho máximo para permitir 3 columnas */
      margin: auto; /* Centrar la sección */
  }
  .productos-coleccion {
      background-image: url('/Assets/images/FondoTranslucido.png'); /* Imagen de fondo */
      
      background-position: top; /* Mueve la imagen hacia arriba */
      background-repeat: no-repeat; /* Evita que la imagen se repita */
      opacity: 1; /* Mantiene la imagen visible */
      background-attachment: fixed;
      background-size: contain;
  }
  
    
    .producto {
      background-color: white;
      border-radius: 0;
      padding: 15px;
      text-align: center;
      box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
      max-width: 200px;
      position: relative;
    }
    
    .favorito {
      position: absolute;
      top: 10px;
      right: 10px;
      font-size: 18px;
      color: red;
      cursor: pointer;
    }
    
    .producto img {
      width: 100%;
      
      margin-bottom: 10px;
    }
    
    .categoria {
      font-size: 14px;
      color: #777;
      margin-bottom: 5px;
    }
    
    .precio {
      font-size: 16px;
      font-weight: bold;
      color: #333;
    }
    
    .cantidad-producto {
      display: flex;
      justify-content: center;
      align-items: center;
      margin: 10px 0;
    }
    
    .btn-menos, .btn-mas {
      background-color: #ddd;
      border: none;
      padding: 5px 10px;
      cursor: pointer;
    }
    
    .btn-menos:hover, .btn-mas:hover {
      background-color: #bbb;
    }
    
    input[type="number"] {
      width: 40px;
      text-align: center;
      border: 1px solid #ccc;
      margin: 0 5px;
    }
    
    
  
    .accesorios-reciclados {
      text-align: center;
      padding: 20px 15px;
      background-color: #000000;
      
  }
  
  .titulo-accesorios {
      font-size: 2em;
      font-weight: bold;
      color: #ffffff;
      margin: 30px auto 40px auto; /* 60px de espacio arriba, 40px abajo, centrado */
  }
  
    .productos-accesorios {
      display: grid;
      grid-template-columns: repeat(3, minmax(220px, 1fr));
       /* Máximo 3 columnas */
      border-radius: 0;
      gap: 20px;
      padding-left: 45px;
      justify-content: center;
      max-width: 800px; /* ✅ Ajusta el ancho máximo para permitir 3 columnas */
      margin: auto; /* Centrar la sección */
  }
  .productos-accesorios {
      background-image: url('/Assets/images/FondoTranslucido.png'); /* Imagen de fondo */
      
      background-position: top; /* Mueve la imagen hacia arriba */
      background-repeat: no-repeat; /* Evita que la imagen se repita */
      opacity: 1; /* Mantiene la imagen visible */
      background-attachment: fixed;
      background-size: contain;
  }
  
  
  
  .producto:hover {
      transform: translateY(-5px);
  }
  
  .producto img {
      width: 100%;
      height: auto;
      
  }
  
  .producto h3 {
      font-size: 1em;
      margin: 10px 0;
      color: #222;
      font-family: 'Instrument Sans', sans-serif;
  }
  
  .producto .categoria {
      font-size:1em;
      color: #666;
  }
  
  .producto .precio {
      font-size: 1em;
      color: #000;
      font-weight: bold;
      margin: 5px 0;
  }
  
  
  .cantidad-producto {
      display: flex;
      justify-content: center;
      align-items: center;
      margin: 10px 0;
  }
  
  .cantidad-producto button {
      background-color: #222;
      color: white;
      border: none;
      padding: 5px 10px;
      font-size: 1em;
      cursor: pointer;
      transition: background 0.3s;
  }
  
  .cantidad-producto button:hover {
      background-color: #444;
  }
  
  .cantidad-producto input {
      width: 40px;
      text-align: center;
      border: 1px solid #ccc;
      border-radius: 5px;
      margin: 0 5px;
      font-size: 1rem;
  }
  
  
  
  
  .favorito {
      font-size: 1.5rem;
      color: #e74c3c;
      cursor: pointer;
      position: absolute;
      right: 15px;
      top: 15px;
  }
  
  
  
  /* Estilos del Carrito */
  .modal-carrito {
      display: none;
      position: fixed;
      top: 0;
      right: 0;
      width: 350px;
      height: 100%;
      background: white;
      color: #333;
      z-index: 1000;
      box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1);
      overflow-y: auto;
      font-size: 11px;
    }
    
    .btn-eliminar {
      background: none;
      border: none;
      color: #ff5252;
      cursor: pointer;
      font-size: 16px;
      margin-left: 10px;
      padding: 5px;
    }
    
    .btn-eliminar:hover {
      color: #ff0000;
    }
    .contenido-carrito {
      padding: 20px;
    }
    
    .close-btn {
      font-size: 24px;
      cursor: pointer;
      float: right;
    }
    
    .item-carrito {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 15px;
      padding-bottom: 15px;
      border-bottom: 1px solid #eee;
    }
    
    .info-producto {
      display: flex;
      align-items: center;
      gap: 10px;
      width: 50%;
    }
    
    .info-producto img {
      border-radius: 4px;
    }
    .cantidad-producto {
    display: flex;
    align-items: center;
    margin: 10px 0;
  }
  
  .cantidad-producto button {
    width: 30px;
    height: 30px;
    background: #0D8BB9;
    color: white;
    border: none;
    border-radius: 4px;
    font-size: 16px;
    cursor: pointer;
  }
  
  .cantidad-producto button:hover {
    background: #0a7ba3;
  }
  
  .cantidad-producto input {
    width: 50px;
    height: 30px;
    text-align: center;
    margin: 0 5px;
    border: 1px solid #ddd;
    border-radius: 4px;
  }
    .controles-cantidad {
      display: flex;
      align-items: center;
      gap: 5px;
    }
    
    .controles-cantidad button {
      background: #f0f0f0;
      border: none;
      width: 25px;
      height: 25px;
      border-radius: 4px;
      cursor: pointer;
    }
    
    .controles-cantidad button:hover {
      background: #ddd;
    }
    
    .btn-eliminar {
      color: #ff5252;
      margin-left: 10px;
    }
    
    #carrito-resumen {
      margin-top: 20px;
      padding-top: 20px;
      border-top: 1px solid #eee;
    }
    
    .btn-finalizar {
      width: 100%;
      padding: 10px;
      background: #0D8BB9;
      color: white;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      margin-top: 10px;
    }
    
    .btn-finalizar:hover {
      background: #0a7ba3;
    }
    
    .overlay {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.5);
      z-index: 999;
    }
    
    /* Notificación */
    .notificacion {
      position: fixed;
      bottom: 20px;
      left: 50%;
      transform: translateX(-50%);
      background: #0D8BB9;
      color: white;
      padding: 12px 24px;
      border-radius: 4px;
      opacity: 0;
      transition: opacity 0.3s ease;
      z-index: 1001;
    }
    
    .notificacion.mostrar {
      opacity: 1;
    }
    /*Ojo detalle producto*/
    
    /* Contenedor para los botones finales */
  .controles-finales {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 10px; /* Espacio entre los botones */
      margin-top: 10px;
  }
  
  /* Estilo para el botón de vista */
  .btn-vista {
      width: 36px;
      height: 36px;
      background-color: rgba(255, 255, 255, 0.9);
      border-radius: 30%;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #333;
      text-decoration: none;
      border: 1px solid #eee;
      transition: all 0.3s ease;
  }
  
  .btn-vista:hover {
      background-color: #333;
      color: white;
  }
  
  .btn-vista i {
      font-size: 16px;
  }
  
  /* Estilo para el botón del carrito (ajustado para coincidir) */
  .btn-carrito {
      width: 36px;
      height: 36px;
      background-color: #0D8BB9;
      color: white;
      border: none;
      border-radius: 30%;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: background-color 0.3s;
  }
  
  .btn-carrito:hover {
      background-color: #0a7ba3;
  }
  
  .btn-carrito i {
      font-size: 16px;
  }
  footer {
    background-color: #000000;
    border-top: 1px solid #FFFFFF;
    padding: 50px 20px;
    color: #FFFFFF;
    font-family: 'Instrument Sans', sans-serif;
  }
  
  .footer-content {
    display: flex;
    justify-content: space-around;
    border-bottom: 1px solid #FFFFFF;
    padding-bottom: 30px;
   
  }
  
  .footer-column {
    width: 30%;
  }
  footer .footer-column a {
    color: white; /* Enlaces en color blanco */
    text-decoration: none; /* Eliminar subrayado */
    transition: color 0.3s ease; /* Transición suave (opcional) */
}
  
  .footer-column h3 {
    text-align: center;
    font-family: 'Bungee Inline', cursive;
    margin-bottom: 20px;
  }
  
  .footer-column p {
    text-align: justify;
    line-height: 1.6;
  }
  
  
  .social-icons {
    display: flex;
    justify-content: center;
    margin-top: 20px;
    gap: 25px;
  }
  
  .fab{
    color: white;
    font-size: 45px;
  }
  .social-icons img {
    width: 30px;
    height: 30px;
    margin: 0 10px;
  }
  
  .copyright {
    text-align: center;
    padding-top: 30px;
  }
  .style{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  
  .image-logo{
    width:50%;
  }
  .logo-footer {
    text-align: center;
}

/* Media Queries */

/* Mobile Styles (max-width: 768px) */
@media (max-width: 768px) {
  .nav-links {
    display: none; /* Oculta el menú en mobile */
    flex-direction: column;
    background-color: #000;
    position: static;
    top: 60px; /* Ajusta según la altura de tu barra de navegación */
    left: 0;
    width: 100%;
    text-align: center;
    flex-grow: 1; /* Permite que el menú crezca para ocupar el espacio disponible */
    z-index: 1000; 
}


.nav-links.active {
    display: flex; /* Muestra el menú cuando está activo */
}
.nav-links li {
    margin: 15px 0;
}
.hamburger {
    display: block; /* Muestra el botón hamburguesa en mobile */
}
.logo-img {
    width: 15%; /* Ajusta el tamaño del logo para mobile */
}
.nav-bar {
    flex-wrap: wrap; /* Permite que los elementos se envuelvan en pantallas pequeñas */
}
  .banner {
      flex-direction: column;
      padding: 20px;
  }

  .banner-content h1 {
      font-size: 50px;
      text-align: center;
      margin-bottom: 0;
  }

  .banner-content p {
      font-size: 2em;
      text-align: center;
      letter-spacing: 0.5em;
  }

  .banner-image {
      text-align: center;
      margin-top: 20px;
  }

  .banner-image img {
      width: 80%;
      height: auto;
  }

  .banner::before {
      left: -50%;
      width: 200%;
      transform: skew(-70deg);
  }

  /* seccion descuentos- barra busqueda- filtro */
  .productos {
    grid-template-columns: 1fr;
    padding-left: 10px;
}

.producto {
    margin-bottom: 20px;
}

.busqueda {
    max-width: 100%;
    padding: 0 10px;
}

.busqueda input {
    width: 100%;
}

/* DEMAS COSAS */
.productos-coleccion, .productos-accesorios {
  grid-template-columns: 1fr;
  padding-left: 10px;
}

.producto {
  max-width: 100%;
  margin-bottom: 20px;
}

/* FOOTER STYLE */
.footer-content {
  flex-direction: column;
  align-items: center;
}

.footer-column {
  width: 90%;
  margin-bottom: 30px;
}

.image-logo {
  width: 70%;
}

.fab {
  font-size: 35px;
}
}

/* Tablet Styles (min-width: 769px) and (max-width: 1024px) */
@media (min-width: 769px) and (max-width: 1024px) {
  .banner {
      padding: 30px;
  }

  .banner-content h1 {
      font-size: 7em;
  }

  .banner-content p {
      font-size: 2em;
      letter-spacing: 0.8em;
  }

  .banner-image img {
      width: 300px;
      height: 400px;
  }

  .banner::before {
      left: -30%;
      width: 190%;
  }

  /*seccion descuentos barra busqueda y mas*/
  .productos {
    grid-template-columns: repeat(2, 1fr);
    padding-left: 20px;
}

.busqueda {
    max-width: 50%;
}

/* DEMAS COSAS*/
.productos-coleccion, .productos-accesorios {
  grid-template-columns: repeat(2, 1fr);
  padding-left: 20px;
}
/* FOOTER */
.footer-content {
  flex-wrap: wrap;
}

.footer-column {
  width: 45%;
  margin-bottom: 30px;
}

.footer-column:last-child {
  width: 100%;
}
}