:root{
    --ink:#14171A;
    --ink-2:#1D2124;
    --paper:#EFEDE6;
    --paper-dim:#C9C6BC;
    --lime:#C6FF5C;
    --coral:#FF5A4E;
    --line: rgba(239,237,230,0.14);
  }
  :root[data-theme="dark"], :root:not([data-theme="light"]) {
    --ink:#14171A; --ink-2:#1D2124; --paper:#EFEDE6; --paper-dim:#C9C6BC; --lime:#C6FF5C; --coral:#FF5A4E; --line: rgba(239,237,230,0.14);
  }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){ --ink:#14171A; --ink-2:#1D2124; --paper:#EFEDE6; --paper-dim:#C9C6BC; --lime:#C6FF5C; --coral:#FF5A4E; --line: rgba(239,237,230,0.14); }
  }

  *{box-sizing:border-box;}
  html,body{margin:0;padding:0;}
  body{
    background:var(--ink);
    color:var(--paper);
    font-family:'Inter', -apple-system, 'Segoe UI', Roboto, sans-serif;
    height:100vh;
    width:100vw;
    overflow:hidden;
  }
  h1,h2,h3,.display{
    font-family:'Space Grotesk','Inter',sans-serif;
    font-weight:700;
    letter-spacing:-0.01em;
    margin:0;
  }

  .deck{ position:relative; width:100vw; height:100vh; overflow:hidden; }

  .slide{
    position:absolute; inset:0;
    display:flex; flex-direction:column; justify-content:center;
    padding: clamp(28px, 6vw, 96px) clamp(28px, 8vw, 140px);
    opacity:0; transform:translateX(24px);
    transition: opacity .45s ease, transform .45s ease;
    pointer-events:none;
  }
  .slide.active{ opacity:1; transform:translateX(0); pointer-events:auto; }
  .slide.leaving{ transform:translateX(-24px); }

  .eyebrow{
    font-size: clamp(11px,1.1vw,13px);
    color: var(--paper-dim);
    margin-bottom: clamp(16px,2.4vw,28px);
    font-weight:500;
  }

  .kicker-num{ color: var(--lime); font-weight:600; }

  /* ---- orbit motif, reused across slides ---- */
  .orbit-decor{
    position:absolute; right:clamp(-60px,-2vw,40px); top:50%; transform:translateY(-50%);
    width: clamp(220px,32vw,520px); height: clamp(220px,32vw,520px);
    pointer-events:none; opacity:0.9;
  }
  .orbit-decor svg{ width:100%; height:100%; display:block; }

  /* ---------- SLIDE 1 : cover ---------- */
  #s1{ background: radial-gradient(circle at 78% 45%, var(--ink-2), var(--ink) 62%); }
  #s1 .cover-label{ font-size:clamp(12px,1.2vw,14px); letter-spacing:.02em; color:var(--paper-dim); margin-bottom:20px; }
  #s1 h1{ font-size: clamp(56px,11vw,148px); line-height:0.92; color:var(--paper); }
  #s1 h1 span{ color:var(--lime); }
  #s1 .slogan{ font-size: clamp(18px,2.2vw,28px); color:var(--paper-dim); margin-top:22px; max-width:640px; font-weight:400; }
  #s1 .author{ margin-top:clamp(36px,6vw,64px); font-size:14px; color:var(--paper-dim); display:flex; gap:10px; align-items:center; }
  #s1 .author .dot{ width:8px;height:8px;border-radius:50%;background:var(--coral); }

  /* ---------- generic content blocks ---------- */
  .content-title{ font-size: clamp(34px,5.2vw,68px); color:var(--paper); max-width:820px; line-height:1.04; }
  .content-title .accent{ color:var(--lime); }

  .lede{ font-size: clamp(17px,1.8vw,22px); color:var(--paper-dim); max-width:560px; margin-top:18px; font-weight:400; line-height:1.5; }

  .bullet-list{ list-style:none; margin: clamp(28px,4vw,44px) 0 0; padding:0; display:flex; flex-direction:column; gap: clamp(14px,2vw,20px); max-width:640px; }
  .bullet-list li{ display:flex; gap:16px; align-items:flex-start; font-size:clamp(16px,1.7vw,20px); color:var(--paper); border-top:1px solid var(--line); padding-top: clamp(12px,1.8vw,18px); }
  .bullet-list li:first-child{ border-top:none; padding-top:0; }
  .bullet-list li::before{ content:''; width:7px; height:7px; border-radius:50%; background:var(--coral); margin-top:9px; flex-shrink:0; }

  .insight-quote{ font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:clamp(30px,5vw,58px); line-height:1.15; max-width:820px; }
  .insight-quote .hl{ color:var(--lime); }
  .insight-sub{ margin-top:24px; font-size:clamp(15px,1.6vw,19px); color:var(--paper-dim); max-width:520px; }

  /* ---------- membership / credits table ---------- */
  .plan-row{ display:flex; align-items:baseline; gap:18px; margin: clamp(24px,3.5vw,36px) 0 clamp(28px,4vw,40px); }
  .plan-name{ font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:clamp(20px,2.2vw,26px); color:var(--lime); }
  .plan-credits{ font-size:clamp(15px,1.6vw,18px); color:var(--paper-dim); }
  .credit-grid{ display:grid; grid-template-columns: 1fr auto; gap: 0; max-width:520px; }
  .credit-grid .row{ display:flex; justify-content:space-between; padding: clamp(10px,1.4vw,14px) 0; border-top:1px solid var(--line); font-size:clamp(15px,1.6vw,19px); }
  .credit-grid .row:first-child{ border-top:none; }
  .credit-grid .cost{ color:var(--coral); font-weight:600; font-family:'Space Grotesk',sans-serif; }

  /* ---------- home experience mock cards ---------- */
  .chip-row{ display:flex; gap:10px; flex-wrap:wrap; margin: clamp(20px,3vw,30px) 0 clamp(28px,4vw,38px); max-width:640px; }
  .chip{ border:1px solid var(--line); border-radius:999px; padding:8px 18px; font-size:14px; color:var(--paper-dim); }
  .chip.on{ background:var(--lime); color:var(--ink); border-color:var(--lime); font-weight:600; }

  .mock-cards{ display:flex; gap:16px; flex-wrap:wrap; max-width:640px; }
  .mock-card{ background:var(--ink-2); border:1px solid var(--line); border-radius:16px; padding:18px 20px; min-width:190px; flex:1; }
  .mock-card .act{ font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:19px; color:var(--paper); }
  .mock-card .meta{ margin-top:10px; font-size:13px; color:var(--paper-dim); line-height:1.6; }
  .mock-card .credits{ color:var(--coral); font-weight:600; }

  /* ---------- spontaneous mode ---------- */
  .free-time-tag{ display:inline-flex; align-items:center; gap:10px; border:1px solid var(--lime); border-radius:999px; padding:9px 20px; font-size:14px; color:var(--lime); margin-bottom:26px; font-weight:600; }
  .free-time-tag .pulse{ width:8px;height:8px;border-radius:50%;background:var(--lime); animation:pulse 1.6s infinite; }
  @keyframes pulse{ 0%,100%{opacity:1;} 50%{opacity:.35;} }
  .spont-list{ display:flex; flex-direction:column; gap:14px; max-width:520px; }
  .spont-item{ display:flex; justify-content:space-between; align-items:baseline; border-top:1px solid var(--line); padding-top:14px; }
  .spont-item:first-child{ border-top:none; padding-top:0; }
  .spont-item .name{ font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:19px; }
  .spont-item .when{ font-size:13px; color:var(--paper-dim); text-align:right; }

  /* ---------- flow ---------- */
  .flow-row{ display:flex; align-items:center; gap:0; margin-top:clamp(30px,5vw,54px); flex-wrap:wrap; max-width:900px; }
  .flow-step{ background:var(--ink-2); border:1px solid var(--line); border-radius:14px; padding:16px 20px; font-size:clamp(13px,1.4vw,16px); font-weight:600; color:var(--paper); font-family:'Space Grotesk',sans-serif; }
  .flow-arrow{ color:var(--coral); font-size:20px; padding:0 12px; }

  /* ---------- screens grid ---------- */
  .screen-grid{ display:grid; grid-template-columns: repeat(auto-fit,minmax(120px,1fr)); gap:14px; max-width:820px; margin-top: clamp(24px,3.5vw,36px); }
  .screen-tile{ aspect-ratio: 9/16; max-height:180px; background:var(--ink-2); border:1px solid var(--line); border-radius:14px; display:flex; align-items:flex-end; padding:10px; font-size:12px; color:var(--paper-dim); position:relative; overflow:hidden; }
  .screen-tile .num{ position:absolute; top:10px; left:10px; font-family:'Space Grotesk',sans-serif; font-size:11px; color:var(--lime); font-weight:600; }

  /* ---------- naming grid ---------- */
  .name-grid{ display:flex; flex-direction:column; gap:0; max-width:720px; margin-top: clamp(20px,3vw,28px); }
  .name-row{ display:flex; justify-content:space-between; align-items:baseline; gap:20px; padding: clamp(12px,1.8vw,16px) 0; border-top:1px solid var(--line); }
  .name-row:first-child{ border-top:none; }
  .name-row .nm{ font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:clamp(19px,2vw,24px); flex-shrink:0; min-width:120px; }
  .name-row.chosen .nm{ color:var(--lime); }
  .name-row .sl{ font-size:clamp(13px,1.4vw,16px); color:var(--paper-dim); text-align:right; }
  .chosen-tag{ font-size:11px; color:var(--ink); background:var(--lime); border-radius:999px; padding:3px 10px; margin-left:8px; font-weight:600; vertical-align:middle; }

  /* ---------- palette / visual direction ---------- */
  .swatch-row{ display:flex; gap:14px; margin: clamp(24px,3.5vw,34px) 0; flex-wrap:wrap; }
  .swatch{ width:88px; }
  .swatch .box{ width:88px; height:88px; border-radius:12px; border:1px solid var(--line); }
  .swatch .code{ margin-top:8px; font-size:11px; color:var(--paper-dim); font-family:'Space Grotesk',sans-serif; }
  .style-tags{ display:flex; gap:10px; flex-wrap:wrap; max-width:640px; }
  .style-tag{ border:1px solid var(--line); border-radius:999px; padding:7px 16px; font-size:13px; color:var(--paper-dim); }

  /* ---------- closing ---------- */
  #s12{ background: radial-gradient(circle at 22% 60%, var(--ink-2), var(--ink) 60%); }
  #s12 .closing-quote{ font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:clamp(32px,6vw,72px); line-height:1.08; max-width:900px; }
  #s12 .closing-quote .hl{ color:var(--lime); }
  #s12 .value-props{ display:flex; gap: clamp(24px,4vw,48px); margin-top:clamp(32px,5vw,52px); flex-wrap:wrap; }
  #s12 .vp{ font-size:14px; color:var(--paper-dim); border-left:2px solid var(--coral); padding-left:12px; max-width:180px; }

  /* ---------- chrome / nav ---------- */
  .chrome{ position:absolute; bottom: clamp(18px,3vw,30px); left:0; right:0; display:flex; align-items:center; justify-content:center; gap:18px; z-index:20; }
  .counter{ font-size:12px; color:var(--paper-dim); font-family:'Space Grotesk',sans-serif; min-width:52px; text-align:center; }
  .dots{ display:flex; gap:7px; }
  .dot-mark{ width:6px; height:6px; border-radius:50%; background:var(--line); cursor:pointer; transition:background .2s, transform .2s; }
  .dot-mark.on{ background:var(--lime); transform:scale(1.3); }
  .nav{
    background:transparent; border:1px solid var(--line); color:var(--paper);
    width:38px; height:38px; border-radius:50%; font-size:18px; cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    transition: border-color .2s, color .2s;
  }
  .nav:hover{ border-color:var(--lime); color:var(--lime); }
  .nav:focus-visible, .dot-mark:focus-visible{ outline:2px solid var(--lime); outline-offset:2px; }

  @media (max-width:640px){
    .orbit-decor{ display:none; }
    .flow-row{ flex-direction:column; align-items:flex-start; }
    .flow-arrow{ transform:rotate(90deg); padding:6px 0; }
  }

  :root {
      --bg-color: #14171A;
      --card-bg: #1D2124;
      --text-main: #EFEDE6;
      --text-muted: #C9C6BC;
      --accent-lime: #C6FF5C;
      --accent-coral: #FF5A4E;
      --border-color: rgba(239, 237, 230, 0.14);
      --font-heading: 'Space Grotesk', system-ui, sans-serif;
      --font-body: 'Inter', system-ui, sans-serif;
    }

    body {
      background-color: var(--bg-color);
      color: var(--text-main);
      font-family: var(--font-body);
      line-height: 1.6;
      margin: 0;
      padding: 2rem 1rem;
    }

    .userflow-container {
      max-width: 900px;
      margin: 0 auto;
    }

    .userflow-header {
      margin-bottom: 2.5rem;
      border-bottom: 1px solid var(--border-color);
      padding-bottom: 1rem;
    }

    .userflow-header h1 {
      font-family: var(--font-heading);
      font-size: 2.2rem;
      margin: 0 0 0.5rem 0;
      color: var(--text-main);
    }

    .userflow-header h1 span {
      color: var(--accent-lime);
    }

    .userflow-header p {
      color: var(--text-muted);
      margin: 0;
      font-size: 1.1rem;
    }

    .flow-section {
      background: var(--card-bg);
      border: 1px solid var(--border-color);
      border-radius: 16px;
      padding: 1.5rem 2rem;
      margin-bottom: 2rem;
    }

    .flow-title {
      font-family: var(--font-heading);
      font-size: 1.4rem;
      color: var(--accent-lime);
      margin-top: 0;
      margin-bottom: 1.5rem;
      display: flex;
      align-items: center;
      gap: 0.5rem;
    }

    .flow-steps {
      list-style: none;
      padding: 0;
      margin: 0;
      display: flex;
      flex-direction: column;
      gap: 1rem;
      position: relative;
    }

    .step-item {
      display: grid;
      grid-template-columns: 40px 1fr;
      gap: 1rem;
      align-items: start;
    }

    .step-number {
      background: var(--border-color);
      color: var(--accent-lime);
      font-family: var(--font-heading);
      font-weight: bold;
      width: 36px;
      height: 36px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 0.95rem;
    }

    .step-content h3 {
      font-family: var(--font-heading);
      margin: 0 0 0.25rem 0;
      font-size: 1.1rem;
      color: var(--text-main);
    }

    .step-content p {
      margin: 0;
      color: var(--text-muted);
      font-size: 0.95rem;
    }

    .badge-tag {
      display: inline-block;
      background: rgba(198, 255, 92, 0.15);
      color: var(--accent-lime);
      border: 1px solid var(--accent-lime);
      padding: 0.2rem 0.6rem;
      border-radius: 999px;
      font-size: 0.75rem;
      font-weight: 600;
      margin-left: 0.5rem;
      vertical-align: middle;
    }

    /* Estructura de Glosario / Modulos de Navegación */
    .screens-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
      gap: 1rem;
      margin-top: 1rem;
    }

    .screen-card {
      background: rgba(255, 255, 255, 0.03);
      border: 1px solid var(--border-color);
      border-radius: 12px;
      padding: 1rem;
    }

    .screen-card dt {
      font-family: var(--font-heading);
      font-weight: 600;
      color: var(--text-main);
      margin-bottom: 0.5rem;
    }

    .screen-card dd {
      margin: 0;
      font-size: 0.875rem;
      color: var(--text-muted);
    }

    @media (min-width: 640px) {
      .flow-steps.horizontal {
        flex-direction: row;
        justify-content: space-between;
      }
      
      .flow-steps.horizontal .step-item {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto;
        text-align: center;
        flex: 1;
      }

      .flow-steps.horizontal .step-number {
        margin: 0 auto;
      }
    }