/* =============================================================
   AZAR PRODUCCIONES — DEMO V01
   Sistema visual: SEÑAL  ·  ver REFERENCIAS/CLAUDE_DESIGN/SISTEMA_VISUAL_SENAL.md
   Negro dominante · naranja = señal/estado · foto real manda
   ============================================================= */

/* ---------- tokens ---------- */
:root{
  --black:#1A1A1A;
  --deep:#101010;
  --panel:#202020;
  --panel-2:#262626;
  --line:rgba(255,255,255,.10);
  --line-2:rgba(255,255,255,.06);

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

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

  --s1:8px; --s2:16px; --s3:24px; --s4:32px; --s5:48px; --s6:64px; --s7:96px; --s8:128px;
  --wrap:1240px;
  --r-pill:999px; --r-tech:4px;

  --ease-out:cubic-bezier(.16,.84,.44,1);
  --dur:280ms;
}

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--black); color:var(--text);
  font-family:var(--sans); font-size:16px; line-height:1.6;
  font-variation-settings:"wdth" 100,"wght" 400;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%; display:block}
a{color:inherit}
h1,h2,h3{margin:0; line-height:1.02; text-wrap:balance}
p{margin:0}
ul,ol{margin:0; padding:0; list-style:none}
button,input,select,textarea{font:inherit; color:inherit}

: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}

.wrap{width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:20px}
@media(min-width:900px){ .wrap{padding-inline:40px} }

/* ---------- tipografía ---------- */
.h-display{
  font-size:clamp(2.35rem,8.4vw,5.05rem);
  font-variation-settings:"wdth" 90,"wght" 800;
  letter-spacing:-.022em; text-transform:uppercase; color:var(--white);
}
.h-display em{ font-style:normal; color:var(--orange); display:block }

.h-sec{
  font-size:clamp(1.85rem,5vw,3.15rem);
  font-variation-settings:"wdth" 92,"wght" 800;
  letter-spacing:-.02em; text-transform:uppercase; color:var(--white);
}

.eyebrow{
  font-family:var(--mono); font-size:.7rem; letter-spacing:.19em;
  text-transform:uppercase; color:var(--muted);
  display:flex; align-items:flex-start; gap:10px; margin-bottom:var(--s3);
}
.eyebrow .idx,.eyebrow .dot{ flex:none }
.eyebrow .idx{ color:var(--orange); font-weight:500 }
.eyebrow .dot{
  width:7px; height:7px; margin-top:.45em; border-radius:50%; background:var(--orange);
  box-shadow:0 0 0 4px rgba(242,140,31,.16);
  animation:breathe 3.4s ease-in-out infinite;
}
@keyframes breathe{ 0%,100%{opacity:1} 50%{opacity:.42} }

.lede{
  font-size:clamp(1rem,2.1vw,1.16rem); color:#BDBDBD;
  max-width:46ch; margin-top:var(--s3);
}
.sec__sub{ color:var(--muted); max-width:52ch; margin-top:var(--s3) }

/* =============================================================
   BOTONES
   ============================================================= */
.btn{
  --fill:var(--orange);
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  min-height:52px; padding:0 26px; border-radius:var(--r-pill);
  font-weight:600; font-size:.95rem; letter-spacing:.005em;
  text-decoration:none; cursor:pointer; overflow:hidden; isolation:isolate;
  border:1.5px solid var(--orange); background:transparent; color:var(--white);
  transition:transform 140ms var(--ease-out), box-shadow 200ms var(--ease-out), border-color 200ms var(--ease-out);
  -webkit-tap-highlight-color:transparent; touch-action:manipulation;
}
.btn:active{ transform:scale(.97) }   /* el botón responde al dedo */
.btn__label{ position:relative; z-index:2; display:inline-flex; align-items:center; gap:10px }
.ico-wa{ color:var(--orange); transition:color var(--dur) var(--ease-out); flex:none }

