body {
            font-family: "Ubuntu", serif;
            margin: 0;
            padding: 0;
        }

        /* Reset básico */
        * {
          box-sizing: border-box;
        }

        a, button, .btn {
            -webkit-tap-highlight-color: transparent;
        }
        input, textarea, select {
            -webkit-tap-highlight-color: transparent;
        }

        /* HEADER GENERAL */
        header {
            background: rgb(244 244 244 / 87%);
            backdrop-filter: blur(2rem);
            display: flex;
            justify-content: space-between;
            border-bottom: 1px solid #d4d5d5;
            align-items: center;
            padding: 25px 30px;
            color: white;
            position: sticky;
            top: 0;
            z-index: 1000;
        }

        .logo a {
            display: flex;
            align-items: center;
            text-decoration: none;
            font-weight: 700;
            color: #117079;
            font-size: 18px;
        }

        .logo a img {
            height: 50px;  /* Ajusta el tamaño del logo según sea necesario */
            width: auto;
        }

        /* MENÚ ESCRITORIO */
        .nav-desktop {
            display: flex;
        }

        .nav-desktop ul {
            display: flex;
            list-style: none;
            margin: 0;
            align-items: center;
            flex-wrap: wrap;
        }

        .nav-desktop ul li {
            margin: 0 10px;
        }

        .nav-desktop ul li a {
            color: #117079;
            text-decoration: none;
            font-size: 18px;
            font-weight: 400;
            transition: color 0.3s ease, transform 0.3s ease; /* Transición para color y transformación */
        }

        .nav-desktop ul li a:hover {
            transform: scale(1.1);
        }

        .comprar {
            font-family: "Ubuntu", serif;
            padding: 10px 20px;
            text-decoration: none;
            border-radius: 30px;
            font-size: 16px;
            box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
        }

        .comprar.cerrado {
            color: #f44336;
            border: 3px solid #f44336;
            background-color: #ffe6e5;
            font-weight: 500;
            cursor: pointer;
        }

            /* Estilo cuando la tienda está abierta */
        .comprar.abierto {
            color: #fff;
            font-weight: 500;
            background-color: #117079; /* Verde para el estado abierto */
        }

        /* MENÚ MÓVIL SIMPLE */
        .nav-mobile {
            max-height: 0;
            overflow: hidden;
            position: absolute;
            background: rgb(244 244 244);
            top: 100%;
            right: 0;
            width: 100%;
            z-index: 998;
            transition: max-height 0.4s ease-in-out;
        }

        .nav-mobile ul {
            list-style: none;
            margin: 0;
            display: flex;
            flex-direction: column;
            flex-wrap: nowrap;
        }

        .nav-mobile ul li {
            padding: 1rem;
            border-bottom: 1px solid #117079;
        }

        .nav-mobile ul li a {
            color: #117079;
            letter-spacing: .2px;
            font-weight: 500;
            display: flex;
            gap: 8px;
            text-decoration: none;
            align-items: center;
        }

        /* Cuando se activa */
        .nav-mobile.active {
            max-height: 300px; /* Ajusta este valor según la cantidad de opciones que tengas */
        }

        .copm {
            display: flex;
            padding: 1rem;
            align-items: center;
            justify-content: center;
        }

        /* Botón cerrar */
        .close-btn {
            position: absolute;
            top: 20px;
            right: 25px;
            font-size: 36px;
            color: white;
            cursor: pointer;
        }

        /* HAMBURGER */
        .hamburger {
            display: none;
            flex-direction: column;
            cursor: pointer;
        }

        .bar {
            width: 25px;
            height: 3px;
            background-color: #117079;
            margin: 3px 0;
            border-radius: 2px;
        }

        /* Botón adicional */
        .button-container {
            display: none; /* Ocultamos el botón por defecto */
        }

        /* Responsividad */
        @media (max-width: 900px) {
            header {
                padding: 15px 20px;
            }
            .nav-desktop {
                display: none;
            }
            .hamburger {
                display: flex;
            }
            /* Coloca el botón junto al menú hamburguesa en móviles */
            .button-container {
                display: flex;
                flex-direction: row;
                align-items: center;
                gap: 1rem;

            }
            /* Estilos por defecto */
            .button-container .comprar {
                font-family: "Ubuntu", serif;
                padding: 10px 20px;
                font-weight: 500;
                text-decoration: none;
                border-radius: 30px;
                font-size: 16px;
                box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
            }
            /* Estilo cuando la tienda está cerrada */
            .button-container .comprar.cerrado {
                color: #f44336;
                border: 3px solid #f44336;
                background-color: #ffe6e5;
                cursor: pointer;
            }

            /* Estilo cuando la tienda está abierta */
            .button-container .comprar.abierto {
                color: #fff;
                background-color: #117079; /* Verde para el estado abierto */
            }
        }