:root {
   --plomo: #6d6d6d;
   --plomo-oscuro: #4f4f4f;
   --blanco: #ffffff;
   --verde-acento: #5fb638;
   --gap: 12px;
   --max-width: 1200px;

 }

.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 16px;
 
    font-family: 'Space Grotesk', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-style: normal;
    font-weight: 400;
    line-height: 1.45;
    font-size: 14px;
}


 /* ===== HEADER ===== */
 header.topbar {
   background-color: #2c3e50;
   position: sticky;
   /* se queda arriba */
   top: 0;
   z-index: 1100;
   transition: all 0.4s ease;
   padding: 20px;
   /* más alto al inicio */
 }

 .menu-marcas {
   position: relative;
   display: inline-block;
 }


 .menu-marcas>a {
   text-decoration: none;
   color: #fff;
   background: #d32f2f;
   padding: 10px 18px;
   border-radius: 6px;
   font-weight: 600;
   display: inline-block;
   transition: all 0.3s ease;
 }

 .menu-marcas>a:hover {
   background: #b71c1c;
 }

 .submenu-marcas {
   position: absolute;
   top: calc(100% + 6px);
   left: 50%;
   transform: translate(-50%, -10px);
   display: flex;
   flex-direction: column;
   background: #fff;
   border-radius: 10px;
   box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15);
   min-width: 200px;
   opacity: 0;
   pointer-events: none;
   transition: all 0.3s ease;
   z-index: 1000;
   overflow: hidden;
   padding: 5px 0;
 }


 .menu-marcas:hover .submenu-marcas {
   opacity: 1;
   transform: translate(-50%, 0);
   pointer-events: auto;
 }


 .submenu-marcas a {
   display: block;
   padding: 10px 20px;
   color: #333;
   text-decoration: none;
   font-weight: 500;
   white-space: nowrap;
   transition: all 0.25s ease;
 }

 .submenu-marcas a:hover {
   background: #f3f3f3;
   color: #d32f2f;
   padding-left: 25px;
 }
 .menu-marcas>a {
   text-decoration: none;
   color: #fff;
   background: #d32f2f;
   padding: 10px 18px;
   border-radius: 6px;
   font-weight: 600;
   display: inline-block;
   transition: all 0.3s ease;
 }

 .menu-marcas>a:hover {
   background: #b71c1c;
 }

 /* Estado con scroll */
 header.topbar.scrolled {
   background-color: #1a252f;
   /* más oscuro */
   box-shadow: 0 3px 12px rgba(0, 0, 0, 0.3);
   padding: 10px 20px;
   /* se hace más delgado */
   animation: slideDown 0.4s ease forwards;
 }

 /* Animación de entrada */
 @keyframes slideDown {
   0% {
     transform: translateY(-100%);
     opacity: 0;
   }

   100% {
     transform: translateY(0);
     opacity: 1;
   }
 }

 .contenedor_busqueda {
   position: relative;
   width: 300px;
 }

 .input_busqueda {
   width: 100%;
   padding: 10px;
   border: 1px solid #ccc;
   border-radius: 5px;
 }

 .sugerencias {
   position: absolute;
   top: 40px;
   left: 0;
   width: 100%;
   border: 1px solid #ccc;
   border-radius: 5px;
   background: white;
   max-height: 200px;
   overflow-y: auto;
   display: none;
   z-index: 1000;
 }

 .sugerencias div {
   padding: 10px;
   cursor: pointer;
 }

 .sugerencias div:hover {
   background: #f0f0f0;
 }

 /* Animación */
 @keyframes slideDown {
   0% {
     transform: translateY(-100%);
     opacity: 0;
   }

   100% {
     transform: translateY(0);
     opacity: 1;
   }
 }

 .categories {
   position: relative;
 }

 .categories button {
   background: #2c3e50;
   color: #fff;
   padding: 10px 15px;
   border: none;
   cursor: pointer;
   border-radius: 6px;
 }

 .cat-menu {
   display: none;
   position: absolute;
   top: 110%;
   left: 0;
   background: #fff !important;
   border: 1px solid #ddd;
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
   z-index: 1000;
   min-width: 220px;
   border-radius: 6px;
 }

 .cat-menu li {
   list-style: none;
   position: relative;
 }

 .cat-menu li>a {
   display: block;
   padding: 10px;
   color: #333;
   text-decoration: none;
   transition: background 0.2s;
 }

 /* Contenedor del dropdown */
 .dropdown {
   position: relative;
   display: inline-block;
 }

 /* Texto principal */
 .dropdown>span {
   cursor: pointer;
   font-weight: bold;
 }

 /* Contenido oculto */
 .dropdown-content {
   display: none;
   position: absolute;
   background-color: white;
   min-width: 160px;
   box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.15);
   z-index: 1000;
   border-radius: 8px;
   padding: 8px 0;
 }

 /* Links del menú */
 .dropdown-content a {
   color: #333;
   padding: 10px 16px;
   text-decoration: none;
   display: block;
 }

 .dropdown-content a:hover {
   background-color: #f2f2f2;
 }

 /* Mostrar al pasar el mouse */
 .dropdown:hover .dropdown-content {
   display: block;
 }

 /* ===== BARRA ADICIONAL ===== */
 .barra_adicional {
   background: #ffffff;
   color: black;
   display: flex;
   justify-content: flex-end;
   align-items: center;
   padding: 6px 20px;
   gap: 25px;
   font-size: 14px;
 }

 .barra_adicional div {
   cursor: pointer;
   display: flex;
   align-items: center;
   gap: 5px;
   transition: color 0.3s;
 }

 .barra_adicional div:hover {
   color: #5fb638;
 }

 .boton_ia {
   position: relative;
   background: linear-gradient(270deg, #5fb638, #82d64c, #3cc0ff, #ff69b4);
   background-size: 600% 600%;
   border: none;
   color: white;
   padding: 10px 20px;
   border-radius: 30px;
   font-weight: bold;
   cursor: pointer;
   z-index: 1;
   animation: mover_colores 6s ease infinite, flotar 3s ease-in-out infinite;
   box-shadow: 0 0 15px rgba(255, 255, 255, 0.4);
   overflow: hidden;
 }

 /* Estrellitas que salen del botón */
 .boton_ia::before,
 .boton_ia::after {
   content: "✨";
   position: absolute;
   font-size: 14px;
   animation: estrellas 3s linear infinite;
   opacity: 0.7;
 }

 .boton_ia::before {
   top: -10px;
   left: 10px;
 }

 .boton_ia::after {
   bottom: -10px;
   right: 10px;
 }

 @keyframes slideDown {
   0% {
     transform: translateY(-100%);
     opacity: 0;
   }

   100% {
     transform: translateY(0);
     opacity: 1;
   }
 }

 @keyframes mover_colores {
   0% {
     background-position: 0% 50%;
   }

   50% {
     background-position: 100% 50%;
   }

   100% {
     background-position: 0% 50%;
   }
 }

 @keyframes flotar {

   0%,
   100% {
     transform: translateY(0);
   }

   50% {
     transform: translateY(-5px);
   }
 }

 @keyframes estrellas {
   0% {
     transform: translateY(0) scale(0.5);
     opacity: 0.7;
   }

   50% {
     transform: translateY(-15px) scale(1);
     opacity: 1;
   }

   100% {
     transform: translateY(-30px) scale(0.3);
     opacity: 0;
   }
 }


 .boton_ia:hover {
   transform: scale(1.05);
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
 }

 /* ===== BARRA SUPERIOR ===== */
 .barra_superior {
   background: #2c3e50;
   color: white;
   display: flex;
   align-items: center;
   padding: 10px 20px;
   gap: 20px;

 }

 .logo {
   font-size: 20px;
   font-weight: bold;
   cursor: pointer;
 }

 .boton_categorias,
 .boton_hamburguesa {
   background: #2c3e50;
   border: none;
   color: white;
   padding: 10px 18px;
   border-radius: 15px;
   cursor: pointer;
   font-weight: bold;
   transition: background 0.3s;
 }

 .boton_categorias:hover,
 .boton_hamburguesa:hover {
   background: #003a6c;
 }

 .contenedor_busqueda {
   flex: 1;
   display: flex;
   background: white;
   border-radius: 20px;
   overflow: hidden;
 }

 .contenedor_busqueda input {
   flex: 1;
   border: none;
   padding: 10px 15px;
   outline: none;
   font-size: 14px;
   color: black;
 }

 .contenedor_busqueda button {
   border: none;
   background: none;
   padding: 10px;
   cursor: pointer;
 }

 .contenedor_busqueda button img {
   width: 22px;
 }

 .iconos_derecha {
   display: flex;
   gap: 20px;
   align-items: center;
 }

 .iconos_derecha div {
   cursor: pointer;
   font-size: 16px;
   font-weight: bold;
 }

 /* ===== MEGA MENÚ ===== */
 .mega_menu {
   display: none;
   width: 100%;
   background: white;
   border-top: 3px solid #2c3e50;
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
   z-index: 1000;
   padding: 20px;
 }

 .contenedor_categorias {
   display: flex;
 }

 .lista_categorias {
   width: 220px;
   border-right: 1px solid #ddd;
 }

 .lista_categorias button {
   display: block;
   width: 100%;
   padding: 12px 15px;
   text-align: left;
   border: none;
   background: none;
   cursor: pointer;
   font-size: 15px;
   transition: background 0.2s;
 }

 .lista_categorias button:hover {
   background: #f0f0f0;
 }

 .submenu_opciones {
   flex: 1;
   padding: 0 20px;
   display: none;
   flex-direction: column;
 }

 .submenu_opciones.activo {
   display: flex;
 }

 .submenu_fila {
   display: flex;
   gap: 20px;
   margin-bottom: 15px;
 }

 .submenu_fila a {
   text-decoration: none;
   color: #333;
   font-weight: bold;
   font-size: 14px;
   transition: color 0.3s;
 }

 .submenu_fila a:hover {
   color: #2c3e50;
   text-decoration: underline;
 }

 /* ===== RESPONSIVE ===== */
 .boton_hamburguesa {
   display: none;
   font-size: 20px;
 }

 @media (max-width: 768px) {
   .boton_categorias {
     display: none;
   }

   .contenedor_busqueda {
     display: none;
   }

   .iconos_derecha {
     display: none;
   }

   .boton_hamburguesa {
     display: block;
     margin-left: auto;
   }

   .mega_menu {
     padding: 10px;
   }

   .contenedor_categorias {
     flex-direction: column;
   }

   .lista_categorias {
     width: 100%;
     border-right: none;
   }

   .submenu_opciones {
     padding: 10px 0;
   }

   .submenu_fila {
     flex-direction: column;
   }

   .barra_adicional {
     flex-wrap: wrap;
     justify-content: center;
     font-size: 13px;
     gap: 12px;
   }
 }