/* Los efectos de todo el sitio, en una sola hoja (2026-11-06). Va con
   `fx.js` (qué marca cada gancho está escrito allí y en la guía de estilos,
   «Ganchos de interactividad»), `mkthover.js` (la lectura de los gráficos) y
   `tip.js` (el globo). `base.html` la carga en todas las páginas.

   Junta las cuatro que nacieron a la vez el 2026-11-05 («quiero mucho efecto
   visual, no una página y unas cajas estáticas»): la de /markets, la ficha y
   /narratives (`fx.css`), la de las páginas de sección (`sx.css`), la de
   Presales (`presales-fx.css`) y el movimiento común de las piezas del
   terminal (`t46`, de `pieces/t5.css`). Los nombres de clase de cada una se
   conservan (`fx-*`, `sx-*`, `t46-*`); lo que chocaba se renombró:
   `@keyframes fx-pulse` de Presales es `fx-beat` y su `fx-glow`, `fx-shine`.

   Sólo tokens de color de los dos temas, y sólo `transform`, `opacity`,
   `filter`, sombras y `clip-path` en lo que se mueve: nada que recoloque la
   página. Con `prefers-reduced-motion: reduce` no se mueve nada. */

/* ======================================================================
   1. /markets, la ficha de moneda y /narratives (antes `fx.css`)
   ====================================================================== */
/* --- Entrada al verse (fx.js: `.fx-pre` antes, `.fx-in` al verse) ------- */
.fx-pre .fx-reveal { clip-path: inset(0 100% 0 0); }
.fx-in .fx-reveal { clip-path: inset(0 0 0 0); transition: clip-path 1.1s cubic-bezier(.3, .7, .2, 1); }

svg rect.fx-bar { transform-box: fill-box; transform-origin: 50% 100%; }
svg rect.fx-bar.fx-dn { transform-origin: 50% 0; }
.fx-pre rect.fx-bar { transform: scaleY(0); }
.fx-in rect.fx-bar { transform: none; transition: transform .6s cubic-bezier(.2, .8, .2, 1) var(--fx-d, 0ms); }

.fx-bx { transform-origin: 0 50%; }
.fx-bx.fx-rt { transform-origin: 100% 50%; }
.fx-pre .fx-bx { transform: scaleX(0); }
.fx-in .fx-bx { transform: none; transition: transform .8s cubic-bezier(.2, .8, .2, 1) var(--fx-d, 0ms); }
.fx-by { transform-origin: 50% 100%; }
.fx-pre .fx-by { transform: scaleY(0); }
.fx-in .fx-by { transform: none; transition: transform .6s cubic-bezier(.2, .8, .2, 1) var(--fx-d, 0ms); }

.fx-pre .fx-pop { opacity: 0; transform: scale(.7); }
.fx-in .fx-pop { opacity: 1; transform: none;
  transition: opacity .35s ease-out var(--fx-d, 0ms), transform .45s cubic-bezier(.2, .9, .3, 1.3) var(--fx-d, 0ms); }
/* Acabada la entrada, el resalte al pasar no espera a la cascada. */
.fx-done .fx-pop, .fx-done .fx-bx, .fx-done .fx-by, .fx-done rect.fx-bar { transition-delay: 0ms; }

/* Las filas de una lista entran en cascada, y otra vez al cambiar de pestaña
   (el panel pasa de oculto a visible y la animación vuelve a empezar). */
@keyframes fx-rise { from { opacity: 0; transform: translateY(6px); } }
.mo-pane.on .ms-mrow, .mo-pane.on .mo-trow, .mo-pane.on .mo-kv, .mo-pane.on .mo-ls,
.fx-in .dv-rows > .dv-row, .fx-in .ao-div > .ao-drow, .fx-in .nl-chips > .nl-chip,
.fx-in .oc-legend > li, .fx-in .mo-legend > li {
  animation: fx-rise .4s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--fx-i, 0) * 35ms); }
.mo-pane.on.nl-hero-p { animation: fx-rise .45s cubic-bezier(.2, .8, .2, 1) both; }

/* La cifra que acaba de contar deja un halo que se apaga. */
@keyframes fx-halo { 0% { text-shadow: 0 0 0 transparent; }
  35% { text-shadow: 0 0 18px color-mix(in srgb, currentColor 55%, transparent); }
  100% { text-shadow: 0 0 0 transparent; } }
.fx-glow { animation: fx-halo 1.4s ease-out; }

/* --- Las cajas responden al ratón ---------------------------------------- */
[data-fx]:not([data-fx="css"]) .card, .card[data-fx]:not([data-fx="css"]) { transition: border-color .2s ease, box-shadow .25s ease, transform .25s ease; }
[data-fx]:not([data-fx="css"]) .card:hover, .card[data-fx]:not([data-fx="css"]):hover { border-color: var(--line-strong);
  box-shadow: 0 10px 28px -16px color-mix(in srgb, var(--accent) 45%, transparent); }
