:root {
      --bg: #080b12;
      --surface: #101622;
      --surface-2: #151d2c;
      --surface-3: #1a2435;
      --text: #f4f7fb;
      --muted: #9eabc0;
      --line: rgba(255,255,255,.09);
      --accent: #8ef0c6;
      --accent-2: #8fb7ff;
      --warning: #ffd993;
      --danger: #ff9b9b;
      --radius: 18px;
      --shadow: 0 18px 50px rgba(0,0,0,.28);
    }

    * { box-sizing: border-box; }

    html { scroll-behavior: smooth; }

    body {
      margin: 0;
      background:
        radial-gradient(circle at 85% 8%, rgba(143,183,255,.14), transparent 30%),
        radial-gradient(circle at 15% 0%, rgba(142,240,198,.10), transparent 26%),
        var(--bg);
      color: var(--text);
      font-family: "Poppins", sans-serif;
      min-height: 100vh;
    }

    a { color: inherit; text-decoration: none; }

    button, input, textarea, select { font: inherit; }

    .shell {
      display: grid;
      grid-template-columns: 320px minmax(0, 1fr);
      min-height: 100vh;
    }

    .sidebar {
      position: sticky;
      top: 0;
      height: 100vh;
      padding: 26px 20px;
      border-right: 1px solid var(--line);
      background: rgba(8,11,18,.88);
      backdrop-filter: blur(18px);
      overflow-y: auto;
      z-index: 10;
    }

    .brand {
      display: flex;
      align-items: center;
      gap: 13px;
      margin-bottom: 26px;
    }

    .brand-mark {
      width: 42px;
      height: 42px;
      border-radius: 13px;
      display: grid;
      place-items: center;
      background: linear-gradient(145deg, var(--accent), var(--accent-2));
      color: #07101a;
      font-family: "JetBrains Mono", monospace;
      font-weight: 700;
    }

    .brand strong {
      display: block;
      font-size: 15px;
    }

    .brand span {
      display: block;
      color: var(--muted);
      font-size: 11px;
      margin-top: 3px;
    }

    .side-label {
      color: var(--muted);
      font: 500 11px/1.2 "JetBrains Mono", monospace;
      letter-spacing: .08em;
      text-transform: uppercase;
      margin: 18px 10px 10px;
    }

    .program-nav {
      display: grid;
      gap: 8px;
    }

    .program-btn {
      width: 100%;
      border: 1px solid transparent;
      background: transparent;
      color: var(--muted);
      text-align: left;
      border-radius: 14px;
      padding: 13px 14px;
      cursor: pointer;
      display: grid;
      grid-template-columns: 30px 1fr;
      gap: 10px;
      align-items: center;
      transition: .2s ease;
    }

    .program-btn:hover {
      background: rgba(255,255,255,.04);
      color: var(--text);
    }

    .program-btn.active {
      background: linear-gradient(135deg, rgba(142,240,198,.12), rgba(143,183,255,.10));
      border-color: rgba(142,240,198,.25);
      color: var(--text);
    }

    .program-btn .num {
      width: 28px;
      height: 28px;
      border-radius: 9px;
      display: grid;
      place-items: center;
      background: rgba(255,255,255,.05);
      font: 600 11px "JetBrains Mono", monospace;
      color: var(--accent);
    }

    .program-btn .txt {
      font-size: 12px;
      line-height: 1.4;
    }

    .sidebar-cta {
      margin-top: 22px;
      padding: 16px;
      border: 1px solid var(--line);
      background: var(--surface);
      border-radius: 16px;
    }

    .sidebar-cta p {
      color: var(--muted);
      font-size: 12px;
      line-height: 1.6;
      margin: 0 0 12px;
    }

    .btn {
      border: 0;
      border-radius: 12px;
      padding: 12px 16px;
      cursor: pointer;
      font-weight: 600;
      display: inline-flex;
      justify-content: center;
      align-items: center;
      gap: 8px;
      transition: transform .2s ease, opacity .2s ease;
    }

    .btn:hover { transform: translateY(-1px); }

    .btn-primary {
      background: linear-gradient(135deg, var(--accent), var(--accent-2));
      color: #07101a;
    }

    .btn-secondary {
      background: rgba(255,255,255,.05);
      color: var(--text);
      border: 1px solid var(--line);
    }

    .btn-block { width: 100%; }

    main {
      padding: 42px clamp(24px, 4vw, 68px) 70px;
      min-width: 0;
    }

    .mobile-topbar {
      display: none;
      position: sticky;
      top: 0;
      z-index: 20;
      margin: -42px -24px 24px;
      padding: 14px 18px;
      border-bottom: 1px solid var(--line);
      background: rgba(8,11,18,.92);
      backdrop-filter: blur(16px);
    }

    .mobile-topbar button {
      border: 1px solid var(--line);
      background: var(--surface);
      color: var(--text);
      border-radius: 10px;
      padding: 9px 12px;
    }

    .hero {
      max-width: 1040px;
      margin-bottom: 34px;
    }

    .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      color: var(--accent);
      font: 500 12px "JetBrains Mono", monospace;
      text-transform: uppercase;
      letter-spacing: .08em;
      margin-bottom: 14px;
    }

    .eyebrow::before {
      content: "";
      width: 28px;
      height: 1px;
      background: var(--accent);
    }

    h1 {
      font-size: clamp(34px, 5vw, 68px);
      line-height: 1.03;
      margin: 0;
      letter-spacing: -.035em;
      max-width: 1000px;
    }

    .hero p {
      max-width: 860px;
      color: var(--muted);
      line-height: 1.75;
      font-size: 16px;
      margin: 20px 0 0;
    }

    .value-strip {
      margin: 28px 0 36px;
      border: 1px solid rgba(142,240,198,.20);
      background: linear-gradient(135deg, rgba(142,240,198,.08), rgba(143,183,255,.07));
      border-radius: var(--radius);
      padding: 20px 22px;
      display: grid;
      grid-template-columns: auto 1fr;
      gap: 14px;
      align-items: start;
      max-width: 1040px;
    }

    .value-strip .tag {
      background: var(--accent);
      color: #07101a;
      font: 600 11px "JetBrains Mono", monospace;
      padding: 7px 9px;
      border-radius: 9px;
      white-space: nowrap;
    }

    .value-strip strong {
      display: block;
      font-size: 18px;
      margin-bottom: 5px;
    }

    .value-strip p {
      margin: 0;
      color: var(--muted);
      line-height: 1.6;
      font-size: 13px;
    }

    .panel {
      max-width: 1120px;
      animation: fade .25s ease;
    }

    @keyframes fade {
      from { opacity: 0; transform: translateY(6px); }
      to { opacity: 1; transform: translateY(0); }
    }

    .panel-header {
      padding: clamp(22px, 4vw, 38px);
      border: 1px solid var(--line);
      border-radius: 24px;
      background:
        linear-gradient(135deg, rgba(255,255,255,.025), rgba(255,255,255,.01)),
        var(--surface);
      box-shadow: var(--shadow);
      margin-bottom: 20px;
    }

    .panel-kicker {
      color: var(--accent);
      font: 500 12px "JetBrains Mono", monospace;
      text-transform: uppercase;
      letter-spacing: .08em;
    }

    .panel-header h2 {
      margin: 10px 0 12px;
      font-size: clamp(27px, 4vw, 46px);
      line-height: 1.12;
      letter-spacing: -.025em;
    }

    .panel-header .promise {
      color: var(--muted);
      line-height: 1.7;
      margin: 0;
      max-width: 890px;
    }

    .meta-grid {
      margin-top: 24px;
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 12px;
    }

    .meta {
      padding: 14px 16px;
      background: rgba(255,255,255,.035);
      border: 1px solid var(--line);
      border-radius: 14px;
    }

    .meta span {
      display: block;
      color: var(--muted);
      font: 500 10px "JetBrains Mono", monospace;
      text-transform: uppercase;
      letter-spacing: .07em;
      margin-bottom: 7px;
    }

    .meta strong {
      font-size: 13px;
      line-height: 1.45;
    }

    .content-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 18px;
    }

    .card {
      padding: 22px;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: rgba(16,22,34,.82);
      min-width: 0;
    }

    .card.full { grid-column: 1 / -1; }

    .card h3 {
      margin: 0 0 14px;
      font-size: 17px;
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .card h3 .icon {
      width: 31px;
      height: 31px;
      border-radius: 10px;
      display: grid;
      place-items: center;
      background: rgba(142,240,198,.09);
      color: var(--accent);
      font-family: "JetBrains Mono", monospace;
      font-size: 12px;
    }

    .card p, .card li {
      color: var(--muted);
      line-height: 1.65;
      font-size: 13px;
    }

    .card ul {
      margin: 0;
      padding-left: 18px;
    }

    .card li + li { margin-top: 8px; }

    .funnel {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 10px;
    }

    .step {
      padding: 16px;
      border-radius: 14px;
      border: 1px solid var(--line);
      background: var(--surface-2);
    }

    .step span {
      display: inline-block;
      color: var(--accent);
      font: 600 10px "JetBrains Mono", monospace;
      margin-bottom: 8px;
    }

    .step strong {
      display: block;
      font-size: 13px;
      margin-bottom: 6px;
    }

    .step p {
      margin: 0;
      font-size: 12px;
    }

    .message-box {
      border-left: 3px solid var(--accent);
      padding: 16px 18px;
      background: rgba(142,240,198,.06);
      border-radius: 0 14px 14px 0;
      color: var(--text);
      font-size: 17px;
      line-height: 1.55;
    }

    .message-box small {
      display: block;
      margin-top: 10px;
      color: var(--muted);
      font-size: 12px;
    }

    .calendar {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 10px;
    }

    .week {
      padding: 16px;
      border-radius: 14px;
      border: 1px solid var(--line);
      background: rgba(255,255,255,.025);
    }

    .week strong {
      display: block;
      color: var(--accent-2);
      font: 600 11px "JetBrains Mono", monospace;
      margin-bottom: 8px;
    }

    .week p { margin: 0; }

    .bottom-cta {
      margin-top: 24px;
      max-width: 1120px;
      padding: clamp(24px, 4vw, 38px);
      border-radius: 22px;
      background: linear-gradient(135deg, rgba(142,240,198,.12), rgba(143,183,255,.12));
      border: 1px solid rgba(255,255,255,.12);
      display: flex;
      justify-content: space-between;
      gap: 22px;
      align-items: center;
    }

    .bottom-cta h3 {
      margin: 0 0 8px;
      font-size: 22px;
    }

    .bottom-cta p {
      color: var(--muted);
      margin: 0;
      font-size: 13px;
      line-height: 1.6;
      max-width: 720px;
    }

    .bottom-cta .actions {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
      flex-shrink: 0;
    }

    footer {
      max-width: 1120px;
      margin-top: 28px;
      padding-top: 20px;
      border-top: 1px solid var(--line);
      display: flex;
      justify-content: space-between;
      gap: 20px;
      color: var(--muted);
      font-size: 11px;
    }

    .overlay { display: none; }

    @media (max-width: 980px) {
      .shell { grid-template-columns: 1fr; }

      .sidebar {
        position: fixed;
        inset: 0 auto 0 0;
        width: min(340px, 88vw);
        transform: translateX(-104%);
        transition: transform .25s ease;
        box-shadow: 20px 0 60px rgba(0,0,0,.45);
      }

      .sidebar.open { transform: translateX(0); }

      .overlay {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,.56);
        opacity: 0;
        pointer-events: none;
        transition: opacity .25s ease;
        z-index: 9;
      }

      .overlay.show {
        opacity: 1;
        pointer-events: auto;
      }

      main { padding: 42px 24px 60px; }

      .mobile-topbar {
        display: flex;
        align-items: center;
        justify-content: space-between;
      }
    }

    @media (max-width: 760px) {
      h1 { font-size: 40px; }
      .value-strip { grid-template-columns: 1fr; }
      .content-grid, .meta-grid { grid-template-columns: 1fr; }
      .funnel, .calendar { grid-template-columns: 1fr 1fr; }
      .bottom-cta { flex-direction: column; align-items: flex-start; }
      footer { flex-direction: column; }
    }

    @media (max-width: 520px) {
      .funnel, .calendar { grid-template-columns: 1fr; }
      .panel-header, .card { padding: 19px; }
      .bottom-cta .actions, .bottom-cta .btn { width: 100%; }
    }

