/* ==========================================================================
   ESPECIFICACIÓN — escena scroll-driven (motion/spec.css)
   --------------------------------------------------------------------------
   Modelo: una sola tarjeta glow que se mantiene en pantalla (sticky) mientras
   tres composiciones se relevan dentro de ella. Todo el movimiento se resuelve
   con transform/opacity leyendo tres custom properties que escribe spec.js:

     --enter  0→1  entrada flotante de la tarjeta   (fase 1)
     --t      0→1  progreso interno de cada escena  (fases 2 y 3)
     --s     -1→1  posición de la escena (antes/presente/después)
     --a      0→1  “distancia” a la escena presente → fundido

   Valores por defecto: --enter:1 --t:1 --s:0 --a:0  ⇒ SIN JS todo queda
   visible, legible y con el encuadre final. El JS nunca oculta nada de forma
   permanente.

   Encuadres: los tres recortes están calculados para que el pie de las fotos
   (donde vive la marca de agua del generador) quede SIEMPRE fuera de cuadro,
   tanto al inicio como al final del zoom, sin cortar el electrodo ni el cable.
   ========================================================================== */

.spec-sec {
  position: relative;
  z-index: 2;
  background: #0A0B0D;
  overflow-x: clip;

  --enter: 1;
  --t: 1;
  --s: 0;
  --a: 0;

  /* mismo padding que .card-content en styles.css: lo usamos para el sangrado */
  --pad: clamp(26px, 4vw, 56px);
}

/* ------------------------------------------------------------- estructura */
.spec-track { position: relative; }

.spec-stage { padding: clamp(56px, 8vw, 104px) 20px; }

.spec-shell {
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
}

/* ---------------------------------------------- fase 1 · entrada flotante */
.spec-sec .card-canvas {
  opacity: calc(.25 + .75 * var(--enter));
  transform: translate3d(0, calc((1 - var(--enter)) * 46px), 0)
             scale(calc(.955 + .045 * var(--enter)));
  transform-origin: 50% 40%;
}

.spec-sec .card-backdrop {
  opacity: calc(.30 + .70 * var(--enter));
  transform: scale(calc(.90 + .10 * var(--enter)));
}

/* sombra profunda: la tarjeta se lee suspendida, no pegada al fondo */
.spec-sec .glow-card {
  box-shadow:
    0 2px 0 rgba(255, 255, 255, .02) inset,
    0 34px 70px -28px rgba(0, 0, 0, .9),
    0 90px 140px -60px rgba(0, 0, 0, .95);
  animation: spec-suspend 13s ease-in-out infinite;
}

@keyframes spec-suspend {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50%      { transform: translate3d(0, -6px, 0); }
}

/* ---------------------------------------------------------------- escenas */
.spec-scenes {
  display: flex;
  flex-direction: column;
  gap: clamp(52px, 8vw, 92px);
}

/* El relevo se lee por desplazamiento, no sólo por fundido: a mitad de cruce
   las dos composiciones quedan separadas ~128px en vertical y con escalas
   distintas. Con los 30px originales la banda opaca de la escena 02 caía
   justo encima del titular de la 01 y el cruce se veía sucio.
   64px se queda por dentro del padding de .card-content (>=26px, hasta 56px)
   en el tramo donde la escena todavía es visible. */
.spec-scene {
  position: relative;
  opacity: calc(1 - var(--a));
  transform: translate3d(0, calc(var(--s) * -64px), 0)
             scale(calc(1 - .06 * var(--a)));
}

/* reveal simple cuando NO hay sticky (móvil, viewport bajo, sin JS de scroll) */
.spec-sec:not([data-motion="on"]) .spec-scene {
  transition: opacity .7s ease, transform .8s cubic-bezier(.2, .75, .3, 1);
}
.spec-sec:not([data-motion="on"]) .spec-scene.is-armed {
  opacity: 0;
  transform: translate3d(0, 26px, 0);
}
.spec-sec:not([data-motion="on"]) .spec-scene.is-armed.is-seen {
  opacity: 1;
  transform: none;
}

/* ------------------------------------------------------------------ fotos */
.spec-shot {
  position: relative;
  margin: 0;
  transform: translate3d(0, calc((1 - var(--t)) * 14px), 0)
             scale(calc(.948 + .052 * var(--t)));
}

.spec-shot::before {              /* halo ámbar detrás de la pieza */
  content: '';
  position: absolute;
  inset: -9% -11%;
  background: radial-gradient(circle at 50% 45%, rgba(245, 179, 1, .20), transparent 70%);
  filter: blur(34px);
  pointer-events: none;
}

.spec-frame {
  position: relative;
  overflow: hidden;
  border-radius: 10px;
  background: #000;
  aspect-ratio: var(--ar);
  box-shadow: 0 0 0 1px rgba(237, 237, 233, .06);
}

