/* #contacto · cierre cinematográfico (Creation of Adam / Motionsites scrub).
   Film locked: texto siempre blanco; light no aclara el stage. */

.signal{
  --signal-bg:#1c1c1c;
  --signal-ink:#ecebe8;
  --signal-dim:rgba(236,235,232,.42);
  --signal-soft:rgba(236,235,232,.62);
  --signal-line:rgba(236,235,232,.42);
  --signal-k:clamp(.8px, min(100vw / 1440, 100vh / 960), 1.6px);
  position:relative;
  z-index:3;
  width:100%;
  max-width:100%;
  height:100vh;
  height:100svh;
  min-height:560px;
  overflow:hidden;
  isolation:isolate;
  background:var(--signal-bg);
  color:var(--signal-ink);
  font-family:"Geist Sans",Geist,system-ui,sans-serif;
  /* El stage 16:9 es más ancho que el viewport; no debe empujar el scroll X */
  contain:paint;
}

.signal__noise{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
  z-index:0;
  pointer-events:none;
}

.signal__stage{
  position:absolute;left:0;top:0;
  z-index:1;
  pointer-events:none;
}
.signal__reach{
  /* Malla de cuadros: rojo del clip → naranja marca #FF6600. */
  --signal-hand-hue:24deg;
  display:block;
  width:100%;height:100%;
  mix-blend-mode:lighten;
  filter:
    hue-rotate(var(--signal-hand-hue))
    saturate(1.22)
    brightness(1.03);
}

.signal__ui{
  z-index:41;
  pointer-events:none;
}
.signal__touch{
  position:absolute;
  left:47.2%;top:42.5%;
  width:0;height:0;
}

/* Botón central: sobre / formulario.
   Anclado al origen de .signal__touch con translate(-50%,-50%).
   Así el centro coincide con el copy aunque el tamaño cambie en móvil. */
.signal__play{
  --signal-play-size:calc(var(--u) * 60);
  position:absolute;
  left:0;
  top:0;
  width:var(--signal-play-size);
  height:var(--signal-play-size);
  border-radius:50%;
  border:1px solid rgba(255,255,255,.28);
  cursor:pointer;
  pointer-events:auto;
  background:rgba(18,18,18,.42);
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
  display:grid;
  place-items:center;
  color:#fff;
  padding:0;
  transform:translate(-50%, -50%);
  box-shadow:
    0 0 0 1px rgba(255,102,0,.0),
    0 12px 36px -18px rgba(0,0,0,.65);
  transition:
    background-color .35s ease,
    border-color .35s ease,
    color .35s ease,
    box-shadow .35s ease,
    transform .35s cubic-bezier(.16,1,.3,1);
  -webkit-appearance:none;
  appearance:none;
}
.signal__ico{
  width:calc(var(--u) * 22);
  height:calc(var(--u) * 22);
  display:block;
}
.signal__play.is-hot{
  background:rgba(236,235,232,.94);
  border-color:rgba(236,235,232,.94);
  color:#1a1b1d;
  box-shadow:
    0 0 0 1px rgba(255,102,0,.55),
    0 18px 42px -20px rgba(0,0,0,.7);
  transform:translate(-50%, -50%) scale(1.04);
}
.signal__play:hover{
  border-color:rgba(255,102,0,.7);
  box-shadow:
    0 0 0 1px rgba(255,102,0,.35),
    0 14px 40px -18px rgba(0,0,0,.7);
}
.signal__play:focus-visible{
  outline:2px solid var(--orange,#FF6600);
  outline-offset:4px;
}

/* Jerarquía tipográfica bajo el hueco de las manos */
.signal__copy{
  position:absolute;
  left:0;
  top:calc(var(--u) * 44);
  transform:translateX(-50%);
  width:min(92vw, calc(var(--u) * 420));
  margin:0;
  text-align:center;
  pointer-events:none;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:calc(var(--u) * 10);
}
.signal__mark{
  left:50%;
  right:auto;
  top:-.42em;
  transform:translateX(-50%);
  font-size:clamp(64px, 11vw, 128px);
  color:rgba(236,235,232,.07);
}
.signal__eyebrow{
  margin:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:calc(var(--u) * 8);
  font:650 calc(var(--u) * 11)/1 "Geist Sans",system-ui,sans-serif;
  letter-spacing:.22em;
  /* Anula el tracking fantasma tras la última letra (centrado óptico). */
  margin-inline-end:-.22em;
  text-transform:uppercase;
  color:var(--signal-soft);
}
.signal__eyebrow::before{
  content:"";
  display:block;
  width:calc(var(--u) * 28);
  height:2px;
  background:var(--orange,#FF6600);
  /* La marca no recibe el margen negativo del tracking. */
  margin-inline-end:.22em;
}
.signal__title{
  margin:0;
  max-width:14ch;
  font:650 calc(var(--u) * 34)/1.08 "Geist Sans",system-ui,sans-serif;
  letter-spacing:-.04em;
  color:#fff;
  text-wrap:balance;
}
.signal__lead{
  margin:0;
  max-width:34ch;
  font:400 calc(var(--u) * 14.5)/1.45 "Geist Sans",system-ui,sans-serif;
  letter-spacing:-.01em;
  color:var(--signal-soft);
  text-wrap:pretty;
}
.signal__hint{
  margin:calc(var(--u) * 4) 0 0;
  font:500 calc(var(--u) * 10.5)/1.3 "Geist Sans",system-ui,sans-serif;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--signal-dim);
}

[data-theme="light"] .signal,
[data-theme="light"] .signal__title{
  color:#fff;
}

@media (max-width:900px){
  .signal{overflow:hidden}
  .signal__copy{padding-inline:clamp(18px, 4vw, 28px)}
}
@media (max-width:767px){
  .signal{--signal-k:1px;min-height:min(560px, 88svh)}
  .signal__title{
    font-size:clamp(28px, 8vw, 40px);
    letter-spacing:-.04em;
    max-width:14ch;
  }
  .signal__lead{font-size:clamp(14px, 3.6vw, 16px);max-width:34ch}
  .signal__hint{display:none}
  .signal__play{
    --signal-play-size:min(72px, 18vw);
  }
}

@media (prefers-reduced-motion:reduce){
  .signal__noise{display:none}
  .signal__play{transition:none}
}