[data-fx]:not([data-fx="css"]) .card:hover [data-fx-n] { text-shadow: 0 0 16px color-mix(in srgb, currentColor 30%, transparent); }

/* Filas de listas: se iluminan y se desplazan un poco hacia dentro. */
.ms-mrow, .mo-trow, .dv-row, .ao-drow, .nl-chip, .nl-story, .nr-mv, .nr-tone, .nr-ta,
.oc-legend > li, .mo-legend > li, .ms-domkey > span, .nl-legend > span {
  transition: background-color .15s ease, opacity .15s ease, transform .15s ease; }
.ms-mrow:hover, .mo-trow:hover, .ao-drow:hover, .nl-story:hover {
  background: var(--surface-hover); border-radius: 4px; }
.ms-mrow:hover, .mo-trow:hover, .dv-row:hover, .ao-drow:hover, .nl-story:hover { transform: translateX(2px); }
.ms-mrow:hover b, .mo-trow:hover b, .dv-row:hover b { color: var(--accent); }
/* Una lista con el ratón dentro: lo que no se señala, atenuado. */
.ms-mcol:has(> .ms-mrow:hover) > .ms-mrow:not(:hover),
.mo-pane:has(> .mo-trow:hover) > .mo-trow:not(:hover),
.dv-rows:has(> .dv-row:hover) > .dv-row:not(:hover),
.ao-div:has(> .ao-drow:hover) > .ao-drow:not(:hover),
.nl-chips:has(> .nl-chip:hover) > .nl-chip:not(:hover) { opacity: .5; }
.ao-drow { border-radius: 4px; }

/* Las cifras sueltas en píldora (rendimiento de la ficha, histórico del
   miedo y la avaricia) crecen un poco al señalarlas. */
.ao-pill, .ms-hist > span, .mo-pill { transition: transform .15s ease, filter .15s ease; }
.ao-pill:hover, .ms-hist > span:hover { transform: translateY(-2px) scale(1.04); filter: brightness(1.15); }
.ao-pills:has(> .ao-pill:hover) > .ao-pill:not(:hover) { opacity: .55; }

/* Las casillas de los mapas: la señalada crece y las demás se apagan. */
.ms-heat > a, .nl-map > a { transition: opacity .15s ease, transform .18s ease, box-shadow .18s ease; }
.nl-map:has(> a:hover) > a:not(:hover):not(.pin) { opacity: .55; }
.nl-map > a:hover { transform: scale(1.03); z-index: 1;
  box-shadow: 0 6px 18px -8px color-mix(in srgb, var(--c, var(--accent)) 70%, transparent); }

/* Tablas con `data-fx-rows`: la fila señalada lleva una raya de acento y
   toda ella lleva a su ficha. */
[data-fx-rows] tbody tr { cursor: pointer; transition: box-shadow .15s ease; }
[data-fx-rows] tbody tr:hover { box-shadow: inset 3px 0 0 var(--accent); }
[data-fx-rows] tbody tr:hover .spark path[fill="none"] { stroke-width: 2.2; }

/* --- La lectura de los gráficos (mkthover.js) ---------------------------- */
.mc-on { outline: none; }
.mc-on:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 3px; }
.mc-on > .mc-dot { transition: opacity .12s ease, box-shadow .2s ease; }
.mc-on > .mc-dot.on { box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 35%, transparent); }
.mc-on > .mc-guide { transition: opacity .12s ease; }
.mc-tip { transition: opacity .12s ease; }

/* Barras de SVG: la de la lectura se ilumina y se ensancha; las demás se
   atenúan. */
.mc-on svg rect { transform-box: fill-box; transform-origin: 50% 100%;
  transition: opacity .15s ease, filter .15s ease, transform .15s ease; }
.mc-act:has(rect.mc-hi) svg rect:not(.mc-hi) { opacity: .28; }
.mc-on svg rect.mc-hi { filter: brightness(1.25) saturate(1.2); transform: scaleX(1.35); }

/* Barras y tramos hechos con elementos (`<i>`). */
.mc-on > i { transition: opacity .15s ease, filter .15s ease; }
.mc-act:has(> i.mc-hi) > i:not(.mc-hi) { opacity: .3; }
.mc-on > i.mc-hi { filter: brightness(1.25) saturate(1.2); }
.ao-news.mc-on > i.mc-hi, .nr-daily.mc-on > i.mc-hi { opacity: 1; }

/* Leyenda enlazada (`data-mc-key`). */
[data-mc-key] { cursor: default; transition: opacity .15s ease; }
.mc-act > [data-mc-key]:not(.mc-hi) { opacity: .4; }
[data-mc-key].mc-hi { font-weight: 700; }

/* Casillas: la marcada crece por encima de las demás. */
.ms-heat.mc-act > a:not(.mc-cell) { opacity: .45; }
.ms-heat > a.mc-cell { transform: scale(1.15); z-index: 1; position: relative;
  box-shadow: 0 0 0 1px var(--text), 0 6px 16px -6px rgb(0 0 0 / 55%); }

