/* ── TOKENS LIGHT ───────────────────────────────────────────── */

    *,*::before,*::after{box-sizing:border-box;margin: 0;padding: 0}
    html{scroll-behavior:smooth}
    body{font-family:'Inter',system-ui,sans-serif;background:var(--bg-page);color:var(--text-primary);line-height:1.6;overflow-x:hidden;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}

    /* Paleta Linear canónica del landing (decisión founder 2026-06-01 · #F7F8F8 canónico,
       documentada en DESIGN.md · cooler/brighter que el global "warm graphite"). */
    body.landing-body{
      --bg-page: #08090A;
      --bg-surface: #0E0F12;
      --bg-elevated: #1A1B1E;
      --text-primary: #F7F8F8;
      --text-secondary: #8A8F98;
    }

    /* ── A11Y · Skip link (Linear-grade visually-hidden + focus reveal) ── */
    .skip-nav{
      position:absolute;
      top:0;
      left:0;
      width:1px;
      height:1px;
      padding: 0;
      margin: -1px;
      overflow:hidden;
      clip:rect(0 0 0 0);
      clip-path:inset(50%);
      white-space:nowrap;
      border:0;
      color:var(--accent);
      background:transparent;
      font-family:'Inter',system-ui,sans-serif;
      font-weight:600;
      font-size:0.875rem;
      text-decoration:none;
    }
    .skip-nav:focus,
    .skip-nav:focus-visible{
      position:fixed;
      top:16px;
      left:16px;
      width:auto;
      height:auto;
      padding: 10px 16px;
      margin: 0;
      overflow:visible;
      clip:auto;
      clip-path:none;
      white-space:normal;
      background:var(--accent);
      color:var(--text-on-accent);
      border-radius:8px;
      box-shadow:var(--shadow-lg, 0 12px 32px color-mix(in srgb, var(--accent) 35%, transparent));
      outline:2px solid var(--accent);
      outline-offset:2px;
      z-index:9999;
    }

    /* ── NAV ──────────────────────────────────────────────────── */
    #main-nav{position:sticky;top:0;z-index: var(--z-shell);padding: 0 5vw;height:72px;display:flex;align-items:center;justify-content:space-between;background:var(--glass-bg);backdrop-filter:var(--glass-blur);border-bottom:1px solid var(--glass-border);transition:box-shadow .3s}
    nav.scrolled{box-shadow:var(--shadow-md)}
    .logo{display:flex;align-items:center;gap: 10px;font-weight:700;font-size:1.25rem;color:var(--text-primary);text-decoration:none}
    .logo svg{flex-shrink:0}
    .nav-links{display:flex;align-items:center;gap: 2rem;list-style:none}
    .nav-links a{position:relative;text-decoration:none;color:var(--text-secondary);font-size:0.875rem;font-weight:600;letter-spacing:-0.01em;transition:color .2s}
    .nav-links a::after{content:'';position:absolute;width:0;height:2px;bottom:-4px;left:0;background-color:var(--accent);transition:width .3s var(--ease-out)}
    .nav-links a:hover{color:var(--accent)}
    .nav-links a:hover::after{width:100%}
    .nav-actions{display:flex;align-items:center;gap: 20px}
    .landing-login-link{
      font-size:0.875rem;
      font-weight:600;
      color:var(--text-secondary);
      text-decoration:none;
      transition:color .2s;
    }
    .landing-login-link:hover{color:var(--text-primary)}
    .landing-pill-button{
      background:var(--accent);
      color:var(--text-on-accent);
      border-radius:50px;
      font-weight:700;
      text-decoration:none;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap: 6px;
      transition:background .2s, transform .2s;
    }
    .landing-pill-button:hover{
      background:var(--accent-hover);
    }
    .landing-pill-button-sm{
      padding: 8px 24px;
      font-size:0.875rem;
    }
    .landing-pill-button-lg{
      padding: 12px 28px;
      font-size:1rem;
    }
    .landing-pill-button-lg:hover{
      transform:translateY(-1px);
    }
    .landing-secondary-link{
      color:var(--text-secondary);
      text-decoration:none;
      font-weight:600;
      display:inline-flex;
      align-items:center;
      gap: 8px;
      transition:color .2s;
    }
    .landing-secondary-link:hover{color:var(--text-primary)}
    /* Nav y Custom Hero Buttons */
    .btn-lg { border-radius: 100px; padding: 12px 32px; font-size: 1rem; }
    .btn-nav { border-radius: 100px; padding: 10px 24px; font-size: 0.875rem; }

    /* ── HERO ─────────────────────────────────────────────────── */
    /* Step 10 · 2026-05-17 · Linear vertical pattern · text top + mockup bottom full-width
       ANTES: 2 cols grid 1.2fr/1fr (text left, mockup right)
       AHORA: stack vertical centrado · pattern Linear/Stripe/Anthropic launches
       hero-content max 720px centrado · mockup-wrap full-width abajo */
    .hero{padding: 120px 5vw 120px;display:flex;flex-direction:column;align-items:center;text-align:center;min-height:auto}
    .hero-tag{display:inline-flex;align-items:center;gap: 6px;padding: 4px 12px;background:transparent;color:var(--text-secondary);font-size:.75rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;border-radius:50px;margin-bottom: 1.5rem;border:1px solid var(--border); font-family: 'Inter', sans-serif;}
    .hero-tag::before{content:'';width:6px;height:6px;background:var(--accent);border-radius:50%;animation:blink 2s infinite}
    /* Linear-grade hero typography · Inter Tight 800 + optical tracking */
    h1{font-family:'Inter Tight','Inter',system-ui,-apple-system,sans-serif;font-size:clamp(3rem,5vw,4.5rem);font-weight:800;line-height:1.04;letter-spacing:-0.042em;font-feature-settings:"ss01","ss02","cv11";margin-bottom: 24px}
    h1 em{font-style:normal;color:var(--accent);font-weight:800}
    .hero-sub{font-size:1.25rem;color:var(--text-secondary);max-width:540px;margin-bottom: 40px;line-height:1.6;letter-spacing:-0.01em}
    .hero-actions-main{margin-bottom: 1.5rem}
    /* Removed private button classes, using components.css instead */
    .hero-metrics{display:flex;gap: 3rem;padding-top: 24px;border-top:1px solid var(--border);margin-top: 40px}
    .metric strong{display:block;font-family:'Inter Tight','Inter',system-ui,sans-serif;font-size:2.25rem;font-weight:800;color:var(--text-primary);line-height:1;letter-spacing:-0.035em;margin-bottom: 6px}
    .metric strong span{color:var(--accent)}
    .metric small{font-size:0.875rem;color:var(--text-secondary);line-height:1.4;display:block}
    .metric-footnote{font-size:0.75rem;color:var(--text-tertiary);margin-top: 0.75rem;text-align:center;}
    .hero-social-proof{
      display:inline-flex;
      align-items:center;
      gap: 12px;
      margin-top: 1.25rem;
      padding: 12px 16px;
      border-radius:20px;
      border:1px solid var(--success);
      background:var(--success-subtle);
      box-shadow:var(--shadow-sm);
      max-width:100%;
    }
    .hero-social-proof-dot{
      width:10px;
      height:10px;
      border-radius:50%;
      background:var(--success);
      animation:spb-pulse 2s infinite;
      flex-shrink:0;
    }
    .hero-social-proof-copy{
      display:flex;
      flex-direction:column;
      gap: 4px;
      min-width:0;
    }
    .hero-social-proof-kicker{
      font-size:0.75rem;
      font-weight:700;
      letter-spacing:0.08em;
      text-transform:uppercase;
      color:var(--success);
    }
    .hero-social-proof-text{
      font-size:1rem;
      font-weight:600;
      color:var(--text-primary);
      line-height:1.45;
      text-wrap:balance;
    }
    .hero-social-proof-text strong{
      font-size:1.125rem;
      font-weight:800;
      letter-spacing:-0.02em;
      margin-right: 4px;
    }

    @keyframes spb-pulse{
      0%,100%{transform:scale(1);opacity:1}
      50%{transform:scale(1.25);opacity:.7}
    }

    /* ── PRODUCT MOCKUP ────────────────────────────────────────── */
    .mockup-wrap{position:relative}
    .mockup{background:var(--bg-card);border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow-lg), inset 0 1px 0 var(--glass-border);overflow:hidden;transform:translateZ(0)}
    .mockup-bar{display:flex;align-items:center;justify-content:space-between;padding: 12px 24px;border-bottom:1px solid var(--border);background:var(--bg-elevated)}
    .rec-badge{display:inline-flex;align-items:center;gap: 6px;padding: 4px 12px;background:var(--danger-subtle);border:1px solid var(--danger-subtle);border-radius:100px;font-size:0.75rem;font-weight:700;letter-spacing:0.04em;color:var(--danger)}
    .rec-dot{width:7px;height:7px;background:var(--danger);border-radius:50%;animation:blink 1.4s ease-in-out infinite}
    .mockup-patient{font-size:0.75rem;color:var(--text-muted);font-weight:600;letter-spacing:0.02em}
    .mockup-body{padding: 24px}
    .note-text{font-size:1rem;color:var(--text-secondary);line-height:1.8;border-left:3px solid var(--border);padding-left: 12px;margin-bottom: 24px;font-style:italic;letter-spacing:-0.01em}
    .ai-card{background:var(--success-subtle);border:1px solid var(--success-subtle);border-radius:1rem;padding: 1.2rem}
    .ai-card-header{display:flex;align-items:center;gap: 8px;margin-bottom: 10px}
    .ai-dot{width:10px;height:10px;background:var(--success);border-radius:50%;flex-shrink:0;box-shadow:0 0 8px var(--success-subtle)}
    .ai-code{font-family:'Inter',sans-serif;font-weight:700;font-size:0.875rem;color:var(--success);letter-spacing:-0.01em}
    .ai-label{font-size:0.75rem;font-weight:700;letter-spacing:0.02em;color:var(--success);padding: 4px 10px;background:var(--success-subtle);border-radius:100px}
    .ai-source{font-size:0.875rem;color:var(--success-subtle);margin-bottom: 12px;padding-left: 16px;line-height:1.5}
    .ai-btns{display:flex;gap: 8px;padding-left: 16px}
    .btn-ai-y{padding: 6px 16px;background:var(--success);color:var(--bg-surface);border:none;border-radius:8px;font-size:0.875rem;font-weight:600;cursor:pointer;box-shadow:var(--shadow-sm)}
    .btn-ai-n{padding: 6px 12px;background:transparent;border:1px solid var(--success-subtle);color:var(--success);border-radius:8px;font-size:0.875rem;font-weight:600;cursor:pointer}
    .extract-row{display:flex;align-items:center;gap: 8px;margin-top: 24px;font-size:0.875rem;font-weight:600;color:var(--accent)}
    .float-pill{position:absolute;top:-24px;right:-32px;background:var(--glass-bg);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid var(--glass-border);border-radius:16px;padding: 12px 20px;box-shadow:var(--shadow-lg), inset 0 1px 0 var(--glass-border);display:flex;align-items:center;gap: 10px;font-size:0.875rem;font-weight:600;color:var(--text-primary);white-space:nowrap;animation:floatA 5s ease-in-out infinite;z-index: var(--z-sticky);}
    .float-pill2{position:absolute;bottom:-24px;left:-32px;background:var(--glass-bg);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid var(--glass-border);border-radius:16px;padding: 12px 20px;box-shadow:var(--shadow-lg), inset 0 1px 0 var(--glass-border);display:flex;align-items:center;gap: 10px;font-size:0.875rem;font-weight:600;color:var(--text-primary);white-space:nowrap;animation:floatB 6s ease-in-out infinite;z-index: var(--z-sticky);}

    /* ── TRUST STRIP ─────────────────────────────────────────── */
    .trust-strip{padding: 2.5rem 5vw;background:var(--bg-card);border-top:1px solid var(--border);border-bottom:1px solid var(--border);display:flex;justify-content:center;align-items:center;gap: 3rem;flex-wrap:wrap}
    .trust-item{display:flex;align-items:center;gap: 10px;font-size:0.875rem;font-weight:600;color:var(--text-secondary);letter-spacing:-0.01em;}
    .trust-icon{width:36px;height:36px;background:var(--accent-subtle);border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:0.875rem;flex-shrink:0;color:var(--accent);}

    /* ── SECTIONS SHARED ─────────────────────────────────────── */
    section{padding: 120px 5vw}
    .sec-tag{display:inline-block;font-family:'Inter',system-ui,sans-serif;font-size:0.75rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);margin-bottom: 16px}
    .sec-h2{font-family:'Inter Tight','Inter',system-ui,-apple-system,sans-serif;font-size:clamp(2.25rem,4vw,3rem);font-weight:800;line-height:1.08;letter-spacing:-0.035em;margin-bottom: 24px}
    .sec-sub{font-size:1.125rem;color:var(--text-secondary);max-width:580px;line-height:1.65;letter-spacing:-0.008em}

    /* ── CLINICAL BURDEN (PROBLEM) ────────────────────────────── */
    #problem{background:var(--bg-page); padding-bottom: 40px;}
    #problem .sec-sub{margin: 0 auto}
    .prob-grid{display:grid;grid-template-columns:repeat(3,1fr);gap: 32px;margin-top: 64px}
    .prob-card{padding: 40px;background:var(--bg-card);border:1px solid var(--border);border-radius:16px;text-align:left;display:flex;flex-direction:column;transition:transform .3s var(--ease-out), box-shadow .3s}
    .prob-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:var(--border-strong)}
    .prob-num{font-family:'Inter Tight','Inter',system-ui,sans-serif;font-size:4.5rem;font-weight:800;color:var(--accent);letter-spacing:-0.042em;line-height:1;margin-bottom: 24px;font-feature-settings:"ss01","ss02","cv11"}
    .prob-label{font-family:'Inter',sans-serif;font-size:1.125rem;font-weight:700;color:var(--text-primary);margin-bottom: 0.75rem;letter-spacing:-0.01em;}
    .prob-desc{font-size:1rem;color:var(--text-secondary);line-height:1.618;}

    /* ── PLATFORM FEATURES ───────────────────────────────────── */
    #features{background:var(--bg-card)}
    .feat-head{margin-bottom: 64px}
    .feat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap: 28px}
    .feat-card{background:transparent;border:1px solid var(--border);border-radius:16px;padding: 36px;transition:transform .3s var(--ease-out),box-shadow .3s, border-color .3s;}
    .feat-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:var(--accent-subtle)}
    .feat-ico{width:56px;height:56px;background:var(--bg-card);border:1px solid var(--border);border-radius:1rem;display:flex;align-items:center;justify-content:center;color:var(--text-primary);margin-bottom: 24px;box-shadow:var(--shadow-sm)}
    .feat-ico svg{width:28px;height:28px;stroke-width:1.5}
    .feat-card h3 { font-family:'Inter',sans-serif;font-size:1.25rem; font-weight:700; color:var(--text-primary); margin-bottom: 1rem; letter-spacing:-0.02em; }
    .feat-card p { font-size:1rem; line-height:1.618; color:var(--text-secondary);letter-spacing:-0.01em; }
    /* ── HOW IT WORKS (CLINICAL AMBIENT AI BENCHMARK) ────────────── */
    #workflow{background:var(--bg-card); position:relative; overflow:hidden;}
    
    .steps-row{display:grid;grid-template-columns:repeat(4,1fr);gap: 28px;margin-top: 64px;position:relative;z-index:var(--z-card-base)}
    
    /* Clinical Step Cards - Zero Noise */
    .step {
      text-align:left; position:relative; z-index:var(--z-card-hover);
      padding: 40px; border-radius: 24px;
      transition: background-color var(--transition), color var(--transition), border-color var(--transition), transform var(--transition), opacity var(--transition), box-shadow var(--transition), filter var(--transition);
      background: var(--bg-card);
      border: 1px solid var(--border);
      display: flex; flex-direction: column;
    }
    
    .step:hover {
      transform: translateY(-4px);
      box-shadow: var(--shadow-sm);
      border-color: var(--border-strong);
    }
    
    .step-num{
      width:42px;height:42px; background:var(--bg-elevated); color:var(--text-secondary);
      border:1px solid var(--border); border-radius:12px;
      display:flex;align-items:center;justify-content:center;
      font-family:'Inter',sans-serif; font-weight:700;font-size:1.125rem; margin-bottom: 24px;
      transition: background-color var(--transition), color var(--transition), border-color var(--transition), transform var(--transition), opacity var(--transition), box-shadow var(--transition), filter var(--transition);
    }
    .step:hover .step-num {
      background: var(--accent-subtle);
      color: var(--accent);
      border-color: transparent;
    }
    
    .step h4{font-family:'Inter',sans-serif;font-size:1.125rem;font-weight:700;margin-bottom: 0.75rem; color:var(--text-primary); letter-spacing:-0.02em;}
    .step p{font-size:1rem;color:var(--text-secondary);line-height:1.618;}

    /* ── SPECIALTIES S7 (Nabla model) ───────────────────────────── */
    #specialties{background:var(--bg-page)}
    .spec-tabs-row{display:flex;gap: 8px;margin-top: 3.5rem;flex-wrap:wrap}
    .spec-tab{
      padding: 10px 20px;border-radius:100px;
      border:1px solid var(--border);
      background:var(--bg-card);
      color:var(--text-secondary);
      font-family:'Inter',sans-serif;font-size:0.875rem;font-weight:500;
      cursor:pointer;transition: background-color.2s ease, color.2s ease, border-color.2s ease, transform.2s ease, opacity.2s ease, box-shadow.2s ease, filter.2s ease;
      white-space:nowrap;
    }
    .spec-tab:hover{border-color:var(--border-strong);color:var(--text-primary)}
    .spec-tab.active{
      background:var(--accent);border-color:var(--accent);
      color:var(--text-on-accent);font-weight:600;
      box-shadow:0 4px 16px var(--accent-subtle);
    }
    .spec-panel-wrap{margin-top: 2rem;display:grid;grid-template-columns:1fr 1fr;gap: 40px;align-items:start}
    .spec-note-panel{
      background:var(--bg-card);border:1px solid var(--border);
      border-radius:16px;padding: 2rem 40px;
      font-family:'JetBrains Mono','Fira Code','Courier New',monospace;
      transition: background-color var(--transition), color var(--transition), border-color var(--transition), transform var(--transition), opacity var(--transition), box-shadow var(--transition), filter var(--transition);
      position:relative;overflow:hidden;
    }
    .spec-note-panel::before{
      content:'';position:absolute;top:0;left:0;right:0;height:3px;
      background:linear-gradient(90deg,var(--accent),var(--accent-light));
      border-radius:16px 24px 0 0;
    }
    .spec-note-header{
      display:flex;justify-content:space-between;align-items:center;
      margin-bottom: 1.5rem;padding-bottom: 1rem;
      border-bottom:1px solid var(--border);
    }
    .spec-note-title{
      font-family:'Inter',sans-serif;font-size:0.75rem;
      font-weight:700;letter-spacing:.1em;text-transform:uppercase;
      color:var(--accent);
    }
    .spec-note-badge{
      font-size:0.6875rem;font-weight:600;letter-spacing:.05em;
      text-transform:uppercase;padding: 4px 10px;
      background:var(--accent-subtle);color:var(--accent);
      border-radius:100px;font-family:'Inter',sans-serif;
    }
    .spec-note-field{margin-bottom: 1rem;line-height:1.7}
    .spec-note-label{
      font-size:0.6875rem;font-weight:700;letter-spacing:.1em;
      text-transform:uppercase;color:var(--text-muted);
      font-family:'Inter',sans-serif;display:block;margin-bottom: 4px;
    }
    .spec-note-value{
      font-size:0.875rem;color:var(--text-primary);line-height:1.65;
    }
    .spec-note-field.highlight .spec-note-value{
      color:var(--accent-light);
    }
    .spec-note-field.plan .spec-note-value{
      color:var(--accent);
    }
    /* reveal panels via JS */
    .spec-note-pane{display:none}
    .spec-note-pane.active{display:block}
    /* Specialty insight side */
    .spec-insight{display:flex;flex-direction:column;gap: 1.25rem}
    .spec-insight-item{
      background:var(--bg-card);border:1px solid var(--border);
      border-radius:1.25rem;padding: 1.5rem 2rem;
      display:flex;align-items:flex-start;gap: 1.25rem;
      transition: background-color.25s ease, color.25s ease, border-color.25s ease, transform.25s ease, opacity.25s ease, box-shadow.25s ease, filter.25s ease;
    }
    .spec-insight-item:hover{border-color:var(--border-strong);transform:translateX(4px)}
    .spec-insight-ico{
      width:40px;height:40px;border-radius:10px;
      background:var(--accent-subtle);color:var(--accent);
      display:flex;align-items:center;justify-content:center;flex-shrink:0;
    }
    .spec-insight-ico svg{width:20px;height:20px;stroke-width:2}
    .spec-insight-text strong{
      display:block;font-family:'Inter',sans-serif;font-size:0.875rem;
      font-weight:700;color:var(--text-primary);margin-bottom: 4px;
    }
    .spec-insight-text span{
      font-size:0.875rem;color:var(--text-secondary);line-height:1.5;
    }
    /* Secondary grid */
    .spec-secondary-title{
      font-family:'Inter',sans-serif;font-size:1.125rem;font-weight:700;
      color:var(--text-primary);margin: 3.5rem 0 1.5rem;
      letter-spacing:-0.01em;
    }
    .spec-grid-secondary{display:grid;grid-template-columns:repeat(3,1fr);gap: 1rem}
    .spec-chip{
      background:var(--bg-card);border:1px solid var(--border);
      border-radius:1rem;padding: 1rem 1.25rem;
      display:flex;align-items:center;gap: 0.875rem;
      transition: background-color.2s ease, color.2s ease, border-color.2s ease, transform.2s ease, opacity.2s ease, box-shadow.2s ease, filter.2s ease;
    }
    .spec-chip:hover{border-color:var(--accent);background:var(--accent-subtle)}
    .spec-chip-ico{
      width:32px;height:32px;border-radius:8px;background:var(--bg-elevated);
      display:flex;align-items:center;justify-content:center;flex-shrink:0;
    }
    .spec-chip-ico svg{width:16px;height:16px;stroke-width:2;color:var(--text-secondary)}
    .spec-chip:hover .spec-chip-ico svg{color:var(--accent)}
    .spec-chip-label{
      font-size:0.875rem;color:var(--text-secondary);font-weight:500;
      transition:color .2s;
    }
    .spec-chip:hover .spec-chip-label{color:var(--text-primary)}
    .spec-footer-note{
      margin-top: 2rem;text-align:center;
      font-size:0.875rem;color:var(--text-tertiary);
    }
    .spec-footer-note a{
      color:var(--accent);text-decoration:none;font-weight:500;
    }
    .spec-footer-note a:hover{text-decoration:underline}

    /* ── TESTIMONIALS ────────────────────────────────────────── */
    #testimonials{background:var(--bg-page)}
    .testi-grid{display:grid;grid-template-columns:repeat(2,1fr);gap: 32px;margin-top: 64px;max-width:1000px;margin-inline:auto}
    .testi-card{background:var(--bg-card);border:1px solid var(--border);border-radius:16px;padding: 40px;display:flex;flex-direction:column;justify-content:space-between;transition:transform .3s var(--ease-out),box-shadow .3s}
    .testi-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-sm);border-color:var(--border-strong)}
    .testi-quote{font-size:1.125rem;color:var(--text-primary);line-height:1.618;font-style:normal;margin-bottom: 2rem;letter-spacing:-0.01em}
    .testi-author{display:flex;align-items:center;gap: 24px}
    .testi-av{width:48px;height:48px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:'Inter',sans-serif;font-size:0.875rem;font-weight:700;flex-shrink:0}
    .testi-av.a1{background:var(--accent-subtle);color:var(--accent)}
    .testi-av.a2{background:var(--success-subtle);color:var(--success)}
    .testi-av.a3{background:var(--gold-subtle);color:var(--warning)}
    .testi-name{font-family:'Inter',sans-serif;font-size:1rem;font-weight:700;margin-bottom: 4px;letter-spacing:-0.01em;}
    .testi-role{font-size:0.875rem;color:var(--text-muted)}

    /* ── TRUST SIGNALS PRE-CTA ───────────────────────────────── */
    .trust-signals-section{
      background:var(--bg-card);
      border-top:1px solid var(--border);
      border-bottom:1px solid var(--border);
      padding: 5rem 5vw;
    }
    .trust-signals-wrap{max-width:1000px;margin: 0 auto}
    .trust-signals-head{text-align:center;margin-bottom: 3rem}
    .trust-signals-grid{display:grid;grid-template-columns:repeat(3,1fr);gap: 28px}
    .trust-signal-card{
      background:var(--bg-elevated);
      border:1px solid var(--border);
      border-radius:1.25rem;
      padding: 2.5rem;
      display:flex;
      flex-direction:column;
      gap: 1.25rem;
      transition:transform .3s var(--ease-out),box-shadow .3s,border-color .3s;
    }
    .trust-signal-card:hover{
      transform:translateY(-4px);
      box-shadow:var(--shadow-md);
      border-color:var(--border-strong);
    }
    .trust-signal-icon{
      width:52px;
      height:52px;
      border-radius:1rem;
      display:flex;
      align-items:center;
      justify-content:center;
      flex-shrink:0;
    }
    .trust-signal-icon svg{
      width:26px;
      height:26px;
      fill:none;
      stroke:currentColor;
      stroke-width:2;
      stroke-linecap:round;
      stroke-linejoin:round;
    }
    .trust-signal-icon.is-data{background:var(--accent-subtle);color:var(--accent)}
    .trust-signal-icon.is-setup{background:var(--clinical-subtle);color:var(--clinical)}
    .trust-signal-icon.is-exit{background:var(--success-subtle);color:var(--success)}
    .trust-signal-title{
      font-size:1.125rem;
      font-weight:700;
      color:var(--text-primary);
      margin-bottom: .5rem;
      letter-spacing:-.02em;
    }
    .trust-signal-copy{font-size:1rem;color:var(--text-secondary);line-height:1.65}

    /* ── CTA ─────────────────────────────────────────────────── */
    #cta{background:hsl(258,85%,12%);color:var(--text-on-accent);text-align:center;position:relative;overflow:hidden;padding: 7rem 5vw;}
    #cta::before{content:'';position:absolute;top:-40%;left:-20%;width:600px;height:600px;background:radial-gradient(ellipse,var(--glass-bg) 0%,transparent 65%);pointer-events:none}
    .cta-inner{position:relative;z-index: var(--z-card-base);max-width:640px;margin: 0 auto}
    #cta h2{font-family:'Inter Tight','Inter',system-ui,-apple-system,sans-serif;font-size:clamp(2.25rem,4vw,3rem);font-weight:800;line-height:1.08;margin-bottom: 1rem;letter-spacing:-0.035em}
    #cta p{font-size:1.125rem;opacity:.9;margin-bottom: 40px;line-height:1.7}
    .cta-form{background:var(--bg-card);border-radius:16px;padding: 3rem 40px;max-width:480px;margin: 0 auto;text-align:left;box-shadow:var(--shadow-lg), inset 0 1px 0 var(--glass-border)}
    .cta-form label{display:block;font-size:0.875rem;font-weight:700;color:var(--text-primary);margin-bottom: 8px;margin-top: 24px;letter-spacing:0.02em}
    .cta-form label:first-of-type{margin-top: 0}
    .cta-form input,.cta-form select{width:100%;padding: 12px 16px;border:1px solid var(--border-strong);border-radius:12px;font-family:inherit;font-size:1rem;color:var(--text-primary);outline:none;transition:border-color .2s,box-shadow .2s;background:var(--bg-elevated);box-shadow:var(--shadow-sm)}
    .cta-form input:focus,.cta-form select:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-subtle), var(--shadow-sm)}

    .referral-page{
      min-height:calc(100vh - 72px);
      padding: 4rem 5vw 6rem;
      background:linear-gradient(180deg, color-mix(in srgb, var(--accent-subtle) 48%, var(--bg-page)) 0%, var(--bg-page) 35%);
    }
    .referral-hero{
      display:grid;
      grid-template-columns:minmax(0, 1.05fr) minmax(320px, 480px);
      gap: 3rem;
      align-items:start;
      max-width:1200px;
      margin: 0 auto;
    }
    .referral-copy{padding-top: 3rem}
    .referral-pill{
      display:inline-flex;
      flex-direction:column;
      gap: 6px;
      padding: 16px 20px;
      border-radius:1rem;
      background:var(--bg-card);
      border:1px solid var(--border);
      box-shadow:var(--shadow-sm);
      margin-bottom: 1.5rem;
    }
    .referral-pill strong{
      font-size:1.125rem;
      color:var(--text-primary);
      letter-spacing:-0.02em;
    }
    .referral-pill span{
      font-size:0.875rem;
      color:var(--text-secondary);
    }
    .referral-benefits{
      justify-content:flex-start;
      gap: 0;
      padding: 1.25rem 0 0;
      background:transparent;
      border:0;
      flex-wrap:wrap;
    }
    .referral-form-shell{
      max-width:none;
      margin: 0;
      position:sticky;
      top:96px;
    }
    .referral-form-head{
      margin-bottom: 1rem;
    }
    .referral-checkbox-row{
      margin-top: 1rem;
    }
    .referral-checkbox-label{
      display:flex;
      align-items:flex-start;
      gap: 10px;
      font-size:0.875rem;
      color:var(--text-secondary);
      font-weight:500;
      margin-top: 0;
    }
    .referral-checkbox-label input{
      width:auto;
      margin-top: 4px;
      box-shadow:none;
    }
    .cta-submit{width:100%;margin-top: 28px;padding: 16px;background:var(--accent);color:var(--text-on-accent);border:none;border-radius:100px;font-family:'Inter',sans-serif;font-size:1rem;font-weight:700;cursor:pointer;transition: background-color var(--transition), color var(--transition), border-color var(--transition), transform var(--transition), opacity var(--transition), box-shadow var(--transition), filter var(--transition);box-shadow:var(--shadow-md)}
    .cta-submit:hover{background:var(--accent-hover);transform:translateY(-2px);box-shadow:var(--shadow-lg)}
    .cta-note{font-size:0.75rem;color:var(--text-muted);text-align:center;margin-top: 12px;letter-spacing:0.02em}

    /* ── FOOTER ──────────────────────────────────────────────── */
    footer{padding: 120px 5vw 40px;background:var(--bg-card);border-top:1px solid var(--border)}
    .foot-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap: 64px;margin-bottom: 64px}
    .foot-brand p{font-size:0.875rem;color:var(--text-secondary);margin-top: .75rem;line-height:1.618;max-width:300px}
    .foot-col h4{font-family:'Inter',sans-serif;font-size:0.875rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--text-primary);margin-bottom: 24px}
    .foot-col a{display:block;font-size:0.875rem;color:var(--text-secondary);text-decoration:none;margin-bottom: .5rem;transition:color .2s}
    .foot-col a:hover{color:var(--accent)}
    .foot-bottom{display:flex;justify-content:space-between;align-items:center;padding-top: 2rem;border-top:1px solid var(--border);font-size:0.875rem;color:var(--text-muted);flex-wrap:wrap;gap: 1rem}

    /* ── ANIMATIONS ──────────────────────────────────────────── */
    @keyframes blink{0%,100%{opacity:1}50%{opacity:.25}}
    @keyframes floatA{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
    @keyframes floatB{0%,100%{transform:translateY(0)}50%{transform:translateY(8px)}}
    /* ── PREMIUM ANIMATIONS (Linear-Style) ─────────────────── */
    .hero-element {
      opacity: 0;
      transform: translateY(16px);
      animation: premiumFadeUp 0.8s var(--ease-out) forwards;
    }
    .hero-delay-1 { animation-delay: 0.1s; }
    .hero-delay-2 { animation-delay: 0.2s; }
    .hero-delay-3 { animation-delay: 0.3s; }
    
    @keyframes premiumFadeUp {
      0% { opacity: 0; transform: translateY(16px); filter: blur(4px); }
      100% { opacity: 1; transform: translateY(0); filter: blur(0); }
    }
    
    /* ════════════════════════════════════════════════════════════════
       Scroll-Triggered Reveals · Step 7 · 2026-05-17
       BUG FIX: era 'background-color0.9s' (sin espacio) → CSS inválido,
       browsers skippeaban → reveals NUNCA animaban. Fixed con explicit list.
       Easing · var(--ease-out) decelerate (§7-compliant; ex outExpo spring)
       Optimizado: solo properties que realmente cambian (transform/opacity/filter)
       Will-change para GPU hint · cleanup post-reveal para free resources
       ════════════════════════════════════════════════════════════════ */
    .reveal {
      opacity: 0;
      transform: translateY(24px) scale(0.98);
      filter: blur(4px);
      will-change: opacity, transform, filter;
      transition:
        opacity 0.7s var(--ease-out),
        transform 0.7s var(--ease-out),
        filter 0.7s var(--ease-out);
    }
    .reveal.visible {
      opacity: 1;
      transform: translateY(0) scale(1);
      filter: blur(0);
      will-change: auto; /* free GPU after animation */
    }
    /* Stagger delays · Linear pattern · increments de 80ms (no 100ms genérico) */
    .reveal-d1 { transition-delay: 80ms; }
    .reveal-d2 { transition-delay: 160ms; }
    .reveal-d3 { transition-delay: 240ms; }
    .reveal-d4 { transition-delay: 320ms; }
    .reveal-d5 { transition-delay: 400ms; }
    .reveal-d6 { transition-delay: 480ms; }

    /* A11y · prefers-reduced-motion · L-10 compliance */
    @media (prefers-reduced-motion: reduce) {
      .reveal {
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
        transition: none !important;
        will-change: auto;
      }
      .reveal-d1, .reveal-d2, .reveal-d3, .reveal-d4, .reveal-d5, .reveal-d6 {
        transition-delay: 0ms !important;
      }
    }

    /* ── RESPONSIVE ──────────────────────────────────────────── */
    .hero > * { z-index: var(--z-card-base); }

    @media(max-width:1024px){
      section{padding: 80px 5vw}
      #cursor-particles { display: none !important; }
      .hero{grid-template-columns:1fr;text-align:center;padding: 120px 5vw 64px;min-height:auto;gap: 40px}
      .hero-sub,.sec-sub{margin: 0 auto 40px}
      .hero-actions{justify-content:center}
      .hero-metrics{justify-content:center}
      .hero-social-proof{margin-inline:auto;text-align:left}
      .nav-links{display:none}
      .prob-grid,.feat-grid,.spec-grid,.testi-grid,.trust-signals-grid{grid-template-columns:1fr}
      .steps-row{grid-template-columns:1fr 1fr;gap: 40px}
      .foot-grid{grid-template-columns:1fr 1fr}
      .float-pill,.float-pill2{display:none}
    }
    @media(max-width:640px){
      section{padding: 64px 5vw}
      .trust-strip{gap: 24px;padding: 40px 5vw}
      .steps-row{grid-template-columns:1fr}
      .foot-grid{grid-template-columns:1fr;gap: 40px}
      #cta h2{font-size:1.75rem}
      .cta-form{padding: 24px}
      .hero-metrics{flex-direction:column;gap: 24px;align-items:center}
      .hero-social-proof{width:100%;justify-content:flex-start}
      .trust-signals-section{padding: 4rem 4vw}
      .trust-signal-card{padding: 2rem}
      .foot-bottom{flex-direction:column;text-align:center}
    }
  
    /* Tableta */
    @media (max-width: 1024px) {
      .hero-grid, .prob-grid, .feat-grid, .steps-row, .int-grid, .roi-grid, .spec-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; }
      .nav-links { display: none; }
      .hero-content h1, .hero-title { font-size: clamp(2.5rem, 6vw, 3.5rem) !important; }
      section { padding: 80px 5vw; }
    }
