/* ÚNICO Escuela de Negocios — diagramas
   Lenguaje común: láminas editoriales numeradas (claras) y láminas de noche (azul noche + dorado).
   Todo se ve completo sin JavaScript; las animaciones solo se activan con html.animar. */

:root{
  --noche:#0b1118;
  --noche-2:#121b25;
  --noche-linea:#243140;
  --noche-texto:#c9cdd2;
  --papel:#fffdf8;
}
body{counter-reset:fig}

/* ---------------- Lámina ---------------- */
.diagrama{margin:0 0 56px;background:var(--papel);border:1px solid var(--linea);padding:36px 40px 28px;counter-increment:fig;position:relative}
.diagrama-titulo{display:flex;align-items:center;gap:14px;font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--texto-3);font-weight:500;margin:0 0 32px}
.diagrama-titulo::before{content:'Fig. ' counter(fig, decimal-leading-zero);color:var(--dorado);font-weight:600}
.diagrama-titulo::after{content:'';flex:1;height:1px;background:var(--linea)}
.diagrama figcaption{font-size:13px;color:var(--texto-3);margin-top:28px;padding-top:16px;border-top:1px solid var(--linea-suave);max-width:none}
.diagrama.oscura{background:var(--noche);border-color:var(--noche);color:var(--crema)}
.diagrama.oscura .diagrama-titulo{color:#8f98a3}
.diagrama.oscura .diagrama-titulo::before{color:var(--dorado-claro)}
.diagrama.oscura .diagrama-titulo::after{background:var(--noche-linea)}
.diagrama.oscura figcaption{color:#8f98a3;border-top-color:var(--noche-linea)}
.ficha-tecnica.diagrama{counter-increment:none;padding:32px}
.diagrama.sin-marco{background:none;border:0;padding:0}

/* ---------------- Pasos en línea ---------------- */
.pasos-linea{list-style:none;margin:0;padding:0;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:0}
.pasos-linea li{position:relative;padding:0 20px 0 0;display:flex;flex-direction:column;gap:14px}
.pasos-linea li:not(:last-child)::after{content:'';position:absolute;top:22px;left:52px;right:6px;height:1px;background:var(--dorado);transform-origin:left}
.pasos-linea li:not(:last-child)::before{content:'';position:absolute;top:18px;right:4px;border:4px solid transparent;border-left:7px solid var(--dorado);border-right:0}
.pasos-linea .marca{width:44px;height:44px;border-radius:50%;border:1px solid var(--dorado);display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-size:19px;font-weight:600;color:var(--dorado);background:var(--papel);position:relative;z-index:1}
.pasos-linea strong{display:block;font-family:var(--serif);font-size:22px;font-weight:600;line-height:1.15;margin-bottom:6px}
.pasos-linea span.txt{display:block;font-size:13px;color:var(--texto-2);line-height:1.5}
.pasos-linea li.destacado .marca{background:var(--tinta);border-color:var(--tinta);color:var(--dorado-claro);box-shadow:0 0 0 5px rgba(156,122,52,.18)}
.diagrama.oscura .pasos-linea .marca{background:var(--noche);color:var(--dorado-claro);border-color:var(--dorado-claro)}
.diagrama.oscura .pasos-linea li.destacado .marca{background:var(--dorado-claro);color:var(--noche)}
.diagrama.oscura .pasos-linea span.txt{color:var(--noche-texto)}

/* ---------------- Itinerario de programas (lámina de noche) ---------------- */
.itinerario-diagrama{display:grid;grid-template-columns:1fr 64px 1.25fr 64px 1fr;align-items:center}
.etapa{display:flex;flex-direction:column;gap:10px}
.etapa-titulo{display:flex;align-items:baseline;gap:10px;margin-bottom:6px;font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:#8f98a3}
.etapa-titulo b{font-family:var(--serif);font-size:28px;font-weight:500;letter-spacing:0;color:var(--dorado-claro)}
.etapa a{display:flex;justify-content:space-between;align-items:center;gap:12px;text-decoration:none;color:var(--crema);border:1px solid var(--noche-linea);background:var(--noche-2);padding:14px 16px;transition:border-color .25s,background .25s,transform .25s}
.etapa a:hover{border-color:var(--dorado-claro);transform:translateX(3px);color:var(--crema)}
.etapa a strong{display:block;font-family:var(--serif);font-size:21px;font-weight:600;line-height:1.15}
.etapa a > span{display:block;color:var(--crema)}
.etapa a span span{display:block;font-size:12px;color:#8f98a3;margin-top:2px}
.etapa a::after{content:'→';color:var(--dorado-claro);font-size:16px}
.etapa.principal a{flex-direction:column;align-items:flex-start;padding:30px 26px;border-color:var(--dorado-claro);background:linear-gradient(160deg,#1a2532 0%,var(--noche-2) 60%);box-shadow:0 0 0 1px rgba(217,191,133,.15),0 24px 60px -30px rgba(217,191,133,.45)}
.etapa.principal a strong{font-size:32px}
.etapa.principal a > span:not(.sello){font-size:13px;color:var(--noche-texto)}
.etapa.principal a::after{content:'Ver el programa →';font-size:13px;letter-spacing:.04em;margin-top:10px}
.etapa.principal .sello{font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--noche);background:var(--dorado-claro);padding:4px 8px;margin-bottom:6px}
.via{position:relative;height:1px;background:var(--noche-linea);overflow:visible}
.via::before{content:'';position:absolute;inset:0;background:var(--dorado-claro);transform-origin:left}
.via::after{content:'';position:absolute;right:-2px;top:-4px;border:4px solid transparent;border-left:7px solid var(--dorado-claro);border-right:0}
.via i{position:absolute;top:-3px;left:0;width:7px;height:7px;border-radius:50%;background:#fff;box-shadow:0 0 10px 2px rgba(217,191,133,.8);opacity:0}
.itinerario-diagrama .vuelta{grid-column:1/-1;margin-top:28px;padding-top:18px;border-top:1px solid var(--noche-linea);font-size:13px;color:var(--noche-texto)}
.itinerario-diagrama .vuelta a{color:var(--dorado-claro)}

/* ---------------- Venn ---------------- */
.venn{width:100%;max-width:560px;height:auto;display:block;margin:0 auto}
.venn .c{stroke:var(--dorado);stroke-width:1.2}
.venn .num{font-family:var(--serif);font-size:15px;font-weight:600;fill:var(--dorado);letter-spacing:.1em}
.venn .t-grande{font-family:var(--serif);font-size:30px;font-weight:600;fill:var(--tinta)}
.venn .t-peq{font-family:var(--sans);font-size:13px;fill:var(--texto-2)}
.venn .pill{fill:var(--papel);stroke:var(--dorado);stroke-width:1}
.venn .t-cruce{font-family:var(--sans);font-size:11px;font-weight:500;fill:#7a5f27;letter-spacing:.18em}
.venn .centro{fill:var(--tinta)}
.venn .centro-aro{fill:none;stroke:var(--dorado);stroke-width:1;stroke-dasharray:2 4}
.venn .t-centro{font-family:var(--serif);font-size:19px;font-weight:600;fill:var(--dorado-claro)}

/* ---------------- Franja horaria ---------------- */
.franja{display:flex;gap:4px;width:100%}
.tramo{flex-basis:0;min-width:0;display:flex;flex-direction:column;gap:8px}
.tramo .h{font-family:var(--serif);font-size:20px;font-weight:600;color:var(--tinta);line-height:1;display:flex;align-items:center;gap:8px}
.tramo .h::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--dorado)}
.tramo .barra{height:12px;background:var(--crema-2);position:relative;overflow:hidden}
.tramo .barra::after{content:'';position:absolute;inset:0;background:var(--tinta);transform-origin:left}
.tramo.claro .barra::after{background:var(--dorado)}
.tramo .dur{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--texto-3)}
.tramo strong{font-family:var(--serif);font-size:20px;font-weight:600;line-height:1.15}
.tramo span.txt{font-size:13px;color:var(--texto-2);line-height:1.45}
.eje-horas{display:flex;justify-content:flex-end;font-size:12px;color:var(--texto-3);margin-top:16px;gap:6px;align-items:center}
.eje-horas::before{content:'Fin';letter-spacing:.14em;text-transform:uppercase;font-size:11px}

/* ---------------- Cronograma ---------------- */
.cronograma{position:relative;display:grid;grid-template-columns:repeat(8,minmax(0,1fr));column-gap:6px;row-gap:12px}
.cronograma .sem{display:flex;flex-direction:column;align-items:center;gap:8px;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--texto-3);position:relative}
.cronograma .sem::after{content:'';width:9px;height:9px;border-radius:50%;border:1px solid var(--dorado);background:var(--papel);position:relative;z-index:1}
.cronograma .eje{position:absolute;left:6.25%;right:6.25%;top:30px;height:1px;background:var(--linea)}
.cronograma .bloque{grid-column:span 2;grid-row:2;color:var(--crema);padding:18px 18px 16px;display:flex;flex-direction:column;gap:4px;position:relative;border-left:3px solid var(--dorado-claro)}
.cronograma .b1{background:#1c1814}.cronograma .b2{background:#2a241d}.cronograma .b3{background:#1c1814}.cronograma .b4{background:#2a241d}
.cronograma .bloque small{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--dorado-claro)}
.cronograma .bloque strong{font-family:var(--serif);font-size:22px;font-weight:600;line-height:1.1}
.cronograma .bloque em{font-style:normal;font-size:12px;color:#bdb4a5}
.cronograma .hitos{grid-column:1/-1;grid-row:3;position:relative;height:84px;border-top:1px dashed var(--linea)}
.cronograma .hito{position:absolute;top:-8px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;font-size:12px;color:var(--texto-2);width:160px}
.cronograma .hito::before{content:'';width:14px;height:14px;background:var(--dorado);transform:rotate(45deg);box-shadow:0 0 0 4px var(--papel),0 0 0 5px var(--dorado)}
.cronograma .hito strong{font-family:var(--serif);font-size:17px;font-weight:600;color:var(--tinta)}
.cronograma .tarea{grid-column:1/-1;grid-row:4;display:flex;align-items:center;gap:10px;font-size:12px;color:var(--texto-3)}
.cronograma .tarea::before{content:'↻';color:var(--dorado);font-size:16px}

/* ---------------- Ciclo (lámina de noche) ---------------- */
.ciclo{width:100%;max-width:760px;height:auto;display:block;margin:0 auto}
.ciclo .aro{fill:none;stroke:var(--noche-linea);stroke-width:1}
.ciclo .aro-int{fill:none;stroke:var(--noche-linea);stroke-width:1;stroke-dasharray:2 6}
.ciclo .aro-activo{fill:none;stroke:var(--dorado-claro);stroke-width:1.5;stroke-dasharray:1070;stroke-dashoffset:0}
.ciclo .punta{fill:var(--dorado-claro)}
.ciclo .nodo{fill:var(--noche);stroke:var(--dorado-claro);stroke-width:1.2}
.ciclo .nodo-num{font-family:var(--serif);font-size:19px;font-weight:600;fill:var(--dorado-claro)}
.ciclo .lbl{font-family:var(--serif);font-size:25px;font-weight:600;fill:var(--crema)}
.ciclo .sub{font-family:var(--sans);font-size:14px;fill:#8f98a3}
.ciclo .centro-t{font-family:var(--serif);font-size:34px;font-weight:500;fill:var(--crema)}
.ciclo .centro-s{font-family:var(--sans);font-size:12px;letter-spacing:.28em;fill:var(--dorado-claro)}
.ciclo .orbita circle{fill:#fff;filter:drop-shadow(0 0 6px rgba(217,191,133,.9))}

/* ---------------- Barras ---------------- */
.barras{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:0}
.barras li{display:grid;grid-template-columns:minmax(150px,260px) 1fr 64px;gap:20px;align-items:center;padding:12px 0;border-bottom:1px solid var(--linea-suave)}
.barras li:last-child{border-bottom:0}
.barras .nombre{font-size:15px;line-height:1.3;display:flex;flex-direction:column}
.barras .nombre strong{font-family:var(--serif);font-size:20px;font-weight:600;display:block}
.barras .nombre small{font-size:12px;color:var(--texto-3)}
.barras .pista{height:8px;background:var(--crema-2);position:relative}
.barras .relleno{position:absolute;inset:0 auto 0 0;background:var(--tinta);transform-origin:left}
.barras .relleno::after{content:'';position:absolute;right:-1px;top:-3px;width:2px;height:14px;background:inherit}
.barras .relleno.t-referente{background:var(--tinta)}
.barras .relleno.t-solida{background:#5c4a2a}
.barras .relleno.t-construccion{background:var(--dorado)}
.barras .relleno.t-difusa{background:#b8ab92}
.barras .valor{font-family:var(--serif);font-size:26px;font-weight:600;text-align:right;line-height:1}
.barras .valor small{font-family:var(--sans);font-size:12px;font-weight:300;color:var(--texto-3)}
.barras a{color:var(--tinta);text-decoration:none}
.barras a:hover strong{color:var(--dorado)}
/* Ranking: posición y umbrales de veredicto en la pista */
.ranking li{grid-template-columns:40px minmax(150px,240px) 1fr 64px}
.ranking .pos{font-family:var(--serif);font-size:18px;color:var(--dorado);font-weight:600}
.ranking .pista{background:linear-gradient(90deg,transparent calc(50% - 1px),rgba(23,20,17,.25) 50%,transparent calc(50% + 1px),transparent calc(70% - 1px),rgba(23,20,17,.25) 70%,transparent calc(70% + 1px),transparent calc(85% - 1px),rgba(23,20,17,.25) 85%,transparent calc(85% + 1px)),var(--crema-2)}
.umbrales{display:grid;grid-template-columns:40px minmax(150px,240px) 1fr 64px;gap:20px;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--texto-3);margin-bottom:6px}
.umbrales .escala{position:relative;height:14px}
.umbrales .escala span{position:absolute;transform:translateX(-50%)}
.leyenda{display:flex;flex-wrap:wrap;gap:8px 22px;font-size:13px;color:var(--texto-2);margin-top:22px;list-style:none;padding:0}
.leyenda li{display:flex;align-items:center;gap:8px}
.leyenda i{display:inline-block;width:12px;height:12px}

/* ---------------- Perfiles de CEO ---------------- */
.matriz{display:grid;grid-template-columns:1fr 1fr;gap:0;border:1px solid var(--tinta);max-width:820px;margin:0 auto}
.matriz div{padding:26px 24px;display:flex;flex-direction:column;gap:6px;position:relative;overflow:hidden;min-height:150px}
.matriz div:nth-child(1),.matriz div:nth-child(2){border-bottom:1px solid var(--tinta)}
.matriz div:nth-child(odd){border-right:1px solid var(--tinta)}
.matriz div::before{content:attr(data-letra);position:absolute;right:10px;bottom:-26px;font-family:var(--serif);font-size:120px;font-weight:600;color:rgba(156,122,52,.12);line-height:1}
.matriz strong{font-family:var(--serif);font-size:28px;font-weight:600;position:relative}
.matriz span{font-size:13px;color:var(--texto-2);position:relative}

/* ================= ANIMACIONES DE LOS DIAGRAMAS ================= */
.animar .diagrama .pasos-linea .marca{transform:scale(.4);opacity:0;transition:transform .5s cubic-bezier(.3,1.4,.5,1),opacity .4s}
.animar .diagrama .pasos-linea li > div{opacity:0;transform:translateY(8px);transition:opacity .5s,transform .5s}
.animar .diagrama .pasos-linea li:not(:last-child)::after{transform:scaleX(0);transition:transform .5s ease}
.animar .diagrama.visible .pasos-linea .marca{transform:none;opacity:1}
.animar .diagrama.visible .pasos-linea li > div{opacity:1;transform:none}
.animar .diagrama.visible .pasos-linea li:not(:last-child)::after{transform:scaleX(1)}
.animar .diagrama.visible .pasos-linea li:nth-child(2) .marca,.animar .diagrama.visible .pasos-linea li:nth-child(2) > div{transition-delay:.45s}
.animar .diagrama.visible .pasos-linea li:nth-child(3) .marca,.animar .diagrama.visible .pasos-linea li:nth-child(3) > div{transition-delay:.9s}
.animar .diagrama.visible .pasos-linea li:nth-child(4) .marca,.animar .diagrama.visible .pasos-linea li:nth-child(4) > div{transition-delay:1.35s}
.animar .diagrama.visible .pasos-linea li:nth-child(5) .marca,.animar .diagrama.visible .pasos-linea li:nth-child(5) > div{transition-delay:1.8s}
.animar .diagrama.visible .pasos-linea li:nth-child(1)::after{transition-delay:.2s}
.animar .diagrama.visible .pasos-linea li:nth-child(2)::after{transition-delay:.65s}
.animar .diagrama.visible .pasos-linea li:nth-child(3)::after{transition-delay:1.1s}
.animar .diagrama.visible .pasos-linea li:nth-child(4)::after{transition-delay:1.55s}

@keyframes viaje{0%{left:0;opacity:0}10%{opacity:1}90%{opacity:1}100%{left:calc(100% - 7px);opacity:0}}
.animar .diagrama .etapa{opacity:0;transform:translateY(14px);transition:opacity .6s,transform .6s}
.animar .diagrama .via::before{transform:scaleX(0);transition:transform .6s ease}
.animar .diagrama.visible .etapa{opacity:1;transform:none}
.animar .diagrama.visible .via::before{transform:scaleX(1)}
.animar .diagrama.visible .itinerario-diagrama > :nth-child(2)::before{transition-delay:.45s}
.animar .diagrama.visible .itinerario-diagrama > :nth-child(3){transition-delay:.7s}
.animar .diagrama.visible .itinerario-diagrama > :nth-child(4)::before{transition-delay:1.15s}
.animar .diagrama.visible .itinerario-diagrama > :nth-child(5){transition-delay:1.4s}
.animar .diagrama.visible .via i{animation:viaje 2.6s ease-in-out 2s infinite}
.animar .diagrama.visible .itinerario-diagrama > :nth-child(4) i{animation-delay:3.3s}

.animar .diagrama .venn .circulo{transform-box:fill-box;transform-origin:center;transform:scale(.5);opacity:0;transition:transform 1s cubic-bezier(.2,.7,.2,1),opacity 1s}
.animar .diagrama .venn .etq,.animar .diagrama .venn .cruce,.animar .diagrama .venn .nucleo{opacity:0;transition:opacity .6s}
.animar .diagrama .venn .nucleo{transform-box:fill-box;transform-origin:center;transform:scale(.6);transition:opacity .6s,transform .7s cubic-bezier(.3,1.4,.5,1)}
.animar .diagrama.visible .venn .circulo{transform:none;opacity:1}
.animar .diagrama.visible .venn .etq,.animar .diagrama.visible .venn .cruce{opacity:1}
.animar .diagrama.visible .venn .nucleo{opacity:1;transform:none}
.animar .diagrama.visible .venn .circulo:nth-of-type(2){transition-delay:.2s}
.animar .diagrama.visible .venn .circulo:nth-of-type(3){transition-delay:.4s}
.animar .diagrama.visible .venn .etq{transition-delay:.9s}
.animar .diagrama.visible .venn .cruce{transition-delay:1.3s}
.animar .diagrama.visible .venn .nucleo{transition-delay:1.7s}
@keyframes girar-lento{to{transform:rotate(360deg)}}
.animar .diagrama.visible .venn .centro-aro{transform-box:fill-box;transform-origin:center;animation:girar-lento 30s linear infinite}

.animar .diagrama .tramo .barra::after{transform:scaleX(0);transition:transform .6s ease}
.animar .diagrama .tramo strong,.animar .diagrama .tramo span.txt,.animar .diagrama .tramo .dur{opacity:0;transition:opacity .5s}
.animar .diagrama.visible .tramo .barra::after{transform:scaleX(1)}
.animar .diagrama.visible .tramo strong,.animar .diagrama.visible .tramo span.txt,.animar .diagrama.visible .tramo .dur{opacity:1}
.animar .diagrama.visible .tramo:nth-child(2) .barra::after,.animar .diagrama.visible .tramo:nth-child(2) strong,.animar .diagrama.visible .tramo:nth-child(2) span.txt,.animar .diagrama.visible .tramo:nth-child(2) .dur{transition-delay:.5s}
.animar .diagrama.visible .tramo:nth-child(3) .barra::after,.animar .diagrama.visible .tramo:nth-child(3) strong,.animar .diagrama.visible .tramo:nth-child(3) span.txt,.animar .diagrama.visible .tramo:nth-child(3) .dur{transition-delay:1s}
.animar .diagrama.visible .tramo:nth-child(4) .barra::after,.animar .diagrama.visible .tramo:nth-child(4) strong,.animar .diagrama.visible .tramo:nth-child(4) span.txt,.animar .diagrama.visible .tramo:nth-child(4) .dur{transition-delay:1.5s}
.animar .diagrama.visible .tramo:nth-child(5) .barra::after,.animar .diagrama.visible .tramo:nth-child(5) strong,.animar .diagrama.visible .tramo:nth-child(5) span.txt,.animar .diagrama.visible .tramo:nth-child(5) .dur{transition-delay:2s}
.animar .diagrama.visible .tramo:nth-child(6) .barra::after,.animar .diagrama.visible .tramo:nth-child(6) strong,.animar .diagrama.visible .tramo:nth-child(6) span.txt,.animar .diagrama.visible .tramo:nth-child(6) .dur{transition-delay:2.5s}

.animar .diagrama .cronograma .bloque{clip-path:inset(0 100% 0 0);transition:clip-path .7s cubic-bezier(.2,.7,.2,1)}
.animar .diagrama .cronograma .sem::after{transform:scale(0);transition:transform .4s}
.animar .diagrama .cronograma .hito{opacity:0;transition:opacity .5s,top .5s}
.animar .diagrama.visible .cronograma .bloque{clip-path:inset(0 0 0 0)}
.animar .diagrama.visible .cronograma .sem::after{transform:none}
.animar .diagrama.visible .cronograma .hito{opacity:1}
.animar .diagrama.visible .cronograma .b2{transition-delay:.35s}
.animar .diagrama.visible .cronograma .b3{transition-delay:.7s}
.animar .diagrama.visible .cronograma .b4{transition-delay:1.05s}
.animar .diagrama.visible .cronograma .hito{transition-delay:1.5s}
.animar .diagrama.visible .cronograma .hito.final{transition-delay:1.8s}

.animar .diagrama .ciclo .aro-activo{stroke-dashoffset:1070;transition:stroke-dashoffset 2.4s ease}
.animar .diagrama.visible .ciclo .aro-activo{stroke-dashoffset:0}
.animar .diagrama.visible .ciclo .orbita{transform-origin:320px 260px;animation:girar 14s linear 2.4s infinite}
.animar .diagrama .ciclo .grupo-nodo{opacity:0;transition:opacity .5s}
.animar .diagrama.visible .ciclo .grupo-nodo{opacity:1}
.animar .diagrama.visible .ciclo .n2{transition-delay:.6s}
.animar .diagrama.visible .ciclo .n3{transition-delay:1.2s}
.animar .diagrama.visible .ciclo .n4{transition-delay:1.8s}

.animar .diagrama .barras .relleno{transform:scaleX(0);transition:transform 1.1s cubic-bezier(.2,.7,.2,1)}
.animar .diagrama.visible .barras .relleno{transform:scaleX(1)}
.animar .diagrama.visible .barras li:nth-child(2) .relleno{transition-delay:.08s}
.animar .diagrama.visible .barras li:nth-child(3) .relleno{transition-delay:.16s}
.animar .diagrama.visible .barras li:nth-child(4) .relleno{transition-delay:.24s}
.animar .diagrama.visible .barras li:nth-child(5) .relleno{transition-delay:.32s}
.animar .diagrama.visible .barras li:nth-child(6) .relleno{transition-delay:.4s}
.animar .diagrama.visible .barras li:nth-child(7) .relleno{transition-delay:.48s}
.animar .diagrama.visible .barras li:nth-child(n+8) .relleno{transition-delay:.56s}

.animar .diagrama .matriz div{opacity:0;transition:opacity .6s}
.animar .diagrama.visible .matriz div{opacity:1}
.animar .diagrama.visible .matriz div:nth-child(2){transition-delay:.15s}
.animar .diagrama.visible .matriz div:nth-child(3){transition-delay:.3s}
.animar .diagrama.visible .matriz div:nth-child(4){transition-delay:.45s}

/* ================= PANTALLAS PEQUEÑAS ================= */
@media (max-width:900px){
  .diagrama{padding:28px 24px 22px}
  .itinerario-diagrama{grid-template-columns:1fr}
  .via{width:1px;height:40px;margin:10px 0 10px 22px}
  .via::before{transform-origin:top}
  .via::after{right:auto;left:-4px;top:auto;bottom:-2px;border:4px solid transparent;border-top:7px solid var(--dorado-claro);border-bottom:0}
  .via i{display:none}
  .animar .diagrama .via::before{transform:scaleY(0)}
  .animar .diagrama.visible .via::before{transform:scaleY(1)}
  .pasos-linea{grid-auto-flow:row;grid-auto-columns:auto;gap:0}
  .pasos-linea li{flex-direction:row;gap:18px;padding:0 0 26px}
  .pasos-linea li:not(:last-child)::after{top:48px;bottom:4px;left:22px;right:auto;width:1px;height:auto;transform-origin:top}
  .pasos-linea li:not(:last-child)::before{top:auto;bottom:0;right:auto;left:18px;border:4px solid transparent;border-top:7px solid var(--dorado);border-bottom:0}
  .pasos-linea .marca{flex:0 0 44px}
  .animar .diagrama .pasos-linea li:not(:last-child)::after{transform:scaleY(0)}
  .animar .diagrama.visible .pasos-linea li:not(:last-child)::after{transform:scaleY(1)}
}
@media (max-width:600px){
  .diagrama{padding:24px 18px 18px;margin-left:-6px;margin-right:-6px}
  .franja{flex-direction:column;gap:18px}
  .tramo{flex-basis:auto !important;display:grid;grid-template-columns:64px 1fr;column-gap:14px;row-gap:4px}
  .tramo .h{grid-row:1/4;font-size:18px;align-items:flex-start}
  .tramo .h::before{display:none}
  .tramo .barra{height:6px}
  .eje-horas{justify-content:flex-start}
  .cronograma{grid-template-columns:1fr}
  .cronograma .sem,.cronograma .eje{display:none}
  .cronograma .bloque{grid-column:1;grid-row:auto}
  .cronograma .hitos{grid-row:auto;height:auto;border-top:0;display:flex;flex-direction:column;gap:14px}
  .cronograma .hito{position:static;transform:none;flex-direction:row;width:auto;text-align:left;gap:12px}
  .cronograma .tarea{grid-row:auto}
  .barras li{grid-template-columns:1fr 52px;gap:6px 12px}
  .barras.ranking li{grid-template-columns:28px 1fr 52px}
  .barras .pista{grid-column:1/-1;grid-row:2}
  .ranking .pista{grid-column:2/-1}
  .umbrales{display:none}
  .matriz{grid-template-columns:1fr}
  .matriz div{border-right:0 !important;border-bottom:1px solid var(--tinta)}
  .matriz div:last-child{border-bottom:0}
}

/* Ajustes finales */
.cronograma .sem{grid-row:1}
.ficha-tecnica .diagrama-titulo::before{content:none}
.ficha-tecnica .diagrama-titulo{margin:0}
.pasos-linea span.txt{overflow-wrap:anywhere}
.diagrama-titulo::before{white-space:nowrap}
@media (max-width:600px){
  .tramo > *:not(.h){grid-column:2}
  .tramo .h{grid-column:1;grid-row:1/span 4}
  .diagrama-titulo{gap:10px}
}