:root{
    --bg: #0b1220;
    --card: rgba(255,255,255,.06);
    --stroke: rgba(255,255,255,.12);
    --muted: rgba(255,255,255,.65);
    --text: rgba(255,255,255,.92);
    --accent: #6ee7ff;
    --accent2:#a78bfa;
    --good:#34d399;
    --warn:#fbbf24;
  }
  
  body{
    background:
      radial-gradient(1200px 700px at 10% 10%, rgba(110,231,255,.18), transparent 55%),
      radial-gradient(900px 600px at 85% 15%, rgba(167,139,250,.20), transparent 50%),
      radial-gradient(900px 600px at 45% 90%, rgba(52,211,153,.16), transparent 55%),
      var(--bg);
    color: var(--text);
    font-feature-settings: "liga" 1, "kern" 1;
  }
  
  .navbar{
    backdrop-filter: blur(10px);
    background: rgba(11,18,32,.55) !important;
    border-bottom: 1px solid var(--stroke);
  }
  
  .glass{
    background: var(--card);
    border: 1px solid var(--stroke);
    border-radius: 18px;
    box-shadow: 0 18px 40px rgba(0,0,0,.25);
  }
  
  .hero{
    padding: 92px 0 42px;
  }
  
  .badge-soft{
    display:inline-flex;
    gap:.5rem;
    align-items:center;
    padding:.45rem .75rem;
    border-radius: 999px;
    background: rgba(110,231,255,.12);
    border: 1px solid rgba(110,231,255,.25);
    color: rgba(220,250,255,.95);
    font-weight: 600;
    font-size:.9rem;
  }
  
  .lead{ color: var(--muted); }
  
  .btn-primary{
    background: linear-gradient(135deg, rgba(110,231,255,.95), rgba(167,139,250,.95));
    border: none;
    color: #07101f;
    font-weight: 700;
    box-shadow: 0 10px 28px rgba(110,231,255,.18);
  }
  .btn-primary:hover{ filter: brightness(1.03); transform: translateY(-1px); }
  
  .btn-outline-light{
    border-color: rgba(255,255,255,.22);
    color: rgba(255,255,255,.88);
  }
  .btn-outline-light:hover{
    background: rgba(255,255,255,.08);
    border-color: rgba(255,255,255,.28);
    color: #fff;
  }
  
  .kpi{
    color: rgba(255,255,255,.86);
    border: 1px solid var(--stroke);
    background: rgba(255,255,255,.04);
    border-radius: 16px;
    padding: 14px;
  }
  
  .section{ padding: 60px 0; }
  .section-title{
    font-size: clamp(1.4rem, 2.4vw, 2.05rem);
    font-weight: 800;
    letter-spacing: -.02em;
  }
  .section-sub{
    color: var(--muted);
    max-width: 62ch;
  }
  
  .feature-icon{
    width: 44px;
    height: 44px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius: 14px;
    background: rgba(110,231,255,.12);
    border: 1px solid rgba(110,231,255,.25);
    color: rgba(220,250,255,.95);
    font-size: 1.2rem;
  }
  
  .pricing-toggle{
    border: 1px solid var(--stroke);
    background: rgba(255,255,255,.04);
    border-radius: 999px;
    padding: 6px;
    display:inline-flex;
    gap: 6px;
  }
  .pricing-toggle .toggle-btn{
    border-radius: 999px;
    padding: .45rem .9rem;
    border: 1px solid transparent;
    background: transparent;
    color: rgba(255,255,255,.8);
    font-weight: 700;
  }
  .pricing-toggle .toggle-btn.active{
    background: rgba(110,231,255,.18);
    border-color: rgba(110,231,255,.28);
    color: rgba(220,250,255,.95);
  }
  
  .price{
    font-size: 2.1rem;
    font-weight: 900;
    letter-spacing: -.03em;
  }
  .price small{
    font-size: .95rem;
    color: var(--muted);
    font-weight: 600;
  }
  
  .list-check li{
    margin: .5rem 0;
    color: rgba(255,255,255,.82);
  }
  .list-check i{
    color: var(--good);
    margin-right: .55rem;
  }
  
  .pill{
    font-size:.82rem;
    font-weight: 800;
    color: rgba(255,255,255,.88);
    border: 1px solid rgba(255,255,255,.16);
    background: rgba(255,255,255,.06);
    padding: .25rem .55rem;
    border-radius: 999px;
  }
  
  .faq .accordion-item{
    background: rgba(255,255,255,.04);
    border: 1px solid var(--stroke);
    border-radius: 14px !important;
    overflow:hidden;
  }
  .faq .accordion-button{
    background: transparent;
    color: rgba(255,255,255,.88);
    font-weight: 800;
  }
  .faq .accordion-button:not(.collapsed){
    background: rgba(110,231,255,.10);
    color: rgba(220,250,255,.98);
  }
  .faq .accordion-body{ color: rgba(255,255,255,.78); }
  
  footer{
    border-top: 1px solid var(--stroke);
    background: rgba(11,18,32,.55);
  }
  
  .small-muted{ color: rgba(255,255,255,.62); }
  .link-soft{ color: rgba(110,231,255,.9); text-decoration: none; }
  .link-soft:hover{ text-decoration: underline; }
  
  .logo-mark{
    width: 34px; height: 34px;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(110,231,255,.95), rgba(167,139,250,.95));
    display:inline-flex;
    align-items:center;
    justify-content:center;
    color:#061021;
    font-weight: 950;
    box-shadow: 0 12px 26px rgba(167,139,250,.18);
  }
  
  .hero-title{ font-weight: 900; }
  .t-accent{ color: var(--accent); }
  .t-accent2{ color: var(--accent2); }
  .t-good{ color: var(--good); }
  .t-warn{ color: var(--warn); }
  
  .hr-soft{ border-color: rgba(255,255,255,.12); }
  
  .plan-pro{ border-color: rgba(110,231,255,.35) !important; }
  .pill-pro{
    background: rgba(110,231,255,.14);
    border-color: rgba(110,231,255,.28);
    color: rgba(220,250,255,.95);
  }
  
  /* Modal cosmetics */
  .modal-glass{ border-radius: 18px; }
  .modal-header-soft{ border-bottom: 1px solid rgba(255,255,255,.12); }
  .form-text-soft{ color: rgba(255,255,255,.55); }


  /* ===== Modal: menos transparente (más legible) ===== */

