/* Los gráficos del sitio.
 *
 * Cada uno nació como página suelta en public/graficos/<nombre>.html para
 * poder revisarlo aislado. Su CSS vive aquí, en un solo archivo, y su marcado
 * se pega en la página que lo usa.
 *
 * Por qué junto y no dentro de cada página: el tablero aparece en /empresas y
 * también en /empresas/plataforma; el ciclo NOM en /empresas y en
 * /empresas/nom-035. Con el CSS en cada página serían dos copias que se
 * separan el día que alguien toca una.
 *
 * Todas las clases van prefijadas por gráfico (tab-, eviden-, nom6-, priv-),
 * así que no chocan entre sí ni con sitio.css.
 *
 * NO SE EDITA A MANO: lo genera scripts/juntar-graficos.py a partir de las
 * páginas de public/graficos/. Si hay que cambiar un gráfico, se cambia allá
 * y se vuelve a generar.
 */

/* =========================== arquitectura-privacidad === */
/* ─────────────────────────────────────────────────────────────────
     GRÁFICO 6 · La arquitectura de privacidad
     Prefijo de clase: .arqp-   (el repo ya tuvo colisiones reales)

     La idea: hoy esto se explica en párrafos y nadie los lee. Aquí se ve.
     Dos lados, un muro dibujado entre ellos, y —lo que de verdad convence—
     la lista corta de lo que sí cruza y la regla de supresión.

     Diseñado a 390px primero. El muro es una columna vertical solo a partir
     de 860px; abajo de eso es una banda horizontal entre dos bloques
     apilados, con el mismo rayado, para que se siga leyendo como frontera.
     El rayado es el idioma: donde hay rayado, hay línea.

     Todo color, espacio, tipo y radio sale de tokens.css. Ni un solo color
     escrito a mano en esta hoja.
     ───────────────────────────────────────────────────────────────── */

  *,*::before,*::after{box-sizing:border-box}
  body{margin:0;font-family:var(--texto);color:var(--fg);
       font-size:var(--t-base);line-height:var(--alto-normal);
       -webkit-font-smoothing:antialiased}

  .arqp{max-width:var(--ancho-emp);margin:0 auto}

  /* ── cabecera ─────────────────────────────────────────────────── */
  /* El rótulo va en --fg-suave y no en --acento-suave, que es lo que usa el
     resto del sitio: a 10.5px el lila da 4.28:1 contra el papel y se queda
     abajo de AA. El acento sigue presente en el sello, los puntos y los
     distintivos, donde el tamaño sí lo aguanta. */
  .arqp-rotulo{margin:0;font-size:var(--t-micro);text-transform:uppercase;
               letter-spacing:var(--track-versalita);color:var(--fg-suave);
               font-weight:600}
  .arqp-titulo{font-family:var(--display);font-weight:400;font-size:var(--t-h1);
               line-height:1.06;letter-spacing:-.015em;margin:var(--e3) 0 0;
               max-width:17ch;text-wrap:balance}
  .arqp-entrada{margin:var(--e4) 0 0;color:var(--fg-suave);
                font-size:var(--t-lead);max-width:60ch;line-height:1.6}

  /* Rótulo de datos de ejemplo. Va arriba, en tamaño de lectura y con banda
     de color: la regla de la casa es que esto se vea, no que se esconda en
     letra chica al pie. */
  .arqp-aviso{display:flex;gap:var(--e3);align-items:flex-start;
              margin:var(--e5) 0 0;max-width:66ch;
              background:var(--aviso-bg);border-left:3px solid var(--aviso);
              border-radius:0 var(--r-chico) var(--r-chico) 0;
              padding:var(--e3) var(--e4);font-size:var(--t-chico);
              line-height:1.55;color:var(--fg)}
  .arqp-aviso b{color:var(--aviso);font-weight:600}
  .arqp-aviso svg{flex:none;width:18px;height:18px;color:var(--aviso);
                  margin-top:3px}

  /* ── bloques ──────────────────────────────────────────────────── */
  .arqp-bloque{margin-top:var(--seccion)}
  .arqp-h2{font-family:var(--display);font-weight:400;font-size:var(--t-h2);
           line-height:1.15;margin:0;max-width:22ch;text-wrap:balance}
  .arqp-bajada{margin:var(--e3) 0 0;color:var(--fg-suave);
               font-size:var(--t-base);max-width:62ch;line-height:1.62}
  .arqp-pie{margin:var(--e4) 0 0;color:var(--fg-suave);font-size:var(--t-nota);
            max-width:70ch;line-height:1.7}

  /* ── EL MURO ──────────────────────────────────────────────────────
     Móvil: una sola columna. Bloque, frontera, bloque. */
  .arqp-muro{display:grid;margin-top:var(--e5);
             border:1px solid var(--linea);border-radius:var(--r-caja);
             overflow:hidden;background:var(--superficie-emp);
             box-shadow:var(--sombra-2)}

  .arqp-lado{padding:var(--e5) var(--e4);background:var(--superficie-emp)}
  .arqp-lado--emp{background:var(--superficie-emp-baja)}
  .arqp-lado-rot{margin:0;display:inline-flex;align-items:center;gap:var(--e2);
                 font-size:var(--t-micro);text-transform:uppercase;
                 letter-spacing:var(--track-versalita);font-weight:600;
                 color:var(--fg-suave)}
  .arqp-lado-rot i{width:8px;height:8px;border-radius:var(--r-pastilla);
                   background:var(--dato-1);flex:none}
  .arqp-lado--emp .arqp-lado-rot i{background:var(--dato-2)}
  .arqp-lado-tit{font-family:var(--display);font-weight:400;font-size:var(--t-h3);
                 margin:var(--e2) 0 0;color:var(--fg);line-height:1.2}
  .arqp-lado-sub{margin:var(--e2) 0 0;font-size:var(--t-nota);
                 color:var(--fg-suave);line-height:1.55;max-width:34ch}

  .arqp-lista{list-style:none;margin:var(--e4) 0 0;padding:0;
              display:grid;gap:var(--e3)}

  /* Lado persona: cosas, no cifras. Punto lleno. */
  .arqp-item{position:relative;padding-left:var(--e5);font-size:var(--t-chico);
             line-height:1.55;color:var(--fg)}
  .arqp-item::before{content:"";position:absolute;left:0;top:7px;
                     width:9px;height:9px;border-radius:var(--r-pastilla);
                     background:var(--dato-1)}

  /* Lado empresa: cifras, y nada más. */
  .arqp-dato{display:grid;grid-template-columns:auto 1fr;gap:var(--e3);
             align-items:baseline;padding-bottom:var(--e3);
             border-bottom:1px solid var(--linea)}
  .arqp-lista--emp .arqp-dato:last-child{border-bottom:0;padding-bottom:0}
  .arqp-cifra{font-family:var(--display);font-weight:400;
              font-size:var(--t-h2);line-height:1;color:var(--dato-2);
              letter-spacing:-.01em;min-width:3.4ch;
              font-variant-numeric:lining-nums tabular-nums;
              font-feature-settings:"lnum" 1,"tnum" 1}
  .arqp-dato span{font-size:var(--t-chico);line-height:1.5;color:var(--fg)}

  /* ── la frontera ──────────────────────────────────────────────────
     El rayado se arma con dos tokens; ni un color literal. */
  .arqp-frontera{position:relative;padding:var(--e5) var(--e4);
                 text-align:center;
                 border-top:2px solid var(--linea-fuerte);
                 border-bottom:2px solid var(--linea-fuerte);
                 background-image:repeating-linear-gradient(135deg,
                    var(--linea) 0 1px, var(--superficie-emp) 1px 8px)}
  .arqp-sello{display:block;width:28px;height:28px;margin:0 auto var(--e3);
              color:var(--acento)}
  .arqp-leyenda{display:flex;flex-direction:column;align-items:center;
                gap:var(--e2)}
  .arqp-frontera-txt{margin:0;font-family:var(--display);font-weight:500;
                     font-size:var(--t-h3);line-height:1.25;color:var(--fg);
                     max-width:24ch}
  .arqp-frontera-nota{margin:0;font-size:var(--t-nota);color:var(--fg-suave);
                      line-height:1.45;max-width:30ch}

  /* ── LO QUE CRUZA ────────────────────────────────────────────────
     Móvil: cada renglón es una tarjeta con su propia franja de frontera
     al centro. Escritorio: la franja se alinea con la columna del muro de
     arriba, así que el muro parece continuar hacia abajo. */
  .arqp-cruces{list-style:none;margin:var(--e5) 0 0;padding:0;
               display:grid;gap:var(--e4)}
  .arqp-cruce{border:1px solid var(--linea);border-radius:var(--r-caja);
              background:var(--superficie-emp);overflow:hidden}
  .arqp-celda{padding:var(--e4)}
  .arqp-celda-rot{display:block;font-size:var(--t-micro);text-transform:uppercase;
                  letter-spacing:var(--track-versalita);font-weight:600;
                  color:var(--fg-suave);margin-bottom:var(--e2)}
  .arqp-celda p{margin:0;font-size:var(--t-chico);line-height:1.55;color:var(--fg)}
  .arqp-dest--nada p{color:var(--fg-suave)}
  .arqp-nada{font-family:var(--display);font-size:var(--t-h3);color:var(--ok);
             display:block;line-height:1.1;margin-bottom:var(--e1)}

  .arqp-paso{display:flex;flex-direction:column;align-items:center;
             justify-content:center;gap:var(--e2);padding:var(--e3) var(--e4);
             border-top:2px solid var(--linea-fuerte);
             border-bottom:2px solid var(--linea-fuerte);
             background-image:repeating-linear-gradient(135deg,
                var(--linea) 0 1px, var(--superficie-emp) 1px 8px)}
  .arqp-flecha{display:none;width:100%;height:14px}
  .arqp-chip{display:inline-block;font-size:var(--t-micro);font-weight:600;
             text-transform:uppercase;letter-spacing:var(--track-versalita);
             padding:var(--e1) var(--e3);border-radius:var(--r-pastilla);
             white-space:nowrap;line-height:1.6}
  .arqp-chip--pasa{background:var(--acento-lavado);color:var(--acento)}
  .arqp-chip--regla{background:var(--aviso-bg);color:var(--aviso)}
  .arqp-chip--alto{background:var(--ok-bg);color:var(--ok)}

  /* ── LA REGLA DE LOS CINCO ────────────────────────────────────────
     Móvil: la tabla se vuelve tarjetas de verdad, con su rótulo en cada
     dato. No es una tabla encogida. */
  .arqp-tabla{width:100%;border-collapse:collapse;margin-top:var(--e5);
              font-size:var(--t-chico)}
  .arqp-cap{caption-side:top;text-align:left;font-size:var(--t-chico);
            color:var(--fg);padding-bottom:var(--e3);line-height:1.5}
  .arqp-cap b{color:var(--aviso);font-weight:600}
  .arqp-tabla thead th{position:absolute;width:1px;height:1px;overflow:hidden;
                       clip-path:inset(50%);white-space:nowrap}
  .arqp-tabla tbody tr{display:block;border:1px solid var(--linea);
                       border-radius:var(--r-caja);background:var(--superficie-emp);
                       padding:var(--e4);margin-bottom:var(--e3)}
  .arqp-tabla td{display:flex;justify-content:space-between;align-items:baseline;
                 gap:var(--e4);padding:var(--e2) 0;
                 border-bottom:1px solid var(--linea-tenue)}
  .arqp-tabla td:last-child{border-bottom:0;padding-bottom:0}
  .arqp-tabla td::before{content:attr(data-rot);font-size:var(--t-micro);
                         text-transform:uppercase;
                         letter-spacing:var(--track-versalita);
                         color:var(--fg-suave);font-weight:600;flex:none}
  .arqp-tema{color:var(--fg);font-weight:500}
  .arqp-num{font-family:var(--display);font-size:var(--t-h3);line-height:1;
            color:var(--fg);
            font-variant-numeric:lining-nums tabular-nums;
            font-feature-settings:"lnum" 1,"tnum" 1}
  .arqp-pista{display:block;width:100%;height:8px;border-radius:var(--r-chico);
              background:var(--dato-vacio);overflow:hidden}
  .arqp-barra{display:block;height:100%;border-radius:var(--r-chico);
              background:var(--dato-1);min-width:4px}
  .arqp-tabla td.arqp-td-barra{flex-direction:column;align-items:stretch;
                               gap:var(--e2)}

  /* El renglón suprimido lleva el mismo rayado del muro: es el muro otra
     vez, ahora dentro del reporte. */
  .arqp-tabla tbody tr.arqp-supr{border-style:dashed;border-color:var(--linea-fuerte);
              background-image:repeating-linear-gradient(135deg,
                 var(--linea) 0 1px, var(--superficie-emp) 1px 8px)}
  .arqp-supr .arqp-tema,.arqp-supr .arqp-num{color:var(--fg-suave)}
  .arqp-supr-txt{color:var(--ok);font-weight:500;text-align:right}

  .arqp-nota{margin:var(--e5) 0 0;padding:var(--e4);border-left:3px solid var(--dato-1);
             background:var(--superficie-baja);border-radius:0 var(--r-chico) var(--r-chico) 0;
             font-size:var(--t-chico);line-height:1.65;color:var(--fg);max-width:70ch}
  .arqp-nota p{margin:0}
  .arqp-nota p + p{margin-top:var(--e3)}

  .arqp-det{margin-top:var(--e4);border:1px solid var(--linea);
            border-radius:var(--r-caja);background:var(--superficie-emp);
            max-width:70ch}
  .arqp-det summary{min-height:44px;display:flex;align-items:center;
                    gap:var(--e2);padding:var(--e3) var(--e4);cursor:pointer;
                    font-size:var(--t-chico);font-weight:500;color:var(--acento);
                    list-style:none}
  .arqp-det summary::-webkit-details-marker{display:none}
  .arqp-det summary::before{content:"+";font-family:var(--mono);
                            color:var(--acento-suave);font-size:var(--t-base)}
  .arqp-det[open] summary::before{content:"–"}
  .arqp-det ol{margin:0;padding:0 var(--e4) var(--e4) var(--e7);
               display:grid;gap:var(--e3);font-size:var(--t-chico);
               color:var(--fg-suave);line-height:1.6}
  .arqp-det li::marker{color:var(--acento-suave)}

  .arqp-fin{margin-top:var(--seccion);padding-top:var(--e4);
            border-top:1px solid var(--linea);font-size:var(--t-nota);
            color:var(--fg-suave);line-height:1.7;max-width:74ch}

  /* ── 560px: el lado empresa respira ───────────────────────────── */
  @media (min-width:560px){
    .arqp-lado{padding:var(--e6) var(--e5)}
    .arqp-frontera{padding:var(--e6) var(--e5)}
  }

  /* ── 640px: la tabla vuelve a ser tabla ───────────────────────── */
  @media (min-width:560px){
    .arqp-tabla thead th{position:static;width:auto;height:auto;
                         clip-path:none;text-align:left;
                         font-size:var(--t-micro);text-transform:uppercase;
                         letter-spacing:var(--track-versalita);
                         color:var(--fg-suave);font-weight:600;
                         padding:0 var(--e3) var(--e3);
                         border-bottom:1px solid var(--linea)}
    .arqp-tabla thead th:last-child{width:38%}
    .arqp-tabla tbody tr{display:table-row;border:0;border-radius:0;
                         padding:0;margin:0;background:var(--superficie-emp)}
    .arqp-tabla td{display:table-cell;padding:var(--e3);vertical-align:middle;
                   border-bottom:1px solid var(--linea-tenue)}
    .arqp-tabla td::before{content:none}
    .arqp-tabla td.arqp-td-barra{width:38%}
    .arqp-tabla tbody tr.arqp-supr{display:table-row;border-style:none}
    .arqp-supr td{border-top:1px dashed var(--linea-fuerte);
                  border-bottom:1px dashed var(--linea-fuerte)}
  }

  /* ── 860px: el muro se para ───────────────────────────────────────
     Aquí y solo aquí la frontera es vertical. La leyenda se lee de abajo
     hacia arriba, como el rótulo de un lomo. */
  @media (min-width:760px){
    .arqp-muro{grid-template-columns:1fr 168px 1fr;align-items:stretch}

    .arqp-frontera{border-top:0;border-bottom:0;
                   border-left:2px solid var(--linea-fuerte);
                   border-right:2px solid var(--linea-fuerte);
                   display:flex;align-items:center;justify-content:center;
                   padding:var(--e5) var(--e3);min-height:430px}
    .arqp-sello{position:absolute;top:var(--e5);left:50%;
                transform:translateX(-50%);margin:0}
    .arqp-leyenda{flex-direction:row;align-items:center;gap:var(--e3)}
    .arqp-frontera-txt{writing-mode:vertical-rl;transform:rotate(180deg);
                       max-height:340px;max-width:none;text-align:center}
    .arqp-frontera-nota{writing-mode:vertical-rl;transform:rotate(180deg);
                        max-height:260px;max-width:none;text-align:center}

    /* Los renglones de cruce se alinean con la columna del muro. */
    .arqp-cruces{gap:var(--e3)}
    .arqp-cruce{display:grid;grid-template-columns:1fr 168px 1fr;
                align-items:stretch}
    .arqp-celda{display:flex;flex-direction:column;justify-content:center;
                padding:var(--e4) var(--e5)}
    .arqp-dest{text-align:left}
    .arqp-paso{border-top:0;border-bottom:0;
               border-left:2px solid var(--linea-fuerte);
               border-right:2px solid var(--linea-fuerte);
               padding:var(--e3) var(--e2)}
    .arqp-flecha{display:block}
  }

  /* ── movimiento ───────────────────────────────────────────────────
     Poco y horizontal: la línea punteada de lo que SÍ cruza avanza hacia
     la derecha. Lo que se detiene no se mueve — esa es la gracia. */
  @media (prefers-reduced-motion:no-preference){
    .arqp-flujo{animation:arqp-fluir 2.6s linear infinite}
    @keyframes arqp-fluir{from{stroke-dashoffset:18}to{stroke-dashoffset:0}}
    .arqp-cruce{transition:border-color var(--paso)}
    .arqp-cruce:hover{border-color:var(--linea-fuerte)}
  }

