/* ============================================================================
   voice.css — ForHosting.com/VOICE: la página del producto y el panel.

   La primera versión reciclaba `.card` y `.section` del sitio y no enseñaba
   nada: un producto que enruta llamadas, con menús multinivel y una API de 172
   endpoints, salía como cuatro párrafos en cajas grises. Un producto que se
   explica dibujándolo hay que dibujarlo.

   Todo lo de aquí lleva prefijo `v-` (producto) o `vp-` (panel) para no pisar
   el sitio. Se apoya en las variables de `site.css` cuando existen y trae
   respaldo propio cuando no: un color que no resuelve se pinta negro sobre
   negro, y eso no se ve hasta que alguien abre la página.
   ========================================================================= */

/* 🔴 LOS TOKENS SON LOS DEL SITIO, NO INVENTADOS.
   La primera versión escribió `var(--accent, #2f6df6)` — y `--accent` NO
   EXISTE en site.css, así que toda la página salió AZUL en una marca cuyo
   acento es lima y verde. Un respaldo de color no es una red: es la garantía
   de que el fallo se ve bonito y nadie lo nota hasta que alguien mira la
   página al lado del logo. Aquí se usan los nombres reales
   (`--lima`, `--verde`, `--tinta`, `--linea`, `--panel`…) y los respaldos son
   los MISMOS valores, no otros. */
#vmarketing, #vpanel {
  --v-tinta:   var(--tinta, #111714);
  --v-suave:   var(--gris-txt, #5d6861);
  --v-linea:   var(--linea, #dfe4df);
  --v-linea2:  var(--linea-2, #cbd3ca);
  --v-panel:   var(--panel, #fafbf8);
  --v-fondo2:  var(--fondo-2, #e9ece5);
  --v-lima:    var(--lima, #b8ff4a);
  --v-limad:   var(--lima-deep, #457a12);   /* legible sobre claro */
  --v-glow:    var(--lima-glow, rgba(184,255,74,.45));
  --v-acento:  var(--verde, #2b6251);
}

/* ── hero ─────────────────────────────────────────────────────────────── */
.v-hero { padding: 56px 0 40px; position: relative; overflow: hidden }
.v-hero::before {
  content: ""; position: absolute; inset: -45% 25% 35% -25%; pointer-events: none;
  background: radial-gradient(closest-side, var(--v-glow), transparent);
}
.v-hero-grid { display: grid; gap: 40px; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); align-items: center; position: relative }
.v-hero h1 { font-size: clamp(2rem, 4.6vw, 3.4rem); line-height: 1.05; margin: .3em 0 .35em; letter-spacing: -.02em }
.v-hero .lead { font-size: clamp(1.02rem, 1.5vw, 1.2rem); line-height: 1.55; max-width: 46ch; color: var(--v-suave) }

.v-badge {
  display: inline-block; font-size: .74rem; letter-spacing: .12em; text-transform: uppercase;
  padding: 5px 12px; border-radius: 999px; font-weight: 700;
  background: var(--v-lima); color: var(--v-tinta); border: 1px solid transparent;
}

.v-cta { display: flex; flex-wrap: wrap; gap: 12px; margin: 26px 0 14px }
.v-btn {
  display: inline-block; padding: 12px 22px; border-radius: 10px; font-weight: 600;
  text-decoration: none; border: 1px solid transparent; transition: transform .12s ease, opacity .12s ease;
}
.v-btn:hover { transform: translateY(-1px) }
.v-btn-1 { background: var(--v-tinta); color: var(--v-lima) }
.v-btn-1:hover { background: var(--v-acento) }
.v-btn-2 { border-color: var(--v-linea); color: var(--v-tinta) }
.v-nota { font-size: .9rem; color: var(--v-suave); margin: 0 }

/* ── el recorrido de la llamada ───────────────────────────────────────── */
/* El panel se ciñe al dibujo. Sin el `max-width` el SVG (viewBox 320×300) se
   quedaba centrado en una caja ancha y el hero parecía a medio hacer: el
   problema no era el diagrama, era el aire alrededor. */
.v-flow { margin: 0 0 0 auto; max-width: 380px; background: var(--v-panel);
          border: 1px solid var(--v-linea); border-radius: 18px; padding: 22px 20px 16px }
.v-flow svg { width: 100%; height: auto; display: block }
.v-flow figcaption { font-size: .84rem; color: var(--v-suave); margin-top: 10px; text-align: center }
.vg-a { stop-color: var(--v-acento) } .vg-b { stop-color: var(--v-limad) }
.v-wire { fill: none; stroke: var(--v-linea); stroke-width: 2 }
.v-node rect { fill: var(--v-fondo2); stroke: var(--v-linea); stroke-width: 1 }
.v-node text { font-size: 10px; text-anchor: middle; fill: var(--v-tinta) }
.v-node-in rect { fill: url(#vg); stroke: none }
.v-node-in text { fill: #fff; font-weight: 700 }
.v-spark { fill: var(--v-limad) }
/* Quien pide menos movimiento no ve la chispa viajar: el diagrama sigue
   contando lo mismo quieto. */
@media (prefers-reduced-motion: reduce) { .v-spark { display: none } }

/* ── secciones ────────────────────────────────────────────────────────── */
.v-sec { padding: 56px 0 }
.v-sec-alt { background: var(--v-fondo2) }
.v-sec h2 { font-size: clamp(1.5rem, 2.6vw, 2.1rem); line-height: 1.15; margin: .25em 0 .4em; letter-spacing: -.01em }
.v-eyebrow { font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: var(--v-limad); font-weight: 700 }
.v-lead { max-width: 62ch; color: var(--v-suave); line-height: 1.6; margin: 0 0 28px }

/* ── el demo ──────────────────────────────────────────────────────────── */
.v-demo { display: grid; gap: 24px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
          border: 1px solid var(--v-linea); border-radius: 18px; padding: 26px; background: var(--v-fondo2) }
.v-demo-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px }
.v-demo-lab { font-size: .88rem; color: var(--v-suave); min-width: 9ch }
.v-demo-row[hidden] { display: none }

.v-seg { display: inline-flex; border: 1px solid var(--v-linea); border-radius: 10px; overflow: hidden }
.v-seg button { background: none; border: 0; padding: 9px 16px; font: inherit; color: inherit; cursor: pointer; opacity: .6 }
.v-seg button[aria-pressed="true"] { background: var(--v-tinta); color: var(--v-lima); opacity: 1; font-weight: 600 }

.v-keys { display: inline-flex; gap: 8px }
.v-keys button { width: 42px; height: 42px; border-radius: 10px; border: 1px solid var(--v-linea);
                 background: none; color: inherit; font: inherit; font-weight: 700; cursor: pointer }
.v-keys button:hover, .v-keys button[aria-pressed="true"] { border-color: var(--v-limad); background: var(--v-lima); color: var(--v-tinta) }

.v-demo-out { display: block; align-self: center; min-height: 92px; padding: 20px;
              border-radius: 12px; border: 1px solid var(--v-linea2); background: var(--v-panel);
              line-height: 1.5 }
.v-demo-out b { display: block; font-size: 1.3rem; margin-bottom: 6px; color: var(--v-acento);
                font-family: var(--font-display), inherit; letter-spacing: .01em }
.v-demo-out small { color: var(--v-suave) }

/* ── tarjetas, pasos, código ──────────────────────────────────────────── */
.v-cards { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)) }
.v-cards-2 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); margin-top: 24px }
.v-card { border: 1px solid var(--v-linea); border-radius: 14px; padding: 22px; background: var(--v-panel);
          transition: border-color .15s ease }
.v-card:hover { border-color: var(--v-linea2) }
.v-card h3 { font-size: 1.02rem; margin: 10px 0 8px }
.v-card p { color: var(--v-suave); line-height: 1.55; margin: 0; font-size: .95rem }
.v-ico { width: 26px; height: 26px; fill: none; stroke: var(--v-limad); stroke-width: 1.6;
         stroke-linecap: round; stroke-linejoin: round }

.v-steps { counter-reset: v; list-style: none; padding: 0; display: grid; gap: 16px;
           grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) }
.v-steps li { counter-increment: v; position: relative; padding: 20px 20px 20px 58px;
              border: 1px solid var(--v-linea); border-radius: 14px; background: var(--v-panel) }
.v-steps li::before {
  content: counter(v); position: absolute; left: 18px; top: 20px;
  width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  font-size: .82rem; font-weight: 700; color: var(--v-lima); background: var(--v-tinta);
}
.v-steps b { display: block; margin-bottom: 5px }
.v-steps span { color: var(--v-suave); font-size: .95rem; line-height: 1.5 }

.v-api-grid { display: grid; gap: 34px; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); align-items: center }
.v-code { background: color-mix(in srgb, var(--v-tinta) 92%, transparent); color: #e9edf5;
          border-radius: 14px; padding: 20px; overflow-x: auto; font-size: .84rem; line-height: 1.75; margin: 0 }
.v-code code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; white-space: pre }

.v-final { text-align: center }
.v-final .v-lead { margin-left: auto; margin-right: auto }
.v-final .v-cta { justify-content: center }

/* ══════════════════════════════ EL PANEL ═════════════════════════════ */
.vp-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 20px }
.vp-head h2 { margin: .15em 0 0 }
.vp-head-side { display: flex; align-items: center; gap: 10px }
.vp-chip { font-size: .8rem; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--v-linea); color: var(--v-suave); white-space: nowrap }