/* PULSO — masa gooey confinada al pill (D2) */
.btn__masses{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  filter:url(#gooey); opacity:0;
  transition:opacity 180ms linear;
}
.blob{
  position:absolute; left:var(--x,50%); top:var(--y,50%);
  width:64px; height:64px; margin:-32px 0 0 -32px;
  border-radius:50%; background:var(--fill);
  transform:scale(0); will-change:transform;
}
.btn.is-pulsing .btn__masses{ opacity:1 }
.btn.is-pulsing .blob--a{ transform:scale(4.2); transition:transform 260ms var(--ease-out) }
.btn.is-pulsing .blob--b{ transform:scale(3.1) translate(38px,-10px); transition:transform 300ms var(--ease-out) 40ms }
.btn.is-pulsing .btn__label{ color:#161616 }
.btn.is-pulsing .ico-wa{ color:#161616 }

.btn--ghost{ min-height:44px; padding:0 18px; font-size:.85rem; border-color:var(--line) }
.btn--solid{ background:var(--orange); color:#141414; border-color:var(--orange) }
.btn--solid .btn__label{ color:#141414 }
.btn--wide{ width:100%; }

@media(hover:hover) and (pointer:fine){
  .btn:hover{ box-shadow:0 0 0 3px rgba(242,140,31,.13) }
  .btn--ghost:hover{ border-color:var(--orange) }
}

/* enlace secundario: subrayado que se dibuja */
.link-sig{
  display:inline-flex; align-items:center; gap:12px;
  min-height:48px; padding:0 2px;
  font-weight:600; font-size:.95rem; text-decoration:none; color:var(--white);
}
.link-sig__arc path{ fill:none; stroke:var(--orange); stroke-width:1.6; stroke-linecap:square }
.link-sig__arc path:first-child{
  stroke-dasharray:30; stroke-dashoffset:16;
  transition:stroke-dashoffset var(--dur) var(--ease-out);
}
@media(hover:hover) and (pointer:fine){ .link-sig:hover .link-sig__arc path:first-child{ stroke-dashoffset:0 } }
.link-sig:focus-visible .link-sig__arc path:first-child{ stroke-dashoffset:0 }

/* =============================================================
   HEADER
   ============================================================= */
.hdr{
  position:sticky; top:0; z-index:50;
  background:rgba(16,16,16,.86); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line-2);
}
.hdr__in{
  max-width:var(--wrap); margin-inline:auto; padding:12px 20px;
  display:flex; align-items:center; gap:var(--s3);
}
@media(min-width:900px){ .hdr__in{ padding:14px 40px } }
.hdr__logo{ flex:none; line-height:0 }
/* el archivo provisional viene con fondo negro: screen lo funde con el fondo */
.hdr__logo img,.ftr__logo{ mix-blend-mode:screen }
.hdr__logo img{ width:124px; height:auto }

.nav{ display:none; margin-left:auto; gap:var(--s4) }
.nav a{
  font-size:.86rem; font-weight:500; text-decoration:none; color:#C6C6C6;
  position:relative; padding:6px 0;
}
.nav a::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1.5px;
  background:var(--orange); transform:scaleX(0); transform-origin:left;
  transition:transform 200ms var(--ease-out);
}
.nav a:focus-visible::after{ transform:scaleX(1) }
@media(hover:hover) and (pointer:fine){ .nav a:hover::after{ transform:scaleX(1) } }

.hdr__act{ margin-left:auto; display:flex; align-items:center; gap:var(--s2) }
.hdr__cta{ display:none }

.burger{
  width:44px; height:44px; display:grid; place-content:center; gap:5px;
  background:none; border:1px solid var(--line); border-radius:var(--r-tech); cursor:pointer;
}
.burger span{ display:block; width:18px; height:1.5px; background:var(--white); transition:transform 220ms var(--ease-out) }
.burger[aria-expanded="true"] span:first-child{ transform:translateY(3.25px) rotate(45deg) }
.burger[aria-expanded="true"] span:last-child{ transform:translateY(-3.25px) rotate(-45deg) }

@media(min-width:900px){
  .nav{ display:flex }
  .hdr__cta{ display:inline-flex }
  .burger{ display:none }
  .hdr__act{ margin-left:0 }
}
/* panel móvil */
@media(max-width:899px){
  .nav{
    display:flex; flex-direction:column; gap:0;
    position:fixed; inset:57px 0 auto 0; margin:0;
    background:var(--deep); border-bottom:1px solid var(--line);
    padding:var(--s2) 20px var(--s4);
    transform:translateY(-8px); opacity:0; visibility:hidden; pointer-events:none;
    transition:opacity 200ms var(--ease-out), transform 200ms var(--ease-out), visibility 200ms;
  }
  .nav.is-open{ transform:none; opacity:1; visibility:visible; pointer-events:auto }
  .nav a{ padding:14px 0; border-bottom:1px solid var(--line-2); font-size:1.05rem; color:var(--white) }
}

/* =============================================================
   OCLUSIÓN (D3) — 2 casos en toda la página
   la capa frontal es idéntica a la base: sólo recorta el arco
   ============================================================= */
.occ{ position:relative; margin:0; overflow:hidden; background:var(--deep) }
.occ__base{ width:100%; height:auto; object-fit:cover }
/* marca técnica de encuadre: esquina, no adorno */
.occ--brk::before{
  content:""; position:absolute; z-index:4; left:14px; top:14px; width:26px; height:26px;
  border-left:1px solid rgba(242,140,31,.75); border-top:1px solid rgba(242,140,31,.75);
}
/* La señal se recorta al NEGATIVO de la silueta: donde está el operador, no hay arco.
   Una sola imagen en el DOM — sin capa duplicada, sin costura por subpíxel. */
.occ__sig{
  position:absolute; inset:0; z-index:2; pointer-events:none;
  clip-path:polygon(0% 0%,100% 0%,100% 100%,31% 100%,26% 88%,20% 78%,13% 70%,
                    14% 60%,8% 52%,12% 44%,13% 32%,9% 22%,0% 22%);
}
/* silueta del operador en el encuadre apaisado de la escena sticky */
.occ--r .occ__sig{
  clip-path:polygon(0% 0%,100% 0%,100% 74%,98% 74%,86% 55%,82% 40%,70% 31%,
                    56% 30%,46% 34%,43% 50%,40% 66%,32% 84%,28% 100%,0% 100%);
}
.occ__sig .signal{ position:absolute }
.occ__cap{
  position:absolute; left:0; bottom:0; z-index:6;
  font-family:var(--mono); font-size:.66rem; letter-spacing:.14em; text-transform:uppercase;
  color:#D2D2D2; padding:10px 14px 10px 20px;
  background:linear-gradient(to top,rgba(10,10,10,.92),transparent);
  width:100%;
}

/* --- geometría de señal: arcos abiertos, nunca radial --- */
.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:.7 }
.signal__arcs path:nth-child(3){ opacity:.45 }
.signal__arcs path:nth-child(4){ opacity:.24 }
.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: el núcleo aparece y los arcos se dibujan en secuencia */
.signal__core{ transform-box:fill-box; transform-origin:center; transform:scale(.4); opacity:0 }
.signal__arcs path{ stroke-dasharray:420; stroke-dashoffset:420 }
.signal.is-live .signal__core{ animation:core-in 420ms var(--ease-out) forwards }
.signal.is-live .signal__arcs path{ animation:arc-draw 900ms var(--ease-out) forwards }
.signal.is-live .signal__arcs path:nth-child(1){ animation-delay:180ms }
.signal.is-live .signal__arcs path:nth-child(2){ animation-delay:260ms }
.signal.is-live .signal__arcs path:nth-child(3){ animation-delay:340ms }
.signal.is-live .signal__arcs path:nth-child(4){ animation-delay:420ms }
@keyframes core-in{ to{ transform:scale(1); opacity:1 } }
@keyframes arc-draw{ to{ stroke-dashoffset:0 } }

/* =============================================================
   02 · HERO
   ============================================================= */
.hero{ position:relative; padding-top:var(--s5); overflow:hidden }

.hero__media{ position:relative; margin-bottom:var(--s5) }
.hero__media{ transform-origin:70% 30%; will-change:transform }
.hero__media .occ{ width:100%; margin:0 }
.hero__media .occ__base{ aspect-ratio:1/1.12; object-position:44% 52% }

/* móvil: la foto no es un bloque aparte — se funde en el copy */
@media(max-width:899px){
  .hero{ padding-top:0 }
  .hero__media{ margin-bottom:0 }
  .hero__media .occ::after{
    background:
      linear-gradient(to top,var(--black) 0%,var(--black) 8%,rgba(26,26,26,.82) 22%,transparent 52%),
      linear-gradient(to right,rgba(16,16,16,.55),transparent 38%);
  }
  .hero__media .occ__cap{ display:none }     /* el copy ocupa esa franja */
  .hero__body{ position:relative; z-index:4; margin-top:-96px }
  .hero .h-display{ text-shadow:0 2px 26px rgba(0,0,0,.75) }
  .hero .eyebrow{ text-shadow:0 1px 12px rgba(0,0,0,.8) }
}
.hero__media .occ::after{        /* la foto emerge del negro; el texto la invade sin pelear */
  content:""; position:absolute; inset:0; z-index:5; pointer-events:none;
  background:
    linear-gradient(to right,rgba(16,16,16,.94) 0%,rgba(16,16,16,.52) 22%,transparent 47%),
    linear-gradient(to top,rgba(16,16,16,.62),transparent 38%);
}
/* núcleo sobre los botones encendidos del switcher (emisor real de la foto) */
.hero__media .occ__sig .signal{ left:34%; top:73%; width:80%; transform:translate(-50%,-50%) }

.hero__body{ max-width:var(--wrap); margin-inline:auto; padding-inline:20px }
.hero__cta{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--s3); margin-top:var(--s4) }

.hero__caps{
  display:flex; flex-wrap:wrap; gap:8px 0; margin-top:var(--s5);
  border-top:1px solid var(--line); padding-top:var(--s3);
}
.hero__caps li{
  font-family:var(--mono); font-size:.68rem; letter-spacing:.13em; text-transform:uppercase;
  color:var(--muted); padding-right:14px; margin-right:14px; border-right:1px solid var(--line);
}
.hero__caps li:last-child{ border-right:0 }

.hero__status{
  display:flex; align-items:center; gap:10px;
  max-width:var(--wrap); margin:var(--s5) auto 0; padding-inline:20px;
  font-family:var(--mono); font-size:.65rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--muted-2);
}
/* NIVEL */
.wave{ display:inline-flex; align-items:flex-end; gap:2px; height:14px }
/* scaleY, no height: se compone en GPU */
.wave i{ width:2px; height:100%; background:var(--orange);
  transform-origin:bottom; transform:scaleY(.22); animation:lvl 1.1s ease-in-out infinite }
