/* =============================================================
   AZAR PRODUCCIONES — MUESTRA DE CONTENIDO
   "Qué hay detrás de un streaming multicámara" · 5 láminas
   Sistema visual: SEÑAL · ver REFERENCIAS/CLAUDE_DESIGN/SISTEMA_VISUAL_SENAL.md
   Negro dominante · naranja = señal/estado · foto real manda
   ============================================================= */

/* ---------- tokens (idénticos a la landing V03) ---------- */
:root{
  --black:#1A1A1A;
  --deep:#101010;
  --panel:#202020;
  --line:rgba(255,255,255,.10);
  --line-2:rgba(255,255,255,.06);

  --orange:#F28C1F;
  --amber:#FBB040;
  --white:#fff;
  --text:#E8E8E8;
  --muted:#8E8E8E;

  --sans:"Archivo",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  --r-pill:999px; --r-tech:4px;
  --ease-out:cubic-bezier(.16,.84,.44,1);
}

/* ---------- reset ---------- */
*,*::before,*::after{ box-sizing:border-box }
html{ -webkit-text-size-adjust:100% }
body{
  margin:0; background:var(--deep); color:var(--text);
  font-family:var(--sans); font-size:16px; line-height:1.55;
  font-variation-settings:"wdth" 100,"wght" 400;
  -webkit-font-smoothing:antialiased;
  height:100dvh; overflow:hidden;
  display:grid; grid-template-rows:auto 1fr auto;
}
img{ max-width:100%; display:block }
a{ color:inherit; text-decoration:none }
h2{ margin:0; line-height:1.02; text-wrap:balance }
p{ margin:0 }
ul{ margin:0; padding:0; list-style:none }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer;
        -webkit-tap-highlight-color:transparent; touch-action:manipulation }

:focus-visible{ outline:2px solid var(--orange); outline-offset:3px; border-radius:2px }