/* Backdrop más oscuro para separar el modal del fondo */
.modal-backdrop.show{
    opacity: .75; /* default ~.5, subimos */
  }
  
  /* Contenedor del modal (tu modal usa .modal-content.glass.modal-glass) */
  .modal-content.modal-glass{
    background: rgba(12, 18, 32, 0.92) !important; /* MUCHO menos transparente */
    border: 1px solid rgba(255,255,255,.18) !important;
    box-shadow: 0 28px 90px rgba(0,0,0,.55);
    backdrop-filter: blur(10px);
  }
  
  /* Header y separadores un poquito más visibles */
  .modal-header.modal-header-soft{
    border-bottom: 1px solid rgba(255,255,255,.14) !important;
  }
  
  /* Inputs dentro del modal con fondo oscuro y texto claro */
  .modal-content.modal-glass .form-control{
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.18);
    color: rgba(255,255,255,.92);
  }
  
  .modal-content.modal-glass .form-control:focus{
    background: rgba(255,255,255,.08);
    border-color: rgba(110,231,255,.45);
    box-shadow: 0 0 0 .25rem rgba(110,231,255,.12);
    color: rgba(255,255,255,.95);
  }
  
  /* Labels con más contraste */
  .modal-content.modal-glass .form-label{
    color: rgba(255,255,255,.88);
  }
  
  /* Alerts para que no “se pierdan” */
  .modal-content.modal-glass .alert{
    border: 1px solid rgba(255,255,255,.14);
  }