/* Estilos del demo en vivo (inicio y Tecnología).
   Las reglas svg.cq salen de «13 AFB CUANTIFICADORES/index.html»: el croquis
   tiene que verse igual aquí que en la app. */
  /* ============ DEMO EN VIVO DEL INICIO ============
     El croquis viene de AFB Generador y está dibujado para su fondo oscuro.
     En vez de repintarlo, la tarjeta trae los mismos tokens de la app: es una
     pantalla del producto metida en la página, y se ve como el producto.
     Las reglas de svg.cq salen tal cual del archivo de la app. */
  .demo{--bg:#0e1520;--bg2:#161c2e;--bg3:#1e2640;--teal:#229c9f;--teal2:#2bc4c8;
    --txt:#c8dde8;--txt2:#e8edf5;--muted:#6a8a9a;--line:#1e2640;--warn:#f39c12;--err:#e74c3c;
    background:linear-gradient(165deg,#161c2e,#0e1520);border:1px solid #223052;border-radius:18px;
    padding:16px 16px 14px;box-shadow:0 34px 70px -34px rgba(14,14,15,.75);
    font-family:'Segoe UI',system-ui,Arial,sans-serif}
  .demo-cab{display:flex;flex-direction:column;gap:5px;margin-bottom:8px}
  .demo-cab b{color:#e8edf5;font-size:1.02rem;font-weight:700;letter-spacing:-.01em}
  .demo-vivo{display:inline-flex;align-items:center;gap:7px;align-self:flex-start;
    font-size:.6rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
    color:#7ee2a8;background:rgba(46,194,111,.12);border:1px solid rgba(46,194,111,.3);
    padding:4px 10px;border-radius:100px}
  .demo-vivo i{width:7px;height:7px;border-radius:50%;background:#2ec26f;
    box-shadow:0 0 0 0 rgba(46,194,111,.6);animation:afb-vivo 2s infinite}
  @keyframes afb-vivo{70%{box-shadow:0 0 0 7px rgba(46,194,111,0)}100%{box-shadow:0 0 0 0 rgba(46,194,111,0)}}
  .demo-croquis{background:#0e1520;border:1px solid #1e2640;border-radius:12px;padding:6px 4px 2px;overflow:hidden}
  /* El croquis trae su propia banda de cifras abajo. Aquí sobra: las mismas
     tres van más grandes debajo del dibujo, donde sí se leen a la distancia a
     la que se mira un hero. Se oculta y se recorta el hueco que dejaba. */
  .demo-croquis svg.cq .pl,.demo-croquis svg.cq .pv,.demo-croquis svg.cq .pk{display:none}
  .demo-croquis svg.cq{margin-bottom:-13%}

  .demo-mandos{display:grid;gap:9px;margin:12px 0 10px}
  .demo-perilla{display:grid;grid-template-columns:64px 1fr 68px;align-items:center;gap:10px}
  .demo-perilla .et{color:#6a8a9a;font-size:.74rem}
  .demo-perilla output{color:#2bc4c8;font-size:.8rem;font-weight:700;text-align:right;
    font-variant-numeric:tabular-nums}
  .demo-perilla input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:26px;
    background:transparent;cursor:grab}
  .demo-perilla input[type=range]:active{cursor:grabbing}
  .demo-perilla input[type=range]::-webkit-slider-runnable-track{height:4px;border-radius:3px;background:#223052}
  .demo-perilla input[type=range]::-moz-range-track{height:4px;border-radius:3px;background:#223052}
  /* 26 px de agarre: con menos, en el teléfono se falla el arrastre. */
  .demo-perilla input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;
    width:26px;height:26px;margin-top:-11px;border-radius:50%;background:#2bc4c8;
    border:4px solid #0e1520;box-shadow:0 3px 10px rgba(0,0,0,.5)}
  .demo-perilla input[type=range]::-moz-range-thumb{width:22px;height:22px;border-radius:50%;
    background:#2bc4c8;border:4px solid #0e1520;box-shadow:0 3px 10px rgba(0,0,0,.5)}
  .demo-perilla input[type=range]:focus-visible{outline:2px solid #2bc4c8;outline-offset:4px;border-radius:6px}

  .demo-cifras{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;
    border-top:1px solid #1e2640;padding-top:11px}
  .demo-cifras div{text-align:center}
  .demo-cifras b{display:block;color:#e8edf5;font-size:1.12rem;font-weight:800;
    letter-spacing:-.02em;font-variant-numeric:tabular-nums}
  .demo-cifras span{color:#6a8a9a;font-size:.66rem;letter-spacing:.04em}
  .demo-ir{display:block;margin-top:12px;text-align:center;color:#2bc4c8;font-size:.82rem;
    font-weight:700;padding:10px;border:1px solid #223052;border-radius:10px;transition:.18s}
  .demo-ir:hover{background:rgba(43,196,200,.08);border-color:#2bc4c8}
  .demo-sin{color:#6a8a9a;font-size:.8rem;margin-top:10px;text-align:center}
  .demo-sin a{color:#2bc4c8}

svg.cq{margin-bottom:-13%}

  .demo-mandos{display:grid;gap:9px;margin:12px 0 10px}
  .demo-perilla{display:grid;grid-template-columns:64px 1fr 68px;align-items:center;gap:10px}
  .demo-perilla .et{color:#6a8a9a;font-size:.74rem}
  .demo-perilla output{color:#2bc4c8;font-size:.8rem;font-weight:700;text-align:right;
    font-variant-numeric:tabular-nums}
  .demo-perilla input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:26px;
    background:transparent;cursor:grab}
  .demo-perilla input[type=range]:active{cursor:grabbing}
  .demo-perilla input[type=range]::-webkit-slider-runnable-track{height:4px;border-radius:3px;background:#223052}
  .demo-perilla input[type=range]::-moz-range-track{height:4px;border-radius:3px;background:#223052}
  /* 26 px de agarre: con menos, en el teléfono se falla el arrastre. */
  .demo-perilla input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;
    width:26px;height:26px;margin-top:-11px;border-radius:50%;background:#2bc4c8;
    border:4px solid #0e1520;box-shadow:0 3px 10px rgba(0,0,0,.5)}
  .demo-perilla input[type=range]::-moz-range-thumb{width:22px;height:22px;border-radius:50%;
    background:#2bc4c8;border:4px solid #0e1520;box-shadow:0 3px 10px rgba(0,0,0,.5)}
  .demo-perilla input[type=range]:focus-visible{outline:2px solid #2bc4c8;outline-offset:4px;border-radius:6px}

  .demo-cifras{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;
    border-top:1px solid #1e2640;padding-top:11px}
  .demo-cifras div{text-align:center}
  .demo-cifras b{display:block;color:#e8edf5;font-size:1.12rem;font-weight:800;
    letter-spacing:-.02em;font-variant-numeric:tabular-nums}
  .demo-cifras span{color:#6a8a9a;font-size:.66rem;letter-spacing:.04em}
  .demo-ir{display:block;margin-top:12px;text-align:center;color:#2bc4c8;font-size:.82rem;
    font-weight:700;padding:10px;border:1px solid #223052;border-radius:10px;transition:.18s}
  .demo-ir:hover{background:rgba(43,196,200,.08);border-color:#2bc4c8}
  .demo-sin{color:#6a8a9a;font-size:.8rem;margin-top:10px;text-align:center}
  .demo-sin a{color:#2bc4c8}

  .hero-prueba{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 12px;margin-top:14px;
    font-size:.84rem;color:var(--gray-2)}
  .hero-prueba a{color:var(--teal);font-weight:700}

svg.cq{display:block;width:100%;height:auto;max-height:210px;margin:0 auto}
svg.cq text{font-family:'Segoe UI',system-ui,Arial,sans-serif;fill:var(--muted);font-size:9px}
svg.cq .tenue{opacity:.45}
svg.cq .f,svg.cq .t,svg.cq .s{stroke:var(--teal2);stroke-width:1.1;stroke-linejoin:round}
svg.cq .f{fill:rgba(34,156,159,.26)}
svg.cq .t{fill:rgba(43,196,200,.42)}
svg.cq .s{fill:rgba(34,156,159,.14)}
svg.cq .m-tie.f{fill:url(#cqT);stroke:#8a7550}
svg.cq .m-tie.t{fill:rgba(160,130,80,.34);stroke:#8a7550}
svg.cq .m-tie.s{fill:rgba(160,130,80,.18);stroke:#8a7550}
svg.cq .m-exc.f{fill:var(--bg);stroke:var(--teal2);stroke-width:1.3}
svg.cq .m-hue.f,svg.cq .m-hue.t,svg.cq .m-hue.s{fill:var(--bg);stroke:var(--muted);stroke-dasharray:3 2}
svg.cq .m-mad.f{fill:rgba(243,156,18,.20);stroke:var(--warn)}
svg.cq .m-mad.t{fill:rgba(243,156,18,.32);stroke:var(--warn)}
svg.cq .m-mad.s{fill:rgba(243,156,18,.13);stroke:var(--warn)}
svg.cq .m-mor.f{fill:rgba(200,221,232,.16);stroke:#9fc0d2}
svg.cq .m-mor.t{fill:rgba(200,221,232,.26);stroke:#9fc0d2}
svg.cq .m-mor.s{fill:rgba(200,221,232,.10);stroke:#9fc0d2}
svg.cq .m-jun.f{fill:rgba(200,221,232,.05);stroke:var(--line)}
svg.cq .m-blk.f{fill:rgba(200,221,232,.11);stroke:#8fb0c2;stroke-width:.9}
svg.cq .m-tra.f{fill:rgba(43,196,200,.16);stroke:var(--teal2);stroke-dasharray:4 3}
svg.cq .m-cem.f{fill:rgba(200,221,232,.34);stroke:#c8dde8}
svg.cq .m-are.f{fill:rgba(224,176,112,.36);stroke:#e0b070}
svg.cq .m-gra.f{fill:rgba(147,166,184,.36);stroke:#93a6b8}
svg.cq .m-agu.f{fill:rgba(90,169,224,.30);stroke:#5aa9e0}
svg.cq .m-ace{stroke:#e08a5a;stroke-width:1.3;fill:none}
svg.cq .m-ace.f{fill:none}
svg.cq .var{fill:#f0a24a;stroke:var(--bg);stroke-width:.8}
svg.cq .ln{stroke:var(--teal2);stroke-width:1;fill:none}
svg.cq .hx{stroke:rgba(160,130,80,.5);stroke-width:1}
svg.cq .cl{stroke:var(--muted);stroke-width:.9;fill:none}
svg.cq .hit{stroke:transparent;stroke-width:18;fill:none}
svg.cq .cx{fill:var(--txt);font-size:9.5px}
svg.cq .ct.liga,svg.cq .cq-chip.liga{cursor:pointer}
svg.cq .ct.liga .cx{fill:var(--teal2);text-decoration:underline}
svg.cq .ct.liga:focus,svg.cq .cq-chip.liga:focus{outline:none}
svg.cq .ct.liga:focus .cx,svg.cq .ct.liga:active .cx{fill:var(--txt2)}
svg.cq .chip{fill:var(--bg3);stroke:var(--teal);stroke-width:1}
svg.cq .chipx{fill:var(--txt2);font-size:10.5px;font-weight:700}
svg.cq .cq-chip.liga .chip{stroke:var(--teal2);stroke-dasharray:3 2}
svg.cq .pl{stroke:var(--line);stroke-width:1}
svg.cq .pv{fill:var(--txt2);font-size:10.5px;font-weight:700}
svg.cq .pk{fill:var(--muted);font-size:8px;letter-spacing:.4px;text-transform:uppercase}
svg.cq .av,svg.cq .nt{fill:var(--muted);font-size:8px;font-style:italic}
svg.cq .val{fill:var(--txt);font-size:9px}

  @media(prefers-reduced-motion:reduce){.demo-vivo i{animation:none}}