/* En una celda de tabla la etiqueta va en una línea y crece hacia la
   izquierda (`mkthover.js`); la barra del día, de 4 px, se señala con una
   zona más alta que no se ve. */
td.mc-box .mc-tip { max-width: none; white-space: nowrap; }
.mkt-spark, .nr-spark { display: inline-block; vertical-align: middle; }
.range.mc-on::before { content: ""; position: absolute; left: 0; right: 0; top: -8px; bottom: -8px; }
.ao-rtrack.mc-on::before, .mo-scale-bar.mc-on::before, .yo-track.mc-on::before {
  content: ""; position: absolute; left: 0; right: 0; top: -8px; bottom: -8px; }
.mo-kv { transition: background-color .15s ease; border-radius: 4px; }
.mo-kv:hover { background: var(--surface-hover); }

/* Líneas: con la lectura puesta, el relleno se aviva. */
.mc-on svg path { transition: opacity .2s ease; }
.mc-act svg path[fill^="url"] { opacity: .75; }

/* El último punto de una serie que llega hasta ahora: un punto con un anillo
   que se abre y se apaga. */
@keyframes fx-pulse { 0% { transform: scale(1); opacity: .7; } 100% { transform: scale(3.2); opacity: 0; } }
.mc-live { position: absolute; width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; border-radius: 50%;
  background: var(--accent); pointer-events: none; }
.mc-live::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--accent);
  animation: fx-pulse 1.8s ease-out infinite; }
.fx-pre .mc-live { opacity: 0; }
.fx-in .mc-live { opacity: 1; transition: opacity .3s ease 1s; }

/* El gráfico grande de precio (chartcard.js): el último punto late igual. */
svg.chart.big:focus { outline: none; }
svg.chart.big:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 4px; }
svg.chart.big .xh-live { transform-box: fill-box; transform-origin: center; animation: fx-pulse 1.8s ease-out infinite; }

/* --- Sin movimiento si se pide ------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .fx-pre .fx-reveal, .fx-pre rect.fx-bar, .fx-pre .fx-bx, .fx-pre .fx-by, .fx-pre .fx-pop, .fx-pre .mc-live {
    clip-path: none; transform: none; opacity: 1; }
  .fx-in .fx-reveal, .fx-in rect.fx-bar, .fx-in .fx-bx, .fx-in .fx-by, .fx-in .fx-pop { transition: none; }
  .mo-pane.on .ms-mrow, .mo-pane.on .mo-trow, .mo-pane.on .mo-kv, .mo-pane.on .mo-ls, .mo-pane.on.nl-hero-p,
  .fx-in .dv-rows > .dv-row, .fx-in .ao-div > .ao-drow, .fx-in .nl-chips > .nl-chip,
  .fx-in .oc-legend > li, .fx-in .mo-legend > li, .fx-glow { animation: none; }
  .mc-live::after, svg.chart.big .xh-live { animation: none; }
  [data-fx] .card, .ms-mrow, .mo-trow, .dv-row, .ao-drow, .nl-chip, .ms-heat > a, .nl-map > a,
  .mc-on svg rect, .ao-pill { transition: none; }
  .ms-mrow:hover, .mo-trow:hover, .dv-row:hover, .ao-drow:hover, .nl-story:hover,
  .ao-pill:hover, .ms-hist > span:hover, .nl-map > a:hover, .ms-heat > a.mc-cell, .mc-on svg rect.mc-hi { transform: none; }
}

/* ======================================================================
   2. Las páginas de sección (antes `sx.css`): leer una pieza (`data-sx`),
      entrada (`data-sx-in`)
   ====================================================================== */
/* --- Leer una pieza: se ilumina, las demás se apagan -------------------- */
[data-sx] [data-sx-l], [data-sx] [data-sx-key] { transition: opacity .18s ease, filter .18s ease, transform .18s ease; }
[data-sx] [data-sx-l] { cursor: default; touch-action: manipulation; }
[data-sx].sx-act [data-sx-l]:not(.sx-hot) { opacity: .36; }
[data-sx].sx-act [data-sx-key]:not(.sx-hot) { opacity: .5; }
[data-sx] .sx-hot { filter: brightness(1.15); }
[data-sx] [data-sx-l]:focus { outline: none; }
[data-sx] [data-sx-l]:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 3px; }
/* La barra de la pieza leída: más gruesa y con halo. */
.sx-bar { transition: transform .18s ease, filter .18s ease; }
.sx-hot .sx-bar, .sx-bar.sx-hot { filter: brightness(1.2) drop-shadow(0 0 5px color-mix(in srgb, var(--accent) 55%, transparent)); }
.sx-hot > .sx-track, .sx-track.sx-hot { transform: scaleY(1.5); }
/* Columnas: la leída se ensancha un poco desde su base. */
.sx-col.sx-hot .sx-bar { transform: scaleX(1.12); }
/* Un tramo de un anillo: más grueso. */
circle.sx-hot { stroke-width: 18; }
.arc.sx-hot, .sx-ringbox.sx-hot { transform: scale(1.06); }
/* Filas de lista que son una pieza (rankings, leyendas). */
.sx-row { border-radius: var(--radius-sm); }
.sx-row.sx-hot { background: var(--surface-hover); }