/* Contexto persistente de la línea seleccionada */
.active-program-bar {
  position: sticky;
  top: 14px;
  z-index: 8;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 15px;
  max-width: 1120px;
  margin: 0 0 20px;
  padding: 12px 14px;
  background: rgba(16,22,34,.91);
  border: 1px solid rgba(142,240,198,.24);
  border-radius: 16px;
  box-shadow: 0 12px 35px rgba(0,0,0,.25);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
.active-program-id { display:flex; align-items:center; gap:10px; }
.active-program-id > span,
.active-program-copy > span {
  display:block;
  color:var(--muted);
  font:500 10px "JetBrains Mono", monospace;
  text-transform:uppercase;
  letter-spacing:.08em;
}
.active-program-number {
  width:36px; height:36px; display:grid; place-items:center;
  border-radius:10px; background:rgba(142,240,198,.12); color:var(--accent);
  font:600 12px "JetBrains Mono", monospace;
}
.active-program-copy { min-width:0; }
.active-program-copy strong {
  display:block; margin-top:3px; overflow:hidden; white-space:nowrap;
  text-overflow:ellipsis; font-size:14px;
}
.active-program-controls { display:flex; gap:6px; }
.active-program-controls button {
  width:36px; height:36px; border:1px solid var(--line); border-radius:10px;
  background:rgba(255,255,255,.04); color:var(--text); cursor:pointer;
  transition:.2s ease;
}
.active-program-controls button:hover { background:rgba(255,255,255,.09); }
.active-program-controls button:disabled { opacity:.3; cursor:not-allowed; }
.active-program-bar.flash { animation:contextFlash .35s ease; }
@keyframes contextFlash {
  0% { border-color:rgba(142,240,198,.7); transform:translateY(-2px); }
  100% { border-color:rgba(142,240,198,.24); transform:translateY(0); }
}
@media (max-width:980px) {
  .active-program-bar { top:68px; }
}
@media (max-width:760px) {
  .active-program-bar { grid-template-columns:auto minmax(0,1fr); gap:11px; }
  .active-program-id > span { display:none; }
  .active-program-controls { display:none; }
  .active-program-copy strong { font-size:12px; }
}

/* Conversión y formularios */
button.btn { font-family: inherit; }
.cta-kicker {
  display:block;
  margin-bottom:8px;
  color:var(--accent);
  font:600 10px "JetBrains Mono", monospace;
  letter-spacing:.09em;
}
.alliance-link {
  margin-top:14px;
  padding:0;
  border:0;
  border-bottom:1px solid rgba(142,240,198,.35);
  background:transparent;
  color:var(--accent);
  cursor:pointer;
  font-size:12px;
  text-align:left;
}
.alliance-link:hover { border-color:var(--accent); }

.modal {
  position:fixed;
  inset:0;
  z-index:100;
  display:grid;
  place-items:center;
  padding:20px;
  visibility:hidden;
  opacity:0;
  transition:opacity .2s ease, visibility .2s ease;
}
.modal.open { visibility:visible; opacity:1; }
.modal-backdrop {
  position:absolute;
  inset:0;
  background:rgba(2,5,10,.78);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}
.modal-dialog {
  position:relative;
  z-index:1;
  width:min(720px, 100%);
  max-height:calc(100vh - 40px);
  overflow-y:auto;
  padding:clamp(22px,4vw,36px);
  border:1px solid rgba(142,240,198,.22);
  border-radius:22px;
  background:linear-gradient(145deg, rgba(18,27,40,.98), rgba(11,16,25,.99));
  box-shadow:0 30px 90px rgba(0,0,0,.55);
}
.modal-close {
  position:absolute;
  top:14px;
  right:14px;
  width:38px;
  height:38px;
  border:1px solid var(--line);
  border-radius:11px;
  background:rgba(255,255,255,.04);
  color:var(--text);
  cursor:pointer;
  font-size:24px;
  line-height:1;
}
.modal-heading { padding-right:42px; margin-bottom:22px; }
.modal-kicker {
  color:var(--accent);
  font:600 10px "JetBrains Mono", monospace;
  letter-spacing:.1em;
}
.modal-heading h2 { margin:8px 0 8px; font-size:clamp(24px,4vw,34px); }
.modal-heading p { margin:0; color:var(--muted); font-size:13px; line-height:1.65; }
.form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:15px; }
.field { display:grid; gap:7px; min-width:0; }
.field span { color:var(--muted); font-size:11px; font-weight:500; }
.field input,
.field select,
.field textarea {
  width:100%;
  border:1px solid var(--line);
  border-radius:12px;
  background:rgba(255,255,255,.045);
  color:var(--text);
  padding:12px 13px;
  outline:none;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color:rgba(142,240,198,.55);
  box-shadow:0 0 0 3px rgba(142,240,198,.08);
}
.field input[readonly] { color:var(--accent); background:rgba(142,240,198,.05); }
.field select option { background:#101622; color:var(--text); }
.field textarea { resize:vertical; min-height:110px; }
.full-field { grid-column:1 / -1; }
.form-actions { display:flex; justify-content:flex-end; gap:10px; margin-top:20px; }
.form-note { margin:12px 0 0; color:var(--muted); font-size:10px; line-height:1.5; text-align:right; }
body.modal-open { overflow:hidden; }
.field.is-hidden { display:none; }

@media (max-width:760px) {
  .form-grid { grid-template-columns:1fr; }
  .full-field { grid-column:auto; }
  .modal { padding:10px; }
  .modal-dialog { max-height:calc(100vh - 20px); border-radius:18px; }
  .form-actions { flex-direction:column-reverse; }
  .form-actions .btn { width:100%; }
  .form-note { text-align:left; }
}