:root {
    --ground: #f4f6f9;
    --surface: #ffffff;
    --surface-2: #eef2f7;
    --border: #e2e8f0;
    --hair: #d4dde8;
    --ink: #0d1b2a;
    --ink-soft: #3f4b5b;
    --muted: #6b7a8d;
    --accent: #2563eb;
    --accent-ink: #1d4ed8;
    --growth: #059669;
    --danger: #dc2626;
    --capital: #c3f550;
    --capital-ink: #11150c;
    --capital-text: #4d7a0a;
    --ruta: #d97706;
    --shadow: 0 1px 2px rgba(13,27,42,.05), 0 12px 32px -20px rgba(13,27,42,.22);
  }
  @media (prefers-color-scheme: dark) {
    :root {
      --ground: #0a0f18;
      --surface: #0f1826;
      --surface-2: #131f30;
      --border: #1f2b3d;
      --hair: #24324a;
      --ink: #eef2f7;
      --ink-soft: #c0cad7;
      --muted: #8695a8;
      --accent: #3b82f6;
      --accent-ink: #7cb0ff;
      --growth: #34d399;
      --danger: #f87171;
      --capital: #c3f550;
      --capital-ink: #11150c;
      --capital-text: #c3f550;
      --ruta: #fbbf24;
      --shadow: 0 1px 2px rgba(0,0,0,.4), 0 16px 40px -22px rgba(0,0,0,.7);
    }
  }

  * { box-sizing: border-box; }
  html { scroll-behavior: smooth; scroll-padding-top: 76px; }
  @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

  body {
    margin: 0;
    background: var(--ground);
    color: var(--ink);
    font-family: "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
  }

  .wrap { max-width: 1080px; margin: 0 auto; padding: 0 clamp(1.1rem, 4vw, 2rem); }

  h1, h2, h3 {
    font-family: "Poppins", sans-serif;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.1;
    text-wrap: balance;
    margin: 0;
  }

  .mono { font-family: "IBM Plex Mono", ui-monospace, monospace; font-variant-numeric: tabular-nums; }

  .eyebrow {
    font-family: "IBM Plex Mono", monospace;
    font-size: .72rem;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--muted);
  }

  a { color: inherit; }

  /* ---------- Botones ---------- */
  .btn {
    display: inline-flex; align-items: center; gap: .5rem;
    font-family: "Poppins", sans-serif; font-weight: 600; font-size: .92rem;
    padding: .72rem 1.2rem; border-radius: 999px; border: 1px solid transparent; cursor: pointer;
    text-decoration: none; color: #fff;
    transition: transform .18s cubic-bezier(.34,1.56,.64,1), filter .15s ease, box-shadow .18s ease, background-color .15s ease;
  }
  .btn:hover { transform: translateY(-2px); filter: brightness(1.08); }
  .btn:active { transform: translateY(0) scale(.95); filter: brightness(.96); transition-duration: .08s; }
  .btn svg { width: 18px; height: 18px; flex: none; }
  @media (prefers-reduced-motion: reduce) {
    .btn, .btn:hover, .btn:active { transform: none; transition: filter .15s ease; }
  }
  .btn-primary { background: var(--accent); box-shadow: 0 8px 20px -10px color-mix(in srgb, var(--accent) 70%, transparent); }
  .btn-stock   { background: var(--accent); box-shadow: 0 8px 20px -9px color-mix(in srgb, var(--accent) 65%, transparent); }
  .btn-capital { background: var(--capital); color: var(--capital-ink); box-shadow: 0 8px 20px -9px color-mix(in srgb, var(--capital) 65%, transparent); }
  .btn-ruta    { background: var(--ruta); color: #1c1303; box-shadow: 0 8px 20px -9px color-mix(in srgb, var(--ruta) 65%, transparent); }
  .btn-ghost   { background: transparent; color: var(--ink); border-color: var(--hair); }
  .btn-ghost:hover { background: var(--surface); filter: none; }
  .btn-sm { padding: .5rem 1rem; font-size: .84rem; }

  /* ---------- Menú ---------- */
  nav {
    position: sticky; top: 0; z-index: 20;
    background: color-mix(in srgb, var(--ground) 84%, transparent);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--hair);
  }
  nav .wrap { display: flex; align-items: center; justify-content: space-between; height: 62px; gap: 1rem; }
  .brand { display: inline-flex; align-items: center; text-decoration: none; transition: opacity .15s ease; }
  a.brand:hover { opacity: .75; }
  .brand-logo { height: 28px; width: auto; display: block; }
  nav ul { display: flex; gap: 1.5rem; list-style: none; margin: 0; padding: 0; font-size: .9rem; }
  nav ul a { text-decoration: none; color: var(--ink-soft); transition: color .15s ease; }
  nav ul a:hover { color: var(--ink); }
  @media (max-width: 860px) { nav ul { display: none; } }

  .entrar-menu { position: relative; }
  .entrar-menu summary { list-style: none; cursor: pointer; user-select: none; }
  .entrar-menu summary::-webkit-details-marker { display: none; }
  .entrar-menu summary::after { content: ""; width: 7px; height: 7px; margin-left: .15rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform .2s ease; }
  .entrar-menu[open] summary::after { transform: translateY(1px) rotate(-135deg); }
  .entrar-lista {
    position: absolute; right: 0; top: calc(100% + 10px); z-index: 40; min-width: 230px;
    background: var(--surface); border: 1px solid var(--border); border-radius: 18px; padding: .45rem;
    box-shadow: var(--shadow), 0 24px 50px -24px rgba(13,27,42,.45);
    animation: menu-in .18s ease;
  }
  .entrar-lista a { display: block; padding: .65rem .85rem; border-radius: 12px; text-decoration: none; transition: background-color .15s ease; }
  .entrar-lista a:hover { background: var(--surface-2); }
  .entrar-lista b { display: block; font-family: "Poppins", sans-serif; font-size: .92rem; font-weight: 600; }
  .entrar-lista small { display: block; font-size: .78rem; color: var(--muted); }
  @keyframes menu-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
  @media (prefers-reduced-motion: reduce) { .entrar-lista { animation: none; } }

  #top { position: absolute; top: 0; }

  .to-top {
    position: fixed; right: clamp(1rem, 4vw, 2rem); bottom: clamp(1rem, 4vw, 2rem);
    z-index: 30; width: 44px; height: 44px; border-radius: 999px;
    display: grid; place-items: center; cursor: pointer;
    background: var(--accent); color: #fff; border: none;
    box-shadow: 0 10px 24px -10px color-mix(in srgb, var(--accent) 75%, transparent);
    opacity: 0; visibility: hidden; transform: translateY(8px);
    transition: opacity .2s ease, transform .2s ease, visibility .2s ease, filter .15s ease;
  }
  .to-top.show { opacity: 1; visibility: visible; transform: none; }
  .to-top:hover { filter: brightness(1.08); }
  .to-top svg { width: 20px; height: 20px; }
  @media (prefers-reduced-motion: reduce) { .to-top { transition: opacity .2s ease, visibility .2s ease; transform: none; } }

  /* ---------- Portada ---------- */
  .hero { padding: clamp(3rem, 8vw, 6rem) 0 clamp(2.5rem, 6vw, 4rem); }
  .hero-grid { display: grid; gap: clamp(2rem, 5vw, 3.5rem); align-items: center; }
  @media (min-width: 900px) { .hero-grid { grid-template-columns: 1.05fr .95fr; } }
  .hero h1 { font-size: clamp(2.3rem, 6vw, 3.7rem); }
  .hero p.lead { font-size: 1.12rem; color: var(--ink-soft); max-width: 46ch; margin: 1.1rem 0 0; }
  .hero .cta { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.9rem; }
  .hero .note { margin-top: 1rem; font-size: .84rem; color: var(--muted); }

  .pcards { display: grid; gap: .9rem; }
  .pcard {
    display: grid; grid-template-columns: auto 1fr; gap: .4rem 1rem; align-items: center;
    background: var(--surface); border: 1px solid var(--border); border-radius: 20px;
    padding: 1rem 1.2rem; text-decoration: none; box-shadow: var(--shadow);
    transition: transform .2s ease, border-color .2s ease;
  }
  .pcard:hover { transform: translateY(-3px); border-color: var(--hair); }
  .pcard img { width: 52px; height: 52px; border-radius: 14px; display: block; grid-row: span 2; }
  .pcard b { font-family: "Poppins", sans-serif; font-size: 1.02rem; display: block; line-height: 1.2; }
  .pcard .d { font-size: .84rem; color: var(--muted); line-height: 1.3; }
  .pcard .stat {
    grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
    border-top: 1px solid var(--hair); margin-top: .5rem; padding-top: .7rem;
    font-size: .84rem; color: var(--ink-soft);
  }
  .pcard .stat em { font-style: normal; font-family: "IBM Plex Mono", monospace; font-weight: 600; font-size: 1.05rem; color: var(--ink); }
  .pcard.stock .stat em { color: var(--growth); }
  .pcard.ruta .stat em { color: var(--ruta); }
  .pcard.capital .stat em { color: var(--capital-text); }
  .ejemplo { margin-top: .7rem; font-size: .76rem; color: var(--muted); text-align: right; }

  /* ---------- Secciones ---------- */
  section.band { padding: clamp(4rem, 11vw, 7rem) 0; position: relative; }
  section.band::before {
    content: ""; position: absolute; inset: 0 0 auto 0; height: 1px;
    background: var(--hair);
  }
  section.band-alt { background: color-mix(in srgb, var(--surface) 65%, transparent); }
  .sec-eyebrow { margin-bottom: .8rem; }
  .sec-title { font-size: clamp(1.7rem, 4.2vw, 2.4rem); }
  .sec-lead { color: var(--ink-soft); max-width: 58ch; margin: .9rem 0 0; font-size: 1.04rem; }

  /* Tarjetas de programas */
  .progs { display: grid; gap: 1rem; margin-top: 2rem; }
  @media (min-width: 820px) { .progs { grid-template-columns: repeat(3, 1fr); } }
  .prog {
    background: var(--surface); border: 1px solid var(--border); border-radius: 22px; padding: 1.6rem 1.5rem 1.7rem;
    display: flex; flex-direction: column; gap: .7rem; box-shadow: var(--shadow);
  }
  .prog img { width: 60px; height: 60px; border-radius: 16px; display: block; }
  .prog h3 { font-size: 1.2rem; }
  .prog .tag { font-family: "IBM Plex Mono", monospace; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
  .prog p { margin: 0; font-size: .94rem; color: var(--ink-soft); flex: 1; }
  .prog a.mas { font-weight: 600; font-size: .9rem; text-decoration: none; color: var(--accent-ink); }
  .prog a.mas:hover { text-decoration: underline; }

  /* Cabecera de cada programa */
  .prod-head { display: flex; gap: 1.1rem; align-items: center; margin-bottom: 1.4rem; }
  .prod-head img { width: 64px; height: 64px; border-radius: 18px; display: block; flex: none; }
  .prod-head .name { font-family: "Poppins", sans-serif; font-weight: 700; font-size: 1.05rem; }
  .prod-head .what { font-size: .88rem; color: var(--muted); }

  .feat { display: grid; gap: 1px; background: var(--hair); border: 1px solid var(--hair); border-radius: 18px; overflow: hidden; margin-top: 2rem; }
  @media (min-width: 620px) { .feat { grid-template-columns: 1fr 1fr; } }
  @media (min-width: 940px) { .feat { grid-template-columns: repeat(4, 1fr); } .feat.tres { grid-template-columns: repeat(3, 1fr); } }
  .feat article { background: var(--surface); padding: 1.4rem 1.3rem 1.5rem; }
  .feat h3 { font-size: 1rem; font-weight: 600; line-height: 1.25; }
  .feat p { margin: .5rem 0 0; font-size: .88rem; color: var(--ink-soft); }
  .feat .k { display: block; margin-bottom: .45rem; font-family: "IBM Plex Mono", monospace; font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; }
  .stock-sec .feat .k { color: var(--accent-ink); }
  .capital-sec .feat .k { color: var(--capital-text); }
  .ruta-sec .feat .k { color: var(--ruta); }

  /* Ejemplos visuales */
  .duo { display: grid; gap: 1.6rem; margin-top: 2.2rem; align-items: start; }
  @media (min-width: 900px) { .duo { grid-template-columns: 1.1fr .9fr; } }
  .duo .texto h3 { font-size: 1.25rem; }
  .duo .texto p { color: var(--ink-soft); margin: .7rem 0 0; font-size: .96rem; max-width: 50ch; }

  .sheet {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: 20px; padding: clamp(1.2rem, 3vw, 1.8rem); box-shadow: var(--shadow);
  }
  .sheet .t-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-bottom: .6rem; }
  .sheet .t-title { font-family: "Poppins", sans-serif; font-weight: 600; font-size: .98rem; }
  .sheet .t-tag { font-size: .72rem; color: var(--muted); font-family: "IBM Plex Mono", monospace; }
  .line { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: .55rem 0; border-bottom: 1px solid var(--hair); font-size: .94rem; }
  .line span:first-child { color: var(--ink-soft); }
  .line .v { font-family: "IBM Plex Mono", monospace; font-variant-numeric: tabular-nums; }
  .line.res { border-bottom: none; padding-top: .85rem; }
  .line.res span:first-child { color: var(--ink); font-family: "Poppins", sans-serif; font-weight: 600; }
  .line.res .v { font-size: 1.6rem; font-weight: 600; color: var(--growth); }
  .capital-sec .line.res .v { color: var(--capital-text); }
  .chip-mora { display: inline-block; background: var(--danger); color: #fff; font-size: .74rem; font-weight: 600; border-radius: 999px; padding: .1rem .6rem; }
  .sheet .cap { margin: .9rem 0 0; font-size: .78rem; color: var(--muted); }

  /* Celular de ejemplo (Fluxa Ruta) */
  .phone {
    max-width: 320px; background: var(--surface-2); border: 1px solid var(--border);
    border-radius: 34px; padding: .7rem; box-shadow: 0 30px 70px -34px rgba(13,27,42,.45);
  }
  .phone .screen { background: var(--surface); border-radius: 26px; padding: 1.1rem 1rem 1.2rem; border: 1px solid var(--border); }
  .phone .top { display: flex; justify-content: space-between; align-items: center; margin-bottom: .8rem; }
  .phone .top b { font-family: "Poppins", sans-serif; font-size: .95rem; }
  .phone .top span { font-size: .72rem; color: var(--muted); }
  .phone .hoy { background: var(--capital); color: var(--capital-ink); border-radius: 18px; padding: .9rem 1rem; }
  .phone .hoy small { display: block; font-size: .74rem; opacity: .85; }
  .phone .hoy strong { display: block; font-family: "IBM Plex Mono", monospace; font-size: 1.5rem; line-height: 1.2; }
  .phone .cli { display: flex; justify-content: space-between; align-items: center; gap: .6rem; padding: .7rem 0; border-bottom: 1px solid var(--hair); font-size: .88rem; }
  .phone .cli:last-of-type { border-bottom: none; }
  .phone .cli .n { font-weight: 600; }
  .phone .cli .m { text-align: right; font-family: "IBM Plex Mono", monospace; font-size: .86rem; }
  .phone .cli .m .chip-mora { margin-top: .2rem; font-family: "IBM Plex Sans", sans-serif; }
  .phone .barra { margin-top: .8rem; display: flex; justify-content: space-around; background: #16191a; border-radius: 999px; padding: .55rem; }
  .phone .barra i { width: 26px; height: 26px; border-radius: 8px; background: rgba(255,255,255,.28); display: block; }
  .phone .barra i.on { background: var(--capital); }

  /* Cómo se conectan */
  .flujo { display: grid; gap: 1px; background: var(--hair); border: 1px solid var(--hair); border-radius: 18px; overflow: hidden; margin-top: 2.2rem; }
  @media (min-width: 760px) { .flujo { grid-template-columns: repeat(3, 1fr); } }
  .flujo div { background: var(--surface); padding: 1.3rem 1.3rem 1.4rem; }
  .flujo .n { font-family: "IBM Plex Mono", monospace; font-size: .78rem; color: var(--ruta); font-weight: 600; }
  .flujo h3 { font-size: 1rem; margin: .3rem 0 .4rem; font-weight: 600; }
  .flujo p { margin: 0; font-size: .9rem; color: var(--ink-soft); }

  /* Confianza */
  .trust { display: grid; gap: 1px; background: var(--hair); border: 1px solid var(--hair); border-radius: 18px; overflow: hidden; margin-top: 2rem; }
  @media (min-width: 720px) { .trust { grid-template-columns: 1fr 1fr; } }
  @media (min-width: 980px) { .trust { grid-template-columns: repeat(3, 1fr); } }
  .trust div { background: var(--surface); padding: 1.3rem 1.4rem; font-size: .92rem; color: var(--ink-soft); }
  .trust div b { display: block; color: var(--ink); font-family: "Poppins", sans-serif; font-weight: 600; font-size: .98rem; margin-bottom: .3rem; }

  /* Pasos */
  .steps { counter-reset: s; margin-top: 2rem; display: grid; gap: 0; }
  .steps .step { display: grid; grid-template-columns: auto 1fr; gap: 1.1rem; padding: 1.4rem 0; border-bottom: 1px solid var(--hair); }
  .steps .step:first-child { border-top: 1px solid var(--hair); }
  .steps .step .num { counter-increment: s; font-family: "IBM Plex Mono", monospace; font-weight: 600; font-size: .95rem; color: var(--accent); width: 2.2rem; }
  .steps .step .num::before { content: counter(s, decimal-leading-zero); }
  .steps .step h3 { font-size: 1.08rem; font-weight: 600; }
  .steps .step p { margin: .35rem 0 0; color: var(--ink-soft); font-size: .95rem; max-width: 60ch; }
  .acciones { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.8rem; align-items: center; }
  .nota-ruta { margin: .9rem 0 0; font-size: .9rem; color: var(--ink-soft); border-left: 2px solid var(--ruta); padding-left: .9rem; max-width: 50ch; }
  .hero .note a, .nota-cobrador a { color: var(--accent-ink); font-weight: 600; text-decoration: none; }
  .hero .note a:hover, .nota-cobrador a:hover { text-decoration: underline; }
  .contacto-card .btn { align-self: flex-start; }
  .ya-tengo { margin-top: 1.6rem; font-size: .9rem; color: var(--muted); }
  .ya-tengo .acciones { margin-top: .6rem; }
  .nota-cobrador { margin-top: 1.4rem; font-size: .88rem; color: var(--muted); border-left: 2px solid var(--ruta); padding-left: .9rem; max-width: 62ch; }

  /* Preguntas */
  .faq { margin-top: 2rem; display: grid; gap: 0; }
  .faq details { border-bottom: 1px solid var(--hair); padding: 1rem 0; }
  .faq details:first-child { border-top: 1px solid var(--hair); }
  .faq summary { font-family: "Poppins", sans-serif; font-weight: 600; font-size: 1rem; cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 1rem; }
  .faq summary::-webkit-details-marker { display: none; }
  .faq summary::after { content: "+"; color: var(--accent); font-family: "IBM Plex Mono", monospace; transition: transform .15s ease; }
  .faq details[open] summary::after { transform: rotate(45deg); }
  .faq p { margin: .8rem 0 0; color: var(--ink-soft); font-size: .95rem; max-width: 70ch; }

  /* Contacto */
  .contacto { display: grid; gap: 1px; background: var(--hair); border: 1px solid var(--hair); border-radius: 18px; overflow: hidden; margin-top: 2rem; }
  @media (min-width: 820px) { .contacto { grid-template-columns: repeat(3, 1fr); } }
  .contacto-card { background: var(--surface); padding: 1.5rem 1.5rem 1.7rem; display: flex; flex-direction: column; gap: .7rem; align-items: flex-start; }
  .contacto-card h3 { font-size: 1.05rem; font-weight: 600; }
  .contacto-card p { margin: 0; font-size: .92rem; color: var(--ink-soft); flex: 1; }

  .final { text-align: center; padding: clamp(3.5rem, 8vw, 6rem) 0; }
  .final h2 { font-size: clamp(1.9rem, 5vw, 2.9rem); }
  .final p { color: var(--ink-soft); margin: 1rem auto 2rem; max-width: 44ch; }

  /* ---------- Pie de página ---------- */
  footer { border-top: 1px solid var(--hair); padding: 2.4rem 0 3rem; font-size: .88rem; color: var(--muted); }
  footer .wrap { display: grid; gap: 1.6rem; }
  @media (min-width: 820px) { footer .wrap { grid-template-columns: 1.3fr 1fr; align-items: start; } }
  footer .brand-logo { height: 22px; }
  footer .lema { margin: .7rem 0 0; max-width: 40ch; }
  footer .enlaces { display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; }
  footer .enlaces a { text-decoration: none; color: var(--ink-soft); }
  footer .enlaces a:hover { color: var(--ink); text-decoration: underline; }
  footer .base {
    grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: space-between; gap: .6rem 1.5rem;
    border-top: 1px solid var(--hair); padding-top: 1.2rem; font-size: .84rem;
  }
  .dev a { position: relative; color: var(--ink); font-weight: 600; text-decoration: none; padding-bottom: 2px; transition: color .2s ease; }
  .dev a::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; border-radius: 2px;
    background: var(--accent); transform: scaleX(0); transform-origin: left center;
    transition: transform .35s ease;
  }
  .dev a:hover, .dev a:focus-visible { color: var(--accent-ink); }
  .dev a:hover::after, .dev a:focus-visible::after { transform: scaleX(1); }
  .dev.in a::after { animation: dev-linea 1.4s .4s ease; }
  @keyframes dev-linea {
    0% { transform: scaleX(0); transform-origin: left center; }
    45% { transform: scaleX(1); transform-origin: left center; }
    55% { transform: scaleX(1); transform-origin: right center; }
    100% { transform: scaleX(0); transform-origin: right center; }
  }
  @media (prefers-reduced-motion: reduce) { .dev.in a::after { animation: none; } }

  .reveal { opacity: 0; transform: translateY(14px); transition: opacity .6s ease, transform .6s ease; }
  .reveal.in { opacity: 1; transform: none; }
  @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }

  /* ===== Fondo animado ===== */
  .bg-scene { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; color: var(--ink); }
  .bg-grid { position: absolute; inset: 0; opacity: .05; background-image: radial-gradient(currentColor 1px, transparent 1px); background-size: 32px 32px; }
  .bg-blob { position: absolute; border-radius: 50%; filter: blur(72px); opacity: .55; }
  .bg-blob.a { width: 40vw; height: 40vw; max-width: 520px; max-height: 520px; top: -10vw; left: -8vw; background: color-mix(in srgb, var(--accent) 24%, transparent); animation: blobA 26s ease-in-out infinite; }
  .bg-blob.b { width: 36vw; height: 36vw; max-width: 460px; max-height: 460px; bottom: -12vw; right: -10vw; background: color-mix(in srgb, var(--growth) 22%, transparent); animation: blobB 31s ease-in-out infinite; }
  .sh { position: absolute; display: block; will-change: transform; }
  .sh svg { display: block; width: 100%; height: 100%; overflow: visible; }
  .sh.accent { color: var(--accent); }
  .sh.grow { color: var(--growth); }
  .sh.f1 { animation: fl1 7s ease-in-out infinite; }
  .sh.f2 { animation: fl2 8s ease-in-out infinite; }
  .sh.f3 { animation: fl3 9s ease-in-out infinite; }
  .sh.f4 { animation: fl4 7.5s ease-in-out infinite; }
  .sh.f5 { animation: fl5 8.5s ease-in-out infinite; }
  @keyframes fl1 { 0%,100% { transform: translate(0,0) rotate(0); } 50% { transform: translate(0,-48px) rotate(16deg); } }
  @keyframes fl2 { 0%,100% { transform: translate(0,0) rotate(0); } 50% { transform: translate(-40px,-26px) rotate(-18deg); } }
  @keyframes fl3 { 0%,100% { transform: translate(0,0) rotate(0); } 33% { transform: translate(38px,-40px) rotate(14deg); } 66% { transform: translate(-30px,-18px) rotate(-12deg); } }
  @keyframes fl4 { 0%,100% { transform: translate(0,0) rotate(0); } 50% { transform: translate(44px,-30px) rotate(22deg); } }
  @keyframes fl5 { 0%,100% { transform: translate(0,0) rotate(0); } 50% { transform: translate(48px,18px) rotate(-16deg); } }
  @keyframes blobA { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(6.5vw,5vw) scale(1.14); } }
  @keyframes blobB { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(-5.5vw,-4vw) scale(1.16); } }

  /* ---------- Páginas de cada sistema ---------- */
  nav ul a[aria-current="page"] { color: var(--ink); font-weight: 600; }
  .migas { font-size: .84rem; color: var(--muted); margin: 0 0 1.4rem; }
  .migas a { text-decoration: none; color: var(--ink-soft); }
  .migas a:hover { text-decoration: underline; }
  .pg-hero { padding: clamp(2.4rem, 7vw, 4.6rem) 0 clamp(2rem, 5vw, 3.2rem); }
  .pg-hero .grid { display: grid; gap: clamp(2rem, 5vw, 3.5rem); align-items: center; }
  @media (min-width: 900px) { .pg-hero .grid { grid-template-columns: 1.1fr .9fr; } }
  .pg-hero h1 { font-size: clamp(2.1rem, 5.4vw, 3.3rem); }
  .pg-hero .lead { font-size: 1.1rem; color: var(--ink-soft); max-width: 50ch; margin: 1.1rem 0 0; }
  .pg-hero .cta { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.8rem; }
  .pg-hero .note { margin-top: 1rem; font-size: .84rem; color: var(--muted); max-width: 52ch; }
  .indice { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.8rem; }
  .indice a {
    border: 1px solid var(--hair); border-radius: 999px; padding: .32rem .9rem;
    font-size: .84rem; text-decoration: none; color: var(--ink-soft);
    transition: background-color .15s ease, color .15s ease;
  }
  .indice a:hover { background: var(--surface); color: var(--ink); }

  .shot { margin: 0; }
  .marco {
    width: 100%; max-width: 300px; margin-inline: auto; background: var(--surface-2);
    border: 1px solid var(--border); border-radius: 40px; padding: 9px;
    box-shadow: 0 30px 70px -34px rgba(13,27,42,.45);
  }
  .marco img { display: block; width: 100%; height: auto; border-radius: 32px; }
  .shot figcaption { text-align: center; font-size: .78rem; color: var(--muted); margin-top: .9rem; }

  .ficha { display: grid; gap: 1px; background: var(--hair); border: 1px solid var(--hair); border-radius: 18px; overflow: hidden; margin-top: 2rem; }
  @media (min-width: 820px) { .ficha { grid-template-columns: repeat(3, 1fr); } }
  .ficha div { background: var(--surface); padding: 1.3rem 1.4rem 1.4rem; font-size: .93rem; color: var(--ink-soft); }
  .ficha b { display: block; margin-bottom: .35rem; font-family: "IBM Plex Mono", monospace; font-weight: 500; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; }
  .stock-sec .ficha b { color: var(--accent-ink); }
  .capital-sec .ficha b { color: var(--capital-text); }
  .ruta-sec .ficha b { color: var(--ruta); }

  .tour { display: grid; gap: clamp(3.2rem, 8vw, 5.5rem); margin-top: 2.8rem; }
  .parada { display: grid; gap: 1.8rem; align-items: center; }
  @media (min-width: 820px) {
    .parada { grid-template-columns: 330px 1fr; gap: clamp(2.5rem, 6vw, 4.5rem); }
    .parada:nth-child(even) { grid-template-columns: 1fr 330px; }
    .parada:nth-child(even) .shot { order: 2; }
  }
  .parada .texto h3 { font-size: 1.45rem; margin-top: .55rem; }
  .parada .texto > p { color: var(--ink-soft); margin: .7rem 0 0; font-size: .98rem; max-width: 54ch; }
  .opts { list-style: none; margin: 1.1rem 0 0; padding: 0; max-width: 60ch; }
  .opts li { padding: .65rem 0; border-top: 1px solid var(--hair); font-size: .92rem; color: var(--ink-soft); }
  .opts li:last-child { border-bottom: 1px solid var(--hair); }
  .opts li b { display: block; color: var(--ink); font-family: "Poppins", sans-serif; font-weight: 600; font-size: .93rem; margin-bottom: .1rem; }
  .parada .sheet, .parada .phone { margin-inline: auto; width: 100%; }

  .roles { display: grid; gap: 1px; background: var(--hair); border: 1px solid var(--hair); border-radius: 18px; overflow: hidden; margin-top: 2rem; }
  @media (min-width: 760px) { .roles { grid-template-columns: repeat(3, 1fr); } }
  .roles div { background: var(--surface); padding: 1.4rem 1.4rem 1.5rem; font-size: .92rem; color: var(--ink-soft); }
  .roles b { display: block; margin-bottom: .35rem; font-family: "Poppins", sans-serif; font-weight: 600; font-size: 1.05rem; color: var(--ink); }

  .vitrina { display: grid; gap: 1.6rem; margin-top: 2.4rem; }
  @media (min-width: 760px) { .vitrina { grid-template-columns: repeat(3, 1fr); gap: 2rem; } }
  .vitrina a { text-decoration: none; display: block; transition: transform .25s ease; }
  .vitrina a:hover { transform: translateY(-6px); }
  .vitrina .marco { max-width: 250px; }
  .vitrina figcaption { text-align: center; margin-top: .9rem; font-family: "Poppins", sans-serif; font-weight: 600; font-size: .98rem; }
  .vitrina figcaption small { display: block; font-family: "IBM Plex Sans", sans-serif; font-weight: 400; font-size: .84rem; color: var(--muted); }
  .capital-sec .steps .step .num { color: var(--capital-text); }
  .ruta-sec .steps .step .num { color: var(--ruta); }

  /* Captura de computador dentro de una ventana de navegador */
  .pc { margin: clamp(3rem, 7vw, 5rem) auto 0; max-width: 1000px; }
  .pc .texto { text-align: center; max-width: 56ch; margin: 0 auto 1.8rem; }
  .pc .texto h3 { font-size: 1.45rem; }
  .pc .texto p { color: var(--ink-soft); margin: .7rem 0 0; font-size: .98rem; }
  .ventana { border: 1px solid var(--border); border-radius: 16px; overflow: hidden; background: var(--surface-2); box-shadow: 0 40px 90px -46px rgba(13,27,42,.5); }
  .ventana .barra-v { display: flex; align-items: center; gap: .45rem; padding: .7rem .9rem; border-bottom: 1px solid var(--border); background: var(--surface); }
  .ventana .barra-v i { width: 11px; height: 11px; border-radius: 50%; background: var(--hair); display: block; }
  .ventana img { display: block; width: 100%; height: auto; }