/* =========================== ciclo-nom035 === */
/* ─────────────────────────────────────────────────────────────────
     GRÁFICO 4 — La NOM-035 como sistema.

     La idea de fondo: la norma no se cumple con una encuesta al año, se
     cumple con una vuelta completa. Por eso el dibujo es un ciclo cerrado
     y no una fila de servicios; y por eso cada etapa muestra QUÉ DEJA —
     si un paso no deja nada, el siguiente no tiene de dónde agarrarse.

     Tres decisiones que conviene no deshacer:

     1. El color agrupa, no adorna. Seis etapas, tres fases: --dato-1
        diagnóstico, --dato-2 acción, --dato-3 constancia. Seis colores
        distintos habrían sido decoración.
     2. En escritorio el retorno es un corchete por debajo de la tira que
        entra otra vez en la etapa i. En celular ese mismo corchete se
        para y se vuelve un riel por la izquierda. Es el mismo gesto en
        las dos orientaciones, no dos dibujos.
     3. Todo el contenido es texto real dentro de una lista ordenada. El
        SVG es un sello, no el portador de la información.

     Todas las clases van con prefijo nom6-. Este repo ya tuvo choques
     reales de clase (.ficha, .pie, .contacto) y salieron caros.
     ───────────────────────────────────────────────────────────────── */

  *{box-sizing:border-box}

  body{
    margin:0;
    font-family:var(--texto);
    font-size:var(--t-base);
    line-height:var(--alto-normal);
    color:var(--fg);
    -webkit-font-smoothing:antialiased;
  }

  .nom6-hoja{max-width:var(--ancho-tablero);margin:0 auto}

  /* ── cabecera ──────────────────────────────────────────────────── */

  .nom6-cab{display:flex;flex-direction:column;align-items:flex-start;gap:var(--e5)}

  .nom6-rotulo{
    margin:0 0 var(--e3);
    font-size:var(--t-micro);
    letter-spacing:var(--track-versalita);
    text-transform:uppercase;
    font-weight:600;
    color:var(--acento-suave);
  }

  .nom6-titulo{
    margin:0;
    font-family:var(--display);
    font-weight:400;
    font-size:var(--t-h1);
    line-height:1.06;
    letter-spacing:-.015em;
    max-width:17ch;
    text-wrap:balance;
  }

  .nom6-entrada{
    margin:var(--e4) 0 0;
    max-width:58ch;
    font-size:var(--t-lead);
    line-height:1.6;
    color:var(--fg-suave);
  }

  /* El sello: seis puntos en un anillo. Dice "esto da la vuelta" antes de
     que nadie lea una sola etapa. */
  .nom6-sello{width:60px;height:60px;flex:none;display:block}
  .nom6-sello-anillo{fill:none;stroke:var(--linea);stroke-width:1}
  .nom6-sello-arco{fill:none;stroke:var(--acento-suave);stroke-width:1.4;stroke-linecap:round}
  .nom6-sello-punta{fill:none;stroke:var(--acento-suave);stroke-width:1.4;
                    stroke-linecap:round;stroke-linejoin:round}
  .nom6-sello-p1{fill:var(--dato-1)}
  .nom6-sello-p2{fill:var(--dato-2)}
  .nom6-sello-p3{fill:var(--dato-3)}

  /* ── la banda de fases (solo escritorio) ───────────────────────── */

  .nom6-envoltura{margin-top:var(--e7)}
  .nom6-fases{display:none}

  /* ── el ciclo ──────────────────────────────────────────────────── */

  /* Celular: la tira se para. El riel de retorno vive en esta sangría
     izquierda, por eso el padding es del contenedor y no de la lista. */
  .nom6-ciclo{position:relative;padding-left:32px}

  .nom6-rejilla{
    list-style:none;
    margin:0;
    padding:0;
    display:grid;
    gap:var(--e3);
  }

  .nom6-etapa{
    position:relative;
    display:flex;
    flex-direction:column;
    gap:var(--e3);
    padding:var(--e4);
    background:var(--superficie);
    border:1px solid var(--linea);
    border-radius:var(--r-caja);
  }

  /* Cada etapa hereda el color de su fase por esta variable. Nada de aquí
     para abajo vuelve a nombrar un color de dato. */
  .nom6-f1{--nom6-c:var(--dato-1)}
  .nom6-f2{--nom6-c:var(--dato-2)}
  .nom6-f3{--nom6-c:var(--dato-3)}

  .nom6-cuerpo{display:flex;flex-direction:column;gap:var(--e3)}

  .nom6-chip{
    display:inline-flex;
    align-items:center;
    gap:var(--e2);
    align-self:flex-start;
    margin:0;
    font-size:var(--t-micro);
    letter-spacing:var(--track-versalita);
    text-transform:uppercase;
    font-weight:600;
    color:var(--fg-tenue);
  }
  .nom6-chip::before{
    content:"";
    width:7px;height:7px;
    border-radius:var(--r-pastilla);
    background:var(--nom6-c);
  }

  .nom6-cabeza{display:flex;flex-direction:column;gap:var(--e1)}

  .nom6-orden{
    font-family:var(--display);
    font-size:var(--t-nota);
    letter-spacing:.14em;
    color:var(--fg-tenue);
  }

  .nom6-verbo{
    margin:0;
    font-family:var(--display);
    font-weight:400;
    font-size:var(--t-h3);
    line-height:1.1;
    letter-spacing:-.01em;
    color:var(--fg);
  }

  .nom6-texto{
    margin:0;
    font-size:var(--t-chico);
    line-height:1.55;
    color:var(--fg-suave);
  }

  /* La salida: lo concreto que queda cuando la etapa termina. Va pegada
     al fondo de la tarjeta para que las seis se lean en una sola línea de
     la mirada. */
  .nom6-salida{
    margin:auto 0 0;
    padding-top:var(--e3);
    border-top:1px solid var(--linea-tenue);
    display:grid;
    gap:var(--e1);
  }
  .nom6-salida-rotulo{
    font-size:var(--t-micro);
    letter-spacing:var(--track-versalita);
    text-transform:uppercase;
    font-weight:600;
    color:var(--fg-tenue);
  }
  .nom6-salida b{
    display:flex;
    align-items:center;
    gap:var(--e2);
    font-family:var(--display);
    font-weight:500;
    font-size:var(--t-h4);
    line-height:1.2;
    color:var(--fg);
  }
  .nom6-punto{
    width:8px;height:8px;flex:none;
    border-radius:var(--r-pastilla);
    background:var(--nom6-c);
  }

  /* La escala del mapa de riesgos. Es una leyenda de la rampa, no un
     resultado: no hay ni una cifra de nadie en toda la página. */
  .nom6-escala{display:flex;align-items:center;gap:var(--e2)}
  .nom6-escala-rot{
    font-size:var(--t-micro);
    letter-spacing:.08em;
    text-transform:uppercase;
    color:var(--fg-tenue);
    white-space:nowrap;
  }
  .nom6-escala-barra{
    display:flex;
    flex:1;
    min-width:60px;
    height:8px;
    border-radius:var(--r-chico);
    overflow:hidden;
  }
  .nom6-escala-barra span{flex:1}
  .nom6-n1{background:var(--riesgo-1)}
  .nom6-n2{background:var(--riesgo-2)}
  .nom6-n3{background:var(--riesgo-3)}
  .nom6-n4{background:var(--riesgo-4)}
  .nom6-n5{background:var(--riesgo-5)}

  /* El nudo entre una etapa y la siguiente. Cuelga de la etapa que
     RECIBE, no de la que entrega: así lo pinta el navegador encima de la
     tarjeta anterior sin pelearse por el orden de apilado. */
  .nom6-flecha{
    position:absolute;
    z-index:2;
    top:-18px;
    left:var(--e5);
    width:24px;height:24px;
    display:grid;
    place-items:center;
    border-radius:var(--r-pastilla);
    background:var(--bg);
    border:1px solid var(--linea);
  }
  .nom6-flecha::before{
    content:"";
    width:6px;height:6px;
    margin-top:-3px;
    border-top:1.5px solid var(--nom6-c);
    border-right:1.5px solid var(--nom6-c);
    transform:rotate(135deg);
  }

  /* ── el retorno ────────────────────────────────────────────────── */
  /* Celular: corchete parado en la sangría izquierda. Sale por abajo de
     la etapa vi, sube y vuelve a entrar por arriba de la etapa i. */
  .nom6-retorno{
    position:absolute;
    left:0;top:38px;bottom:38px;
    width:32px;
    margin:0;
    border:1px solid var(--linea-fuerte);
    border-right:0;
    border-radius:var(--r-caja) 0 0 var(--r-caja);
  }
  .nom6-retorno::after{
    content:"";
    position:absolute;
    top:-4px;right:-3px;
    width:7px;height:7px;
    border-top:1.5px solid var(--linea-fuerte);
    border-right:1.5px solid var(--linea-fuerte);
    transform:rotate(45deg);
  }
  .nom6-retorno-txt{
    position:absolute;
    left:50%;top:50%;
    transform:translate(-50%,-50%) rotate(180deg);
    writing-mode:vertical-rl;
    padding:var(--e2) 0;
    background:var(--bg);
    font-size:var(--t-micro);
    letter-spacing:var(--track-versalita);
    text-transform:uppercase;
    font-weight:600;
    color:var(--acento-suave);
    white-space:nowrap;
  }

  /* ── lo que se dice al pie ─────────────────────────────────────── */

  .nom6-cierre{
    margin:var(--e6) 0 0;
    max-width:74ch;
    font-size:var(--t-base);
    line-height:1.65;
    color:var(--fg);
    border-left:3px solid var(--linea-fuerte);
    background:var(--superficie-baja);
    padding:var(--e4) var(--e5);
    border-radius:0 var(--r-chico) var(--r-chico) 0;
  }
  .nom6-cierre b{font-weight:500}

  .nom6-nota{
    margin:var(--e5) 0 0;
    max-width:74ch;
    font-size:var(--t-nota);
    line-height:1.7;
    color:var(--fg-suave);
  }
  .nom6-nota b{color:var(--fg);font-weight:500}

  /* ─────────────────────────────────────────────────────────────────
     560px — tableta. La tarjeta se parte: el relato a la izquierda, la
     salida a la derecha con su propia línea. Deja de ser una columna de
     bloques altos.
     ───────────────────────────────────────────────────────────────── */
  @media (min-width:560px){
    .nom6-cab{flex-direction:row;justify-content:space-between;align-items:flex-start;gap:var(--e7)}
    .nom6-sello{order:2;margin-top:var(--e1)}

    .nom6-etapa{
      display:grid;
      grid-template-columns:1.7fr 1fr;
      gap:var(--e5);
      align-items:start;
      padding:var(--e5);
    }
    .nom6-salida{
      margin:0;
      padding:0 0 0 var(--e5);
      border-top:0;
      border-left:1px solid var(--linea-tenue);
      align-self:stretch;
      align-content:center;
    }
    .nom6-flecha{left:var(--e6)}
  }

  /* ─────────────────────────────────────────────────────────────────
     1080px — escritorio. La tira se acuesta: seis columnas separadas por
     un pelo de línea, como una ficha, y el retorno pasa a ser el
     corchete de abajo. Antes de este ancho, seis columnas dejarían la
     medida de lectura en unos 110px y no se leería nada.
     ───────────────────────────────────────────────────────────────── */
  @media (min-width:1160px){

    .nom6-fases{
      display:grid;
      grid-template-columns:repeat(6,1fr);
      gap:1px;
      margin-bottom:var(--e4);
    }
    .nom6-fase{
      grid-column:span 2;
      padding-bottom:var(--e2);
      border-bottom:3px solid var(--nom6-c);
    }
    .nom6-fase b{
      display:block;
      font-size:var(--t-micro);
      letter-spacing:var(--track-versalita);
      text-transform:uppercase;
      font-weight:600;
      color:var(--fg);
    }
    .nom6-fase span{
      display:block;
      margin-top:var(--e1);
      font-size:var(--t-nota);
      color:var(--fg-suave);
    }

    .nom6-ciclo{padding-left:0}

    .nom6-rejilla{
      grid-template-columns:repeat(6,1fr);
      gap:1px;
      background:var(--linea);
      border:1px solid var(--linea);
      border-radius:var(--r-caja);
      overflow:hidden;
    }

    .nom6-etapa{
      display:flex;
      flex-direction:column;
      gap:var(--e3);
      padding:var(--e5) var(--e4);
      border:0;
      border-radius:0;
    }
    .nom6-chip{display:none}
    .nom6-texto{font-size:var(--t-nota)}
    .nom6-salida{
      margin:auto 0 0;
      padding:var(--e3) 0 0;
      border-left:0;
      border-top:1px solid var(--linea-tenue);
      align-self:auto;
    }

    /* el nudo se acuesta con la tira */
    .nom6-flecha{
      top:44px;
      left:-12px;
      background:var(--superficie);
    }
    .nom6-flecha::before{margin-top:0;margin-left:-2px;transform:rotate(45deg)}

    /* 8.333% = medio ancho de columna: las patas del corchete caen bajo
       el centro de la primera y de la última etapa. */
    .nom6-retorno{
      position:relative;
      left:auto;top:auto;bottom:auto;
      width:auto;height:58px;
      margin:0 8.333%;
      border:1px solid var(--linea-fuerte);
      border-top:0;
      border-radius:0 0 var(--r-caja) var(--r-caja);
    }
    .nom6-retorno::after{
      top:-4px;left:-4px;right:auto;
      transform:rotate(315deg);
    }
    .nom6-retorno-txt{
      left:50%;top:auto;bottom:-11px;
      transform:translateX(-50%);
      writing-mode:horizontal-tb;
      padding:0 var(--e3);
    }
  }

  /* ─────────────────────────────────────────────────────────────────
     Movimiento. Poco, lento y horizontal, como manda la marca: un punto
     que recorre el riel de vuelta de derecha a izquierda. Nada crece,
     nada rebota, y solo existe en escritorio —en celular el riel es
     vertical y moverlo ahí sería movimiento vertical—.
     ───────────────────────────────────────────────────────────────── */
  @media (min-width:1160px) and (prefers-reduced-motion:no-preference){
    .nom6-retorno::before{
      content:"";
      position:absolute;
      bottom:-3px;left:0;
      width:5px;height:5px;
      border-radius:var(--r-pastilla);
      background:var(--acento-suave);
      animation:nom6-viaje 12s linear infinite;
    }
    @keyframes nom6-viaje{
      0%{left:100%;opacity:0}
      10%{opacity:1}
      86%{opacity:1}
      100%{left:0;opacity:0}
    }
    .nom6-etapa{transition:background var(--paso)}
    .nom6-etapa:hover{background:var(--superficie-baja)}
  }

