/* ==========================================================================
   motion: instalacion — secuencia narrativa del proceso de instalación
   --------------------------------------------------------------------------
   Arquitectura en dos capas:

   1) BASE (sin JS, móvil, prefers-reduced-motion): las 5 etapas se apilan
      verticalmente como tarjetas legibles y estáticas. Nada depende de JS
      para ser visible — no hay opacity:0 permanente en esta capa.

   2) ESCENA (`[data-inst-mode="scene"]`, sólo la activa el JS en pantallas
      anchas y sin reduced-motion): el mismo markup se recompone con
      `display:contents` en un escenario sticky de dos columnas — media a la
      izquierda, texto + corte esquemático + riel a la derecha — y las etapas
      se cruzan con opacity / scale / clip-path según el avance del scroll.

   El recorrido del sticky es corto a propósito: 5 tramos de ~34vh. Cada
   gesto de scroll mueve la escena, no la página.
   ========================================================================== */

.inst {
  /* .inst-atmos deriva hacia la derecha (left 4% + width 72% + translateX 46%
     de su propio ancho = 109% del contenedor) y ensanchaba el documento hasta
     426px en un viewport de 390. Se recorta aquí: `clip` en un solo eje no crea
     contenedor de scroll, así que el sticky de las etapas sigue funcionando. */
  overflow-x: clip;
  overflow-y: visible;
  --inst-count: 5;
  --inst-top: 62px;                                  /* alto del header sticky */
  --inst-step: clamp(240px, 34vh, 360px);            /* recorrido por etapa */
  --inst-vh: calc(100vh - var(--inst-top));
  --inst-p: 0;                                       /* avance total 0→1 */
  --inst-sp: 0;                                      /* avance dentro de la etapa */
  --inst-ease: cubic-bezier(.22, .7, .3, 1);
}

@supports (height: 100svh) {
  .inst { --inst-vh: calc(100svh - var(--inst-top)); }
}

/* atmósfera: un resplandor ámbar que se desplaza con el avance.
   Se mueve con transform (compositor) y no repintando el gradiente. */
.inst-atmos {
  position: absolute;
  left: 4%;
  top: 10%;
  width: min(720px, 72%);
  aspect-ratio: 3 / 2;
  z-index: 0;
  pointer-events: none;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(245, 179, 1, .10), transparent 74%);
  transform: translate3d(calc(var(--inst-p) * 46%), calc(var(--inst-p) * 52%), 0);
}

.inst-wrap {
  position: relative;
  z-index: 1;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}
.inst-wrap--head { padding-top: clamp(56px, 8vw, 104px); }
.inst-wrap--cta  { padding-bottom: clamp(56px, 8vw, 104px); }

/* ------------------------------------------------------------- encabezado */
.inst-head { max-width: 48ch; margin-bottom: 40px; }
.inst-eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--amber);
  margin-bottom: 14px;
}
.inst-title {
  font-size: clamp(28px, 4.2vw, 40px);
  letter-spacing: -0.03em;
  line-height: 1.06;
  font-weight: 600;
  margin: 0 0 14px;
}
.inst-lede { color: rgba(237, 237, 233, .66); font-size: 16px; margin: 0; }

/* =========================================================================
   1) BASE — etapas apiladas (móvil / sin JS / reduced-motion)
   ========================================================================= */
.inst-track { position: relative; z-index: 1; }

.inst-stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 26px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px 36px;
}

.inst-step { display: grid; gap: 16px; margin: 0; }

.inst-fig {
  position: relative;
  margin: 0;
  border-radius: 10px;
  overflow: hidden;
  background: #000;
  aspect-ratio: 4 / 5;
}
.inst-fig-inner { display: block; width: 100%; height: 100%; }
.inst-fig img { display: block; width: 100%; height: 100%; object-fit: cover; }
.inst-fig-veil {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(0deg, rgba(10, 11, 13, .72), transparent 42%),
    radial-gradient(120% 80% at 50% 8%, transparent 55%, rgba(10, 11, 13, .45));
}

/* encuadres por etapa */
.inst-step[data-step="0"] .inst-fig img { object-position: center 46%; }
.inst-step[data-step="1"] .inst-fig img { object-position: center 42%; }
.inst-step[data-step="3"] .inst-fig img { object-position: 65% center; }

.inst-copy { max-width: 46ch; }
.inst-copy-n {
  font-family: var(--mono);
  font-size: clamp(30px, 5vw, 40px);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--amber);
  margin: 0 0 10px;
  font-variant-numeric: tabular-nums;
}
.inst-copy-t {
  font-size: clamp(20px, 2.6vw, 26px);
  letter-spacing: -0.02em;
  line-height: 1.14;
  font-weight: 600;
  margin: 0 0 10px;
}
.inst-copy-d {
  color: rgba(237, 237, 233, .66);
  font-size: 15.5px;
  line-height: 1.55;
  margin: 0;
}