/* --- Cajas que responden al ratón -------------------------------------- */
.sx-lift { transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease; }
.sx-lift:hover { border-color: var(--line-strong); box-shadow: var(--shadow); }

@media (prefers-reduced-motion: no-preference) {
  .sx-lift:hover { transform: translateY(-2px); }

  /* --- Entrada --------------------------------------------------------- */
  [data-sx-in] .sx-gx { transform-origin: left center; animation: sx-gx .85s cubic-bezier(.2, .8, .2, 1) backwards;
    animation-delay: calc(var(--sx-i, 0) * 45ms); }
  [data-sx-in] .sx-gy { transform-origin: center bottom; animation: sx-gy .85s cubic-bezier(.2, .8, .2, 1) backwards;
    animation-delay: calc(var(--sx-i, 0) * 60ms); }
  [data-sx-in] .sx-fade { animation: sx-fade .55s ease-out backwards; animation-delay: calc(var(--sx-i, 0) * 40ms); }
  [data-sx-in] .sx-wipe { animation: sx-wipe 1.2s cubic-bezier(.3, .7, .2, 1) backwards; }
  [data-sx-in] .sx-spin { animation: sx-spin 1s cubic-bezier(.2, .8, .2, 1) backwards; }
  [data-sx-in] .sx-ring { animation: sx-ring 1.2s cubic-bezier(.2, .8, .2, 1) backwards; }
  [data-sx-in] .pf-sc .arc { animation: sx-spin 1s cubic-bezier(.2, .8, .2, 1) backwards;
    animation-delay: calc(var(--sx-i, 0) * 70ms); }
  .sx-wait .pf-sc .arc { animation: none; }
  [data-sx-in] .sx-pop { animation: sx-pop .7s cubic-bezier(.2, .9, .3, 1.3) backwards; }
  [data-sx-in] .sx-glow { animation: sx-glow 2.2s ease-out .3s 1 backwards; }
  .sx-wait .sx-gx, .sx-wait .sx-gy, .sx-wait .sx-fade, .sx-wait .sx-wipe,
  .sx-wait .sx-spin, .sx-wait .sx-ring, .sx-wait .sx-glow, .sx-wait .sx-pop { animation: none; }

  /* Lo que está en vivo late. */
  .sx-pulse { position: relative; }
  .sx-pulse::after { content: ""; position: absolute; inset: -3px; border-radius: inherit; pointer-events: none;
    border: 2px solid var(--accent); opacity: 0; animation: sx-pulse 2.2s ease-out infinite; }
}