/* =========================== evidencia-oms === */
/* ══════════════════════════════════════════════════════════════════
     GRÁFICO 3 — La evidencia de la OMS
     ------------------------------------------------------------------
     Todas las clases van con prefijo .eviden- . En este repo ya chocaron
     .ficha, .pie y .contacto entre hojas distintas y costó caro; aquí no
     hay una sola clase sin prefijo.

     Ni un color escrito a mano: todo sale de /tokens.css. La retícula usa
     --dato-1 para la pérdida y --dato-4 / --dato-3 para el retorno.

     Registro de empresas: superficie fría (--bg-emp), rejillas de un píxel
     sobre --linea en vez de sombras. Es la densidad de instrumento que
     pide el sistema, con la misma tinta de la casa.
     ══════════════════════════════════════════════════════════════════ */

  *{box-sizing:border-box}
  body{margin:0;font-family:var(--texto);font-size:var(--t-base);
       line-height:var(--alto-normal);color:var(--fg);
       -webkit-font-smoothing:antialiased}
  h1,h2,h3,p,ul,figure,table,figcaption{margin:0}
  ul{list-style:none;padding:0}
  a{color:inherit}

  /* ── el contenedor del módulo ────────────────────────────────────── */
  .eviden-modulo{max-width:var(--ancho-emp);margin:0 auto;
                 background:var(--bg-emp);border:1px solid var(--linea);
                 border-radius:var(--r-grande);padding:var(--e5)}
  @media(min-width:760px){ .eviden-modulo{padding:var(--e8)} }

  /* Los rótulos en versalitas van en --acento, no en --acento-suave.
     --acento-suave sobre estas superficies da 3.9:1, y a 10.5px en
     mayúsculas eso no se lee: por debajo de AA. Misma familia, un paso más
     oscuro, 8.5:1. Es la única desviación deliberada del patrón de
     empresas.html, y es por contraste. */
  .eviden-rotulo{font-size:var(--t-micro);letter-spacing:var(--track-versalita);
                 text-transform:uppercase;color:var(--acento);
                 font-weight:600;line-height:var(--alto-apretado)}

  /* ── enunciado ───────────────────────────────────────────────────── */
  .eviden-titulo{font-family:var(--display);font-weight:400;
                 font-size:var(--t-h1);line-height:1.08;letter-spacing:-.015em;
                 color:var(--fg);max-width:19ch;margin-top:var(--e4);
                 text-wrap:balance}
  .eviden-entrada{color:var(--fg-suave);font-size:var(--t-lead);
                  line-height:var(--alto-normal);max-width:58ch;
                  margin-top:var(--e4)}

  /* ── el aviso obligatorio ─────────────────────────────────────────
     A tamaño de cuerpo y con la tinta normal, no en letra chica ni en
     gris. Aparece dos veces a propósito: arriba del gráfico y pegado a
     las tres cifras, para que ningún recorte del módulo se quede sin él. */
  .eviden-aviso{margin-top:var(--e6);background:var(--acento-lavado);
                border-left:3px solid var(--acento-suave);
                border-radius:0 var(--r-chico) var(--r-chico) 0;
                padding:var(--e4) var(--e5)}
  .eviden-aviso b{display:block;font-size:var(--t-micro);font-weight:600;
                  letter-spacing:var(--track-versalita);text-transform:uppercase;
                  color:var(--acento);margin-bottom:var(--e2)}
  .eviden-aviso p{font-size:var(--t-chico);color:var(--fg);
                  line-height:var(--alto-normal);max-width:62ch}

  /* Franja del mismo aviso, cosida a la rejilla de las tres cifras.
     grid-column:1/-1 es obligatorio: es el cuarto hijo de una rejilla de
     tres columnas y sin esto se sienta en la primera y deja dos celdas
     vacías de fondo gris a su derecha. */
  .eviden-franja{grid-column:1/-1;background:var(--superficie-emp-baja);
                 padding:var(--e4) var(--e5);font-size:var(--t-nota);
                 color:var(--fg);line-height:var(--alto-normal)}

  /* ── bloques ─────────────────────────────────────────────────────── */
  .eviden-bloque{margin-top:var(--e8);padding-top:var(--e7);
                 border-top:1px solid var(--linea)}
  .eviden-h2{font-family:var(--display);font-weight:400;font-size:var(--t-h2);
             line-height:1.14;color:var(--fg);margin-top:var(--e3);
             max-width:24ch;text-wrap:balance}

  /* ══ la visualización central ══════════════════════════════════════
     No es adorno: es la cifra dibujada. Doce mil millones no se entienden
     leyéndolos, así que se descomponen —cuadro, fila, bloque— hasta que la
     unidad cabe en la cabeza. Cada cuadro son 100 millones de días; cada
     fila, mil millones; las doce filas, la cifra completa.

     La columna de la derecha va acumulando, así que el ojo puede contar
     sin que el dibujo tenga que explicarse aparte. */
  .eviden-figura{margin-top:var(--e6)}
  .eviden-marco{background:var(--superficie-emp);border:1px solid var(--linea);
                border-radius:var(--r-caja);padding:var(--e5)}
  @media(min-width:760px){ .eviden-marco{padding:var(--e6)} }

  .eviden-rejilla{display:grid;grid-template-columns:repeat(10,1fr) max-content;
                  column-gap:var(--e1);row-gap:6px;align-items:center;
                  max-width:560px}
  .eviden-rejilla i{display:block;aspect-ratio:1;background:var(--dato-1);
                    border-radius:var(--r-chico)}
  /* --fg-tenue daría 3.6:1 en una etiqueta de eje de 10.5px. Es un dato,
     no un adorno: va en --fg-suave, 5.6:1. */
  .eviden-tick{font-size:var(--t-micro);color:var(--fg-suave);
               padding-left:var(--e2);white-space:nowrap;letter-spacing:.04em;
               font-variant-numeric:lining-nums tabular-nums;
               font-feature-settings:"lnum" 1,"tnum" 1}

  /* leyenda: las dos unidades del dibujo, con su muestra al lado */
  .eviden-leyenda{display:flex;flex-wrap:wrap;gap:var(--e3) var(--e6);
                  margin-top:var(--e5);padding-top:var(--e4);
                  border-top:1px solid var(--linea-tenue)}
  .eviden-leyenda li{display:flex;align-items:center;gap:var(--e2);
                     font-size:var(--t-chico);color:var(--fg-suave);
                     line-height:var(--alto-normal)}
  .eviden-sw{flex:none;width:14px;height:14px;background:var(--dato-1);
             border-radius:var(--r-chico)}
  /* El hueco va transparente, no en --superficie-emp: en celular el marco
     pierde su fondo blanco y un hueco pintado se vería como una raya. */
  .eviden-sw-fila{width:76px;height:14px;border-radius:0;
                  background:repeating-linear-gradient(90deg,
                    var(--dato-1) 0 6px, transparent 6px 8px)}
  .eviden-pie{font-size:var(--t-chico);color:var(--fg-suave);
              line-height:var(--alto-normal);margin-top:var(--e4);
              max-width:66ch}

  /* el puente entre las dos cifras de la OMS. Va marcado como cálculo
     nuestro, no como dato de la fuente: la división es de nosotros, los
     dos números son de ellos. */
  .eviden-puente{margin-top:var(--e5);border:1px solid var(--linea);
                 border-radius:var(--r-caja);background:var(--superficie-emp-baja);
                 padding:var(--e5)}
  .eviden-puente b{display:block;font-family:var(--display);font-weight:400;
                   font-size:var(--t-h3);color:var(--fg);line-height:1.2}
  .eviden-puente p{font-size:var(--t-chico);color:var(--fg-suave);
                   margin-top:var(--e2);max-width:62ch;
                   line-height:var(--alto-normal)}
  .eviden-puente em{font-style:normal;color:var(--acento);font-weight:500}

  /* ══ las tres cifras ═══════════════════════════════════════════════ */
  .eviden-cifras{display:grid;gap:1px;background:var(--linea);
                 border:1px solid var(--linea);border-radius:var(--r-caja);
                 overflow:hidden;margin-top:var(--e6)}
  @media(min-width:760px){ .eviden-cifras{grid-template-columns:repeat(3,1fr)} }
  .eviden-cifra{background:var(--superficie-emp);padding:var(--e6) var(--e5);
                display:flex;flex-direction:column;gap:var(--e3)}
  .eviden-cifra b{font-family:var(--display);font-weight:400;
                  font-size:var(--t-cifra-gr);line-height:.88;color:var(--fg);
                  letter-spacing:-.02em;
                  font-variant-numeric:lining-nums tabular-nums;
                  font-feature-settings:"lnum" 1,"tnum" 1}
  .eviden-cifra b i{display:block;font-style:normal;font-family:var(--texto);
                    font-size:var(--t-nota);letter-spacing:var(--track-versalita);
                    text-transform:uppercase;color:var(--acento);
                    margin-top:var(--e3);line-height:1.35;font-weight:500}
  .eviden-cifra p{font-size:var(--t-chico);color:var(--fg-suave);
                  line-height:var(--alto-normal);flex:1}
  .eviden-cifra cite{font-style:normal;font-size:var(--t-nota);
                     color:var(--acento);padding-top:var(--e3);
                     border-top:1px solid var(--linea-tenue)}

  /* el 4 a 1, con la misma retícula pero otra unidad: aquí un cuadro es
     un dólar. Se separa el invertido del retorno con aire, no con color
     solo, para que se lea también sin distinguir tonos. */
  .eviden-ret{display:flex;flex-wrap:wrap;gap:var(--e2) var(--e4);
              align-items:center}
  .eviden-ret span{display:inline-flex;align-items:center;gap:var(--e1)}
  .eviden-ret i{display:block;width:20px;height:20px;background:var(--dato-3);
                border-radius:var(--r-chico);flex:none}
  .eviden-ret .eviden-inv{background:var(--dato-4)}
  .eviden-ret em{font-style:normal;font-size:var(--t-nota);
                 color:var(--fg-suave);margin-left:var(--e1)}

  /* ══ la alternativa en texto ═══════════════════════════════════════
     Nada de información que viva solo en el dibujo. Esta tabla dice lo
     mismo con palabras y carga las ligas a los documentos originales.
     A 559px y abajo deja de ser tabla y se vuelve tarjetas. */
  .eviden-tabla{width:100%;border-collapse:collapse;margin-top:var(--e5);
                font-size:var(--t-chico)}
  .eviden-tabla caption{text-align:left;font-size:var(--t-chico);
                        color:var(--fg-suave);line-height:var(--alto-normal);
                        padding-bottom:var(--e4);max-width:62ch}
  .eviden-tabla th{text-align:left;font-size:var(--t-micro);font-weight:600;
                   letter-spacing:var(--track-versalita);text-transform:uppercase;
                   color:var(--acento);padding:var(--e3) var(--e3);
                   border-bottom:1px solid var(--linea);vertical-align:bottom}
  .eviden-tabla td{padding:var(--e3);border-bottom:1px solid var(--linea-tenue);
                   color:var(--fg-suave);line-height:var(--alto-normal);
                   vertical-align:top}
  .eviden-tabla td:first-child{color:var(--fg);font-weight:500}
  .eviden-tabla tr:last-child td{border-bottom:0}
  .eviden-tabla th:first-child{width:20%}
  .eviden-tabla th:last-child{width:34%}

  /* Las fuentes son el punto del módulo entero: color de acción, tamaño de
     cuerpo, subrayadas y con 44px de alto tocable. Nunca gris diminuto. */
  .eviden-liga{display:inline-block;min-height:44px;padding:var(--e3) 0;
               color:var(--acento);font-size:var(--t-chico);font-weight:500;
               text-decoration:underline;text-decoration-color:var(--linea-fuerte);
               text-underline-offset:3px;text-decoration-thickness:1px;
               transition:color var(--paso),text-decoration-color var(--paso)}
  .eviden-liga:hover{color:var(--acento-fuerte);
                     text-decoration-color:var(--acento)}

  .eviden-nota{margin-top:var(--e6);padding-top:var(--e5);
               border-top:1px solid var(--linea);font-size:var(--t-chico);
               color:var(--fg-suave);line-height:var(--alto-suelto);
               max-width:72ch}
  .eviden-nota strong{color:var(--fg);font-weight:500}

  /* ── 390px: el punto de partida, no una versión encogida ───────────
     La tabla se convierte en tarjetas con su rótulo arriba de cada dato;
     las cifras siguen a tamaño de cifra; la retícula conserva sus diez
     columnas porque la fila ES la unidad y partirla rompería el dibujo. */
  @media(max-width:559px){
    /* A 390px había tres cajas anidadas —página, módulo, marco— que se
       comían 148 de los 390 y dejaban los cuadros en 16.8px. En celular el
       marco suelta su chrome y el dibujo se apoya directo sobre el módulo:
       los cuadros suben a ~24px. Es una decisión de celular, no un
       encogimiento del diseño de escritorio. */
    .eviden-modulo{padding:var(--e4)}
    .eviden-marco{background:var(--bg-emp);border:0;border-radius:0;padding:0}
    .eviden-tabla{margin-top:var(--e4)}
    .eviden-tabla thead{position:absolute;width:1px;height:1px;overflow:hidden;
                        clip-path:inset(50%);white-space:nowrap}
    .eviden-tabla tr{display:block;background:var(--superficie-emp);
                     border:1px solid var(--linea);border-radius:var(--r-caja);
                     padding:var(--e4);margin-bottom:var(--e3)}
    .eviden-tabla td{display:block;border-bottom:0;padding:0 0 var(--e4)}
    .eviden-tabla td:last-child{padding-bottom:0}
    .eviden-tabla td::before{content:attr(data-r);display:block;
                             font-size:var(--t-micro);font-weight:600;
                             letter-spacing:var(--track-versalita);
                             text-transform:uppercase;color:var(--acento);
                             margin-bottom:var(--e1)}
    .eviden-rejilla{column-gap:3px;row-gap:5px}
    .eviden-sw-fila{width:60px}
  }

  /* ── movimiento: uno solo, horizontal, y opcional ──────────────────
     La retícula se descubre de izquierda a derecha, como se lee. Nada
     que rebote, nada que crezca, nada vertical. Fuera de este bloque el
     gráfico ya está en su estado final, así que quien pidió no ver
     animaciones simplemente lo ve dibujado. */
  @media (prefers-reduced-motion:no-preference){
    .eviden-rejilla{animation:eviden-barrido var(--paso-lento) both}
    .eviden-cifras{animation:eviden-barrido var(--paso-lento) both;
                   animation-delay:.12s}
  }
  @keyframes eviden-barrido{
    from{clip-path:inset(0 100% 0 0)}
    to{clip-path:inset(0 0 0 0)}
  }

