body {
  background:#000;
  color:#fff;
  font-family:Arial,sans-serif;
  margin:0;
  padding:0;
}
h2 {
  color:#f1c40f;
  text-align:center;
  margin-top:40px;
}

/* HEADER */
header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  padding:10px 20px;
  background:#111;
  border-bottom:1px solid #333;
  position:sticky;
  top:0;
  z-index:100;
}
header img { width:80px; }
header h1 { flex-grow:1; text-align:center; font-size:1.8rem; margin:0; color:#f1c40f; }
header p { margin:0; font-size:1rem; color:#ccc; }

/* TOP BAR (NAV + BUSCADOR) */
.top-bar { position:sticky; top:0; z-index:1001; }
.navbar { background:#1e1e1e; border-bottom:2px solid #bfa36f; }
.nav-container {
  max-width:1200px;
  margin:auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:10px 20px;
}
.logo { font-size:1.6rem; font-weight:bold; color:#e1c56c; }
.menu-icon { font-size:2rem; cursor:pointer; display:none; color:white; }
#menu-toggle { display:none; }

.nav-links {
  list-style:none;
  display:flex;
  gap:25px;
  margin:0;
  padding:0;
}
.nav-links a, .nav-links label {
  color:white;
  text-decoration:none;
  padding:10px;
  display:block;
}
.nav-links a:hover, .nav-links label:hover {
  background:#333;
  border-radius:4px;
}

/* 🔽 MENÚ DE CATEGORÍAS PROFESIONAL MEJORADO */
.has-submenu {
  position: relative;
}
.has-submenu > a {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 500;
  letter-spacing: 0.5px;
  transition: color 0.3s ease;
}
.has-submenu > a::after {
  content: "▾";
  font-size: 0.7rem;
  transition: transform 0.3s ease;
}
.has-submenu:hover > a::after {
  transform: rotate(180deg);
}

/* Dropdown corregido y pegado al botón */
.has-submenu ul {
  opacity: 0;
  visibility: hidden;
  position: absolute;
  top: 100%; /* justo debajo del botón */
  left: 0;
  background: rgba(30,30,30,0.95);
  backdrop-filter: blur(8px);
  border-radius: 10px;
  min-width: 220px;
  padding: 8px 0;
  list-style: none;
  box-shadow: 0 12px 25px rgba(0,0,0,0.7);
  pointer-events: none;
  transform: translateY(0); /* pegado al botón */
  transition: opacity 0.3s ease, transform 0.3s ease;
  z-index: 999;
}

/* Mantener visible y clickeable */
.has-submenu:hover ul,
.has-submenu ul:hover {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* Links del dropdown */
.has-submenu ul li a {
  display: block;
  padding: 12px 18px;
  font-size: 0.95rem;
  color: #f0f0f0;
  text-decoration: none;
  transition: all 0.3s ease;
  border-left: 3px solid transparent;
  border-radius: 5px;
}
.has-submenu ul li a:hover {
  background: linear-gradient(90deg, #494948, #757574);
  color: #000;
  border-left: 3px solid #f1c40f;
  padding-left: 24px;
}
.has-submenu ul li a.active {
  background: #494948;
  color: #fff !important;
  font-weight: bold;
  border-left: 3px solid #f1c40f;
}

/* Animación dropdown */
@keyframes fadeInMenu {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* BUSCADOR */
.buscador { text-align:center; padding:10px 20px; background:#1e1e1e; }
.buscador input {
  width:80%;
  max-width:400px;
  padding:12px 20px;
  border-radius:30px;
  border:none;
  font-size:1rem;
  outline:none;
  transition:0.3s;
}
.buscador input:focus { box-shadow:0 0 10px #f1c40f; }

/* PRODUCTOS */
.contenedor-productos {
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:20px;
  padding:40px 20px;
}
.producto {
  width:300px;
  height:420px;
  background:#111;
  border-radius:15px;
  overflow:hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  position:relative;
  opacity:0;
}
.producto:hover { transform: translateY(-5px); box-shadow:0 0 20px 2px #f1c40f; }
.producto img { width:100%; height:300px; object-fit:cover; }
.producto .overlay {
  position:absolute; top:0; left:0; width:100%; height:100%;
  background:rgba(0,0,0,0.4);
  display:flex; justify-content:center; align-items:center;
  opacity:0; transition:0.3s;
}
.producto:hover .overlay { opacity:1; }
.producto .overlay i {
  font-size:2rem; color:#fff; background:#e91e63;
  padding:15px; border-radius:50%; cursor:pointer; transition:0.3s;
}
.producto .overlay i:hover {
  transform:scale(1.3) rotate(10deg);
  box-shadow:0 0 15px #f1c40f;
}
.producto .info { padding:15px; text-align:center; }

/* ANIMACION ENTRADA */
@keyframes fadeIn {
  from {opacity:0; transform:translateY(20px);}
  to {opacity:1; transform:translateY(0);}
}
.fade-in { animation: fadeIn 0.5s forwards; }

/* FOOTER */
footer { background:#111; padding:40px 20px; text-align:center; }
.footer-content { max-width:800px; margin:auto; }
.redes { display:flex; justify-content:center; gap:20px; margin:20px 0; }
.icono {
  display:flex; justify-content:center; align-items:center;
  width:60px; height:60px; border-radius:50%;
  font-size:1.8rem; transition:0.3s;
}
.icono.whatsapp { background:#25D366; color:white; }
.icono.facebook { background:#3b5998; color:white; }
.icono.instagram { background:#E1306C; color:white; }
.icono:hover {
  transform:scale(1.3) rotate(10deg);
  box-shadow:0 0 15px #f1c40f;
}
.mapa iframe { width:100%; border-radius:10px; margin-top:20px; }
.footer-bottom { margin-top:20px; font-size:0.9rem; color:#ccc; }

/* CARRITO */
.cart-container { position: relative; }
.cart-icon {
  position: relative;
  display: flex; align-items: center;
  color: white; text-decoration:none;
  font-size:1.5rem;
}
#contador-carrito {
  position: absolute; top: -8px; right: -12px;
  background: #e91e63; color: #fff;
  font-size: 0.8rem; width: 18px; height: 18px;
  border-radius: 50%;
  display: flex; justify-content: center; align-items: center;
}
#mini-carrito {
  display: none; position: absolute;
  top: 35px; right: 0;
  width: 220px; max-height: 300px; overflow-y: auto;
  background: #111; border: 1px solid #333;
  border-radius: 8px; padding: 10px; z-index: 10;
  box-shadow:0 0 10px #f1c40f;
}
.cart-container:hover #mini-carrito { display:block; }
#mini-carrito p {
  margin:5px 0; font-size:0.9rem; color:#fff;
  border-bottom:1px solid #333; padding-bottom:3px;
}
#mini-carrito p:last-child { border-bottom:none; }

/* RESPONSIVE */
@media(max-width:768px) {
  header { flex-direction:column; text-align:center; }
  header img { margin-bottom:8px; }
  header h1 { font-size:1.5rem; }
  .menu-icon { display:block; }
  .nav-links {
    display:none; flex-direction:column; width:100%;
    background:#1e1e1e; margin-top:10px;
    border-radius:0 0 10px 10px;
  }
  #menu-toggle:checked + .menu-icon + .nav-links { display:flex; }
  .nav-links li { width:100%; border-top:1px solid #333; }

  /* Dropdown acordeón móvil */
  .has-submenu ul {
    position: static;
    background:#292929;
    padding-left:0;
    display:none;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
  }
  .has-submenu input:checked + label + ul {
    display:block;
    max-height: 500px;
  }
  .has-submenu ul li a {
    padding: 12px 20px;
    font-size:0.95rem;
  }
}