@keyframes sx-gx { from { transform: scaleX(0); } }
@keyframes sx-gy { from { transform: scaleY(0); } }
@keyframes sx-fade { from { opacity: 0; transform: translateY(6px); } }
@keyframes sx-wipe { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes sx-spin { from { opacity: 0; transform: rotate(-120deg) scale(.82); } }
@keyframes sx-ring { from { stroke-dasharray: 0 100; } }
@keyframes sx-pop { from { opacity: 0; transform: scale(.6); } }
@keyframes sx-glow { 0% { text-shadow: none; }
  35% { text-shadow: 0 0 14px color-mix(in srgb, currentColor 60%, transparent); } 100% { text-shadow: none; } }
@keyframes sx-pulse { 0% { opacity: .7; transform: scale(.92); } 100% { opacity: 0; transform: scale(1.35); } }

/* ======================================================================
   3. Presales (antes `presales-fx.css`): entrada (`data-fx="css"` →
      `.fx-go`), columnas (`data-fx-cols`), leyenda enlazada, vida
   ====================================================================== */
/* --- Entrada ------------------------------------------------------------- */
@keyframes fx-x { from { transform: scaleX(0); } }
@keyframes fx-y { from { transform: scaleY(0); } }
@keyframes fx-wipe { from { clip-path: inset(0 100% 0 0); } }
@keyframes fx-draw { from { stroke-dashoffset: 1; } }
@keyframes fx-ring { from { stroke-dasharray: 0 176; } }
@keyframes fx-pop { from { opacity: 0; transform: scale(.4); } }
@keyframes fx-safe { to { transform: none; clip-path: none; opacity: 1; stroke-dashoffset: 0; } }

/* Lo que crece en horizontal desde su izquierda. */
.psh-track i, .ps-mini i, .ps-bar i, .ps-xbar i, .ps-limit i, .ps-split i,
.psh-div i.up, .fx-bar-x { transform-origin: left center; }
/* La barra roja desde el precio de la venta crece hacia la izquierda. */
.psh-div i.dn { transform-origin: right center; }
.psh-hist i, .ps2-bars i, .ps-step rect { transform-origin: bottom center; transform-box: fill-box; }

@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
  [data-fx]:not(.fx-go) :is(.psh-track i, .ps-mini i, .ps-bar i, .ps-xbar i, .ps-limit i,
    .psh-div i, .fx-bar-x) { transform: scaleX(0); animation: fx-safe 0s 3s forwards; }
  [data-fx]:not(.fx-go) :is(.psh-hist i, .ps2-bars i, .ps-step rect) { transform: scaleY(0);
    animation: fx-safe 0s 3s forwards; }
  [data-fx]:not(.fx-go) :is(.ps2-kbar, .ps2-split, .ps-split) { clip-path: inset(0 100% 0 0);
    animation: fx-safe 0s 3s forwards; }
  [data-fx]:not(.fx-go) .fx-line { stroke-dashoffset: 1; animation: fx-safe 0s 3s forwards; }

  .fx-go :is(.psh-track i, .ps-mini i, .ps-bar i, .ps-xbar i, .ps-limit i, .psh-div i, .fx-bar-x) {
    animation: fx-x .75s cubic-bezier(.2, .8, .2, 1) backwards;
    animation-delay: calc(var(--i, 0) * 45ms + 60ms);
  }
  .fx-go :is(.psh-hist > span, .ps2-bars > span):nth-child(2) i { --i: 1; }
  .fx-go :is(.psh-hist > span, .ps2-bars > span):nth-child(3) i { --i: 2; }
  .fx-go :is(.psh-hist > span, .ps2-bars > span):nth-child(4) i { --i: 3; }
  .fx-go :is(.psh-hist > span, .ps2-bars > span):nth-child(5) i { --i: 4; }
  .fx-go :is(.psh-hist > span, .ps2-bars > span):nth-child(6) i { --i: 5; }
  .fx-go :is(.psh-hist > span, .ps2-bars > span):nth-child(7) i { --i: 6; }
  .fx-go :is(.psh-hist > span, .ps2-bars > span):nth-child(n+8) i { --i: 7; }
  .fx-go :is(.psh-hist i, .ps2-bars i, .ps-step rect) {
    animation: fx-y .7s cubic-bezier(.2, .8, .2, 1) backwards;
    animation-delay: calc(var(--i, 0) * 50ms + 60ms);
  }
  .fx-go :is(.ps2-kbar, .ps2-split, .ps-split) { animation: fx-wipe .8s cubic-bezier(.2, .8, .2, 1) backwards .1s; }
  .fx-go .fx-line { animation: fx-draw 1.1s cubic-bezier(.3, .6, .2, 1) backwards .1s; }
  .fx-go .fx-area { animation: fx-rise .9s ease-out backwards .5s; }
  .fx-go .ps-ring circle + circle { animation: fx-ring .9s cubic-bezier(.2, .8, .2, 1) backwards .15s; }
  .fx-go .psh-rows > :is(a, div) { animation: fx-rise .45s ease-out backwards; animation-delay: calc(var(--i, 0) * 35ms); }
  .fx-go .psh-rows > :nth-child(2) { --i: 1; } .fx-go .psh-rows > :nth-child(3) { --i: 2; }
  .fx-go .psh-rows > :nth-child(4) { --i: 3; } .fx-go .psh-rows > :nth-child(5) { --i: 4; }
  .fx-go .psh-rows > :nth-child(n+6) { --i: 5; }
  .fx-go .fx-pt { animation: fx-pop .5s cubic-bezier(.2, .9, .3, 1.3) backwards; animation-delay: calc(var(--i, 0) * 6ms + 150ms); }
  .fx-go .ps-check li .ps-check-mark { animation: fx-pop .4s ease-out backwards; animation-delay: calc(var(--i, 0) * 40ms); }
}

.fx-line { stroke-dasharray: 1 1; }

/* --- Foco: lo que está bajo el puntero se enciende, lo demás se apaga ---- */
.psh-hist > span, .ps2-bars > span, .ps2-kbar i, .ps2-split i, .ps-split i {
  transition: opacity .18s ease, filter .18s ease;
}
.psh-hist i, .ps2-bars i { transition: scale .18s ease, filter .18s ease, box-shadow .18s ease; }
.fx-hot > :not(.fx-on) { opacity: .38; }
.fx-hot > .fx-on i, .fx-hot > i.fx-on { filter: brightness(1.18) saturate(1.1); }
:is(.psh-hist, .ps2-bars).fx-hot > .fx-on i { scale: 1.08 1.04;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--text) 25%, transparent), 0 0 14px color-mix(in srgb, var(--accent) 35%, transparent); }
.fx-hot > .fx-on em { color: var(--text); font-weight: 700; }
.fx-hot > .fx-on { opacity: 1; }
.ps2-kbar.fx-hot, .ps2-split.fx-hot, .ps-split.fx-hot { overflow: visible; }
:is(.ps2-kbar, .ps2-split, .ps-split).fx-hot > i.fx-on { scale: 1 1.6; border-radius: 2px; }
.ps2-kbar i, .ps2-split i, .ps-split i { transition: opacity .18s ease, scale .18s ease, filter .18s ease; }
[data-fx-cols] { cursor: crosshair; touch-action: pan-y; }
[data-fx-cols]:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