/* Móvil */
@media (max-width: 640px) {
  .hero-grid, .prob-grid, .feat-grid, .steps-row, .int-grid, .roi-grid, .spec-grid, .footer-grid { grid-template-columns: 1fr; }
  .hero-content h1, .hero-title { font-size: clamp(2rem, 8vw, 2.5rem) !important; }
  section { padding: 60px 4vw; }
  .cta-actions { flex-direction: column; }
  .roi-calculator-shell { grid-template-columns: 1fr; }

  /* LND-HERO-BLUR-MOBILE-01 — Remove blur from hero animation on mobile */
  /* filter:blur() adds GPU overhead on iOS/Android and makes first fold look soft */
  @keyframes premiumFadeUp {
    0% { opacity: 0; transform: translateY(8px); filter: none; }
    100% { opacity: 1; transform: translateY(0); filter: none; }
  }

  /* LND-PRICING-MOBILE-COMPACT-01 — Compact 4-card pricing in single column */
  #pricing .plan-card { padding: 1.5rem; }
  #pricing .features-list { gap: 0.4rem; }
  #pricing .plan-note { display: none; }
}

/* ===== ROI CALCULATOR ===== */
#roi-calculator{padding: 5rem 5vw;max-width:1200px;margin: 0 auto}
#roi-calculator .roi-head{margin-bottom: 2rem}
.roi-calculator-shell{
  display:grid;
  grid-template-columns:minmax(280px,1fr) minmax(320px,1.1fr);
  gap: 24px;
  align-items:stretch;
  max-width:960px;
  margin: 0 auto;
}
.roi-calculator-form,
.roi-calculator-result{
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:1.5rem;
  padding: 2rem;
  box-shadow:var(--shadow-sm);
}
.roi-calculator-form{
  display:grid;
  grid-template-columns:1fr;
  gap: 1rem;
}
.roi-calculator-field{
  display:flex;
  flex-direction:column;
  gap: .5rem;
  font-size:0.875rem;
  font-weight:600;
  color:var(--text-primary);
}
.roi-calculator-field input{
  width:100%;
  padding: 12px 16px;
  border:1px solid var(--border-strong);
  border-radius:12px;
  font-family:inherit;
  font-size:1rem;
  color:var(--text-primary);
  outline:none;
  transition:border-color .2s,box-shadow .2s;
  background:var(--bg-elevated);
  box-shadow:var(--shadow-sm);
}
.roi-calculator-field input:focus{
  border-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-subtle),var(--shadow-sm);
}
.roi-calculator-result{
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap: 1rem;
  background:
    linear-gradient(180deg,var(--accent-subtle) 0%,transparent 100%),
    var(--bg-card);
}
.roi-calculator-kicker{
  margin: 0;
  font-size:0.75rem;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--accent);
}
.roi-calculator-summary{
  margin: 0;
  font-size:clamp(2rem,4vw,3rem);
  font-weight:800;
  letter-spacing:-.04em;
  line-height:1.05;
  color:var(--text-primary);
}
.roi-calculator-payback{
  margin: 0;
  font-size:1rem;
  font-weight:700;
  color:var(--success);
}
.roi-calculator-footnote{
  margin: 0;
  font-size:0.875rem;
  color:var(--text-secondary);
  line-height:1.6;
}

