/* ================= RESET ================= */
* {margin:0;padding:0;box-sizing:border-box;font-family:"Arial", sans-serif;}

/* ================= HERO ================= */
.hero {
  height: 130vh;
  background:#000;
  color:#fff;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  text-align:center;
  padding:50px 20px;
}
.hero .logo {width:300px;margin-bottom:80px;}
.hero h1 {font-size:3.5rem;margin-bottom:30px;}
.hero p {font-size:1.6rem;margin-top:15px;color:#ccc;font-style:italic;}

/* ===== Buscador global reutilizable (arriba de "Más Vendidos") ===== */
.site-search {
  background:#fff;
  padding: 18px 15px 8px;
  border-bottom: 1px solid #eee;
}
.site-search .search-bar {
  display:flex;
  gap:0;
  justify-content:center;
}
.site-search .search-bar input {
  padding: 10px 14px;
  border: 1px solid #ccc;
  border-right: none;
  border-radius: 999px 0 0 999px;
  outline: none;
  width: min(800px, 92vw);
  font-size: 15px;
  background: #fafafa;
}
.site-search .search-bar button {
  background:#000;
  color:#fff;
  border: 1px solid #000;
  border-left: none;
  padding: 10px 16px;
  border-radius: 0 999px 999px 0;
  cursor:pointer;
}
.site-search .search-bar button i { font-size: 14px; }

/* ================= MÁS VENDIDOS ================= */
.destacados {padding:40px 15px;background:#f9f9f9;}
.destacados h2 {margin-bottom:15px;font-size:2rem;text-align:center;color:#111;}
.vendidos-wrapper {position:relative;display:flex;align-items:center;}
.scroll-vendidos {
  display:flex;gap:15px;overflow-x:auto;padding-bottom:10px;scrollbar-width:thin;scroll-behavior:smooth;
}
.scroll-vendidos::-webkit-scrollbar {height:8px;}
.scroll-vendidos::-webkit-scrollbar-thumb {background:#ccc;border-radius:4px;}
.scroll-vendidos::-webkit-scrollbar-track {background:#f1f1f1;}
.scroll-vendidos .card {
  min-width:180px;background:#fff;border-radius:12px;
  box-shadow:0 3px 6px rgba(0,0,0,0.1);padding:15px;text-align:center;
  flex-shrink:0;transition:transform 0.2s ease;
}
.scroll-vendidos .card:hover {transform:translateY(-5px);}
.scroll-vendidos .card img {width:100%;max-width:120px;margin:0 auto 10px;display:block;object-fit:contain;}
.scroll-vendidos .card h3 {font-size:1rem;color:#333;}
.arrow {
  position:absolute;top:50%;transform:translateY(-50%);
  background:#000;color:#fff;border:none;padding:10px;border-radius:50%;
  cursor:pointer;z-index:10;opacity:0.7;transition:opacity 0.3s;
}
.arrow:hover {opacity:1;}
.arrow.left {left:0;}
.arrow.right {right:0;}

/* ================= CATEGORÍAS ================= */
.categorias {padding:50px 15px;text-align:center;background:#fff;}
.categorias h2 {margin-bottom:25px;font-size:2rem;color:#111;}
.grid-categorias {
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:20px;
}
.categoria {
  background:#111;color:#fff;border-radius:12px;overflow:hidden;text-align:center;
  box-shadow:0 4px 10px rgba(0,0,0,0.2);transition:transform 0.3s ease;
}
.categoria:hover {transform:translateY(-5px);}
.categoria img {width:100%;height:180px;object-fit:cover;}
.categoria h3 {font-size:1rem;margin:10px 0;padding:0 5px;}
.btn-explorar {
  display:inline-block;margin-bottom:15px;padding:8px 15px;background:#ffcc00;
  color:#000;font-weight:bold;border-radius:6px;text-decoration:none;transition:background 0.2s;
}
.btn-explorar:hover {background:#e6b800;}
@media (max-width:1024px){.grid-categorias{grid-template-columns:repeat(3,1fr);}}
@media (max-width:768px){.grid-categorias{grid-template-columns:repeat(2,1fr);}}

/* ================= PREVIEWS ================= */
.preview {padding:40px 20px;}
.preview-header {
  display:flex;justify-content:space-between;align-items:center;margin-bottom:15px;
}
.tag {
  background:#000;color:#fff;padding:5px 15px;border-radius:20px;font-size:0.9rem;
}
.btn-mas {
  background:#000;color:#fff;border:none;padding:6px 15px;border-radius:20px;cursor:pointer;
}

/* (Se mantiene por si reutilizas .search-bar en otras secciones) */
.search-bar {
  display: flex;
  justify-content: center;
  margin-bottom: 15px;
}
.search-bar input {
  padding: 8px 12px;
  border: 1px solid #ccc;
  border-radius: 20px 0 0 20px;
  outline: none;
  width: 60%;
}
.search-bar button {
  background: #000;
  color: #fff;
  border: none;
  padding: 8px 15px;
  border-radius: 0 20px 20px 0;
  cursor: pointer;
}

.grid-preview {display:grid;gap:15px;}
.caballeros-preview {grid-template-columns:repeat(2,1fr);} /* 2 columnas */
.caballeros-preview .card {
  background:#f4f4f4;border-radius:10px;text-align:center;padding:10px;
}
.caballeros-preview .card img {
  width:100%;
  height:160px;
  object-fit:cover;
}
.caballeros-preview .card h3 {margin-top:8px;font-size:0.9rem;}

/* ================= PRODUCTOS (vistas de categoría) ================= */
.search-header {
  display: flex;
  justify-content: center;
  padding: 10px;
  background: #f9f9f9;
}
.search-header input {
  padding: 8px 12px;
  border: 1px solid #ccc;
  border-radius: 20px 0 0 20px;
  outline: none;
  width: 70%;
}
.search-header button {
  background: #000;
  color: #fff;
  border: none;
  padding: 8px 15px;
  border-radius: 0 20px 20px 0;
  cursor: pointer;
}
.filtros {text-align: center;padding: 15px;background: #fff;}
.filtros a {color:#000;text-decoration:none;margin:0 5px;}
.filtros span {font-weight:bold;color:#ffcc00;}
.productos {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:20px;
  padding:20px;
}
.producto {
  background:#fff;
  border-radius:12px;
  box-shadow:0 4px 8px rgba(0,0,0,0.1);
  padding:15px;
  text-align:center;
  position:relative;
}
.producto img {
  width:100%;
  height:200px;
  object-fit:contain;
}
.producto h3 {margin:10px 0;font-size:1rem;}
.producto .precio {font-size:1.1rem;font-weight:bold;color:#000;}
.producto .descuento {color:#ff0000;font-size:0.9rem;}
.producto .precio-original {text-decoration:line-through;font-size:0.9rem;color:#777;}
.producto .tag {
  position:absolute;top:10px;left:10px;
  background:#444;color:#fff;font-size:0.8rem;padding:2px 8px;border-radius:8px;
}
/* Marca en chiquito y en negritas (debajo de imagen) */
.producto .marca{
  display:block;
  font-size: 11px;
  font-weight: 700;
  opacity: .9;
  margin: 6px 0 0;
}

/* ================= FOOTER ================= */
footer {
  margin-top:40px;background:#111;color:#eee;text-align:center;
  padding:20px 15px;font-size:0.9rem;
}
footer a {color:#ffcc00;text-decoration:none;}
footer a:hover {text-decoration:underline;}
.payments {display:flex;justify-content:center;gap:20px;margin:15px 0;}
.payments img {width:50px;}
.social-icons {margin-top:15px;}
.social-icons a {font-size:2rem;margin:0 10px;display:inline-block;transition:transform 0.2s ease;}
.social-icons a:hover {transform:scale(1.2);}
.social-icons .whatsapp {color:#25D366;}
.social-icons .instagram {color:#E4405F;}