.wave i:nth-child(2){ animation-delay:.12s } .wave i:nth-child(3){ animation-delay:.24s }
.wave i:nth-child(4){ animation-delay:.36s } .wave i:nth-child(5){ animation-delay:.48s }
.wave i:nth-child(6){ animation-delay:.6s }  .wave i:nth-child(7){ animation-delay:.72s }
@keyframes lvl{ 0%,100%{ transform:scaleY(.22) } 50%{ transform:scaleY(1) } }
.wave.is-paused i{ animation-play-state:paused }

@media(min-width:900px){
  /* perspectiva real: la foto vive en un plano Z detrás del texto */
  .hero{ padding-top:0; perspective:1400px; perspective-origin:68% 38% }

  .hero__body{
    position:relative; z-index:4; padding-top:var(--s7);
    display:grid; grid-template-columns:minmax(0,1fr) 34%; align-items:start;
  }
  .hero__body > *{ grid-column:1 }

  /* 58vw, arranca a ras del header y sangra al borde del viewport */
  .hero__media{
    position:absolute; top:0; right:0;
    width:min(58vw,980px); margin:0;
    transform-style:preserve-3d; will-change:transform;
  }
  .hero__media .occ{
    width:100%; margin:0;
    transform:translateZ(-70px) scale(1.06);   /* profundidad, no escala aparente */
    box-shadow:-40px 0 90px rgba(0,0,0,.72), -1px 0 0 rgba(242,140,31,.15);
  }
  /* encuadre elegido a mano: conserva consola, manos y multiview */
  .hero__media .occ__base{ aspect-ratio:1/1.02; object-position:46% 54% }

  /* el titular puede invadir la foto; la sombra lo sostiene sin oscurecerla */
  .hero .h-display{ text-shadow:0 2px 30px rgba(0,0,0,.62) }
  .lede{ max-width:34ch }
  .hero__caps{ max-width:40ch }
  /* el estado se ancla bajo la foto: cierra la composición por la derecha */
  .hero__status{ margin-top:var(--s5); justify-content:flex-end; padding-right:40px }
}

/* =============================================================
   SECCIONES
   ============================================================= */
.sec{ padding-block:var(--s6) }
@media(min-width:900px){ .sec{ padding-block:var(--s8) } }
.sec__head{ margin-bottom:var(--s5) }
@media(min-width:900px){ .sec__head{ margin-bottom:var(--s6); max-width:60ch } }

/* ---------- 03 · SERVICIOS (rack, no cards SaaS) ---------- */
/* =============================================================
   TRAZA DE CONTINUIDAD — la señal recorre toda la página
   ============================================================= */
.pgs{
  position:fixed; z-index:1; left:14px; top:18vh; bottom:18vh; width:1px;
  background:linear-gradient(to bottom,transparent,rgba(255,255,255,.13) 12%,rgba(255,255,255,.13) 88%,transparent);
  display:none; pointer-events:none;
}
.pgs i{
  display:block; width:100%; height:100%; background:var(--orange);
  transform:scaleY(0); transform-origin:top; will-change:transform;
}
@media(min-width:1100px){ .pgs{ display:block } }
/* las secciones con fondo propio la tapan: aparece, desaparece y reaparece */
.sec--opx,.sec--form,.ftr{ position:relative; z-index:2 }

/* =============================================================
   03 · SERVICIOS — canales de señal
   ============================================================= */
