/* --- Variables de Diseño Globales --- */
    :root {
      --gold-primary: #ffb608;
      --gold-secondary: #F9881F;
      --bg-main: #f0f2f5;
      --card-bg: rgba(255, 255, 255, 0.75);
      --slider-track: #e9ecef;
      --shadow-color: rgba(100, 100, 100, 0.15);
    }

    /* --- Animaciones (Sin cambios, son eficientes) --- */
    @keyframes fadeInScaleUp { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } }
    @keyframes price-flash { 0% { transform: scale(1); } 50% { transform: scale(1.05); } 100% { transform: scale(1); } }
    @keyframes pop { 0% { transform: scale(1); } 50% { transform: scale(1.2); } 100% { transform: scale(1); } }
    @keyframes shine { 0% { transform: translateX(-100%) skewX(-20deg); } 100% { transform: translateX(200%) skewX(-20deg); } }

    /* --- Estilos Base --- */
    body {
      background-color: var(--bg-main);
      background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23d4dae3' fill-opacity='0.4'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
      font-family: 'Poppins', sans-serif;
    }

    /* --- Componentes Personalizados y Overrides de Bootstrap --- */
    .pricing-card {
      background-color: var(--card-bg);
      backdrop-filter: blur(15px);
      border: none; /* Bootstrap añade un borde por defecto que no queremos */
      box-shadow: 0 10px 30px var(--shadow-color);
      animation: fadeInScaleUp 0.8s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
      transition: transform 0.3s ease, box-shadow 0.3s ease;
    }
    .pricing-card:hover {
      transform: translateY(-8px);
      box-shadow: 0 15px 40px var(--shadow-color);
    }
    .card-header.gradient-gold {
      background: linear-gradient(135deg, var(--gold-primary), var(--gold-secondary));
      text-shadow: 1px 1px 3px rgba(0,0,0,0.2);
      position: relative;
      overflow: hidden;
    }
    .card-header.gradient-gold::before {
      content: ''; position: absolute; top: 0; left: 0;
      width: 50%; height: 100%;
      background: linear-gradient(to right, transparent 0%, rgba(255,255,255,0.5) 50%, transparent 100%);
      animation: shine 4s infinite linear;
    }
    .form-switch .form-check-input:checked {
      background-color: var(--gold-primary);
      border-color: var(--gold-primary);
    }
    .text-gradient-gold {
      background: linear-gradient(45deg, var(--gold-secondary), var(--gold-primary));
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      text-fill-color: transparent;
    }
    .golden-hr { border: 0; height: 2px; background-image: linear-gradient(to right, transparent, var(--gold-primary), transparent); }

    /* Estilos multi-navegador para el input[type=range] */
    .form-range {
      --progress-percentage: 0%;
      -webkit-appearance: none; appearance: none;
      background: transparent; cursor: pointer;
    }
    .form-range:focus { box-shadow: none; }
    .form-range::-webkit-slider-thumb {
      -webkit-appearance: none; appearance: none;
      margin-top: -8px; /* Centrado vertical */
      height: 24px; width: 24px;
      background: #fff; border-radius: 50%;
      border: 3px solid var(--gold-primary);
      box-shadow: 0 2px 5px rgba(255, 182, 8, 0.4);
      transition: transform 0.2s ease;
    }
    .form-range::-moz-range-thumb {
      height: 24px; width: 24px;
      background: #fff; border-radius: 50%;
      border: 3px solid var(--gold-primary);
      box-shadow: 0 2px 5px rgba(255, 182, 8, 0.4);
      transition: transform 0.2s ease;
    }
    .form-range:active::-webkit-slider-thumb { transform: scale(1.2); }
    .form-range:active::-moz-range-thumb { transform: scale(1.2); }
    .form-range::-webkit-slider-runnable-track {
      height: 8px; border-radius: 4px;
      background: linear-gradient(to right, var(--gold-primary) var(--progress-percentage), var(--slider-track) var(--progress-percentage));
    }
    .form-range::-moz-range-track { height: 8px; border-radius: 4px; background: var(--slider-track); }
    .form-range::-moz-range-progress { height: 8px; border-radius: 4px; background-color: var(--gold-primary); }

    /* Clases de estado JS */
    #userCount.pop { animation: pop 0.3s ease-out; }
    #priceDisplay.flash { animation: price-flash 0.5s ease-out; }
    #saveText { min-height: 1.5rem; transition: opacity 0.4s ease, transform 0.4s ease; }