/* Las pestañas hacen scroll lateral en móvil en vez de romper el ancho: el
   desbordamiento horizontal de la página ya nos costó una caza y no vuelve. */
.vp-tabs { display: flex; gap: 2px; overflow-x: auto; border-bottom: 1px solid var(--v-linea); margin-bottom: 20px }
.vp-tabs button { background: none; border: 0; border-bottom: 2px solid transparent; cursor: pointer;
                  padding: 11px 15px; font: inherit; color: inherit; opacity: .6; white-space: nowrap }
.vp-tabs button:hover { opacity: .9 }
.vp-tabs button[aria-selected="true"] { opacity: 1; border-bottom-color: var(--v-limad); color: var(--v-acento); font-weight: 600 }

.vp-vista { overflow-x: auto }
.vp-tabla { width: 100%; border-collapse: collapse; font-size: .95rem }
.vp-tabla th, .vp-tabla td { text-align: left; padding: 11px 12px; border-bottom: 1px solid var(--v-linea) }
.vp-tabla th { font-size: .76rem; letter-spacing: .06em; text-transform: uppercase; color: var(--v-suave); font-weight: 700 }
.vp-tabla tr:last-child td { border-bottom: 0 }
.vp-lead { max-width: 62ch; color: var(--v-suave); margin: 0 0 18px; line-height: 1.55 }
.vp-nota { max-width: 62ch; color: var(--v-suave); font-size: .9rem; margin-top: 16px }
.vp-vacio { color: var(--v-suave); padding: 24px 0 }
.vp-cargando { opacity: .55 }

.vp-btn-linea { background: none; border: 1px solid var(--v-linea); border-radius: 8px; cursor: pointer;
                padding: 6px 13px; font: inherit; color: inherit }
.vp-btn-linea:hover:not(:disabled) { border-color: var(--v-limad); background: var(--v-lima); color: var(--v-tinta) }
.vp-btn-linea:disabled { opacity: .4; cursor: progress }