/* ===== SRI EXPLAINER ===== */
#sri-explainer{padding: 5rem 5vw;max-width:1200px;margin: 0 auto}
#sri-explainer .sri-head{margin-bottom: 2rem;text-align:center}
.sri-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap: 20px;
  max-width:1080px;
  margin: 0 auto;
}
.sri-card{
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:1.25rem;
  padding: 1.75rem;
  box-shadow:var(--shadow-sm);
  display:flex;
  flex-direction:column;
  gap: .9rem;
}
.sri-card-step{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:2rem;
  height:2rem;
  border-radius:999px;
  background:var(--accent-subtle);
  color:var(--accent);
  font-size:0.75rem;
  font-weight:800;
  letter-spacing:.04em;
}
.sri-card-title{
  margin: 0;
  font-size:1rem;
  font-weight:700;
  letter-spacing:-.02em;
  color:var(--text-primary);
}
.sri-card-copy{
  margin: 0;
  font-size:0.875rem;
  line-height:1.65;
  color:var(--text-secondary);
}

/* ===== SECURITY TEASER ===== */
#security-teaser{padding: 5rem 5vw;max-width:1200px;margin: 0 auto}
#security-teaser .security-head{margin-bottom: 2rem;text-align:center}
.security-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap: 16px;
  max-width:1120px;
  margin: 0 auto 2rem;
}
.security-card{
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:1.25rem;
  padding: 1.5rem;
  box-shadow:var(--shadow-sm);
  display:flex;
  flex-direction:column;
  gap: .75rem;
}
.security-card-title{
  margin: 0;
  font-size:1rem;
  font-weight:700;
  letter-spacing:-.02em;
  color:var(--text-primary);
}
.security-card-copy{
  margin: 0;
  font-size:0.875rem;
  line-height:1.65;
  color:var(--text-secondary);
}
.security-actions{
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 1rem;
  flex-wrap:wrap;
}

