/* ══════════════════════════════════════════
       ROI.CSS — Calculadora de ROI
       Editar variables en el bloque :root de base.css
       ══════════════════════════════════════════ */

    /* ── Preloader ── */
    #preloader { position:fixed; inset:0; background:var(--bg-base); z-index:99998; display:flex; align-items:center; justify-content:center; transition:opacity .5s; }
    #preloader.fade-out { opacity:0; pointer-events:none; }
    .pl-inner { display:flex; flex-direction:column; align-items:center; gap:1.5rem; }
    .pl-bar   { width:100px; height:1px; background:var(--border-subtle); border-radius:1px; overflow:hidden; }
    .pl-fill  { height:100%; background:var(--gradient-brand); animation:pl-anim 1.2s cubic-bezier(.16,1,.3,1) forwards; }
    .pl-label { font-family:var(--font-display); font-size:.68rem; letter-spacing:.4em; text-transform:uppercase; color:var(--text-muted); }
    @keyframes pl-anim { from{width:0} to{width:100%} }

    /* ── Layout página ── */
    .roi-page {
      min-height: 100svh;
      padding: 7rem 0 5rem;
      position: relative;
      z-index: 1;
    }

    .roi-glow {
      position: fixed;
      top: -20%;
      left: 50%;
      transform: translateX(-50%);
      width: 700px;
      height: 500px;
      background: radial-gradient(ellipse, rgba(33,118,204,0.15) 0%, rgba(56,189,248,0.05) 50%, transparent 70%);
      pointer-events: none;
      z-index: 0;
    }

    /* ── Cabecera ── */
    .roi-header {
      text-align: center;
      margin-bottom: 3.5rem;
    }

    .roi-eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: rgba(56,189,248,0.08);
      border: 1px solid rgba(56,189,248,0.2);
      border-radius: var(--radius-full);
      padding: 0.35rem 1rem;
      font-size: 0.72rem;
      font-weight: 500;
      color: var(--color-cyan);
      letter-spacing: 0.08em;
      text-transform: uppercase;
      margin-bottom: 1.25rem;
    }

    .roi-title {
      font-size: clamp(2rem, 4vw, 3rem);
      font-weight: 600;
      margin-bottom: 0.75rem;
    }

    .roi-subtitle {
      color: var(--text-secondary);
      font-size: 1rem;
      max-width: 520px;
      margin-inline: auto;
      line-height: 1.7;
    }

    /* ── Grid principal ── */
    .roi-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 2rem;
      align-items: start;
    }

    /* ── Panel de inputs ── */
    .roi-panel {
      background: var(--bg-surface);
      border: 1px solid var(--border-subtle);
      border-radius: var(--radius-lg);
      padding: 2.5rem;
      position: relative;
      overflow: hidden;
    }

    .roi-panel::before {
      content: '';
      position: absolute;
      top: 0; left: 0; right: 0;
      height: 2px;
      background: var(--gradient-brand);
    }

    .roi-panel-title {
      font-size: 1rem;
      font-weight: 600;
      margin-bottom: 0.35rem;
    }

    .roi-panel-desc {
      font-size: 0.82rem;
      color: var(--text-muted);
      margin-bottom: 2rem;
    }

    /* ── Grupos de input ── */
    .roi-group {
      margin-bottom: 1.75rem;
    }

    .roi-label {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 0.82rem;
      color: var(--text-secondary);
      margin-bottom: 0.6rem;
    }

    .roi-label-hint {
      font-size: 0.72rem;
      color: var(--text-muted);
    }

    /* Slider personalizado */
    .roi-slider {
      width: 100%;
      -webkit-appearance: none;
      appearance: none;
      height: 4px;
      border-radius: 2px;
      background: var(--bg-elevated);
      outline: none;
      margin-bottom: 0.5rem;
      cursor: pointer;
    }

    .roi-slider::-webkit-slider-thumb {
      -webkit-appearance: none;
      appearance: none;
      width: 18px;
      height: 18px;
      border-radius: 50%;
      background: var(--gradient-brand);
      cursor: pointer;
      box-shadow: 0 0 8px rgba(56,189,248,0.5);
      transition: box-shadow 0.2s;
    }

    .roi-slider::-webkit-slider-thumb:hover {
      box-shadow: 0 0 16px rgba(56,189,248,0.8);
    }

    .roi-slider::-moz-range-thumb {
      width: 18px;
      height: 18px;
      border-radius: 50%;
      background: var(--gradient-brand);
      cursor: pointer;
      border: none;
    }

    /* Track coloreado dinámicamente via JS */
    .roi-slider-track {
      position: relative;
      display: flex;
      justify-content: space-between;
      font-size: 0.68rem;
      color: var(--text-muted);
      margin-top: 0.25rem;
    }

    /* Input numérico directo */
    .roi-input {
      width: 100%;
      background: var(--bg-elevated);
      border: 1px solid var(--border-subtle);
      border-radius: var(--radius-sm);
      padding: 0.7rem 1rem;
      color: var(--text-primary);
      font-family: var(--font-body);
      font-size: 0.9rem;
      outline: none;
      transition: border-color 0.2s, box-shadow 0.2s;
    }

    .roi-input:focus {
      border-color: var(--color-cyan);
      box-shadow: 0 0 0 3px rgba(56,189,248,0.12);
    }

    /* Select */
    .roi-select {
      width: 100%;
      background: var(--bg-elevated);
      border: 1px solid var(--border-subtle);
      border-radius: var(--radius-sm);
      padding: 0.7rem 2.5rem 0.7rem 1rem;
      color: var(--text-primary);
      font-family: var(--font-body);
      font-size: 0.9rem;
      outline: none;
      cursor: pointer;
      appearance: none;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2338BDF8' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: right 0.75rem center;
      background-size: 16px;
      transition: border-color 0.2s;
    }

    .roi-select:focus { border-color: var(--color-cyan); }
    .roi-select option { background: var(--bg-elevated); }

    /* Valor actual del slider */
    .roi-value-display {
      font-family: var(--font-display);
      font-size: 1.1rem;
      font-weight: 600;
      color: var(--color-cyan);
    }

    /* ── Separador de secciones ── */
    .roi-section-sep {
      font-size: 0.68rem;
      font-weight: 500;
      letter-spacing: 0.15em;
      text-transform: uppercase;
      color: var(--text-muted);
      border-bottom: 1px solid var(--border-subtle);
      padding-bottom: 0.5rem;
      margin-bottom: 1.5rem;
      margin-top: 0.5rem;
    }

    /* ── Panel de resultados ── */
    .roi-results {
      display: flex;
      flex-direction: column;
      gap: 1.25rem;
      position: sticky;
      top: 7rem;
    }

    .roi-result-card {
      background: var(--bg-surface);
      border: 1px solid var(--border-subtle);
      border-radius: var(--radius-lg);
      padding: 2rem;
      position: relative;
      overflow: hidden;
      transition: border-color 0.3s;
    }

    .roi-result-card:hover { border-color: var(--border-glow); }

    .roi-result-card--main {
      background: var(--bg-elevated);
      border-color: rgba(56,189,248,0.25);
    }

    .roi-result-card--main::before {
      content: '';
      position: absolute;
      top: 0; left: 0; right: 0;
      height: 2px;
      background: var(--gradient-brand);
    }

    .roi-result-label {
      font-size: 0.72rem;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--text-muted);
      margin-bottom: 0.5rem;
    }

    .roi-result-value {
      font-family: var(--font-display);
      font-size: 2.8rem;
      font-weight: 600;
      background: var(--gradient-brand);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      line-height: 1;
      margin-bottom: 0.35rem;
      transition: all 0.4s var(--ease-out);
    }

    .roi-result-sub {
      font-size: 0.82rem;
      color: var(--text-secondary);
    }

    /* Grid de métricas secundarias */
    .roi-metrics-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 1rem;
    }

    .roi-metric {
      background: var(--bg-surface);
      border: 1px solid var(--border-subtle);
      border-radius: var(--radius-md);
      padding: 1.25rem;
      transition: border-color 0.3s;
    }

    .roi-metric:hover { border-color: var(--border-glow); }

    .roi-metric-label {
      font-size: 0.68rem;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--text-muted);
      margin-bottom: 0.4rem;
    }

    .roi-metric-value {
      font-family: var(--font-display);
      font-size: 1.5rem;
      font-weight: 600;
      background: var(--gradient-brand);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      line-height: 1;
    }

    .roi-metric-note {
      font-size: 0.72rem;
      color: var(--text-muted);
      margin-top: 0.25rem;
    }

    /* Barra de payback */
    .roi-payback {
      background: var(--bg-surface);
      border: 1px solid var(--border-subtle);
      border-radius: var(--radius-lg);
      padding: 1.75rem;
    }

    .roi-payback-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 1rem;
    }

    .roi-payback-title {
      font-size: 0.82rem;
      color: var(--text-secondary);
    }

    .roi-payback-months {
      font-family: var(--font-display);
      font-size: 1.1rem;
      font-weight: 600;
      color: var(--color-cyan);
    }

    .roi-payback-bar {
      height: 6px;
      background: var(--bg-elevated);
      border-radius: 3px;
      overflow: hidden;
    }

    .roi-payback-fill {
      height: 100%;
      background: var(--gradient-brand);
      border-radius: 3px;
      transition: width 0.6s var(--ease-out);
      width: 0%;
    }

    .roi-payback-scale {
      display: flex;
      justify-content: space-between;
      font-size: 0.65rem;
      color: var(--text-muted);
      margin-top: 0.4rem;
    }

    /* Disclaimer */
    .roi-disclaimer {
      font-size: 0.72rem;
      color: var(--text-muted);
      text-align: center;
      line-height: 1.6;
      padding: 0 1rem;
    }

    /* CTA resultado */
    .roi-cta {
      background: var(--bg-surface);
      border: 1px solid var(--border-subtle);
      border-radius: var(--radius-lg);
      padding: 1.75rem;
      text-align: center;
    }

    .roi-cta p {
      font-size: 0.88rem;
      color: var(--text-secondary);
      margin-bottom: 1rem;
      line-height: 1.6;
    }

    .roi-cta .btn-primary {
      width: 100%;
      justify-content: center;
    }

    /* ── Responsive ── */
    @media (max-width: 900px) {
      .roi-grid { grid-template-columns: 1fr; }
      .roi-results { position: static; }
    }

    @media (max-width: 480px) {
      .roi-panel { padding: 1.75rem; }
      .roi-metrics-grid { grid-template-columns: 1fr; }
    }