/* Por qué confiar · «el túnel del tiempo» (fase 1)
   Teléfono: el hilo rosa de la casa se vuelve la línea de tiempo y se dibuja con el scroll; cada hito es un marco
   de cristal que entra con profundidad. Computadora: los marcos avanzan hacia quien mira dentro de un túnel fijo.
   Movimiento: entrada cubic-bezier(.2,.7,.2,1), salida cubic-bezier(.4,0,1,1); sólo transform y opacity
   (y el trazo SVG de la línea, pedido así). Sin JavaScript o con movimiento reducido: lista quieta y completa. */

.tr{
 --tr-fondo:#f3f2f5;--tr-tinta:#1a1719;--tr-rosa:#c45c7c;--tr-rosa-t:#9e2f55;--tr-rosa-s:#e6b4c2;--tr-perla:#f3dde4;--tr-plat:#d9d7dc;
 --tr-entra:cubic-bezier(.2,.7,.2,1);--tr-sale:cubic-bezier(.4,0,1,1);
 --tr-px:max(24px,env(safe-area-inset-left,0px));
 --tr-pt:clamp(96px,15svh,168px);--tr-pb:clamp(72px,11svh,120px);
 /* Dónde corre la línea (--tr-lx), medido desde el borde del cuerpo, y cuánto se aparta el contenido (--tr-pl).
    En el teléfono va a 12 px del borde de la pantalla: exactamente donde baja el hilo rosa de la casa. */
 --tr-lx:-12px;--tr-pl:0px;
 position:relative;z-index:2;isolation:isolate;overflow-x:clip;
 padding:var(--tr-pt) var(--tr-px) var(--tr-pb);
 color:var(--tr-tinta);
 background:
  radial-gradient(90% 22% at 100% 30%,rgb(243 221 228/.95),rgb(243 221 228/0) 70%),
  radial-gradient(70% 16% at 0% 58%,rgb(243 221 228/.55),rgb(243 221 228/0) 70%),
  radial-gradient(100% 22% at 100% 86%,rgb(230 180 194/.5),rgb(230 180 194/0) 70%),
  linear-gradient(180deg,#f3f2f5,#f6f4f7 50%,#f1eff3);
 background-color:var(--tr-fondo); /* base sólida bajo el degradado: el índice la lee para ponerse en cristal claro */
}
.tr-cuerpo{position:relative;max-width:1120px;margin-inline:auto;padding-left:var(--tr-pl)}

/* ——— Cabeza: en 3 segundos, la tesis ——— */
.tr-cabeza{position:relative;z-index:2}
.tr .tr-etq{display:flex;align-items:center;gap:12px;color:var(--tr-rosa-t)}
.tr .tr-etq::before{content:"";width:28px;height:1px;background:currentColor}
.tr .tr-titular{margin-top:16px;color:var(--tr-tinta);max-width:12ch}
.tr .tr-titular em{color:var(--tr-rosa-t)}
.tr-w{display:inline-block}
.tr .tr-sub{margin-top:20px;color:rgb(26 23 25/.74);max-width:34ch}

/* ——— El hilo: la línea de tiempo del teléfono ——— */
.tr-hilo{position:absolute;left:calc(var(--tr-lx) - 2px);top:calc(-1 * var(--tr-pt));bottom:calc(-1 * var(--tr-pb));width:4px;pointer-events:none;z-index:1;view-timeline:--tr-linea block}
.tr-linea{position:absolute;inset:0;width:4px;height:100%;overflow:visible}
.tr-linea path{fill:none;stroke-width:1.4;stroke-linecap:round}
.tr-linea-base{stroke:rgb(26 23 25/.13)}
.tr-linea-traza{stroke:var(--tr-rosa);stroke-dasharray:1 1;stroke-dashoffset:0}
.tr-riel{position:absolute;left:0;top:0;width:4px;height:100%;display:none}
.tr-punta{position:absolute;left:50%;bottom:0;width:9px;height:9px;margin-left:-4.5px;border-radius:50%;background:var(--tr-rosa);box-shadow:0 0 0 3px rgb(255 255 255/.9),0 2px 8px rgb(158 47 85/.35)}

/* ——— Los hitos: marcos de cristal sobre fondo claro ——— */
.tr-pista{position:relative;margin-top:clamp(44px,7svh,72px)}
.tr-escena{position:relative}
.tr-hitos{list-style:none;margin:0;padding:0;display:grid;gap:30px;position:relative}
.tr-hito{position:relative}
.tr-fantasma{position:absolute;right:-14px;top:-46px;z-index:-1;font:italic 400 150px/1 var(--didona);letter-spacing:-.05em;color:rgb(230 180 194/.28);-webkit-text-stroke:1.2px rgb(196 92 124/.5);opacity:1;pointer-events:none;user-select:none}
.tr-nodo{position:absolute;left:calc(var(--tr-lx) - var(--tr-pl) - 5.5px);top:38px;width:11px;height:11px;border-radius:50%;z-index:2;
 background:var(--tr-fondo);border:1.4px solid rgb(26 23 25/.28);transition:background-color .2s var(--tr-entra),border-color .2s var(--tr-entra),box-shadow .2s var(--tr-entra)}
.tr-hito.tocado .tr-nodo,.tr:not(.tr-vivo) .tr-nodo{background:var(--tr-rosa);border-color:var(--tr-rosa);box-shadow:0 0 0 4px rgb(196 92 124/.16)}
.tr-hito.tocado .tr-nodo{animation:tr-late .6s var(--tr-entra) 1}
@keyframes tr-late{50%{transform:scale(1.15)}}

.tr-marco{position:relative;padding:14px 14px 20px;border-radius:20px;overflow:hidden;
 background:rgb(255 255 255/.55);-webkit-backdrop-filter:blur(18px) saturate(140%);backdrop-filter:blur(18px) saturate(140%);
 box-shadow:0 12px 40px rgb(52 20 36/.14),0 2px 6px rgb(52 20 36/.05)}
/* borde de 1 px en degradado y brillo especular en la arista superior */
.tr-marco::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;
 background:linear-gradient(165deg,rgb(255 255 255/.95),rgb(255 255 255/.35) 38%,rgb(26 23 25/.09));
 -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.tr-marco::before{content:"";position:absolute;inset:0 -12px;pointer-events:none;z-index:0;
 background:linear-gradient(120deg,rgb(255 255 255/.4),rgb(255 255 255/0) 38%);transform:translate3d(var(--bx,0px),0,0);transition:transform .12s linear}
.tr-marco>*{position:relative;z-index:1}
.tr-fig{display:block;width:100%;height:auto;aspect-ratio:320/96;border-radius:12px;margin-bottom:16px;
 background:linear-gradient(135deg,rgb(243 221 228/.7),rgb(255 255 255/.5) 55%,rgb(217 215 220/.5));box-shadow:inset 0 0 0 1px rgb(26 23 25/.06)}
.tr-num{margin:0 2px;font:500 11px/1 var(--mono);letter-spacing:.16em;color:var(--tr-rosa-t)}
.tr-num span{color:rgb(26 23 25/.38)}
.tr-periodo{margin:10px 2px 0;font:400 clamp(40px,11.4vw,56px)/1 var(--didona);letter-spacing:-.025em;color:var(--tr-tinta);text-wrap:balance}
.tr-guion{display:inline-block;width:.36em;height:.065em;margin:0 .1em;vertical-align:.3em;background:var(--tr-rosa);color:transparent;overflow:hidden;border-radius:1px}
.tr-hoy .tr-fantasma{display:none}
.tr-cargo{margin:12px 2px 0;font:400 17px/1.42 var(--sans);color:rgb(26 23 25/.86);max-width:30ch;text-wrap:pretty}
.tr-inst{margin:14px 2px 0;padding-top:12px;border-top:1px solid rgb(26 23 25/.1);font:500 11px/1.5 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:rgb(26 23 25/.6)}

/* Gráficas de cada marco (SVG en línea): la paleta de Natalia, línea fina */
.tr-fig .g-t{fill:#1a1719;opacity:.86}.tr-fig .g-t3{fill:#1a1719;opacity:.34}.tr-fig .g-t4{fill:#1a1719;opacity:.16}
.tr-fig .g-r{fill:#c45c7c}.tr-fig .g-rt{fill:#9e2f55}.tr-fig .g-p{fill:#d9d7dc}
.tr-fig .g-hair{stroke:#1a1719;stroke-opacity:.2;stroke-width:1;fill:none}
.tr-fig .g-marco{fill:none;stroke:#1a1719;stroke-opacity:.28;stroke-width:1.2}
.tr-fig .g-r-l{fill:none;stroke:#c45c7c;stroke-width:2;stroke-linecap:round}
.tr-fig .g-rs-l{fill:none;stroke:#e6b4c2;stroke-width:1.6;stroke-linecap:round}
.tr-fig .g-p-l{fill:none;stroke:#b4b1b9;stroke-width:1.3;stroke-linecap:round}
.tr-fig .g-t-l{fill:none;stroke:#1a1719;stroke-opacity:.5;stroke-width:1.6;stroke-linecap:round}
.tr-fig .g-claro{stroke:#fff;stroke-opacity:.42;stroke-width:.9}
.tr-fig .g-cubo{fill:#b4b1b9}
.tr-fig .g-barrido{fill:#fff;opacity:0}
.tr-fig .g-traza{stroke-dasharray:1 1;stroke-dashoffset:0}
.tr-fig .h-fino{stroke:#fff;stroke-opacity:.35;stroke-width:1}
.tr-fig .h-linea{stroke:#fff;stroke-opacity:.8;stroke-width:1.4}
.tr-fig .h-sat{fill:#f3dde4;opacity:.75}
.tr-fig .h-nodo{fill:#fff}
.tr-fig .h-aro{fill:none;stroke:#fff;stroke-opacity:.45;stroke-width:1}
.tr-fig .h-centro{fill:#fff}

/* ——— Hoy: el hito encendido en rosa ——— */
.tr-hoy .tr-marco{background:linear-gradient(155deg,#8f2a4d 0%,#a8406a 55%,#bd5579 100%);color:#fff;
 -webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:0 18px 50px rgb(158 47 85/.32),0 2px 8px rgb(158 47 85/.18)}
.tr-hoy .tr-marco::after{background:linear-gradient(165deg,rgb(255 255 255/.55),rgb(255 255 255/.12) 40%,rgb(255 255 255/.04))}
.tr-hoy .tr-marco::before{background:linear-gradient(120deg,rgb(255 255 255/.2),rgb(255 255 255/0) 36%)}
.tr-hoy .tr-fig{background:linear-gradient(135deg,rgb(255 255 255/.1),rgb(255 255 255/.03));box-shadow:inset 0 0 0 1px rgb(255 255 255/.16)}
.tr-hoy .tr-num{color:var(--tr-perla)}
.tr-hoy .tr-num span{color:rgb(255 255 255/.55)}
.tr-hoy .tr-periodo{color:#fff;font-style:italic}
.tr-hoy .tr-cargo{color:rgb(255 255 255/.94)}
.tr-hoy .tr-inst{color:rgb(255 255 255/.86);border-top-color:rgb(255 255 255/.22);line-height:1.7}
.tr-cargo-ia{margin-top:10px}
.tr-hoy .tr-fantasma{color:rgb(196 92 124/.18)}
.tr-hoy .tr-nodo{width:13px;height:13px;left:calc(var(--tr-lx) - var(--tr-pl) - 6.5px);top:37px}
.tr-casas{list-style:none;margin:18px 2px 0;padding:14px 0 0;border-top:1px solid rgb(255 255 255/.2);display:flex;flex-wrap:wrap;gap:8px}
.tr-casas a{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 16px;border-radius:14px;color:#fff;text-decoration:none;
 font:600 14px/1 var(--sans);letter-spacing:.01em;background:rgb(255 255 255/.12);border:1px solid rgb(255 255 255/.3);
 transition:background-color .18s var(--tr-entra),border-color .18s var(--tr-entra),transform .18s var(--tr-entra)}
.tr-casas a span{color:var(--tr-perla);transition:transform .18s var(--tr-entra)}
.tr-casas a:hover,.tr-casas a:focus-visible{background:rgb(255 255 255/.22);border-color:rgb(255 255 255/.6)}
.tr-casas a:hover span{transform:translateX(3px)}
.tr-casas a:focus-visible{outline:2px solid #fff;outline-offset:3px}

/* ——— Estudios: una línea discreta ——— */
.tr-estudios{position:relative;z-index:2;margin:44px 0 0;padding-top:18px;border-top:1px solid rgb(26 23 25/.12);display:flex;flex-wrap:wrap;gap:4px 22px;
 font:400 14px/1.55 var(--sans);color:rgb(26 23 25/.72)}
.tr-estudios-k{flex-basis:100%;font:500 10.5px/2 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--tr-rosa-t)}

/* Piezas del túnel: sólo existen en la computadora con movimiento */
.tr-paredes,.tr-luz,.tr-regla{display:none}

/* ——— Movimiento en el teléfono (y en cualquier lista): sólo con JavaScript y sin movimiento reducido ——— */
@media (prefers-reduced-motion:no-preference){
 /* La tesis: cada palabra sube 18 px, 500 ms, escalonadas a 70 ms */
 .tr-vivo .tr-w{opacity:0;transform:translate3d(0,18px,0);transition:opacity .5s var(--tr-entra) calc(var(--k) * 70ms),transform .5s var(--tr-entra) calc(var(--k) * 70ms)}
 .tr-vivo .tr-sub,.tr-vivo .tr-etq{opacity:0;transform:translate3d(0,14px,0);transition:opacity .5s var(--tr-entra) .38s,transform .5s var(--tr-entra) .38s}
 .tr-vivo .tr-etq{transition-delay:0s}
 .tr-vivo .tr-cabeza.en .tr-w,.tr-vivo .tr-cabeza.en .tr-sub,.tr-vivo .tr-cabeza.en .tr-etq{opacity:1;transform:none}

 /* Cada marco entra con profundidad: escala .96 → 1 y 20 px → 0, 500 ms; su contenido, en cascada de 70 ms */
 .tr-vivo:not(.tr-tunel-on) .tr-marco{opacity:0;transform:translate3d(0,20px,0) scale(.96);transition:opacity .5s var(--tr-entra),transform .5s var(--tr-entra)}
 .tr-vivo:not(.tr-tunel-on) .tr-marco>*{opacity:0;transform:translate3d(0,12px,0);transition:opacity .42s var(--tr-entra) calc(var(--d,1) * 70ms),transform .42s var(--tr-entra) calc(var(--d,1) * 70ms)}
 .tr-vivo:not(.tr-tunel-on) .tr-hito.en .tr-marco,.tr-vivo:not(.tr-tunel-on) .tr-hito.en .tr-marco>*{opacity:1;transform:none}
 .tr-marco>.tr-fig{--d:1}.tr-marco>.tr-num{--d:2}.tr-marco>.tr-periodo{--d:2}.tr-marco>.tr-cargo{--d:3}.tr-marco>.tr-inst,.tr-marco>.tr-casas{--d:4}
 .tr-vivo:not(.tr-tunel-on) .tr-fantasma{opacity:0;transition:opacity .6s var(--tr-entra) .12s}
 .tr-vivo:not(.tr-tunel-on) .tr-hito.en .tr-fantasma{opacity:1}

 /* La línea se dibuja atada al scroll: la punta va a 62 % de la pantalla, igual que el hilo de la casa */
 @supports (animation-timeline:view()){
  .tr-vivo .tr-linea-traza{stroke-dashoffset:1;animation:tr-traza linear both;animation-timeline:--tr-linea;animation-range:entry 38% exit 38%}
  .tr-vivo .tr-riel{display:block;animation:tr-riel linear both;animation-timeline:--tr-linea;animation-range:entry 38% exit 38%}
  /* Capas: el número fantasma va más lento que el marco */
  .tr-vivo:not(.tr-tunel-on) .tr-fantasma{animation:tr-capa linear both;animation-timeline:view();animation-range:cover}
  /* En el teléfono el brillo responde al scroll */
  .tr-vivo:not(.tr-tunel-on) .tr-marco::before{animation:tr-brillo linear both;animation-timeline:view();animation-range:cover}
 }
 /* Respaldo sin scroll-timeline: IntersectionObserver lleva la línea de nodo en nodo */
 .tr-vivo.tr-sin-tl .tr-linea-traza{stroke-dashoffset:calc(1 - var(--tr-f,0));transition:stroke-dashoffset .5s var(--tr-entra)}
 .tr-vivo.tr-sin-tl .tr-riel{display:block;transform:translate3d(0,calc((var(--tr-f,0) - 1) * 100%),0);transition:transform .5s var(--tr-entra)}
}
@keyframes tr-traza{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes tr-riel{0%{transform:translate3d(0,-100%,0);opacity:0}4%{opacity:1}95%{opacity:1}100%{transform:none;opacity:0}}
@keyframes tr-capa{from{transform:translate3d(0,34px,0)}to{transform:translate3d(0,-34px,0)}}
@keyframes tr-brillo{from{transform:translate3d(-8px,0,0)}to{transform:translate3d(8px,0,0)}}

@supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
 .tr-marco{background:rgb(255 255 255/.84)}
}

/* ——— Pantallas medianas y computadora sin túnel (movimiento reducido o sin JavaScript): lista vertical elegante ——— */
@media (min-width:700px){
 .tr{--tr-lx:14px;--tr-pl:48px}
 .tr-cuerpo{max-width:1028px}
 .tr-hitos{gap:34px}
 .tr-marco{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);grid-template-rows:auto auto 1fr auto;column-gap:30px;padding:20px 26px 22px 20px}
 .tr-fig{grid-column:1;grid-row:1/-1;align-self:center;margin:0}
 .tr-num,.tr-periodo,.tr-cargo,.tr-inst,.tr-casas{grid-column:2}
 .tr-num{margin-top:6px}
 .tr-periodo{font-size:clamp(44px,5vw,60px)}
 .tr-inst{align-self:end}
 .tr-fantasma{font-size:180px;top:-64px;right:-18px}
 .tr-nodo{top:50%;margin-top:-5.5px}
 .tr-hoy .tr-nodo{margin-top:-6.5px;top:50%}
 .tr-estudios{flex-wrap:nowrap;align-items:baseline}
 .tr-estudios-k{flex-basis:auto}
 .tr-estudios span+span::before{content:"/";margin-right:22px;color:rgb(26 23 25/.25)}
 .tr-estudios-k+span::before{display:none}
}

/* ——— Computadora con movimiento: el túnel (trayectoria.js agrega .tr-tunel-on) ——— */
.tr-tunel-on{--tr-lx:0px;--tr-pl:0px}
.tr-tunel-on .tr-cuerpo{max-width:none}
.tr-tunel-on .tr-cabeza,.tr-tunel-on .tr-estudios{max-width:1120px;margin-inline:auto}
.tr-tunel-on .tr-cabeza{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:56px;align-items:end}
.tr-tunel-on .tr-etq{grid-column:1/-1}
.tr-tunel-on .tr-titular{max-width:none}
.tr-tunel-on .tr-sub{margin:0 0 .5em}
.tr-tunel-on .tr-hilo{display:none}
.tr-tunel-on .tr-pista{height:300svh;margin:clamp(28px,5svh,56px) calc(-1 * var(--tr-px)) 0}
.tr-tunel-on .tr-escena{position:sticky;top:0;height:100svh;overflow:hidden}
.tr-tunel-on .tr-escena::before{content:"";position:absolute;inset:0;pointer-events:none;
 background:radial-gradient(60% 64% at 50% 56%,rgb(255 255 255/.85) 0%,rgb(255 255 255/0) 50%,rgb(214 210 218/.55) 100%);
 -webkit-mask:linear-gradient(transparent,#000 14%,#000 86%,transparent);mask:linear-gradient(transparent,#000 14%,#000 86%,transparent)}
.tr-tunel-on .tr-paredes{display:block;position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.tr-tunel-on .tr-luz{display:block;position:absolute;left:50%;top:56%;width:64vmin;height:64vmin;margin:-32vmin 0 0 -32vmin;border-radius:50%;pointer-events:none;
 background:radial-gradient(closest-side,rgb(243 221 228/.95),rgb(243 221 228/.45) 45%,rgb(243 221 228/0));opacity:.4}
.tr-tunel-on .tr-hitos{position:absolute;inset:0;display:block;perspective:1200px;perspective-origin:50% 56%}
.tr-tunel-on .tr-hito{position:absolute;left:50%;top:56%;width:var(--tr-fw,480px);will-change:transform,opacity;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.tr-tunel-on .tr-nodo,.tr-tunel-on .tr-fantasma{display:none}
.tr-tunel-on .tr-marco{display:block;padding:18px 18px 24px;border-radius:22px;background:rgb(255 255 255/.62);-webkit-backdrop-filter:none;backdrop-filter:none}
.tr-tunel-on .tr-hito.cerca:not(.tr-hoy) .tr-marco{-webkit-backdrop-filter:blur(18px) saturate(140%);backdrop-filter:blur(18px) saturate(140%);background:rgb(255 255 255/.55)}
.tr-tunel-on .tr-hito.tr-hoy .tr-marco{background:linear-gradient(155deg,#8f2a4d 0%,#a8406a 55%,#bd5579 100%);-webkit-backdrop-filter:none;backdrop-filter:none;
 box-shadow:0 24px 70px rgb(158 47 85/.38),0 0 0 1px rgb(196 92 124/.25)}
.tr-tunel-on .tr-fig{margin-bottom:18px}
.tr-tunel-on .tr-num{margin-top:0}
.tr-tunel-on .tr-periodo{font-size:clamp(48px,4.4vw,64px)}
.tr-tunel-on .tr-cargo{font-size:19px;max-width:28ch}
/* La niebla: los marcos lejanos se funden con el fondo del túnel */
.tr-tunel-on .tr-marco>.tr-velo{display:block}
.tr-velo{display:none;position:absolute!important;inset:0;z-index:3!important;border-radius:inherit;pointer-events:none;background:#efedf1;opacity:var(--niebla,0)}
.tr-tunel-on .tr-hoy .tr-velo{background:#f3dde4}
.tr-tunel-on .tr-hito:not(.activo) a{pointer-events:none}

/* La regla del tiempo: dónde vas y salto a cualquier hito */
.tr-tunel-on .tr-regla{display:block;position:absolute;left:50%;top:calc(env(safe-area-inset-top,0px) + 76px);z-index:60;width:min(1120px,calc(100% - 96px));transform:translate3d(-50%,0,0)}
.tr-regla ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr))}
.tr-regla a{display:flex;align-items:center;gap:10px;min-height:48px;padding:0 6px 0 0;text-decoration:none;white-space:nowrap;
 font:400 16px/1.1 var(--didona);color:rgb(26 23 25/.42);transition:color .2s var(--tr-entra)}
.tr-regla a span{font:500 10.5px/1 var(--mono);letter-spacing:.14em;color:rgb(26 23 25/.36);transition:color .2s var(--tr-entra)}
.tr-regla a:hover{color:rgb(26 23 25/.75)}
.tr-regla a[aria-current="step"]{color:var(--tr-tinta)}
.tr-regla a[aria-current="step"] span{color:var(--tr-rosa-t)}
.tr-regla::before{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:rgb(26 23 25/.14)}
.tr-regla-avance{position:absolute;left:0;bottom:-.5px;width:100%;height:2px;background:var(--tr-rosa);transform-origin:0 50%;transform:scaleX(0)}


/* ——— Gráficas vivas: cada ilustración se arma una vez, cuando su marco entra (lista) o llega al frente (túnel) ——— */
@media (prefers-reduced-motion:no-preference){
 .tr-vivo .tr-fig .g-ola0,.tr-vivo .tr-fig .g-ola1,.tr-vivo .tr-fig .g-ola2{transform-box:fill-box;transform-origin:50% 50%;transition:transform .52s var(--tr-entra),opacity .52s var(--tr-entra)}
 .tr-vivo .tr-fig .g-ola0{transition-delay:.2s}.tr-vivo .tr-fig .g-ola1{transition-delay:.27s}.tr-vivo .tr-fig .g-ola2{transition-delay:.34s}
 .tr-vivo .tr-hito:not(.vivo) .g-ola0,.tr-vivo .tr-hito:not(.vivo) .g-ola1,.tr-vivo .tr-hito:not(.vivo) .g-ola2{transform:scaleY(.22);opacity:.35}
 .tr-vivo .tr-fig .g-subraya{transition:opacity .42s var(--tr-entra) .46s,transform .42s var(--tr-entra) .46s}
 .tr-vivo .tr-hito:not(.vivo) .g-subraya{opacity:0;transform:translate3d(-12px,0,0)}

 .tr-vivo .tr-fig .g-carta{transition:opacity .48s var(--tr-entra) .2s}
 .tr-vivo .tr-hito:not(.vivo) .g-carta{opacity:.12}
 .tr-vivo .tr-hito.vivo .g-barrido{animation:tr-barre .6s var(--tr-entra) .2s both}

 .tr-vivo .tr-fig .g-pix{transition:opacity .3s var(--tr-entra)}
 .tr-vivo .tr-fig .g-pix0{transition-delay:.24s}.tr-vivo .tr-fig .g-pix1{transition-delay:.31s}.tr-vivo .tr-fig .g-pix2{transition-delay:.38s}
 .tr-vivo .tr-hito:not(.vivo) .g-pix{opacity:0}
 .tr-vivo .tr-fig .g-perilla{transition:transform .56s var(--tr-entra) .3s}
 .tr-vivo .tr-hito:not(.vivo) .g-perilla{transform:translate3d(-74px,0,0)}

 .tr-vivo .tr-fig .g-traza{transition:stroke-dashoffset .56s var(--tr-entra) .3s}
 .tr-vivo .tr-fig .g-tr0{transition-delay:.18s}.tr-vivo .tr-fig .g-tr1{transition-delay:.25s}.tr-vivo .tr-fig .g-tr2{transition-delay:.32s}.tr-vivo .tr-fig .g-tr3{transition-delay:.39s}.tr-vivo .tr-fig .g-tr4{transition-delay:.46s}
 .tr-vivo .tr-fig .h-linea{transition-delay:.2s}.tr-vivo .tr-fig .h-fino{transition-delay:.34s}
 .tr-vivo .tr-hito:not(.vivo) .g-traza{stroke-dashoffset:1}

 .tr-vivo .tr-fig .g-mic{transition:transform .42s var(--tr-entra),opacity .42s var(--tr-entra)}
 .tr-vivo .tr-fig .g-mic0{transition-delay:.18s}.tr-vivo .tr-fig .g-mic1{transition-delay:.24s}.tr-vivo .tr-fig .g-mic2{transition-delay:.3s}.tr-vivo .tr-fig .g-mic3{transition-delay:.36s}.tr-vivo .tr-fig .g-mic4{transition-delay:.42s}
 .tr-vivo .tr-hito:not(.vivo) .g-mic{transform:translate3d(0,14px,0);opacity:0}

 .tr-vivo .tr-fig .h-casas,.tr-vivo .tr-fig .h-sats{transition:opacity .42s var(--tr-entra) .3s}
 .tr-vivo .tr-fig .h-sats{transition-delay:.5s}
 .tr-vivo .tr-hito:not(.vivo) .h-casas,.tr-vivo .tr-hito:not(.vivo) .h-sats{opacity:0}
}
@keyframes tr-barre{from{transform:translate3d(0,0,0);opacity:.95}to{transform:translate3d(0,48px,0);opacity:0}}

/* ——— Movimiento reducido: todo quieto, completo y con la misma jerarquía ——— */
@media (prefers-reduced-motion:reduce){
 .tr *,.tr *::before,.tr *::after{animation:none!important;transition:none!important}
}