/* ===== PRICING SECTION ===== */
#pricing{padding: 5rem 5vw;max-width:1200px;margin: 0 auto}
    #pricing .pricing-head{margin-bottom: 1.5rem}
    #pricing .pricing-lede{font-size:1rem;color:var(--text-secondary);max-width:540px;margin: 1rem auto 0;line-height:1.7}
    #pricing .pricing-toggle-wrap{display:flex;align-items:center;justify-content:center;gap: 1rem;margin: 2rem auto 3rem}
    #pricing .pricing-toggle-label{font-size:0.875rem;font-weight:600;color:var(--text-secondary);cursor:pointer;transition:color .2s;display:inline-flex;align-items:center;gap: .5rem}
    #pricing .pricing-toggle-label.active{color:var(--text-primary)}
    #pricing .pricing-toggle-switch{position:relative;width:52px;height:28px;cursor:pointer;display:inline-block}
    #pricing .pricing-toggle-switch input{opacity:0;width:0;height:0;position:absolute}
    #pricing .pricing-toggle-track{position:absolute;inset:0;background:var(--bg-surface);border:1px solid var(--border);border-radius:50px;transition:background .3s}
    #pricing .pricing-toggle-track::after{content:'';position:absolute;left:3px;top:3px;width:20px;height:20px;background:var(--accent);border-radius:50%;transition:transform .3s}
    #pricing input:checked + .pricing-toggle-track{background:var(--accent-subtle);border-color:var(--accent)}
    #pricing input:checked + .pricing-toggle-track::after{transform:translateX(24px)}
    #pricing .pricing-discount-badge{display:inline-flex;align-items:center;padding: 4px 10px;background:var(--success-subtle);color:var(--success);font-size:0.75rem;font-weight:700;border-radius:50px}

    #pricing .plans-grid{display:grid;grid-template-columns:repeat(3,1fr);gap: 24px;max-width:1100px;margin: 0 auto;align-items:start}
    #pricing .plan-card{background:var(--bg-card);border:1px solid var(--border);border-radius:1.5rem;padding: 2.25rem;display:flex;flex-direction:column;gap: 1.5rem;transition:transform .3s var(--ease-out),box-shadow .3s;position:relative}
    #pricing .plan-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}
    #pricing .plan-card.featured{border:2px solid var(--accent);background:var(--bg-elevated);box-shadow:0 0 0 4px var(--accent-subtle)}
    #pricing .plan-card.featured:hover{transform:translateY(-4px);box-shadow:0 0 0 4px var(--accent-subtle),var(--shadow-md)}
    #pricing .plan-card.gold-tier{border:1px solid var(--gold)}
    /* Clinic tier — categoría distinta, no gold individual */
    #pricing .plan-card.clinic-tier{border:1px solid var(--border-strong)}
    #pricing .clinic-badge{position:absolute;top:-14px;left:50%;transform:translateX(-50%);display:inline-flex;align-items:center;gap: 4px;padding: 4px 16px;background:var(--bg-elevated);color:var(--text-secondary);border:1px solid var(--border-strong);font-size:0.75rem;font-weight:700;letter-spacing:.06em;border-radius:50px;white-space:nowrap}
    #pricing .plan-name.clinic-name{color:var(--text-secondary)}
    #pricing .ai-features-block.clinic-features{border-color:var(--border-strong)}
    #pricing .ai-features-label.clinic-label{color:var(--text-secondary)}

    #pricing .popular-badge{position:absolute;top:-14px;left:50%;transform:translateX(-50%);display:inline-flex;align-items:center;gap: 4px;padding: 4px 16px;background:var(--accent);color:var(--text-on-accent);font-size:0.75rem;font-weight:700;letter-spacing:.06em;border-radius:50px;white-space:nowrap}
    #pricing .plan-name{font-size:0.75rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--text-muted);margin: 0}
    #pricing .plan-name.featured-name{color:var(--accent)}
    #pricing .plan-name.gold-name{color:var(--gold)}
    #pricing .plan-price{display:flex;align-items:baseline;gap: .2rem;line-height:1}
    #pricing .price-curr{font-size:1.125rem;font-weight:700;color:var(--text-secondary);margin-top: .35rem}
    #pricing .price-amount{font-size:2.75rem;font-weight:800;letter-spacing:-.04em;color:var(--text-primary)}
    #pricing .price-period{font-size:.875rem;color:var(--text-secondary);font-weight:500;margin-left: .1rem}
    #pricing .plan-note-billing{font-size:0.75rem;color:var(--text-muted);margin: .25rem 0 0}
    #pricing .plan-note-billing strong{color:var(--success)}
    #pricing .launch-annual-badge{display:inline-flex;align-items:center;gap: 6px;padding: 4px 12px;background:var(--warning-subtle);color:var(--warning);font-size:0.75rem;font-weight:700;border-radius:50px;letter-spacing:.03em;border:1px solid var(--warning);margin-top: .5rem}
    #pricing .plan-roi{font-size:.875rem;font-weight:700;color:var(--accent);padding: 8px 12px;background:var(--accent-subtle);border-radius:.75rem;text-align:center;line-height:1.35}
    #pricing .plan-roi.gold-roi{color:var(--gold);background:var(--gold-subtle)}

    #pricing .ai-features-block{background:var(--bg-page);border:1px solid var(--accent-subtle);border-radius:1rem;padding: 1.25rem;display:flex;flex-direction:column;gap: .625rem}
    #pricing .ai-features-block.gold-features{border-color:var(--gold-subtle)}
    #pricing .ai-features-label{font-size:0.6875rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);margin: 0 0 .25rem}
    #pricing .ai-features-label.gold-label{color:var(--gold)}
    #pricing .ai-feat-row{display:flex;align-items:flex-start;gap: .5rem;font-size:.875rem;color:var(--text-primary);font-weight:500;line-height:1.4}
    #pricing .ai-feat-ico{color:var(--accent);flex-shrink:0;font-size:0.875rem;margin-top: .05rem}
    #pricing .ai-feat-ico.gold-ico{color:var(--gold)}

    #pricing .divider-label{font-size:0.6875rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted);padding-top: .5rem;border-top:1px solid var(--divider,var(--border));margin: 0}
    #pricing .features-list{list-style:none;display:flex;flex-direction:column;gap: .625rem;flex:1;padding: 0;margin: 0}
    #pricing .features-list li{display:flex;align-items:flex-start;gap: .5rem;font-size:.875rem;color:var(--text-secondary);line-height:1.4}
    /* Step 4 · 2026-05-17 · L-06 compliance · SVG sizing (era font-size span) */
    #pricing .feat-check{color:var(--success);width:16px;height:16px;flex-shrink:0;margin-top: 4px;display:inline-block}

    /* Step 4 · check inline Lucide para hero-trust + cta-note · era Unicode ✓ */
    .check-inline{display:inline-block;width:14px;height:14px;vertical-align:-2px;color:var(--success);flex-shrink:0}

    #pricing .plan-cta{display:flex;align-items:center;justify-content:center;padding: 12px 24px;border-radius:50px;font-weight:700;font-size:1rem;text-decoration:none;transition: background-color.2s, color.2s, border-color.2s, transform.2s, opacity.2s, box-shadow.2s, filter.2s;min-height:48px;text-align:center}
    #pricing .plan-cta.cta-primary{background:var(--accent);color:var(--text-on-accent)}
    #pricing .plan-cta.cta-primary:hover{background:var(--accent-hover);transform:translateY(-1px)}
    #pricing .plan-cta.cta-secondary{background:transparent;color:var(--text-primary);border:1.5px solid var(--border-strong)}
    #pricing .plan-cta.cta-secondary:hover{background:var(--bg-hover)}
    #pricing .plan-cta.cta-gold{background:transparent;color:var(--gold);border:1.5px solid var(--gold)}
    #pricing .plan-cta.cta-gold:hover{background:var(--gold-subtle)}
    #pricing .plan-note{font-size:.75rem;color:var(--text-muted);text-align:center;line-height:1.4;margin: 0}

    #pricing .pricing-enterprise{max-width:900px;margin: 2rem auto 0;text-align:center;padding: 1.75rem 2rem;background:var(--bg-card);border:1px solid var(--border);border-radius:1.25rem}
    #pricing .pricing-enterprise p{font-size:.875rem;color:var(--text-secondary);line-height:1.6;margin: 0}
    #pricing .pricing-enterprise strong{color:var(--text-primary)}
    #pricing .pricing-enterprise a{color:var(--accent);font-weight:600;text-decoration:none;margin-left: .4rem}
    #pricing .pricing-compare-link{text-align:center;margin-top: 1.75rem}
    #pricing .pricing-compare-link a{color:var(--accent);font-weight:600;text-decoration:none;font-size:0.875rem}
    #pricing .pricing-compare-link a:hover{text-decoration:underline}

@media(max-width:768px){
  .referral-hero{grid-template-columns:1fr}
  .referral-copy{padding-top: 0}
  .referral-form-shell{position:static}
  .roi-calculator-shell{grid-template-columns:1fr}
  .sri-grid{grid-template-columns:1fr}
  .security-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  #pricing{padding: 4rem 5vw}
  #pricing .plans-grid{grid-template-columns:1fr}
}

@media(max-width:640px){
  .referral-page{padding: 3rem 5vw 4rem}
  .security-grid{grid-template-columns:1fr}
  .security-actions{flex-direction:column;align-items:stretch}
}

/* ── LND-DISENO-CSS-01: utility classes extracted from diseno.html ── */
.design-system-version { font-size: 0.75rem; color: var(--accent-light); font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; }
.ws-note-text { font-size:0.875rem;color:var(--text-tertiary);line-height:1.75;margin-bottom: 1.25rem; }
.ws-bar-label { font-size:0.6875rem;color:var(--text-tertiary);margin-left: .625rem; }
.journey-wrap { background:var(--bg-surface);border-top:1px solid var(--border);border-bottom:1px solid var(--border);padding: 100px 5vw; }
.sec-lead-spaced { margin-bottom: 2.5rem; }
.badges-grid { margin-top: 2.5rem;display:grid;grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));gap: 1.25rem; }
.badge-demo-card { background:var(--bg-surface);border:1px solid var(--border);border-radius:.875rem;padding: 1.5rem;display:flex;flex-direction:column;align-items:flex-start;gap: 1.25rem;box-shadow:var(--shadow-sm); }
.badge-demo-code { display:flex;flex-direction:column;gap: 0.4rem;font-size:0.75rem;font-family:monospace;color:var(--text-tertiary);background:var(--bg-elevated);padding: 0.75rem;border-radius:0.5rem;width:100%;border:1px solid var(--border-subtle); }
.badge-demo-prop { color:var(--text-secondary); }
.badge-demo-success-bg { color:var(--success-subtle); }
.badge-demo-success-color { color:var(--success); }
.badge-demo-warning-bg { color:var(--warning-subtle); }
.badge-demo-warning-color { color:var(--warning); }
.badge-demo-danger-bg { color:var(--danger-subtle); }
.badge-demo-danger-color { color:var(--danger); }
.badge-demo-info-bg { color:var(--info-subtle); }
.badge-demo-info-color { color:var(--info); }
.badge-demo-clinical-bg { color:var(--clinical-subtle); }
.badge-demo-clinical-color { color:var(--clinical-light); }
.badge-demo-neutral-bg { color:var(--bg-hover); }
.badge-demo-neutral-color { color:var(--text-secondary); }
.foot-links-row { display:flex;gap: 1.5rem; }
.foot-link { color:inherit;text-decoration:none; }
.margin-top-3 { margin-top: 3rem; }
.landing-hero-title { font-weight: 800; font-size: clamp(2.2rem, 4.8vw, 4.2rem); letter-spacing: -0.02em; }
.landing-hero-tour-link { font-size: var(--text-sm); display: inline-flex; align-items: center; gap: var(--space-1); margin-left: auto; margin-right: auto; }
.landing-hero-tour-icon { width: 1rem; height: 1rem; }
.landing-trust-dot { opacity: 0.3; margin: 0 var(--space-3); }
.landing-section-heading-narrow { max-width: 35rem; margin: 0 auto var(--space-4); }
.landing-feature-proof-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: var(--space-4); max-width: 53.75rem; margin: 0 auto; }
.landing-footer-fineprint { margin-top: var(--space-6); font-size: var(--text-sm); opacity: 0.6; }
.landing-whatsapp-label { font-size: var(--text-sm); font-weight: 600; }

/* GOV-NEW-33: inline style debt extracted from public/landing/index.html */
.landing-inline-clean-001 { font-family:'Inter',sans-serif; font-weight:700; letter-spacing:-0.02em; font-size:1.4rem; }
.landing-inline-clean-002 { font-size:12px; text-transform:uppercase; letter-spacing:0.08em; color:var(--accent); margin-bottom: 1rem; font-weight:700; }
.landing-inline-clean-003 { font-size:12px; color:var(--text-muted); letter-spacing:0.01em; }
.landing-inline-clean-004 { text-align:center; }
.landing-inline-clean-005 { font-family:'Inter',sans-serif; font-weight:800; font-size:3rem; color:var(--text-tertiary); line-height:1; margin-bottom: 1.5rem; letter-spacing:-0.04em; }
.landing-inline-clean-006 { font-family:'Inter',sans-serif; font-weight:800; font-size:3rem; color:var(--text-tertiary); line-height:1; margin-bottom: 1.5rem; letter-spacing:-0.04em; }
.landing-inline-clean-007 { font-family:'Inter',sans-serif; font-weight:800; font-size:3rem; color:var(--text-tertiary); line-height:1; margin-bottom: 1.5rem; letter-spacing:-0.04em; }
.landing-inline-clean-008 { text-align:center; margin-bottom: 0; position:relative; z-index:var(--z-card-hover); }
.landing-inline-clean-009 { margin: 0 auto; }
.landing-inline-clean-010 { width:8px; height:8px; border-radius:50%; background:var(--success); }
.landing-inline-clean-011 { width:60%; height:6px; background:var(--text-tertiary); border-radius:4px; }
.landing-inline-clean-012 { width:90%; height:4px; background:var(--border-strong); border-radius:4px; margin-top: auto; }
.landing-inline-clean-013 { width:50%; height:4px; background:var(--accent-subtle); border-radius:4px; }
.landing-inline-clean-014 { width:24px; height:24px; border-radius:50%; background:var(--accent-subtle); }
.landing-inline-clean-015 { width:50%; height:6px; background:var(--text-tertiary); border-radius:4px; }
.landing-inline-clean-016 { width:90%; height:4px; background:var(--border-strong); border-radius:4px; margin-top: auto; }
.landing-inline-clean-017 { width:60%; height:4px; background:var(--border-strong); border-radius:4px; }
.landing-inline-clean-018 { width:30%; height:6px; background:var(--text-tertiary); border-radius:4px; }
.landing-inline-clean-019 { width:16px; height:6px; background:var(--accent); border-radius:4px; }
.landing-inline-clean-020 { width:100%; height:32px; background:var(--accent-subtle); border-radius:6px; margin-top: auto; }
.landing-inline-clean-021 { transition-delay:.4s; }
.landing-inline-clean-022 { width:100%; height:4px; background:var(--text-tertiary); border-radius:4px; }
.landing-inline-clean-023 { width:90%; height:4px; background:var(--text-tertiary); border-radius:4px; }
.landing-inline-clean-024 { width:40%; height:16px; background:var(--accent); border-radius:12px; margin-top: auto; align-self:flex-end; }
.landing-inline-clean-025 { margin: 0 auto; }
.landing-inline-clean-026 { text-align:center; margin-bottom: 3rem; }
.landing-inline-clean-027 { color:var(--text-secondary); font-size:1rem; max-width:480px; margin: 0 auto; line-height:1.7; }
.landing-inline-clean-028 { background:var(--bg-elevated); border:1px solid var(--border); border-radius:1rem; padding: 1.25rem 2rem; text-align:center; min-width:160px; }
.landing-inline-clean-029 { font-size:2rem; font-weight:800; letter-spacing:-0.03em; color:var(--text-primary); }
.landing-inline-clean-030 { font-size:0.75rem; color:var(--text-secondary); font-weight:500; margin-top: 4px; }
.landing-inline-clean-031 { background:var(--bg-elevated); border:1px solid var(--border); border-radius:1rem; padding: 1.25rem 2rem; text-align:center; min-width:160px; }
.landing-inline-clean-032 { font-size:2rem; font-weight:800; letter-spacing:-0.03em; color:var(--accent); }
.landing-inline-clean-033 { font-size:0.75rem; color:var(--text-secondary); font-weight:500; margin-top: 4px; }
.landing-inline-clean-034 { background:var(--bg-elevated); border:1px solid var(--border); border-radius:1rem; padding: 1.25rem 2rem; text-align:center; min-width:160px; }
.landing-inline-clean-035 { font-size:2rem; font-weight:800; letter-spacing:-0.03em; color:var(--text-primary); }
.landing-inline-clean-036 { font-size:1rem; font-weight:600; }
.landing-inline-clean-037 { font-size:0.75rem; color:var(--text-secondary); font-weight:500; margin-top: 4px; }
.landing-inline-clean-038 { font-weight:700; font-size:0.875rem; color:var(--text-primary); margin-bottom: 4px; }
.landing-inline-clean-039 { font-size:0.75rem; color:var(--text-secondary); line-height:1.5; }
.landing-inline-clean-040 { font-weight:700; font-size:0.875rem; color:var(--text-primary); margin-bottom: 4px; }
.landing-inline-clean-041 { font-size:0.75rem; color:var(--text-secondary); line-height:1.5; }
.landing-inline-clean-042 { font-weight:700; font-size:0.875rem; color:var(--text-primary); margin-bottom: 4px; }
.landing-inline-clean-043 { font-size:0.75rem; color:var(--text-secondary); line-height:1.5; }
.landing-inline-clean-044 { text-align:center; margin-top: 2.5rem; font-size:0.75rem; color:var(--text-tertiary); }
.landing-inline-clean-045 { text-align:center; }
.landing-inline-clean-046 { text-align:center; }
.landing-inline-clean-047 { font-weight:400; color:var(--text-muted); font-size:0.75rem; }
.landing-inline-clean-048 { margin-top: 1.25rem; }
.landing-inline-clean-049 { width:auto; margin-top: 4px; box-shadow:none; }
.landing-inline-clean-050 { color:var(--text-primary); text-underline-offset:3px; }
.landing-inline-clean-051 { font-family:var(--font-brand, 'Inter', sans-serif); font-weight:700; letter-spacing:-0.02em; font-size:1.4rem; }
.landing-inline-clean-052 { opacity:0.8; }
.landing-inline-clean-053 { border-top:1px solid var(--border); padding-top: 1.5rem; margin-top: 3rem; color:var(--text-secondary); font-size:0.875rem; }
.landing-inline-clean-054 { border-top:none; padding-top: 1rem; margin-top: 0; }
.landing-inline-clean-055 { color:inherit; text-decoration:none; }
.landing-inline-clean-056 { color:inherit; text-decoration:none; }
.landing-inline-clean-057 { color:inherit; text-decoration:none; }