/* =========================== mockup-producto === */
/* ─────────────────────────────────────────────────────────────────
     GRÁFICO 1 · Mockup de producto para la portada
     Prefijo de clase: .mock-   (este repo ya tuvo colisiones reales)

     Qué tiene que decir en tres segundos: "dices con qué llegas y te
     proponen a una persona con hora". No un catálogo, no una app.

     Honestidad, que aquí es lo que más pesa
     ---------------------------------------
     Soul Healing NO tiene app, ni portal, ni emparejamiento automático.
     Por eso el rótulo "Ejemplo de la experiencia" va DENTRO de la
     pantalla del teléfono, no al pie: si alguien recorta el teléfono
     para una publicación, se lleva el rótulo pegado. Va además el aviso
     largo arriba y la firma abajo — tres veces, a propósito.

     La ficha de la profesional es una PLANTILLA declarada. Hoy no hay
     ninguna psicóloga con cédula dada de alta, así que los campos de
     identidad dicen lo que son: "Nombre de la profesional", "Cédula
     profesional 0000000", con subrayado punteado de campo vacío. Nunca
     una persona inventada.

     Ni una cifra de la clínica: no hay precio, ni número de sesiones,
     ni horarios concretos. Lo que se enseña es DÓNDE va cada cosa.

     390px primero. El teléfono mide 340px de ancho máximo: a 390 con el
     margen del cuerpo queda casi a sangre, que es como tiene que verse.
     La columna de apoyos se va al lado sólo desde 940px.

     Ni un color literal. Todo sale de tokens.css.
     ───────────────────────────────────────────────────────────────── */

  *,*::before,*::after{box-sizing:border-box}
  h1,h2,h3,p,ul,ol,dl,dd,figure,figcaption{margin:0}
  ul,ol{list-style:none;padding:0}

  body{margin:0;padding:var(--e4);background:var(--bg);
       font-family:var(--texto);color:var(--fg);
       font-size:var(--t-base);line-height:var(--alto-normal);
       -webkit-font-smoothing:antialiased}
  @media(min-width:760px){ body{padding:var(--e6)} }

  .mock{max-width:var(--ancho-emp);margin:0 auto}

  /* Sólo para lectores de pantalla. Nunca lleva información que no esté
     también a la vista: aquí sirve para marcar estados del dibujo. */
  .mock-oculto{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
               overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

  /* ── el aviso largo ───────────────────────────────────────────────
     Arriba, en tamaño de lectura y con la tinta normal. No es letra
     chica: es la primera cosa que se lee. */
  .mock-aviso{display:flex;gap:var(--e3);align-items:flex-start;
              max-width:var(--ancho-texto);
              background:var(--aviso-bg);border-left:3px solid var(--aviso);
              border-radius:0 var(--r-chico) var(--r-chico) 0;
              padding:var(--e3) var(--e4)}
  .mock-aviso i{flex:none;width:var(--e2);height:var(--e2);
                border-radius:var(--r-pastilla);background:var(--aviso);
                margin-top:calc(var(--e2) - 1px)}
  .mock-aviso p{font-size:var(--t-chico);line-height:1.55;color:var(--fg)}
  .mock-aviso b{font-weight:600;color:var(--aviso)}

  /* ── la rejilla ───────────────────────────────────────────────────
     Solo el teléfono. Los tres apoyos que iban aquí como segunda columna
     se absorbieron en la sección de contraste de la portada (.diferencia,
     agosto 2026), con su copy reescrito como «en otros lados / aquí»: sus
     estilos y sus claves se fueron con ellos. */
  .mock{width:100%}
  .mock-rejilla{display:grid;gap:var(--e6);margin-top:var(--e5)}

  /* ── el teléfono ──────────────────────────────────────────────────
     Marco de CSS, no imagen. El bisel es el padding; la pantalla es el
     hijo con overflow oculto. */
  /* Proporciones de un iPhone 16 Pro Max: 440×956 puntos, o sea 0.4603 de
     ancho por alto. Antes el marco no tenía relación de aspecto y su alto lo
     ponía el contenido: salía de 259×868, una razón de 0.298, que no se parece
     a ningún teléfono. Ahora el marco manda y el contenido se acomoda adentro. */
  .mock-tel{--tel-ancho:340px;
            width:100%;max-width:var(--tel-ancho);margin:0 auto;
            aspect-ratio:440 / 956;
            padding:var(--e2);
            background:var(--superficie);
            border:1px solid var(--linea-fuerte);
            border-radius:calc(var(--e6) + var(--e2));
            box-shadow:var(--sombra-3);
            display:flex}
  /* En escritorio el teléfono acompaña a los tres pasos, no los aplasta:
     320 de ancho son ~695 de alto, a la altura de la columna de texto. */
  /* Excepción al juego canónico (560/760/1160): el ancho del teléfono dibujado; a 760 el dibujo daría un salto de 180px */
  @media(min-width:940px){ .mock-tel{--tel-ancho:320px} }
  /* Y nunca más alto que la ventana: con la proporción del teléfono, 360px de
     ancho son 782 de alto, y en una pantalla de portátil eso empuja la portada
     fuera de cuadro. OJO: el presupuesto de altura se convierte en ANCHO y la
     proporción saca el alto. La versión anterior ponía max-height con
     width:auto, y width:auto en flujo de bloque NO se deduce de la
     proporción: se estira hasta max-width. Resultado: 360 de ancho contra
     66vh de alto — un teléfono aplastado en cualquier portátil. */
  /* Aquí vivía un tope por altura de ventana (64vh convertido a ancho por la
     proporción). Era protección de cuando el teléfono encabezaba la PORTADA
     y no podía salirse del primer cuadro; a media página esa regla hacía
     daño: en un portátil (ventana de ~700px) encogía el marco a ~210px de
     ancho mientras la tipografía interior seguía en píxeles fijos — todo
     envuelto y desproporcionado (reporte de Jad, 26/08). A media página el
     teléfono simplemente MIDE lo suyo y la página se desplaza, como
     cualquier figura. */

  /* ── las vistas que se turnan ──────────────────────────────────────
     El marco tiene proporción fija de teléfono, así que ya no cabe todo de
     una vez: el contenido se reparte en pantallas y se turnan cada cinco
     segundos, como se vería usándolo. La que no toca va con [hidden], que
     además la esconde de los lectores de pantalla. */
  /* Cada vista ocupa el alto de la pantalla y reparte su contenido, como una
     pantalla de aplicación de verdad: lo que encabeza arriba, la acción abajo.
     Sin esto el contenido se apelotonaba arriba y quedaban 345 de 764 píxeles
     vacíos —casi la mitad de la pantalla— porque el marco ahora tiene la
     proporción del teléfono y ya no la altura del contenido. */
  .mock-vista{flex:1;min-height:0;display:flex;flex-direction:column;
              gap:var(--e3)}
  /* Solo el ÚLTIMO elemento se va al fondo — la acción de la pantalla—, y el
     resto se queda junto arriba. Con space-between se repartía todo por igual
     y la pantalla quedaba desparramada: el encabezado arriba del todo, la
     ayuda a media altura y las opciones flotando. Las aplicaciones no se ven
     así; agrupan arriba y dejan abajo lo que se toca. */
  .mock-vista > :last-child:not(:only-child){margin-top:auto}
  /* Una vista de un solo bloque —la ficha de quien atiende— CONSERVA su
     tamaño natural y el aire sobrante se reparte arriba y abajo. La versión
     anterior la estiraba a toda la pantalla (flex:1) y el marco de
     proporción fija le inyectaba el sobrante ENTRE los renglones: en
     escritorio la ficha salía desparramada, con huecos de 40px entre
     ENFOQUE y MODALIDAD que ninguna aplicación real enseña (reporte de Jad,
     26/08/2026). */
  .mock-vista:has(> :only-child){justify-content:center}
  .mock-vista:has(> :only-child) > *{flex:0 0 auto;display:flex;flex-direction:column}
  .mock-vista[hidden]{display:none}
  @media (prefers-reduced-motion: no-preference){
    .mock-vista{animation:mock-entra .45s ease both}
  }
  @keyframes mock-entra{from{opacity:0;transform:translateX(10px)}
                        to{opacity:1;transform:none}}

  .mock-pantalla{flex:1;min-height:0;
                 background:var(--bg);border:1px solid var(--linea);
                 border-radius:var(--e6);overflow:hidden;
                 display:flex;flex-direction:column}

  /* barra de estado: la isla dinámica va en medio, como en un teléfono
     de verdad. En el iPhone 16 Pro Max mide 125×37 puntos de 440 de ancho
     —28% y proporción 125/37—, y es negra siempre, también en claro: es
     la cámara, no un adorno del tema. */
  .mock-estado{display:flex;align-items:center;justify-content:space-between;
               gap:var(--e2);padding:var(--e2) var(--e4) var(--e1)}
  .mock-hora{font-size:var(--t-micro);font-weight:600;color:var(--fg);
             font-variant-numeric:tabular-nums;flex:none}
  .mock-ceja{flex:none;width:28%;aspect-ratio:125 / 37;height:auto;
             border-radius:var(--r-pastilla);background:#101014}
  .mock-iconos{flex:none;display:block}

  /* ── la cinta de honestidad, DENTRO de la pantalla ────────────────
     Si el teléfono se recorta para una publicación, esto va adentro. */
  .mock-cinta{display:flex;align-items:center;gap:var(--e2);
              padding:var(--e2) var(--e4);
              background:var(--aviso-bg);
              border-top:1px solid var(--linea);
              border-bottom:1px solid var(--linea);
              font-size:var(--t-micro);font-weight:600;
              letter-spacing:var(--track-versalita);text-transform:uppercase;
              color:var(--aviso);line-height:var(--alto-apretado)}
  .mock-cinta i{flex:none;width:var(--e1);height:var(--e1);
                border-radius:var(--r-pastilla);background:var(--aviso)}

  /* ── el contenido de la pantalla ─────────────────────────────────── */
  .mock-app{padding:var(--e4);gap:var(--e3);flex:1;min-height:0;
            display:flex;flex-direction:column}

  .mock-marca{font-family:var(--display);font-size:var(--t-nota);
              text-transform:uppercase;letter-spacing:.26em;
              color:var(--fg);line-height:var(--alto-apretado)}

  .mock-pregunta{font-family:var(--display);font-weight:400;
                 font-size:var(--t-h3);line-height:1.14;letter-spacing:-.01em;
                 color:var(--fg);margin-top:var(--e2)}
  .mock-pie-preg{font-size:var(--t-nota);color:var(--fg-suave);line-height:1.45}

  /* motivos tocables: envuelven, no se empujan con el dedo */
  .mock-motivos{display:flex;flex-wrap:wrap;gap:var(--e2)}
  .mock-motivo{display:inline-flex;align-items:center;gap:var(--e1);
               padding:var(--e2) var(--e3);
               font-size:var(--t-nota);color:var(--fg);
               background:var(--superficie);
               border:1px solid var(--linea);
               border-radius:var(--r-pastilla);
               box-shadow:var(--sombra-1);white-space:nowrap}
  .mock-motivo-on{background:var(--acento-lavado);border-color:var(--linea-fuerte);
                  color:var(--acento);font-weight:600;box-shadow:none}
  .mock-palomita{flex:none;display:block}

  /* el renglón que explica por qué aparece la ficha */
  .mock-paso{display:flex;align-items:center;gap:var(--e2);
             margin-top:var(--e1);
             font-size:var(--t-micro);letter-spacing:var(--track-versalita);
             text-transform:uppercase;font-weight:600;color:var(--acento);
             line-height:var(--alto-apretado)}
  .mock-flecha{flex:none;display:block}

  /* ── la ficha: una PLANTILLA, y se nota ──────────────────────────── */
  .mock-ficha{background:var(--superficie);border:1px solid var(--linea);
              border-radius:var(--r-caja);padding:var(--e3);
              display:grid;gap:var(--e3);box-shadow:var(--sombra-2)}

  /* El pie de la figura: una nota, no una advertencia. Sin recuadro, sin
     viñeta y sin color de aviso — la cinta del teléfono ya dice que es
     ilustrativo, así que esto solo tiene que explicar de qué es el dibujo. */
  .mock-pie{margin:var(--e3) 0 0;max-width:62ch}
  .mock-pie p{margin:0;font-size:var(--t-nota);line-height:1.6;color:var(--fg-suave)}

  .mock-sello{justify-self:start;font-size:var(--t-micro);font-weight:600;
              letter-spacing:.08em;text-transform:uppercase;
              padding:var(--e1) var(--e2);border-radius:var(--r-pastilla);
              background:var(--neutro-bg);color:var(--neutro)}

  .mock-quien{display:flex;gap:var(--e3);align-items:center}
  .mock-foto{flex:none;display:block;width:var(--e8);height:var(--e8)}
  .mock-nombre{font-family:var(--display);font-weight:400;font-size:var(--t-lead);
               line-height:1.15;color:var(--fg-suave);
               border-bottom:1px dashed var(--linea-fuerte);
               padding-bottom:2px}
  /* La credencial vive DEBAJO del renglón de la foto, a lo ancho de la
     tarjeta. Junto a la foto le quedaban ~120px: una autorización real
     —tipo, folio y emisor— se partía en ocho renglones de una palabra. */
  .mock-cedula{margin-top:calc(-1 * var(--e2));font-size:var(--t-nota);
               color:var(--fg-suave);font-variant-numeric:tabular-nums;
               line-height:1.45}
  .mock-cedula span{border-bottom:1px dashed var(--linea-fuerte)}

  /* Los datos del servicio sí van con la tinta normal: el que es plantilla
     es quién la da, no qué es. */
  /* Apilados, como la lista de detalle de una aplicación de verdad. En dos
     columnas, la etiqueta más larga (DISPONIBILIDAD) dejaba al valor ~100px
     y «Se aparta por WhatsApp» salía en tres renglones. */
  .mock-datos{display:grid;grid-template-columns:1fr;gap:2px;
              padding-top:var(--e3);border-top:1px solid var(--linea-tenue)}
  .mock-datos dt{font-size:var(--t-micro);letter-spacing:.06em;
                 text-transform:uppercase;color:var(--fg-suave);font-weight:600;
                 line-height:1.5}
  .mock-datos dt:not(:first-of-type){margin-top:var(--e2)}
  .mock-datos dd{font-size:var(--t-nota);color:var(--fg);line-height:1.5}

  .mock-precio{padding-top:var(--e3);border-top:1px solid var(--linea-tenue);
               font-size:var(--t-nota);color:var(--fg-suave);line-height:1.45}

  /* El botón es el RETRATO de un botón, no un botón: es un párrafo, no un
     enlace ni un control de formulario, para que no quede nada enfocable
     que no lleve a ningún lado.
     Mismo criterio que el selector de periodo del tablero de empresa. */
  .mock-boton{display:block;text-align:center;
              background:var(--acento);color:var(--fg-inverso);
              padding:var(--e3) var(--e4);border-radius:var(--r-pastilla);
              font-size:var(--t-chico);font-weight:600;letter-spacing:.01em;
              line-height:var(--alto-apretado)}

  .mock-barrita{width:var(--e9);height:var(--e1);margin:0 auto var(--e2);
                border-radius:var(--r-pastilla);background:var(--linea-fuerte)}


  /* ── movimiento ───────────────────────────────────────────────────
     Una sola cosa se mueve, y horizontal: la ficha entra desde la
     derecha, como cuando se pasa una página en el resto del sitio.

     El estado congelado ES el estado final salvo dieciséis pixeles a un
     lado. Nada de opacidad ni de escala: si la pestaña nunca compone,
     una animación que arranca en opacity 0 deja la ficha invisible —o
     sea, el dibujo diría que no hay nadie— y eso no puede pasar. */
  @media (prefers-reduced-motion:no-preference){
    @keyframes mock-desliza{from{transform:translateX(var(--e4))}
                              to{transform:translateX(0)}}
    .mock-ficha{animation:mock-desliza var(--paso-lento) forwards}
  }

/* =========================== recorrido-pantallas === */
/* ─────────────────────────────────────────────────────────────────
     GRÁFICO 7 · El recorrido, como pantallas encadenadas
     Prefijo de clase: .via-   (este repo ya tuvo colisiones reales)

     La idea: cinco pasos explicados con cinco MINI PANTALLAS, no con
     cinco tarjetas numeradas. Una tarjeta numerada dice "hay cinco
     pasos"; una pantalla dice "así se ve". Cada dibujo tiene que
     distinguirse del de al lado de un vistazo: lista, ficha, rejilla,
     marco de video, continuidad. Si dos se parecen, el gráfico falló.

     Honestidad, que aquí es lo que más pesa. Soul Healing agenda por
     videollamada y cobra por fuera. NO hay app, ni portal de paciente,
     ni emparejamiento automático, ni medición de progreso. Por eso:
       · banda de "Ejemplo de la experiencia" arriba, en tamaño de lectura;
       · un sello "Ejemplo" DENTRO de cada pantalla, para que quien
         recorte una sola imagen se lleve el rótulo con ella;
       · la ficha del paso 2 es plantilla en blanco —hoy la clínica no tiene
         dada de alta a ninguna profesional con cédula, y aquí no se
         inventa una—;
       · un bloque final que separa lo que ya existe de lo que no.

     Diseñado a 390px primero: una columna, pantallas de ancho completo.
     A 620px pasa a dos columnas —con la pantalla ya topada a 248px, que
     una "mini pantalla" de 400px deja de ser mini— y a 1060px a las
     cinco en fila, que es cuando la cadena se lee como cadena.

     Las cinco miden EXACTAMENTE lo mismo en cuanto van lado a lado, y
     eso no es capricho: si una es más alta, su rótulo arranca más abajo
     que los otros cuatro y la fila se ve rota. Se consigue con un alto
     mínimo del lienzo (--via-alto) y con el marco de video estirándose
     a lo que sobre, en vez de imponer su proporción.

     Todo color, espacio, tipo y radio sale de tokens.css. Ni un solo
     color escrito a mano en esta hoja.
     ───────────────────────────────────────────────────────────────── */

  *,*::before,*::after{box-sizing:border-box}
  body{margin:0;padding:var(--e5);background:var(--bg);
       font-family:var(--texto);color:var(--fg);
       font-size:var(--t-base);line-height:var(--alto-normal);
       -webkit-font-smoothing:antialiased}

  .via{max-width:var(--ancho-max);margin:0 auto;
       /* Locales. La letra de DENTRO de las pantallas va a 12.5px en
          celular, donde la pantalla ocupa los 340px de ancho, y se
          queda fija en 10.5px de 620px para arriba, donde la pantalla
          ya no crece. */
       --via-mini:var(--t-nota);
       /* Alto mínimo del lienzo: iguala las cinco pantallas cuando van
          lado a lado, sin depender de subgrid ni de que los textos midan
          lo mismo. A 390px NO se usa: apiladas nadie compara alturas y
          forzarlas deja huecos en blanco abajo de las más cortas. */
       --via-alto:auto}
  /* De 620px para arriba la mini pantalla deja de crecer con la columna
     —una "mini pantalla" de 400px ya no es mini— y su letra interior se
     queda fija. Las dos cosas juntas son lo que permite que las cinco
     midan exactamente igual en cualquier ancho. */
  @media(min-width:560px){
    .via{--via-mini:var(--t-micro);
         --via-alto:calc(var(--e10) + var(--e8) + var(--e5))}
  }

  .via-oculto{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
              overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

  /* ── cabecera ─────────────────────────────────────────────────────
     El rótulo va en --fg-suave y no en --acento-suave: a 10.5px el lila
     se queda abajo de AA contra el papel. */
  .via-rotulo{margin:0;font-size:var(--t-micro);text-transform:uppercase;
              letter-spacing:var(--track-versalita);color:var(--fg-suave);
              font-weight:600}
  .via-titulo{font-family:var(--display);font-weight:400;font-size:var(--t-h1);
              line-height:1.06;letter-spacing:-.015em;margin:var(--e3) 0 0;
              max-width:16ch;text-wrap:balance}
  .via-entrada{margin:var(--e4) 0 0;color:var(--fg-suave);
               font-size:var(--t-lead);max-width:58ch;line-height:1.6}

  /* ── la banda de honestidad ───────────────────────────────────────
     Arriba, en tamaño de lectura, no en letra chica al pie. */
  .via-aviso{display:flex;gap:var(--e3);align-items:flex-start;
             margin:var(--e5) 0 0;max-width:66ch;
             background:var(--aviso-bg);border-left:3px solid var(--aviso);
             border-radius:0 var(--r-chico) var(--r-chico) 0;
             padding:var(--e3) var(--e4);font-size:var(--t-chico);
             line-height:1.55;color:var(--fg)}
  .via-aviso i{flex:none;width:var(--e2);height:var(--e2);
               border-radius:var(--r-pastilla);background:var(--aviso);
               margin-top:calc(var(--e2) - 1px)}
  .via-aviso p{margin:0}
  .via-aviso b{color:var(--aviso);font-weight:600}

  .via-h2{margin:var(--seccion) 0 0;font-size:var(--t-micro);
          text-transform:uppercase;letter-spacing:var(--track-versalita);
          color:var(--acento);font-weight:600}

  /* ── la cadena ────────────────────────────────────────────────────
     Una columna a 390px, dos a 620 y las cinco en fila a 1060. */
  .via-pasos{list-style:none;margin:var(--e5) 0 0;padding:0;
             display:grid;gap:var(--e6) var(--e5)}
  @media(min-width:560px){ .via-pasos{grid-template-columns:repeat(2,1fr)} }
  @media(min-width:1160px){
    .via-pasos{grid-template-columns:repeat(5,1fr);gap:var(--e5)}
  }

  .via-paso{display:grid;gap:var(--e3);align-content:start}

  /* ── el nodo y el hilo ────────────────────────────────────────────
     La cadena no se dibuja con flechas entre tarjetas —que apuntan mal
     en cuanto cambia el número de columnas— sino con un riel: número
     redondo y un hilo que sale de él. En fila, el hilo se mete en el
     hueco de la rejilla con margen negativo y los cinco se sueldan en
     una sola línea. Apilado, el mismo hilo queda como raya de título. */
  .via-nodo{display:flex;align-items:center;gap:var(--e3)}
  .via-num{flex:none;width:calc(var(--e5) + var(--e1));
           height:calc(var(--e5) + var(--e1));border-radius:var(--r-pastilla);
           background:var(--acento);color:var(--fg-inverso);
           display:grid;place-items:center;font-size:var(--t-nota);
           font-weight:600;line-height:1;
           font-variant-numeric:lining-nums tabular-nums}
  .via-hilo{position:relative;flex:1;height:1px;background:var(--linea)}
  @media(min-width:1160px){
    .via-paso:not(:last-child) .via-hilo{margin-right:calc(var(--e5) * -1)}
    .via-paso:not(:last-child) .via-hilo::after{content:"";position:absolute;
      right:var(--e1);top:50%;width:var(--e2);height:var(--e2);
      border-top:1px solid var(--linea-fuerte);
      border-right:1px solid var(--linea-fuerte);
      transform:translateY(-50%) rotate(45deg)}
  }

  /* ── el marco de la mini pantalla ─────────────────────────────── */
  .via-pantalla{border:1px solid var(--linea);border-radius:var(--r-grande);
                background:var(--superficie);overflow:hidden;
                box-shadow:var(--sombra-1)}
  @media(min-width:560px){
    .via-pantalla{max-width:calc(var(--e10) + var(--e9) + var(--e5))}
  }
  @media(min-width:1160px){ .via-pantalla{max-width:none} }

  .via-tope{display:flex;align-items:center;gap:var(--e2);
            padding:var(--e2) var(--e3);background:var(--superficie-baja);
            border-bottom:1px solid var(--linea);overflow:hidden}
  .via-puntos{display:flex;gap:2px;flex:none}
  .via-puntos i{width:var(--e1);height:var(--e1);
                border-radius:var(--r-pastilla);background:var(--linea-fuerte)}
  .via-tope-t{font-size:var(--t-micro);color:var(--fg-suave);font-weight:600;
              letter-spacing:.04em;white-space:nowrap;overflow:hidden;
              text-overflow:ellipsis}
  /* El sello viaja DENTRO de la pantalla a propósito. */
  .via-sello{flex:none;margin-left:auto;font-size:var(--t-micro);
             letter-spacing:.06em;text-transform:uppercase;font-weight:600;
             color:var(--aviso);background:var(--aviso-bg);
             border-radius:var(--r-pastilla);padding:0 var(--e2);
             line-height:1.7}

  /* Columna flex y no rejilla: es lo que deja mandar al fondo el pie de
     la pantalla (margin-top:auto) y estirar el marco de video (flex:1)
     sin escribir una plantilla de filas distinta para cada pantalla. */
  .via-lienzo{padding:var(--e3);display:flex;flex-direction:column;
              gap:var(--e2);min-height:var(--via-alto)}

  /* El pie de pantalla: la línea chica que en un producto de verdad
     siempre está —en qué paso vas, en qué huso son esas horas—. De paso
     ocupa el aire que dejan abajo las pantallas de menos contenido. */
  .via-pie-p{margin:auto 0 0;display:flex;align-items:center;gap:var(--e2);
             padding-top:var(--e2);border-top:1px solid var(--linea-tenue);
             font-size:var(--t-micro);color:var(--fg-suave);line-height:1.6}
  .via-tres{display:flex;gap:2px;flex:none;margin-left:auto}
  .via-tres i{width:var(--e4);height:2px;border-radius:var(--r-pastilla);
              background:var(--dato-vacio)}
  .via-tres .via-tres-on{background:var(--acento)}

  /* ── 1 · lista de motivos ─────────────────────────────────────── */
  .via-preg{margin:0;font-size:var(--t-nota);color:var(--fg);font-weight:600;
            line-height:1.35}
  .via-ops{list-style:none;margin:0;padding:0;display:grid;gap:var(--e1)}
  .via-op{display:flex;align-items:center;gap:var(--e2);
          font-size:var(--via-mini);color:var(--fg-suave);line-height:1.5;
          border:1px solid var(--linea);border-radius:var(--r-chico);
          padding:var(--e1) var(--e2)}
  .via-op i{flex:none;width:var(--e2);height:var(--e2);
            border-radius:var(--r-pastilla);background:var(--superficie);
            border:1px solid var(--linea-fuerte)}
  .via-op-on{border-color:var(--acento);background:var(--acento-lavado);
             color:var(--acento);font-weight:600}
  .via-op-on i{background:var(--acento);border-color:var(--acento)}

  /* ── 2 · ficha de plantilla ───────────────────────────────────── */
  .via-ficha{display:flex;align-items:center;gap:var(--e3)}
  .via-foto{flex:none;width:calc(var(--e6) + var(--e2));
            height:calc(var(--e6) + var(--e2));border-radius:var(--r-pastilla);
            border:1px dashed var(--linea-fuerte);background:var(--superficie-baja)}
  .via-nom{margin:0;font-family:var(--display);font-size:var(--t-chico);
           line-height:1.2;color:var(--fg)}
  .via-ced{margin:var(--e1) 0 0;font-size:var(--via-mini);color:var(--fg-suave);
           font-variant-numeric:lining-nums tabular-nums}
  .via-tag{align-self:flex-start;font-size:var(--t-micro);letter-spacing:.08em;
           text-transform:uppercase;font-weight:600;color:var(--neutro);
           background:var(--neutro-bg);border:1px dashed var(--linea-fuerte);
           border-radius:var(--r-chico);padding:0 var(--e2);line-height:1.8}
  /* Renglones de texto falso: el idioma universal de "esto es un molde". */
  .via-barras{display:grid;gap:var(--e1)}
  .via-barras i{height:var(--e1);border-radius:var(--r-pastilla);
                background:var(--dato-vacio)}
  .via-chips{list-style:none;margin:0;padding:0;display:flex;
             flex-wrap:wrap;gap:var(--e1)}
  .via-chips li{font-size:var(--via-mini);color:var(--fg-suave);line-height:1.6;
                border:1px solid var(--linea);border-radius:var(--r-pastilla);
                padding:0 var(--e2)}

  /* ── 3 · rejilla de horas ─────────────────────────────────────── */
  .via-dias{list-style:none;margin:0;padding:0;display:grid;
            grid-template-columns:repeat(7,1fr);gap:2px}
  .via-dias li{text-align:center;font-size:var(--t-micro);color:var(--fg-suave);
               padding:var(--e1) 0;border-radius:var(--r-chico);line-height:1.2}
  .via-dia-on{background:var(--acento);color:var(--fg-inverso);font-weight:600}
  .via-horas{list-style:none;margin:0;padding:0;display:grid;
             grid-template-columns:repeat(3,1fr);gap:var(--e1)}
  .via-horas li{text-align:center;font-size:var(--via-mini);color:var(--fg);
                border:1px solid var(--linea);border-radius:var(--r-chico);
                padding:var(--e1) 0;line-height:1.5;
                font-variant-numeric:lining-nums tabular-nums}
  .via-hora-on{background:var(--acento);border-color:var(--acento);
               color:var(--fg-inverso);font-weight:600}
  .via-hora-off{color:var(--fg-suave);background:var(--superficie-baja);
                border-style:dashed;text-decoration:line-through}

  /* ── 4 · marco de videollamada ────────────────────────────────── */
  .via-video{position:relative;aspect-ratio:16/9;overflow:hidden;
             display:grid;place-items:center;
             background:var(--acento-lavado);border:1px solid var(--linea);
             border-radius:var(--r-caja)}
  /* Lado a lado, la altura del marco de video la manda el lienzo y no su
     proporción: si el video decide, esta pantalla queda más alta que las
     otras cuatro y el rótulo de abajo arranca desalineado. Apilado en
     celular no hay con qué compararla, y ahí sí manda la proporción. */
  @media(min-width:560px){
    .via-video{aspect-ratio:auto;flex:1}
  }
  .via-video svg{display:block;width:calc(var(--e7) + var(--e3));height:auto}
  .via-yo{position:absolute;right:var(--e2);bottom:var(--e2);
          width:calc(var(--e6) + var(--e1));height:var(--e5);
          border:1px solid var(--linea-fuerte);border-radius:var(--r-chico);
          background:var(--superficie)}
  .via-ctrl{display:flex;justify-content:center;gap:var(--e2)}
  .via-ctrl i{width:var(--e5);height:var(--e5);border-radius:var(--r-pastilla);
              border:1px solid var(--linea);background:var(--superficie-baja)}
  .via-ctrl .via-colgar{background:var(--riesgo-bg);border-color:var(--riesgo)}
  .via-centro{margin:0;text-align:center;font-size:var(--via-mini);
              color:var(--fg-suave);line-height:1.5}

  /* ── 5 · la misma persona, la cita que sigue ──────────────────── */
  .via-mismo{display:flex;align-items:center;gap:var(--e2)}
  .via-foto-s{flex:none;width:var(--e5);height:var(--e5);
              border-radius:var(--r-pastilla);
              border:1px dashed var(--linea-fuerte);background:var(--superficie-baja)}
  .via-mismo p{margin:0;font-size:var(--via-mini);color:var(--fg);line-height:1.35}
  .via-mismo span{display:block;font-size:var(--t-micro);color:var(--fg-suave);
                  text-transform:uppercase;letter-spacing:.06em;font-weight:600}
  .via-cita{display:grid;gap:2px;border:1px solid var(--acento);
            background:var(--acento-lavado);border-radius:var(--r-chico);
            padding:var(--e2)}
  .via-cita span{font-size:var(--t-micro);text-transform:uppercase;
                 letter-spacing:.06em;font-weight:600;color:var(--acento)}
  .via-cita b{font-size:var(--via-mini);color:var(--fg);font-weight:600;
              font-variant-numeric:lining-nums tabular-nums}
  .via-hist{list-style:none;margin:0;padding:0;display:grid;gap:var(--e1)}
  .via-hist li{display:flex;align-items:center;gap:var(--e2);
               font-size:var(--via-mini);color:var(--fg-suave);line-height:1.5}
  .via-hist svg{flex:none;display:block;width:var(--e3);height:var(--e3)}
  .via-pendiente{flex:none;width:var(--e3);height:var(--e3);
                 border-radius:var(--r-pastilla);
                 border:1px dashed var(--linea-fuerte)}

  /* ── el texto de cada paso ────────────────────────────────────── */
  /* El rótulo tiene que pesar más que la línea que lo explica. Con
     --t-h4 medido en pantalla se leía como pie de foto y no como título:
     el serif a 15px pierde contra el sans a 14. Va en --t-h3. */
  .via-rot{margin:0;font-family:var(--display);font-weight:500;
           font-size:var(--t-h3);line-height:1.2;color:var(--fg)}
  .via-linea{margin:var(--e2) 0 0;font-size:var(--t-chico);color:var(--fg);
             line-height:1.55}
  /* Alternativa en texto de lo que dice el dibujo. Visible, no escondida
     tras un botón: el mismo contenido que lleva el aria-label. */
  .via-dib{margin:var(--e2) 0 0;font-size:var(--t-nota);color:var(--fg-suave);
           line-height:1.5}
  .via-dib b{font-weight:600;color:var(--fg-suave)}

  /* ── lo que ya existe y lo que no ─────────────────────────────── */
  .via-cols{display:grid;gap:var(--e4);margin:var(--e5) 0 0}
  @media(min-width:760px){ .via-cols{grid-template-columns:repeat(2,1fr);gap:var(--e5)} }
  .via-col{background:var(--superficie);border:1px solid var(--linea);
           border-radius:var(--r-caja);padding:var(--e4)}
  @media(min-width:760px){ .via-col{padding:var(--e5)} }
  .via-col h3{margin:0;font-size:var(--t-micro);text-transform:uppercase;
              letter-spacing:var(--track-versalita);font-weight:600;
              color:var(--c,var(--fg-suave))}
  .via-col ul{list-style:none;margin:var(--e3) 0 0;padding:0;display:grid;
              gap:var(--e2)}
  .via-col li{display:flex;gap:var(--e2);font-size:var(--t-chico);
              color:var(--fg-suave);line-height:1.5}
  .via-col li b{color:var(--fg);font-weight:600}
  .via-col li::before{content:"";flex:none;width:var(--e2);height:var(--e2);
                      margin-top:calc(var(--e2) - 1px);border-radius:var(--r-pastilla);
                      background:var(--c-p,var(--linea-fuerte))}

  .via-firma{margin:var(--e5) 0 0;font-size:var(--t-nota);color:var(--fg-suave);
             line-height:1.6;max-width:var(--ancho-texto);
             padding-top:var(--e3);border-top:1px solid var(--linea-tenue)}

  /* ── movimiento ───────────────────────────────────────────────────
     Poco y horizontal: las pantallas entran deslizándose desde la
     derecha, escalonadas, como cuando se pasa una página en el resto
     del sitio. Nada crece, nada rebota, nada se desvanece.

     Lo que NO se hace, y por qué: no se anima la opacidad. Si la pestaña
     nunca compone, una animación de opacidad se queda congelada en su
     primer cuadro y el gráfico entero se ve VACÍO. Aquí el estado
     congelado es "todo visible, doce pixeles a un lado", que no miente.
     Por eso el desplazamiento va en transform y en nada más. */
  @media (prefers-reduced-motion:no-preference){
    @keyframes via-desliza{from{transform:translateX(var(--e3))}
                             to{transform:translateX(0)}}
    .via-paso{animation:via-desliza var(--paso-lento) both;
              animation-delay:calc(var(--d,0) * .07s)}
  }

/* =========================== tablero-empresa === */
/* ─────────────────────────────────────────────────────────────────
     GRÁFICO 2 — Tablero de empresa. Héroe de /empresas.

     Qué tiene que decir en cinco segundos: "esto es una plataforma".
     Por eso hay marco de ventana, riel de secciones y densidad de
     instrumento — no una foto de oficina ni tres iconos bonitos.

     Todo va prefijado .tab- : este repo ya tuvo colisiones reales de
     clase (.ficha, .pie, .contacto) y salieron caras.

     Ni un color literal. Si falta un tono, se usa el token más cercano.
     ───────────────────────────────────────────────────────────────── */

  .tab-marco{max-width:var(--ancho-emp);margin:0 auto;font-family:var(--texto);
             color:var(--fg);font-size:var(--t-base);line-height:var(--alto-normal)}
  .tab-marco *{box-sizing:border-box}

  /* Texto solo para lectores de pantalla. Nunca lleva datos: los datos
     están siempre visibles, en tabla o en lista. */
  .tab-oculto{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
              overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

  /* ── el rótulo de honestidad ──────────────────────────────────────
     Va ARRIBA, pegado a la maqueta, y en tamaño de lectura. Si alguien
     recorta la pantalla, se lleva el rótulo con ella. */
  .tab-aviso{display:flex;gap:var(--e3);align-items:flex-start;
             background:var(--aviso-bg);border:1px solid var(--linea);
             border-bottom:none;border-radius:var(--r-grande) var(--r-grande) 0 0;
             padding:var(--e3) var(--e4)}
  .tab-aviso i{flex:none;width:var(--e2);height:var(--e2);border-radius:var(--r-pastilla);
               background:var(--aviso);margin-top:calc(var(--e2) - 1px)}
  .tab-aviso p{margin:0;font-size:var(--t-chico);line-height:1.5;color:var(--fg)}
  .tab-aviso b{font-weight:600;color:var(--aviso);letter-spacing:.01em}

  /* ── la ventana ───────────────────────────────────────────────── */
  .tab-ventana{border:1px solid var(--linea);border-radius:0 0 var(--r-grande) var(--r-grande);
               background:var(--bg-emp);overflow:hidden;box-shadow:var(--sombra-2)}

  .tab-barra{display:flex;align-items:center;gap:var(--e3);flex-wrap:wrap;
             padding:var(--e3) var(--e4);background:var(--superficie-emp);
             border-bottom:1px solid var(--linea)}
  .tab-puntos{display:flex;gap:var(--e1);flex:none}
  .tab-puntos i{width:var(--e2);height:var(--e2);border-radius:var(--r-pastilla);
                background:var(--linea)}
  .tab-marca{font-size:var(--t-micro);letter-spacing:var(--track-versalita);
             text-transform:uppercase;color:var(--acento);font-weight:600}
  .tab-ruta{font-size:var(--t-nota);color:var(--fg-suave);
            padding-left:var(--e3);border-left:1px solid var(--linea)}
  /* A 390px la barra ya lleva dos renglones; un tercero la vuelve un
     encabezado y no una orilla de ventana. El dato de rol vuelve en tableta. */
  .tab-quien{display:none;margin-left:auto;font-size:var(--t-nota);color:var(--fg-suave)}
  @media(min-width:760px){ .tab-quien{display:block} }

  .tab-cuerpo{display:grid}
  @media(min-width:760px){
    .tab-cuerpo{grid-template-columns:calc(var(--e10) + var(--e7)) 1fr}
  }

  /* ── riel de secciones ────────────────────────────────────────────
     En celular se acuesta y envuelve; no se vuelve un carrusel que
     haya que empujar con el dedo. */
  .tab-rail{list-style:none;margin:0;display:flex;flex-wrap:wrap;gap:var(--e1) var(--e2);
            padding:var(--e3) var(--e4);border-bottom:1px solid var(--linea);
            background:var(--superficie-emp-baja)}
  .tab-rail li{font-size:var(--t-nota);color:var(--fg-suave);
               padding:var(--e1) var(--e2);border-radius:var(--r-chico)}
  .tab-rail .tab-rail-on{background:var(--superficie-emp);color:var(--acento);
                         font-weight:600;box-shadow:var(--sombra-1)}
  @media(min-width:760px){
    .tab-rail{flex-direction:column;flex-wrap:nowrap;align-content:stretch;
              border-bottom:none;border-right:1px solid var(--linea);
              padding:var(--e5) var(--e3);gap:var(--e1)}
    .tab-rail li{padding:var(--e2) var(--e3)}
  }

  .tab-panel{padding:var(--e4);display:grid;gap:var(--e4)}
  @media(min-width:760px){ .tab-panel{padding:var(--e5);gap:var(--e5)} }

  /* ── encabezado del panel ─────────────────────────────────────── */
  .tab-cab{display:flex;flex-wrap:wrap;gap:var(--e3);align-items:flex-end;
           justify-content:space-between}
  .tab-kicker{margin:0;font-size:var(--t-micro);letter-spacing:var(--track-versalita);
              text-transform:uppercase;color:var(--acento);font-weight:600}
  .tab-cab h2{margin:var(--e1) 0 0;font-family:var(--display);font-weight:400;
              font-size:var(--t-h2);line-height:var(--alto-apretado);color:var(--fg)}
  .tab-sub{margin:var(--e2) 0 0;font-size:var(--t-nota);color:var(--fg-suave)}

  /* Selector de periodo: es un retrato de un control, no un control.
     Por eso no hay botones que no lleven a ningún lado. */
  .tab-periodo{display:flex;gap:1px;background:var(--linea);border:1px solid var(--linea);
               border-radius:var(--r-chico);overflow:hidden}
  .tab-per{background:var(--superficie-emp);padding:var(--e2) var(--e3);
           font-size:var(--t-nota);color:var(--fg-suave);white-space:nowrap}
  .tab-per-on{background:var(--acento-lavado);color:var(--acento);font-weight:600}

  .tab-h{margin:0;font-size:var(--t-micro);letter-spacing:var(--track-versalita);
         text-transform:uppercase;color:var(--acento);font-weight:600}

  /* ── cuatro métricas ──────────────────────────────────────────────
     Dos columnas a 390px. La cifra manda; lo demás la explica. */
  .tab-metricas{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;
                background:var(--linea);border:1px solid var(--linea);
                border-radius:var(--r-caja);overflow:hidden}
  /* Excepción al juego canónico (560/760/1160): cuatro columnas: a 760 el contenido mide 712 y cada una quedaría en ~160px */
  @media(min-width:860px){ .tab-metricas{grid-template-columns:repeat(4,1fr)} }
  .tab-m{background:var(--superficie-emp);padding:var(--e4) var(--e3);
         display:flex;flex-direction:column;gap:var(--e2)}
  @media(min-width:760px){ .tab-m{padding:var(--e5) var(--e4)} }
  .tab-m-rot{margin:0;font-size:var(--t-micro);letter-spacing:var(--track-versalita);
             text-transform:uppercase;color:var(--fg-suave);font-weight:600}
  .tab-m-cifra{margin:0;font-family:var(--display);font-weight:400;
               font-size:var(--t-cifra);line-height:var(--alto-apretado);color:var(--fg);
               font-variant-numeric:lining-nums tabular-nums;
               font-feature-settings:"lnum" 1,"tnum" 1;letter-spacing:-.01em}
  .tab-m-cifra span{font-family:var(--texto);font-size:var(--t-lead);color:var(--fg-suave);
                    margin-left:2px}
  .tab-m-barra{display:flex;gap:1px;height:var(--e1);background:var(--dato-vacio);
               border-radius:var(--r-pastilla);overflow:hidden}
  .tab-m-barra i{display:block;background:var(--c,var(--dato-1));height:100%}
  .tab-m-pie{margin:0;font-size:var(--t-nota);color:var(--fg-suave);line-height:1.45}
  .tab-m-vs{margin:auto 0 0;font-size:var(--t-micro);letter-spacing:.04em;
            text-transform:uppercase;color:var(--fg-suave);
            padding-top:var(--e2);border-top:1px solid var(--linea-tenue)}

  /* ── dos paneles: uso mensual y temas ─────────────────────────── */
  .tab-doble{display:grid;gap:var(--e4)}
  @media(min-width:1160px){
    .tab-doble{grid-template-columns:1.35fr 1fr;gap:var(--e5)}
  }
  .tab-tarjeta{background:var(--superficie-emp);border:1px solid var(--linea);
               border-radius:var(--r-caja);padding:var(--e4)}
  @media(min-width:760px){ .tab-tarjeta{padding:var(--e5)} }
  .tab-tarjeta h3{margin:var(--e2) 0 0;font-family:var(--display);font-weight:400;
                  font-size:var(--t-h3);line-height:1.2;color:var(--fg)}
  .tab-nota{margin:var(--e2) 0 0;font-size:var(--t-nota);color:var(--fg-suave);
            line-height:1.5}

  /* Leyenda del gráfico. Explica también los meses apagados: el
     trimestre anterior está para dar escala, no para presumir. */
  .tab-leyenda{list-style:none;margin:var(--e4) 0 0;padding:0;display:flex;
               flex-wrap:wrap;gap:var(--e2) var(--e4)}
  .tab-leyenda li{display:flex;align-items:center;gap:var(--e2);
                  font-size:var(--t-nota);color:var(--fg-suave)}
  /* La muestra se parte en horizontal, igual que se apila la barra: arriba
     primera vez, abajo seguimiento. Si se partiera al lado, no se leería
     como la misma cosa. */
  .tab-sw{display:flex;flex-direction:column;flex:none;width:var(--e4);
          height:var(--e2);border-radius:1px;overflow:hidden}
  .tab-sw i{flex:1;background:var(--c,var(--dato-1))}
  .tab-sw-raya{flex:none;width:var(--e4);height:0;border-top:2px dashed var(--acento-2)}

  /* El área de dibujo. La altura sale de los tokens de espacio para no
     inventar números sueltos. */
  .tab-graf{display:grid;grid-template-columns:var(--e6) 1fr;
            column-gap:var(--e2);row-gap:var(--e2);margin-top:var(--e4);
            --alto-plot:calc(var(--e10) + var(--e7))}
  @media(min-width:760px){ .tab-graf{--alto-plot:calc(var(--e10) + var(--e8))} }
  .tab-eje-y{position:relative;height:var(--alto-plot)}
  .tab-eje-y span{position:absolute;right:0;transform:translateY(-50%);
                  font-size:var(--t-micro);color:var(--fg-suave);
                  font-variant-numeric:tabular-nums}
  .tab-plot{height:var(--alto-plot)}
  /* preserveAspectRatio="none": los rectángulos siguen siendo rectángulos
     y el trazo se salva con vector-effect. Nada de texto dentro del SVG,
     justo para que no se deforme — las etiquetas son HTML. */
  .tab-svg{display:block;width:100%;height:100%}
  .tab-eje-x{grid-column:2;list-style:none;margin:0;padding:0;
             display:grid;grid-template-columns:repeat(6,1fr)}
  .tab-eje-x li{text-align:center;font-size:var(--t-nota);color:var(--fg-suave)}
  .tab-eje-x .tab-mes-on{color:var(--fg);font-weight:600}

  /* Alternativa en texto: visible siempre, no escondida tras un botón.
     A 390px caben cuatro columnas cortas de números; volverlas seis
     tarjetas sería más largo y menos legible, no más móvil. */
  .tab-tabla{width:100%;border-collapse:collapse;margin-top:var(--e4);
             font-variant-numeric:lining-nums tabular-nums;
             font-feature-settings:"lnum" 1,"tnum" 1}
  .tab-tabla caption{text-align:left;font-size:var(--t-nota);color:var(--fg-suave);
                     padding-bottom:var(--e2)}
  .tab-tabla th,.tab-tabla td{padding:var(--e2) var(--e1);
                              border-bottom:1px solid var(--linea-tenue);
                              font-size:var(--t-nota);text-align:right}
  .tab-tabla thead th{font-size:var(--t-micro);letter-spacing:.08em;
                      text-transform:uppercase;color:var(--fg-suave);font-weight:600;
                      border-bottom:1px solid var(--linea)}
  .tab-tabla thead th:first-child{text-align:left}
  .tab-tabla th[scope=row]{text-align:left;font-weight:400;color:var(--fg-suave)}
  .tab-tabla tbody .tab-fila-on th[scope=row]{color:var(--fg);font-weight:600}
  .tab-tabla tbody .tab-fila-on td{color:var(--fg)}
  .tab-tabla tbody td{color:var(--fg-suave)}
  .tab-tabla tfoot th,.tab-tabla tfoot td{border-bottom:none;border-top:1px solid var(--linea);
                                          color:var(--fg);font-weight:600;
                                          font-size:var(--t-nota)}
  .tab-tabla tfoot th[scope=row]{font-weight:600}

  /* ── temas ────────────────────────────────────────────────────────
     Se apilan siempre: el nombre y la cifra arriba, la barra debajo.
     En la columna angosta del escritorio funciona igual que a 390px. */
  .tab-temas{list-style:none;margin:var(--e4) 0 0;padding:0;display:grid;gap:var(--e3)}
  .tab-tema{display:grid;grid-template-columns:1fr auto;gap:var(--e1) var(--e3);
            align-items:baseline;padding-bottom:var(--e3);
            border-bottom:1px solid var(--linea-tenue)}
  /* La última fila no lleva raya. OJO: no incluir aquí .tab-tema-b — ganaría
     por especificidad y le quitaría el relleno a la caja de temas ocultos. */
  .tab-temas li:last-child{border-bottom:none;padding-bottom:0}
  .tab-tema-n{font-size:var(--t-chico);color:var(--fg)}
  .tab-tema-c{font-size:var(--t-chico);color:var(--fg);font-weight:600;
              font-variant-numeric:lining-nums tabular-nums}
  .tab-tema-b{grid-column:1/-1;height:var(--e2);background:var(--dato-vacio);
              border-radius:1px;overflow:hidden}
  .tab-tema-b i{display:block;height:100%;background:var(--c,var(--dato-1))}
  /* La fila que hace la diferencia: lo que NO se reporta. */
  .tab-tema-off .tab-tema-n,.tab-tema-off .tab-tema-c{color:var(--fg-suave)}
  .tab-tema-off .tab-tema-b{background:var(--neutro-bg);
                            border:1px dashed var(--linea-fuerte);height:auto;
                            padding:var(--e1) var(--e2);border-radius:var(--r-chico);
                            font-size:var(--t-nota);color:var(--neutro)}

  /* ── panel NOM-035 ────────────────────────────────────────────────
     Tres estados y ni una palabra de más. Soul Healing acompaña; quien
     verifica formalmente es una unidad de verificación acreditada. */
  .tab-nom{margin:0}
  .tab-estados{list-style:none;margin:var(--e4) 0 0;padding:0;display:grid;gap:var(--e3)}
  @media(min-width:760px){ .tab-estados{grid-template-columns:repeat(3,1fr);gap:var(--e4)} }
  .tab-estado{border:1px solid var(--linea);border-left:3px solid var(--c,var(--neutro));
              border-radius:0 var(--r-chico) var(--r-chico) 0;
              padding:var(--e3) var(--e4);display:flex;flex-direction:column;gap:var(--e2);
              background:var(--superficie-emp)}
  .tab-estado-cab{display:flex;align-items:center;gap:var(--e2);flex-wrap:wrap;
                  justify-content:space-between}
  .tab-estado h4{margin:0;font-size:var(--t-chico);font-weight:600;color:var(--fg)}
  .tab-pill{font-size:var(--t-micro);letter-spacing:.08em;text-transform:uppercase;
            font-weight:600;padding:var(--e1) var(--e2);border-radius:var(--r-pastilla);
            background:var(--c-bg,var(--neutro-bg));color:var(--c,var(--neutro));
            white-space:nowrap}
  .tab-estado p{margin:0;font-size:var(--t-nota);color:var(--fg-suave);line-height:1.5}
  .tab-medida{height:var(--e1);background:var(--superficie-emp-baja);
              border-radius:var(--r-pastilla);overflow:hidden}
  .tab-medida i{display:block;height:100%;background:var(--c,var(--neutro))}
  .tab-pie-nom{margin:var(--e4) 0 0;padding-top:var(--e3);
               border-top:1px solid var(--linea-tenue);
               font-size:var(--t-nota);color:var(--fg-suave);line-height:1.55;
               max-width:var(--ancho-texto)}

  .tab-firma{margin:var(--e3) 0 0;font-size:var(--t-nota);color:var(--fg-suave);
             line-height:1.55;max-width:var(--ancho-texto)}

  /* ── movimiento ───────────────────────────────────────────────────
     Poco, horizontal, y nada que crezca ni rebote: la gráfica entra
     deslizándose desde la derecha, como cuando se pasa una página en el
     resto del sitio. Se acabó ahí.

     Lo que NO se hace, y por qué. La primera versión descubría la
     gráfica con un recorte y estiraba cada barra con scaleX(0)→scaleX(1),
     que es la animación de tablero de manual. Medido en el navegador: con
     la pestaña sin componer, la animación se queda en currentTime 0 y
     TODAS las barras miden 0px de ancho — o sea, el estado inicial de esa
     animación es "el dato no está". Una barra proporcional cuyo único
     trabajo es codificar una proporción no puede depender de que una
     animación llegue al final. Aquí el estado congelado es "todo visible,
     doce pixeles a un lado", que no miente. */
  @media (prefers-reduced-motion:no-preference){
    @keyframes tab-desliza{from{transform:translateX(var(--e3))}
                             to{transform:translateX(0)}}
    .tab-svg{animation:tab-desliza var(--paso-lento) forwards}
  }