/* =============================================================
   theresa.es — las páginas de Soluciones (Ops, Marketing, Finanzas y Analytics).
   `templates/solutions/_base.html` + `solutions/paginas/<slug>.html`.

   Rubén, 2026-10-15: sin portada de texto («no quiero texto de cabecera en ninguna página
   de la web salvo la landing»), con acción y con ejemplos («no con una pantalla vacía»).
   Cada página: UNA frase → la escena (`.vx-escena`, el impacto) → cada función, con su
   pantalla (`.sl-f`) → la rejilla de lo demás (`.sl-rejilla`) → más del grupo → cierre.

   Las pantallas de ejemplo son `.vx-*`: se animan al entrar en pantalla (`.vx-anima` →
   `.vx-in`, en `_base.html`). El marco (.ld-wrap, .ld-h2, .ld-link, .lp-btn, .ld-rv, .ld-cta)
   está aquí mismo, abajo; SOLO con los colores de `paleta.css` y para el lienzo del
   escritorio con `zoom: .75` (1 px de aquí = .75 reales).
   ============================================================= */

@media (min-width: 1024px) { body { zoom: .75; } }
body { background: var(--c-surface); }

.sl-btn--azul { background: var(--c-azul); color: #fff; }

/* ── El marco: lo que estas páginas tomaban de `landing.css` ─────────────────────────────
   `landing.css` se borró con la portada nueva (89999b67, 2026-10-24) y estas páginas se
   quedaron sin ancho (ocupaban la pantalla entera), sin botones y sin la animación de
   aparecer. Vive aquí. El ancho es el de la portada (`.pt-wrap`, portada.css): Rubén,
   2026-10-25 — «todas las páginas de la web, el mismo ancho que la de inicio». */
.ld { background: var(--c-surface); color: var(--c-text); }
/* Lo que entra animado desde fuera (el sello cae al 240 %) no puede ensanchar la página: en el
   móvil daba scroll lateral. `clip`, no `hidden`: no rompe la barra pegajosa del grupo. */
.ld { overflow-x: clip; }
.ld *, .ld *::before, .ld *::after { box-sizing: border-box; }
.ld img { display: block; max-width: 100%; }
.ld-wrap { max-width: 1520px; margin: 0 auto; padding: 0 60px; }

.lp-btn { display: inline-flex; align-items: center; gap: 9px; padding: 15px 30px; border-radius: 100px;
  font-family: 'Manrope', system-ui, sans-serif; font-weight: 700; font-size: 15px; line-height: 1; cursor: pointer;
  border: 0; text-decoration: none; transition: opacity .15s, transform .1s; }
.lp-btn:hover { opacity: .88; text-decoration: none; }
.lp-btn:active { transform: scale(.97); }
.lp-btn--ghost { background: var(--c-surface); color: var(--c-text); border: 1px solid var(--c-border); }

.js .ld-rv { opacity: 0; transform: translateY(32px); transition: opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1); }
.js .ld-rv.is-in { opacity: 1; transform: none; }

.ld-eyebrow { margin: 0 0 22px; font-size: 16px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--c-azul); }
.ld-h2 { margin: 0; font-size: clamp(52px, 4.6vw, 86px); font-weight: 800; letter-spacing: -.045em; line-height: 1.02; color: var(--c-text); }
.ld-lead { margin: 28px 0 0; font-size: 25px; line-height: 1.5; font-weight: 500; color: var(--c-text2); }
.ld-link { display: inline-flex; align-items: center; gap: 8px; font-size: 20px; font-weight: 700; color: var(--c-azul); text-decoration: none; }
.ld-link::after { content: ""; width: 9px; height: 9px; border-right: 2.5px solid currentColor; border-top: 2.5px solid currentColor; transform: rotate(45deg); transition: transform .2s ease; }
.ld-link:hover::after { transform: translateX(4px) rotate(45deg); }