/* ════════════════════════════════════════════════════════════════
   BRAND ANCHOR · "El corazón de Velandra"
   Sealed 2026-05-17 · Step 2 · movido desde inline <style> (L-07 compliance)
   Sección entre hero y problem con mark V01 animado V3 + copy poética
   ════════════════════════════════════════════════════════════════ */
.brand-anchor {
  background: var(--brand-bg);  /* Step 5 · L-08 compliance · token semantic */
  padding: clamp(80px, 10vw, 128px) 5vw;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  overflow: hidden;
}
/* Radial overlay sutil · profundidad sin romper brand flat */
.brand-anchor::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 30% 50%, rgba(255,255,255,0.08), transparent 55%);
  pointer-events: none;
}
.brand-anchor-inner {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: clamp(40px, 5vw, 72px);
  align-items: center;
  max-width: 920px;
  width: 100%;
  position: relative;
  z-index: 1;
}
.brand-anchor-mark {
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  width: 260px;
  height: 260px;
}
.brand-anchor-mark canvas { display: block; }
/* megacommit 24+ · DESIGN.md fix: Inter Tight + tokens scoped */
.brand-anchor {
  --text-primary: #ffffff;
  --text-secondary: rgba(255, 255, 255, 0.86);
  --text-tertiary: rgba(255, 255, 255, 0.78);
  --border: rgba(255, 255, 255, 0.22);
}
.brand-anchor-copy { color: var(--text-primary); }
.brand-anchor-kicker {
  font-family: 'Inter Tight', 'Inter', system-ui, sans-serif;
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  display: inline-block;
  padding: 4px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  margin-bottom: 20px;
}
.brand-anchor-title {
  font-family: 'Inter Tight', 'Inter', system-ui, sans-serif;
  font-weight: 500;
  font-size: clamp(28px, 4vw, 44px);
  letter-spacing: -0.032em;
  line-height: 1.08;
  color: var(--text-primary);
  margin-bottom: 16px;
}
.brand-anchor-title em { font-style: italic; font-weight: 500; }
.brand-anchor-sub {
  font-family: 'Inter', sans-serif;
  font-size: clamp(15px, 1.6vw, 17px);
  line-height: 1.55;
  color: var(--text-secondary);
  max-width: 460px;
  margin: 0;
  font-weight: 400;
}
.brand-anchor-sub strong { color: var(--text-primary); font-weight: 500; }
@media (max-width: 760px) {
  .brand-anchor-inner {
    grid-template-columns: 1fr;
    gap: 36px;
    text-align: center;
  }
  .brand-anchor-mark {
    justify-self: center;
    margin: 0 auto;
    width: 220px;
    height: 220px;
  }
  .brand-anchor-sub { margin: 0 auto; }
}

/* ═══════════════════════════════════════════════════════════════
   MANIFESTO · Post-hero (2026-05-22 · cleanup DESIGN.md compliance)
   Linear-mirror pattern: tech chips + thesis + 3 product figs.
   Step 23 · removido radial gradient decorativo (DESIGN.md §7 ❌),
   removido box-shadow inline (§7 ❌), reducidos radii a 8px (§7 ❌),
   tokens semánticos en lugar de hardcoded (§4).
   ═══════════════════════════════════════════════════════════════ */
.manifesto {
  background: var(--bg-page);
  color: var(--text-primary);
  padding: 140px 5vw;
  position: relative;
  overflow: hidden;
}
.manifesto-inner {
  max-width: 1280px;
  margin: 0 auto;
}

/* ── chips row (no logos: prueba tecnica honesta) ── */
.manifesto-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 8px 16px;
  margin: 0 0 96px;
  padding-bottom: 48px;
  border-bottom: 1px solid var(--border);
}
.manifesto-chip {
  font-family: 'JetBrains Mono', 'Fira Code', ui-monospace, monospace;
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  color: var(--text-tertiary);
  text-transform: uppercase;
  white-space: nowrap;
}
.manifesto-chip-sep {
  color: var(--text-tertiary);
  opacity: 0.5;
  font-size: 0.6875rem;
  user-select: none;
}

/* ── headline thesis (linear two-tone · weight 600 max per DESIGN.md §7) ── */
.manifesto-heading {
  font-family: 'Inter Tight', 'Inter', system-ui, sans-serif;
  font-size: clamp(2rem, 4.2vw, 3.5rem);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1.08;
  margin: 0 0 96px;
  max-width: 1100px;
  text-wrap: balance;
}
.manifesto-bright { color: var(--text-primary); }
.manifesto-muted  { color: var(--text-secondary); }

/* ── figs grid (3 cols product mockups) ── */
.manifesto-figs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.manifesto-fig {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  position: relative;
  transition: border-color var(--transition);
}
.manifesto-fig:hover {
  border-color: var(--border-strong);
}
.fig-label {
  font-family: 'JetBrains Mono', 'Fira Code', ui-monospace, monospace;
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  color: var(--text-tertiary);
  text-transform: uppercase;
}
.fig-visual {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  aspect-ratio: 4 / 3;
  padding: 20px;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.fig-title {
  font-family: 'Inter', sans-serif;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--text-primary);
  margin: 4px 0 0;
}
.fig-desc {
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--text-secondary);
  margin: 0;
}

/* fig 0.1 · transcribe (rec + lines + dx pill · DESIGN.md tokens) */
.fig-visual--transcribe { justify-content: space-between; }
.fig-rec {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  padding: 6px 10px;
  background: var(--danger-subtle);
  border-radius: var(--radius-pill);
}
.fig-rec-dot {
  width: 7px;
  height: 7px;
  border-radius: var(--radius-pill);
  background: var(--danger);
}
.fig-rec-label {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  color: var(--danger);
}
.fig-lines {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.fig-line {
  height: 6px;
  background: var(--border-strong);
  border-radius: var(--radius-sm);
  display: block;
}
.fig-dx-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: var(--accent-subtle);
  border: 1px solid var(--accent);
  border-radius: var(--radius-md);
  align-self: flex-start;
}
.fig-dx-code {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--accent-text);
}
.fig-dx-name {
  font-size: 0.75rem;
  color: var(--text-primary);
  font-weight: 500;
}
.fig-dx-conf {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.6875rem;
  color: var(--text-secondary);
  margin-left: auto;
}

/* fig 0.2 · whatsapp (success tokens · DESIGN.md compliance) */
.fig-visual--whatsapp { justify-content: flex-end; gap: 10px; }
.fig-wa-bubble {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 12px;
  border-radius: var(--radius-md);
  max-width: 78%;
}
.fig-wa-bubble--out {
  align-self: flex-end;
  background: var(--success-subtle);
  border: 1px solid var(--success);
}
.fig-wa-bubble--in {
  align-self: flex-start;
  background: var(--bg-surface);
  border: 1px solid var(--border);
}
.fig-wa-line {
  height: 5px;
  background: var(--border-strong);
  border-radius: var(--radius-sm);
  display: block;
}
.fig-wa-bubble--out .fig-wa-line { background: var(--success); opacity: 0.6; }
.fig-wa-meta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.6875rem;
  color: var(--text-tertiary);
  align-self: flex-end;
  margin-top: 4px;
}
.fig-wa-bubble--out .fig-wa-meta { color: var(--success); }

/* fig 0.3 · timeline (vertical · tokens · DESIGN.md compliance) */
.fig-visual--timeline { padding: 20px 20px; }
.fig-timeline {
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: relative;
}
.fig-timeline::before {
  content: '';
  position: absolute;
  left: 5px;
  top: 8px;
  bottom: 8px;
  width: 1px;
  background: var(--border);
}
.fig-tl-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  position: relative;
}
.fig-tl-dot {
  width: 11px;
  height: 11px;
  border-radius: var(--radius-pill);
  background: var(--border-strong);
  border: 2px solid var(--bg-elevated);
  flex-shrink: 0;
  margin-top: 4px;
  position: relative;
  z-index: 1;
}
.fig-tl-dot--alert {
  background: var(--accent);
}
.fig-tl-card {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 6px 10px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
.fig-tl-date {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.6875rem;
  color: var(--text-tertiary);
  letter-spacing: 0.06em;
}
.fig-tl-line {
  height: 4px;
  background: var(--border-strong);
  border-radius: var(--radius-sm);
  display: block;
}

/* Step 23 · removidos keyframes manifesto-pulse (animation eliminada del rec dot). */

@media (max-width: 1024px) {
  .manifesto { padding: 100px 5vw; }
  .manifesto-chips { margin-bottom: 64px; padding-bottom: 36px; }
  .manifesto-heading { margin-bottom: 64px; }
  .manifesto-figs { grid-template-columns: 1fr; gap: 16px; }
}
@media (max-width: 640px) {
  .manifesto { padding: 72px 5vw; }
  .manifesto-chips { gap: 6px 12px; margin-bottom: 48px; padding-bottom: 28px; }
  .manifesto-heading { font-size: clamp(1.6rem, 6vw, 2.25rem); margin-bottom: 48px; }
  .manifesto-fig { padding: 20px; }
  .fig-visual { padding: 16px; }
}

/* ═══════════════════════════════════════════════════════════════
   CHAPTER 1.0 · Consulta · Ambient AI → SOAP (2026-05-22)
   Linear-mirror "1.0 Intake" pattern · 2-col header + overlay 3D stage:
   foreground = transcript card · background = SOAP editor card (faded
   + extiende offscreen con mask). Tercera parte del landing.
   ═══════════════════════════════════════════════════════════════ */
.chapter {
  background: var(--bg-page);
  color: var(--text-primary);
  padding: 140px 5vw 160px;
  position: relative;
  overflow: hidden;
}
/* Step 23 · removido radial-gradient decorativo (DESIGN.md §7 ❌) */
.chapter-inner {
  max-width: 1280px;
  margin: 0 auto;
}

/* ── header 2-col (H2 left · sub + chapter-index right) ── */
.chapter-header {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 80px;
  align-items: start;
  margin-bottom: 96px;
}
.chapter-title {
  font-family: 'Inter Tight', 'Inter', system-ui, sans-serif;
  font-size: clamp(2rem, 4.2vw, 3.5rem);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1.05;
  color: var(--text-primary);
  margin: 0;
  text-wrap: balance;
}
.chapter-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 40px;
  padding-top: 12px;
}
.chapter-sub {
  font-size: 1rem;
  line-height: 1.55;
  color: var(--text-secondary);
  margin: 0;
  text-wrap: balance;
}
.chapter-index {
  font-family: 'JetBrains Mono', 'Fira Code', ui-monospace, monospace;
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  transition: color var(--transition);
}
.chapter-index strong {
  font-weight: 500;
  color: var(--text-secondary);
}
.chapter-index:hover {
  color: var(--text-primary);
}
.chapter-index:hover strong {
  color: var(--text-primary);
}

/* Sub-índice de features bajo el mockup (2026-05-28) · patrón Linear
   "3.1 Issues · 3.2 Agents · 3.3 Linear MCP · …". Grid 2-col row-major,
   número mono muted + label. Da la capa de feature deep-dive que los
   capítulos no tenían (gap real vs Linear, evidenciado pixel-a-pixel). */