.vp-aviso { padding: 13px 15px; border-radius: 10px; margin-bottom: 16px; border: 1px solid var(--v-linea) }
.vp-aviso.bien { border-color: #2ea05a } .vp-aviso.ojo { border-color: #c89628 } .vp-aviso.mal { border-color: #c84646 }
.vp-expirada { padding: 14px 18px; margin: 0 auto 8px; max-width: 1100px; color: var(--v-suave) }

/* En árabe todo se lee de derecha a izquierda: tablas y diagrama incluidos.
   Sin esto la cabecera queda a un lado y los datos al otro. */
[dir="rtl"] .vp-tabla th, [dir="rtl"] .vp-tabla td { text-align: right }
[dir="rtl"] .v-steps li { padding: 20px 58px 20px 20px }
[dir="rtl"] .v-steps li::before { left: auto; right: 18px }
[dir="rtl"] .v-flow svg { transform: scaleX(-1) }
[dir="rtl"] .v-flow text { transform: scaleX(-1); transform-origin: center; transform-box: fill-box }

@media (max-width: 900px) {
  .v-hero-grid, .v-api-grid, .v-demo { grid-template-columns: 1fr }
  .v-flow { max-width: 340px; margin: 0 auto }
}
@media (max-width: 640px) {
  .v-sec { padding: 40px 0 }
  .vp-tabla th, .vp-tabla td { padding: 9px 8px }
}

/* ═══════════════════════════════════════ música y líneas (2026-08-07)
   Se apoyan en los tokens `--v-*` de arriba, que ya derivan de la paleta REAL
   del sitio. No se inventa ninguno nuevo: la primera versión de este fichero
   usó `var(--accent, #2f6df6)` —un token que no existe— y la página entera
   salió AZUL en una marca lima y verde, pasando los 53 comprobadores. Un
   respaldo distinto del original garantiza que el fallo se vea bonito. */
.vp-datos { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 22px }
.vp-dato { flex: 1 1 130px; min-width: 120px; padding: 14px 16px; border-radius: 12px;
           border: 1px solid var(--v-linea); background: var(--v-panel) }
.vp-dato-n { display: block; font-size: 1.7rem; line-height: 1.1; font-weight: 700; color: var(--v-acento) }
.vp-dato-e { display: block; margin-top: 4px; font-size: .78rem; letter-spacing: .04em;
             text-transform: uppercase; color: var(--v-suave) }

.vp-sub { margin: 26px 0 12px; font-size: 1rem }
.vp-modos { display: flex; flex-direction: column; gap: 2px; max-width: 68ch }
/* La fila entera es el objetivo táctil: un radio de 13 px es un blanco
   imposible en un móvil, y esta pantalla se mira desde el teléfono. */
.vp-modo { display: flex; gap: 12px; align-items: flex-start; padding: 13px 14px;
           border: 1px solid var(--v-linea); border-radius: 10px; cursor: pointer; line-height: 1.45 }
.vp-modo:hover { border-color: var(--v-linea2) }
.vp-modo:has(input:checked) { border-color: var(--v-limad); background: var(--v-fondo2) }
.vp-modo input { margin-top: .25em; flex: 0 0 auto; accent-color: var(--v-limad) }

.vp-ojo { max-width: 62ch; margin: 0 0 18px; padding: 12px 14px; line-height: 1.5;
          border-radius: 10px; border: 1px solid var(--v-limad); background: var(--v-fondo2) }

/* ═══════════════════════ las pestañas de la paridad (2026-08-09)
   Formularios, interruptores y lo VIVO. Mismos tokens `--v-*` de arriba:
   ni un color nuevo — la lección del azul en una marca lima sigue vigente. */
.vp-detalle-cab { display: flex; align-items: center; gap: 14px; margin: 0 0 18px }
.vp-detalle-cab .vp-sub { margin: 0 }

.vp-campo { display: flex; flex-direction: column; gap: 6px; margin: 0 0 14px; max-width: 46ch }
.vp-campo > label { font-size: .8rem; letter-spacing: .05em; text-transform: uppercase;
                    color: var(--v-suave); font-weight: 700 }
.vp-pista { color: var(--v-suave); font-size: .88rem; line-height: 1.5 }
.vp-in { padding: 9px 12px; border: 1px solid var(--v-linea); border-radius: 9px;
         background: var(--v-panel); color: inherit; font: inherit; min-width: 0 }
.vp-in:focus { outline: 2px solid var(--v-glow); border-color: var(--v-limad) }

.vp-fila { display: flex; align-items: flex-start; gap: 12px; margin: 0 0 14px; max-width: 68ch }
.vp-fila-form { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 18px }
.vp-fila-form .vp-in { flex: 1 1 160px }
.vp-rejilla { display: grid; gap: 0 18px; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
              max-width: 60ch }
.vp-acciones { display: flex; gap: 10px; flex-wrap: wrap; margin: 18px 0 }
.vp-mini-acciones { display: flex; gap: 6px; white-space: nowrap }

/* El interruptor: la fila entera dice qué enciende; esto solo es la palanca.
   Mientras guarda se atenúa, y si el guardado falla VUELVE — un interruptor
   que asiente sin guardar es un verde falso con forma de botón. */
.vp-int { position: relative; display: inline-block; flex: 0 0 auto; width: 42px; height: 24px; cursor: pointer }
.vp-int input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer }
.vp-int i { display: block; width: 100%; height: 100%; border-radius: 999px;
            background: var(--v-linea2); transition: background .15s ease; pointer-events: none }
.vp-int i::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px;
                   border-radius: 50%; background: var(--v-panel); transition: transform .15s ease;
                   box-shadow: 0 1px 2px rgba(0,0,0,.25) }
.vp-int input:checked + i { background: var(--v-limad) }
.vp-int input:checked + i::after { transform: translateX(18px) }
.vp-int input:disabled + i { opacity: .45 }
.vp-int input:focus-visible + i { outline: 2px solid var(--v-glow) }