.sec--svc{ background:var(--deep); border-block:1px solid var(--line-2) }
.chs__wrap{ will-change:transform }
.chs{
  position:relative; perspective:900px;
  border-top:1px solid var(--line);
}
.ch{
  position:relative; display:grid; align-items:start;
  grid-template-columns:auto 1fr; column-gap:var(--s3);
  padding:var(--s3) 0 var(--s3) var(--s3);
  border-bottom:1px solid var(--line);
  opacity:0; transform:translate3d(0,20px,-90px);
  transition:opacity 420ms var(--ease-out), transform 480ms var(--ease-out);
}
html:not(.js) .ch{ opacity:1; transform:none }
.chs.is-live .ch{ opacity:1; transform:none }
.chs.is-live .ch:nth-child(1){ transition-delay:0ms }
.chs.is-live .ch:nth-child(2){ transition-delay:55ms }
.chs.is-live .ch:nth-child(3){ transition-delay:110ms }
.chs.is-live .ch:nth-child(4){ transition-delay:165ms }
.chs.is-live .ch:nth-child(5){ transition-delay:220ms }
.chs.is-live .ch:nth-child(6){ transition-delay:275ms }
.chs.is-live .ch:nth-child(7){ transition-delay:330ms }
.chs.is-live .ch:nth-child(8){ transition-delay:385ms }

/* la señal recorre el canal de izquierda a derecha cuando el canal se activa */
.ch::after{
  content:""; position:absolute; left:0; right:0; bottom:-1px; height:1px;
  background:linear-gradient(to right,var(--orange),rgba(242,140,31,.15));
  transform:scaleX(0); transform-origin:left;
  transition:transform 520ms var(--ease-out);
}
.chs.is-live .ch::after{ transform:scaleX(1) }
.chs.is-live .ch:nth-child(2)::after{ transition-delay:55ms }
.chs.is-live .ch:nth-child(3)::after{ transition-delay:110ms }
.chs.is-live .ch:nth-child(4)::after{ transition-delay:165ms }
.chs.is-live .ch:nth-child(5)::after{ transition-delay:220ms }
.chs.is-live .ch:nth-child(6)::after{ transition-delay:275ms }
.chs.is-live .ch:nth-child(7)::after{ transition-delay:330ms }
.chs.is-live .ch:nth-child(8)::after{ transition-delay:385ms }

/* nodo que recibe la señal */
.ch__node{
  position:absolute; left:-5px; top:calc(var(--s3) + 6px);
  width:11px; height:11px; border-radius:50%;
  background:var(--panel); border:1px solid var(--line);
  transition:background 320ms var(--ease-out), border-color 320ms var(--ease-out),
             box-shadow 320ms var(--ease-out);
}
.chs.is-live .ch__node{
  background:var(--orange); border-color:var(--orange);
  box-shadow:0 0 0 4px rgba(242,140,31,.15);
}
.ch__n{
  font-family:var(--mono); font-size:.7rem; color:var(--muted-2);
  padding-top:3px; transition:color 320ms var(--ease-out);
}
.chs.is-live .ch__n{ color:var(--orange) }
.ch__b h3{
  font-size:1.16rem; color:var(--white); letter-spacing:-.01em;
  font-variation-settings:"wdth" 96,"wght" 700;
}
.ch__b p{ color:var(--muted); font-size:.93rem; margin-top:6px; max-width:52ch }
@media(min-width:820px){
  .chs{ display:grid; grid-template-columns:1fr 1fr; column-gap:var(--s7) }
  .ch:nth-child(odd){ border-right:0 }
}

/* ---------- 04 · OPERACIÓN — escena sticky en Z ----------
   .opx es el riel de scroll; .opx__sticky es la escena fija.
   El progreso 0→1 mueve tres planos reales en Z: SEÑAL → OPERACIÓN → RESULTADO. */
.sec--opx{ background:var(--black); border-block:1px solid var(--line-2) }
.opx{ position:relative; height:300vh }
.opx__sticky{
  position:sticky; top:0; height:100vh; overflow:hidden;
  display:flex; flex-direction:column; justify-content:center;
  perspective:1100px; perspective-origin:60% 45%;
}

/* progreso de scroll: barra técnica, no adorno */
.opx__bar{
  position:absolute; left:0; right:0; top:0; height:2px;
  background:rgba(255,255,255,.07); z-index:5;
}
.opx__bar i{
  display:block; height:100%; width:100%; background:var(--orange);
  transform:scaleX(0); transform-origin:left; will-change:transform;
}

.opx__in{
  width:100%; max-width:var(--wrap); margin-inline:auto; padding:0 20px;
  display:grid; gap:var(--s4); align-items:center;
}
@media(min-width:960px){
  .opx__in{ grid-template-columns:41% 1fr; gap:var(--s7); padding-inline:40px }
}

.opx__copy{ position:relative; z-index:3 }
.opx__copy .sec__sub{ max-width:38ch }

/* pasos: línea de señal cuyo avance es el propio scroll */
.opx__steps{ margin-top:var(--s5); position:relative; padding-left:var(--s4) }
.opx__steps::before{
  content:""; position:absolute; left:5px; top:8px; bottom:8px; width:1px; background:var(--line);
}
.opx__step{ position:relative; padding-bottom:var(--s4) }
.opx__step:last-child{ padding-bottom:0 }
.opx__step::before{                                  /* nodo */
  content:""; position:absolute; left:-31px; top:7px; width:11px; height:11px;
  border-radius:50%; background:var(--panel); border:1px solid var(--line);
  transition:background 260ms var(--ease-out), border-color 260ms var(--ease-out),
             box-shadow 260ms var(--ease-out), transform 260ms var(--ease-out);
}
.opx__step.is-on::before{
  background:var(--orange); border-color:var(--orange);
  box-shadow:0 0 0 5px rgba(242,140,31,.16); transform:scale(1.15);
}
.opx__n{ font-family:var(--mono); font-size:.68rem; color:var(--muted-2); letter-spacing:.12em;
  transition:color 260ms var(--ease-out) }
