body{
  margin:0;
  font-family:Arial;
  background:#f4f4f4;
}

/* HEADER */

.header{
  background:rgb(0, 0, 0);
  height:150px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 40px;
  position:relative;
}
.cart-icon{
  position:relative;
  cursor:pointer;
  background:none;
  border:none;
  padding:5px;
}

.cart-img{
  width:70px;
  height:auto;
}

.cart-count{
  position:absolute;
  top:-5px;
  right:-8px;
  background:red;
  color:white;
  font-size:12px;
  padding:2px 6px;
  border-radius:50%;
}

/* ICONOS */

.icon{
  color:black;
  font-size:22px;
  cursor:pointer;
  margin-left:15px;
}

/* LOGO CENTRADO */

.logo{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
}

.logo img{
  height:120px;
}

/* IZQUIERDA */

.left{
  display:flex;
  align-items:center;
}

/* MENU SUPERIOR */

.menu{
  display:flex;
  align-items:center;
  gap:20px;
  margin-left:20px;
}

.menu a{
  color:rgb(255, 255, 255);
  text-decoration:none;
  font-weight:bold;
  font-size:15px;
  transition:0.3s;
}

.menu a:hover{
  color:#bbbbbb;
}

/* DERECHA */

.right{
  display:flex;
  align-items:center;
  gap:25px;
}

/* CARRITO */

.cart-icon{
  position:relative;
  cursor:pointer;
}

.cart-count{
  position:absolute;
  top:-8px;
  right:-10px;
  background:red;
  color:white;
  font-size:12px;
  padding:2px 6px;
  border-radius:50%;
}

/* BUSCADOR */

.search-bar{
  background:black;
  padding:15px;
  display:none;
  justify-content:center;
}

.search-bar input{
  width:300px;
  padding:10px;
  border-radius:25px;
  border:none;
  outline:none;
}

/* HERO */

.hero{
  height:350px;
  background:url("img/gorras top.jpg");
  background-size:cover;
  background-position:center;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  color:white;
  text-align:center;
}

.hero h1{
  font-size:40px;
  margin-bottom:10px;
}

.hero button{
  padding:12px 20px;
  border:none;
  background:black;
  color:white;
  cursor:pointer;
  border-radius:5px;
}

/* FEATURES */

.features{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:20px;
  padding:40px;
  background:white;
}

.feature{
  text-align:center;
}

.feature img{
  width:80px;
  margin-top:15px;
}

/* ===== MARCAS ===== */

/* FORZAR TEXTO BLANCO EN PRODUCTOS */
.brands a{
  color:white;
  text-decoration:none;
}

.brand-name{
  color:white; /* asegura que el texto sea blanco */
}

.brands{
  padding:60px;
  background:#e5e5e5;
}

.brands-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:30px;
}

.brands-header h2{
  font-size:28px;
  letter-spacing:2px;
}

.ver-todo{
  background:black;
  color:white;
  padding:12px 25px;
  border-radius:30px;
  text-decoration:none;
  font-size:14px;
}

.brands-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:30px;
}

.brand{
  position:relative;
  overflow:hidden;
  cursor:pointer;
}

.brand img{
  width:100%;
  height:320px;
  object-fit:cover;
  transition:0.4s;
}

.brand:hover img{
  transform:scale(1.1);
}

.brand-name{
  position:absolute;
  bottom:20px;
  left:50%;
  transform:translateX(-50%);
  background:rgb(0, 0, 0);
  padding:10px 25px;
  font-weight:bold;
  letter-spacing:1px;
}

/* ===== CONTACTO + FOOTER ===== */

#contacto{
  padding:60px;
  background:black;
  color:white;
}

.contenedor-contacto{
  display:flex;
  justify-content:space-between;
  align-items:center;
  max-width:1200px;
  margin:auto;
  gap:20px;
}

/* COLUMNAS */
.columna{
  flex:1;
}

/* IZQUIERDA */
.izquierda img{
  width:220px;
}

/* CENTRO */
.centro{
  text-align:center;
}

.centro h2{
  font-weight:bold;
}

/* DERECHA */
.derecha{
  text-align:right;
}

.derecha a{
  color:white;
  text-decoration:underline;
}

.btn-unirme{
  display:inline-block;
  background:#48a8dc;
  color:black;
  padding:12px 25px;
  border-radius:30px;
  text-decoration:none;
  font-weight:bold;
  transition:0.3s;
}

.btn-unirme:hover{
  background:#48a8dc;
  transform:scale(1.05);
}

/* FOOTER */
footer{
  background:black;
  color:white;
  text-align:center;
  padding:20px;
  border-top:1px solid #333;
}

/* ===== RESPONSIVE ===== */

@media(max-width:700px){

  .logo img{
    height:80px;
  }

  .search-bar input{
    width:200px;
  }

  .hero{
    height:250px;
  }

  .hero h1{
    font-size:26px;
  }

  .menu{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
}

  /* CONTACTO RESPONSIVE */
  .contenedor-contacto{
    flex-direction:column;
    text-align:center;
  }

  .derecha{
    text-align:center;
  }
}
@media(max-width:700px){

  .header{
    flex-direction:column;
    height:auto;
    padding:20px;
    gap:10px;
  }

  .logo{
    position:static;
    transform:none;
  }

}
@media(max-width:700px){

  .brands{
    padding:30px 20px;
  }

  .brands-grid{
    grid-template-columns:1fr;
  }

  .brand img{
    height:220px;
  }

}