/* Las filas (rankings, grupos, avisos, carril de semanas): la de debajo del
   ratón o del foco se queda; las demás se apagan. */
.psh-row, .ps-li-row, .ps3-type, .ps-inv-row, .fx-row { transition: opacity .18s ease, background-color .18s ease, transform .18s ease; }
:is(.psh-rows, .ps-li-list, .ps3-tgrid):has(> :is(a, div):hover) > :is(a, div):not(:hover):not(.ps-li-grp) { opacity: .5; }
:is(.psh-rows, .ps-li-list, .ps3-tgrid):has(> :focus-visible) > :not(:focus-visible):not(.ps-li-grp) { opacity: .5; }
.psh-row:hover, .psh-row:focus-visible { background: var(--surface-hover); }
.psh-row .psh-div i, .psh-row .psh-track i { transition: scale .2s ease, filter .2s ease; }
.psh-row:is(:hover, :focus-visible) .psh-div i,
.psh-row:is(:hover, :focus-visible) .psh-track i { scale: 1 1.45; filter: brightness(1.2) saturate(1.15); }
.psh-row:is(:hover, :focus-visible) .psh-x,
.psh-row:is(:hover, :focus-visible) .psh-n { text-shadow: 0 0 12px color-mix(in srgb, currentColor 45%, transparent); }
.ps3-type:hover { transform: translateY(-2px); }

/* Medidores y barras sueltas: crecen un poco al pasar. */
.psh-meter .psh-track, .psh-vs-c .psh-track, span.ps-mini, .ps-xbar, .ps-bar, .ps-split, .ps-limit {
  transition: scale .2s ease, filter .2s ease; transform-origin: left center; }
.psh-meter:hover .psh-track, .psh-vs-c:hover .psh-track, span.ps-mini:hover, .ps-xbar:hover,
.ps-progress:hover .ps-bar, .ps-split:hover, .ps-limit:hover { scale: 1 1.5; filter: brightness(1.15); }
.psh-vs:has(.psh-vs-c:hover) .psh-vs-c:not(:hover) { opacity: .5; }
.psh-vs-c { transition: opacity .18s ease; }

/* Leyenda y serie enlazadas de Presales (`data-hl` en un grupo con
   `data-hl-first`, fx.js): lo de la misma clave se ilumina, lo demás se
   apaga. Antes eran `data-fx-root` y `data-fx-key`. */
[data-hl-first][data-hl-on] [data-hl]:not(.hl) { opacity: .25; }
[data-hl-first][data-hl-on] tr[data-hl]:not(.hl) { opacity: .5; }
[data-hl-first][data-hl-on] .ps-cf-bar.hl { box-shadow: 0 0 0 1px var(--k, var(--accent)), 0 4px 14px color-mix(in srgb, var(--k, var(--accent)) 40%, transparent); z-index: 3; }
[data-hl-first] [data-hl] { transition: opacity .18s ease, box-shadow .18s ease, transform .18s ease; }
.ps-legend [data-hl], .psh-key [data-hl], .ps3-key-line [data-hl] { cursor: default; border-radius: 4px; padding: 1px 3px; margin: -1px -3px; }
[data-hl-on] .ps-legend .hl, [data-hl-on] .psh-key .hl, [data-hl-on] .ps3-key-line .hl { background: var(--surface-hover); color: var(--text); }
.ps-cf-bar:hover { transform: translateY(-1px); }

/* La escalera de precios de la ficha: el peldaño bajo el ratón se queda. */
.ps-step rect { transition: opacity .18s ease, filter .18s ease; }
.ps-chart:has(.ps-step:hover) .ps-step:not(:hover) { opacity: .4; }
.ps-step:hover rect { filter: brightness(1.25); }
.ps-step { cursor: help; }


/* --- Vida: pulso en lo que pasa ahora, halo en la cifra ----------------- */
@keyframes fx-beat {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--fx-c, var(--up)) 60%, transparent); }
  70% { box-shadow: 0 0 0 7px color-mix(in srgb, var(--fx-c, var(--up)) 0%, transparent); }
  100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--fx-c, var(--up)) 0%, transparent); }
}
@keyframes fx-shine { 50% { filter: brightness(1.35) drop-shadow(0 0 6px color-mix(in srgb, var(--accent) 60%, transparent)); } }
.fx-live { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--up-fill);
  margin-right: 6px; vertical-align: 1px; animation: fx-beat 2s ease-out infinite; }