/* corte esquemático — en base se muestra una sola vez, arriba y en su estado final */
.inst-scheme {
  order: -1;
  max-width: 560px;                 /* apilado: el diagrama no debe gigantizarse */
  border: 1px solid rgba(237, 237, 233, .08);
  border-radius: 10px;
  background: rgba(12, 13, 15, .7);
  padding: 14px 16px 10px;
}
.inst-scheme-cap {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(237, 237, 233, .38);
  margin: 0 0 8px;
}
.inst-svg { display: block; width: 100%; height: auto; }

.inst-rail { display: none; }

@media (min-width: 640px) {
  .inst-step {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: 24px;
  }
  .inst-fig { aspect-ratio: 4 / 3; }
}

/* =========================================================================
   2) CORTE ESQUEMÁTICO — estados
   El estado por defecto (sin [data-inst-stage]) es el SISTEMA TERMINADO,
   para que sin JS el diagrama se lea completo y coherente.
   ========================================================================= */
.inst-sv-lying { opacity: 0; }
.inst-sv-mark  { opacity: 0; }
.inst-sv-pit   { stroke-opacity: .3; transform-box: fill-box; transform-origin: top center; }
.inst-sv-add   { opacity: 1; }
.inst-sv-rod   { opacity: 1; transform: none; }
.inst-sv-conn  { opacity: 1; }
.inst-sv-cable { stroke-dasharray: 220; stroke-dashoffset: 0; }
.inst-sv-term  { opacity: 1; stroke-opacity: .95; }
.inst-sv-halo  { opacity: 1; }
.inst-sv-fill  { opacity: .66; }
.inst-sv-close { opacity: 1; }

/* 01 · preparación del terreno */
.inst[data-inst-stage="0"] .inst-sv-lying { opacity: 1; }
.inst[data-inst-stage="0"] .inst-sv-mark  { opacity: 1; }
/* 02 · excavación */
.inst[data-inst-stage="1"] .inst-sv-lying { opacity: 1; }
.inst[data-inst-stage="1"] .inst-sv-mark  { opacity: 1; }

.inst[data-inst-stage="0"] .inst-sv-pit { opacity: 0; transform: scaleY(.04); }
.inst[data-inst-stage="0"] .inst-sv-pit,
.inst[data-inst-stage="1"] .inst-sv-pit,
.inst[data-inst-stage="2"] .inst-sv-pit,
.inst[data-inst-stage="3"] .inst-sv-pit { stroke-opacity: 1; }

.inst[data-inst-stage="0"] .inst-sv-add,
.inst[data-inst-stage="1"] .inst-sv-add { opacity: 0; }

.inst[data-inst-stage="0"] .inst-sv-rod,
.inst[data-inst-stage="1"] .inst-sv-rod { opacity: 0; transform: translateY(-46px); }

.inst[data-inst-stage="0"] .inst-sv-conn,
.inst[data-inst-stage="1"] .inst-sv-conn { opacity: 0; }

.inst[data-inst-stage="0"] .inst-sv-cable,
.inst[data-inst-stage="1"] .inst-sv-cable,
.inst[data-inst-stage="2"] .inst-sv-cable { stroke-dashoffset: 220; }

.inst[data-inst-stage="0"] .inst-sv-term,
.inst[data-inst-stage="1"] .inst-sv-term,
.inst[data-inst-stage="2"] .inst-sv-term { stroke-opacity: .28; }

.inst[data-inst-stage="0"] .inst-sv-halo,
.inst[data-inst-stage="1"] .inst-sv-halo,
.inst[data-inst-stage="2"] .inst-sv-halo,
.inst[data-inst-stage="3"] .inst-sv-halo { opacity: 0; }

.inst[data-inst-stage="0"] .inst-sv-fill,
.inst[data-inst-stage="1"] .inst-sv-fill,
.inst[data-inst-stage="2"] .inst-sv-fill,
.inst[data-inst-stage="3"] .inst-sv-fill { opacity: 0; }

.inst[data-inst-stage="0"] .inst-sv-close,
.inst[data-inst-stage="1"] .inst-sv-close,
.inst[data-inst-stage="2"] .inst-sv-close,
.inst[data-inst-stage="3"] .inst-sv-close { opacity: 0; }

/* las transiciones del diagrama sólo viven en modo escena */
.inst[data-inst-mode="scene"] .inst-svg * {
  transition:
    opacity .42s var(--inst-ease),
    transform .46s var(--inst-ease),
    stroke-opacity .42s var(--inst-ease),
    stroke-dashoffset .62s var(--inst-ease);
}

/* =========================================================================
   3) MODO ESCENA — sticky + secuencia
   ========================================================================= */
.inst[data-inst-mode="scene"] .inst-track {
  height: calc(var(--inst-vh) + var(--inst-count) * var(--inst-step));
}

