@font-face {
  font-family: "Mona Sans";
  src: url("https://assets.codepen.io/64/Mona-Sans.woff2")
      format("woff2 supports variations"),
    url("https://assets.codepen.io/64/Mona-Sans.woff2")
      format("woff2-variations");
  font-weight: 100 1000;
}
@layer properties {
  @property --bg-position {
    syntax: "<number>";
    inherits: true;
    initial-value: 100;
  }
  @property --after-blur {
    syntax: "<number>";
    inherits: true;
    initial-value: 0;
  }
  @property --after-opacity {
    syntax: "<number>";
    inherits: true;
    initial-value: 1;
  }
  @property --before-opacity {
    syntax: "<number>";
    inherits: true;
    initial-value: 0.3;
  }
  @property --btn-offset {
    syntax: "<number>";
    inherits: true;
    initial-value: 1;
  }
  @property --btn-scale {
    syntax: "<number>";
    inherits: true;
    initial-value: 1;
  }
}
.p-6 {
    padding: 0.5rem !important;
}
body {
    font-family: 'Inter', sans-serif;
    background-color: var(--color-fondo);
    color: var(--color-texto);
}
.font-serif-display {
    font-family: 'Playfair Display', serif;
}
.text-white {
    color: var(--color-texto-titulos) !important;
}
.text-gray-300 {
    color: var(--color-texto-principal) !important;
}
.text-indigo-600 {
    color: var(--color-enlace) !important;
}
.text-gray-400 {
    color: var(--color-texto-principal) !important;
}
.text-gray-500 {
    color: var(--color-texto-secundario) !important;
}
.text-blue-500 {
    color: var(--color-boton-filtro-activo);
}
.text-indigo-400 {
    color: var(--color-enlace) !important;
}
.text-sm {
    color: var(--color-texto-secundario);
}
.bg-gray-200 {
       background-color: var(--color-boton-filtro-activo) !important;
    color: var(--color-boton-filtro-texto-activo) !important;
}
.bg-gray-600 {
    background-color: var(--color-boton-filtro-activo) !important;
    color: var(--color-boton-filtro-texto-activo) !important;
}
.bg-gray-900{
    background-color: var(--color-tarjetas) !important;
}
.border-gray-700 {
    border-color: var(--color-borde-input);
}
.bg-gray-700{
    background-color: var(--color-boton-principal);
    color: var(--color-boton-principal-texto) !important;
}
.bg-indigo-600 {
    background-color: var(--color-boton-filtro-activo) !important;
    color: var(--color-boton-filtro-texto-activo) !important;
}
.bg-blue-600  {
    background-color: var(--color-boton-filtro-activo);
}
.border-gray-800 {
    border-color: var(--color-borde-division) !important;
}
.hover\:text-indigo-600:hover {
    color: var(--color-enlace);
}
.hover\:text-white:hover {
    color: var(--color-enlace);
}
.hover\:bg-gray-600:hover {
    background-color: var(--color-boton-hover-principal);
    color: var(--color-boton-principal-hover-texto) !important;
}
.hover\:bg-indigo-700:hover {
    background-color: var(--color-boton-hover-principal) !important;
    color: var(--color-boton-principal-hover-texto) !important;
}
.focus\:ring-blue-500:focus {
    --tw-ring-color: var(--color-borde-input-focus);
}
.filter-btn {
    padding: 0.75rem 1.5rem;
    font-weight: 600;
    color: var(--color-boton-filtro-texto);
    background-color: var(--color-boton-filtro-fondo);
    border: none;
    border-radius: 9999px; 
    box-shadow: 0 5px 0px var(--color-boton-filtro-borde); 
    transition: all 0.15s ease-in-out;
    transform: translateY(0);
    margin-top: 5px;
    margin-bottom: 9px;
}
.filter-btn:hover {
    background-color: var(--color-boton-filtro-activo); 
    transform: translateY(-2px);
    box-shadow: 0 7px 0px var(--color-boton-filtro-borde);
    color: var(--color-boton-filtro-texto-activo) !important;
}
.filter-btn:active,
.active-filter {
    transform: translateY(4px) !important;
    box-shadow: 0 1px 0px var(--color-boton-filtro-borde) !important;
    background-color: var(--color-boton-filtro-activo) !important;
    color: var(--color-boton-filtro-texto-activo) !important;
}
        .animated-btn {
            all: unset;
            box-sizing: border-box;
            display: inline-block;
            text-align: center;
            width: 100%;
            background: transparent;
            border-width: 0;
            transform: scale(var(--btn-scale));
            transition: --bg-position 3s ease, --after-blur 0.3s ease, --before-opacity 0.3s ease, --btn-offset 0.3s ease, --btn-scale 0.2s cubic-bezier(.76,-0.25,.51,1.13);
        }
        .modal-btn {
            all: unset;
            box-sizing: border-box;
            display: inline-block;
            text-align: center;
            width: auto;
            background: transparent;
            border-width: 0;
            transform: scale(var(--btn-scale));
            transition: --bg-position 3s ease, --after-blur 0.3s ease, --before-opacity 0.3s ease, --btn-offset 0.3s ease, --btn-scale 0.2s cubic-bezier(.76,-0.25,.51,1.13);
        }
        .animated-btn > div {
            display: block;
            padding: 0.8em 1.2em;
            background: var(--color-boton-principal);
            color: white;
            font-weight: bold;
            border-radius: 8px;
            font-size: 1rem; 
            position: relative;
            cursor: pointer;
            font-family: "Mona Sans", sans-serif;
        }
        .animated-btn > div:not(:hover) {
            transition: --after-blur 0.3s ease;
        }
        .animated-btn > div > span {
            background: linear-gradient( to right, var(--color-white), var(--color-white), var(--color-cyan), var(--color-blue), var(--color-purple), var(--color-pink), var(--color-red), var(--color-yellow), var(--color-lime), var(--color-white), var(--color-white) ) no-repeat calc(var(--bg-position) * 1%) 0% / 900%;
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
            letter-spacing: 0.15ch;
            font-weight: 600;
        }
        .animated-btn > div:after {
            display: block;
            position: absolute;
            content: "";
            width: 100%;
            height: 100%;
            background: var(--after-bg) no-repeat calc(var(--bg-position) * 1%) 0% / 900%;
            transform: translateY(calc(var(--after-pos-y) * 1px));
            left: 0;
            top: 0;
            z-index: -2;
            filter: blur(calc(var(--after-blur) * 1px));
            opacity: var(--after-opacity);
            border-radius: 8px; 
        }
        .animated-btn > div:before {
            content: "";
            display: block;
            position: absolute;
            width: calc(100% + calc(calc(var(--btn-border-width) * 2) * 1px));
            height: calc(100% + calc(calc(var(--btn-border-width) * 2) * 1px));
            background: linear-gradient( to right, var(--color-white), var(--color-white), var(--color-cyan), var(--color-blue), var(--color-purple), var(--color-pink), var(--color-red), var(--color-yellow), var(--color-lime), var(--color-white), var(--color-white) ) no-repeat calc(var(--bg-position) * 1%) 0% / 900%;
            border-radius: 9px;
            z-index: -1;
            top: calc(var(--btn-border-width) * -1px);
            left: calc(var(--btn-border-width) * -1px);
            opacity: var(--before-opacity);
        }
        .animated-btn:hover {
            --btn-scale: 1.05;
            --bg-position: 0;
            --after-bg: linear-gradient( to right, var(--color-white), var(--color-white), var(--color-cyan), var(--color-blue), var(--color-purple), var(--color-pink), var(--color-red), var(--color-yellow), var(--color-lime), var(--color-white), var(--color-white) );
            --after-blur: 30;
            --after-opacity: 0.3;
            --after-pos-y: 0;
            --before-opacity: 1;
            --btn-offset: 5;
        }
        .animated-btn:active {
            --btn-scale: 0.98;
            --after-blur: 15;
        }