.fx-now i { animation: fx-shine 2.4s ease-in-out infinite 1s; }
.ps-cf-day.today b { position: relative; }
.ps-cf-day.today b::after { content: ""; position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; margin: -3px 0 0 -3px;
  border-radius: 50%; --fx-c: var(--accent); animation: fx-beat 2s ease-out infinite; }
.ps3-soon, .ps-count.ps3-soon { --fx-c: var(--accent); animation: fx-beat 2.2s ease-out infinite; border-radius: 6px; }
.psh-big, [data-fx="css"] .ms-val, .ps-kpi b, .ps-lw-head em { transition: text-shadow .25s ease; }
:is(.psh-box, [data-fx="css"] .ms-cell):hover :is(.psh-big, .ms-val),
.ps-kpi:hover b, .ps-lw-col:hover .ps-lw-head em { text-shadow: 0 0 18px color-mix(in srgb, currentColor 42%, transparent); }
.psh-big .down, .psh-big .up { transition: text-shadow .25s ease; }
.psh-box:hover .psh-big :is(.down, .up) { text-shadow: 0 0 18px color-mix(in srgb, currentColor 50%, transparent); }

@media (prefers-reduced-motion: reduce) {
  .fx-live, .fx-now i, .ps-cf-day.today b::after, .ps3-soon { animation: none !important; }
  .psh-row, .ps-li-row, .ps3-type, [data-hl-first] [data-hl], .ps-cf-bar { transition: none; }
  .ps3-type:hover, .ps-cf-bar:hover { transform: none; }
}

/* ======================================================================
   4. Filas que llevan a su ficha (`data-fx-href`, `data-fx-rows`)
   ====================================================================== */
[data-fx-href] { cursor: pointer; }
tr[data-fx-href]:hover > td:first-child, .sx-rowlink:hover { box-shadow: inset 3px 0 0 var(--accent); }
tr[data-fx-href]:hover .ps-rowname b { color: var(--accent); }
tr.fx-on > td { background: var(--surface-hover); }

/* ======================================================================
   5. Las piezas del terminal, tandas 4–6 (antes en `pieces/t5.css`)
   ====================================================================== */
/* ======================================================================
   MOVIMIENTO COMÚN DE LAS TANDAS 4, 5 Y 6 (2026-11-05)
   ======================================================================
   «Quiero mucho efecto visual, no una página y unas cajas estáticas». Toda
   pieza de las tandas 4–6 lleva la clase `t46` en su marco (`cls=` de
   `f.piece`) y con eso recibe lo de aquí; lo propio de cada una va en su
   hoja. Nació en t5.css (2026-11-05) y está aquí desde el 2026-11-06. Sólo `transform`, `opacity`,
   `filter` y `clip-path`: nada que recoloque la página. Con «menos
   movimiento», nada se mueve (al final). */

/* Entrada: barras que crecen desde su base, líneas que se dibujan, filas
   que suben y anillos que se cierran. Se repite sola cada vez que el
   elemento aparece: al llegar la pieza, al cambiar de rango sin recargar y
   al cambiar de pestaña (pasa de `display: none` a verse). */
@keyframes t46-grow-x { from { transform: scaleX(0); } }
@keyframes t46-grow-y { from { transform: scaleY(0); } }
@keyframes t46-in { from { opacity: 0; transform: translateY(6px); } }
@keyframes t46-fade { from { opacity: 0; } }
@keyframes t46-pop { from { opacity: 0; transform: scale(.3); } }
@keyframes t46-wipe { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@property --t46-a { syntax: "<angle>"; inherits: false; initial-value: 360deg; }
@keyframes t46-sweep { from { --t46-a: 0deg; } to { --t46-a: 360deg; } }
@keyframes t46-pulse {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--k, var(--accent)) 60%, transparent); }
  100% { box-shadow: 0 0 0 10px color-mix(in srgb, var(--k, var(--accent)) 0%, transparent); }
}
@keyframes t46-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }

.t46 .tp-bar > i, .t46 .t46-gx { transform-origin: left center; animation: t46-grow-x .7s cubic-bezier(.2, .8, .2, 1) backwards; }
.t46 .tp-bar.tp-bar-mid.down > i, .t46 .t46-gx-r { transform-origin: right center; }
.t46 .t46-gy { transform-origin: center bottom; animation: t46-grow-y .7s cubic-bezier(.2, .8, .2, 1) backwards; }
.t46 .t46-pop { animation: t46-pop .5s cubic-bezier(.2, .9, .3, 1.3) backwards; transform-box: fill-box; transform-origin: center; }
.t46 .t46-wipe { animation: t46-wipe .9s cubic-bezier(.3, .7, .2, 1) backwards; }
/* Un anillo se cierra como un reloj (máscara cónica que avanza). */
.t46 .t46-sweep { -webkit-mask: conic-gradient(black var(--t46-a), transparent 0);
  mask: conic-gradient(black var(--t46-a), transparent 0); animation: t46-sweep .9s cubic-bezier(.3, .7, .2, 1) backwards; }