.spec-frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% var(--op);
  transform: scale(calc(var(--z0) + (var(--z1) - var(--z0)) * var(--t)));
  transform-origin: 50% var(--zo);
}

/* la cámara llega desde la penumbra */
.spec-veil {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(115% 90% at 50% 45%, rgba(10, 11, 13, .30), rgba(10, 11, 13, .94));
  opacity: calc((1 - var(--t)) * .78);
}

/* velo lateral: garantiza contraste del texto sobre la banda */
.spec-scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(10, 11, 13, .92) 0%, rgba(10, 11, 13, .74) 34%, rgba(10, 11, 13, 0) 62%);
  opacity: 0;
}

/* --- 01 · placa vertical --------------------------------------------- */
.spec-shot--plate {
  --ar: .8;      /* 4/5  */
  --op: 20%;
  --z0: 1.06;    /* recorte inferior 10.0% → marca fuera de cuadro */
  --z1: 1.16;    /* recorte inferior 16.7% → cable y electrodo completos */
  --zo: 12%;
  --sh: clamp(280px, 33vw, 420px);
  width: min(100%, calc(var(--sh) * .8));
  margin-inline: auto;
}

/* --- 02 · banda cinematográfica -------------------------------------- */
.spec-shot--band {
  --ar: 2.8;
  --op: 8%;
  --z0: 1;
  --z1: 1.09;
  --zo: 6%;
  width: 100%;
}
.spec-shot--band::before { display: none; }

/* --- 03 · plano abierto ---------------------------------------------- */
.spec-shot--wide {
  --ar: 1.25;    /* 5/4 */
  --op: 40%;
  --z0: 1;       /* recorte inferior 12.0% → marca fuera de cuadro */
  --z1: 1.08;    /* recorte inferior 16.1% */
  --zo: 30%;
  --sh: clamp(260px, 28vw, 360px);
  width: min(100%, calc(var(--sh) * 1.25));
  margin-inline: auto;
}

/* ------------------------------------------------------------------ texto */
.spec-copy { position: relative; }

.spec-eyebrow {
  display: flex;
  align-items: center;
  gap: 11px;
  margin: 0 0 16px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--amber);
}
.spec-idx {
  padding: 3px 7px;
  border: 1px solid rgba(245, 179, 1, .34);
  border-radius: 4px;
  font-size: 10px;
  letter-spacing: .1em;
  color: rgba(245, 179, 1, .8);
}

.spec-title {
  margin: 0 0 20px;
  font-size: clamp(28px, 4.2vw, 40px);
  font-weight: 600;
  line-height: 1.06;
  letter-spacing: -0.03em;
}
.spec-title--band {
  max-width: 15ch;
  font-size: clamp(26px, 3.4vw, 36px);
  color: var(--txt);
}
.spec-title--band::after {
  content: '';
  display: block;
  width: 54px;
  height: 1px;
  margin-top: 22px;
  background: linear-gradient(90deg, var(--bronze), rgba(184, 115, 51, 0));
}

.spec-lead {
  margin: 0 0 24px;
  max-width: 46ch;
  font-size: 16px;
  line-height: 1.55;
  color: rgba(237, 237, 233, .66);
}

/* el filete superior de la ficha viaja con la primera fila: si no, queda una
   línea flotando sola dentro de la tarjeta mientras el texto todavía no entra */
.spec-list { margin: 0 0 26px; border-top: 0; }
.spec-sec .spec-row { padding: 12px 0; }
.spec-sec .spec-row:first-child { border-top: 1px solid rgba(237, 237, 233, .12); }

.spec-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 26px;
  border-radius: 8px;
  background: var(--wa);
  color: #07160C;
  font-weight: 600;
  font-size: 16px;
  text-decoration: none;
}
.spec-cta:hover { color: #07160C; }

/* ----------------------------------------- fase 3 · cascada del contenido
   OJO: el selector va SIEMPRE anclado a .spec-sec. `[data-step]` suelto es
   global y pisaría los `.inst-step[data-step]` de Instalación.
   La cascada arranca en --t .04 (antes empezaba en .30, y eso dejaba la
   tarjeta fijada y vacía durante casi medio gesto de scroll). */
.spec-sec [data-step] {
  --d: 0;
  --k: clamp(0, calc((var(--t) - .04 - var(--d)) / .20), 1);
  opacity: var(--k);
  transform: translate3d(0, calc((1 - var(--k)) * 15px), 0);
}
.spec-sec [data-step="1"] { --d: .07; }
.spec-sec [data-step="2"] { --d: .13; }
.spec-sec [data-step="3"] { --d: .19; }
.spec-sec [data-step="4"] { --d: .25; }

/* ================================================= composición ≥ 860px === */
@media (min-width: 860px) {
  .spec-scene--split,
  .spec-scene--flip {
    display: grid;
    gap: clamp(34px, 4.6vw, 66px);
    align-items: center;
  }
  .spec-scene--split { grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); }

  /* la tercera composición invierte el eje: imagen a la derecha */
  .spec-scene--flip  { grid-template-columns: minmax(0, 1.06fr) minmax(0, .94fr); }
  .spec-scene--flip .spec-shot { order: 2; }
  .spec-scene--flip .spec-copy { order: 1; }
}