.inst[data-inst-mode="scene"] .inst-sticky {
  position: sticky;
  top: var(--inst-top);
  height: var(--inst-vh);
  display: flex;
  align-items: stretch;
}

.inst[data-inst-mode="scene"] .inst-stage {
  width: 100%;
  height: 100%;
  padding: clamp(18px, 2.4vh, 34px) 20px clamp(20px, 3vh, 38px);
  grid-template-columns: minmax(0, 1.06fr) minmax(0, .94fr);
  grid-template-rows: minmax(0, 1fr) auto auto;
  grid-template-areas:
    "media copy"
    "media scheme"
    "media rail";
  gap: clamp(14px, 2.2vh, 24px) clamp(28px, 4vw, 60px);
}

/* el <article> desaparece como caja: figura y texto pasan a ser hijos del grid */
.inst[data-inst-mode="scene"] .inst-step { display: contents; }

/* --- media: las 5 figuras comparten la misma celda y se cruzan --- */
.inst[data-inst-mode="scene"] .inst-fig {
  grid-area: media;
  aspect-ratio: auto;
  width: 100%;
  height: 100%;
  border-radius: 12px;
  opacity: 0;
  transform: scale(1.03);
  clip-path: inset(0 0 100% 0);
  transition:
    opacity .34s ease,
    transform .5s var(--inst-ease),
    clip-path 0s linear .36s;                 /* al salir, el clip se repone ya invisible */
}
.inst[data-inst-mode="scene"] .inst-step[data-active] .inst-fig {
  z-index: 2;
  opacity: 1;
  transform: none;
  clip-path: inset(0 0 0 0);
  transition:
    opacity .42s ease,
    transform .72s var(--inst-ease),
    clip-path .56s var(--inst-ease);          /* entra con un barrido desde arriba */
}

/* parallax muy sutil, sin transición: sigue al scroll cuadro a cuadro */
.inst[data-inst-mode="scene"] .inst-fig-inner {
  transform: translate3d(0, calc(var(--inst-sp) * -16px), 0) scale(1.05);
}

/* --- texto: las 5 fichas comparten celda, sin desplazamientos grandes --- */
.inst[data-inst-mode="scene"] .inst-copy {
  grid-area: copy;
  align-self: center;
  opacity: 0;
  transform: translateY(9px);
  pointer-events: none;
  transition: opacity .3s ease, transform .44s var(--inst-ease);
}
.inst[data-inst-mode="scene"] .inst-step[data-active] .inst-copy {
  opacity: 1;
  transform: none;
  pointer-events: auto;
  transition-delay: .1s;
}

.inst[data-inst-mode="scene"] .inst-scheme { grid-area: scheme; order: 0; max-width: none; }

/* el riel reserva abajo el espacio del botón flotante de WhatsApp
   (position:fixed; right:20px; bottom:20px) para no quedar tapado */
.inst[data-inst-mode="scene"] .inst-rail {
  grid-area: rail;
  display: block;
  padding-bottom: clamp(34px, 5vh, 58px);
}

/* --- riel de etapas --- */
.inst-ticks {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  margin: 0 0 10px;
  padding: 0;
}
.inst-tick {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(237, 237, 233, .3);
  transition: color .34s ease;
}
.inst-tick-n { font-size: 11px; color: rgba(237, 237, 233, .38); transition: color .34s ease; }
.inst-tick[data-active] { color: rgba(237, 237, 233, .8); }
.inst-tick[data-active] .inst-tick-n { color: var(--amber); }

.inst-progress {
  position: relative;
  height: 1px;
  background: rgba(237, 237, 233, .12);
  overflow: hidden;
}
.inst-progress i {
  position: absolute;
  inset: 0;
  display: block;
  background: var(--amber);
  box-shadow: 0 0 10px rgba(245, 179, 1, .7);
  transform: scaleX(var(--inst-p));
  transform-origin: left center;
}

.inst-hint {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(237, 237, 233, .34);
  margin: 10px 0 0;
  transition: opacity .3s ease;
}
.inst[data-inst-stage]:not([data-inst-stage="0"]) .inst-hint { opacity: 0; }

/* pantallas anchas: el diagrama respira un poco más */
@media (min-width: 1180px) {
  .inst[data-inst-mode="scene"] .inst-copy-d { font-size: 16px; }
}

/* =========================================================================
   4) REDUCED MOTION — todo apilado, legible y quieto
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
  .inst-atmos { transition: none; }
  .inst-fig,
  .inst-copy,
  .inst-svg *,
  .inst-tick,
  .inst-hint { transition: none !important; }

  /* seguro adicional: aunque algo activara el modo escena, nada queda oculto */
  .inst .inst-fig  { opacity: 1 !important; transform: none !important; clip-path: none !important; }
  .inst .inst-copy { opacity: 1 !important; transform: none !important; pointer-events: auto; }
  .inst .inst-fig-inner { transform: none !important; }
}