.skip{ position:absolute; left:-9999px; top:0; z-index:100;
       background:var(--orange); color:#111; padding:12px 18px; font-weight:600 }
.skip:focus{ left:8px; top:8px }

.sr-live{ position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap }

/* =============================================================
   RIGS — el marco de operación alrededor de la pieza
   ============================================================= */
.rig{ display:flex; align-items:center; gap:14px; padding:10px 14px; background:var(--deep) }
.rig--top{ border-bottom:1px solid var(--line-2) }
.rig--bot{ border-top:1px solid var(--line-2); gap:10px }

.rig__logo img{ height:24px; width:auto }
.rig__tag{
  font-family:var(--mono); font-size:.63rem; letter-spacing:.19em;
  text-transform:uppercase; color:var(--muted);
  display:flex; align-items:center; gap:8px; margin-right:auto;
}
.rig__dot{
  width:6px; height:6px; border-radius:50%; background:var(--orange);
  box-shadow:0 0 0 4px rgba(242,140,31,.14);
  animation:breathe 3.4s ease-in-out infinite;
}
@keyframes breathe{ 0%,100%{opacity:1} 50%{opacity:.42} }

/* WhatsApp permanente — pill outline, nunca relleno naranja masivo */
.wa{
  display:inline-flex; align-items:center; gap:9px; flex:none;
  min-height:46px; padding:0 18px; border-radius:var(--r-pill);
  border:1.5px solid var(--orange); color:var(--white);
  font-weight:600; font-size:.85rem;
  transition:box-shadow 200ms var(--ease-out), transform 140ms var(--ease-out);
}
.wa__ico{ color:var(--orange); flex:none }
.wa:active{ transform:scale(.97) }
@media(hover:hover) and (pointer:fine){ .wa:hover{ box-shadow:0 0 0 3px rgba(242,140,31,.13) } }

@media(max-width:430px){
  .rig__tag{ display:none }
  .rig__logo{ margin-right:auto }
  .wa{ padding:0 15px; font-size:.8rem }
}

/* =============================================================
   ESCENARIO
   ============================================================= */
.stage{ position:relative; overflow:hidden; display:grid; place-items:center; min-height:0 }

.frame{
  position:relative; width:100%; height:100%; max-width:100%;
  overflow:hidden; background:#000;
  container-type:inline-size;
}
@media(min-width:820px){
  .stage{ padding:22px }
  .frame{ width:auto; aspect-ratio:4/5; border:1px solid var(--line) }
}

.deck{
  position:absolute; inset:0; display:flex;
  transform:translate3d(calc(var(--i,0) * -100% + var(--drag,0px)),0,0);
  touch-action:pan-y; cursor:grab; will-change:transform;
}
.deck.is-drag{ cursor:grabbing }
.deck.is-settling{ transition:transform 460ms var(--ease-out) }
/* los tres planos viajan con el deck, cada uno a su ritmo */
.deck.is-settling .slide__ph,
.deck.is-settling .slide__sig,
.deck.is-settling .slide__copy,
.deck.is-settling .win{ transition:transform 460ms var(--ease-out) }

.slide{ position:relative; flex:0 0 100%; overflow:hidden; background:#000 }

/* --- FONDO · plano 1 --- */
.slide__ph{
  position:absolute; inset:0; overflow:hidden;
  transform:translate3d(calc(var(--p,0) * 16px),0,0);
}
.slide__ph img{
  width:100%; height:100%; object-fit:cover;
  filter:saturate(.86) brightness(.8) contrast(1.08);
}
/* fotos tomadas en recinto claro: bajan de exposición para sostener el negro dominante */
.slide--dim .slide__ph img{ filter:saturate(.7) brightness(.6) contrast(1.14) }
.slide__grade{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(to top,rgba(10,10,10,.97) 0%,rgba(10,10,10,.88) 24%,
                            rgba(10,10,10,.30) 52%,rgba(10,10,10,.10) 74%,rgba(10,10,10,.55) 100%),
    linear-gradient(to right,rgba(10,10,10,.62) 0%,rgba(10,10,10,0) 46%);
}
/* la lámina 03 ancla el copy a la derecha: el degradado se voltea con él */
.slide--r .slide__grade{
  background:
    linear-gradient(to top,rgba(10,10,10,.97) 0%,rgba(10,10,10,.88) 24%,
                            rgba(10,10,10,.30) 52%,rgba(10,10,10,.10) 74%,rgba(10,10,10,.55) 100%),
    linear-gradient(to left,rgba(10,10,10,.62) 0%,rgba(10,10,10,0) 46%);
}

/* --- MEDIO · plano 2: señal --- */
.slide__sig{
  position:absolute; inset:0; z-index:2; pointer-events:none;
  transform:translate3d(calc(var(--p,0) * 34px),0,0);
}
/* OCLUSIÓN (D3) — la capa de arcos se recorta al NEGATIVO de la silueta del operador
   (lámina 04): donde está él, no hay arco. Una sola imagen en el DOM, sin costura.
   Máscara y núcleo van al ritmo de parallax de la FOTO para no desalinearse nunca. */
.slide__sig--mask{
  transform:translate3d(calc(var(--p,0) * 16px),0,0);
  clip-path:polygon(0% 0%,100% 0%,100% 71%,90% 62%,86% 50%,80% 40%,70% 33%,
                    58% 33%,48% 42%,44% 56%,42% 68%,34% 80%,30% 100%,0% 100%);
}
.slide__sig--core{ transform:translate3d(calc(var(--p,0) * 16px),0,0) }
.signal{
  position:absolute; left:var(--sig-x,50%); top:var(--sig-y,50%);
  width:var(--sig-w,100%); aspect-ratio:1; transform:translate(-50%,-50%);
}
.signal__arcs path{
  fill:none; stroke:var(--orange); stroke-width:1.6; stroke-linecap:round;
  vector-effect:non-scaling-stroke;
}
.signal__arcs path:nth-child(1){ opacity:.95 }
.signal__arcs path:nth-child(2){ opacity:.62 }
.signal__arcs path:nth-child(3){ opacity:.34 }
.signal__core{ fill:var(--amber); filter:drop-shadow(0 0 6px rgba(251,176,64,.55)) }
/* propaga al otro lado: se voltea sólo la geometría, el núcleo queda en su punto */
.signal--r .signal__arcs{ transform:scaleX(-1); transform-origin:200px 200px }

/* EMISIÓN — núcleo entra y los arcos se dibujan en secuencia */
.js .signal__core{ transform-box:fill-box; transform-origin:center; transform:scale(.4); opacity:0 }
.js .signal__arcs path{ stroke-dasharray:420; stroke-dashoffset:420 }
.slide.is-live .signal__core{ animation:core-in 420ms var(--ease-out) forwards }
.slide.is-live .signal__arcs path{ animation:arc-draw 900ms var(--ease-out) forwards }
.slide.is-live .signal__arcs path:nth-child(1){ animation-delay:180ms }
.slide.is-live .signal__arcs path:nth-child(2){ animation-delay:260ms }
.slide.is-live .signal__arcs path:nth-child(3){ animation-delay:340ms }
@keyframes core-in{ to{ transform:scale(1); opacity:1 } }
@keyframes arc-draw{ to{ stroke-dashoffset:0 } }

/* --- FRENTE · plano 3: texto y marcas --- */
.slide__corner{
  position:absolute; z-index:4; left:14px; top:14px; width:24px; height:24px;
  border-left:1px solid rgba(242,140,31,.75); border-top:1px solid rgba(242,140,31,.75);
}
.slide__marks{
  position:absolute; z-index:4; right:10px; top:16px;
  writing-mode:vertical-rl;
  font-family:var(--mono); font-size:.6rem; letter-spacing:.2em;
  text-transform:uppercase; color:rgba(255,255,255,.4);
  display:flex; gap:20px;
}
.slide--r .slide__marks{ right:auto; left:10px; top:auto; bottom:16px; transform:rotate(180deg) }

.slide__copy{
  position:absolute; z-index:3; left:0; right:0; bottom:0;
  padding:0 6cqw 7cqw;
  transform:translate3d(calc(var(--p,0) * 58px),0,0);
}
.slide__copy--r{ text-align:right }
.slide__copy--r .eyebrow{ justify-content:flex-end }
.slide__copy--r .t-sub{ margin-left:auto }

.eyebrow{
  font-family:var(--mono); font-size:clamp(.6rem,2.3cqw,.72rem); letter-spacing:.19em;
  text-transform:uppercase; color:var(--muted);
  display:flex; align-items:center; gap:10px; margin-bottom:3.4cqw;
}
.eyebrow .idx{ color:var(--orange); font-weight:500 }

.t-lead{
  font-size:clamp(1.42rem,8.1cqw,3.05rem);
  font-variation-settings:"wdth" 90,"wght" 800;
  letter-spacing:-.022em; text-transform:uppercase; color:var(--white);
  max-width:17ch;
}
.slide__copy--r .t-lead{ margin-left:auto }
.t-lead em{ font-style:normal; color:var(--orange); display:block }
.t-sub{
  font-size:clamp(.85rem,3.3cqw,1.02rem); color:#C2C2C2;
  max-width:36ch; margin-top:4cqw;
}

/* entrada de copy — ATENUACIÓN con stagger */
.js .slide__copy > *{ opacity:0 }
.slide.is-live .slide__copy > *{ animation:rise 400ms var(--ease-out) both }
.slide.is-live .slide__copy > *:nth-child(1){ animation-delay:80ms }
.slide.is-live .slide__copy > *:nth-child(2){ animation-delay:150ms }
.slide.is-live .slide__copy > *:nth-child(3){ animation-delay:220ms }
.slide.is-live .slide__copy > *:nth-child(4){ animation-delay:290ms }
@keyframes rise{ from{ opacity:0; transform:translateY(14px) } to{ opacity:1; transform:none } }

/* la foto respira al entrar: profundidad, no zoom decorativo */
.slide.is-live .slide__ph img{ animation:ph-in 1000ms var(--ease-out) both }
@keyframes ph-in{ from{ transform:scale(1.06) } to{ transform:scale(1) } }

/* =============================================================
   05 · CIERRE — la salida va en VENTANA sobre negro
   ============================================================= */
.slide--end{
  background:
    repeating-linear-gradient(0deg,rgba(255,255,255,.028) 0 1px,transparent 1px 4px),
    var(--black);
}
.win{
  position:absolute; z-index:2; margin:0; left:7cqw; right:7cqw; top:9cqw;
  border:1px solid var(--line); border-radius:var(--r-tech); overflow:hidden;
  background:#000; box-shadow:14px 16px 0 rgba(0,0,0,.55);
  transform:translate3d(calc(var(--p,0) * 22px),0,0);
}
.win img{ width:100%; height:auto; filter:saturate(.9) brightness(.86) contrast(1.05) }
.win__led{
  position:absolute; right:0; top:0; width:2px; height:34%;
  background:linear-gradient(to bottom,var(--amber),rgba(242,140,31,0));
}
.win figcaption{
  font-family:var(--mono); font-size:clamp(.56rem,2.1cqw,.66rem); letter-spacing:.16em;
  text-transform:uppercase; color:#B8B8B8;
  padding:8px 12px; border-top:1px solid var(--line-2); background:#0C0C0C;
}
.slide__grade--end{
  background:linear-gradient(to top,rgba(10,10,10,.98) 26%,rgba(10,10,10,0) 62%);
}
.slide__copy--end .t-lead{ font-size:clamp(1.3rem,6.9cqw,2.5rem); max-width:19ch }

.sign{
  display:flex; flex-direction:column; gap:2px; margin-top:5cqw;
  font-family:var(--mono); font-size:clamp(.62rem,2.3cqw,.72rem);
  letter-spacing:.18em; text-transform:uppercase;
}
.sign strong{ color:var(--white); font-weight:500 }
.sign span{ color:var(--muted) }

.cta{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:52px; margin-top:5cqw; padding:0 26px; border-radius:var(--r-pill);
  border:1.5px solid var(--orange); color:var(--white);
  font-weight:600; font-size:clamp(.86rem,3.2cqw,.95rem);
  transition:box-shadow 200ms var(--ease-out), transform 140ms var(--ease-out);
}
.cta__ico{ color:var(--orange); flex:none }
.cta:active{ transform:scale(.97) }
@media(hover:hover) and (pointer:fine){ .cta:hover{ box-shadow:0 0 0 3px rgba(242,140,31,.13) } }

/* =============================================================
   CONTROLES
   ============================================================= */
.nav{
  flex:none; display:grid; place-items:center;
  width:48px; height:48px; border-radius:50%;
  border:1px solid var(--line); color:var(--text);
  transition:border-color 200ms var(--ease-out), transform 140ms var(--ease-out);
}
.nav:active{ transform:scale(.94) }
.nav[disabled]{ opacity:.3; cursor:default }
@media(hover:hover) and (pointer:fine){ .nav:not([disabled]):hover{ border-color:var(--orange) } }

/* PROPAGACIÓN — la línea de señal con sus cinco tramos y nodos */
.prog{ flex:1 1 auto; display:flex; align-items:center; gap:6px; max-width:520px; margin-inline:auto }
.prog button{ flex:1 1 auto; height:44px; display:grid; align-items:center; padding:0 }
.prog i{
  display:block; height:2px; background:rgba(255,255,255,.16); position:relative;
  transition:background 260ms var(--ease-out);
}
.prog i::after{
  content:""; position:absolute; right:-1px; top:-2px; width:6px; height:6px;
  border-radius:50%; background:rgba(255,255,255,.22);
  transition:background 260ms var(--ease-out), transform 260ms var(--ease-out);
}
.prog button[aria-selected="true"] i{ background:var(--orange) }
.prog button[aria-selected="true"] i::after{ background:var(--amber); transform:scale(1.25) }
.prog button.is-done i{ background:rgba(242,140,31,.42) }
.prog button.is-done i::after{ background:rgba(242,140,31,.5) }

.count{
  flex:none; font-family:var(--mono); font-size:.68rem; letter-spacing:.14em;
  color:var(--muted); display:flex; gap:5px; min-width:62px; justify-content:flex-end;
}
.count b{ color:var(--white); font-weight:500 }

.hint{
  position:absolute; left:50%; bottom:14px; transform:translateX(-50%);
  z-index:6; pointer-events:none;
  font-family:var(--mono); font-size:.6rem; letter-spacing:.18em; text-transform:uppercase;
  color:rgba(255,255,255,.42);
  transition:opacity 400ms var(--ease-out);
}
.hint.is-off{ opacity:0 }
/* "desliza" es una instrucción táctil: en escritorio manda el par de flechas */
@media(hover:hover) and (pointer:fine){ .hint{ display:none } }

@media(max-width:430px){
  .count{ display:none }
  .rig--bot{ padding:8px 12px }
}

/* =============================================================
   MOVIMIENTO REDUCIDO — se conserva el estado final, se quita el desplazamiento
   ============================================================= */
@media (prefers-reduced-motion: reduce){
  .deck.is-settling{ transition:none }
  .slide__ph,.slide__sig,.slide__copy,.win{ transform:none !important }
  .js .slide__copy > *{ opacity:1 }
  .slide.is-live .slide__copy > *,
  .slide.is-live .slide__ph img{ animation:none }
  .js .signal__core{ transform:none; opacity:1 }
  .js .signal__arcs path{ stroke-dashoffset:0 }
  .slide.is-live .signal__core,
  .slide.is-live .signal__arcs path{ animation:none }
  .rig__dot{ animation:none }
}