/* ==========================================================================
   MODO MOTION — sólo lo activa spec.js (≥900px, alto ≥700px, sin reduce)
   ========================================================================== */
/* 240vh = 100vh fijados + 140vh de recorrido útil. La escena 01 ya llega
   montada desde la aproximación, así que no hace falta gastar pantalla en
   construirla dentro del sticky. */
.spec-sec[data-motion="on"] .spec-track { height: 240vh; }

.spec-sec[data-motion="on"] .spec-stage {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  align-items: center;
  padding: clamp(16px, 4vh, 44px) 20px;
}

/* las tres escenas comparten celda: la tarjeta no cambia de tamaño */
.spec-sec[data-motion="on"] .spec-scenes {
  display: grid;
  gap: 0;
  align-items: center;
  min-height: clamp(330px, 46vh, 440px);
}
.spec-sec[data-motion="on"] .spec-scene {
  grid-area: 1 / 1;
  pointer-events: none;
}
.spec-sec[data-motion="on"] .spec-scene[data-live="1"] { pointer-events: auto; }
.spec-sec[data-motion="on"] .spec-scene[data-off="1"]  { visibility: hidden; }

.spec-sec[data-motion="on"] .spec-shot--plate { --sh: clamp(260px, 40vh, 410px); }
.spec-sec[data-motion="on"] .spec-shot--wide  { --sh: clamp(230px, 34vh, 350px); }

/* escena 02: banda sangrada al borde de la tarjeta + texto encima */
.spec-sec[data-motion="on"] .spec-scene--band {
  display: flex;
  align-items: center;
}
.spec-sec[data-motion="on"] .spec-shot--band {
  --bh: clamp(190px, 30vh, 320px);
  width: min(calc(100% + var(--pad)), calc(var(--bh) * 2.8));
  margin-left: calc(-1 * var(--pad));
}
.spec-sec[data-motion="on"] .spec-shot--band .spec-frame { border-radius: 0 12px 12px 0; }
.spec-sec[data-motion="on"] .spec-shot--band .spec-scrim { opacity: 1; }

.spec-sec[data-motion="on"] .spec-copy--over {
  position: absolute;
  z-index: 2;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: min(46%, 400px);
}

/* pistas al compositor sólo mientras la sección está en pantalla */
.spec-sec[data-motion="on"].is-active .spec-scene,
.spec-sec[data-motion="on"].is-active .spec-shot,
.spec-sec[data-motion="on"].is-active .spec-frame img {
  will-change: transform, opacity;
}

/* ==========================================================================
   MOVIMIENTO REDUCIDO — tres escenas apiladas, estáticas y legibles
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .spec-sec,
  .spec-sec[data-motion="on"] { --enter: 1; --t: 1; --s: 0; --a: 0; }

  .spec-sec[data-motion="on"] .spec-track  { height: auto; }
  .spec-sec[data-motion="on"] .spec-stage  { position: static; height: auto; display: block; padding: clamp(56px, 8vw, 104px) 20px; }
  .spec-sec[data-motion="on"] .spec-scenes { display: flex; flex-direction: column; gap: clamp(52px, 8vw, 92px); min-height: 0; }
  .spec-sec[data-motion="on"] .spec-scene  { grid-area: auto; pointer-events: auto; visibility: visible; }
  .spec-sec[data-motion="on"] .spec-copy--over { position: static; width: auto; transform: none; margin-top: 26px; }
  .spec-sec[data-motion="on"] .spec-shot--band { width: 100%; margin-left: 0; }
  .spec-sec[data-motion="on"] .spec-shot--band .spec-frame { border-radius: 10px; }
  .spec-sec[data-motion="on"] .spec-shot--band .spec-scrim { opacity: 0; }

  .spec-sec .card-canvas,
  .spec-sec .glow-card,
  .spec-scene,
  .spec-shot,
  .spec-sec [data-step] { animation: none !important; transition: none !important; transform: none !important; opacity: 1 !important; }

  .spec-veil { opacity: 0; }
  .spec-frame img { transform: scale(var(--z1)); }
}

/* ==========================================================================
   MÓVIL — apilado vertical simple
   ========================================================================== */
@media (max-width: 859px) {
  .spec-shot--plate { --sh: clamp(300px, 74vw, 420px); }
  .spec-shot--wide  { --sh: clamp(240px, 62vw, 360px); }
  .spec-shot--band  { --ar: 2.1; }
  .spec-copy--over  { margin-top: 24px; }
  .spec-title--band { max-width: 22ch; }
  .spec-scenes      { gap: clamp(44px, 11vw, 72px); }
}