/* Civiltek · Timelapse del puente colgante en la portada.
   La escena queda fija mientras se baja y el scroll avanza la obra fotograma a fotograma (obra-timelapse.js).
   Los fotogramas traen el fondo en negro puro; el canvas copia el relieve que tiene detrás y aclara el fotograma encima
   (mix-blend-mode no se mezcla bien con el fondo fijo en Chrome). */
.obra-tl{position:relative;height:560vh;background:transparent}
.obra-tl-stage{position:sticky;top:0;height:100vh;height:100svh;display:grid;grid-template-rows:auto minmax(0,1fr) auto;overflow:hidden;padding:clamp(96px,12vh,128px) 0 22px}
.obra-tl-head{position:relative;z-index:2}
.obra-tl-head .eyebrow{color:#14d5cf;margin:0 0 10px}
.obra-tl-head h2{margin:0;max-width:16ch;font-size:clamp(32px,3.6vw,56px);line-height:1.04;letter-spacing:-.02em;color:#f4f6f8}
.obra-tl-media{position:relative;min-height:0;margin:-6vh 0 -2vh}
.obra-tl-media canvas,.obra-tl-poster{position:absolute;inset:0;width:100%;height:100%;display:block}
.obra-tl-poster{object-fit:contain}
.obra-tl-poster{mix-blend-mode:lighten}
.obra-tl.is-live .obra-tl-poster{visibility:hidden}
.obra-tl-foot{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:10px 32px}
.obra-tl-fase{display:flex;align-items:baseline;gap:14px;min-width:0;font-variant-numeric:tabular-nums}
.obra-tl-fase .n{color:#14d5cf;font-size:13px;letter-spacing:.08em}
.obra-tl-fase .t{color:#f4f6f8;font-size:clamp(17px,1.4vw,21px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.obra-tl-fase .p{color:#aeb8c2;font-size:13px;margin-left:auto}
.obra-tl-regla{grid-column:1/-1;position:relative;height:14px}
.obra-tl-regla::before{content:"";position:absolute;left:0;right:0;top:6px;height:1px;background:rgba(20,213,207,.22)}
.obra-tl-regla .avance{position:absolute;left:0;top:6px;height:1px;width:0;background:#14d5cf;box-shadow:0 0 8px rgba(20,213,207,.6)}
.obra-tl-regla .marca{position:absolute;top:2px;width:1px;height:9px;background:rgba(20,213,207,.55)}
.obra-tl-cierre{grid-column:2;grid-row:1;margin:0;opacity:0;transform:translateY(8px);transition:opacity .5s,transform .5s;pointer-events:none}
.obra-tl.is-final .obra-tl-cierre{opacity:1;transform:none;pointer-events:auto}
.obra-tl-cierre a{display:inline-flex;align-items:center;gap:10px;color:#101216;background:#14d5cf;padding:12px 18px;border-radius:3px;font-weight:600;text-decoration:none}
.obra-tl-cierre a:hover{background:#85e8e3}
.obra-tl-cierre svg{width:18px;height:18px}
.obra-tl-credito{grid-column:1/-1;position:relative;z-index:2;margin:4px 0 0;font-size:11px;line-height:1.4;color:#7d8a95}

@media (max-width:760px),(max-aspect-ratio:4/5){
  .obra-tl{height:480vh}
  .obra-tl-stage{padding-top:88px}
  .obra-tl-head h2{font-size:clamp(28px,8vw,40px)}
  .obra-tl-media{margin:0}
  .obra-tl-foot{grid-template-columns:minmax(0,1fr)}
  .obra-tl-fase{flex-wrap:wrap;gap:4px 14px}
  .obra-tl-fase .n,.obra-tl-fase .p{white-space:nowrap}
  /* alto fijo de 3 líneas (la actividad más larga): el puente no cambia de tamaño al cambiar el texto */
  .obra-tl-fase .t{order:3;flex-basis:100%;white-space:normal;line-height:1.3;height:3.9em;overflow:hidden;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical}
  .obra-tl-cierre{grid-column:1;grid-row:auto}
  /* el botón final reserva su hueco desde el principio (solo cambia la opacidad): sin saltos al aparecer */
}
@media (prefers-reduced-motion:reduce){
  .obra-tl{height:auto}
  .obra-tl-stage{position:relative;height:auto;min-height:100svh}
  .obra-tl-media{min-height:56vh}
  .obra-tl-cierre{opacity:1;transform:none;pointer-events:auto}
}

/* Mini Gantt como el de los visores 4D de Civiltek: etapas resumen, línea de hoy, lo pendiente en «fantasma» cian.
   Arrastrar sobre él mueve la obra; pulsar una barra salta al inicio de su etapa. */
.obra-tl-gantt{position:absolute;bottom:calc(100% + 36px);width:min(450px,100%);padding:10px 12px 12px;border-radius:8px;
  background:rgba(16,18,22,.78);border:1px solid rgba(255,255,255,.08);box-shadow:0 18px 40px -18px rgba(0,0,0,.8);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);font-size:11px;line-height:1;color:#aeb8c2;user-select:none}
.og-head{display:flex;align-items:center;gap:10px;margin-bottom:8px;min-width:0}
.og-head b{color:#14d5cf;font-weight:600;letter-spacing:.12em;font-size:10.5px}
.og-head span{flex:1;min-width:0;padding-left:10px;border-left:1px solid rgba(255,255,255,.14);color:#f4f6f8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.og-head em{font-style:normal;color:#7d8a95;white-space:nowrap;font-variant-numeric:tabular-nums}
.og-body{display:grid;grid-template-columns:158px minmax(0,1fr);gap:0 8px}
.og-labels{display:grid;grid-auto-rows:13px;padding-top:14px}
.og-labels small{font-size:inherit}
.og-labels span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color .2s}
.og-labels span.on{color:#f4f6f8;font-weight:600}
.og-chart{position:relative;cursor:ew-resize;touch-action:none}
.og-axis{position:relative;height:14px}
.og-axis i{position:absolute;top:0;font-style:normal;white-space:nowrap;color:#7d8a95;transform:translateX(-50%);font-size:10px}
.og-rows{position:relative;display:grid;grid-auto-rows:13px}
.og-row{position:relative}
.og-row::before{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:rgba(255,255,255,.04)}
.og-bar{position:absolute;top:3px;height:7px;border-radius:2px;background:transparent;border:1px dashed rgba(20,213,207,.45);cursor:pointer;transition:background .2s,border-color .2s,opacity .2s}
.og-bar.hecho{border:0;background:var(--c);opacity:.55}
.og-bar.on{border:0;background:var(--c);opacity:1;box-shadow:0 0 10px -2px var(--c)}
.og-hoy{position:absolute;top:0;bottom:0;width:2px;margin-left:-1px;background:#14d5cf;box-shadow:0 0 8px rgba(20,213,207,.7);pointer-events:none}
.og-hoy::before{content:"";position:absolute;top:-2px;left:-3px;width:8px;height:8px;border-radius:50%;background:#14d5cf}
@media (max-width:760px),(max-aspect-ratio:4/5){
  .obra-tl-gantt{position:relative;bottom:auto;width:100%;margin:-64px 0 8px;z-index:3}
  .og-body{grid-template-columns:30px minmax(0,1fr)}
  .og-labels small{display:none}
  .og-labels,.og-rows{grid-auto-rows:9px}
  .og-labels span{font-size:9.5px;line-height:9px}
  .og-bar{top:2px;height:5px}
}
@media (max-height:700px) and (min-width:761px){.obra-tl-gantt{display:none}}