.stock-available {
    background-color: var(--color-stock-fondo) !important;
    color: var(--color-stock-texto);
}
.stock-low {
    background-color: var(--color-stock-low-fondo);
    color: var(--color-stock-low-texto);
}
.stock-out {
    background-color: var(--color-agotado-stock-fondo);
    color: var(--color-agotado-stock-texto);
}
.modal-overlay {
    transition: opacity 0.3s ease;
}
        .modal-content { transition: transform 0.3s ease, opacity 0.3s ease;
            background-color: var(--color-tarjetas);
        }
.modal-active .modal-content {
    transform: scale(1);
    opacity: 1;
}
.prose-custom {
    color: var(--color-texto-secundario);
}
.prose-custom h1, .prose-custom h2, .prose-custom h3, .prose-custom h4, .prose-custom strong {
    color: var(--color-texto-titulos);
}
.prose-custom a {
    color: var(--color-enlace);
}
.prose-custom ul > li::before {
    background-color: var(--color-enlace);
}
.sidebar { background-color: var(--color-tarjetas); border-right: 1px solid var(--color-borde-division); transition: transform 0.3s ease-in-out; }
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
.slider-dot { width: 8px; height: 8px; border-radius: 50%; background-color: #4b5563; cursor: pointer; transition: background-color 0.3s ease; }
.slider-dot.active { background-color: var(--color-boton-filtro-activo); }
.hero-bg {
    background-image: radial-gradient(circle at 50% 0%, rgba(0, 81, 255, 0.2), transparent 40%);
}
.card {
    background-color: var(--color-tarjetas);
    border: 1px solid var(--color-borde-division);
    border-radius: 1rem;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.card-dark {
    background-color: var(--color-tarjetas);
    border: 1px solid var(--color-borde-division);
}
.card-light {
    background-color: var(--color-tarjetas);
    border: 1px solid var(--color-borde-division);
}
.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.2);
}
.product-card { background-color: var(--color-tarjetas);
    border: 1px solid var(--color-borde-division);
    position: relative;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.tarjeta-de-producto .border-glow {
    position: absolute;
    inset: 0;
    border-radius: 1rem;
    padding: 1px;
    background: linear-gradient(120deg, transparent, var(--primary-color), transparent);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    transition: opacity 0.3s ease;
}
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
.filter-btn-elegant {
    padding: 0.75rem 1.5rem;
    border-radius: 9999px;
    font-weight: 600;
    transition: all 0.3s ease;
    background-color: var(--color-boton-filtro-fondo);
    color: var(--color-boton-filtro-texto-activo);
    margin-top: 5px;
    margin-bottom: 5px;
}
.filter-btn-elegant 
.filter-btn-elegant:hover {
    background-color: var(--color-boton-filtro-activo);
    color: var(--color-boton-filtro-texto-activo);
    box-shadow: 0 4px 14px 0 color-mix(in srgb, var(--color-boton-filtro-borde) 39%, transparent);
}
.backdrop-blur-sm {
    border-radius: 50px;
    margin-top: 5px;
}
.form-input {
    color:var(--texto-input) !important;
    border-radius: 5px;
}