.vp-btn-linea.peligro { border-color: #c84646; color: #c84646 }
.vp-btn-linea.peligro:hover:not(:disabled) { background: #c84646; color: #fff }

.vp-nuevo { font-weight: 700 }
.vp-nuevo::before { content: "●"; color: var(--v-limad); margin-inline-end: 6px; font-size: .7em; vertical-align: middle }
.vp-transcrip { color: var(--v-suave); font-size: .88rem }
.vp-badge-ok { display: inline-block; font-size: .78rem; font-weight: 700; padding: 3px 10px;
               border-radius: 999px; background: var(--v-lima); color: var(--v-tinta) }

/* La ocupación del buzón: la barra es el aviso. Amarillo al 90%, y el
   «LLENO» lo dice el texto — el color solo no es un mensaje. */
.vp-ocupacion { max-width: 46ch; margin: 0 0 14px }
.vp-barra { height: 10px; border-radius: 999px; background: var(--v-fondo2);
            border: 1px solid var(--v-linea); overflow: hidden; margin-bottom: 6px }
.vp-barra i { display: block; height: 100%; background: var(--v-limad); border-radius: 999px }

[dir="rtl"] .vp-int input:checked + i::after { transform: translateX(-18px) }

/* ══════════════ LA TIRA DE HECHOS, EL CATÁLOGO Y LOS PRECIOS ═════════════
   Añadido el 2026-08-09 con el rediseño de la landing. Tres reglas que ya
   están pagadas en este fichero y que se respetan aquí:
     · los colores salen de los tokens reales del sitio, nunca inventados;
     · nada de propiedades físicas (left/right/padding-left) sin su gemelo
       para [dir="rtl"] — el árabe es el 12,5% del sitio, no un caso raro;
     · las tablas hacen scroll DENTRO de su caja, nunca ensanchan la página.
   ═════════════════════════════════════════════════════════════════════ */

.v-strip { border-block: 1px solid var(--v-linea); background: var(--v-panel) }
.v-strip-grid { display: grid; gap: 20px; padding: 26px 0;
                grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)) }
.v-fact { display: flex; flex-direction: column; gap: 4px }
.v-fact b { font-size: clamp(1.5rem, 3vw, 2.1rem); line-height: 1; color: var(--v-acento);
            font-variant-numeric: tabular-nums; letter-spacing: -.02em }
.v-fact span { font-size: .87rem; color: var(--v-suave); line-height: 1.45 }

/* ── el catálogo de capacidades ───────────────────────────────────────── */
.v-caps { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)) }
.v-capgroup { border: 1px solid var(--v-linea); border-radius: 16px; padding: 22px;
              background: var(--v-panel); transition: border-color .12s ease }
.v-capgroup:hover { border-color: var(--v-linea2) }
.v-capgroup header { display: flex; gap: 12px; align-items: flex-start;
                     padding-bottom: 14px; border-bottom: 1px solid var(--v-linea); margin-bottom: 6px }
.v-capgroup header .v-ico { flex: none; margin-top: 2px }
.v-capgroup h3 { font-size: 1.06rem; margin: 0 0 4px; letter-spacing: -.01em }
.v-capgroup header p { margin: 0; font-size: .88rem; color: var(--v-suave); line-height: 1.45 }
.v-capgroup ul { list-style: none; margin: 0; padding: 0 }
.v-capgroup li { padding: 11px 0; border-bottom: 1px solid var(--v-linea) }
.v-capgroup li:last-child { border-bottom: 0; padding-bottom: 0 }
.v-capgroup li b { display: block; font-size: .95rem; margin-bottom: 3px }
.v-capgroup li span { display: block; font-size: .88rem; color: var(--v-suave); line-height: 1.5 }
.v-caps-pie { max-width: 78ch; color: var(--v-suave); font-size: .92rem; line-height: 1.6; margin: 28px 0 0 }
.v-link, .v-caps-pie a { color: var(--v-acento); font-weight: 600; text-decoration: underline;
                         text-underline-offset: 3px; text-decoration-thickness: 1px }

/* ── tablas de precio ─────────────────────────────────────────────────── */
.v-tabla-wrap { overflow-x: auto; border: 1px solid var(--v-linea); border-radius: 16px; background: var(--v-panel) }
.v-tabla { width: 100%; border-collapse: collapse; font-size: .95rem; min-width: 620px }
.v-tabla-min { min-width: 380px }
.v-tabla th, .v-tabla td { text-align: start; padding: 13px 16px; border-bottom: 1px solid var(--v-linea) }
.v-tabla th { font-size: .74rem; letter-spacing: .07em; text-transform: uppercase;
              color: var(--v-suave); font-weight: 700; white-space: nowrap }
.v-tabla tbody tr:last-child td { border-bottom: 0 }
.v-tabla tbody tr:hover { background: var(--v-fondo2) }
.v-tabla .v-precio { font-weight: 700; font-size: 1.06rem; color: var(--v-tinta);
                     font-variant-numeric: tabular-nums; white-space: nowrap }
.v-tabla .v-precio small { font-weight: 400; font-size: .78rem; color: var(--v-suave) }
.v-tabla td.v-num { font-variant-numeric: tabular-nums }
/* La fila destacada se marca con un borde de INICIO (lógico), no con un
   `border-left`: en árabe un borde a la izquierda señala el final de la fila. */
.v-tabla tr.v-destacada { background: color-mix(in srgb, var(--v-lima) 14%, transparent) }
.v-tabla tr.v-destacada td:first-child { box-shadow: inset 3px 0 0 var(--v-limad) }
[dir="rtl"] .v-tabla tr.v-destacada td:first-child { box-shadow: inset -3px 0 0 var(--v-limad) }
.v-etiqueta { display: inline-block; margin-inline-start: 8px; font-size: .68rem; font-weight: 700;
              letter-spacing: .06em; text-transform: uppercase; padding: 3px 8px; border-radius: 999px;
              background: var(--v-lima); color: var(--v-tinta); vertical-align: middle }
.v-sinjs { color: var(--v-suave); text-align: center; padding: 28px 16px }

.v-notas { display: grid; gap: 14px; margin-top: 24px;
           grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) }
.v-notas p { margin: 0; font-size: .9rem; line-height: 1.55; color: var(--v-suave) }
.v-notas b { color: var(--v-tinta); display: block; margin-bottom: 3px }

@media (max-width: 720px) {
  .v-capgroup { padding: 18px }
  .v-strip-grid { gap: 16px }
}

/* ── EL TELÉFONO (webphone) ──────────────────────────────────────────────────
   Rediseñado el 2026-08-12. La primera versión era una columna de cajas
   blancas a todo el ancho: se leía como un formulario de configuración y no
   como un teléfono.

   Dos decisiones gobiernan este bloque:

   1. EL AURICULAR ES UN OBJETO, no una sección. Ancho fijo, cuerpo oscuro de
      la marca, pantalla propia y teclas con forma de tecla. Una persona tiene
      que reconocerlo como teléfono sin que nadie se lo explique.
   2. LA MISMA PIEZA SIRVE DE CONSOLA. «Operadora» no es otra pantalla: es el
      mismo auricular con los paneles vivos al lado. Que la central entera se
      maneje desde aquí es lo que separa a VOICE de un folleto.

   Usa los tokens reales de la marca (`--v-*`), nunca colores sueltos. */