.opx__step.is-on .opx__n{ color:var(--orange) }
.opx__step h3{
  font-size:1.05rem; color:#7E7E7E; margin-top:2px;
  font-variation-settings:"wdth" 96,"wght" 700; text-transform:uppercase; letter-spacing:.01em;
  transition:color 260ms var(--ease-out);
}
.opx__step.is-on h3{ color:var(--white) }
.opx__step p{ color:var(--muted-2); font-size:.92rem; margin-top:4px; max-width:38ch;
  transition:color 260ms var(--ease-out) }
.opx__step.is-on p{ color:var(--muted) }

/* escena: los tres planos ocupan la misma caja y viajan en Z */
.opx__scene{
  position:relative; transform-style:preserve-3d;
  height:44vh; min-height:280px;
}
@media(min-width:960px){ .opx__scene{ height:66vh; min-height:420px } }

.opx__ph{
  position:absolute; inset:0; margin:0; overflow:hidden;
  border-radius:var(--r-tech); background:var(--deep);
  will-change:transform,opacity; backface-visibility:hidden;
  box-shadow:0 30px 70px rgba(0,0,0,.6);
}
.js .opx__ph{ opacity:0 }        /* el JS gobierna la visibilidad desde el primer frame */
.opx__ph img{ width:100%; height:100%; object-fit:cover; object-position:50% 45% }
.opx__ph figcaption{
  position:absolute; left:0; right:0; bottom:0; z-index:6; padding:12px 16px;
  font-family:var(--mono); font-size:.64rem; letter-spacing:.16em; text-transform:uppercase;
  color:#D6D6D6; background:linear-gradient(to top,rgba(10,10,10,.92),transparent);
}
/* núcleo sobre la consola (fuente real); propaga a la derecha y el operador lo ocluye */
.opx__ph.occ .occ__sig .signal{ left:14%; top:78%; width:110%; transform:translate(-50%,-50%) }

/* móvil: la escena debe caber entera en 100vh, si no se corta arriba y abajo */
@media(max-width:959px){
  .opx__in{ gap:var(--s3); align-content:center }
  .opx__copy .eyebrow{ margin-bottom:var(--s2) }
  .opx__copy .h-sec{ font-size:clamp(1.5rem,6.2vw,2rem) }
  .opx__copy .sec__sub{ display:none }        /* el titular y los pasos ya lo dicen */
  .opx__steps{ margin-top:var(--s3); padding-left:26px }
  .opx__step{ padding-bottom:var(--s2) }
  .opx__step::before{ left:-26px; top:5px; width:9px; height:9px }
  .opx__step h3{ font-size:.95rem }
  .opx__step p{ font-size:.84rem; margin-top:2px }
  .opx__scene{ height:36vh; min-height:210px }
}

/* sin JS o con movimiento reducido: los tres planos se leen en fila, sin riel */
html:not(.js) .opx, .opx--flat{ height:auto }
html:not(.js) .opx__sticky, .opx--flat .opx__sticky{
  position:static; height:auto; padding-block:var(--s6); perspective:none;
}
html:not(.js) .opx__scene, .opx--flat .opx__scene{
  height:auto; min-height:0; display:grid; gap:var(--s2); grid-template-columns:repeat(3,1fr);
}
html:not(.js) .opx__ph, .opx--flat .opx__ph{
  position:relative; inset:auto; aspect-ratio:3/4; opacity:1; transform:none;
}
html:not(.js) .opx__step h3, .opx--flat .opx__step h3{ color:var(--white) }
html:not(.js) .opx__step p, .opx--flat .opx__step p{ color:var(--muted) }
html:not(.js) .opx__bar, .opx--flat .opx__bar{ display:none }

/* ---------- 05 · SOLUCIONES ---------- */
.sec--sol{ background:var(--deep); border-block:1px solid var(--line-2) }
/* =============================================================
   05 · SOLUCIONES — ENSAMBLAJE DE SEÑAL
   El scroll conduce una cámara virtual que atraviesa la escena:
   se aproxima a A, la deja atrás, alcanza B, encuentra C y al final
   los tres módulos se recomponen como un sistema armado.
   ============================================================= */
.sec--asm{ background:var(--deep); border-block:1px solid var(--line-2); position:relative; z-index:2 }
.asm{ position:relative; height:280vh }
@media(min-width:900px){ .asm{ height:380vh } }
.asm__sticky{
  position:sticky; top:0; height:100vh; overflow:hidden;
  display:grid; grid-template-rows:auto 1fr;
}
.asm__hud{
  position:relative; z-index:6; pointer-events:none;
  max-width:var(--wrap); margin-inline:auto; width:100%;
  padding:var(--s5) 20px 0;
}
@media(min-width:900px){ .asm__hud{ padding:var(--s6) 40px 0 } }
.asm__hud .h-sec{ font-size:clamp(1.6rem,4.4vw,2.9rem) }
.asm__phase{
  margin-top:var(--s3); font-family:var(--mono); font-size:.66rem;
  letter-spacing:.2em; text-transform:uppercase; color:var(--orange);
}
.asm__phase span::before{ content:"▸ "; opacity:.7 }

/* la escena 3D */
.asm__scene{
  position:relative; perspective:900px; perspective-origin:50% 46%;
  transform-style:preserve-3d;
}
.asm__bar{ position:absolute; left:0; right:0; top:0; height:2px; background:rgba(255,255,255,.07); z-index:7 }
.asm__bar i{ display:block; height:100%; background:var(--orange);
  transform:scaleX(0); transform-origin:left; will-change:transform }

/* nomenclatura técnica: capas que pasan de largo */
.asm__amb{
  position:absolute; z-index:2; white-space:nowrap; opacity:0;
  font-family:var(--mono); font-size:.7rem; letter-spacing:.22em;
  text-transform:uppercase; color:rgba(255,255,255,.34);
  will-change:transform,opacity; pointer-events:none;
}
.asm__rule{
  position:absolute; z-index:1; width:100%; height:1px; opacity:0;
  background:linear-gradient(to right,transparent,rgba(242,140,31,.5) 30%,rgba(242,140,31,.5) 70%,transparent);
  will-change:transform,opacity; pointer-events:none;
}