.chapter-subindex {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px 56px;
  max-width: 560px;
  margin: 64px 0 0;
}
.chapter-subindex__item {
  display: flex;
  align-items: baseline;
  gap: 16px;
}
.chapter-subindex__num {
  font-family: 'JetBrains Mono', 'Fira Code', ui-monospace, monospace;
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  color: var(--text-tertiary);
  flex-shrink: 0;
}
.chapter-subindex__label {
  font-size: 0.875rem;
  letter-spacing: -0.01em;
  color: var(--text-secondary);
}
@media (max-width: 640px) {
  .chapter-subindex { grid-template-columns: 1fr; gap: 16px; margin-top: 40px; }
}

/* ── stage (overlay 3D foreground + background) ── */
.chapter-stage {
  position: relative;
  min-height: 520px;
}
.chapter-card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  font-family: 'Inter', system-ui, sans-serif;
}

/* foreground · transcript card · 460px wide
   Step 23 · removido box-shadow inline (DESIGN.md §7 ❌)
   Linear pattern de overlay 3D NO está permitido en Velandra. */
.chapter-card--fg {
  position: relative;
  z-index: 2;
  width: 460px;
  max-width: 100%;
}

/* background · SOAP card · extiende offscreen + fade
   left 380->450 (2026-05-28): a 380 el texto SOAP arrancaba ~51px detrás del
   borde del fg (460px ancho) y cada línea se cortaba a la mitad ("a clínica",
   "artán"...). A 450 el contenido empieza después del fg; queda un peek fino
   de capas sin cortar palabras. */
.chapter-card--bg {
  position: absolute;
  top: 64px;
  left: 450px;
  right: -180px;
  z-index: 1;
  background: var(--bg-surface);
  opacity: 0.92;
  mask-image: linear-gradient(to right, black 0%, black 72%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, black 0%, black 72%, transparent 100%);
}

/* ── card chrome ── */
.chapter-card__chrome {
  padding: 12px 20px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 12px;
}
.chapter-card__icon {
  width: 22px;
  height: 22px;
  border-radius: var(--radius-sm);
  background: var(--accent-subtle);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--accent-text);
  flex-shrink: 0;
}
.chapter-card__icon svg { width: 12px; height: 12px; }
.chapter-card__title {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: -0.005em;
}
.chapter-card__title em {
  font-style: normal;
  color: var(--text-secondary);
  font-weight: 400;
}
.chapter-card__rec {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.6875rem;
  color: var(--danger);
  margin-left: auto;
  padding: 4px 8px;
  background: var(--danger-subtle);
  border-radius: var(--radius-sm);
}
.chapter-card__rec::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: var(--radius-pill);
  background: var(--danger);
}
.chapter-card__body {
  padding: 20px 24px 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* ── transcript turns (foreground) ── */
.chapter-turn {
  display: flex;
  flex-direction: column;
  gap: 4px;
  animation: chapter-turn-in 0.5s ease both;
}
.chapter-turn:nth-child(2) { animation-delay: 0.1s; }
.chapter-turn:nth-child(3) { animation-delay: 0.2s; }
.chapter-turn:nth-child(4) { animation-delay: 0.3s; }
.chapter-turn__head {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.chapter-turn__speaker {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  font-weight: 500;
}
.chapter-turn__speaker--dr { color: var(--accent-text); }
.chapter-turn__time {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.6875rem;
  color: var(--text-muted);
}
.chapter-turn__text {
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--text-primary);
  margin: 0;
}

/* Commit 11 · 2026-05-22 · Linear-mirror @AI command pattern
   Foto Linear "1.0 Intake" muestra '@Linear create urgent issues...' al final
   del thread con highlight accent en el @mention. Replico literal. */
.chapter-turn--command {
  margin-top: 4px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}
.chapter-turn__mention {
  display: inline-block;
  padding: 4px 6px;
  background: var(--accent-subtle);
  color: var(--accent-text);
  border-radius: var(--radius-sm);
  font-weight: 500;
  font-size: 0.75rem;
  letter-spacing: -0.005em;
  margin-right: 4px;
}

/* waveform footer */
.chapter-wave {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 4px;
  height: 28px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
  margin-top: 4px;
}
.chapter-wave span {
  width: 2px;
  background: var(--accent);
  border-radius: 4px;
  animation: chapter-wave 1.2s ease-in-out infinite;
  opacity: 0.6;
}
.chapter-wave span:nth-child(1) { height: 30%; animation-delay: 0.0s; }
.chapter-wave span:nth-child(2) { height: 60%; animation-delay: 0.1s; }
.chapter-wave span:nth-child(3) { height: 90%; animation-delay: 0.2s; }
.chapter-wave span:nth-child(4) { height: 45%; animation-delay: 0.3s; }
.chapter-wave span:nth-child(5) { height: 70%; animation-delay: 0.4s; }
.chapter-wave span:nth-child(6) { height: 95%; animation-delay: 0.5s; }
.chapter-wave span:nth-child(7) { height: 55%; animation-delay: 0.6s; }
.chapter-wave span:nth-child(8) { height: 80%; animation-delay: 0.7s; }
.chapter-wave span:nth-child(9) { height: 35%; animation-delay: 0.8s; }
.chapter-wave span:nth-child(10){ height: 65%; animation-delay: 0.9s; }
.chapter-wave span:nth-child(11){ height: 90%; animation-delay: 1.0s; }
.chapter-wave span:nth-child(12){ height: 50%; animation-delay: 1.1s; }
.chapter-wave span:nth-child(13){ height: 75%; animation-delay: 1.2s; }
.chapter-wave span:nth-child(14){ height: 40%; animation-delay: 1.3s; }
.chapter-wave span:nth-child(15){ height: 60%; animation-delay: 1.4s; }

/* ── SOAP card body (background) ── */
.chapter-soap {
  padding: 24px 28px 28px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.chapter-soap__section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.chapter-soap__label {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  font-weight: 600;
}
.chapter-soap__text {
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--text-primary);
  margin: 0;
}
.chapter-soap__dx {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.chapter-soap__dx-row {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  background: var(--accent-subtle);
  border: 1px solid var(--accent);
  border-radius: var(--radius-md);
  align-self: flex-start;
}
.chapter-soap__dx-code {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--accent-text);
}
.chapter-soap__dx-name {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--text-primary);
}
.chapter-soap__dx-conf {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.6875rem;
  color: var(--text-secondary);
  margin-left: auto;
  padding-left: 12px;
}
.chapter-soap__plan {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.chapter-soap__plan li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--text-primary);
}
.chapter-soap__plan li::before {
  content: '→';
  color: var(--accent-text);
  font-weight: 500;
  flex-shrink: 0;
}
.chapter-soap__sign {
  margin-top: 8px;
  align-self: flex-start;
  padding: 8px 16px;
  background: var(--accent);
  color: var(--text-primary);
  font-size: 0.75rem;
  font-weight: 600;
  border-radius: var(--radius-md);
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: background var(--transition);
}
.chapter-soap__sign:hover {
  background: var(--accent-hover);
}
.chapter-soap__sign svg { width: 14px; height: 14px; }

/* ── animations · solo lo que se usa después del cleanup DESIGN.md ── */
@keyframes chapter-wave {
  0%, 100% { opacity: 0.6; transform: scaleY(1); }
  50%      { opacity: 1; transform: scaleY(1.4); }
}
@keyframes chapter-turn-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── responsive ── */
@media (max-width: 1100px) {
  .chapter-card--bg {
    left: 300px;
    right: -240px;
  }
}
@media (max-width: 900px) {
  .chapter { padding: 100px 5vw 120px; }
  .chapter-header {
    grid-template-columns: 1fr;
    gap: 32px;
    margin-bottom: 64px;
  }
  .chapter-stage {
    display: flex;
    flex-direction: column;
    min-height: auto;
    gap: 20px;
  }
  .chapter-card--fg { width: 100%; }
  .chapter-card--bg {
    position: relative;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    opacity: 1;
    mask-image: none;
    -webkit-mask-image: none;
  }
}
@media (max-width: 640px) {
  .chapter { padding: 72px 5vw 88px; }
  .chapter-header { margin-bottom: 48px; }
  .chapter-card__body, .chapter-soap { padding: 16px 20px 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .chapter-wave span,
  .chapter-turn,
  .chapter-wa-bubble { animation: none; opacity: 1; transform: none; }
}

/* ═══════════════════════════════════════════════════════════════
   CHAPTER 2.0 · Agenda · WhatsApp → Cita confirmada (2026-05-22)
   Reusa shell .chapter / .chapter-card / .chapter-card--fg/bg.
   Solo content classes nuevas: .chapter-wa-* (WhatsApp foreground)
   y .chapter-agenda-* (day view background).
   ═══════════════════════════════════════════════════════════════ */

/* ── WhatsApp foreground · header avatar + bubbles
   Step 23 · removido linear-gradient en avatar (DESIGN.md §7 ❌)
   Avatar ahora usa --success flat. Bubbles usan --success-subtle/--success. */
.chapter-card__avatar {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-pill);
  background: var(--success);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-primary);
  flex-shrink: 0;
  font-size: 0.6875rem;
  font-weight: 600;
}
.chapter-card__avatar svg { width: 14px; height: 14px; }
.chapter-card__sub {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.chapter-card__sub-name {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-primary);
}
.chapter-card__sub-meta {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.6875rem;
  color: var(--text-tertiary);
  letter-spacing: 0.04em;
}
.chapter-wa-body {
  padding: 20px 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: var(--bg-elevated);
}
.chapter-wa-bubble {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-width: 82%;
  padding: 10px 12px;
  border-radius: var(--radius-md);
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--text-primary);
  position: relative;
  animation: chapter-turn-in 0.4s ease both;
}
.chapter-wa-bubble:nth-child(2) { animation-delay: 0.1s; }
.chapter-wa-bubble:nth-child(3) { animation-delay: 0.2s; }
.chapter-wa-bubble:nth-child(4) { animation-delay: 0.3s; }
.chapter-wa-bubble--out {
  align-self: flex-end;
  background: var(--success-subtle);
  border: 1px solid var(--success);
}
.chapter-wa-bubble--in {
  align-self: flex-start;
  background: var(--bg-surface);
  border: 1px solid var(--border);
}
.chapter-wa-bubble__text { margin: 0; }
.chapter-wa-bubble__slots {
  margin: 6px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.chapter-wa-bubble__slots li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 0.75rem;
}
.chapter-wa-bubble__slots li.is-picked {
  background: var(--success-subtle);
  border-color: var(--success);
}
.chapter-wa-bubble__slot-num {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.6875rem;
  color: var(--text-tertiary);
  background: var(--bg-elevated);
  padding: 4px 6px;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
}
.is-picked .chapter-wa-bubble__slot-num {
  background: var(--success-subtle);
  color: var(--success);
}
.chapter-wa-bubble__confirm {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 4px 0 0;
}
.chapter-wa-bubble__confirm svg {
  width: 16px;
  height: 16px;
  color: var(--success);
  flex-shrink: 0;
}
.chapter-wa-bubble__meta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.6875rem;
  color: var(--text-tertiary);
  align-self: flex-end;
  margin-top: 4px;
}
.chapter-wa-bubble--out .chapter-wa-bubble__meta { color: var(--success); }
.chapter-wa-bubble__meta svg { width: 14px; height: 9px; }

/* ── Agenda background · day view with time slots ── */
.chapter-agenda {
  padding: 20px 24px 28px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.chapter-agenda__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}
