/* mckibben.css — OWNER mckibben · Slide 4 · Actuadores McKibben + economía */

#slide-5{
  background:
    radial-gradient(120% 90% at 82% 8%, rgba(79,124,255,.12), transparent 58%),
    radial-gradient(90% 80% at 12% 100%, rgba(226,72,61,.07), transparent 60%),
    linear-gradient(180deg, var(--navy-900), var(--navy-800) 55%, var(--navy-900));
}

.mck{width:100%}
.mck__grid{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:clamp(32px,5vw,76px);
  align-items:center;
}

/* ---------- Texto ---------- */
.mck__title{
  margin:.6rem 0 0;
  font-size:clamp(2.1rem,4.6vw,3.6rem);
  color:var(--ink);
}
.mck__title-accent{color:var(--accent-soft)}
.mck__lede{
  margin:1.1rem 0 0;
  max-width:48ch;
  font-size:clamp(.95rem,1.2vw,1.06rem);
  line-height:1.62;
  color:var(--muted);
}
.mck__lede strong{color:var(--ink);font-weight:600}

/* ---------- Barras de costo ---------- */
.mck__bars{
  margin-top:clamp(1.5rem,3.2vh,2.3rem);
  display:flex;flex-direction:column;gap:1.05rem;
  max-width:520px;
}
.mck__bar-head{
  display:flex;justify-content:space-between;align-items:baseline;
  gap:1rem;margin-bottom:.5rem;
}
.mck__bar-name{font-size:.82rem;color:var(--steel);letter-spacing:.01em}
.mck__bom{
  font-family:var(--font-head);font-weight:600;
  font-size:.9rem;color:var(--muted);
  font-variant-numeric:tabular-nums;white-space:nowrap;
}
.mck__bom em{font-style:normal;font-size:.66rem;letter-spacing:.14em;color:var(--steel-dim);text-transform:uppercase}
.mck__bom--accent{color:var(--accent-soft)}

.mck__track{
  position:relative;height:36px;
  border-radius:10px;
  background:rgba(148,163,200,.08);
  border:1px solid var(--line);
  overflow:hidden;
}
.mck__fill{
  position:relative;height:100%;width:0;
  border-radius:9px;
  transition:width 1s var(--ease);
  will-change:width;
}
.mck__fill--trad{
  background:linear-gradient(90deg,var(--red) 0 75%,var(--steel-dim) 75% 100%);
  transition-delay:.05s;
}
.mck__fill--trad::after{   /* marca divisoria en el 75% */
  content:"";position:absolute;top:0;bottom:0;left:75%;
  width:2px;background:rgba(255,255,255,.55);
}
.mck__fill--dogma{
  background:linear-gradient(90deg,var(--accent),var(--accent-soft));
  box-shadow:0 0 26px -4px rgba(79,124,255,.65);
  transition-delay:.35s;
}
.mck__seg-label{
  position:absolute;left:0;top:0;width:75%;height:100%;
  display:flex;align-items:center;justify-content:center;
  font-size:.72rem;font-weight:600;letter-spacing:.03em;
  color:#fff;white-space:nowrap;
  text-shadow:0 1px 6px rgba(0,0,0,.55);
  opacity:0;transition:opacity .5s var(--ease) .75s;
}
[data-mck-bars].is-revealed .mck__fill{width:var(--w)}
[data-mck-bars].is-revealed .mck__seg-label{opacity:1}

.mck__bar-note{margin-top:.35rem;font-size:.82rem;color:var(--muted)}
.mck__bar-note strong{color:var(--accent-soft);font-weight:600}

/* ---------- Chips ---------- */
.mck__chips{
  list-style:none;display:flex;flex-wrap:wrap;gap:.6rem;
  margin-top:clamp(1.4rem,2.8vh,2rem);
}
.mck__chip{
  display:inline-flex;align-items:center;gap:.45rem;
  padding:.5rem .9rem;border-radius:99px;
  border:1px solid var(--line);
  background:var(--glass);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  font-size:.8rem;color:var(--steel);
}
.mck__chip::before{
  content:"";width:6px;height:6px;border-radius:50%;
  background:var(--accent);box-shadow:0 0 8px var(--accent);flex:none;
}
.mck__chip span{color:var(--steel-dim);font-size:.74rem}

/* ---------- Video (vertical, actuador completo) ---------- */
.mck__media{margin:0;display:flex;flex-direction:column;align-items:center;gap:.85rem}
.mck__video-frame{
  position:relative;
  /* Marco vertical: el video apaisado se gira 90° y se muestra COMPLETO.
     Ratio del MP4 rotado = 1486/3456 ≈ 0.43; alto acotado para no desbordar 100vh. */
  aspect-ratio:1486 / 3456;
  height:min(76vh,640px);
  width:auto;
  max-width:100%;
  border-radius:20px;
  overflow:hidden;
  border:1px solid var(--line);
  background:var(--navy-800);
  box-shadow:
    0 30px 80px -30px rgba(0,0,0,.85),
    0 0 64px -22px rgba(79,124,255,.5);
}
.mck__video{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:contain;object-position:center;
  display:block;
}
/* Viñeteado para fundir el fondo gris-azul del video con el navy de la web */
.mck__video-frame::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(125% 105% at 50% 50%, transparent 52%, rgba(6,13,40,.6) 100%),
    linear-gradient(180deg, rgba(6,13,40,.3), transparent 22% 72%, rgba(6,13,40,.5));
  box-shadow:inset 0 0 60px 12px rgba(6,13,40,.55);
}
.mck__video-tag{
  position:absolute;left:14px;bottom:14px;z-index:3;
  padding:.42rem .72rem;border-radius:99px;
  font-size:.72rem;letter-spacing:.02em;color:var(--ink);
  background:rgba(6,13,40,.55);
  border:1px solid var(--line);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
}
.mck__media-cap{
  font-size:.8rem;color:var(--steel-dim);
  text-align:center;line-height:1.5;
}

/* ---------- Responsive ---------- */
@media (max-width:900px){
  .mck__grid{grid-template-columns:1fr;gap:34px}
  .mck__media{order:-1}
  .mck__video-frame{height:min(52vh,440px)}
  .mck__bars{max-width:none}
}

@media (prefers-reduced-motion:reduce){
  .mck__fill{transition:none;width:var(--w)}
  .mck__seg-label{transition:none;opacity:1}
}