/* módulos: forma distinta según función */
.asm__m{
  position:absolute; left:50%; top:50%; z-index:3; opacity:0;
  margin:0; padding:var(--s3);
  background:linear-gradient(180deg,rgba(34,34,34,.97),rgba(20,20,20,.97));
  border:1px solid var(--line); border-radius:var(--r-tech);
  box-shadow:0 30px 70px rgba(0,0,0,.66);
  will-change:transform,opacity; backface-visibility:hidden;
}
.asm__m--a{ width:min(660px,86%) }                    /* plano horizontal: la sala */
.asm__m--b{ width:min(470px,78%) }                    /* módulo monitor */
.asm__m--c{ width:min(330px,64%) }                    /* módulo vertical tipo rack */
.asm__mh{ display:flex; align-items:baseline; gap:12px; margin-bottom:10px }
.asm__k{ font-family:var(--mono); font-size:1.7rem; line-height:1; color:var(--orange) }
.asm__tag{
  font-family:var(--mono); font-size:.6rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--muted-2);
}
.asm__m h3{
  font-size:1.05rem; color:var(--white); text-transform:uppercase; letter-spacing:.005em;
  font-variation-settings:"wdth" 94,"wght" 700;
}
.asm__m > p{ color:var(--muted); font-size:.88rem; margin-top:8px }
.asm__m ul{ display:flex; flex-wrap:wrap; gap:6px; margin-top:var(--s3);
  border-top:1px solid var(--line); padding-top:var(--s3) }
.asm__m li{
  font-family:var(--mono); font-size:.62rem; letter-spacing:.1em; text-transform:uppercase;
  color:#B4B4B4; border:1px solid var(--line); border-radius:var(--r-pill); padding:3px 9px;
}
/* canto que recibe la luz cuando la señal está encima */
.asm__edge{
  position:absolute; inset:-1px; border-radius:inherit; pointer-events:none;
  box-shadow:inset 0 0 0 1px var(--orange), 0 0 26px rgba(242,140,31,.16);
  opacity:0; transition:opacity 320ms var(--ease-out);
}
.asm__m.is-lit .asm__edge{ opacity:1 }

/* B: rejilla multiview */
.asm__mv{
  display:grid; grid-template-columns:repeat(3,1fr); gap:4px; margin-bottom:var(--s3);
}
.asm__mv i{
  aspect-ratio:16/10; display:grid; place-content:center;
  background:#141414; border:1px solid var(--line); border-radius:2px;
  font-family:var(--mono); font-size:.5rem; letter-spacing:.14em; color:#6F6F6F;
}
.asm__mv i:nth-child(1){ border-color:rgba(255,255,255,.22); color:#B9B9B9 }
.asm__mv i:nth-child(2){ border-color:rgba(242,140,31,.65); color:var(--amber) }
/* C: slots de rack */
.asm__slots{ display:grid; gap:4px; margin-bottom:var(--s3) }
.asm__slots i{
  height:13px; border:1px solid var(--line); border-radius:2px;
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.05) 0 2px,transparent 2px 6px);
}
.asm__slots i:nth-child(2){ border-color:rgba(242,140,31,.5) }

/* la señal recorre el circuito */
.asm__sig{
  position:absolute; inset:0; width:100%; height:100%; z-index:5;
  pointer-events:none; overflow:visible;
}
/* sin vector-effect: con preserveAspectRatio="none" el non-scaling-stroke
   calcula los guiones en espacio de dispositivo y descuadra el dash */
.asm__route{
  fill:none; stroke:var(--orange); stroke-width:2; stroke-linecap:round;
  stroke-dasharray:1000; stroke-dashoffset:1000;   /* estado base: sin dibujar */
  /* sin drop-shadow: el dash se anima cada frame y el filtro obliga a
     repintar toda la región filtrada */
}

/* móvil: menos planos, mismo recorrido */
@media(max-width:899px){
  .asm__hud{ padding-top:var(--s4) }
  .asm__amb:nth-of-type(n+6){ display:none }
  .asm__m{ padding:var(--s2) }
  .asm__m h3{ font-size:.95rem }
  .asm__m > p{ font-size:.82rem }
  .asm__mv{ grid-template-columns:repeat(3,1fr) }
  /* en el frame final A y C se compactan a placa: si no, no caben legibles */
  .asm--fin .asm__m--a > p, .asm--fin .asm__m--a ul,
  .asm--fin .asm__m--c > p, .asm--fin .asm__m--c ul,
  .asm--fin .asm__m--c .asm__slots{ display:none }
}

/* sin JS o con movimiento reducido: FRAME FINAL compacto, sin riel */
html:not(.js) .asm, .asm--flat{ height:auto }
html:not(.js) .asm__sticky, .asm--flat .asm__sticky{
  position:static; height:auto; padding-bottom:var(--s6);
}
html:not(.js) .asm__scene, .asm--flat .asm__scene{
  perspective:none; display:grid; gap:var(--s3);
  padding:var(--s5) 20px 0; max-width:var(--wrap); margin-inline:auto;
}
@media(min-width:900px){
  html:not(.js) .asm__scene, .asm--flat .asm__scene{
    grid-template-columns:1.15fr .95fr .7fr; align-items:start; padding-inline:40px;
  }
}
html:not(.js) .asm__m, .asm--flat .asm__m{
  position:relative; left:auto; top:auto; width:auto; opacity:1; transform:none;
}
html:not(.js) .asm__amb, .asm--flat .asm__amb,
html:not(.js) .asm__rule, .asm--flat .asm__rule,
html:not(.js) .asm__sig, .asm--flat .asm__sig,
html:not(.js) .asm__bar, .asm--flat .asm__bar{ display:none }

/* =============================================================
   06 · TRABAJOS — galería inmersiva
   ============================================================= */