.chapter-agenda__date {
  font-family: 'Inter', sans-serif;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: -0.01em;
}
.chapter-agenda__date em {
  font-style: normal;
  color: var(--text-secondary);
  font-weight: 400;
  margin-left: 8px;
}
.chapter-agenda__count {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.6875rem;
  color: var(--text-tertiary);
  letter-spacing: 0.08em;
}
.chapter-agenda__slots {
  display: flex;
  flex-direction: column;
  gap: 4px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.chapter-agenda__slot {
  display: grid;
  grid-template-columns: 60px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 10px 12px;
  border-radius: var(--radius-md);
  transition: background var(--transition), border-color var(--transition);
  border: 1px solid transparent;
}
.chapter-agenda__slot--free {
  opacity: 0.55;
}
.chapter-agenda__slot--booked {
  background: var(--bg-elevated);
  border-color: var(--border);
}
/* Step 23 · removido box-shadow glow (DESIGN.md §7 ❌)
   La diferenciación visual del slot nuevo va por background accent-subtle + border accent. */
.chapter-agenda__slot--new {
  background: var(--accent-subtle);
  border-color: var(--accent);
}
.chapter-agenda__time {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-secondary);
  letter-spacing: 0.02em;
}
.chapter-agenda__slot--new .chapter-agenda__time { color: var(--accent-text); }
.chapter-agenda__patient {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.chapter-agenda__patient-name {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.chapter-agenda__slot--free .chapter-agenda__patient-name {
  color: var(--text-tertiary);
  font-style: italic;
  font-weight: 400;
}
.chapter-agenda__patient-reason {
  font-size: 0.75rem;
  color: var(--text-tertiary);
}
.chapter-agenda__badge {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 6px;
  border-radius: var(--radius-sm);
  white-space: nowrap;
}
.chapter-agenda__badge--wa {
  background: var(--success-subtle);
  color: var(--success);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.chapter-agenda__badge--wa::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: var(--radius-pill);
  background: var(--success);
}
.chapter-agenda__badge--confirmed {
  background: var(--accent-subtle);
  color: var(--accent-text);
}
.chapter-agenda__badge--free { display: none; }

/* ═══════════════════════════════════════════════════════════════
   CHAPTER 3.0 · Vista de práctica · Sidebar + Roadmap (2026-05-22)
   REBUILD literal del screenshot Linear "Define the product direction":
   - 2-col header (H2 izq + mega-card 8 items en 3 cols der)
   - Single canvas inferior: card sidebar (cohortes) + card roadmap (Gantt)
   - NO overlay 3D. NO box-shadow inline. Tokens DESIGN.md §4 only.
   ═══════════════════════════════════════════════════════════════ */

/* ── header right column · mega-card 8 items en 3 cols ── */
.chapter-megamenu {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 24px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px 28px;
  width: 100%;
  /* El megamenú es un <nav>, así que la regla global `nav {...}` (navbar) le
     filtraba height fija (cortaba los últimos items tras la card del roadmap),
     position:sticky y backdrop-filter glass (viola DESIGN.md §7). Neutralizado. */
  height: auto;
  position: static;
  backdrop-filter: none;
}
.chapter-megamenu__col {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.chapter-megamenu__item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  color: inherit;
  text-decoration: none;
  transition: color var(--transition);
}
.chapter-megamenu__item:hover .chapter-megamenu__desc { color: var(--text-primary); }
.chapter-megamenu__label {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  font-weight: 500;
}
.chapter-megamenu__desc {
  font-size: 0.875rem;
  line-height: 1.4;
  color: var(--text-primary);
  font-weight: 500;
  letter-spacing: -0.01em;
  transition: color var(--transition);
}

/* ── roadmap container (sidebar + canvas) ── */
.chapter-roadmap {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 0;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
}

/* ── sidebar (cohortes) ── */
.chapter-roadmap-sidebar {
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  padding: 20px;
  gap: 12px;
  background: var(--bg-surface);
}
.chapter-roadmap-sidebar__title {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: -0.005em;
  margin: 0 0 4px;
}
.chapter-roadmap-sidebar__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.chapter-roadmap-sidebar__item {
  display: grid;
  grid-template-columns: 22px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  font-size: 0.75rem;
  color: var(--text-primary);
  cursor: default;
  transition: background var(--transition);
}
.chapter-roadmap-sidebar__item:hover {
  background: var(--bg-elevated);
}
.chapter-roadmap-sidebar__icon {
  width: 18px;
  height: 18px;
  border-radius: var(--radius-sm);
  background: var(--accent-subtle);
  color: var(--accent-text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.chapter-roadmap-sidebar__icon svg { width: 11px; height: 11px; }
.chapter-roadmap-sidebar__name {
  font-weight: 500;
  letter-spacing: -0.005em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.chapter-roadmap-sidebar__count {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.6875rem;
  color: var(--text-tertiary);
  letter-spacing: 0.04em;
}

/* ── canvas (Gantt-style timeline) ── */
.chapter-roadmap-canvas {
  display: flex;
  flex-direction: column;
  padding: 16px 20px 24px;
  position: relative;
  overflow: hidden;
}
.chapter-roadmap-canvas__months {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  border-bottom: 1px solid var(--border);
  padding-bottom: 10px;
  margin-bottom: 16px;
}
.chapter-roadmap-canvas__month {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
}
.chapter-roadmap-canvas__month-name {
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-secondary);
  font-weight: 500;
}
.chapter-roadmap-canvas__month-days {
  font-size: 0.6875rem;
  color: var(--text-muted);
  letter-spacing: 0.04em;
}
.chapter-roadmap-canvas__rows {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.chapter-roadmap-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.chapter-roadmap-row__head {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.75rem;
  color: var(--text-primary);
  font-weight: 500;
  letter-spacing: -0.005em;
}
.chapter-roadmap-row__icon {
  width: 16px;
  height: 16px;
  border-radius: var(--radius-sm);
  background: var(--accent-subtle);
  color: var(--accent-text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.chapter-roadmap-row__icon svg { width: 10px; height: 10px; }
.chapter-roadmap-row__meta {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.6875rem;
  color: var(--text-tertiary);
  letter-spacing: 0.06em;
  margin-left: 4px;
}
.chapter-roadmap-row__track {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  position: relative;
  height: 32px;
}
.chapter-roadmap-row__track::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: linear-gradient(90deg, var(--border) 1px, transparent 1px);
  background-size: calc(100% / 8) 100%;
  pointer-events: none;
  opacity: 0.5;
}
.chapter-roadmap-bar {
  position: relative;
  height: 24px;
  margin-top: 4px;
  border-radius: var(--radius-sm);
  display: inline-flex;
  align-items: center;
  padding: 0 10px;
  font-size: 0.6875rem;
  font-weight: 500;
  color: var(--text-primary);
  letter-spacing: -0.005em;
  background: var(--accent-subtle);
  border: 1px solid var(--accent);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.chapter-roadmap-bar--ghost {
  background: transparent;
  border: 1px dashed var(--border-strong);
  color: var(--text-tertiary);
  overflow: visible; /* deja ver el diamante de hito en el borde izquierdo */
}
/* Marcador de hito ◇ al inicio de cada "Próximo control" (2026-05-28). Linear
   pone diamantes de milestone en su roadmap; acá marca el próximo control
   clínico — semántica real del care-path, no decoración cargo-cult. */
.chapter-roadmap-bar--ghost::before {
  content: '';
  position: absolute;
  left: -5px;
  top: 50%;
  width: 8px;
  height: 8px;
  transform: translateY(-50%) rotate(45deg);
  background: var(--accent);
  border-radius: 4px;
}
.chapter-roadmap-bar--success {
  background: var(--success-subtle);
  border-color: var(--success);
  color: var(--success);
}
.chapter-roadmap-bar--warning {
  background: var(--warning-subtle);
  border-color: var(--warning);
  color: var(--warning);
}

@media (max-width: 1024px) {
  .chapter-megamenu { grid-template-columns: repeat(2, 1fr); }
  .chapter-roadmap { grid-template-columns: 1fr; }
  .chapter-roadmap-sidebar {
    border-right: none;
    border-bottom: 1px solid var(--border);
  }
}
@media (max-width: 640px) {
  .chapter-megamenu { grid-template-columns: 1fr; padding: 16px; }
  .chapter-roadmap-canvas { padding: 12px 16px 20px; }
  .chapter-roadmap-canvas__months { grid-template-columns: repeat(4, 1fr); }
  .chapter-roadmap-row__track { grid-template-columns: repeat(4, 1fr); }
}

/* ═══════════════════════════════════════════════════════════════
   CHAPTER 4.0 · Equipo + Velandra IA · Triage WhatsApp (2026-05-22)
   Adaptación literal del screenshot Linear "Move work forward across
   teams and agents" (chapter 3.0 Build de Linear):
   - 2-col header (H2 izq + sub+chapter-index der)
   - Single mega-card con task log (izq) + popover assignee picker (der)
   - El popover ES floating layer → permitido --shadow-floating (DESIGN.md §4)
   ═══════════════════════════════════════════════════════════════ */
.chapter-board {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  position: relative;
  min-height: 460px;
}
.chapter-board__chrome {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 20px;
  border-bottom: 1px solid var(--border);
}
.chapter-board__avatar {
  width: 26px;
  height: 26px;
  border-radius: var(--radius-pill);
  background: var(--accent-subtle);
  color: var(--accent-text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.chapter-board__avatar svg { width: 14px; height: 14px; }
.chapter-board__title {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: -0.005em;
}
.chapter-board__menu {
  margin-left: auto;
  color: var(--text-tertiary);
  display: inline-flex;
  align-items: center;
  padding: 4px;
  border-radius: var(--radius-sm);
  cursor: default;
}
.chapter-board__menu svg { width: 16px; height: 16px; }

/* ── body · task log ── */
.chapter-board__body {
  padding: 24px 28px 32px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 520px;
}
.chapter-board__line {
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--text-primary);
  margin: 0;
}
.chapter-board__line--muted { color: var(--text-secondary); }
.chapter-board__line code,
.chapter-board__code-inline {
  font-family: 'JetBrains Mono', 'Fira Code', ui-monospace, monospace;
  font-size: 0.75rem;
  padding: 4px 6px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--accent-text);
}
.chapter-board__codeblock {
  font-family: 'JetBrains Mono', 'Fira Code', ui-monospace, monospace;
  font-size: 0.75rem;
  line-height: 1.5;
  padding: 12px 12px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  white-space: pre;
  overflow-x: auto;
  margin: 0;
}
.chapter-board__codeblock-prompt { color: var(--accent-text); }
.chapter-board__codeblock-output { color: var(--text-primary); }
.chapter-board__thinking {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--text-tertiary);
  font-size: 0.875rem;
  margin-top: 4px;
}
.chapter-board__thinking-dots {
  width: 14px;
  height: 14px;
  display: inline-grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
}
.chapter-board__thinking-dots span {
  width: 3px;
  height: 3px;
  border-radius: var(--radius-pill);
  background: var(--text-tertiary);
  align-self: center;
  justify-self: center;
}

/* ── popover · assignee picker (floating layer · --shadow-floating permitido §4) ── */
.chapter-board__picker {
  position: absolute;
  top: 70px;
  right: 32px;
  width: 340px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-floating);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 2;
}
.chapter-board__picker-input {
  display: block;
  width: 100%;
  padding: 8px 12px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  font-family: inherit;
  font-size: 0.875rem;
  outline: none;
}
.chapter-board__picker-input:focus {
  border-color: var(--accent);
  color: var(--text-primary);
}
.chapter-board__picker-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.chapter-board__picker-item {
  display: grid;
  grid-template-columns: 26px 1fr auto auto;
  gap: 10px;
  align-items: center;
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  font-size: 0.875rem;
  color: var(--text-primary);
  cursor: default;
  transition: background var(--transition);
}
.chapter-board__picker-item:hover {
  background: var(--bg-surface);
}
.chapter-board__picker-item.is-selected {
  background: var(--bg-surface);
}
.chapter-board__picker-avatar {
  width: 24px;
  height: 24px;
  border-radius: var(--radius-pill);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--text-primary);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  flex-shrink: 0;
  overflow: hidden;
}
.chapter-board__picker-avatar--agent {
  background: var(--accent-subtle);
  color: var(--accent-text);
  border-color: var(--accent);
}
.chapter-board__picker-avatar--agent svg { width: 13px; height: 13px; }
.chapter-board__picker-name {
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--text-primary);
}
.chapter-board__picker-badge {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-secondary);
  padding: 4px 6px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-weight: 500;
}
.chapter-board__picker-check {
  color: var(--accent-text);
  width: 16px;
  height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
}
.chapter-board__picker-item.is-selected .chapter-board__picker-check {
  opacity: 1;
}
.chapter-board__picker-check svg { width: 14px; height: 14px; }

@media (max-width: 1024px) {
  .chapter-board { min-height: auto; }
  .chapter-board__body { max-width: 100%; padding-right: 24px; }
  .chapter-board__picker {
    position: relative;
    top: 0;
    right: 0;
    width: auto;
    margin: 0 20px 24px;
  }
}
@media (max-width: 640px) {
  .chapter-board__body { padding: 16px 16px 24px; }
  .chapter-board__picker { margin: 0 12px 16px; padding: 10px; }
}

/* ═══════════════════════════════════════════════════════════════
   CHAPTER 5.0 · Revisión · Diff SOAP IA vs MD firmada (2026-05-22)
   Adaptación literal del screenshot Linear "Review PRs and agent output":
   - 2-col header (H2 izq + sub+chapter-index der)
   - Single mega-card: chrome (path mono + selector) + body grid 2-col
     con line numbers + líneas con highlight removed (danger) / added (success)
   - Equivalente clínico: izq = borrador IA, der = nota firmada por MD
   ═══════════════════════════════════════════════════════════════ */
.chapter-diff {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  font-family: 'JetBrains Mono', 'Fira Code', ui-monospace, monospace;
}
.chapter-diff__chrome {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
}
.chapter-diff__chrome-icon {
  display: inline-flex;
  align-items: center;
  color: var(--text-tertiary);
}
.chapter-diff__chrome-icon svg { width: 15px; height: 15px; }
.chapter-diff__path {
  font-size: 0.75rem;
  color: var(--text-secondary);
  letter-spacing: 0;
}
.chapter-diff__path strong {
  color: var(--text-primary);
  font-weight: 500;
}
.chapter-diff__selector {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  font-size: 0.75rem;
  letter-spacing: 0.02em;
  cursor: default;
}
.chapter-diff__selector svg { width: 11px; height: 11px; }

.chapter-diff__body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  font-size: 0.75rem;
  line-height: 1.6;
}
.chapter-diff__pane {
  padding: 12px 0;
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
}
.chapter-diff__pane:last-child {
  border-right: none;
}
.chapter-diff__pane-label {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  font-weight: 600;
  padding: 6px 16px 12px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 8px;
}
.chapter-diff__pane-label strong {
  color: var(--text-primary);
  font-weight: 600;
}
.chapter-diff__line {
  display: grid;
  grid-template-columns: 40px 1fr;
  align-items: baseline;
  padding: 4px 12px 4px 0;
  position: relative;
}
.chapter-diff__line-num {
  font-size: 0.6875rem;
  color: var(--text-muted);
  padding: 0 10px 0 12px;
  text-align: right;
  user-select: none;
}
.chapter-diff__line-content {
  color: var(--text-primary);
  white-space: pre-wrap;
  word-break: break-word;
}
.chapter-diff__line--removed {
  background: var(--danger-subtle);
}
.chapter-diff__line--removed .chapter-diff__line-num { color: var(--danger); }
.chapter-diff__line--added {
  background: var(--success-subtle);
}
.chapter-diff__line--added .chapter-diff__line-num { color: var(--success); }

/* clinical syntax · semantic colored tokens */
.chapter-diff__section-label {
  color: var(--text-tertiary);
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.chapter-diff__cie {
  color: var(--accent-text);
  font-weight: 500;
}
.chapter-diff__med {
  color: var(--text-primary);
  font-weight: 500;
}
.chapter-diff__num {
  color: var(--warning);
}
.chapter-diff__string {
  color: var(--success);
}

@media (max-width: 900px) {
  .chapter-diff__body { grid-template-columns: 1fr; }
  .chapter-diff__pane { border-right: none; border-bottom: 1px solid var(--border); }
  .chapter-diff__pane:last-child { border-bottom: none; }
}
@media (max-width: 640px) {
  .chapter-diff__chrome { flex-wrap: wrap; padding: 10px 12px; }
  .chapter-diff__path { font-size: 0.75rem; }
  .chapter-diff__line { grid-template-columns: 32px 1fr; }
  .chapter-diff__line-num { padding: 0 6px 0 10px; }
  .chapter-diff__body { font-size: 0.75rem; }
}

/* ═══════════════════════════════════════════════════════════════
   CHANGELOG · Release timeline horizontal (2026-05-22)
   Adaptación literal del screenshot Linear "Changelog":
   - H2 grande solo (sin sub paragraph, sin chapter index)
   - Timeline horizontal con 4 dots equidistantes
     · Dot #1 (más reciente): --danger (active)
     · Dots #2-4: --border-strong (past)
   - Grid 4 cols con items flat (title + body 3-line clamp + date mono)
   - Bottom link "Ver todo →"
   ═══════════════════════════════════════════════════════════════ */
.changelog {
  background: var(--bg-page);
  color: var(--text-primary);
  padding: 140px 5vw 160px;
}
.changelog-inner {
  max-width: 1280px;
  margin: 0 auto;
}
.changelog-title {
  font-family: 'Inter Tight', 'Inter', system-ui, sans-serif;
  font-size: clamp(2.5rem, 5vw, 4.5rem);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1;
  color: var(--text-primary);
  margin: 0 0 96px;
}
.changelog-track {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin-bottom: 36px;
  align-items: center;
}
.changelog-line {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--border);
  transform: translateY(-50%);
  z-index: 0;
}
.changelog-dot {
  width: 12px;
  height: 12px;
  border-radius: var(--radius-pill);
  background: var(--bg-elevated);
  border: 1px solid var(--border-strong);
  position: relative;
  z-index: 1;
  justify-self: start;
}
.changelog-dot--active {
  background: var(--danger);
  border-color: var(--danger);
}
.changelog-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
}
.changelog-item {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-right: 12px;
}
.changelog-item-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: -0.01em;
  margin: 0;
  line-height: 1.3;
}
.changelog-item-body {
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--text-secondary);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.changelog-item-date {
  font-family: 'JetBrains Mono', 'Fira Code', ui-monospace, monospace;
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin-top: auto;
  padding-top: 8px;
}
.changelog-viewall {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.875rem;
  color: var(--text-secondary);
  text-decoration: none;
  margin-top: 64px;
  transition: color var(--transition);
}
.changelog-viewall:hover { color: var(--text-primary); }
.changelog-viewall svg { width: 14px; height: 14px; }

