/* ==========================================================
   FRANJA "CAPACIDADES INDUSTRIALES" — selector de seis disciplinas unidas por un hilo técnico.
   Escritorio: lista a la izquierda (se abre la activa) y foto a la derecha.
   Móvil: acordeón con la foto dentro de cada disciplina.
   Todo el texto está siempre en el HTML; solo se recorta su altura.
   ========================================================== */
.cap{position:relative;background:var(--grafito);padding:clamp(80px,12vh,140px) 0 clamp(72px,10vh,120px);overflow:hidden;
  background-image:radial-gradient(ellipse 60% 50% at 78% 55%,rgba(0,134,255,.09),transparent 70%)}
.cap__head{max-width:1320px;margin:0 auto clamp(36px,6vh,72px);padding:0 clamp(24px,4vw,56px);display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(20px,4vw,72px);justify-content:space-between;align-items:end}
.cap__eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:var(--azul-luz);margin:0 0 18px}
.cap__h2{margin:0;font-weight:300;font-size:clamp(32px,3.7vw,60px);line-height:1.05;letter-spacing:-.012em;color:var(--hueso)}
.cap__h2 span{display:block}
@media(min-width:900px){.cap__h2 span{white-space:nowrap}}
.cap__h2 em{font-style:normal;background:linear-gradient(90deg,var(--azul),#4fd0ff);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;padding-bottom:.06em}
.cap__sub{margin:0;max-width:34ch;font-family:Inter,system-ui,sans-serif;font-size:clamp(14px,1.1vw,16px);line-height:1.6;color:var(--acero);padding-bottom:.6em}

/* contenedor: lista + hilo + foto */
.cap__wrap{position:relative;max-width:1320px;margin:0 auto;padding:0 clamp(24px,4vw,56px) 0 calc(clamp(24px,4vw,56px) + 14px);min-height:clamp(480px,66vh,620px);display:flex}
.cap__list{list-style:none;margin:0;padding:0 0 0 46px;width:47%;display:flex;flex-direction:column;align-self:stretch}

/* hilo azul con la V que baja hasta la disciplina activa */
.cap__rail{position:absolute;left:calc(clamp(24px,4vw,56px) + 14px);top:0;bottom:0;width:0}
.cap__rail::before{content:"";position:absolute;left:0;top:14px;height:var(--rh,60%);width:1px;background:var(--linea)}
.cap__fill{position:absolute;left:0;top:14px;width:1px;height:var(--fy,0px);background:var(--azul);box-shadow:0 0 10px var(--azul-glow)}
.cap__marker{position:absolute;left:-14px;top:0;width:28px;height:28px;border-radius:50%;background:var(--azul);display:grid;place-items:center;z-index:2;
  box-shadow:0 0 0 5px var(--azul-glow),0 0 24px rgba(0,134,255,.6);transform:translateY(var(--my,0px));will-change:transform}
.cap__marker svg{width:15px;height:auto;display:block;fill:#fff}

/* disciplinas: posiciones fijas (la lista no se mueve al abrir una, así el cursor nunca "salta" de una a otra) */
.cap__item{flex:1 1 0;display:flex;align-items:center;min-height:0}
.cap__t{position:relative;margin:0;font-weight:300;font-size:clamp(26px,2.9vw,46px);line-height:1.12;letter-spacing:-.008em}
.cap__link{color:rgba(247,245,240,.42);text-decoration:none;display:inline-flex;align-items:center;gap:.4em;transition:color .35s}
.cap__item:hover .cap__link,.cap__link:focus-visible{color:rgba(247,245,240,.85)}
.cap__item.is-active .cap__link{color:var(--hueso)}
.cap__link:focus-visible{outline:2px solid var(--azul-luz);outline-offset:6px;border-radius:2px}

/* escritorio: la ficha (texto) se superpone a la parte baja de la foto */
.cap__more,.cap__inner{display:contents}
.cap__card{position:absolute;z-index:3;right:calc(clamp(24px,4vw,56px) + 30px);bottom:28px;width:calc(53% - clamp(24px,4vw,56px) - 14px - 60px);max-width:600px;
  opacity:0;visibility:hidden;transform:translateY(10px);transition:opacity .45s,transform .6s cubic-bezier(.2,.7,.2,1),visibility 0s .45s;text-shadow:0 1px 18px rgba(0,0,0,.55)}
.cap__item.is-active .cap__card{opacity:1;visibility:visible;transform:none;transition:opacity .55s .15s,transform .7s .15s cubic-bezier(.2,.7,.2,1),visibility 0s}
.cap__d{margin:0;font-family:Inter,system-ui,sans-serif;font-size:clamp(14px,1.1vw,16.5px);line-height:1.6;color:#fff}
.cap__tags{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:4px 0}
.cap__tags li{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:rgba(247,245,240,.82)}
.cap__tags li:not(:last-child)::after{content:"·";color:var(--azul-luz);margin:0 .9em}
.cap__go{display:inline-flex;align-items:center;gap:10px;margin:18px 0 0;font-family:var(--mono);font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--hueso);text-decoration:none;border-bottom:1px solid var(--azul);padding-bottom:5px;transition:color .2s,gap .2s}
.cap__go svg{width:14px;height:14px;color:var(--azul-luz)}
.cap__go:hover,.cap__go:focus-visible{color:var(--azul-luz);gap:14px}
.cap__go:focus-visible{outline:2px solid var(--azul-luz);outline-offset:4px}

/* foto: escritorio = panel fijo a la derecha, una sobre otra */
.cap__fig{margin:0;position:absolute;right:clamp(24px,4vw,56px);top:0;bottom:0;width:calc(53% - clamp(24px,4vw,56px) - 14px);border-radius:14px;overflow:hidden;
  background:#0a0d12;border:1px solid rgba(255,255,255,.1);opacity:0;visibility:hidden;transform:scale(.985);
  transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1),visibility 0s .7s;
  box-shadow:0 30px 60px -22px rgba(0,0,0,.85),0 0 60px -14px var(--azul-glow)}
.cap__fig::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(11,13,16,0) 30%,rgba(11,13,16,.92) 100%)}
.cap__fig img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;transform:scale(1.06);transition:transform 1.6s cubic-bezier(.2,.7,.2,1)}
.cap__item.is-active .cap__fig{opacity:1;visibility:visible;transform:none;transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1),visibility 0s}
.cap__item.is-active .cap__fig img{transform:scale(1)}