.galx{ display:grid; gap:var(--s4) }
.galx__vp{ position:relative; overflow:hidden; height:100%; border-radius:var(--r-tech) }
.galx__vp img{
  width:100%; height:118%; object-fit:cover; display:block;
  filter:saturate(.9) brightness(.88) contrast(1.05);
  will-change:transform;
}
.galx figcaption{
  position:absolute; left:0; right:0; bottom:0; z-index:3; padding:16px 18px;
  background:linear-gradient(to top,rgba(10,10,10,.94),rgba(10,10,10,.45) 55%,transparent);
  display:flex; flex-direction:column; gap:3px;
}
.galx figcaption b{ font-size:.98rem; color:var(--white); font-variation-settings:"wdth" 96,"wght" 700 }
.galx figcaption span{
  font-family:var(--mono); font-size:.62rem; letter-spacing:.13em;
  text-transform:uppercase; color:var(--orange);
}
.galx__hero,.galx__i{
  position:relative; margin:0; overflow:hidden;
  border-radius:var(--r-tech); background:var(--deep);
  box-shadow:0 24px 60px rgba(0,0,0,.5);
}
/* medidas por proporción, no por vh: predecible y sin salto de layout */
.galx__hero{ aspect-ratio:5/4 }
@media(min-width:900px){
  .galx{ gap:var(--s6) }
  .galx__hero{
    aspect-ratio:1220/700;
    width:calc(100% + 80px); margin-left:-40px;    /* sale del contenedor */
  }
}
.galx__pair,.galx__trio{ display:grid; gap:var(--s3) }
.galx__i{ aspect-ratio:4/5 }
@media(min-width:900px){
  .galx__pair{ grid-template-columns:1.28fr .72fr; gap:var(--s4); align-items:start }
  .galx__i--l{ aspect-ratio:5/4 }
  .galx__i--r{ aspect-ratio:3/4; margin-top:var(--s7) }   /* asimetría vertical */
  .galx__trio{ grid-template-columns:1fr 1fr 1fr; gap:var(--s4); align-items:start }
  .galx__trio .galx__i{ aspect-ratio:4/5 }
  .galx__i--drop{ margin-top:var(--s6) }
}
/* capa: la pieza chica monta sobre la ancha */
.galx__stack{ position:relative; display:grid; gap:var(--s3) }
@media(min-width:900px){
  .galx__stack{ display:block; padding-bottom:var(--s7) }
  .galx__i--wide{ aspect-ratio:16/10; width:76% }
  .galx__i--over{
    position:absolute; right:0; bottom:0; z-index:4;
    width:36%; aspect-ratio:3/4; margin:0;
    box-shadow:0 30px 70px rgba(0,0,0,.72), 0 0 0 1px rgba(242,140,31,.18);
  }
}
.galx__more{
  display:flex; flex-direction:column; justify-content:center; gap:10px;
  border:1px solid var(--line); border-top:1px solid rgba(242,140,31,.35);
  border-radius:var(--r-tech);
  padding:var(--s5) var(--s4); background:var(--panel); text-decoration:none;
}
@media(min-width:900px){
  .galx__more{ flex-direction:row; align-items:baseline; gap:var(--s4); padding:var(--s5) }
}
.galx__more b{ font-size:1.1rem; color:var(--white); font-variation-settings:"wdth" 96,"wght" 700 }
.galx__more span{ font-family:var(--mono); font-size:.66rem; letter-spacing:.13em;
  text-transform:uppercase; color:var(--orange) }
@media(hover:hover) and (pointer:fine){
  .galx__more:hover{ border-color:rgba(242,140,31,.5) }
}

/* ---------- 06 · TRABAJOS ---------- */
.gal{ display:grid; gap:12px; grid-template-columns:repeat(2,1fr) }
.gal__i{ position:relative; margin:0; overflow:hidden; border-radius:var(--r-tech); background:var(--deep) }
/* grado fijo: unifica material de distintas cámaras y luces. No se anima
   (filter en imagen grande = repintado caro); el hover mueve transform. */
.gal__i img{
  width:100%; height:100%; object-fit:cover;
  filter:saturate(.88) brightness(.86) contrast(1.06);
}
.gal__i::after{                        /* canto de señal al enfocar */
  content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  border:1px solid var(--orange); border-radius:inherit; opacity:0;
  transition:opacity 200ms var(--ease-out);
}
.gal__i:focus-within::after{ opacity:.9 }
@media(hover:hover) and (pointer:fine){
  .gal__i:hover::after{ opacity:.9 }
  .js .gal__i.is-live:hover img{ transform:scale(1.045) }
}
/* el reveal sólo existe si hay JS: sin JS la foto se ve igual */
.js .gal__i img{
  opacity:0;
  transition:opacity 480ms var(--ease-out), transform 420ms var(--ease-out);
}
.js .gal__i.is-live img{ opacity:1 }
.gal__i figcaption{
  position:absolute; inset:auto 0 0 0; padding:14px 14px 12px;
  background:linear-gradient(to top,rgba(10,10,10,.94),rgba(10,10,10,.55) 55%,transparent);
  display:flex; flex-direction:column; gap:2px;
}
.gal__i figcaption b{
  font-size:.9rem; font-variation-settings:"wdth" 96,"wght" 700; color:var(--white);
}
.gal__i figcaption span{
  font-family:var(--mono); font-size:.62rem; letter-spacing:.11em;
  text-transform:uppercase; color:var(--orange);
}
.gal__i--tall{ grid-column:span 2 }

.gal__more{
  grid-column:span 2; display:flex; flex-direction:column; justify-content:center; gap:10px;
  border:1px solid var(--line); border-radius:var(--r-tech); padding:var(--s4) var(--s3);
  background:var(--panel); text-decoration:none;
}
.gal__more b{ font-size:1.05rem; color:var(--white); font-variation-settings:"wdth" 96,"wght" 700 }
.gal__more span{ font-family:var(--mono); font-size:.66rem; letter-spacing:.13em;
  text-transform:uppercase; color:var(--orange) }

/* retícula 4×3 exacta: 1 pieza ancla de 2×2 + 7 fotos + enlace = 12 celdas */
@media(min-width:900px){
  .gal{ grid-template-columns:repeat(4,1fr); grid-auto-rows:262px; gap:16px }
  .gal__i{ grid-column:span 1; grid-row:span 1 }
  .gal__i--tall{ grid-column:span 2; grid-row:span 2 }
  .gal__more{ grid-column:span 1 }
}