@media (max-width: 1024px) {
  .changelog { padding: 100px 5vw 120px; }
  .changelog-title { margin-bottom: 72px; }
  .changelog-track { grid-template-columns: repeat(2, 1fr); }
  .changelog-grid { grid-template-columns: repeat(2, 1fr); gap: 32px; }
}
@media (max-width: 640px) {
  .changelog { padding: 80px 5vw 88px; }
  .changelog-title { font-size: clamp(2rem, 8vw, 2.5rem); margin-bottom: 56px; }
  .changelog-track { grid-template-columns: 1fr; }
  .changelog-grid { grid-template-columns: 1fr; gap: 24px; }
  .changelog-viewall { margin-top: 40px; }
}

/* ═══════════════════════════════════════════════════════════════
   TESTIMONIALS · 2 cards quote + stat line (2026-05-22)
   Adaptación literal del screenshot Linear customer-stories:
   - 2 cards 50/50 con bg distintos por card (gradient + solid lime)
   - Quote grande arriba + avatar/nombre/role bottom-left
   - Watermark logo opcional en bg de una card
   - Below: stat sentence + "Customer stories →" link
   DESIGN.md §7 exception: gradientes permitidos en estas cards (founder
   unseal 2026-05-22 para match literal Linear customer-stories).
   Texto oscuro sobre cards claras: usa `--text-inverse` (token existente).
   ═══════════════════════════════════════════════════════════════ */
.testimonials {
  background: var(--bg-page);
  /* megacommit 24+ · pad-bot 80→160 uniformidad */
  padding: 140px 5vw 160px;
}
.testimonials-inner {
  max-width: 1280px;
  margin: 0 auto;
}
.testimonials-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.testimonial-card {
  position: relative;
  border-radius: var(--radius-md);
  padding: 40px 44px 36px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 380px;
  overflow: hidden;
  color: var(--text-inverse);
}
/* Card #1 · gradient azul → lavanda (matching Linear OpenAI card) */
.testimonial-card--blue {
  background: linear-gradient(135deg, #DCE6F8 0%, #E4D9F2 100%);
}
/* Card #2 · solid accent lavanda · on-brand (2026-05-28) · reemplaza el lima
   off-brand (era el color de Ramp, no de Velandra). Par light(card1) +
   accent(card2) → variedad dentro de la marca. Texto claro via --text-on-accent. */
.testimonial-card--accent {
  background: var(--accent);
  color: var(--text-on-accent);
}
.testimonial-card--accent .testimonial-card__name {
  color: var(--text-on-accent);
}
.testimonial-card--accent .testimonial-card__role {
  /* blanco pleno: white@80% sobre accent da ~3.66:1 (bajo AA); jerarquía via
     tamaño/peso (role 13px/400 vs name 15px/600). */
  color: var(--text-on-accent);
}
.testimonial-card--accent .testimonial-card__avatar {
  background: var(--text-on-accent);
  color: var(--accent);
}
/* Fix contraste de quotes (2026-05-28): la regla global
   `body.landing-body section p:not(.hero-sub):not(.foot-tagline)` (especificidad
   0,3,3) pisaba el color de los quotes (son <p>), dejándolos en --text-secondary
   (gris, contraste bajo) en AMBAS cards. Prefijo body.landing-body para llegar a
   0,4,1 (4 clases > 3) y restaurar el color intencional por card. */
body.landing-body .testimonials .testimonial-card .testimonial-card__quote {
  color: var(--text-inverse);
}
body.landing-body .testimonials .testimonial-card--accent .testimonial-card__quote {
  color: var(--text-on-accent);
}
/* Watermark logo opcional como decoración bg (V08-A mark grande, faded) */
.testimonial-card__watermark {
  position: absolute;
  /* Brand stamp en esquina inf-derecha, sangrando fuera (2026-05-28). Antes:
     centrado 60% op .18 -> dominaba el centro y competía con la cita. Ahora
     sutil, decorativo, simétrico en ambas cards. */
  right: -6%;
  bottom: -9%;
  width: 42%;
  max-width: 220px;
  opacity: 0.1;
  pointer-events: none;
  color: var(--text-inverse);
}
.testimonial-card__watermark svg { width: 100%; height: auto; display: block; }
/* en la card accent el stamp va claro sobre lavanda */
.testimonial-card--accent .testimonial-card__watermark {
  color: var(--text-on-accent);
  opacity: 0.14;
}
.testimonial-card__quote {
  position: relative;
  font-family: 'Inter Tight', 'Inter', system-ui, sans-serif;
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.018em;
  color: var(--text-inverse);
  margin: 0;
  text-wrap: balance;
}
.testimonial-card__attribution {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 40px;
}
.testimonial-card__avatar {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-pill);
  background: var(--text-inverse);
  color: var(--bg-page);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  flex-shrink: 0;
}
.testimonial-card__avatar svg { width: 20px; height: 20px; }
.testimonial-card__person {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.testimonial-card__name {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-inverse);
  letter-spacing: -0.005em;
}
.testimonial-card__role {
  font-size: 0.75rem;
  color: rgba(10, 10, 14, 0.6);
}

/* stat line below cards */
.testimonials-foot {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 24px;
  margin-top: 32px;
  padding: 0 4px;
}
.testimonials-stat {
  font-size: 0.875rem;
  color: var(--text-secondary);
  margin: 0;
}
.testimonials-stat strong {
  color: var(--text-primary);
  font-weight: 600;
}
.testimonials-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.875rem;
  color: var(--text-secondary);
  text-decoration: none;
  transition: color var(--transition);
  white-space: nowrap;
}
.testimonials-link:hover { color: var(--text-primary); }
.testimonials-link svg { width: 14px; height: 14px; }

@media (max-width: 900px) {
  .testimonials { padding: 100px 5vw 60px; }
  .testimonials-grid { grid-template-columns: 1fr; }
  .testimonial-card { min-height: 320px; padding: 32px 32px 28px; }
}
@media (max-width: 640px) {
  .testimonials { padding: 72px 5vw 48px; }
  .testimonial-card { padding: 28px 24px 24px; min-height: 280px; }
  .testimonial-card__quote { font-size: clamp(1.25rem, 5vw, 1.6rem); }
  .testimonials-foot { flex-direction: column; align-items: flex-start; gap: 16px; }
}

/* ═══════════════════════════════════════════════════════════════
   CTA FINALE · Cierre minimal Linear-mirror (2026-05-22)
   Adaptación literal del screenshot Linear "Built for the future":
   - H2 centrado multi-line, white
   - 2 botones pill horizontal: light primary + dark secondary
   - Sin form, sin sub paragraph, sin trust badges — sustracción radical
   - Va al final del landing, después del #cta detallado, antes del footer
   ═══════════════════════════════════════════════════════════════ */
.cta-finale {
  background: var(--bg-page);
  color: var(--text-primary);
  padding: 160px 5vw 200px;
  text-align: center;
}
.cta-finale__inner {
  max-width: 920px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 48px;
}
.cta-finale__title {
  font-family: 'Inter Tight', 'Inter', system-ui, sans-serif;
  font-size: clamp(2.5rem, 5.5vw, 4.5rem);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1.05;
  color: var(--text-primary);
  margin: 0;
}
.cta-finale__actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
}
.cta-finale__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 28px;
  border-radius: var(--radius-pill);
  font-family: inherit;
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: -0.005em;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
  white-space: nowrap;
}
.cta-finale__btn--light {
  background: var(--text-primary);
  color: var(--text-inverse);
  border-color: var(--text-primary);
}
.cta-finale__btn--light:hover {
  background: var(--text-secondary);
  border-color: var(--text-secondary);
}
.cta-finale__btn--dark {
  background: var(--bg-elevated);
  color: var(--text-primary);
  border-color: var(--border-strong);
}
.cta-finale__btn--dark:hover {
  background: var(--bg-surface);
  border-color: var(--text-tertiary);
}

@media (max-width: 640px) {
  .cta-finale { padding: 100px 5vw 120px; }
  .cta-finale__inner { gap: 36px; }
  .cta-finale__title { font-size: clamp(2rem, 8vw, 2.75rem); }
  .cta-finale__btn { padding: 10px 20px; font-size: 0.875rem; }
}

/* ═══════════════════════════════════════════════════════════════
   CHAPTER 5.0 · Monitor (re-applied post-rollback · 2026-05-23)
   Mirror del Linear "5.0 Monitor · Understand progress at scale"
   ═══════════════════════════════════════════════════════════════ */
.chapter-monitor-stack { display: flex; flex-direction: column; gap: 16px; }
.chapter-monitor-card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 20px 24px 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.chapter-monitor-card__head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.chapter-monitor-card__label { font-size: 0.875rem; font-weight: 600; color: var(--text-primary); letter-spacing: -0.005em; }
.chapter-monitor-card__meta { font-family: 'JetBrains Mono', 'Fira Code', ui-monospace, monospace; font-size: 0.6875rem; color: var(--text-tertiary); letter-spacing: 0.06em; text-transform: uppercase; }
.chapter-monitor-chart--line { position: relative; height: 160px; color: var(--text-primary); display: flex; flex-direction: column; gap: 8px; }
.chapter-monitor-chart--line svg { width: 100%; flex: 1; display: block; }
.chapter-monitor-chart__axis-x { display: flex; justify-content: space-between; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 0.6875rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-tertiary); }
.chapter-monitor-bars { display: flex; flex-direction: column; gap: 12px; }
.chapter-monitor-bar { display: grid; grid-template-columns: 130px 1fr 80px; gap: 16px; align-items: center; }
.chapter-monitor-bar__label { font-size: 0.75rem; color: var(--text-secondary); text-align: right; }
.chapter-monitor-bar__track { height: 8px; background: var(--bg-elevated); border-radius: var(--radius-pill); overflow: hidden; }
.chapter-monitor-bar__fill { height: 100%; background: var(--accent); border-radius: var(--radius-pill); }
.chapter-monitor-bar__fill--muted { background: var(--border-strong); }
.chapter-monitor-bar__value { font-family: 'JetBrains Mono', 'Fira Code', ui-monospace, monospace; font-size: 0.75rem; font-weight: 600; color: var(--text-primary); text-align: right; white-space: nowrap; }
.chapter-monitor-pulse { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.chapter-monitor-pulse__play {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 8px 16px;
  background: var(--accent-subtle); color: var(--accent-text);
  border: 1px solid var(--accent); border-radius: var(--radius-pill);
  font-family: inherit; font-size: 0.75rem; font-weight: 500;
  cursor: pointer; transition: background var(--transition);
  flex-shrink: 0; letter-spacing: -0.005em;
}
.chapter-monitor-pulse__play:hover { background: var(--accent); color: var(--text-primary); }
.chapter-monitor-pulse__play svg { width: 10px; height: 10px; }
.chapter-monitor-pulse__text { font-size: 0.875rem; color: var(--text-primary); margin: 0; line-height: 1.55; flex: 1 1 280px; min-width: 0; }
.chapter-monitor-status-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.chapter-monitor-status {
  background: var(--bg-surface); border: 1px solid var(--border);
  border-radius: var(--radius-md); padding: 20px 20px 20px;
  display: flex; flex-direction: column; gap: 10px;
}
.chapter-monitor-status__label { font-family: 'JetBrains Mono', 'Fira Code', ui-monospace, monospace; font-size: 0.6875rem; color: var(--text-tertiary); letter-spacing: 0.1em; text-transform: uppercase; font-weight: 500; }
.chapter-monitor-status__body { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.chapter-monitor-status__value { font-family: 'Inter Tight', 'Inter', system-ui, sans-serif; font-size: 1.75rem; font-weight: 600; letter-spacing: -0.02em; color: var(--text-primary); line-height: 1; }
.chapter-monitor-status__badge { font-family: 'JetBrains Mono', 'Fira Code', ui-monospace, monospace; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; padding: 4px 10px; border-radius: var(--radius-sm); }
.chapter-monitor-status--warn .chapter-monitor-status__badge { background: var(--warning-subtle); color: var(--warning); }
.chapter-monitor-status--success .chapter-monitor-status__badge { background: var(--success-subtle); color: var(--success); }
.chapter-monitor-status__hint { font-size: 0.75rem; color: var(--text-tertiary); }
@media (max-width: 760px) {
  .chapter-monitor-status-row { grid-template-columns: 1fr; }
  .chapter-monitor-bar { grid-template-columns: 100px 1fr 60px; gap: 10px; }
  .chapter-monitor-card { padding: 16px 16px; }
  .chapter-monitor-card__head { flex-direction: column; align-items: flex-start; gap: 4px; }
}