/* =========================================================
       TOKENS · Modo claro (valores idénticos al original)
       ========================================================= */
    :root,
    [data-bs-theme="light"]{
      --ink:#252427;
      --muted:#6d6870;
      --lead:#4f4b51;
      --paper:#fbfaf8;
      --panel:#ffffff;
      --alt:#ffffff;
      --line:#e7e2df;
      --accent:#c8a0aa;
      --accent-soft:#f3e8eb;
      --blue-soft:#e2f2fb;
      --blue:#8bc9e8;
      --dark:#312f32;
      --dark-ink:#ffffff;
      --dark-muted:#d6d0d4;
      --num-bg:#f3e8eb;
      --num-ink:#312f32;
      --prompt-bg:#1f1e21;
      --prompt-border:transparent;
      --band-border:#eadfe4;
      --nav-bg:rgba(251,250,248,.92);
      --shadow-card:0 10px 30px rgba(37,36,39,.04);
      --shadow-img:0 16px 40px rgba(37,36,39,.07);
      --focus:#8a5a67;
    }

    /* =========================================================
       TOKENS · Modo oscuro (misma familia cromática)
       ========================================================= */
    [data-bs-theme="dark"]{
      --ink:#f1eef0;
      --muted:#b6afb5;
      --lead:#d6d0d4;
      --paper:#1b1a1d;
      --panel:#28262a;
      --alt:#222024;
      --line:#3a373c;
      --accent:#d9b3bd;
      --accent-soft:#3f3137;
      --blue-soft:#22343f;
      --blue:#8bc9e8;
      --dark:#121114;
      --dark-ink:#f6f3f5;
      --dark-muted:#cfc8cd;
      --num-bg:#3f3137;
      --num-ink:#f6f3f5;
      --prompt-bg:#121114;
      --prompt-border:#3a373c;
      --band-border:#4a3d43;
      --nav-bg:rgba(27,26,29,.9);
      --shadow-card:0 10px 30px rgba(0,0,0,.25);
      --shadow-img:0 16px 40px rgba(0,0,0,.35);
      --focus:#e7c3cc;
    }

    /* =========================================================
       BASE
       ========================================================= */
    html{scroll-behavior:smooth}
    [id]{scroll-margin-top:5rem}
    body{
      margin:0;
      color:var(--ink);
      background:var(--paper);
      font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      line-height:1.6;
      -webkit-text-size-adjust:100%;
      text-size-adjust:100%;
    }
    a{color:inherit}
    img{max-width:100%}

    :focus-visible{
      outline:3px solid var(--focus);
      outline-offset:3px;
      border-radius:.35rem;
    }
    .skip-link{
      position:fixed; top:.75rem; left:.75rem; z-index:2000;
      background:var(--ink); color:var(--paper);
      padding:.6rem 1rem; border-radius:.6rem; text-decoration:none; font-weight:700;
    }

    /* =========================================================
       NAVBAR
       ========================================================= */
    .navbar{
      background:var(--nav-bg)!important;
      -webkit-backdrop-filter:blur(10px);
      backdrop-filter:blur(10px);
      border-bottom:1px solid var(--line);
    }
    .navbar-brand{
      font-weight:800;
      letter-spacing:-.02em;
      color:var(--ink);
      min-width:0;
      overflow:hidden;
      text-overflow:ellipsis;
    }
    .navbar-brand:hover,.navbar-brand:focus{color:var(--ink)}
    .nav-link{font-size:.95rem; color:var(--muted)}
    .navbar .nav-link:hover,
    .navbar .nav-link:focus-visible,
    .navbar .nav-link.active{color:var(--ink)}
    .navbar .nav-link.active{font-weight:700}

    .nav-controls{gap:.5rem}
    .theme-toggle,
    .navbar-toggler{
      width:2.75rem; height:2.75rem;          /* área táctil 44px */
      display:inline-grid; place-items:center;
      padding:0;
      border:1px solid var(--line);
      border-radius:.75rem;
      background:transparent;
      color:var(--ink);
    }
    .theme-toggle:hover,.navbar-toggler:hover{background:var(--accent-soft)}
    .navbar-toggler:focus{box-shadow:none}
    .theme-toggle svg{width:1.2rem; height:1.2rem}
    .theme-toggle .icon-sun{display:none}
    [data-bs-theme="dark"] .theme-toggle .icon-sun{display:block}
    [data-bs-theme="dark"] .theme-toggle .icon-moon{display:none}

    /* =========================================================
       HERO
       ========================================================= */
    .hero{
      min-height:88vh;
      display:flex;
      align-items:center;
      padding:8rem 0 5rem;
      position:relative;
      overflow:hidden;
    }
    .hero::after{
      content:"";
      position:absolute;
      width:34rem;
      height:34rem;
      border-radius:50%;
      background:radial-gradient(circle,
        var(--accent-soft) 0,
        color-mix(in srgb, var(--accent-soft) 60%, transparent) 35%,
        transparent 70%);
      right:-10rem;
      top:6rem;
      pointer-events:none;
      z-index:0;
    }
    .hero > .container{z-index:1}   /* el halo decorativo no tapa el texto */
    .eyebrow{
      font-size:.82rem;
      text-transform:uppercase;
      letter-spacing:.14em;
      font-weight:800;
      color:var(--muted);
    }
    h1,h2,h3{letter-spacing:-.035em; overflow-wrap:break-word}
    h1{font-size:clamp(3rem, 7vw, 6.5rem); line-height:.93; font-weight:850; max-width:12ch}
    h2{font-size:clamp(2rem, 4vw, 3.4rem); font-weight:800}
    h3{font-size:1.25rem; font-weight:750}
    .lead{font-size:clamp(1.1rem, 2vw, 1.4rem); max-width:58ch; color:var(--lead)}

    /* =========================================================
       SECCIONES Y COMPONENTES
       ========================================================= */
    .section{padding:6rem 0}
    .section-alt{background:var(--alt)}
    .section-dark{background:var(--dark); color:var(--dark-ink)}
    .section-dark .text-secondary{color:var(--dark-muted)!important}

    .num{
      width:2.2rem;height:2.2rem;border-radius:50%;
      display:inline-grid;place-items:center;
      flex-shrink:0;
      background:var(--num-bg);color:var(--num-ink);font-weight:800;
      margin-right:.6rem;
      letter-spacing:0;
    }
    .card-clean{
      border:1px solid var(--line);
      border-radius:1.25rem;
      padding:1.5rem;
      height:100%;
      background:var(--panel);
      box-shadow:var(--shadow-card);
      overflow-wrap:break-word;
    }
    .card-compact{padding:1.25rem 1.1rem}
    .card-clean p:last-child{margin-bottom:0}
    .step-card{display:flex; align-items:center}

    .pill{
      display:inline-block;
      padding:.4rem .7rem;
      border-radius:999px;
      background:var(--accent-soft);
      color:var(--ink);
      font-weight:700;
      font-size:.85rem;
    }
    .quote{
      border-left:4px solid var(--accent);
      padding-left:1.25rem;
      font-size:1.2rem;
      font-weight:650;
    }
    .flow-step{
      border-top:3px solid var(--accent);
      padding-top:1rem;
      height:100%;
    }
    .prompt{
      background:var(--prompt-bg);
      color:#f8f7f7;
      border:1px solid var(--prompt-border);
      border-radius:1rem;
      padding:1.4rem;
      overflow:auto;
      font-size:.93rem;
      box-shadow:0 14px 35px rgba(0,0,0,.12);
      margin:0;
    }
    .prompt code{white-space:pre-wrap; overflow-wrap:anywhere}

    /* =========================================================
       BOTÓN "VER PROMPT" + MODAL DEL PROMPT
       ========================================================= */
    .prompt-actions{
      display:flex; flex-wrap:wrap; align-items:center;
      gap:.75rem 1rem; margin-top:1.25rem;
    }
    .prompt-actions .hint{color:var(--muted); font-size:.92rem; margin:0}
    .btn-prompt{
      display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
      min-height:2.75rem; padding:.65rem 1.25rem;
      border:1px solid var(--ink); border-radius:999px;
      background:var(--ink); color:var(--paper);
      font-weight:700; line-height:1.2; text-decoration:none;
      transition:background-color .15s ease, color .15s ease, border-color .15s ease;
    }
    .btn-prompt:hover{background:transparent; color:var(--ink)}
    .btn-prompt svg{width:1.1rem; height:1.1rem; flex-shrink:0}
    .btn-prompt-ghost{background:transparent; color:var(--ink); border-color:var(--line)}
    .btn-prompt-ghost:hover{background:var(--accent-soft); border-color:var(--accent-soft)}
    .btn-prompt .icon-check{display:none}
    .btn-prompt.is-copied .icon-copy{display:none}
    .btn-prompt.is-copied .icon-check{display:block}

    .prompt-modal .modal-content{
      background:var(--paper); color:var(--ink);
      border:1px solid var(--line); border-radius:1.25rem;
    }
    .prompt-modal .modal-header,
    .prompt-modal .modal-footer{border-color:var(--line); gap:.75rem}
    .prompt-modal .modal-title{font-size:1.35rem; font-weight:800; letter-spacing:-.03em}
    .prompt-modal .modal-subtitle{color:var(--muted); font-size:.95rem; margin:.25rem 0 0}
    .prompt-modal .btn-close{min-width:2.75rem; min-height:2.75rem; background-size:.9rem}
    .prompt-full{
      background:var(--prompt-bg); color:#f8f7f7;
      border:1px solid var(--prompt-border);
      border-radius:1rem; padding:1.25rem;
      font-size:.86rem; line-height:1.65;
      white-space:pre-wrap; overflow-wrap:anywhere;
      margin:0;
    }
    .copy-status{margin:0 auto 0 0; font-size:.92rem; color:var(--muted)}
    .copy-status.is-error{color:var(--ink); font-weight:600}

    .checklist{
      list-style:none;
      padding-left:0;
      margin-bottom:0;
    }
    .checklist li{
      padding:.55rem 0 .55rem 2rem;
      position:relative;
      border-bottom:1px solid var(--line);
    }
    .checklist li:last-child{border-bottom:0}
    .checklist li::before{
      content:"✓";
      position:absolute;left:0;top:.6rem;
      width:1.35rem;height:1.35rem;border-radius:50%;
      display:grid;place-items:center;
      background:var(--accent-soft);
      color:var(--ink);
      font-size:.8rem;font-weight:900;
    }

    .child-img{
      background:#fff;                         /* marco claro: el esquema tiene fondo blanco */
      border:1px solid var(--line);
      border-radius:1.25rem;
      padding:1rem;
      box-shadow:var(--shadow-img);
    }
    .child-img img{width:100%;height:auto;display:block;border-radius:.8rem}

    .formula{
      font-size:clamp(1.4rem,3vw,2.2rem);
      font-weight:800;
      letter-spacing:-.03em;
      line-height:1.25;
    }
    .formula .f-part{white-space:nowrap}      /* corta la línea solo entre pasos */

    .cta-band{
      background:linear-gradient(135deg, var(--accent-soft), var(--blue-soft));
      border:1px solid var(--band-border);
      border-radius:1.5rem;
      padding:2rem;
    }
    footer{border-top:1px solid var(--line); padding:2rem 0; color:var(--muted)}

    /* =========================================================
       RESPONSIVE · Tablet y móvil
       ========================================================= */
    @media (max-width: 991.98px){
      .hero{min-height:auto;padding-top:7rem}
      h1{max-width:none}

      .navbar-brand{flex:1 1 0; margin-right:.5rem}  /* evita que los botones bajen de línea */
      .navbar-collapse{
        border-top:1px solid var(--line);
        margin-top:.75rem;
        padding:.25rem 0 .5rem;
      }
      .navbar-nav .nav-link{
        padding:.75rem .25rem;
        min-height:2.75rem;
        font-size:1rem;
        border-bottom:1px solid var(--line);
      }
      .navbar-nav .nav-item:last-child .nav-link{border-bottom:0}
      .navbar .nav-link.active{box-shadow:inset 3px 0 0 var(--accent); padding-left:.85rem}

      .section{padding:4.5rem 0}
    }

    @media (max-width: 767.98px){
      .hero{padding:6.5rem 0 3.5rem}
      .hero::after{width:20rem;height:20rem;right:-9rem;top:3rem}
      .section{padding:3.5rem 0}
      .card-clean{padding:1.25rem}
      .cta-band{padding:1.5rem;border-radius:1.25rem}
      .quote{font-size:1.08rem}
      .prompt{font-size:.85rem;padding:1.1rem}
      .prompt-modal .modal-content{border-radius:0}
      .prompt-full{font-size:.82rem; padding:1rem}
      footer{padding:1.5rem 0;font-size:.92rem}
    }

    @media (max-width: 575.98px){
      .navbar-brand{font-size:clamp(1rem, 4.4vw, 1.25rem)}
      h1{font-size:clamp(2.4rem, 11vw, 3rem); line-height:.98}
      h2{font-size:clamp(1.65rem, 7.2vw, 2rem); line-height:1.15}
      h3{font-size:1.15rem}
      .eyebrow{font-size:.76rem;letter-spacing:.12em}
      .formula{font-size:1.3rem}
      .flow-step h3{font-size:1.1rem}
      .flow-step p{font-size:.95rem}
      .prompt-actions .btn-prompt{width:100%}
      .prompt-modal .modal-footer{flex-direction:column-reverse; align-items:stretch}
      .prompt-modal .modal-footer .btn-prompt{width:100%; margin:0}
      .copy-status{margin:0; text-align:center}
    }

    @media (prefers-reduced-motion: reduce){
      html{scroll-behavior:auto}
      *,*::before,*::after{transition:none!important;animation:none!important}
    }