.cap__foot{max-width:1320px;margin:clamp(40px,7vh,72px) auto 0;padding:0 clamp(24px,4vw,56px);display:flex;justify-content:center}

/* entrada (solo el título se anima: así la foto, que se coloca respecto a la lista, nunca se desplaza) */
.cap.is-pre .cap__t{opacity:0;transform:translateY(16px)}
.cap .cap__t{transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1)}
.cap.is-in .cap__item:nth-child(2) .cap__t{transition-delay:.07s}.cap.is-in .cap__item:nth-child(3) .cap__t{transition-delay:.14s}
.cap.is-in .cap__item:nth-child(4) .cap__t{transition-delay:.21s}.cap.is-in .cap__item:nth-child(5) .cap__t{transition-delay:.28s}.cap.is-in .cap__item:nth-child(6) .cap__t{transition-delay:.35s}

/* pantallas bajas / medias */
@media(min-width:761px) and (max-height:760px){.cap__t{font-size:clamp(24px,2.5vw,36px)}.cap__card{bottom:20px}.cap__tags{margin-top:10px}.cap__go{margin-top:12px}}
@media(min-width:761px) and (max-width:1000px){.cap__list{width:44%}.cap__fig{width:calc(56% - clamp(24px,4vw,56px) - 14px)}.cap__card{width:calc(56% - clamp(24px,4vw,56px) - 14px - 60px)}}

/* móvil: acordeón; la foto va dentro de cada disciplina */
@media(max-width:760px){
  .cap{padding:34px 0 48px}
  .cap__head{grid-template-columns:1fr;gap:14px;margin-bottom:26px}
  .cap__h2{font-size:clamp(32px,9.6vw,42px)}
  .cap__sub{max-width:none;padding:0}
  .cap__wrap{min-height:0;padding:0 24px 0 38px;display:block}
  .cap__rail{left:38px}
  .cap__list{width:auto;padding:0 0 0 28px;display:block}
  .cap__item{display:block;padding:clamp(9px,1.3vh,14px) 0}
  .cap__t{font-size:clamp(24px,7.2vw,30px)}
  .cap__link{display:flex;width:100%;padding:2px 0}
  .cap__more{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows .6s cubic-bezier(.2,.7,.2,1),opacity .45s}
  .cap__item.is-active .cap__more{grid-template-rows:1fr;opacity:1}
  .cap__inner{display:block;min-height:0;overflow:hidden}
  .cap__card{position:static;width:auto;max-width:none;margin-top:8px;opacity:1;visibility:visible;transform:none;transition:none;text-shadow:none}
  .cap__d{color:rgba(247,245,240,.78)}
  .cap__tags li{font-size:10.5px}
  .cap__go{margin:18px 0 0}
  .cap__fig{position:relative;right:auto;top:auto;bottom:auto;width:auto;aspect-ratio:4/3;margin:16px 0 6px;opacity:1;visibility:visible;transform:none;transition:none}
  .cap__fig::after{display:none}
  .cap__fig img{transform:none;transition:none}
  .cap__foot{margin-top:28px}
  .cap__foot .btn{width:100%;justify-content:center}
}
@media(prefers-reduced-motion:reduce){
  .cap .cap__t,.cap__more,.cap__card,.cap__fig,.cap__fig img,.cap__link{transition:none!important}
  .cap.is-pre .cap__t{opacity:1;transform:none}
}