.ld-cta { padding: 190px 0; text-align: center; }
.ld-cta__orbe { width: 96px; height: 96px; margin: 0 auto 44px; }
.ld-cta__btns { margin-top: 52px; display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.ld-cta .lp-btn { padding: 20px 40px; font-size: 19px; }

@media (max-width: 1023px) {
  .ld-wrap { padding: 0 20px; }
  .ld-eyebrow { font-size: 12px; margin-bottom: 14px; }
  .ld-h2 { font-size: clamp(34px, 8.6vw, 54px); }
  .ld-lead { font-size: 18px; margin-top: 18px; }
  .ld-link { font-size: 16px; }
  .ld-cta { padding: 100px 0; }
  .ld-cta__orbe { width: 72px; height: 72px; margin-bottom: 30px; }
  .ld-cta__btns { margin-top: 34px; }
  .ld-cta .lp-btn { padding: 16px 30px; font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .js .ld-rv { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ── La barra del grupo ────────────────────────────────────── */
.sl-local { position: sticky; top: var(--hm-cab, 68px); z-index: 40; background: color-mix(in srgb, var(--c-surface) 86%, transparent);
  -webkit-backdrop-filter: saturate(180%) blur(18px); backdrop-filter: saturate(180%) blur(18px); border-bottom: 1px solid var(--c-border); }
.sl-local__in { max-width: 1520px; margin: 0 auto; padding: 0 60px; height: 72px; display: flex; align-items: center; gap: 36px; }
.sl-local__grupo { font-size: 24px; font-weight: 800; letter-spacing: -.02em; color: var(--c-text); margin-right: auto; white-space: nowrap; }
.sl-local__links { display: flex; gap: 30px; overflow-x: auto; scrollbar-width: none; }
.sl-local__links::-webkit-scrollbar { display: none; }
.sl-local__links a { font-size: 16px; font-weight: 600; color: var(--c-text2); text-decoration: none; white-space: nowrap; transition: color .15s; }
.sl-local__links a:hover { color: var(--c-azul); }
.sl-local__links a.is-on { color: var(--c-text); font-weight: 800; }
.sl-local__cta { flex-shrink: 0; padding: 10px 20px; border-radius: 100px; background: var(--c-azul); color: #fff; font-size: 15px; font-weight: 700; text-decoration: none; transition: opacity .15s; }
.sl-local__cta:hover { opacity: .88; }

/* ── La frase y la escena ──────────────────────────────────── */
.sl-abre { padding: 72px 0 0; }
.sl-frase { margin: 0 auto 56px; max-width: 22ch; text-align: center; text-wrap: balance;
  font-size: clamp(52px, 4.2vw, 80px); font-weight: 800; letter-spacing: -.045em; line-height: 1.03; color: var(--c-text); }

/* el escenario: azul, con un poco de menta y de rosa al fondo, y las pantallas encima */
.vx-escena { position: relative; overflow: hidden; border-radius: 48px; padding: 64px;
  background:
    radial-gradient(circle at 88% 0%, color-mix(in srgb, var(--c-menta) 55%, transparent) 0%, transparent 42%),
    radial-gradient(circle at 0% 100%, color-mix(in srgb, var(--c-rose) 38%, transparent) 0%, transparent 46%),
    linear-gradient(150deg, color-mix(in srgb, var(--c-azul) 78%, var(--c-surface)) 0%, var(--c-azul) 46%, color-mix(in srgb, var(--c-azul) 70%, var(--c-text)) 100%); }
.vx-escena .vx-card { box-shadow: 0 40px 80px -36px color-mix(in srgb, var(--c-text) 70%, transparent), 0 2px 8px color-mix(in srgb, var(--c-text) 12%, transparent); }
/* lo que se lee sobre el azul, en blanco */
.vx-sobre { color: #fff; }
.vx-sobre__t { margin: 0; font-size: 22px; font-weight: 800; letter-spacing: -.01em; }
.vx-sobre__s { margin: 6px 0 0; font-size: 17px; font-weight: 500; color: rgba(255,255,255,.82); line-height: 1.45; }

/* rejillas de la escena: 12 columnas; cada tarjeta dice cuántas ocupa */
.vx-bento { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; align-items: stretch; }
.vx-c2 { grid-column: span 2; } .vx-c3 { grid-column: span 3; } .vx-c4 { grid-column: span 4; } .vx-c5 { grid-column: span 5; }
.vx-c6 { grid-column: span 6; } .vx-c7 { grid-column: span 7; } .vx-c8 { grid-column: span 8; } .vx-c9 { grid-column: span 9; } .vx-c12 { grid-column: span 12; }
.vx-kpis { display: grid; grid-template-columns: repeat(var(--n, 5), minmax(0, 1fr)); gap: 24px; }

/* ── Cada función: la frase de lo que te da y su pantalla ──── */
.sl-funciones { padding-top: 170px; }
.sl--verifactu .sl-abre { padding-bottom: 170px; }
.sl-f { padding: 0 0 170px; }
.sl-f__in { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 100px; align-items: center; }
.sl-f--rev .sl-f__in { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.sl-f--rev .sl-f__txt { order: 2; }
.sl-f__t { margin: 0; font-size: clamp(44px, 3.3vw, 64px); font-weight: 800; letter-spacing: -.04em; line-height: 1.05; color: var(--c-text); text-wrap: balance; }
.sl-f__p { margin: 28px 0 0; max-width: 34ch; font-size: 23px; line-height: 1.5; font-weight: 500; color: var(--c-text2); }
.sl-f__p b { color: var(--c-text); font-weight: 700; }

/* el fondo de cada pantalla */
.vx-panel { position: relative; overflow: hidden; border-radius: 44px; padding: 56px; background: var(--c-bg); min-height: 560px;
  display: flex; flex-direction: column; justify-content: center; gap: 22px; }
.vx-panel--azul { background:
    radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--c-menta) 45%, transparent) 0%, transparent 45%),
    linear-gradient(150deg, color-mix(in srgb, var(--c-azul) 80%, var(--c-surface)) 0%, var(--c-azul) 55%, color-mix(in srgb, var(--c-azul) 74%, var(--c-text)) 100%); }
.vx-panel--azul .vx-card { box-shadow: 0 40px 80px -36px color-mix(in srgb, var(--c-text) 70%, transparent); }

/* la rejilla de «y además»: tarjetas grises con su pantalla dentro */
.sl-rejilla { padding: 0 0 170px; }
.sl-rejilla__t { margin: 0 0 56px; font-size: clamp(44px, 3.3vw, 64px); font-weight: 800; letter-spacing: -.04em; line-height: 1.05; color: var(--c-text); }
.sl-rejilla__g { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
.sl-mini { display: flex; flex-direction: column; gap: 0; padding: 48px; border-radius: 40px; background: var(--c-bg); }
.sl-mini__t { margin: 0; font-size: 32px; font-weight: 800; letter-spacing: -.03em; line-height: 1.12; color: var(--c-text); }
.sl-mini__p { margin: 14px 0 32px; font-size: 20px; line-height: 1.5; font-weight: 500; color: var(--c-text2); }
.sl-mini .vx-card { margin-top: auto; }

/* ── Las piezas de las pantallas ───────────────────────────── */
.vx-card { position: relative; background: var(--c-surface); border-radius: 26px; padding: 28px 30px;
  box-shadow: 0 30px 60px -34px color-mix(in srgb, var(--c-text) 40%, transparent), 0 1px 3px color-mix(in srgb, var(--c-text) 8%, transparent); }
.vx-card--plana { box-shadow: none; border: 1px solid var(--c-border); }
.vx-card__cab { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.vx-card__t { margin: 0; font-size: 19px; font-weight: 800; letter-spacing: -.01em; line-height: 1.25; color: var(--c-text); }
.vx-card__s { margin: 5px 0 0; font-size: 15px; font-weight: 500; line-height: 1.4; color: var(--c-text2); }
.vx-card__pie { margin: 18px 0 0; font-size: 16px; font-weight: 500; line-height: 1.5; color: var(--c-text2); }
.vx-card__pie b { color: var(--c-text); font-weight: 800; }
.vx-graf { margin-top: 22px; }
.vx-eje { display: flex; justify-content: space-between; margin-top: 10px; font-size: 13px; font-weight: 600; color: var(--c-text3); }

/* cifras */
.vx-kpi__v { font-size: 46px; font-weight: 800; letter-spacing: -.035em; line-height: 1; color: var(--c-text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.vx-kpi__v small { font-size: .5em; font-weight: 700; letter-spacing: 0; margin-left: 3px; color: var(--c-text2); }
.vx-kpi__l { margin-top: 12px; font-size: 15px; font-weight: 700; color: var(--c-text2); }
.vx-kpi__s { margin-top: 10px; font-size: 13px; font-weight: 600; color: var(--c-text3); }
.vx-grande { font-size: 76px; font-weight: 800; letter-spacing: -.045em; line-height: 1; color: var(--c-text); font-variant-numeric: tabular-nums; }
.vx-grande small { font-size: .45em; letter-spacing: 0; margin-left: 4px; color: var(--c-text2); }
.v-bien { color: var(--c-menta-tx) !important; }
.v-mal { color: var(--c-rose-tx) !important; }

/* pastillas, botones e interruptores */
.vx-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 100px; font-size: 13px; font-weight: 700; line-height: 1.2; white-space: nowrap;
  background: var(--c-azul-soft); color: var(--c-azul-tx); }
.vx-chip--bien { background: var(--c-menta-soft); color: var(--c-menta-tx); }
.vx-chip--mal { background: var(--c-rose-soft); color: var(--c-rose-tx); }
.vx-chip--gris { background: var(--c-surface2); color: var(--c-text2); }
.vx-chip--azul { background: var(--c-azul); color: #fff; }
.vx-chip svg { width: 13px; height: 13px; }
.vx-btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 100px; background: var(--c-azul); color: #fff; font-size: 14px; font-weight: 700; white-space: nowrap; }
.vx-btn--gris { background: var(--c-surface2); color: var(--c-text); }

.vx-btn svg { width: 15px; height: 15px; }
.vx-sw { flex-shrink: 0; position: relative; width: 50px; height: 30px; border-radius: 30px; background: var(--c-rivet); transition: background .3s ease; }
.vx-sw::after { content: ""; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 2px 4px color-mix(in srgb, var(--c-text) 25%, transparent); transition: transform .3s ease; }
.vx-sw--on { background: var(--c-azul); }
.vx-sw--on::after { transform: translateX(20px); }
.vx-in .vx-sw--anima { background: var(--c-azul); transition-delay: calc(var(--i, 0) * .25s + .4s); }
.vx-in .vx-sw--anima::after { transform: translateX(20px); transition-delay: calc(var(--i, 0) * .25s + .4s); }

/* filas de una lista */
.vx-filas { display: flex; flex-direction: column; }
.vx-fila { display: flex; align-items: center; gap: 16px; padding: 15px 0; border-top: 1px solid var(--c-border); font-size: 16px; color: var(--c-text); }
.vx-fila:first-child { border-top: 0; }
.vx-fila__m { flex: 1; min-width: 0; }
.vx-fila__t { font-weight: 700; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vx-fila__s { margin-top: 3px; font-size: 14px; font-weight: 500; color: var(--c-text2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vx-fila__v { font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.vx-av { flex-shrink: 0; width: 42px; height: 42px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  background: var(--c-azul-soft); color: var(--c-azul-tx); font-size: 15px; font-weight: 800; }
.vx-av--menta { background: var(--c-menta-soft); color: var(--c-menta-tx); }
.vx-av--rosa { background: var(--c-rose-soft); color: var(--c-rose-tx); }
.vx-av--orbe { background: transparent; overflow: hidden; }
.vx-av--orbe img { width: 100%; height: 100%; object-fit: cover; }
.vx-ico { flex-shrink: 0; width: 42px; height: 42px; border-radius: 13px; display: inline-flex; align-items: center; justify-content: center; background: var(--c-azul-soft); color: var(--c-azul-tx); }
.vx-ico svg { width: 21px; height: 21px; }
.vx-ico--menta { background: var(--c-menta-soft); color: var(--c-menta-tx); }
.vx-ico--rosa { background: var(--c-rose-soft); color: var(--c-rose-tx); }

/* elegir una opción (la autonomía del correo, el recordatorio) */
.vx-radio { flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--c-rivet); background: var(--c-surface); }
.vx-elige .is-on { margin: 0 -14px; padding-left: 14px; padding-right: 14px; border-radius: 14px; border-top-color: transparent; background: var(--c-azul-soft); }
.vx-elige .is-on + .vx-fila { border-top-color: transparent; }
.vx-elige .is-on .vx-radio { border: 7px solid var(--c-azul); }
.vx-segm { display: inline-flex; gap: 4px; padding: 4px; border-radius: 100px; background: var(--c-surface2); }
.vx-segm span { padding: 8px 16px; border-radius: 100px; font-size: 14px; font-weight: 700; color: var(--c-text2); }
.vx-segm span.is-on { background: var(--c-surface); color: var(--c-text); box-shadow: 0 1px 3px color-mix(in srgb, var(--c-text) 18%, transparent); }

/* barras horizontales (un reparto, un embudo, una antigüedad) */
.vx-hb { display: grid; grid-template-columns: minmax(0, 190px) minmax(0, 1fr) auto; align-items: center; gap: 10px 18px; }
.vx-hb__l { font-size: 15px; font-weight: 700; color: var(--c-text); line-height: 1.25; }
.vx-hb__l small { display: block; font-size: 13px; font-weight: 600; color: var(--c-text3); }
.vx-hb__b { height: 30px; border-radius: 9px; background: var(--c-surface2); overflow: hidden; }
.vx-hb__b i { display: block; height: 100%; width: var(--w); border-radius: 9px; background: var(--c-azul);
  transform: scaleX(0); transform-origin: left; transition: transform .9s cubic-bezier(.2,.7,.2,1) calc(var(--i, 0) * .12s + .1s); }
.vx-hb__b i.c2 { background: color-mix(in srgb, var(--c-azul) 70%, var(--c-surface)); }
.vx-hb__b i.c3 { background: color-mix(in srgb, var(--c-azul) 48%, var(--c-surface)); }
.vx-hb__b i.menta { background: var(--c-menta); }
.vx-hb__b i.rosa { background: var(--c-rose); }
.vx-in .vx-hb__b i { transform: none; }
.vx-hb__v { font-size: 16px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--c-text); text-align: right; white-space: nowrap; }

/* el embudo: de la llamada al cobro */
.vx-embudo { display: flex; flex-direction: column; gap: 10px; }
.vx-embudo__p { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 14px; }
.vx-embudo__b { position: relative; height: 58px; border-radius: 14px; background: var(--c-azul); width: var(--w); margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between; padding: 0 20px; color: #fff; overflow: hidden;
  transform: scaleX(.2); opacity: 0; transition: transform .8s cubic-bezier(.2,.7,.2,1) calc(var(--i, 0) * .15s), opacity .5s ease calc(var(--i, 0) * .15s); }
.vx-embudo__p:nth-child(2) .vx-embudo__b { background: color-mix(in srgb, var(--c-azul) 88%, var(--c-surface)); }
.vx-embudo__p:nth-child(3) .vx-embudo__b { background: color-mix(in srgb, var(--c-azul) 76%, var(--c-surface)); }
.vx-embudo__p:nth-child(4) .vx-embudo__b { background: color-mix(in srgb, var(--c-azul) 64%, var(--c-menta)); }
.vx-embudo__p:nth-child(5) .vx-embudo__b { background: var(--c-menta); }
.vx-in .vx-embudo__b { transform: none; opacity: 1; }
.vx-embudo__b span { font-size: 15px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vx-embudo__b b { font-size: 22px; font-weight: 800; font-variant-numeric: tabular-nums; }
.vx-embudo__c { min-width: 64px; text-align: right; font-size: 15px; font-weight: 800; color: var(--c-rose-tx); font-variant-numeric: tabular-nums; }
.vx-embudo--compacto .vx-embudo__b { height: 44px; padding: 0 14px; border-radius: 11px; }
.vx-embudo--compacto .vx-embudo__b span { font-size: 13px; }
.vx-embudo--compacto .vx-embudo__b b { font-size: 17px; }
.vx-embudo--compacto .vx-embudo__c { min-width: 44px; font-size: 13px; }

/* las gráficas (SVG de `templatetags/web.py`) */
.vx-svg { display: block; width: 100%; height: auto; overflow: visible; }
.vx-bar { fill: color-mix(in srgb, var(--c-azul) 34%, var(--c-surface)); transform-box: fill-box; transform-origin: 50% 100%; transform: scaleY(0);
  transition: transform .8s cubic-bezier(.2,.7,.2,1) calc(var(--i, 0) * 14ms); }
.vx-bar--on { fill: var(--c-azul); }
.vx-barras--menta .vx-bar { fill: color-mix(in srgb, var(--c-menta) 55%, var(--c-surface)); }
.vx-barras--menta .vx-bar--on { fill: var(--c-rose); }
.vx-in .vx-bar { transform: none; }
.vx-linea { fill: none; stroke: var(--c-azul); stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.8s cubic-bezier(.4,0,.2,1) .25s; }
.vx-linea--media { stroke: var(--c-rose); stroke-width: 3; }
.vx-in .vx-linea { stroke-dashoffset: 0; }
.vx-area { fill: var(--c-azul-soft); opacity: 0; transition: opacity 1s ease 1s; }
.vx-in .vx-area { opacity: 1; }
.vx-punto { fill: var(--c-azul); stroke: var(--c-surface); stroke-width: 3; transform-box: fill-box; transform-origin: center; transform: scale(0); transition: transform .4s cubic-bezier(.3,1.6,.5,1) 1.9s; }
.vx-in .vx-punto { transform: scale(1); }
.vx-banda { fill: var(--c-menta-soft); }
.vx-ref { stroke: var(--c-rose); stroke-width: 2.5; stroke-dasharray: 8 7; }

/* lo que aún no ha pasado: discontinuo y más claro, después de la línea */
.vx-prevision { fill: none; stroke: color-mix(in srgb, var(--c-azul) 55%, var(--c-surface)); stroke-width: 3.5; stroke-linecap: round; stroke-dasharray: 2 11;
  opacity: 0; transition: opacity .9s ease 1.9s; }
.vx-in .vx-prevision { opacity: 1; }
.vx-bar--baja { fill: var(--c-rose); transform-origin: 50% 0; }
.vx-bar--prev { fill: color-mix(in srgb, var(--c-menta) 60%, var(--c-surface)); }
.vx-bar--prev.vx-bar--baja { fill: color-mix(in srgb, var(--c-rose) 45%, var(--c-surface)); }
.vx-cero { stroke: var(--c-text3); stroke-width: 2; }

/* un donut con su leyenda al lado */
.vx-dona-fila { display: grid; grid-template-columns: minmax(0, 180px) minmax(0, 1fr); gap: 28px; align-items: center; }

/* las etiquetas encima de una curva (el punto de equilibrio, hoy) */
.vx-eq { position: relative; }
.vx-eq__l { position: absolute; left: 0; padding: 3px 10px; border-radius: 8px; background: var(--c-rose-soft); font-size: 14px; font-weight: 800; color: var(--c-rose-tx); }
.vx-eq__hoy { position: absolute; transform: translate(-50%, 55%); padding: 6px 11px; border-radius: 9px; background: var(--c-azul); color: #fff; font-size: 14px; font-weight: 800; white-space: nowrap;
  opacity: 0; transition: opacity .5s ease 1.9s; }
.vx-in .vx-eq__hoy { opacity: 1; }

/* el mapa de calor */
.vx-mapa { display: grid; grid-template-columns: 44px repeat(var(--cols), minmax(0, 1fr)); gap: 6px; align-items: center; }
.vx-mapa i { display: block; aspect-ratio: 1.5; border-radius: 6px; background: var(--c-surface2); opacity: 0; transform: scale(.6);
  transition: opacity .4s ease calc(var(--i, 0) * 9ms), transform .4s ease calc(var(--i, 0) * 9ms); }
.vx-in .vx-mapa i { opacity: 1; transform: none; }
.vx-mapa i.n1 { background: color-mix(in srgb, var(--c-azul) 22%, var(--c-surface)); }
.vx-mapa i.n2 { background: color-mix(in srgb, var(--c-azul) 45%, var(--c-surface)); }
.vx-mapa i.n3 { background: color-mix(in srgb, var(--c-azul) 72%, var(--c-surface)); }
.vx-mapa i.n4 { background: var(--c-azul); }
.vx-mapa i.n5 { background: var(--c-rose); }
.vx-mapa__d { font-size: 13px; font-weight: 700; color: var(--c-text2); }
.vx-mapa__h { font-size: 12px; font-weight: 600; color: var(--c-text3); text-align: center; }

/* el donut */
.vx-dona { width: 100%; max-width: 220px; margin: 0 auto; opacity: 0; transform: rotate(-60deg) scale(.85); transition: opacity .6s ease, transform 1.1s cubic-bezier(.2,.7,.2,1); }
.vx-in .vx-dona { opacity: 1; transform: none; }
.vx-dona circle { fill: none; }
.vx-dona .c1 { stroke: var(--c-azul); } .vx-dona .c2 { stroke: var(--c-menta); } .vx-dona .c3 { stroke: var(--c-rose); }
.vx-dona .c4 { stroke: color-mix(in srgb, var(--c-azul) 35%, var(--c-surface)); } .vx-dona .c5 { stroke: var(--c-rivet); }
.vx-leyenda { display: flex; flex-direction: column; gap: 12px; }
.vx-leyenda span { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 600; color: var(--c-text); }
.vx-leyenda span b { margin-left: auto; font-weight: 800; font-variant-numeric: tabular-nums; }
.vx-leyenda i { width: 12px; height: 12px; border-radius: 4px; flex-shrink: 0; }
.vx-leyenda .c1 { background: var(--c-azul); } .vx-leyenda .c2 { background: var(--c-menta); } .vx-leyenda .c3 { background: var(--c-rose); }
.vx-leyenda .c4 { background: color-mix(in srgb, var(--c-azul) 35%, var(--c-surface)); } .vx-leyenda .c5 { background: var(--c-rivet); }
.vx-leyenda--fila { flex-direction: row; flex-wrap: wrap; gap: 8px 20px; }
.vx-leyenda--fila span { font-size: 13px; color: var(--c-text2); }

/* una conversación (la llamada, el correo, el chat) */
.vx-chat { display: flex; flex-direction: column; gap: 12px; }
.vx-msg { max-width: 82%; padding: 14px 18px; border-radius: 22px; font-size: 17px; line-height: 1.42; font-weight: 500; }
.vx-msg small { display: block; margin-bottom: 4px; font-size: 12px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; opacity: .72; }
.vx-msg--t { align-self: flex-start; background: var(--c-azul); color: #fff; border-bottom-left-radius: 7px; }
.vx-msg--c { align-self: flex-end; background: var(--c-surface); color: var(--c-text); border-bottom-right-radius: 7px; box-shadow: 0 1px 2px color-mix(in srgb, var(--c-text) 10%, transparent); }
.vx-card .vx-msg--c { background: var(--c-surface2); box-shadow: none; }
/* sobre el azul, el globo de Theresa un punto más hondo y los avisos en blanco */
.vx-escena .vx-msg--t, .vx-panel--azul .vx-msg--t { background: color-mix(in srgb, var(--c-azul) 62%, var(--c-text)); }
.vx-escena .vx-msg--sis, .vx-panel--azul .vx-msg--sis { background: var(--c-surface); }
.vx-msg--sis { align-self: center; max-width: 100%; padding: 8px 14px; border-radius: 100px; background: var(--c-menta-soft); color: var(--c-menta-tx); font-size: 14px; font-weight: 700; }

/* entrar uno detrás de otro (`.vx-seq`; `--i` lo pone `_base.html`) */
.js .vx-seq > * { opacity: 0; transform: translateY(16px); }
.vx-in .vx-seq > *, .vx-seq.vx-in > * { animation: vx-entra .55s cubic-bezier(.2,.7,.2,1) forwards; animation-delay: calc(var(--i, 0) * var(--ritmo, .55s) + var(--retraso, .2s)); }
@keyframes vx-entra { to { opacity: 1; transform: none; } }
/* aparecer con un golpe (la cita nueva, el «hecho») */
.js .vx-pop { opacity: 0; transform: scale(.85); }
.vx-in .vx-pop { animation: vx-pop .6s cubic-bezier(.3,1.5,.5,1) forwards; animation-delay: var(--d, .6s); }
@keyframes vx-pop { to { opacity: 1; transform: none; } }

/* el teléfono */
.vx-movil { position: relative; width: 360px; flex-shrink: 0; padding: 12px; border-radius: 56px; background: var(--c-surface);
  box-shadow: 0 50px 90px -34px color-mix(in srgb, var(--c-text) 60%, transparent), 0 0 0 1px var(--c-border); }
.vx-movil__pantalla { position: relative; border-radius: 45px; background: var(--c-bg); padding: 54px 18px 22px; min-height: 640px; overflow: hidden; }
.vx-movil__pantalla::before { content: ""; position: absolute; top: 14px; left: 50%; width: 104px; height: 28px; margin-left: -52px; border-radius: 20px; background: var(--c-text); }
.vx-movil__hora { position: absolute; top: 18px; left: 32px; font-size: 15px; font-weight: 800; color: var(--c-text); }
.vx-movil__cab { display: flex; align-items: center; gap: 12px; padding: 4px 4px 18px; }
.vx-movil__cab div > b { display: block; font-size: 17px; font-weight: 800; color: var(--c-text); }
.vx-movil__cab div > span { display: block; font-size: 13px; font-weight: 600; color: var(--c-text2); }

/* el aviso que llega a la pantalla del móvil */
.vx-aviso { display: flex; gap: 12px; padding: 14px 16px; border-radius: 22px; background: color-mix(in srgb, var(--c-surface) 92%, transparent);
  box-shadow: 0 12px 30px -14px color-mix(in srgb, var(--c-text) 40%, transparent); }
.vx-aviso__ico { flex-shrink: 0; width: 38px; height: 38px; border-radius: 10px; overflow: hidden; }
.vx-aviso__ico img { width: 100%; height: 100%; object-fit: cover; }
.vx-aviso__m { flex: 1; min-width: 0; }
.vx-aviso__t { display: flex; justify-content: space-between; gap: 8px; font-size: 14px; font-weight: 800; color: var(--c-text); }
.vx-aviso__t span { font-weight: 600; color: var(--c-text3); font-size: 12px; }
.vx-aviso__x { margin-top: 2px; font-size: 14px; font-weight: 500; line-height: 1.4; color: var(--c-text2); }

/* la agenda: columnas por persona, filas de media hora */
.vx-ag { display: grid; grid-template-columns: 54px repeat(var(--cols, 3), minmax(0, 1fr)); grid-auto-rows: 34px; column-gap: 8px; position: relative; }
.vx-ag__cab { grid-row: 1; display: flex; align-items: center; gap: 8px; padding-bottom: 6px; font-size: 14px; font-weight: 800; color: var(--c-text); background: var(--c-surface); }
/* la hora: su raya cruza todas las columnas y las citas van encima */
.vx-ag__h { grid-column: 1 / -1; align-self: start; padding-top: 3px; border-top: 1px solid var(--c-border); font-size: 12px; font-weight: 700; color: var(--c-text3); }
.vx-ag > .vx-cita { position: relative; z-index: 1; }
/* LA CITA, COMO EN LA APP (Rubén, 2026-10-30: «la agenda no lleva esos cards»): la tarjeta con
   relieve de `ops_core/agenda.html` (`.la-ev--relieve`): el color de quien atiende en degradado,
   el texto en blanco y la sombra del color; hora, nombre y servicio, uno debajo de otro. Sin la
   barra de color a la izquierda, que está prohibida en todo el proyecto. */
.vx-cita { --evc: var(--c-azul); margin: 2px 0; padding: 6px 10px; border-radius: 10px; overflow: hidden; color: #fff;
  background: linear-gradient(180deg, color-mix(in srgb, var(--evc) 64%, #fff) 0%, var(--evc) 100%);
  box-shadow: 0 7px 16px color-mix(in srgb, var(--evc) 26%, transparent), inset 0 1px 0 rgba(255,255,255,.25);
  font-size: 13px; line-height: 1.3; }
.vx-cita i { display: block; font-style: normal; font-weight: 700; opacity: .92; font-variant-numeric: tabular-nums; }
.vx-cita b { display: block; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vx-cita span { display: block; font-weight: 600; opacity: .92; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vx-cita--menta { --evc: var(--c-menta); }
.vx-cita--rosa { --evc: var(--c-rose); }
.vx-cita--gris { color: var(--c-text2); background: var(--c-surface2); box-shadow: none; }
/* la que acaba de entrar: el anillo de la cita marcada en la app */
.vx-cita--nueva { box-shadow: 0 0 0 3px var(--c-surface), 0 0 0 5px var(--evc), 0 10px 22px color-mix(in srgb, var(--evc) 36%, transparent); }
.vx-cita__de { display: inline-block !important; margin-top: 3px; padding: 1px 7px; border-radius: 100px; background: rgba(255,255,255,.22);
  font-size: 11px; font-weight: 800 !important; opacity: 1 !important; }
.vx-cita--libre { color: var(--c-menta-tx); background: transparent; box-shadow: none; border: 2px dashed color-mix(in srgb, var(--c-menta) 70%, var(--c-surface));
  display: flex; align-items: center; }
/* lo cerrado, rayado como en la app; y la raya roja de la hora de ahora */
.vx-ag__cerrado { grid-column: 2 / -1; margin: 0 -4px; border-radius: 8px;
  background: repeating-linear-gradient(-45deg, var(--c-bg), var(--c-bg) 6px, transparent 6px, transparent 12px); }
.vx-ag__ahora { grid-column: 2 / -1; align-self: center; position: relative; z-index: 3; height: 0; border-top: 2px solid var(--c-rose); }
.vx-ag__ahora::before { content: ""; position: absolute; left: -4px; top: -5px; width: 8px; height: 8px; border-radius: 50%; background: var(--c-rose); }
.vx-ag__punto { width: 8px; height: 8px; border-radius: 50%; background: var(--evc, var(--c-azul)); flex-shrink: 0; }

.vx-ag--semana { grid-auto-rows: 25px; }
.vx-ag--semana .vx-cita { padding: 4px 8px; font-size: 12px; margin: 1px 0; }
/* la cita que se arrastra a otra hora */
.vx-in .vx-arrastra { animation: vx-arrastra 1.4s cubic-bezier(.4,0,.2,1) .4s both; }
@keyframes vx-arrastra { 0% { transform: translateY(136px); } 15% { transform: translateY(136px) scale(1.04); box-shadow: 0 18px 30px -12px color-mix(in srgb, var(--c-text) 45%, transparent); }
  80% { transform: translateY(0) scale(1.04); box-shadow: 0 18px 30px -12px color-mix(in srgb, var(--c-text) 45%, transparent); } 100% { transform: none; } }

/* la sala de un restaurante */
.vx-sala { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: 20px; }
.vx-mesa { aspect-ratio: 1.45; border-radius: 16px; border: 2px solid var(--c-border); background: var(--c-surface); display: flex; flex-direction: column; align-items: center; justify-content: center;
  font-size: 20px; font-weight: 800; color: var(--c-text); line-height: 1.1; }
.vx-mesa small { font-size: 12px; font-weight: 700; color: var(--c-text3); }
.vx-mesa.is-ocupada { background: var(--c-surface2); border-color: transparent; color: var(--c-text3); }
.vx-mesa.is-elegida { transition: background .3s ease .6s, color .3s ease .6s, border-color .3s ease .6s; }
.vx-in .vx-mesa.is-elegida { background: var(--c-azul); border-color: var(--c-azul); color: #fff; }
.vx-in .vx-mesa.is-elegida small { color: rgba(255,255,255,.8); }

/* un correo */
.vx-mail__cab { display: flex; align-items: center; gap: 14px; padding-bottom: 16px; border-bottom: 1px solid var(--c-border); }
.vx-mail__de { flex: 1; min-width: 0; }
.vx-mail__de b { display: block; font-size: 16px; font-weight: 800; color: var(--c-text); }
.vx-mail__de span { display: block; font-size: 14px; font-weight: 500; color: var(--c-text2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vx-mail__asunto { margin: 16px 0 0; font-size: 19px; font-weight: 800; color: var(--c-text); }
.vx-mail__cuerpo { margin: 10px 0 0; font-size: 16px; line-height: 1.55; font-weight: 500; color: var(--c-text2); }
.vx-mail__cuerpo p { margin: 0 0 10px; }

/* la cámara del móvil haciendo la foto a un tique */
.vx-camara { background: color-mix(in srgb, var(--c-text) 90%, var(--c-azul)); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 26px; }
.vx-tique { position: relative; width: 100%; max-width: 270px; padding: 20px 18px; background: var(--c-surface); border-radius: 4px; color: var(--c-text);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 11.5px; line-height: 1.55; display: flex; flex-direction: column; gap: 2px;
  transform: rotate(-2deg); box-shadow: 0 20px 40px -18px color-mix(in srgb, var(--c-text) 80%, transparent); }
.vx-tique b { font-size: 12px; }
.vx-tique i { display: block; margin: 7px 0; border-top: 1px dashed var(--c-rivet); }
.vx-tique__l { display: flex; justify-content: space-between; gap: 10px; }
.vx-tique__l em { font-style: normal; }
.vx-tique__tot { font-weight: 800; font-size: 13px; }
.vx-tique--peq { transform: none; max-width: none; box-shadow: none; border: 1px solid var(--c-border); background: var(--c-surface2); }
.vx-escaneo { overflow: hidden; }
.vx-escaneo::after { content: ""; position: absolute; left: -10px; right: -10px; top: 0; height: 3px; background: var(--c-menta); box-shadow: 0 0 16px 2px var(--c-menta); opacity: 0; }
.vx-in .vx-escaneo::after { animation: vx-escanea 1.3s ease-in-out .3s 2 alternate; }
@keyframes vx-escanea { 0% { top: 0; opacity: 1; } 100% { top: calc(100% - 3px); opacity: 1; } }
.vx-disparo { width: 64px; height: 64px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 5px color-mix(in srgb, var(--c-surface) 35%, transparent); }
/* el dato que se está cambiando */
.vx-dato--edita { margin: 0 -12px; padding-left: 12px; padding-right: 12px; border-radius: 12px; background: var(--c-azul-soft); border-top-color: transparent; }
.vx-dato--edita .vx-dato__v::after { content: ""; display: inline-block; width: 2px; height: 1.1em; margin-left: 3px; vertical-align: -2px; background: var(--c-azul); animation: vx-cursor 1s steps(1) infinite; }
@keyframes vx-cursor { 50% { opacity: 0; } }

/* un billete o las monedas (el recuento de la caja) */
.vx-billete { flex-shrink: 0; min-width: 84px; padding: 7px 12px; border-radius: 9px; background: var(--c-menta-soft); color: var(--c-menta-tx); font-size: 15px; font-weight: 800; text-align: center; }
.vx-billete--moneda { background: var(--c-azul-soft); color: var(--c-azul-tx); }
/* dos series de barras una encima de otra (vendido detrás, cobrado delante) */
.vx-dobles { position: relative; margin-top: 22px; }
.vx-dobles .vx-svg + .vx-svg { position: absolute; inset: 0; }

/* el libro diario */
.vx-diario { display: grid; grid-template-columns: 70px minmax(0, 1fr) 90px 90px; font-size: 15px; font-weight: 600; color: var(--c-text); }
.vx-diario > span { padding: 11px 6px; border-top: 1px solid var(--c-border); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vx-diario > .vx-diario__c { border-top: 0; font-size: 13px; font-weight: 700; color: var(--c-text3); }
.vx-diario > .n { text-align: right; }

/* un consejo de Theresa Advice: lo que hay en juego, grande */
.vx-consejo { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.vx-consejo .vx-card__cab { width: 100%; align-items: center; }
.vx-consejo__e { font-size: 30px; font-weight: 800; letter-spacing: -.03em; font-variant-numeric: tabular-nums; color: var(--c-text); }
.vx-consejo__t { margin: 0; font-size: 18px; font-weight: 600; line-height: 1.45; color: var(--c-text); }

/* los pasos numerados de una pauta */
.vx-paso { flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--c-azul-soft); color: var(--c-azul-tx); font-size: 15px; font-weight: 800; }
/* una caja de búsqueda */
.vx-buscar { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: 14px; background: var(--c-surface2); font-size: 16px; font-weight: 600; color: var(--c-text); }
.vx-buscar svg { width: 18px; height: 18px; color: var(--c-text3); }

/* las estrellas de una encuesta o una reseña */
.vx-estrellas { display: flex; gap: 10px; }
.vx-estrellas svg { width: 46px; height: 46px; fill: var(--c-azul); }
.vx-estrellas--peq { gap: 3px; }
.vx-estrellas--peq svg { width: 18px; height: 18px; }
.vx-estrellas .is-off { fill: var(--c-rivet); }

/* una web (la del negocio, con el chat de Theresa) */
.vx-web { position: relative; overflow: hidden; border-radius: 22px; background: var(--c-surface); }
.vx-web__barra { display: flex; align-items: center; gap: 8px; padding: 12px 16px; background: var(--c-surface2); }
.vx-web__barra i { width: 11px; height: 11px; border-radius: 50%; background: var(--c-rivet); }
.vx-web__barra span { flex: 1; margin-left: 10px; padding: 6px 14px; border-radius: 100px; background: var(--c-surface); font-size: 13px; font-weight: 600; color: var(--c-text2); }
.vx-web__portada { height: 300px; padding: 34px 36px; color: #fff; display: flex; flex-direction: column; justify-content: flex-end;
  background: radial-gradient(circle at 80% 20%, color-mix(in srgb, var(--c-rose) 70%, transparent) 0%, transparent 45%), linear-gradient(140deg, color-mix(in srgb, var(--c-azul) 65%, var(--c-text)) 0%, var(--c-azul) 100%); }
.vx-web__portada b { font-size: 40px; font-weight: 800; letter-spacing: -.035em; line-height: 1; }
.vx-web__portada span { margin-top: 8px; font-size: 16px; font-weight: 600; opacity: .85; }
.vx-web__cuerpo { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; padding: 22px 36px 30px; }
.vx-web__cuerpo i { height: 90px; border-radius: 12px; background: var(--c-surface2); }
.vx-web__chat { position: absolute; right: 22px; bottom: 22px; width: 330px; padding: 16px; border-radius: 22px; background: var(--c-surface);
  box-shadow: 0 30px 60px -20px color-mix(in srgb, var(--c-text) 55%, transparent); }
.vx-web__chat .vx-msg { font-size: 14px; padding: 10px 13px; max-width: 90%; }
.vx-code { padding: 18px 20px; border-radius: 14px; background: var(--c-text); color: #fff; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 15px; line-height: 1.5; word-break: break-all; }
.vx-code b { color: var(--c-menta); font-weight: 500; }

/* la imagen de una promoción (la que hace Theresa) */
.vx-promo { position: relative; overflow: hidden; aspect-ratio: 16 / 10; border-radius: 16px; margin-bottom: 14px; padding: 18px 20px; color: #fff;
  display: flex; flex-direction: column; justify-content: flex-end; gap: 2px;
  background:
    radial-gradient(circle at 78% 22%, color-mix(in srgb, var(--c-menta) 80%, var(--c-surface)) 0%, transparent 36%),
    radial-gradient(circle at 12% 90%, var(--c-rose) 0%, transparent 52%),
    linear-gradient(140deg, color-mix(in srgb, var(--c-rose) 55%, var(--c-azul)) 0%, var(--c-azul) 58%, color-mix(in srgb, var(--c-azul) 68%, var(--c-text)) 100%); }
.vx-promo b { font-size: 54px; font-weight: 800; letter-spacing: -.045em; line-height: .95; }
.vx-promo span { font-size: 14px; font-weight: 700; opacity: .92; }
.vx-promo--grande { margin: 0; padding: 40px 44px; border-radius: 28px; box-shadow: 0 40px 80px -36px color-mix(in srgb, var(--c-text) 60%, transparent); }
.vx-promo--grande b { font-size: 132px; }
.vx-promo--grande span { font-size: 24px; }

/* una factura en papel */
.vx-papel { background: var(--c-surface); border-radius: 18px; padding: 34px 36px; box-shadow: 0 30px 60px -30px color-mix(in srgb, var(--c-text) 45%, transparent);
  font-size: 15px; color: var(--c-text); }
.vx-papel__cab { display: flex; justify-content: space-between; gap: 20px; padding-bottom: 18px; border-bottom: 2px solid var(--c-text); }
.vx-papel__cab b { display: block; font-size: 20px; font-weight: 800; }
.vx-papel__cab span { display: block; font-size: 13px; font-weight: 600; color: var(--c-text2); margin-top: 3px; }
.vx-papel__l { display: flex; justify-content: space-between; gap: 16px; padding: 11px 0; border-bottom: 1px solid var(--c-border); font-weight: 600; }
.vx-papel__l span:last-child { font-variant-numeric: tabular-nums; }
.vx-papel__tot { display: flex; justify-content: space-between; padding-top: 14px; font-size: 22px; font-weight: 800; }
.vx-qr { width: 108px; height: 108px; flex-shrink: 0; }
.vx-qr rect { fill: var(--c-text); }

/* el marco del QR */
.vx-qr-marco { position: relative; flex-shrink: 0; padding: 10px; border-radius: 14px; background: var(--c-surface); border: 1px solid var(--c-border); }

/* el chequeo de un dato (el lector de facturas, Verifactu) */
.vx-dato { display: flex; align-items: center; gap: 14px; padding: 13px 0; border-top: 1px solid var(--c-border); }
.vx-dato:first-child { border-top: 0; }
.vx-dato__l { width: 120px; flex-shrink: 0; font-size: 14px; font-weight: 600; color: var(--c-text2); }
.vx-dato__v { flex: 1; min-width: 0; font-size: 16px; font-weight: 700; color: var(--c-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.vx-ok { flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--c-menta); color: #fff; }
.vx-ok svg { width: 15px; height: 15px; }
.vx-ok--duda { background: var(--c-rose); }

/* dos fichas que se juntan en una */
.vx-junta { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
.vx-in .vx-junta__a { animation: vx-junta-a .9s cubic-bezier(.4,0,.2,1) .5s forwards; }
.vx-in .vx-junta__b { animation: vx-junta-b .9s cubic-bezier(.4,0,.2,1) .5s forwards; }
@keyframes vx-junta-a { to { transform: translateX(14%); opacity: .45; } }
@keyframes vx-junta-b { to { transform: translateX(-14%); opacity: .45; } }

.vx-flota { position: absolute; z-index: 3; }

/* ── Lo que nunca hace ─────────────────────────────────────── */
.sl-promesa { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 72px; align-items: center; padding: 96px; border-radius: 44px; margin-bottom: 170px;
  background: linear-gradient(140deg, color-mix(in srgb, var(--c-azul) 82%, var(--c-surface)) 0%, var(--c-azul) 46%, color-mix(in srgb, var(--c-azul) 78%, var(--c-text)) 100%); }
.sl-promesa__titulo { margin: 0; font-size: clamp(48px, 3.8vw, 72px); font-weight: 800; letter-spacing: -.045em; line-height: 1.04; color: #fff; }
.sl-promesa__lista { list-style: none; margin: 0; padding: 0; }
.sl-promesa__lista li { display: flex; align-items: center; gap: 20px; padding: 22px 0; border-top: 1px solid rgba(255,255,255,.26); font-size: 24px; font-weight: 600; line-height: 1.35; color: #fff; }
.sl-promesa__lista li:last-child { border-bottom: 1px solid rgba(255,255,255,.26); }
.sl-promesa__lista svg { flex-shrink: 0; width: 26px; height: 26px; color: var(--c-menta); }

/* la nota de lo que aún no está */
.sl-nota { display: flex; gap: 16px; align-items: flex-start; max-width: 1100px; margin: -60px auto 150px; padding: 26px 32px; border-radius: 24px;
  background: var(--c-bg); font-size: 19px; line-height: 1.5; font-weight: 500; color: var(--c-text2); }
.sl-nota svg { flex-shrink: 0; width: 24px; height: 24px; margin-top: 2px; color: var(--c-azul); }

/* más en el grupo */
.sl-mas { padding: 120px 0 130px; background: var(--c-bg); }
.sl-mas__titulo { margin: 0 0 40px; font-size: 18px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--c-text3); }
.sl-mas__pista { display: flex; gap: 28px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 6px; }
.sl-mas__pista::-webkit-scrollbar { display: none; }
.sl-mas__card { flex: 0 0 440px; scroll-snap-align: start; display: flex; flex-direction: column; gap: 14px; padding: 44px 42px; border-radius: 36px; background: var(--c-surface);
  text-decoration: none; transition: transform .25s cubic-bezier(.2,.7,.2,1), box-shadow .25s ease; }
.sl-mas__card:hover { transform: translateY(-4px); box-shadow: 0 30px 60px -30px color-mix(in srgb, var(--c-text) 30%, transparent); }
.sl-mas__nombre { font-size: 17px; font-weight: 800; letter-spacing: .02em; color: var(--c-azul); }
.sl-mas__frase { flex: 1; font-size: 28px; line-height: 1.2; font-weight: 800; letter-spacing: -.025em; color: var(--c-text); }
.sl-mas__card .ld-link { margin-top: 18px; font-size: 18px; }


/* lo que solo cabe en el ancho del ordenador */
@media (max-width: 1023px) { .vx-solo-ancho { display: none !important; } }
@media (min-width: 1024px) { .vx-solo-movil { display: none !important; } }

/* ── Tableta y móvil (sin zoom) ────────────────────────────── */
@media (max-width: 1023px) {
  .sl-local__in { padding: 0 20px; height: 54px; gap: 18px; }
  .sl-local__grupo { font-size: 18px; }
  .sl-local__links { display: none; }
  .sl-local__cta { padding: 8px 16px; font-size: 14px; }

  .sl-abre { padding-top: 30px; }
  .sl-frase { margin-bottom: 26px; font-size: clamp(30px, 8.4vw, 50px); letter-spacing: -.04em; }

  .vx-escena { border-radius: 28px; padding: 16px; }
  .vx-bento { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .vx-bento > * { grid-column: auto !important; min-width: 0; }
  .vx-kpis > *, .vx-panel > *, .vx-escena > * { min-width: 0; }
  /* una fila con pastilla y cifra: la pastilla y la cifra bajan a su propia línea */
  .vx-fila:has(> .vx-chip + .vx-fila__v) { flex-wrap: wrap; row-gap: 8px; }
  .vx-fila:has(> .vx-chip + .vx-fila__v) > .vx-fila__m { flex-basis: calc(100% - 60px); }
  .vx-fila:has(> .vx-chip + .vx-fila__v) > .vx-chip { margin-left: auto; }
  .vx-fila > .vx-fila__v { width: auto !important; }
  .vx-fila__t, .vx-fila__s, .vx-dato__v { white-space: normal; }
  .vx-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .vx-kpis > :first-child:nth-last-child(odd) { grid-column: span 2; }
  .vx-dona-fila { grid-template-columns: 110px minmax(0, 1fr); gap: 18px; }
  .vx-sobre__t { font-size: 18px; }
  .vx-sobre__s { font-size: 15px; }

  .sl-funciones { padding-top: 84px; }
  .sl--verifactu .sl-abre { padding-bottom: 84px; }
  .sl-f { padding-bottom: 84px; }
  .sl-f__in, .sl-f--rev .sl-f__in { grid-template-columns: 1fr; gap: 26px; }
  .sl-f--rev .sl-f__txt { order: 0; }

  .sl-f__t { font-size: clamp(28px, 7.6vw, 44px); letter-spacing: -.035em; }
  .sl-f__p { margin-top: 14px; font-size: 17px; }
  .vx-panel { padding: 16px; border-radius: 28px; min-height: 0; gap: 12px; }

  .sl-rejilla { padding-bottom: 84px; }
  .sl-rejilla__t { margin-bottom: 26px; font-size: clamp(28px, 7.6vw, 44px); }
  .sl-rejilla__g { grid-template-columns: 1fr; gap: 14px; }
  .sl-mini { padding: 24px 16px 16px; border-radius: 28px; }
  .sl-mini__t { font-size: 23px; padding: 0 6px; }
  .sl-mini__p { font-size: 16px; margin: 10px 0 20px; padding: 0 6px; }

  .vx-card { padding: 20px 18px; border-radius: 20px; }
  .vx-card__cab { flex-wrap: wrap; row-gap: 10px; }
  .vx-segm span { padding: 6px 11px; font-size: 13px; }
  .vx-card__t { font-size: 17px; }
  .vx-card__s { font-size: 14px; }
  .vx-card__pie { font-size: 15px; margin-top: 14px; }
  .vx-kpi__v { font-size: 30px; }
  .vx-kpi__l { font-size: 13px; margin-top: 8px; }
  .vx-kpi__s { font-size: 12px; margin-top: 6px; }
  .vx-grande { font-size: 50px; }
  .vx-fila { font-size: 15px; gap: 12px; padding: 12px 0; }
  .vx-fila__s { font-size: 13px; }
  .vx-av, .vx-ico { width: 36px; height: 36px; font-size: 13px; }
  .vx-hb { grid-template-columns: minmax(0, 110px) minmax(0, 1fr) auto; gap: 8px 10px; }
  .vx-hb__l { font-size: 13px; }
  .vx-hb__v { font-size: 14px; }
  .vx-hb__b { height: 24px; }
  .vx-embudo__b { height: 46px; padding: 0 14px; border-radius: 11px; width: calc(46% + var(--w) * .54); }
  .vx-embudo__b span { font-size: 13px; }
  .vx-embudo__b b { font-size: 17px; }
  .vx-embudo__c { min-width: 40px; font-size: 13px; }
  .vx-msg { font-size: 15px; padding: 12px 15px; border-radius: 18px; max-width: 88%; }
  .vx-movil { width: 100%; max-width: 330px; margin: 0 auto; border-radius: 48px; padding: 10px; }
  .vx-movil__pantalla { border-radius: 39px; min-height: 0; padding: 50px 14px 18px; }

  .vx-flota { position: static; }
  .vx-papel { padding: 22px 20px; font-size: 14px; }
  .vx-consejo__e { font-size: 22px; }
  .vx-consejo__t { font-size: 15px; }
  .vx-diario { grid-template-columns: 46px minmax(0, 1fr) 62px 62px; font-size: 12px; }
  .vx-estrellas svg { width: 34px; height: 34px; }
  .vx-web__portada { height: 170px; padding: 20px; }
  .vx-web__portada b { font-size: 26px; }
  .vx-web__cuerpo { padding: 14px 20px 20px; gap: 8px; }
  .vx-web__cuerpo i { height: 50px; }
  .vx-web__chat { position: static; width: auto; margin: 0 12px 12px; box-shadow: 0 10px 30px -14px color-mix(in srgb, var(--c-text) 45%, transparent); }
  .vx-code { font-size: 13px; padding: 14px; }
  .vx-promo--grande { padding: 22px 24px; border-radius: 20px; }
  .vx-promo--grande b { font-size: 72px; }
  .vx-promo--grande span { font-size: 16px; }
  .vx-papel__tot { font-size: 19px; }
  .vx-qr { width: 84px; height: 84px; }
  .vx-dato__l { width: 92px; font-size: 13px; }
  .vx-dato__v { font-size: 15px; }
  .vx-mapa { grid-template-columns: 34px repeat(var(--cols), minmax(0, 1fr)); gap: 3px; }
  .vx-mapa i { border-radius: 4px; }
  .vx-mapa__h { font-size: 10px; }
  .vx-ag { grid-auto-rows: 30px; column-gap: 5px; grid-template-columns: 40px repeat(var(--cols, 3), minmax(0, 1fr)); }
  .vx-ag--semana { grid-auto-rows: 22px; }
  .vx-cita { padding: 5px 7px; font-size: 12px; }
  .vx-sala { gap: 8px; }
  .vx-mesa { border-radius: 11px; font-size: 16px; }

  .sl-promesa { grid-template-columns: 1fr; gap: 28px; padding: 40px 26px; border-radius: 28px; margin-bottom: 84px; }
  .sl-promesa__titulo { font-size: clamp(30px, 8.4vw, 44px); }
  .sl-promesa__lista li { font-size: 17px; padding: 15px 0; gap: 14px; }
  .sl-promesa__lista svg { width: 20px; height: 20px; }

  .sl-nota { margin: -40px 0 72px; padding: 18px 20px; border-radius: 18px; font-size: 15px; }
  .sl-nota svg { width: 20px; height: 20px; }

  .sl-mas { padding: 64px 0 72px; }
  .sl-mas__titulo { margin-bottom: 22px; font-size: 14px; }
  .sl-mas__pista { gap: 14px; margin: 0 -22px; padding: 0 22px 6px; scroll-padding: 0 22px; }
  .sl-mas__card { flex-basis: 80%; padding: 28px 24px; border-radius: 24px; }
  .sl-mas__nombre { font-size: 14px; }
  .sl-mas__frase { font-size: 21px; }
  .sl-mas__card .ld-link { font-size: 16px; margin-top: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .vx-bar, .vx-linea, .vx-area, .vx-punto, .vx-mapa i, .vx-dona, .vx-hb__b i, .vx-embudo__b, .vx-sw, .vx-sw::after { transition: none !important; }
  .vx-bar, .vx-punto, .vx-mapa i, .vx-dona, .vx-hb__b i, .vx-embudo__b { transform: none !important; opacity: 1 !important; }
  .vx-linea { stroke-dashoffset: 0 !important; }
  .vx-area { opacity: 1 !important; }
  .js .vx-seq > *, .js .vx-pop { opacity: 1 !important; transform: none !important; animation: none !important; }
  .sl-mas__card { transition: none; }
}

/* ══ LAS ESCENAS VIVAS (2026-10-17; `templates/web/escenas/`) ══════════════════════
   Rubén: «esas fotos vacías sin movimiento hay que cambiarlas por lo que el cliente quiere
   ver pasando: una llamada real, cómo Theresa responde a un email o envía una factura y te
   calcula el trimestre; ese efecto de un ser vivo dentro de tu aplicación». Las piezas
   nuevas, sobre las de arriba; los colores, solo los de `paleta.css`. ──────────────── */

/* el texto que Theresa escribe (`_web_vivo.html` lo teclea) */
.vx-escribe.is-escribiendo::after { content: ""; display: inline-block; width: 2px; height: 1em; margin-left: 2px; vertical-align: -2px; background: var(--c-azul); animation: vx-cursor 1s steps(1) infinite; }

/* el fichaje: el QR que cambia, el reloj grande y el sello */
.vx-reloj { font-size: 54px; font-weight: 800; letter-spacing: -.03em; line-height: 1; font-variant-numeric: tabular-nums; color: var(--c-text); }
.vx-reloj small { display: block; margin-top: 8px; font-size: 14px; font-weight: 600; color: var(--c-text2); letter-spacing: 0; }
.vx-sello { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 100px; background: var(--c-menta-soft); color: var(--c-menta-tx); font-size: 14px; font-weight: 800; }
.vx-sello svg { width: 16px; height: 16px; }
.vx-qr-vivo { position: relative; }
.vx-in .vx-qr-vivo .vx-qr { animation: vx-qr-cambia 6s steps(1) infinite; }
@keyframes vx-qr-cambia { 50% { transform: scaleX(-1); } }
.vx-qr-vivo__t { position: absolute; left: 0; right: 0; bottom: -22px; text-align: center; font-size: 12px; font-weight: 700; color: var(--c-text3); }
/* la semana fichada: una barra por día, el turno previsto detrás */
.vx-semana { display: grid; grid-template-columns: 44px minmax(0, 1fr) 70px; gap: 10px 14px; align-items: center; }
.vx-semana__d { font-size: 13px; font-weight: 800; color: var(--c-text2); }
.vx-semana__b { position: relative; height: 22px; border-radius: 7px; background: var(--c-surface2); overflow: hidden; }
.vx-semana__b i { position: absolute; top: 0; bottom: 0; left: var(--x, 0); width: var(--w); border-radius: 7px; background: var(--c-azul);
  transform: scaleX(0); transform-origin: left; transition: transform .8s cubic-bezier(.2,.7,.2,1) calc(var(--i, 0) * .12s + .1s); }
.vx-semana__b i.previsto { background: transparent; border: 2px dashed var(--c-rivet); transform: none; }
.vx-semana__b i.pausa { background: var(--c-menta); }
.vx-semana__b i.falta { background: var(--c-rose); }
.vx-in .vx-semana__b i { transform: none; }
.vx-semana__v { font-size: 14px; font-weight: 800; font-variant-numeric: tabular-nums; text-align: right; color: var(--c-text); }

/* el cuadrante de turnos: una fila por persona, una celda por día */
.vx-cuadrante { display: grid; grid-template-columns: 110px repeat(7, minmax(0, 1fr)); gap: 6px; align-items: center; }
.vx-cuadrante__p { font-size: 14px; font-weight: 800; color: var(--c-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vx-cuadrante__d { font-size: 12px; font-weight: 700; color: var(--c-text3); text-align: center; }
.vx-turno { height: 38px; border-radius: 9px; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; color: #fff; background: var(--c-azul);
  opacity: 0; transform: scale(.7); transition: opacity .35s ease calc(var(--i, 0) * 45ms), transform .35s cubic-bezier(.3,1.4,.5,1) calc(var(--i, 0) * 45ms); }
.vx-in .vx-turno { opacity: 1; transform: none; }
.vx-turno--tarde { background: color-mix(in srgb, var(--c-azul) 62%, var(--c-text)); }
.vx-turno--libre { background: var(--c-surface2); color: var(--c-text3); }
.vx-turno--vac { background: var(--c-menta); }
.vx-turno--hueco { background: transparent; border: 2px dashed var(--c-rose); color: var(--c-rose-tx); }

/* un calendario de un mes con días marcados */
.vx-mes { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.vx-mes__s { text-align: center; font-size: 11px; font-weight: 700; color: var(--c-text3); padding-bottom: 4px; }
.vx-mes span:not(.vx-mes__s) { aspect-ratio: 1; display: flex; align-items: center; justify-content: center; border-radius: 50%; font-size: 13px; font-weight: 600; color: var(--c-text); font-variant-numeric: tabular-nums; }
.vx-mes .is-off { color: var(--c-text3); font-weight: 500; }
.vx-mes .is-vac { background: var(--c-azul); color: #fff; font-weight: 800; }
.vx-mes .is-pedido { border: 2px dashed var(--c-azul); color: var(--c-azul-tx); font-weight: 800; }
.vx-mes .is-fest { background: var(--c-surface2); color: var(--c-text2); font-weight: 700; }
.vx-mes .is-cerrado { background: var(--c-rose-soft); color: var(--c-rose-tx); font-weight: 700; }
.vx-mes .is-hoy { box-shadow: inset 0 0 0 2px var(--c-text); font-weight: 800; }

/* la firma: el trazo que se dibuja y el sello de validez */
.vx-firma { position: relative; height: 150px; border-radius: 16px; background: var(--c-surface2); overflow: hidden; }
.vx-firma svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.vx-firma path { fill: none; stroke: var(--c-text); stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.vx-in .vx-firma path { animation: vx-traza 1.8s cubic-bezier(.4,0,.2,1) .5s forwards; }
@keyframes vx-traza { to { stroke-dashoffset: 0; } }
.vx-firma__linea { position: absolute; left: 20px; right: 20px; bottom: 26px; border-top: 1px solid var(--c-rivet); }
.vx-firma__x { position: absolute; left: 20px; bottom: 8px; font-size: 12px; font-weight: 700; color: var(--c-text3); }

/* un documento (PDF) y el reparto de un PDF en muchos */
.vx-doc { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; background: var(--c-surface2); font-size: 14px; font-weight: 700; color: var(--c-text); }
.vx-doc__i { flex-shrink: 0; width: 34px; height: 42px; border-radius: 6px; background: var(--c-surface); border: 1.5px solid var(--c-border); position: relative; }
.vx-doc__i::before, .vx-doc__i::after { content: ""; position: absolute; left: 7px; right: 7px; height: 2px; border-radius: 2px; background: var(--c-rivet); }
.vx-doc__i::before { top: 12px; } .vx-doc__i::after { top: 20px; width: 60%; right: auto; }
.vx-doc__i--pdf { border-color: var(--c-rose); }
.vx-doc__i--pdf::before { background: var(--c-rose); }
.vx-doc small { display: block; font-size: 12px; font-weight: 600; color: var(--c-text2); }
.vx-reparto { display: grid; grid-template-columns: minmax(0, 1fr) 42px minmax(0, 1.4fr); gap: 18px; align-items: center; }
.vx-reparto__flecha { color: var(--c-text3); }
.vx-reparto__flecha svg { width: 42px; height: 42px; }
.vx-reparto__a { display: flex; flex-direction: column; gap: 8px; }

/* el chat de Theresa en RRHH */
.vx-orden { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: 100px; background: var(--c-surface2); font-size: 16px; font-weight: 600; color: var(--c-text); }
.vx-orden svg { flex-shrink: 0; width: 20px; height: 20px; color: var(--c-azul); }

/* el plano de un restaurante: mesas con su color de estado (sala.html: verde libre · azul reservada · negro ocupada · gris plantón) */
.vx-mesa.is-reservada { background: var(--c-azul); border-color: var(--c-azul); color: #fff; }
.vx-mesa.is-reservada small { color: rgba(255,255,255,.8); }
.vx-mesa.is-libre { border-color: var(--c-menta); color: var(--c-menta-tx); }
.vx-mesa.is-sentada { background: var(--c-text); border-color: var(--c-text); color: #fff; }
.vx-mesa.is-sentada small { color: rgba(255,255,255,.7); }

/* la escena en una tarjeta de la portada (`.ld-fn__media`): la misma pieza, con su aire */
.ld-vivo { position: absolute; left: 0; top: 72px; right: -48px; bottom: -48px; display: flex; flex-direction: column; justify-content: flex-start; gap: 18px; }
.ld-vivo > .vx-card, .ld-vivo > .vx-movil { flex-shrink: 0; }
.ld-vivo .vx-card { box-shadow: 0 40px 90px -30px color-mix(in srgb, var(--c-text) 32%, transparent), 0 8px 24px -12px color-mix(in srgb, var(--c-text) 18%, transparent); }
.ld-fn__tile--rev .ld-vivo { left: -48px; right: 0; }
.ld-fn__tile--alta .ld-vivo { top: 0; right: -48px; }
.ld-vivo--fila { flex-direction: row; align-items: flex-start; gap: 24px; }
.ld-vivo--fila > * { flex: 1 1 0; min-width: 0; }
.ld-vivo--fila > .vx-movil { flex: 0 0 300px; }
.ld-fn__tile--azul .ld-vivo .vx-card { box-shadow: 0 40px 90px -30px rgba(0,0,0,.45); }
.ld-vivo .vx-movil { width: 300px; }
.ld-vivo .vx-movil__pantalla { min-height: 0; }

@media (max-width: 1023px) {

  .vx-reloj { font-size: 40px; }
  .vx-cuadrante { grid-template-columns: 70px repeat(7, minmax(0, 1fr)); gap: 4px; }
  .vx-cuadrante__p { font-size: 12px; }
  .vx-turno { height: 30px; font-size: 10px; border-radius: 7px; }
  .vx-semana { grid-template-columns: 34px minmax(0, 1fr) 54px; gap: 8px 10px; }
  .vx-reparto { grid-template-columns: 1fr; gap: 10px; }
  .vx-reparto__flecha { display: none; }

  .vx-orden { font-size: 14px; padding: 10px 14px; }
  .ld-vivo, .ld-fn__tile--rev .ld-vivo, .ld-fn__tile--alta .ld-vivo { position: static; display: flex; flex-direction: column; gap: 12px; padding: 0 22px 26px 0; }
  .ld-vivo--fila { flex-direction: column; }
  .ld-vivo--fila > .vx-movil { flex: none; }
  .ld-vivo .vx-movil { width: 100%; max-width: 300px; margin: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .vx-qr-vivo .vx-qr { animation: none !important; }
  .vx-turno, .vx-semana__b i { opacity: 1 !important; transform: none !important; transition: none !important; }
  .vx-firma path { stroke-dashoffset: 0 !important; animation: none !important; }
}

/* ══ LA JERARQUÍA, DEL DERECHO (Rubén, 2026-10-17 por la tarde: «la información que realmente
   aporta está en gris clarito y las etiquetas en negro: destacas lo que no hay que destacar»).
   Lo que dice Theresa, lo que pasó y la cifra van en el color del texto; la etiqueta, pequeña
   y en gris. Estas reglas van después de las de arriba y mandan. ═══════════════════════════ */
.vx-card__s, .vx-fila__s, .vx-movil__cab div > span, .vx-aviso__x, .vx-doc small, .vx-hb__l small, .vx-card__pie, .vx-kpi__l, .vx-mail__de span {
  color: color-mix(in srgb, var(--c-text) 84%, var(--c-text2)); font-weight: 600; }
.vx-fila__s { font-size: 15px; white-space: normal; overflow: visible; }
.vx-card__s { font-size: 15px; }
.vx-card__pie { font-size: 17px; color: var(--c-text); }
.vx-mail__cuerpo { color: var(--c-text); font-weight: 600; font-size: 17px; }
.vx-msg { font-weight: 600; }
.vx-msg--c { color: var(--c-text); }
.vx-aviso__x { color: var(--c-text); font-size: 15px; }
.vx-kpi__l { color: color-mix(in srgb, var(--c-text) 70%, var(--c-text2)); font-size: 14px; }
.vx-kpi__s { color: color-mix(in srgb, var(--c-text) 60%, var(--c-text2)); }
.vx-consejo__t { font-size: 19px; font-weight: 600; }
/* las etiquetas de verdad (qué es esto), pequeñas y en gris: `.vx-etq` */
.vx-etq { display: block; margin: 0 0 6px; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--c-text3); }
.sl-f__p { color: var(--c-text); font-weight: 500; }
.sl-mini__p { color: var(--c-text); }
.ld-lead { color: var(--c-text); }

/* ══ LAS PORTADAS DE CADA PÁGINA, cada una con su composición (Rubén: «cada página tiene que estar
   muy elaborada, tener efectos diferentes, una sensación de wow diferente; la misma plantilla y el
   mismo efecto cansa al ojo»). Variantes del escenario y una familia de efectos (`.fx-*`) que cada
   página combina a su manera. ═══════════════════════════════════════════════════════════════════ */

/* el escenario: azul (el de siempre), oscuro de noche, claro, o sin caja (las piezas flotan) */
.vx-escena--noche { background:
    radial-gradient(circle at 80% 10%, color-mix(in srgb, var(--c-azul) 55%, transparent) 0%, transparent 40%),
    radial-gradient(circle at 10% 90%, color-mix(in srgb, var(--c-rose) 30%, transparent) 0%, transparent 42%),
    linear-gradient(160deg, color-mix(in srgb, var(--c-azul) 30%, var(--c-tinta)) 0%, var(--c-tinta) 60%, color-mix(in srgb, var(--c-azul) 18%, var(--c-tinta)) 100%); }
.vx-escena--clara { background: var(--c-bg); }
.vx-escena--clara .vx-card { box-shadow: 0 30px 60px -34px color-mix(in srgb, var(--c-text) 40%, transparent), 0 1px 3px color-mix(in srgb, var(--c-text) 8%, transparent); }
.vx-escena--menta { background:
    radial-gradient(circle at 0% 0%, color-mix(in srgb, var(--c-azul) 50%, transparent) 0%, transparent 45%),
    linear-gradient(150deg, color-mix(in srgb, var(--c-menta) 70%, var(--c-surface)) 0%, var(--c-menta) 50%, color-mix(in srgb, var(--c-menta) 70%, var(--c-tinta)) 100%); }
.vx-escena--rosa { background:
    radial-gradient(circle at 100% 100%, color-mix(in srgb, var(--c-azul) 55%, transparent) 0%, transparent 45%),
    linear-gradient(150deg, color-mix(in srgb, var(--c-rose) 65%, var(--c-surface)) 0%, var(--c-rose) 50%, color-mix(in srgb, var(--c-rose) 70%, var(--c-tinta)) 100%); }
.vx-escena--lienzo { background: none; padding: 0; overflow: visible; border-radius: 0; }
.vx-escena--lienzo .vx-card { box-shadow: 0 30px 60px -34px color-mix(in srgb, var(--c-text) 40%, transparent), 0 1px 3px color-mix(in srgb, var(--c-text) 8%, transparent); }
.vx-escena--alta { padding: 80px 64px; }
.vx-sobre--grande .vx-sobre__t { font-size: 40px; letter-spacing: -.03em; line-height: 1.05; }
.vx-sobre--grande .vx-sobre__s { font-size: 20px; margin-top: 12px; }

/* ── fx-anillos: anillos que laten alrededor de algo (el QR, el orbe, el teléfono) ── */
.fx-anillos { position: relative; display: inline-flex; align-items: center; justify-content: center; }
.fx-anillos::before, .fx-anillos::after { content: ""; position: absolute; inset: -14px; border-radius: 50%; border: 2px solid var(--c-menta); opacity: 0; }
.fx-anillos--cuadro::before, .fx-anillos--cuadro::after { border-radius: 24px; }
.vx-in .fx-anillos::before { animation: fx-anillo 2.4s ease-out infinite; }
.vx-in .fx-anillos::after { animation: fx-anillo 2.4s ease-out 1.2s infinite; }
@keyframes fx-anillo { 0% { transform: scale(.85); opacity: .9; } 100% { transform: scale(1.35); opacity: 0; } }

/* ── fx-orbe: Theresa respirando ── */
.fx-orbe { width: 120px; height: 120px; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 10px color-mix(in srgb, var(--c-rose) 20%, transparent), 0 30px 60px -20px color-mix(in srgb, var(--c-rose) 70%, transparent); }
.fx-orbe img { width: 100%; height: 100%; object-fit: cover; }
.vx-in .fx-orbe { animation: fx-respira 4.5s ease-in-out infinite; }
@keyframes fx-respira { 50% { transform: scale(1.06); box-shadow: 0 0 0 18px color-mix(in srgb, var(--c-rose) 14%, transparent), 0 30px 60px -20px color-mix(in srgb, var(--c-rose) 70%, transparent); } }

/* ── fx-reloj: un reloj de verdad, con sus manecillas moviéndose ── */
.fx-reloj { width: 150px; height: 150px; border-radius: 50%; background: var(--c-surface); position: relative; box-shadow: inset 0 0 0 6px var(--c-surface2), 0 24px 50px -24px color-mix(in srgb, var(--c-text) 50%, transparent); }
.fx-reloj i { position: absolute; left: 50%; bottom: 50%; transform-origin: 50% 100%; border-radius: 3px; background: var(--c-text); }
.fx-reloj .h { width: 5px; height: 38px; margin-left: -2.5px; transform: rotate(270deg); }
.fx-reloj .m { width: 4px; height: 54px; margin-left: -2px; transform: rotate(348deg); }
.fx-reloj .s { width: 2px; height: 60px; margin-left: -1px; background: var(--c-rose); }
.fx-reloj::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: var(--c-text); }
.vx-in .fx-reloj .s { animation: fx-gira 60s linear infinite; }
.vx-in .fx-reloj .m { animation: fx-min 1.6s cubic-bezier(.3,1.4,.5,1) .6s forwards; }
@keyframes fx-gira { to { transform: rotate(360deg); } }
@keyframes fx-min { to { transform: rotate(360deg); } }

/* ── fx-cascada: tarjetas que caen una tras otra y se apilan ── */
.fx-cascada { position: relative; display: flex; flex-direction: column; gap: 10px; }
.js .fx-cascada > * { opacity: 0; transform: translateY(-40px) rotate(-2deg); }
.vx-in .fx-cascada > * { animation: fx-cae .7s cubic-bezier(.2,.9,.3,1.2) forwards; animation-delay: calc(var(--i, 0) * .32s + .2s); }
@keyframes fx-cae { to { opacity: 1; transform: none; } }

/* ── fx-abanico: un PDF que se abre en sus páginas ── */
.fx-abanico { position: relative; height: 260px; }
.fx-abanico .vx-doc__i { position: absolute; left: 50%; top: 40px; width: 110px; height: 140px; margin-left: -55px; border-radius: 10px; background: var(--c-surface); box-shadow: 0 20px 40px -18px color-mix(in srgb, var(--c-text) 60%, transparent); transform-origin: 50% 110%; }
.fx-abanico .vx-doc__i::before { top: 26px; left: 16px; right: 16px; height: 3px; } .fx-abanico .vx-doc__i::after { top: 40px; left: 16px; height: 3px; }
.fx-abanico .vx-doc__i b { position: absolute; left: 0; right: 0; bottom: 14px; text-align: center; font-size: 15px; font-weight: 800; color: var(--c-text); }
.vx-in .fx-abanico .vx-doc__i { animation: fx-abre 1.2s cubic-bezier(.2,.8,.2,1) .4s forwards; }
@keyframes fx-abre { to { transform: rotate(var(--r, 0deg)) translateX(var(--x, 0px)); } }

/* ── fx-pila: pantallas en perspectiva, apiladas en 3D ── */
.fx-pila { perspective: 1400px; display: grid; }
.fx-pila { padding-top: 90px; }
.fx-pila > * { grid-area: 1 / 1; transform: rotateY(-16deg) rotateX(5deg) translateX(calc(var(--i, 0) * 70px)) translateY(calc(var(--i, 0) * -44px)); transform-origin: 0 50%; box-shadow: -30px 40px 80px -30px color-mix(in srgb, var(--c-text) 55%, transparent); opacity: 0; }
.vx-in .fx-pila > * { animation: fx-apila .9s cubic-bezier(.2,.8,.2,1) forwards; animation-delay: calc(var(--i, 0) * .25s + .2s); }
@keyframes fx-apila { from { opacity: 0; transform: rotateY(-16deg) rotateX(5deg) translateX(calc(var(--i, 0) * 70px + 120px)) translateY(calc(var(--i, 0) * -44px)); } to { opacity: 1; } }

/* ── fx-sello: el sello que cae con fuerza ── */
.js .fx-sello { opacity: 0; transform: scale(2.4) rotate(-14deg); }
.vx-in .fx-sello { animation: fx-sella .5s cubic-bezier(.2,1.2,.3,1) forwards; animation-delay: var(--d, 1.2s); }
@keyframes fx-sella { 70% { opacity: 1; transform: scale(.96) rotate(-6deg); } 100% { opacity: 1; transform: scale(1) rotate(-6deg); } }
.vx-sello--grande { font-size: 20px; padding: 12px 22px; border: 3px solid var(--c-menta-tx); background: transparent; color: var(--c-menta-tx); letter-spacing: .04em; text-transform: uppercase; }

/* ── fx-cinta: una cinta sin fin con lo que Theresa va haciendo ── */
.fx-cinta { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.fx-cinta__pista { display: flex; gap: 14px; width: max-content; }
.vx-in .fx-cinta__pista { animation: fx-cinta 38s linear infinite; }
.fx-cinta__pista > * { flex: 0 0 auto; }
@keyframes fx-cinta { to { transform: translateX(-50%); } }
.fx-cinta--lenta .fx-cinta__pista { animation-duration: 60s; }
.fx-ficha { display: inline-flex; align-items: center; gap: 10px; padding: 12px 18px; border-radius: 100px; background: var(--c-surface); color: var(--c-text); font-size: 16px; font-weight: 700; white-space: nowrap; box-shadow: 0 10px 30px -14px color-mix(in srgb, var(--c-text) 40%, transparent); }
.fx-ficha i { width: 9px; height: 9px; border-radius: 50%; background: var(--c-menta); flex-shrink: 0; }
.fx-ficha small { font-weight: 600; color: var(--c-text2); }

/* ── fx-flujo: líneas que se dibujan entre piezas (las integraciones, un proceso) ── */
.fx-flujo { position: relative; }
.fx-flujo svg.fx-lineas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.fx-flujo svg.fx-lineas path { fill: none; stroke: var(--c-azul); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.vx-in .fx-flujo svg.fx-lineas path { animation: vx-traza 1.4s cubic-bezier(.4,0,.2,1) forwards; animation-delay: calc(var(--i, 0) * .3s + .3s); }
.fx-flujo svg.fx-lineas .pulso { fill: var(--c-menta); stroke: none; opacity: 0; }
.vx-in .fx-flujo svg.fx-lineas .pulso { animation: fx-pulso 2.2s linear infinite; animation-delay: 1.9s; }
@keyframes fx-pulso { 0% { opacity: 0; offset-distance: 0%; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { opacity: 0; offset-distance: 100%; } }

/* ── fx-aro: el anillo de progreso que se llena ── */
.fx-aro { position: relative; width: 220px; height: 220px; }
.fx-aro svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.fx-aro circle { fill: none; stroke-width: 16; stroke-linecap: round; }
.fx-aro .fondo { stroke: var(--c-surface2); }
.fx-aro .lleno { stroke: var(--c-azul); stroke-dasharray: 1; stroke-dashoffset: 1; }
.vx-in .fx-aro .lleno { animation: fx-llena 1.8s cubic-bezier(.3,0,.2,1) .4s forwards; }
@keyframes fx-llena { to { stroke-dashoffset: calc(1 - var(--p, .75)); } }
.fx-aro__v { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 44px; font-weight: 800; letter-spacing: -.03em; color: var(--c-text); font-variant-numeric: tabular-nums; line-height: 1; }
.fx-aro__v small { margin-top: 8px; font-size: 13px; font-weight: 700; color: var(--c-text2); letter-spacing: 0; }

/* ── fx-mapa: un mapa estilizado con alfileres que caen ── */
.fx-mapa { position: relative; height: 420px; border-radius: 28px; overflow: hidden; background: color-mix(in srgb, var(--c-azul) 10%, var(--c-surface)); }
.fx-mapa svg.tierra { position: absolute; inset: 0; width: 100%; height: 100%; }
.fx-mapa svg.tierra path { fill: color-mix(in srgb, var(--c-azul) 22%, var(--c-surface)); }
.fx-mapa svg.tierra .via { fill: none; stroke: color-mix(in srgb, var(--c-azul) 40%, var(--c-surface)); stroke-width: 2; stroke-dasharray: 6 8; }
.fx-pin { position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -100%); display: flex; flex-direction: column; align-items: center; opacity: 0; }
.fx-pin i { width: 22px; height: 22px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: var(--c-azul); box-shadow: 0 10px 20px -8px color-mix(in srgb, var(--c-text) 60%, transparent); }
.fx-pin i.menta { background: var(--c-menta); } .fx-pin i.rosa { background: var(--c-rose); }
.fx-pin span { margin-top: 6px; padding: 5px 10px; border-radius: 100px; background: var(--c-surface); font-size: 13px; font-weight: 800; color: var(--c-text); white-space: nowrap; box-shadow: 0 6px 16px -8px color-mix(in srgb, var(--c-text) 50%, transparent); }
.vx-in .fx-pin { animation: fx-pincha .6s cubic-bezier(.2,1.4,.4,1) forwards; animation-delay: calc(var(--i, 0) * .35s + .3s); }
@keyframes fx-pincha { from { opacity: 0; transform: translate(-50%, -160%); } to { opacity: 1; transform: translate(-50%, -100%); } }

/* ── fx-escudo: el candado del anonimato; el texto se desenfoca ── */
.fx-escudo { width: 110px; height: 110px; border-radius: 30px; display: inline-flex; align-items: center; justify-content: center; background: var(--c-text); color: #fff; box-shadow: 0 30px 60px -24px color-mix(in srgb, var(--c-text) 80%, transparent); }
.fx-escudo svg { width: 56px; height: 56px; }
.fx-borroso { filter: blur(5px); user-select: none; }
.vx-in .fx-borroso--luego { animation: fx-borra 1s ease 2.4s forwards; filter: none; }
@keyframes fx-borra { to { filter: blur(5px); } }

/* ── fx-año: los doce meses se encienden uno a uno ── */
.fx-ano { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.fx-ano > div { opacity: 0; transform: translateY(14px); }
.vx-in .fx-ano > div { animation: vx-entra .6s cubic-bezier(.2,.7,.2,1) forwards; animation-delay: calc(var(--i, 0) * .12s + .2s); }
.fx-ano .vx-mes__s { font-size: 10px; } .fx-ano .vx-mes span:not(.vx-mes__s) { font-size: 11px; }

/* ── fx-carril: un proceso por el que avanza una tarjeta (el alta de alguien) ── */
.fx-carril { position: relative; padding: 30px 0 0; }
.fx-carril__via { position: absolute; left: 24px; right: 24px; top: 46px; height: 4px; border-radius: 4px; background: var(--c-surface2); }
.fx-carril__via i { display: block; height: 100%; border-radius: 4px; background: var(--c-azul); transform: scaleX(0); transform-origin: left; }
.vx-in .fx-carril__via i { animation: fx-avanza 3s cubic-bezier(.4,0,.2,1) .4s forwards; }
@keyframes fx-avanza { to { transform: scaleX(1); } }
.fx-carril__paradas { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.fx-carril__parada { padding-top: 40px; position: relative; }
.fx-carril__parada::before { content: ""; position: absolute; left: 24px; top: 8px; width: 24px; height: 24px; border-radius: 50%; background: var(--c-surface); border: 4px solid var(--c-surface2); transition: border-color .3s ease, background .3s ease; transition-delay: calc(var(--i, 0) * .75s + .5s); }
.vx-in .fx-carril__parada::before { border-color: var(--c-azul); background: var(--c-azul); }

@keyframes fx-flota { 50% { transform: translateY(-12px); } }

@keyframes fx-sol { to { left: 94%; } }

/* ── fx-digitos: una cifra que gira como un contador mecánico ── */
.fx-grande { font-size: clamp(72px, 9vw, 150px); font-weight: 800; letter-spacing: -.05em; line-height: .95; color: var(--c-text); font-variant-numeric: tabular-nums; }
.fx-grande small { font-size: .32em; letter-spacing: 0; margin-left: 8px; color: var(--c-text2); font-weight: 700; }
.fx-grande.v-mal { color: var(--c-rose-tx) !important; }
.fx-grande--blanco, .fx-grande--blanco small { color: #fff; }

/* a lo ancho, en una banda de color: el titular dentro */
.sl-banda { margin: 0 0 150px; padding: 96px; border-radius: 48px; color: #fff; position: relative; overflow: hidden;
  background: linear-gradient(140deg, color-mix(in srgb, var(--c-azul) 82%, var(--c-surface)) 0%, var(--c-azul) 46%, color-mix(in srgb, var(--c-azul) 78%, var(--c-text)) 100%); }
.sl-banda--noche { background: linear-gradient(160deg, color-mix(in srgb, var(--c-azul) 30%, var(--c-tinta)) 0%, var(--c-tinta) 70%); }
.sl-banda--menta { background: linear-gradient(150deg, color-mix(in srgb, var(--c-menta) 70%, var(--c-surface)) 0%, var(--c-menta) 50%, color-mix(in srgb, var(--c-menta) 70%, var(--c-tinta)) 100%); }
.sl-banda__in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 80px; align-items: center; }
.sl-banda .sl-f__t, .sl-banda .sl-f__p { color: #fff; }
.sl-banda .sl-f__p { opacity: .9; }
/* tres o cuatro piezas en rejilla, cada una con su frase */
.sl-trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; margin: 0 0 150px; }
.sl-trio--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sl-trio > .sl-mini { padding: 40px; }
/* la pantalla grande en el centro, con el texto encima */
.sl-centro { text-align: center; margin: 0 0 150px; }
.sl-centro .sl-f__t { max-width: 20ch; margin: 0 auto; }
.sl-centro .sl-f__p { max-width: 54ch; margin: 24px auto 48px; }
.sl-centro .vx-panel { text-align: left; }
/* el titular grande con una frase, sin pantalla (una afirmación) */
.sl-dicho { padding: 60px 0 150px; text-align: center; }
.sl-dicho__t { margin: 0 auto; max-width: 18ch; font-size: clamp(56px, 5.4vw, 104px); font-weight: 800; letter-spacing: -.05em; line-height: 1; color: var(--c-text); }
.sl-dicho__t b { color: var(--c-azul); }
.sl-dicho__p { margin: 28px auto 0; max-width: 48ch; font-size: 24px; line-height: 1.45; font-weight: 500; color: var(--c-text); }
/* los pasos, uno debajo de otro, con su pantalla pequeña a la derecha */
.sl-pasos { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; margin: 0 0 150px; }
.sl-paso { display: grid; grid-template-columns: 90px minmax(0, 1fr) minmax(0, 1fr); gap: 36px; align-items: center; padding: 40px 48px; border-radius: 36px; background: var(--c-bg); }
.sl-paso__n { font-size: 64px; font-weight: 800; letter-spacing: -.05em; line-height: 1; color: var(--c-azul); font-variant-numeric: tabular-nums; }
.sl-paso__t { margin: 0; font-size: 30px; font-weight: 800; letter-spacing: -.03em; line-height: 1.12; color: var(--c-text); }
.sl-paso__p { margin: 10px 0 0; font-size: 18px; line-height: 1.5; font-weight: 500; color: var(--c-text); }

@media (max-width: 1023px) {
  .vx-escena--alta { padding: 28px 16px; }
  .vx-sobre--grande .vx-sobre__t { font-size: 28px; }
  .vx-sobre--grande .vx-sobre__s { font-size: 16px; }
  .fx-orbe { width: 84px; height: 84px; }
  .fx-reloj { width: 110px; height: 110px; }
  .fx-reloj .h { height: 28px; } .fx-reloj .m { height: 40px; } .fx-reloj .s { height: 44px; }
  .fx-abanico { height: 200px; }
  .fx-abanico .vx-doc__i { width: 80px; height: 104px; margin-left: -40px; }
  .fx-pila > * { transform: none; opacity: 1; grid-area: auto; box-shadow: 0 20px 40px -24px color-mix(in srgb, var(--c-text) 50%, transparent); }
  .fx-pila { display: flex; flex-direction: column; gap: 12px; perspective: none; padding-top: 0; }
  .vx-in .fx-pila > * { animation: vx-entra .6s ease forwards; }
  .fx-aro { width: 160px; height: 160px; }
  .fx-aro__v { font-size: 32px; }
  .fx-mapa { height: 300px; }
  .fx-ano { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .fx-carril__paradas { grid-template-columns: 1fr; gap: 10px; }
  .fx-carril__via { display: none; }
  .fx-carril__parada { padding-top: 0; padding-left: 36px; }
  .fx-carril__parada::before { left: 0; top: 4px; }

  .fx-grande { font-size: clamp(48px, 16vw, 72px); }
  .fx-ficha { font-size: 14px; padding: 10px 14px; }
  .sl-banda { padding: 36px 22px; border-radius: 28px; margin-bottom: 72px; }
  .sl-banda__in { grid-template-columns: 1fr; gap: 26px; }
  .sl-trio, .sl-trio--2 { grid-template-columns: 1fr; gap: 14px; margin-bottom: 72px; }
  .sl-trio > .sl-mini { padding: 24px 16px 16px; }
  .sl-centro { margin-bottom: 72px; }
  .sl-centro .sl-f__p { margin: 14px auto 24px; }
  .sl-dicho { padding: 20px 0 72px; }
  .sl-dicho__t { font-size: clamp(34px, 9.4vw, 54px); }
  .sl-dicho__p { font-size: 17px; margin-top: 16px; }
  .sl-pasos { gap: 12px; margin-bottom: 72px; }
  .sl-paso { grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 22px 18px; border-radius: 24px; }
  .sl-paso__n { font-size: 40px; }
  .sl-paso__t { font-size: 22px; }
  .sl-paso__p { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .fx-anillos::before, .fx-anillos::after, .fx-orbe, .fx-reloj i, .fx-cinta__pista { animation: none !important; }
  .js .fx-cascada > *, .js .fx-sello, .fx-pila > *, .fx-pin, .fx-ano > div { opacity: 1 !important; transform: none !important; animation: none !important; }
  .fx-aro .lleno { stroke-dashoffset: calc(1 - var(--p, .75)) !important; }
  .fx-carril__via i { transform: none !important; }
}

/* un mes no crece más que un calendario de verdad */
.vx-mes { max-width: 380px; }
@media (max-width: 1023px) {
  /* en el móvil una barra horizontal nunca pierde su barra: la columna de la etiqueta se estrecha aunque la página pida otra */
  .vx-hb { grid-template-columns: minmax(0, 118px) minmax(0, 1fr) auto !important; }
  .vx-fichaje { flex-direction: column; align-items: flex-start !important; gap: 30px !important; }
  .vx-sello { white-space: normal; border-radius: 14px; }
}

/* el aro (`.fx-aro`, las páginas de HR) en el móvil: la cifra en una línea y la letra pequeña sin salirse */
.fx-aro__v { white-space: nowrap; }

@media (max-width: 1023px) {

  .fx-aro { width: 190px; height: 190px; }
  .fx-aro__v { font-size: 28px; }
  .fx-aro__v small { font-size: 10px; margin-top: 6px; }
}

/* ══ ESCENAS DEL 2026-10-17: el dictado de la nota, cobrar desde la agenda y la sala en 3D ══════
   (Rubén: «resume tu sesión por audio», «cobra desde la agenda» y «se acabaron los planos en 2D»). */

@media (max-width: 1023px) {

}


/* ══ LA APP, TAL CUAL (Rubén, 2026-10-30) ═══════════════════════════════════════════
   «En el primer card principal dibuja los iconos de la agenda real de Theresa» y «la ficha de
   cliente real, como se ve en una tablet». `.vx-app` es la ventana de la app: la columna de
   iconos (los trazos de `locals/_rail_icons.html`, incluidos, no copiados), la barra de la
   agenda (`ops_core/_agenda_cabecera.html`: flechas, Hoy, fecha, vistas y «Nueva cita») y
   su rejilla. `.vx-tableta` lleva dentro la ficha (`ops_core/cliente.html`). */
.vx-app { display: grid; grid-template-columns: 62px minmax(0, 1fr); border-radius: 26px; overflow: hidden; background: var(--c-bg);
  box-shadow: 0 40px 80px -36px color-mix(in srgb, var(--c-text) 70%, transparent), 0 2px 8px color-mix(in srgb, var(--c-text) 10%, transparent); }
.vx-app__rail { display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 18px 0; background: var(--c-surface); border-right: 1px solid var(--c-border); }
.vx-app__rail span { width: 38px; height: 38px; border-radius: 12px; display: flex; align-items: center; justify-content: center; color: var(--c-text2); }
.vx-app__rail svg { width: 20px; height: 20px; }
.vx-app__rail span.is-on { background: var(--g-azul); color: #fff; box-shadow: var(--sombra-azul); }
.vx-app__rail .vx-app__yo { margin-top: auto; width: 30px; height: 30px; border-radius: 50%; background: var(--c-azul); color: #fff; font-size: 13px; font-weight: 800; }
.vx-app__main { min-width: 0; padding: 22px 24px 24px; }
.vx-app__barra { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.vx-app__flecha, .vx-app__hoy { height: 32px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--c-border); border-radius: 9px; background: var(--c-surface);
  font-size: 13px; font-weight: 600; color: var(--c-text); }
.vx-app__flecha { width: 32px; font-size: 16px; }
.vx-app__hoy { padding: 0 12px; }
.vx-app__fecha { margin-left: 6px; line-height: 1.25; }
.vx-app__fecha b { display: block; font-size: 15px; font-weight: 700; color: var(--c-text); }
.vx-app__fecha small { display: block; font-size: 12px; font-weight: 500; color: var(--c-text3); }
.vx-app__vistas { margin-left: auto; display: inline-flex; border: 1px solid var(--c-border); border-radius: 9px; overflow: hidden; background: var(--c-surface); }
.vx-app__vistas span { padding: 7px 12px; font-size: 12px; font-weight: 600; color: var(--c-text3); }
.vx-app__vistas span.is-on { background: var(--g-azul); color: #fff; }
.vx-app__nueva { padding: 8px 13px; border-radius: 9px; background: var(--g-azul); color: #fff; font-size: 12px; font-weight: 700; box-shadow: var(--sombra-azul); }
.vx-app__rejilla { margin-top: 16px; padding: 14px 14px 10px 10px; border: 1px solid var(--c-border); border-radius: 14px; background: var(--c-surface); }

/* la tableta, apaisada */
.vx-tableta { position: relative; width: 100%; max-width: 1240px; margin: 0 auto; padding: 18px; border-radius: 44px; background: color-mix(in srgb, var(--c-tinta) 94%, var(--c-azul));
  box-shadow: 0 50px 100px -40px color-mix(in srgb, var(--c-tinta) 80%, transparent), inset 0 0 0 2px rgba(255,255,255,.1); }
.vx-tableta::before { content: ""; position: absolute; top: 50%; left: 6px; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: rgba(255,255,255,.22); }
.vx-tableta__pantalla { display: grid; grid-template-columns: 62px minmax(0, 1fr); border-radius: 28px; overflow: hidden; background: var(--c-bg); }

/* la ficha de cliente de dentro */
.vx-fx { min-width: 0; padding: 26px 30px 0; }
.vx-fx__cab { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; }
.vx-fx__cab small { display: block; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--c-text2); }
.vx-fx__cab b { display: block; margin-top: 4px; font-size: 26px; font-weight: 800; letter-spacing: -.02em; color: var(--c-text); }
.vx-fx__preg { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 16px; border-radius: 100px; background: var(--c-surface); border: 1px solid var(--c-border); font-size: 13px; font-weight: 500; color: var(--c-text3); white-space: nowrap; }
.vx-fx__preg svg { width: 15px; height: 15px; }
.vx-fx__hoja { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 30px; margin-top: 18px; padding: 28px 28px 34px; border-radius: 28px 28px 0 0; background: var(--c-surface); }
.vx-fx__izq { display: flex; flex-direction: column; gap: 14px; padding-right: 28px; border-right: 1px solid var(--c-border); min-width: 0; }
.vx-fx__ava { width: 84px; height: 84px; margin: 0 auto; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--g-azul); color: #fff; font-size: 28px; font-weight: 800; box-shadow: var(--sombra-azul); }
.vx-fx__mail { margin: -6px 0 0; text-align: center; font-size: 13px; font-weight: 500; color: var(--c-text2); }
.vx-fx__botones { display: flex; gap: 8px; }
.vx-fx__mas { flex-shrink: 0; width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--c-surface2); color: var(--c-text); }
.vx-fx__mas svg, .vx-fx__reservar svg { width: 17px; height: 17px; }
.vx-fx__reservar { flex: 1; min-width: 0; height: 40px; display: flex; align-items: center; justify-content: center; gap: 8px; border-radius: 100px; background: var(--g-azul); color: #fff; font-size: 14px; font-weight: 700; box-shadow: var(--sombra-azul); }
.vx-fx__lista { padding: 2px 12px; border: 1px solid var(--c-border); border-radius: 16px; }
.vx-fx__f, .vx-fx__m { display: flex; align-items: center; gap: 12px; border-top: 1px solid var(--c-border); color: var(--c-text); }
.vx-fx__f:first-child, .vx-fx__m:first-child { border-top: 0; }
.vx-fx__f { padding: 9px 0; font-size: 13px; font-weight: 700; line-height: 1.3; }
.vx-fx__f small { display: block; font-size: 11px; font-weight: 600; color: var(--c-text3); }
.vx-fx__tile, .vx-fx__ico { flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.vx-fx__tile { width: 32px; height: 32px; border-radius: 10px; background: var(--c-surface2); color: var(--c-text); }
.vx-fx__tile svg { width: 17px; height: 17px; }
.vx-fx__tile--menta { background: var(--g-menta); color: #fff; box-shadow: var(--sombra-menta); }
.vx-fx__m { padding: 7px 0; font-size: 15px; font-weight: 800; }
.vx-fx__ico { width: 34px; height: 34px; border-radius: 11px; background: var(--g-azul); color: #fff; box-shadow: var(--sombra-azul); }
.vx-fx__ico svg { width: 18px; height: 18px; }
.vx-fx__ico--menta { background: var(--g-menta); box-shadow: var(--sombra-menta); }
.vx-fx__ico--rosa { background: var(--g-rose); box-shadow: var(--sombra-rose); }
.vx-fx__n { margin-left: auto; min-width: 24px; padding: 2px 8px; border-radius: 100px; background: var(--c-surface2); font-size: 12px; font-weight: 800; text-align: center; color: var(--c-text2); }
.vx-fx__chev { margin-left: auto; color: var(--c-text3); font-weight: 600; }
.vx-fx__n + .vx-fx__chev { margin-left: 0; }
.vx-fx__der { min-width: 0; }
.vx-fx__h { margin: 0; font-size: 24px; font-weight: 800; letter-spacing: -.02em; color: var(--c-text); }
.vx-fx__kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 18px; }
.vx-fx__kpi { padding: 15px 14px; border: 1px solid var(--c-border); border-radius: 16px; min-width: 0; }
.vx-fx__kpi b { display: block; font-size: 22px; font-weight: 800; letter-spacing: -.02em; color: var(--c-text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.vx-fx__kpi span { display: block; margin-top: 4px; font-size: 12px; font-weight: 500; color: var(--c-text2); }
.vx-fx__t { margin: 24px 0 10px; font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--c-text2); }
.vx-fx__caja { padding: 2px 16px; border: 1px solid var(--c-border); border-radius: 16px; }
.vx-fx__caja .vx-fila { padding: 12px 0; font-size: 14px; }
.vx-fx__caja .vx-fila__s { font-size: 12px; }
.vx-fx__caja .vx-ico { width: 34px; height: 34px; border-radius: 11px; }
.vx-fx__caja .vx-ico svg { width: 17px; height: 17px; }

/* ══ UNA PÁGINA POR CAPÍTULOS (Rubén, 2026-10-30: «bien ordenado, con aire, explicando bien cada
   cosa; no puede ser tan plana») ═══════════════════════════════════════════════════════ */
.sl-cap { padding: 120px 0 110px; border-top: 1px solid var(--c-border); }
.sl-funciones > .sl-cap:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.sl-cap__n { display: flex; align-items: center; gap: 14px; margin: 0; font-size: 16px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--c-azul); }
.sl-cap__n i { width: 42px; height: 42px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-style: normal; letter-spacing: 0; background: var(--c-azul-soft); color: var(--c-azul-tx); }
.sl-cap__t { margin: 26px 0 0; max-width: 20ch; font-size: clamp(56px, 4.8vw, 92px); font-weight: 800; letter-spacing: -.045em; line-height: 1.02; color: var(--c-text); text-wrap: balance; }
.sl-cap__p { margin: 30px 0 0; max-width: 46ch; font-size: 26px; line-height: 1.5; font-weight: 500; color: var(--c-text2); }

/* las razones: un icono, lo que hace y cómo se nota, con sitio */
.sl-razones { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; padding-bottom: 170px; }
.sl-razon { display: flex; flex-direction: column; padding: 52px 50px; border-radius: 40px; background: var(--c-bg); }
.sl-razon__ico { width: 62px; height: 62px; border-radius: 19px; display: flex; align-items: center; justify-content: center; background: var(--g-azul); color: #fff; box-shadow: var(--sombra-azul); }
.sl-razon__ico svg { width: 30px; height: 30px; }
.sl-razon__ico--menta { background: var(--g-menta); box-shadow: var(--sombra-menta); }
.sl-razon__ico--rosa { background: var(--g-rose); box-shadow: var(--sombra-rose); }
.sl-razon__t { margin: 34px 0 0; font-size: 34px; font-weight: 800; letter-spacing: -.03em; line-height: 1.12; color: var(--c-text); }
.sl-razon__p { margin: 16px 0 0; font-size: 21px; line-height: 1.5; font-weight: 500; color: var(--c-text2); }
.sl-razon__ej { margin: 26px 0 0; padding-top: 22px; border-top: 1px solid var(--c-border); font-size: 18px; line-height: 1.45; font-weight: 600; color: var(--c-text); }

/* el catálogo de la app: las pastillas y las filas */
.vx-pills { display: flex; gap: 8px; flex-wrap: wrap; }
.vx-pill { padding: 8px 15px; border-radius: 100px; border: 1px solid var(--c-border); background: var(--c-surface); font-size: 14px; font-weight: 700; color: var(--c-text2); }
.vx-pill.is-on { background: var(--g-azul); border-color: transparent; color: #fff; box-shadow: var(--sombra-azul); }
.vx-cat__g { margin: 22px 0 8px; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--c-text2); }
.vx-cat__f { display: flex; align-items: center; gap: 12px; padding: 13px 16px; margin-top: 8px; border-radius: 16px; background: var(--c-surface); border: 1px solid var(--c-border); }
.vx-cat__n { flex: 1; min-width: 0; font-size: 16px; font-weight: 800; color: var(--c-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vx-cat__tag { flex-shrink: 0; padding: 3px 10px; border-radius: 100px; background: var(--c-azul-soft); color: var(--c-azul-tx); font-size: 12px; font-weight: 700; white-space: nowrap; }
.vx-cat__tag--menta { background: var(--c-menta-soft); color: var(--c-menta-tx); }
.vx-cat__p { flex-shrink: 0; min-width: 62px; text-align: right; font-size: 16px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--c-text); }

/* la tarjeta de un bono, con sus sellos */
.vx-bono { padding: 24px 26px; border-radius: 24px; color: #fff; background: var(--g-azul); box-shadow: var(--sombra-azul); }
.vx-bono__t { margin: 0; font-size: 19px; font-weight: 800; letter-spacing: -.01em; }
.vx-bono__s { margin: 4px 0 0; font-size: 14px; font-weight: 500; opacity: .86; }
.vx-bono__sellos { display: flex; gap: 8px; margin-top: 18px; }
.vx-bono__sellos i { width: 30px; height: 30px; border-radius: 50%; border: 2px solid rgba(255,255,255,.45); }
.vx-bono__sellos i.is-on { background: #fff; border-color: #fff; }
.vx-bono__pie { display: flex; justify-content: space-between; gap: 12px; margin-top: 16px; font-size: 13px; font-weight: 700; opacity: .92; }

@media (max-width: 1023px) {
  .vx-app { grid-template-columns: minmax(0, 1fr); border-radius: 20px; }
  .vx-app__rail { display: none; }
  .vx-app__main { padding: 14px 12px; }
  .vx-app__rejilla { padding: 10px 8px 8px 4px; }
  .vx-app__vistas { margin-left: 0; }

  .vx-tableta { padding: 9px; border-radius: 26px; }
  .vx-tableta::before { display: none; }
  .vx-tableta__pantalla { grid-template-columns: minmax(0, 1fr); border-radius: 18px; }
  .vx-fx { padding: 16px 12px 0; }
  .vx-fx__cab b { font-size: 21px; }
  .vx-fx__preg { display: none; }
  .vx-fx__hoja { grid-template-columns: minmax(0, 1fr); gap: 22px; padding: 20px 14px 22px; border-radius: 20px 20px 0 0; }
  .vx-fx__izq { padding-right: 0; border-right: 0; }
  .vx-fx__kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vx-fx__kpi b { font-size: 19px; }

  .sl-rejilla__g { grid-template-columns: minmax(0, 1fr); }
  .sl-mini { min-width: 0; }
  .vx-fx__caja .vx-fila { flex-wrap: wrap; row-gap: 6px; }
  .vx-fx__caja .vx-fila__m { flex: 1 1 calc(100% - 60px); }
  .vx-fx__caja .vx-fila > .vx-chip, .vx-fx__caja .vx-fila > .vx-fila__v { margin-left: 46px; }
  .sl-cap { padding: 76px 0 56px; }
  .sl-cap__n { font-size: 13px; gap: 10px; }
  .sl-cap__n i { width: 34px; height: 34px; }
  .sl-cap__t { margin-top: 16px; font-size: clamp(34px, 9.4vw, 52px); letter-spacing: -.04em; }
  .sl-cap__p { margin-top: 16px; font-size: 18px; }
  .sl-razones { grid-template-columns: minmax(0, 1fr); gap: 14px; padding-bottom: 84px; }
  .sl-razon { padding: 28px 24px; border-radius: 28px; }
  .sl-razon__ico { width: 50px; height: 50px; border-radius: 15px; }
  .sl-razon__ico svg { width: 25px; height: 25px; }
  .sl-razon__t { margin-top: 20px; font-size: 25px; }
  .sl-razon__p { margin-top: 10px; font-size: 17px; }
  .sl-razon__ej { margin-top: 16px; padding-top: 14px; font-size: 15px; }
  .vx-cat__f { flex-wrap: wrap; padding: 11px 13px; }
  .vx-cat__n { flex-basis: 100%; white-space: normal; font-size: 15px; }
  .vx-cat__p { margin-left: auto; font-size: 15px; }
}

@media (max-width: 1023px) {
  .vx-fx__caja .vx-fila > .vx-fx__chev { display: none; }
}
/* en el iPad, la tableta conserva sus iconos y sus dos columnas */
@media (min-width: 700px) and (max-width: 1023px) {
  .vx-tableta__pantalla { grid-template-columns: 54px minmax(0, 1fr); }
  .vx-tableta__pantalla .vx-app__rail { display: flex; }
  .vx-tableta__pantalla .vx-app__rail span { width: 34px; height: 34px; }
  .vx-fx__hoja { grid-template-columns: 250px minmax(0, 1fr); gap: 20px; }
  .vx-fx__izq { padding-right: 20px; border-right: 1px solid var(--c-border); }
}