html,
        body {
            margin: 0;
            padding: 0;
            overflow-x: hidden;
            /* 🔹 Evita desbordamiento horizontal */
        }

        @media (max-width: 768px) {
            #navbar {
                padding: 15px 10px;
                /* 🔹 Reduce padding en móvil */
            }
        }

        /* 🛒 Contenedor del carrito */
        #cart-container {
            position: fixed;
            bottom: 20px;
            right: 20px;
            background: white;
            padding: 15px;
            border-radius: 10px;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
            display: none;
            z-index: 1000;
            max-width: 350px;
            font-family: 'Inter', sans-serif;
        }

        /* 🛒 Encabezado del carrito */
        #cart-container h3 {
            color: #072BF2;
            font-size: 1.2rem;
            margin-bottom: 10px;
            text-align: center;
            font-weight: bold;
        }

        /* 📜 Lista de productos */
        #cart-items {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        /* 🔹 Estilo de cada producto en el carrito clásico */
        #cart-container .cart-item {
            background: #f0f4ff;
            color: black;
            padding: 8px;
            margin-bottom: 5px;
            border-radius: 5px;
            font-size: 0.9rem;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        /* 🖼 Imagen del producto */
        #cart-container .cart-item img {
            width: 50px;
            height: 40px;
            border-radius: 5px;
            margin-right: 10px;
        }

        /* 📌 Nombre del producto */
        #cart-container .cart-item-info {
            flex-grow: 1;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        /* 🛑 Botón para eliminar productos */
        #cart-container .cart-item button {
            background: red;
            color: white;
            border: none;
            padding: 5px 7px;
            border-radius: 5px;
            cursor: pointer;
            font-size: 0.8rem;
        }

        #cart-container .cart-item button:hover {
            background: darkred;
        }

        /* 🌟 Estilos del nuevo modal carrito */
        .cart-modal {
            position: fixed;
            bottom: 20px;
            right: 20px;
            width: 820px !important;
            background: white;
            border-radius: 12px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
            padding: 16px;
            z-index: 1000;
            font-family: 'Inter', sans-serif;
        }

        /* 📜 Lista de productos dentro del modal */
        .cart-items-list {
            list-style: none;
            padding: 0;
            max-height: 300px;
            overflow-y: auto;
        }

        /* 🔹 Productos en el modal */
        .cart-modal .cart-item {
            display: flex;
            align-items: center;
            margin-bottom: 12px;
            justify-content: space-between;
        }

        /* 📌 Info del producto en el modal */
        .cart-modal .cart-item-info {
            display: flex;
            align-items: center;
            gap: 12px;
        }

        /* 🖼 Imagen en el modal */
        .cart-modal .cart-item-info img {
            width: 50px;
            height: auto;
            border-radius: 6px;
        }

        /* 🔢 Cantidad del producto */
        .cart-quantity {
            display: flex;
            align-items: center;
            gap: 6px;
        }

        /* 🔢 Input cantidad */
        .cart-quantity input {
            width: 40px;
            text-align: center;
            border: 1px solid #ccc;
            border-radius: 4px;
        }

        /* ➕➖ Botones de cantidad */
        .cart-quantity button {
            background-color: #007bff;
            color: white;
            border: none;
            width: 40px;
            height: 40px;
            font-size: 1.4rem;
            /* más grande el signo + y - */
            font-weight: bold;
            border-radius: 6px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: background-color 0.2s ease;
        }

        /* 🔵 Botón de finalizar compra */
        #finalizar-compra {
            width: 100%;
            padding: 10px;
            background: #072BF2;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            font-size: 1rem;
            margin-top: 10px;
            font-weight: bold;
            transition: 0.3s;
        }

        #finalizar-compra:hover {
            background: #4B75F2;
            transform: scale(1.05);
        }

        /* Agrega esto en tu sección <style> o en tu archivo CSS */
        .form-group-3 {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 10px;
            /* Separación horizontal/vertical */
            margin-bottom: 10px;
            /* Espacio inferior */
        }


        .modal {
            display: none;
            position: fixed;
            z-index: 999;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
        }

        .modal-content {
            width: 700px;
            /* Aumenta el ancho para evitar scroll horizontal */
            max-height: 85vh;
            /* Mantén la altura máxima */
            margin: 5% auto;
            padding: 20px;
            border-radius: 10px;
            text-align: center;
            overflow-y: auto;
            /* Si es muy alto, solo aparece scroll vertical */
            background-color: white;
            animation: fadeIn 0.3s ease-in-out;
            /* ... */
        }

        .modal-content h2 {
            color: #072BF2;
            margin-bottom: 15px;
        }

        #order-summary {
            text-align: left;
            margin-bottom: 15px;
        }

        .btn {
            padding: 10px;
            width: 100%;
            margin-top: 10px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }

        .btn-danger {
            background: red;
            color: white;
        }

        .btn-danger:hover {
            background: darkred;
        }

        /* 🛒 Estilos del Modal */
        .modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
            justify-content: center;
            align-items: center;
            z-index: 1000;
        }

        .modal-content {
            background: white;
            width: 700px;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
            text-align: center;
            animation: fadeIn 0.3s ease-in-out;
        }

        /* ❌ Botón Cerrar */
        .close-btn {
            position: absolute;
            top: 10px;
            right: 15px;
            font-size: 24px;
            cursor: pointer;
        }

        /* 📑 Estilos del Formulario */
        .form-group {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 10px;
            margin-bottom: 10px;
        }

        .form-group input,
        select {
            width: 100%;
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 5px;
        }

        h2,
        h3 {
            color: #072BF2;
            margin-bottom: 10px;
        }

        .form-actions {
            display: flex;
            justify-content: space-between;
            margin-top: 15px;
        }

        /* Estilos para el botón Confirmar Compra */
        button {
            background-color: #072BF2;
            /* Color sólido de fondo azul */
            color: white;
            /* Texto blanco */
            padding: 12px 20px;
            border-radius: 5px;
            font-weight: bold;
            font-size: 16px;
            border: none;
            cursor: pointer;
            width: 100%;
            margin-top: 15px;
            margin-bottom: 15px;
            transition: background-color 0.3s ease, transform 0.3s ease;
        }

        /* Hover en el botón Confirmar Compra */
        button:hover {
            background-color: #4B75F2;
            /* Color de fondo más claro al pasar el mouse */
            transform: scale(1.05);
            /* Efecto de agrandado */
        }

        /* Estilo para el botón Confirmar Compra */
        .confirmar-btn {
            background-color: #072BF2;
            /* Fondo de color azul */
            color: white;
            /* Texto blanco */
            padding: 12px 20px;
            border-radius: 5px;
            font-weight: bold;
            font-size: 16px;
            border: none;
            cursor: pointer;
            width: 100%;
            margin-top: 15px;
            margin-bottom: 15px;
            transition: background-color 0.3s ease, transform 0.3s ease;
        }

        /* Hover en el botón Confirmar Compra */
        .confirmar-btn:hover {
            background-color: #4B75F2;
            /* Un color azul más claro al hacer hover */
            transform: scale(1.05);
            /* Efecto de agrandado */
        }

        /* Estilos para el botón Cancelar */
        .cancel-btn {
            background-color: #FF4D4D;
            /* Color de fondo rojo brillante */
            color: white;
            /* Texto blanco */
            padding: 12px 20px;
            border-radius: 5px;
            font-weight: bold;
            font-size: 16px;
            border: none;
            cursor: pointer;
            width: 100%;
            margin-top: 15px;
            margin-bottom: 15px;
        }

        /* Hover en el botón Cancelar */
        .cancel-btn:hover {
            background-color: darkred;
            /* Color más oscuro al pasar el mouse */
            transform: scale(1.05);
            /* Efecto de agrandado */
        }


        /* Para hacerlos siempre visibles y accesibles en pantallas móviles */
        @media (max-width: 768px) {

            .confirmar-btn,
            .cancel-btn {
                width: 100%;
                /* Los botones ocuparán el 100% del ancho en móviles */
                padding: 15px 10px;
                /* Más espacio interno en dispositivos móviles */
                font-size: 18px;
                /* Un poco más grande el texto */
            }
        }

        /* 🔹 Ocultar Sección Técnico */
        .hidden {
            display: none;
        }

        /* 🎬 Animación de Aparición */
        @keyframes fadeIn {
            from {
                opacity: 0;
                transform: translateY(-10px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        /* Estilo para el botón Pagar con Stripe */
        #pagarStripe {
            background-color: #28a745;
            /* Fondo verde */
            color: white;
            /* Texto blanco */
            padding: 12px 20px;
            border-radius: 5px;
            font-weight: bold;
            font-size: 16px;
            border: none;
            cursor: pointer;
            width: 100%;
            /* Ocupa el 100% del ancho disponible */
            margin-top: 15px;
            /* Espacio superior */
            margin-bottom: 15px;
            /* Espacio inferior */
            transition: background-color 0.3s ease, transform 0.3s ease;
        }

        /* Hover en el botón Pagar con Stripe */
        #pagarStripe:hover {
            background-color: #218838;
            /* Un verde más oscuro al pasar el cursor */
            transform: scale(1.05);
            /* Efecto de agrandado */
        }

        /* Ajustes para pantallas pequeñas */
        @media (max-width: 768px) {
            #pagarStripe {
                width: 100%;
                /* El botón ocupará el 100% del ancho en móviles */
                padding: 15px 10px;
                /* Aumentar padding para pantallas pequeñas */
                font-size: 18px;
                /* Aumentar el tamaño de la fuente en dispositivos móviles */
            }
        }

        /* 🛠 Corregir color de texto en inputs y select */
        .modal-content input,
        .modal-content select {
            color: black;
            /* Cambiar el color del texto a negro */
            background-color: #E8F0FE !important;
            /*            /* Asegurar que el fondo sea blanco */
            border: 1px solid #ccc;
            /* Bordes más visibles */
            padding: 8px;
            border-radius: 5px;
            font-size: 14px;
        }

        /* 🔽 Ajustar el color del texto dentro del select */
        .modal-content select option {
            color: black;
            /* Color del texto */
            background-color: white;
            /* Fondo blanco */
        }

        /* 🏷 Mejorar etiquetas para mejor legibilidad */
        .modal-content label {
            color: #072BF2;
            /* Azul principal */
            font-weight: bold;
            display: block;
            margin-bottom: 3px;
            text-align: left;
        }

        #modal-resumen {
            color: black !important;
        }

        #modal-resumen h2,
        #modal-resumen p,
        #modal-resumen span {
            color: black !important;
        }

        body {
            font-family: 'Inter', sans-serif;
            background: linear-gradient(135deg, #072BF2, #4B75F2);
            color: white;
            margin: 0;
            /* Elimina cualquier margen por defecto */
            padding: 0;
            /* Elimina rellenos adicionales */
            overflow-x: hidden;
            /* Evita desbordamiento horizontal */
        }

        .nav-link {
            position: relative;
            transition: color 0.3s ease-in-out;
        }

        .nav-link::after {
            content: "";
            position: absolute;
            left: 50%;
            bottom: -4px;
            width: 0%;
            height: 3px;
            background: white;
            transition: width 0.3s ease-in-out, left 0.3s ease-in-out;
        }

        .nav-link:hover::after {
            width: 100%;
            left: 0;
        }

        .nav-active {
            -webkit-backdrop-filter: blur(10px);
            backdrop-filter: blur(10px);
            background: rgba(7, 43, 242, 0.8);
            transition: background 0.3s ease-in-out;
        }

        .feature-card {
            transition: transform 0.3s, box-shadow 0.3s;
        }

        .feature-card:hover {
            transform: translateY(-5px);
            box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.2);
        }

        .benefit-card:hover {
            background: #072BF2;
            color: white;
            transition: 0.3s;
        }

        .card {
            perspective: 1000px;
        }

        .card-inner {
            transform-style: preserve-3d;
            transition: transform 0.6s;
        }

        .card:hover .card-inner {
            transform: rotateY(180deg);
        }

        .card-front,
        .card-back {
            backface-visibility: hidden;
            position: absolute;
            width: 100%;
            height: 100%;
            border-radius: 10px;
        }

        .card-back {
            background: #072BF2;
            color: white;
            display: flex;
            justify-content: center;
            align-items: center;
            transform: rotateY(180deg);
        }

        .bg-gradient-to-r {
            background: linear-gradient(to right, #B3BDF2, white);
        }

        .bg-gradient-to-b {
            background: linear-gradient(to bottom, white, #E5E7EB);
        }

        #bienvenida {
            background: url('/img/aufit-minisplit4.jpg') no-repeat center center;
            background-size: cover;
            width: 100vw;
            height: 80vh;
            display: flex;
            align-items: flex-start;
            justify-content: center;
            text-align: center;
            color: white;
            position: relative;
            padding: 100px 20px 40px;
        }

        /* Ajusta los valores a tu preferencia */
        .btn-big {
            font-size: 1.2rem !important;
            /* Tamaño de fuente más grande */
            padding: 0.75rem 8rem !important;
            /* Más espacio interno */
            background-color: #3085d6 !important;
            /* Fondo azul (o el que prefieras) */
            color: #fff !important;
            /* Texto blanco */
            border: none !important;
            /* Sin bordes */
            border-radius: 0.5rem !important;
            /* Bordes redondeados */
            cursor: pointer;
        }


        /* ✅ Mejora la legibilidad del texto */
        #bienvenida::after {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
            /* 🔹 Aumenta opacidad para mayor contraste */
            z-index: 1;
        }

        #bienvenida .content {
            position: relative;
            z-index: 2;
            max-width: 90%;
            text-align: center;
            padding: 60px 20px;
            transform: translateY(-50px);
            /* 🔹 Mueve el texto más arriba */
        }

        /* ✅ Ajustes de fuente */
        #bienvenida h2 {
            font-size: 4rem;
            font-weight: bold;
            text-shadow: 3px 3px 8px rgba(0, 0, 0, 0.7);
            /* 🔹 Aumenta la sombra para mejorar la legibilidad */
        }

        #bienvenida p {
            font-size: 1.5rem;
            text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.6);
            max-width: 800px;
            margin: auto;
        }

        /* ✅ Optimización para móviles */
        @media (max-width: 768px) {
            #bienvenida {
                height: 60vh;
                padding: 60px 20px 20px;
                /* 🔹 Ajusta el padding superior */
            }

            #bienvenida .content {
                transform: translateY(-30px);
                /* 🔹 Sube menos el texto en móvil */
            }

            #bienvenida h2 {
                font-size: 2.5rem;
            }

            #bienvenida p {
                font-size: 1.2rem;
            }
        }

        #wrapper {
            max-width: 100vw;
            /* Evita que los elementos internos sobrepasen la pantalla */
            overflow-x: hidden;
        }

        #navbar {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            z-index: 50;
            padding: 15px 40px;
            background: linear-gradient(to right, #072BF2, #4B75F2);
            /* ✅ MODIFICADO */
            /* backdrop-filter: blur(10px); */
            /* ✅ Agrega este para el difuminado */
            box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.2);
            /* ✅ Agrega este para la sombra */
            display: flex;
            justify-content: space-between;
            align-items: center;
            overflow: hidden;
        }


        #navbar h1 {
            font-size: 1.8rem;
            font-weight: bold;
            transition: transform 0.3s ease-in-out;
        }

        #navbar h1:hover {
            transform: scale(1.05);
        }

        #navbar ul {
            display: flex;
            gap: 25px;
            /* ✅ MODIFICADO */
        }

        #navbar ul li a {
            position: relative;
            transition: color 0.3s ease-in-out;
        }

        #navbar ul li a::after {
            content: '';
            position: absolute;
            width: 0%;
            height: 3px;
            background: white;
            bottom: -5px;
            left: 50%;
            transform: translateX(-50%);
            transition: width 0.3s ease-in-out, left 0.3s ease-in-out;
        }

        #navbar ul li a:hover::after {
            width: 100%;
            left: 0;
        }


        #navbar ul li a:hover {
            color: #B3BDF2;
        }

        /* 🔹 Menú Responsive */
        .menu-icon {
            display: none;
            font-size: 2rem;
            cursor: pointer;
            transition: transform 0.3s ease-in-out;
        }

        .menu-icon:hover {
            transform: scale(1.1);
        }

        @media (max-width: 768px) {
            .menu-icon {
                display: block;
            }

            #navbar ul {
                display: none;
                flex-direction: column;
                background: rgba(7, 43, 242, 0.9);
                position: absolute;
                top: 100%;
                left: 0;
                width: 100%;
                padding: 20px;
                box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.2);
            }

            #navbar ul.active {
                display: flex;
            }
        }

        /* 🔹 Menú Responsive */
        .menu-icon {
            display: none;
            font-size: 2rem;
            cursor: pointer;
            transition: transform 0.3s ease-in-out;
        }

        .menu-icon:hover {
            transform: scale(1.1);
        }

        @media (max-width: 768px) {
            .menu-icon {
                display: block;
            }

            #navbar ul {
                display: none;
                flex-direction: column;
                background: rgba(7, 43, 242, 0.9);
                position: absolute;
                top: 100%;
                left: 0;
                width: 100%;
                padding: 20px;
                box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.2);
            }

            #navbar ul.active {
                display: flex;
            }
        }

        #caracteristicas {
            background: linear-gradient(to bottom, #f5f5f5, white);
            padding: 60px 20px;
        }

        #caracteristicas h2 {
            font-size: 3rem;
            text-align: center;
            font-weight: bold;
            color: #072BF2;
            margin-bottom: 30px;
        }

        #videos {
            padding: 70px 20px;
            background: linear-gradient(to bottom, white, #E5E7EB);
        }

        #videoCarousel .splide__track {
            border-radius: 15px;
            overflow: hidden;
        }

        .video-container {
            width: 100%;
            max-width: 900px;
            height: 500px;
            margin: auto;
            display: flex;
            justify-content: center;
            align-items: center;
            perspective: 1000px;
        }

        .video-container iframe {
            width: 100%;
            height: 100%;
            border-radius: 15px;
            transition: transform 0.4s ease-in-out, box-shadow 0.4s;
        }

        .splide__slide.is-active .video-container iframe {
            transform: scale(1.05) rotateX(5deg);
            box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.2);
        }

        .splide__arrow {
            background-color: rgba(7, 43, 242, 0.8) !important;
            width: 50px;
            height: 50px;
            border-radius: 50%;
            opacity: 0.6;
            transition: opacity 0.3s, transform 0.3s;
        }

        .splide__arrow:hover {
            opacity: 1;
            transform: scale(1.1);
        }

        .splide__pagination {
            bottom: -10px;
        }

        .splide__pagination__page {
            background-color: #072BF2 !important;
            width: 14px;
            height: 14px;
            margin: 6px;
            transition: transform 0.3s ease-in-out;
        }

        .splide__pagination__page.is-active {
            background-color: #4B75F2 !important;
            transform: scale(1.4);
        }

        .video-overlay {
            position: absolute;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.4);
            opacity: 0;
            transition: opacity 0.3s;
            border-radius: 15px;
            pointer-events: none;
            /* <- esto permite que los clics pasen al iframe */
        }

        .video-container:hover .video-overlay {
            opacity: 1;
        }

        /* ✅ Sección completa */
        #paquetes-tecnicos {
            background: linear-gradient(to bottom, #f9fafb, white);
            padding-bottom: 80px;
        }

        /* 🔹 Tarjeta de Beneficios (Paquete) */
        .benefit-card {
            border: 2px solid #4B75F2;
            border-radius: 15px;
            background: linear-gradient(to bottom, #ffffff, #f5f5f5);
            transition: all 0.3s ease-in-out;
            position: relative;
            overflow: hidden;
            padding: 20px;
            text-align: center;
            color: black !important;
        }

        /* 🌟 Efecto de brillo en hover */
        .benefit-card::before {
            content: "";
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: rgba(255, 255, 255, 0.2);
            transform: rotate(30deg);
            transition: all 0.5s ease-in-out;
        }

        .benefit-card:hover::before {
            top: -30%;
            left: -30%;
        }

        /* 🔹 Hover: Cambia el fondo sin perder visibilidad del texto */
        .benefit-card:hover {
            background: linear-gradient(to bottom, #dce3ff, #b3c0ff) !important;
            transform: scale(1.05);
            box-shadow: 0px 10px 25px rgba(0, 0, 0, 0.2);
        }

        /* 📌 Evita que el texto se vuelva invisible en hover */
        .benefit-card:hover h3,
        .benefit-card:hover p,
        .benefit-card:hover li {
            color: black !important;
        }

        /* ✅ Íconos de beneficios siempre visibles */
        .benefit-card:hover li::before {
            color: #072BF2 !important;
        }

        /* 📜 Estilo de la Lista de Beneficios */
        .benefit-card ul {
            text-align: left;
            margin-left: 15px;
            list-style: none;
            padding: 10px 0;
        }

        .benefit-card ul li {
            margin-bottom: 10px;
            font-size: 1.1rem;
            display: flex;
            align-items: center;
        }

        /* 📌 Iconos de Beneficios */
        .benefit-card ul li::before {
            content: "✔️";
            font-size: 1.4rem;
            color: #4B75F2;
            margin-right: 10px;
        }

        /* ✅ Botón "Comprar Ahora" */
        .benefit-card button {
            font-size: 1.2rem;
            border-radius: 50px;
            transition: all 0.3s ease-in-out;
            background-color: #4CAF50 !important;
            /* Verde */
            color: white !important;
            width: 100%;
            padding: 12px;
            margin-top: 15px;
        }

        /* 📌 Hover en botón */
        .benefit-card button:hover {
            background-color: #45a049 !important;
            transform: scale(1.05);
            box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.2);
        }

        #paquetes-tecnicos .container button:hover {
            transform: scale(1.08);
            box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.2);
        }

        /* ✅ Evita selección azul al hacer hover */
        .benefit-card:focus,
        .benefit-card:active {
            background: linear-gradient(to bottom, #ffffff, #f5f5f5) !important;
            color: black !important;
        }

        /* ✅ Evita selección de texto */
        .benefit-card * {
            -webkit-user-select: none;
            user-select: none;
        }

        /* ✅ Mantiene los iconos visibles en hover */
        .benefit-card:hover li::before {
            color: #4B75F2 !important;
        }

        #productos .hover:scale-105 {
            transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
        }

        #productos .shadow-lg:hover {
            box-shadow: 0px 12px 24px rgba(0, 0, 0, 0.2);
        }

        #videos,
        #beneficios-minisplit {
            display: block !important;
        }

        /*  Animación de entrada  */
        @keyframes fade-in {
            from {
                opacity: 0;
                transform: translateY(30px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .animate-fade-in {
            animation: fade-in 1s ease-out;
        }

        @keyframes pulse {
            from {
                opacity: 0.6;
            }

            to {
                opacity: 1;
            }
        }

        #floating-button {
            position: fixed;
            bottom: 80px;
            /* Ajusta la altura donde quieras */
            right: 20px;
            z-index: 9999;
            background-color: #072BF2;
            color: #fff;
            border: none;
            border-radius: 50px;
            padding: 15px 25px;
            font-size: 1rem;
            font-weight: bold;
            cursor: pointer;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
            transition: background-color 0.3s, transform 0.3s;
        }

        #floating-button:hover {
            background-color: #4B75F2;
            transform: scale(1.05);
        }

        /* Botón flotante */
        #comprar-ya {
            position: fixed;
            bottom: 80px;
            /* Ajusta la distancia desde abajo */
            right: 20px;
            /* Ajusta la distancia desde la derecha */
            background-color: #FFD700;
            /* Amarillo tipo “Gold” */
            color: #000;
            /* Texto en negro para contrastar */
            padding: 12px 18px;
            /* Reduce el padding para hacerlo más corto */
            border-radius: 50px;
            font-weight: bold;
            font-size: 16px;
            /* Reducir el tamaño de la fuente */
            border: none;
            width: auto;
            /* Hacer que el botón se ajuste a su contenido */
            max-width: 350px;
            /* Limitar el tamaño máximo */
            cursor: pointer;
            z-index: 9999;
            /* Que quede por encima de casi todo */

            /* Efecto de palpitación con la animación “pulse” */
            animation: pulse 1.5s infinite;
        }

        /* Animación “pulse” */
        @keyframes pulse {
            0% {
                transform: scale(1);
                box-shadow: 0 0 0 rgba(255, 215, 0, 0.7);
            }

            70% {
                transform: scale(1.1);
                box-shadow: 0 0 20px rgba(255, 215, 0, 0.7);
            }

            100% {
                transform: scale(1);
                box-shadow: 0 0 0 rgba(255, 215, 0, 0.7);
            }
        }

        /* Ajustar el modal y las columnas en pantallas pequeñas */
        @media (max-width: 768px) {

            #comprar-ya {
                width: auto;
                /* Ajuste automático al contenido */
                max-width: 300px;
                /* Limita el tamaño máximo en dispositivos móviles */
                bottom: 40px;
                /* Ajusta la distancia desde abajo */
                padding: 10px 15px;
                /* Reduce aún más el padding en pantallas pequeñas */
                font-size: 14px;
                /* Ajuste del tamaño de la fuente */
            }

            /* Que la rejilla de 3 columnas sea 1 sola columna en móvil */
            .form-group-3 {
                grid-template-columns: 1fr !important;
            }

            /* Si tienes .form-group de 2 columnas, también se vuelve 1 */
            .form-group {
                grid-template-columns: 1fr !important;
            }

            /* Ajustar el ancho del modal en pantallas pequeñas */
            .modal-content {
                width: 90% !important;
                margin: 5% auto;
                /* Opcional: puedes ajustar la altura si quieres */
                max-height: 80vh;
            }
        }

        @media (max-width: 768px) {

            .form-group-3>div input,
            .form-group-3>div select,
            .form-group>div input,
            .form-group>div select {
                width: 100% !important;
            }
        }

        /* 🔹 Menú móvil */
        #mobile-menu {
            z-index: 9999;
            /* Asegura que esté por encima de todo */
            position: fixed;
            inset: 0;
            background: rgba(0, 0, 0, 0.9);
            /* backdrop-filter: blur(10px); */
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            text-align: center;
            z-index: 1000;
            opacity: 0;
            visibility: hidden;
            transform: scale(0.9);
            transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out, visibility 0s linear 0.3s;
        }

        /* 🔹 Muestra el menú con transición */
        #mobile-menu.show {
            pointer-events: auto;
            opacity: 1;
            transform: scale(1);
            visibility: visible;
            transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
        }

        /* 🔹 Ajusta el botón de cierre */
        #close-menu {
            position: absolute;
            top: 20px;
            right: 20px;
            font-size: 2rem;
            cursor: pointer;
            transition: transform 0.2s ease-in-out;
        }

        #close-menu:hover {
            transform: scale(1.1);
        }

        /* <!-- Animación de entrada --> */
        @keyframes fade-in {
            from {
                opacity: 0;
                transform: translateY(30px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .animate-fade-in {
            animation: fade-in 1s ease-out;
        }

        @keyframes pulse {
            from {
                opacity: 0.6;
            }

            to {
                opacity: 1;
            }
        }