.tel-grid { display: grid; gap: 22px; align-items: start; grid-template-columns: minmax(288px, 336px); }
.tel-grid.tel-operadora { grid-template-columns: minmax(288px, 336px) minmax(0, 1fr); }
@media (max-width: 880px) { .tel-grid.tel-operadora { grid-template-columns: minmax(0, 1fr); } }

/* La barra de arriba: elegir vista, y el estado del registro. */
.tel-barra { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.tel-vistas { display: inline-flex; padding: 3px; gap: 3px; background: var(--v-fondo2); border-radius: 999px; }
.tel-vista { border: 0; background: transparent; cursor: pointer; padding: 7px 16px; border-radius: 999px;
             font: inherit; font-size: .86rem; font-weight: 600; color: var(--v-suave); }
.tel-vista[aria-pressed="true"] { background: var(--v-tinta); color: #fff; }
.tel-vista:hover:not([aria-pressed="true"]) { color: var(--v-tinta); }

.tel-estado { font-size: .8rem; font-weight: 700; padding: 4px 11px; border-radius: 999px;
              background: var(--v-fondo2); color: var(--v-suave); letter-spacing: .02em; }
.tel-estado.tel-registrado { background: color-mix(in srgb, var(--v-lima) 45%, transparent); color: var(--v-limad); }
.tel-estado.tel-conectando { background: #fff3d6; color: #9a6b00; }
.tel-estado.tel-fallo      { background: #fde0e0; color: #b02a2a; }

/* ── el auricular ───────────────────────────────────────────────────────── */
.tel-fono { background: var(--v-tinta); border-radius: 20px; padding: 16px 16px 18px;
            box-shadow: 0 18px 40px -22px rgba(17,23,20,.65), 0 2px 6px rgba(17,23,20,.12); }
.tel-fono-cab { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.tel-quien { color: #fff; font-weight: 700; font-size: .95rem; letter-spacing: .01em; }
.tel-quien small { display: block; color: rgba(255,255,255,.55); font-weight: 500; font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; }
.tel-salir { background: transparent; border: 1px solid rgba(255,255,255,.22); color: rgba(255,255,255,.8);
             border-radius: 999px; padding: 5px 12px; font: inherit; font-size: .78rem; cursor: pointer; }
.tel-salir:hover { border-color: rgba(255,255,255,.5); color: #fff; }

/* La pantalla: lo único que mira quien está hablando. */
.tel-pantalla { background: rgba(0,0,0,.32); border: 1px solid rgba(255,255,255,.08); border-radius: 12px;
                padding: 12px 14px; min-height: 76px; display: flex; flex-direction: column; justify-content: center; gap: 3px; }
.tel-pant-estado { font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: var(--v-lima); font-weight: 700; }
.tel-pant-estado.tel-quieto { color: rgba(255,255,255,.4); }
.tel-marcar { width: 100%; background: transparent; border: 0; padding: 0; color: #fff;
              font-size: 1.6rem; font-weight: 700; letter-spacing: .04em; font-variant-numeric: tabular-nums; }
.tel-marcar::placeholder { color: rgba(255,255,255,.28); font-weight: 500; font-size: 1.05rem; letter-spacing: .02em; }
.tel-marcar:focus { outline: 0; }
.tel-crono { font-size: .8rem; color: rgba(255,255,255,.55); font-variant-numeric: tabular-nums; }

/* El teclado: teclas con forma de tecla, no botones de formulario. */
.tel-teclado { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; margin: 14px 0; }
.tel-tecla { padding: 11px 0 9px; border-radius: 14px; border: 1px solid rgba(255,255,255,.1);
             background: rgba(255,255,255,.06); color: #fff; cursor: pointer; font: inherit;
             font-size: 1.32rem; font-weight: 600; line-height: 1.1; text-align: center; }
.tel-tecla span { display: block; font-size: .56rem; letter-spacing: .16em; color: rgba(255,255,255,.4); font-weight: 700; min-height: .8em; }
.tel-tecla:hover { background: rgba(255,255,255,.12); }
.tel-tecla:active { background: var(--v-lima); color: var(--v-tinta); border-color: var(--v-lima); }
.tel-tecla:active span { color: rgba(17,23,20,.55); }

/* Llamar y colgar mandan; el resto son secundarios y sólo salen en llamada. */
.tel-principal { display: grid; gap: 9px; }
.tel-llamar, .tel-colgar, .tel-contestar {
  width: 100%; border: 0; border-radius: 999px; padding: 13px 18px; cursor: pointer;
  font: inherit; font-size: .98rem; font-weight: 700; letter-spacing: .02em;
}
.tel-llamar   { background: var(--v-lima); color: var(--v-tinta); }
.tel-llamar:hover { filter: brightness(1.06); }
.tel-contestar { background: #2ea36b; color: #fff; }
.tel-colgar   { background: #d5443c; color: #fff; }
.tel-llamar[disabled] { opacity: .35; cursor: not-allowed; }
.tel-acciones { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-top: 10px; }
.tel-acc { background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12); color: rgba(255,255,255,.9);
           border-radius: 10px; padding: 9px 6px; font: inherit; font-size: .8rem; font-weight: 600; cursor: pointer; }
.tel-acc:hover { background: rgba(255,255,255,.14); }
.tel-acc[aria-pressed="true"] { background: var(--v-lima); color: var(--v-tinta); border-color: var(--v-lima); }
.tel-pista { margin-top: 12px; color: rgba(255,255,255,.45); font-size: .74rem; line-height: 1.45; }

/* ── los paneles vivos (vista operadora) ────────────────────────────────── */
.tel-paneles { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.tel-panel { background: var(--v-panel); border: 1px solid var(--v-linea); border-radius: 14px; padding: 14px 16px; }
.tel-panel h4 { margin: 0 0 10px; font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: var(--v-suave); }
.tel-fila { display: flex; align-items: center; gap: 9px; padding: 7px 0; border-bottom: 1px solid var(--v-linea); }
.tel-fila:last-child { border-bottom: 0; }
.tel-fila-txt { flex: 1; min-width: 0; }
.tel-fila-tit { font-weight: 700; color: var(--v-tinta); font-size: .92rem; }
.tel-fila-sub { color: var(--v-suave); font-size: .78rem; font-variant-numeric: tabular-nums; }
.tel-vacio { color: var(--v-suave); font-size: .84rem; padding: 6px 0; }
/* Acción de una fila: llamar a un compañero, recoger una aparcada. Un clic. */
.tel-accion { border: 1px solid var(--v-linea2); background: #fff; color: var(--v-tinta); border-radius: 999px;
              padding: 5px 12px; font: inherit; font-size: .78rem; font-weight: 600; cursor: pointer; flex: none; }
.tel-accion:hover { border-color: var(--v-tinta); }

.tel-punto { width: 9px; height: 9px; border-radius: 50%; background: #b9c0b7; flex: none; }
.tel-punto-not_inuse { background: #2ea36b; }
.tel-punto-inuse, .tel-punto-busy { background: #d5443c; }
.tel-punto-ringing, .tel-punto-ringinuse { background: #e6a700; animation: telparpadeo 1s steps(2) infinite; }
@keyframes telparpadeo { 50% { opacity: .3; } }

/* Conectar (antes de registrar): la única pantalla que no es un teléfono. */
.tel-conectar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
[dir="rtl"] .tel-marcar { text-align: right; }
.tel-audio { display: grid; gap: 7px; margin-top: 12px; }
.tel-audio label { display: grid; gap: 3px; }
.tel-audio span { font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.45); font-weight: 700; }
.tel-audio select { width: 100%; background: rgba(255,255,255,.06); color: #fff; font: inherit; font-size: .8rem;
                    border: 1px solid rgba(255,255,255,.12); border-radius: 10px; padding: 7px 9px; }
.tel-audio select option { color: #111714; }
/* `hidden` NO basta sobre un `display: grid`: la regla de la clase gana al
   atributo, y las seis acciones secundarias se veían con el teléfono en
   reposo — justo lo que este rediseño venía a quitar. */
.tel-acciones[hidden] { display: none; }
/* Los paneles vacíos también son información («no hay nada»), así que tienen
   altura propia en vez de encogerse hasta parecer un error de maquetación. */
.tel-panel { min-height: 128px; }

/* ── la insignia de verificación de las capacidades (D0, 2026-08-17) ────────
   Dice con qué se comprobó cada una de las 48. Es la misma figura que la de
   `<ruta de voice>/documentation` (`.vd-ins`) y usa el MISMO vocabulario
   traducido, para que un lector que pase de la landing al manual no encuentre
   dos escalas distintas del mismo dato.

   Va DENTRO del `<li>`, pegada a lo que califica, y no en una leyenda al pie:
   una leyenda al pie se lee como decoración y deja cada frase afirmando sola.

   `v-ins-no` («todavía sin ejercitar») es la única que cambia de color, y NO es
   una alarma: es la que el lector tiene que poder distinguir de un vistazo. Las
   otras cinco son grados de «probado» y competirían por atención sin aportar.
   El color no es el único portador del significado —el texto lo dice— porque
   una insignia que sólo se distingue por el color no existe para quien no
   distingue ese color. Hoy son 15 de 48, así que esto se ve, y debe verse. */
.v-capgroup li > .v-ins { display: inline-block; vertical-align: middle;
          margin-inline-start: 8px; font-size: .6rem; letter-spacing: .06em;
          text-transform: uppercase; font-weight: 700; font-style: normal;
          padding: 2px 7px; border-radius: 999px; white-space: nowrap;
          color: var(--v-limad); background: color-mix(in srgb, var(--v-lima) 20%, transparent);
          border: 1px solid color-mix(in srgb, var(--v-limad) 35%, transparent) }
.v-capgroup li > .v-ins-no { color: #7a5a12;
          background: color-mix(in srgb, #e8a317 16%, transparent);
          border-color: color-mix(in srgb, #e8a317 45%, transparent) }

/* ============================================================================
   CAPA CINEMATOGRÁFICA — «sala de control» (2026-08-17)

   Nace del lab `tmp/lab-cine/` (maqueta aprobada por Larry). La página de VOICE
   pasa de folleto claro a sala de control: lienzo oscuro, grano de película,
   viñeta, osciloscopio en vivo detrás del titular y los planes leídos como los
   canales de una mesa de mezclas.

   TRES REGLAS QUE GOBIERNAN ESTE BLOQUE, y explican por qué está escrito así:

   1. **No se invierte el significado de un token.** `--v-tinta` quiere decir
      TINTA (oscuro) y se usa 22 veces, SEIS de ellas como fondo. Volverla clara
      habría convertido esos seis bloques en manchas claras sobre una página
      oscura — un fallo que se ve bonito y que nadie mira dos veces. Se oscurece
      por SELECTOR, no redefiniendo lo que las palabras quieren decir.
   2. **`voice.css` la carga SOLO `/voice`** (`core.js:129`), así que todo lo de
      aquí puede tocar el chrome compartido sin alcanzar a ninguna otra página.
      El footer YA es oscuro (`footer.site{background:var(--tinta)}`): lo único
      que hay que oscurecer del chrome es el `nav.main`.
   3. **El DOM no se toca donde lo miran los gates.** `check-voice-landing.js`
      cuenta `#v-planes tbody tr`, lee `#v-minutos td:first-child` y busca
      `.v-capgroup li > .v-ins`. La consola de canales se consigue con CSS y con
      un medidor DECORATIVO añadido dentro de la celda: las filas, las celdas y
      su texto siguen siendo los mismos que antes.
   ========================================================================= */

/* ── el lienzo ────────────────────────────────────────────────────────── */
body { background: #060908; color: #e8f0e7 }

/* Grano y viñeta van en los pseudo-elementos del BODY: no hacen falta nodos
   nuevos, y así el efecto cubre también el nav y el footer. Comprobado antes
   de usarlos: `site.css` no define ningún `body::before/after`. */
body::before {
  content: ""; position: fixed; inset: -50%; z-index: 90; pointer-events: none;
  opacity: .26; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/></filter><rect width='160' height='160' filter='url(%23n)' opacity='.55'/></svg>");
  animation: vGrano 700ms steps(4) infinite;
}
body::after {
  content: ""; position: fixed; inset: 0; z-index: 89; pointer-events: none;
  background: radial-gradient(118% 88% at 50% 40%, transparent 40%, rgba(0,0,0,.5) 88%, rgba(0,0,0,.8) 100%);
}
@keyframes vGrano {
  0%{transform:translate(0,0)} 25%{transform:translate(-3%,2%)}
  50%{transform:translate(2%,-3%)} 75%{transform:translate(-2%,-2%)} 100%{transform:translate(0,0)}
}

/* ── el chrome compartido (solo aquí) ─────────────────────────────────── */
nav.main { background: linear-gradient(180deg, rgba(6,9,8,.95), rgba(6,9,8,.74));
           border-bottom-color: rgba(184,255,74,.16) }
nav.main .logo, .nav-inner .logo { color: #e8f0e7 }
.nav-links a, .nav-sub > summary { color: #9fada6 }
.nav-links a:hover, .nav-links a.active,
.nav-sub > summary:hover, .nav-sub[open] > summary, .nav-sub > summary.active { color: var(--lima) }
/* El mega-panel (2026-08-18) se oscurece con las CUATRO variables que site.css
   declara en `nav.main`, no recopiando el bloque: dos copias de las mismas reglas
   se quedan viejas por separado, y esta hoja ya lo hizo una vez. */
nav.main { --np-bg:#0d1310; --np-line:rgba(232,240,231,.14); --np-txt:#9fada6;
           --np-hover:rgba(184,255,74,.07); --np-shadow:0 18px 44px -18px rgba(0,0,0,.8) }
.np-name { color: #e8f0e7 }
.np-links a { color: #cfd8cd }
.nav-auth a, .nav-right a { color: #cfd8cd }
.crumbs, .crumbs a { color: #66756e }
.crumbs a:hover { color: var(--lima) }

/* ── los tokens del contenido, en versión nocturna ────────────────────── */
/* Se redefinen SOLO los que describen superficies y líneas; `--v-tinta` sigue
   queriendo decir tinta y por eso no está en esta lista. */
#vmarketing, #vpanel {
  --v-suave:  #9fada6;
  --v-linea:  rgba(232,240,231,.11);
  --v-linea2: rgba(232,240,231,.17);
  --v-panel:  #111a16;
  --v-fondo2: #0b1210;
  --v-limad:  var(--lima, #b8ff4a);   /* sobre oscuro, el legible es el lima vivo */
}
#vmarketing, #vpanel { color: #e8f0e7 }
#vmarketing h1, #vmarketing h2, #vmarketing h3,
#vpanel h1, #vpanel h2, #vpanel h3 { color: #e8f0e7 }
#vmarketing .lead, #vmarketing .v-lead, #vmarketing p { color: #9fada6 }
#vmarketing .lead b, #vmarketing .v-lead b, #vmarketing p b, #vmarketing strong { color: #e8f0e7 }

/* ── el hero: letterbox + osciloscopio ────────────────────────────────── */
.v-hero { padding: clamp(96px, 13vh, 150px) 0 clamp(60px, 8vh, 96px);
          background: radial-gradient(120% 90% at 50% 122%, rgba(184,255,74,.13), transparent 62%) }
.v-hero::before { display: none }              /* el halo viejo lo sustituye el gradiente de arriba */
/* Las dos barras de cine. Van en el hero y no en el body para que sólo
   enmarquen la primera pantalla, que es lo que hace la apertura. */
.v-hero::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 7vh;
  background: #000; z-index: 6; pointer-events: none;
  animation: vAbrir 1.5s cubic-bezier(.16,1,.3,1) .15s both;
}
@keyframes vAbrir { from { height: 22vh } to { height: 7vh } }
#v-osc { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; opacity: .62; pointer-events: none }
.v-hero-grid { position: relative; z-index: 3 }
.v-hero h1 { font-size: clamp(2.6rem, 6.4vw, 5.6rem); line-height: .88;
             text-shadow: 0 0 70px rgba(6,9,8,.92), 0 0 140px rgba(6,9,8,.7) }
.v-badge { background: rgba(184,255,74,.10); color: var(--lima);
           border: 1px solid rgba(184,255,74,.32) }
.v-eyebrow { color: var(--lima) }
.v-nota { color: #66756e }

/* El diagrama del recorrido, en nocturno */
.v-flow svg .v-wire { stroke: rgba(232,240,231,.20) }
.v-flow .v-node rect { fill: #111a16; stroke: rgba(232,240,231,.16) }
.v-flow .v-node text { fill: #cfd8cd }
.v-flow .v-node-in rect { fill: rgba(184,255,74,.12); stroke: rgba(184,255,74,.45) }
.v-flow .v-node-in text { fill: var(--lima) }
.v-flow figcaption { color: #66756e }

/* ── la franja de hechos: riel de HUD ─────────────────────────────────── */
.v-strip { background: #0b1210; border-block: 1px solid rgba(232,240,231,.11) }
.v-fact b { color: var(--lima); text-shadow: 0 0 30px rgba(184,255,74,.35) }
.v-fact span { color: #9fada6 }

/* ── secciones ────────────────────────────────────────────────────────── */
.v-sec { background: transparent }
.v-sec-alt { background: #0b1210; border-block: 1px solid rgba(232,240,231,.09) }
.v-card, .v-demo, .v-code, .v-keys, .v-notas { background: #111a16;
          border-color: rgba(232,240,231,.12) }
.v-card h3 { color: #e8f0e7 }
.v-card p, .v-notas p { color: #9fada6 }
.v-notas p b { color: #e8f0e7 }
.v-code, .v-demo-out { background: #080d0b; color: #9fada6 }
.v-steps li b { color: #e8f0e7 }
.v-steps li span { color: #9fada6 }
.v-link { color: var(--lima) }

/* La regla de sección: el filo lima que abre cada bloque */
.v-sec .wrap > .v-eyebrow::before { background: var(--lima) }

/* ── las capacidades ──────────────────────────────────────────────────── */
.v-capgroup { background: #111a16; border-color: rgba(232,240,231,.12) }
.v-capgroup h3 { color: #e8f0e7 }
.v-capgroup li { color: #9fada6; border-color: rgba(232,240,231,.08) }
.v-ico { color: var(--lima) }
/* Las insignias de «probado» heredan color de fondo claro: se repintan para
   que sigan distinguiéndose sobre oscuro (es la señal de D0, no adorno). */
.v-capgroup li > .v-ins { color: var(--lima);
          background: rgba(184,255,74,.13); border-color: rgba(184,255,74,.34) }
.v-capgroup li > .v-ins-no { color: #ffc266;
          background: rgba(232,163,23,.14); border-color: rgba(232,163,23,.42) }

/* ══ LA CONSOLA DE CANALES — los planes ═══════════════════════════════════
   Sigue siendo una <table> con sus <tr> y sus <td>: los gates la cuentan y un
   lector de pantalla la sigue leyendo como tabla. Lo que cambia es cómo se ve,
   más el medidor decorativo que `voice.js` mete dentro de la celda del techo. */
.v-tabla-wrap { border: 1px solid rgba(232,240,231,.12); background: #0b1210 }
.v-tabla { color: #cfd8cd }
.v-tabla thead th { background: #0b1210; color: #66756e;
          border-bottom-color: rgba(232,240,231,.14) }
.v-tabla tbody tr { border-color: rgba(232,240,231,.08) }
.v-tabla tbody tr:hover { background: rgba(184,255,74,.045) }
.v-tabla td { border-color: rgba(232,240,231,.08) }
.v-tabla .v-num { color: #e8f0e7; font-variant-numeric: tabular-nums }
.v-tabla .v-precio { color: #e8f0e7 }
.v-tabla .v-precio small { color: #66756e }
.v-tabla .v-destacada { background: linear-gradient(90deg, rgba(184,255,74,.10), transparent 60%) }
.v-tabla .v-destacada td { border-color: rgba(184,255,74,.22) }
.v-tabla .v-destacada .v-precio { color: var(--lima); text-shadow: 0 0 30px rgba(184,255,74,.4) }
.v-etiqueta { background: var(--lima); color: #06110a }

/* El medidor. Lo pinta voice.js como hijo de la celda del techo; si el JS no
   corre, la celda enseña su número de siempre y aquí no hay nada que ver. */
.v-medidor { height: 6px; width: 108px; margin-top: 9px; border-radius: 3px;
             background: rgba(232,240,231,.10); overflow: hidden }
.v-medidor i {
  display: block; height: 100%;
  background: linear-gradient(90deg, var(--lima-deep, #457a12), var(--lima, #b8ff4a));
  transform-origin: left; transform: scaleX(var(--h, 0));
  transition: transform 1s cubic-bezier(.16,1,.3,1);
}
.v-destacada .v-medidor i { box-shadow: 0 0 14px rgba(184,255,74,.55) }

/* ── el tablero de minutos ────────────────────────────────────────────── */
.v-tabla-min tbody td:last-child { color: var(--lima); font-family: var(--font-mono);
             font-variant-numeric: tabular-nums }

/* ── el cierre ────────────────────────────────────────────────────────── */
.v-final { background: radial-gradient(80% 130% at 50% 100%, rgba(184,255,74,.16), transparent 66%);
           border-top: 1px solid rgba(232,240,231,.1) }
.v-final h2 { color: #e8f0e7 }
.v-final p { color: #9fada6 }

/* ── botones ──────────────────────────────────────────────────────────── */
.v-btn-1 { background: var(--lima); color: #06110a; box-shadow: 0 14px 46px -14px rgba(184,255,74,.45) }
.v-btn-1:hover { background: var(--lima-hot, #cdff7a) }
.v-btn-2 { background: transparent; color: #e8f0e7; border: 1px solid rgba(232,240,231,.28) }
.v-btn-2:hover { border-color: var(--lima); color: var(--lima) }

/* ── el panel del cliente ─────────────────────────────────────────────── */
/* El panel vive en la MISMA página (`#vpanel`), así que si no se oscurece
   también, el cliente que entra con sesión ve la mitad clara. */
.vp-tabs { border-bottom-color: rgba(232,240,231,.12) }
.vp-tabs button { color: #9fada6 }
.vp-tabs button[aria-selected="true"] { color: var(--lima); border-bottom-color: var(--lima) }
.vp-tabla { color: #cfd8cd }
.vp-tabla th { color: #66756e; border-bottom-color: rgba(232,240,231,.14) }
.vp-tabla td { border-color: rgba(232,240,231,.08) }
#vpanel .v-card, #vpanel .vp-caja, #vpanel fieldset { background: #111a16;
             border-color: rgba(232,240,231,.12) }
#vpanel input, #vpanel select, #vpanel textarea {
             background: #0b1210; color: #e8f0e7; border-color: rgba(232,240,231,.18) }
#vpanel input:focus, #vpanel select:focus, #vpanel textarea:focus { border-color: var(--lima) }

/* ── movimiento reducido ──────────────────────────────────────────────── */
/* site.css ya trae un bloque global que anula animaciones; se repite aquí lo
   que ese bloque no puede saber: que las barras del hero deben quedarse
   abiertas y el medidor lleno en vez de a cero. */
@media (prefers-reduced-motion: reduce) {
  .v-hero::after { height: 7vh; animation: none }
  .v-medidor i { transition: none }
}

/* ── el pre-footer del contador de vistas ─────────────────────────────── */
/* `.views-row` lleva `background:var(--fondo)` en un <style> INLINE que emite
   bake.js para todo el sitio, así que gana por orden de documento a cualquier
   regla de igual especificidad de esta hoja. Se sube la especificidad con
   `body` en vez de tocar bake.js, que repintaría el pre-footer de TODAS las
   páginas del sitio por un cambio que sólo es de ésta. */
body .views-row { background: #060908 }
body .views-chip { color: #8a958e }