@import url("https://fonts.googleapis.com/css2?family=Kanit:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
     
      /* Estilos del header */
        .header-container {
            width: 100%;
            max-width: 1280px;
            height: 172px;
            margin: 0 auto;
            position: relative;
        }
        
        .header-top {
            height: 121px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 15px;
        }
        
        /* Nuevo contenedor */
        .header-topup {
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: 100%;
        }
        
        .header-bottom {
            height: 51px;
            display: flex;            
            align-items: center;          
            border-top: 1px solid #170ad8;
            padding: 0 15px;
        }
        
        .header-bottom-categ-nav {            
            display: flex;
            background: #ffffff;        
            position: relative;
            width: 100%;
            justify-content: space-between;
        }
         
        .header-bottom-color {
            height: 5px;            
            display: flex;
            background: #170ad8;        
            position: bottom;
        }
         
        .logo-container {
            max-height: 121px;
            display: flex;
            padding-right: 0;
            align-items: left;
            width: auto;            
            max-width: 393px;
        }
        
        .header-content {
            display: flex;
            width: 450px;
            flex-direction: column;
            align-items: flex-start;             
                     
        }

        .categories-menu {
            display: flex;
            align-items: center;
            max-width: 280px;
            gap: 8px;
            padding: 8px 16px;
            background: #f0f0f0;
            border-radius: 4px;
            cursor: pointer;
            transition: background 0.3s;
            position: relative;
            z-index: 1001;
        }
        
        .categories-menu:hover {
            background: #e0e0e0;
        }
        
        .categories-dropdown {
            position: absolute;
            top: 172px;
            left: 0;
            width: 100%;
            max-width: 224px; /* 20% menos que 280px */
            background: white;
            border: 1px solid #e2e2e2;
            border-top: none;
            border-radius: 0 0 8px 8px;
            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
            z-index: 1000;
            display: none;
        }
        .barracentral__buscador__contacto {
            position: left; 
            padding: 0 30px 0 0;
         }
        
        .categories-dropdown.active {
            display: block;
        }
        
        .main-content {
            width: 100%;
            max-width: 1280px;
            margin: 0 auto;
            padding: 0 15px;
        }
        
        .nav-buttons {
            display: flex;
            align-items: center;
            gap: 20px;           
        }
        
        .nav-button {
            padding: 8px 16px;
            border-radius: 4px;
            background: #f0f0f0;
            cursor: pointer;
            transition: background 0.3s;
            white-space: nowrap;
        }
        
        .nav-button:hover {
            background: #bec8f7d5;
        }
        
        .referidos-modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.5);
            z-index: 2000;
            justify-content: center;
            align-items: center;
        }
        
        .referidos-content {
            background: white;
            padding: 30px;
            border-radius: 8px;
            text-align: center;
            max-width: 400px;
            position: relative;
            margin: 20px;
        }
        
        .referidos-close {
            position: absolute;
            top: 10px;
            right: 10px;
            cursor: pointer;
            font-size: 20px;
        }
        
        /* Estilos para móviles */
      
      @media (max-width: 1199px) {
            .header-container {
                 max-width: 1100px;
            }
       }

      @media (max-width: 992px) {

             .header-container {
                 max-width: 98%;
                 height: auto;
                 
            }

            .header-top {
                flex-direction: column;
                height: auto;
                padding: 0 5px;
                gap: 0px;
            }
            
            .header-topup {
                width: 100%;
                display: flex;
                justify-content: space-between;
                align-items: center;
                margin-bottom: 5px;
            }
            
            .header-bottom {
                flex-direction: row;
                height: auto;
                padding: 0 10px;
                border-top: 1px solid #e2e2e2;
                gap: 10px;
                justify-content: space-between;
            }
            
            .header-bottom-categ-nav {
                width: 100%;
                justify-content: space-between;
                align-items: center;
            }
                                    
            .header-content {
            display: flex;
            flex-direction: column;
            width: 100%;
            max-width: 100%;
            justify-content: space-between;
            align-items: center;          
            
            }
            
            .logo-container {
                align-self: flex-start;
            }            
        
            .logo-container img {
                max-width: 400px;
                height: auto;
                padding-right: 0px;
            }
            
            .barracentral__buscador__contacto {
                display: flex;
                gap: 0 20px;                
                width: 100%;                  
                flex-direction: row;
                width: 100%;
                max-width: 100%;
               justify-content: space-between;
               align-items: center;               
            }
            
            .barracentral__buscador__contacto a {
                font-size: 15px;
            }
            
            .barracentral__buscador__contacto a i {
                font-size: 15px;
            }
            
            .barracentral__carrito {
                margin-right: 12px;
            }
            
            .barracentral__buscador__search {
                width: 70%;
                max-width: 70%;
                margin-top: 10px;
                align-self: flex-start;
            }
            
            .nav-buttons {
                flex-direction: row;
                gap: 10px 10px;
                margin-left: 10;
                width: auto;
                align-items: center;
                position: absolute;
                left: 55%;
                transform: translateX(-50%);
                z-index: 100;
            }           
            
            .nav-button {
                padding: 6px 15px;
                font-size: 15px;
                background: #f0f0f0;
            }
           
            .categories-dropdown {
                top: auto;
                position: absolute;
                width: 100%;
                max-width: 220px; /* 20% menos */
            }
            
            .main-content {
                padding: 0;
            }           
        }

        
        @media (max-width: 830px) {
             .logo-container img {
                width: auto;
                height: 14vw;
                padding-right: 0px;
            }
        } 
        @media (max-width: 768px) {
             .header-top {
                flex-direction: column;
                height: auto;
                padding: 10px 0 0 0;
                gap: 0;
            }
            
            .header-topup {
                width: 100%;                
                display: flex;
                justify-content: space-between;
                align-items: center;
                margin-bottom: 10px;
            }
            
            .header-bottom {
                flex-direction: row;
                height: auto;
                padding: 5px 0;
                border-top: 1px solid #e2e2e2;
                gap: 10px;
                justify-content: space-between;
            }
            
            .header-bottom-categ-nav {
                width: 100%;
                justify-content: space-between;
                align-items: center;
            }
                                    
            .header-content {
                align-items: left;
                
                width: 100%;
                height: 100%;
            }
            
            .logo-container {
                align-self: flex-start;
                max-width: 61vw;
            }
            
            .logo-container img {
                max-width: 320px;
                height: auto;
            }
            
            .barracentral__buscador__contacto {
                display: flex;
                gap: 5px;                
                width: 100%;                          
                padding: 7px 0 7px 60px;
                display: flex;
                flex-direction: column;                  
                align-items: flex-start;            
            }
            
            .barracentral__buscador__contacto a {
                font-size: 13px;
            }
                                   
            .barracentral__buscador__contacto a i {
                font-size: 16px;
            }
            
            .barracentral__carrito {
                margin: 0 20px;                
            }
            
            .barracentral__buscador__search {
                width: 75%;
                max-width: 75%;
                margin-top: 10px;
                justify-content: center;
                align-items: center;
           }
            
            .nav-buttons {
                flex-direction: row;
                gap: 10px;
                margin-left: 0;
                width: auto;
                align-items: center;
                position: absolute;                
                transform: translateX(-50%);
                z-index: 100;
            }
            
            .nav-button:not(#comoComprarBtn) {
                display: none;
            }
            
            .nav-button {
                padding: 8px 12px;
                font-size: 14px;
                background: #f0f0f0;
            }
            
            .categories-dropdown {
                top: auto;
                position: absolute;
                width: 100%;
                max-width: 180px; /* 20% menos */
            }
            
            .main-content {
                padding: 0 10px;
            }        
        }
        
        @media (max-width: 576px) {
            .header-top {
                padding: 5px 0;
            }
            
            .header-topup {
                width: 100%;
                display: flex;
                justify-content: space-between;
                align-items: center;
                margin-bottom: 0;
                object-fit: contain;
            }
            
            .header-bottom {
                padding: 8px 0;
            }
            
            .logo-container img {
                max-width: 280px;                
            }

            .barracentral__buscador__contacto {
                display: flex;
                gap: 8px;                
                width: 100%;                
                padding: 0 0 0 30px;                
            }
            
            .barracentral__buscador__search {
                width: 80%;
                max-width: 80%;
            }
            
            .nav-button {
                padding: 4px 10px;
                font-size: 14px;
            }

            .categories-dropdown {
               max-width: 160px; 
            }
            
            .referidos-content {
                padding: 20px;
                margin: 10px;
            }
            
            .categories-menu {
                padding: 4px 12px;
                font-size: 14px;
            }            
          
        }
        
        /* Para pantallas muy pequeñas */
        @media (max-width: 500px) {
            .barracentral__buscador__contacto {
                display: flex;
                gap: 6px;                
                width: 100%;                
                padding: 0 0 0 30px;
            }

            .nav-button {
                padding: 3px 10px;
                font-size: 12px;
            }     

           .categories-menu {
                padding: 3px 12px;
                font-size: 12px;
            }     
          .categories-dropdown {
               max-width: 135px; 
           }
        }