/* ==========================================================================
   Mariona Agency 2028 · Ficha de trabajo · Memoria (mfx-mem), 29/9/26
   Línea de tiempo de la relación o de la marca, de un año a otro, con los
   hitos comprobados en Operativa (referencia: EBRO, Max Gener y Forasters).
   La genera build_new.py (campo «memoria» de la ficha) justo después de la
   entradilla. Sin pies: solo años y nombres. Todo dentro de la cápsula.
   El revelado es el de ma-ficha.js (data-mrv: mf-pre -> mf-in); la línea se
   dibuja en 1,8 s con cubic-bezier(.65,0,.35,1) y cada hito se enciende
   cuando la línea pasa por él (--dl lo calcula el generador con la misma
   curva). Movimiento reducido o sin JavaScript: estado final, quieto.
   ========================================================================== */
.mfx-mem{margin-top:var(--sec)}
.mfx-tl{position:relative;list-style:none;padding:0;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;column-gap:clamp(20px,2.6vw,44px);padding-block:clamp(72px,6.4vw,96px)}
.mfx-tl::before,.mfx-tl::after{content:"";grid-column:2;grid-row:1;align-self:center;height:1px;background:var(--line)}
.mfx-tl::after{background:var(--orange);transform-origin:0 50%}
.mfx-end{grid-row:1;position:relative}
.mfx-a{grid-column:1}
.mfx-b{grid-column:3;text-align:right}
.mfx-y{display:block;font-family:var(--fx);font-weight:200;font-size:clamp(52px,8.6vw,140px);line-height:.8;letter-spacing:-.05em;color:var(--t1);font-variant-numeric:tabular-nums;white-space:nowrap}
.mfx-a .mfx-y{margin-left:-.045em}
.mfx-b .mfx-y{margin-right:-.03em}
.mfx-t{display:block;font-family:var(--fm);font-weight:500;font-size:11px;letter-spacing:.18em;text-transform:uppercase;line-height:1.4;color:var(--t3);white-space:nowrap}
.mfx-end .mfx-t{position:absolute;top:100%;margin-top:clamp(16px,1.7vw,24px)}
.mfx-a .mfx-t{left:0}
.mfx-b .mfx-t{right:0}
.mfx-pt{position:absolute;grid-column:2/3;grid-row:1/2;top:50%;left:calc(var(--x) * 100%);width:0;height:0}
.mfx-pt::before{content:"";position:absolute;left:-3.5px;top:-3.5px;width:7px;height:7px;border-radius:50%;background:var(--t1)}
.mfx-l{position:absolute;left:0;top:20px;transform:translateX(-50%);text-align:center}
.mfx-up .mfx-l{top:auto;bottom:20px}
.mfx-py{display:block;font-family:var(--fr);font-weight:400;font-size:13.5px;line-height:1.3;color:var(--t1);font-variant-numeric:tabular-nums}
.mfx-l .mfx-t{margin-top:5px}

/* Revelado: la línea se dibuja y los hitos se encienden a su paso */
.mfx-mem.mf-pre .mfx-tl::after{transform:scaleX(0)}
.mfx-mem.mf-in .mfx-tl::after{transition:transform 1.8s cubic-bezier(.65,0,.35,1) .3s}
.mfx-mem.mf-pre .mfx-pt,.mfx-mem.mf-pre .mfx-b{opacity:0}
.mfx-mem.mf-pre .mfx-pt::before{scale:0}
.mfx-mem.mf-pre .mfx-l{translate:0 8px}
.mfx-mem.mf-pre .mfx-up .mfx-l{translate:0 -8px}
.mfx-mem.mf-in .mfx-pt{transition:opacity .7s ease var(--dl,0s)}
.mfx-mem.mf-in .mfx-pt::before{transition:scale .6s var(--spring) var(--dl,0s)}
.mfx-mem.mf-in .mfx-l{transition:translate 1s var(--ease) var(--dl,0s)}
.mfx-mem.mf-in .mfx-b{transition:opacity 1.1s ease 1.9s}

/* Tableta en vertical y móvil: la línea pasa a vertical, con los hitos en lista */
@media (max-width:900px){
  .mfx-tl{display:block;padding-block:0}
  .mfx-tl::before,.mfx-tl::after{content:none}
  .mfx-y{font-size:clamp(64px,17vw,124px)}
  .mfx-b{text-align:left}
  .mfx-b .mfx-y{margin-right:0;margin-left:-.045em}
  .mfx-end .mfx-t{position:static;margin-top:14px}
  .mfx-pt{position:relative;left:auto;top:auto;width:auto;height:auto;display:block;margin-left:3px;padding:17px 0 17px 26px;border-left:1px solid var(--orange)}
  .mfx-a+.mfx-pt{margin-top:30px}
  .mfx-pt::before{left:-4px;top:50%;margin-top:-3.5px}
  .mfx-l,.mfx-up .mfx-l{position:static;transform:none;text-align:left;display:flex;align-items:baseline;gap:14px}
  .mfx-py{flex:none;width:3.3em;font-size:15px}
  .mfx-l .mfx-t{margin-top:0;white-space:normal}
  .mfx-pt+.mfx-b{margin-top:30px}
  .mfx-mem.mf-pre .mfx-pt{border-left-color:var(--line)}
  .mfx-mem.mf-pre .mfx-l,.mfx-mem.mf-pre .mfx-up .mfx-l{translate:0 6px}
  .mfx-mem.mf-in .mfx-pt{transition:opacity .7s ease calc(.25s + var(--i,0) * .22s),border-color .6s ease calc(.25s + var(--i,0) * .22s)}
  .mfx-mem.mf-in .mfx-pt::before{transition:scale .6s var(--spring) calc(.25s + var(--i,0) * .22s)}
  .mfx-mem.mf-in .mfx-l{transition:translate 1s var(--ease) calc(.25s + var(--i,0) * .22s)}
  .mfx-mem.mf-in .mfx-b{transition:opacity 1.1s ease 1.2s}
}

@media (prefers-reduced-motion:reduce){
  .mfx-mem .mfx-tl::after{transform:none!important}
  .mfx-mem .mfx-pt,.mfx-mem .mfx-b{opacity:1!important}
  .mfx-mem .mfx-pt::before{scale:none!important}
  .mfx-mem .mfx-l{translate:none!important}
  .mfx-mem .mfx-tl::after,.mfx-mem .mfx-pt,.mfx-mem .mfx-pt::before,.mfx-mem .mfx-l,.mfx-mem .mfx-b{transition:none!important}
}
@media (prefers-reduced-motion:reduce) and (max-width:900px){.mfx-mem .mfx-pt{border-left-color:var(--orange)!important}}
@media print{.mfx-mem .mfx-tl::after{transform:none!important}.mfx-mem .mfx-pt,.mfx-mem .mfx-b{opacity:1!important}}