/* ---------- 07 · COTIZACIÓN ---------- */
.sec--form{ background:var(--deep); border-top:1px solid var(--line-2) }
.frm{ display:grid; gap:var(--s6) }
@media(min-width:960px){ .frm{ grid-template-columns:38% 1fr; gap:var(--s7); align-items:start } }
.frm__side .btn{ margin-top:var(--s4) }
.frm__wa{
  font-family:var(--mono); font-size:.72rem; letter-spacing:.1em; color:var(--muted);
  margin-top:var(--s3);
}
.frm__wa a{ color:var(--orange); text-decoration:none }

.frm__form{
  background:var(--panel); border:1px solid var(--line);
  border-radius:var(--r-tech); padding:var(--s3);
  display:grid; gap:var(--s3);
}
@media(min-width:600px){ .frm__form{ padding:var(--s4) } }

.demo-note{
  font-size:.8rem; color:#C9C9C9; background:rgba(242,140,31,.09);
  border-left:2px solid var(--orange); padding:10px 14px; border-radius:0 var(--r-tech) var(--r-tech) 0;
}
.demo-note b{ color:var(--amber) }

.f-row{ display:grid; gap:var(--s3) }
@media(min-width:600px){ .f-row{ grid-template-columns:1fr 1fr } }
.f{ display:grid; gap:7px; border:0; padding:0; margin:0; min-width:0 }
.f label,.f legend{
  font-family:var(--mono); font-size:.68rem; letter-spacing:.13em;
  text-transform:uppercase; color:var(--muted); padding:0;
}
.req{ color:var(--orange) }
.f input,.f select,.f textarea{
  min-height:48px; width:100%; padding:12px 14px;
  background:var(--deep); border:1px solid var(--line); border-radius:var(--r-tech);
  color:var(--white); font-size:1rem;
  transition:border-color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.f textarea{ min-height:112px; resize:vertical; line-height:1.5 }
.f input:focus,.f select:focus,.f textarea:focus{
  outline:0; border-color:var(--orange); box-shadow:0 0 0 3px rgba(242,140,31,.14);
}
.f input[aria-invalid="true"]{ border-color:#E4573D }
.help{ font-size:.76rem; color:var(--muted-2) }
.f-err{ font-size:.78rem; color:#F08A72 }

.chips{ display:flex; flex-wrap:wrap; gap:8px }
.chip{ position:relative }
.chip input{ position:absolute; opacity:0; width:1px; height:1px }
.chip span{
  display:inline-flex; align-items:center; min-height:44px; padding:0 16px;
  border:1px solid var(--line); border-radius:var(--r-pill);
  font-size:.86rem; color:#C4C4C4; cursor:pointer;
  transition:border-color 200ms var(--ease-out), color 200ms var(--ease-out), background 200ms var(--ease-out);
}
.chip input:checked + span{ border-color:var(--orange); color:var(--white); background:rgba(242,140,31,.14) }
.chip input:focus-visible + span{ outline:2px solid var(--orange); outline-offset:3px }

.frm__out{ font-size:.88rem; color:var(--amber); min-height:1.2em }

/* ---------- 08 · CIERRE ---------- */
.ftr{ background:var(--black); border-top:1px solid var(--line); padding-top:var(--s6) }
.ftr__in{ display:grid; gap:var(--s4); align-items:end }
@media(min-width:820px){ .ftr__in{ grid-template-columns:auto 1fr auto } }
.ftr__logo{ width:150px; height:auto }
.ftr__claim{
  font-size:clamp(1.15rem,2.6vw,1.5rem); color:var(--white);
  font-variation-settings:"wdth" 94,"wght" 700; text-transform:uppercase;
  letter-spacing:-.01em; line-height:1.15;
}
.ftr__claim span{ color:var(--orange) }
.ftr__meta{ font-family:var(--mono); font-size:.7rem; letter-spacing:.1em; color:var(--muted); line-height:2 }
.ftr__meta a{ color:#C7C7C7; text-decoration:none }
.ftr__demo{
  margin-top:var(--s5); padding:var(--s3) 20px; border-top:1px solid var(--line-2);
  font-family:var(--mono); font-size:.63rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--muted-2); text-align:center;
}

/* =============================================================
   WHATSAPP FIJO
   ============================================================= */
.wa-fix{
  position:fixed; z-index:45;
  right:16px; bottom:calc(16px + env(safe-area-inset-bottom,0px));
  display:inline-flex; align-items:center; justify-content:center;
  min-height:52px; padding:0 22px; border-radius:var(--r-pill);
  background:var(--orange); color:#141414; border:0;
  font-weight:700; font-size:.92rem; text-decoration:none;
  box-shadow:0 8px 26px rgba(0,0,0,.55);
  opacity:0; transform:translateY(10px); pointer-events:none;
  transition:opacity 220ms var(--ease-out), transform 220ms var(--ease-out);
}
/* sin gooey aquí: el acento de masa es único y vive en el CTA del hero */
.wa-fix .btn__label{ display:inline-flex; align-items:center; gap:9px; color:#141414 }
.wa-fix.is-on{ opacity:1; transform:none; pointer-events:auto }
.wa-fix:active{ transform:scale(.97) }
@media(min-width:900px){ .wa-fix{ right:28px; bottom:28px } }

/* =============================================================
   ATENUACIÓN — entrada de secciones
   ============================================================= */
.js [data-rise]{ opacity:0; transform:translateY(16px);
  transition:opacity 380ms var(--ease-out), transform 380ms var(--ease-out) }
.js [data-rise].is-live{ opacity:1; transform:none }

/* =============================================================
   REDUCED MOTION
   ============================================================= */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important;
  }
  .js [data-rise]{ opacity:1; transform:none }
  .ch{ opacity:1; transform:none }
  [data-par]{ transform:none !important }
  .solx__wire path{ stroke-dashoffset:0 }
  .pgs{ display:none }
  /* el WhatsApp fijo NO se fuerza visible: sigue gobernado por .is-on */
  .wa-fix{ transform:none }
  .signal__arcs path{ stroke-dashoffset:0 }
  .signal__core{ transform:scale(1); opacity:1 }
  .spine::after{ transform:scaleY(1) }
  .spine .spine__s::before{ background:var(--orange); border-color:var(--orange) }
  .wave i{ height:60% }
}