/* Las filas entran una tras otra, las diez primeras. */
.t46 .t46-rows > * { animation: t46-in .4s ease-out backwards; }
.t46 .t46-rows > :nth-child(2) { animation-delay: 30ms; } .t46 .t46-rows > :nth-child(3) { animation-delay: 60ms; }
.t46 .t46-rows > :nth-child(4) { animation-delay: 90ms; } .t46 .t46-rows > :nth-child(5) { animation-delay: 120ms; }
.t46 .t46-rows > :nth-child(6) { animation-delay: 150ms; } .t46 .t46-rows > :nth-child(7) { animation-delay: 180ms; }
.t46 .t46-rows > :nth-child(8) { animation-delay: 210ms; } .t46 .t46-rows > :nth-child(9) { animation-delay: 240ms; }
.t46 .t46-rows > :nth-child(n+10) { animation-delay: 270ms; }
/* Las barras de una fila crecen con su fila. */
.t46 .t46-rows > :nth-child(2) .tp-bar > i { animation-delay: 60ms; } .t46 .t46-rows > :nth-child(3) .tp-bar > i { animation-delay: 100ms; }
.t46 .t46-rows > :nth-child(4) .tp-bar > i { animation-delay: 140ms; } .t46 .t46-rows > :nth-child(5) .tp-bar > i { animation-delay: 180ms; }
.t46 .t46-rows > :nth-child(n+6) .tp-bar > i { animation-delay: 220ms; }

/* Un elemento con `--d` (su orden, lo pone la plantilla) sale después que
   el anterior: las barras de un histograma, una tras otra. */
.t46 :is(.t46-gy, .t46-gx, .t46-pop)[style*="--d"] { animation-delay: calc(var(--d) * 18ms); }

/* La línea de un gráfico se dibuja de izquierda a derecha. */
.t46 .t46-line svg { animation: t46-wipe 1s cubic-bezier(.3, .7, .2, 1) backwards; }
/* El último punto de una serie viva late (posición en % que pone el servidor). */
.t46-end { position: absolute; width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; border-radius: 50%; pointer-events: none;
  background: var(--k, var(--accent)); box-shadow: 0 0 0 0 var(--k, var(--accent)); animation: t46-pulse 1.8s ease-out infinite; }
.t46 .t46-line { position: relative; }

/* Al pasar: la fila se ilumina, las demás se apagan un poco (foco) y su
   barra brilla y engorda. */
.t46 .tp-row, .t46 .t46-hov { transition: opacity .18s ease, background-color .18s ease, transform .18s ease; }
.t46 .t46-rows:has(> :hover) > :not(:hover) { opacity: .55; }
.t46 .tp-bar { transition: transform .18s ease; }
.t46 .tp-bar > i { transition: filter .18s ease, box-shadow .18s ease; }
.t46 :is(.tp-row, .t46-hov):hover .tp-bar, .t46 .tp-bar[data-tip]:hover { transform: scaleY(1.5); }
.t46 :is(.tp-row, .t46-hov):hover .tp-bar > i, .t46 .tp-bar[data-tip]:hover > i {
  filter: brightness(1.2); box-shadow: 0 0 10px color-mix(in srgb, var(--accent) 45%, transparent); }
/* Un tramo o una barra suelta con su globo: crece y brilla al pasar, y sus
   hermanos se apagan. */
.t46 .t46-seg > * { transition: opacity .18s ease, filter .18s ease, transform .18s ease; }
.t46 .t46-seg:has(> :hover) > :not(:hover) { opacity: .4; }
.t46 .t46-seg > :hover { filter: brightness(1.18) saturate(1.1); }
/* La cifra destacada brilla un poco. */
.t46 .t46-glow { text-shadow: 0 0 18px color-mix(in srgb, var(--k, var(--accent)) 35%, transparent); }

/* El realce enlazado (`data-hl`, fx.js): lo señalado se queda, el resto se
   apaga. */
.t46 [data-hl] { transition: opacity .18s ease, filter .18s ease, stroke-width .18s ease; }
.t46[data-hl-on] [data-hl]:not(.hl), .t46 [data-hl-on] [data-hl]:not(.hl) { opacity: .35; }
.t46[data-hl-on] [data-hl].hl, .t46 [data-hl-on] [data-hl].hl { filter: brightness(1.15); }
.t46 [data-hl] { cursor: pointer; }

/* Un dibujo con globos (`data-fx-titles`): los arcos engordan y se apagan
   con suavidad. Sin `transform-box` aquí: los arcos de `charts` giran con su
   atributo `transform` y cambiarles el origen los saca del dibujo. */
.t46 [data-fx-titles] circle { transition: opacity .18s ease, stroke-width .18s ease; }

@media (prefers-reduced-motion: reduce) {
  .t46, .t46 *, .t46 *::before, .t46 *::after { animation: none !important; transition: none !important; }
  .t46 .t46-sweep { -webkit-mask: none; mask: none; }
}