/* ════════════════════════════════════════════════════════════════
   GRUPO CISPE — Hero acordeón cinemático
   Todas las clases van con prefijo .hx- para no chocar con el sitio.
   Usar junto a Tailwind (preflight desactivado) para utilidades de layout.
   ════════════════════════════════════════════════════════════════ */

.hx-hero { --hx-navpad: 0px; }
.hx-hero.hx-embedded { --hx-navpad: clamp(72px, 9vh, 104px); }
.hx-hero, .hx-hero * { box-sizing: border-box; }

.hx-mono { font-family: "JetBrains Mono", monospace; }
.hx-vtext { writing-mode: vertical-rl; text-orientation: mixed; }

/* film grain / scanlines over media */
.hx-scan::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(0,0,0,0) 0 2px, rgba(0,0,0,.22) 2px 3px);
  mix-blend-mode: multiply; opacity: .5;
}

/* ── panel base ── */
.hx-panel {
  position: relative; height: 100%;
  flex-grow: var(--g, 1); flex-basis: 0; flex-shrink: 1;
  min-width: 38px; overflow: hidden; cursor: pointer;
  border: 1px solid rgba(122,131,138,.16);
  transition: flex-grow 1050ms cubic-bezier(.76,0,.24,1),
              border-color 700ms ease, box-shadow 700ms ease;
  outline: none;
}
.hx-panel + .hx-panel { border-left: none; }
.hx-panel.is-on {
  border-color: color-mix(in srgb, var(--ac) 65%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ac) 45%, transparent),
              0 0 42px -8px color-mix(in srgb, var(--ac) 55%, transparent);
  z-index: 2;
}
.hx-panel video, .hx-panel .hx-fallback {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover;
  transition: filter 900ms ease, transform 1400ms ease, opacity 900ms ease;
}
.hx-panel video {
  filter: grayscale(.7) brightness(.4) contrast(1.05) saturate(.7);
  transform: scale(1.06);
}
.hx-panel.is-on video {
  filter: grayscale(0) brightness(.86) contrast(1.06) saturate(1.04);
  transform: scale(1.01);
}
.hx-panel:not(.is-on):hover video { filter: grayscale(.45) brightness(.58) saturate(.85); }

/* darkening veils */
.hx-veil {
  position: absolute; inset: 0; pointer-events: none;
  transition: opacity 900ms ease;
  background:
    linear-gradient(180deg, rgba(5,6,7,.30) 0%, rgba(5,6,7,0) 26%, rgba(5,6,7,0) 52%, rgba(5,6,7,.78) 100%),
    linear-gradient(90deg, rgba(5,6,7,.72) 0%, rgba(5,6,7,.08) 42%, rgba(5,6,7,0) 100%);
}
.hx-panel:not(.is-on) .hx-veil {
  opacity: 1;
  background: linear-gradient(180deg, rgba(5,6,7,.55), rgba(5,6,7,.82));
}
.hx-tint { position: absolute; inset: 0; pointer-events: none; opacity: .14;
  background: var(--ac); mix-blend-mode: overlay; transition: opacity 900ms; }
.hx-panel.is-on .hx-tint { opacity: .07; }

/* accent top hairline */
.hx-edge { position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: var(--ac); transform: scaleX(0); transform-origin: left;
  transition: transform 800ms cubic-bezier(.76,0,.24,1); opacity: .9; }
.hx-panel.is-on .hx-edge { transform: scaleX(1); }

.hx-node { position: absolute; width: 7px; height: 7px; border: 1px solid var(--ac);
  background: color-mix(in srgb, var(--ac) 30%, transparent); }
.hx-node::after { content:""; position:absolute; inset:1px; background: var(--ac);
  opacity: 0; transition: opacity 600ms; }
.hx-panel.is-on .hx-node::after { opacity: 1; animation: hxNodePulse 2.4s ease-in-out infinite; }
@keyframes hxNodePulse { 0%,100%{opacity:.35} 50%{opacity:1} }

/* compressed label */
.hx-vlabel { transition: opacity 600ms ease, color 500ms ease; }
.hx-panel.is-on .hx-vlabel { opacity: 0; }

/* active content reveal */
.hx-content { opacity: 0; transform: translateY(14px);
  transition: opacity 700ms ease 120ms, transform 800ms cubic-bezier(.2,.7,.2,1) 120ms; }
.hx-panel.is-on .hx-content { opacity: 1; transform: none; }
.hx-panel:not(.is-on) .hx-content { pointer-events: none; }

/* per-panel progress line */
.hx-pbar { position: absolute; left: 0; bottom: 0; height: 3px; background: var(--ac);
  width: var(--p, 0%); box-shadow: 0 0 12px color-mix(in srgb, var(--ac) 70%, transparent);
  transition: width 120ms linear; }

/* corner brackets per panel */
.hx-bk { position: absolute; width: 14px; height: 14px;
  border: 1px solid color-mix(in srgb, var(--ac) 70%, transparent);
  pointer-events:none; opacity:0; transition: opacity 700ms ease; }
.hx-panel.is-on .hx-bk { opacity: 1; }
.hx-bk.tl { top: 10px; left: 10px; border-right: none; border-bottom: none; }
.hx-bk.tr { top: 10px; right: 10px; border-left: none; border-bottom: none; }
.hx-bk.bl { bottom: 10px; left: 10px; border-right: none; border-top: none; }
.hx-bk.br { bottom: 10px; right: 10px; border-left: none; border-top: none; }

/* frame brackets (whole hero) */
.hx-fb { position: absolute; width: 26px; height: 26px;
  border: 1px solid rgba(122,131,138,.5); pointer-events:none; z-index: 25; }
.hx-fb.tl{ top:14px; left:14px; border-right:none; border-bottom:none;}
.hx-fb.tr{ top:14px; right:14px; border-left:none; border-bottom:none;}
.hx-fb.bl{ bottom:14px; left:14px; border-right:none; border-top:none;}
.hx-fb.br{ bottom:14px; right:14px; border-left:none; border-top:none;}

/* top marquee */
.hx-marq { display:inline-flex; gap:38px; white-space:nowrap; animation: hxMarq 38s linear infinite; }
@keyframes hxMarq { from{transform:translateX(0)} to{transform:translateX(-50%)} }

.hx-gridov { position:absolute; inset:0; pointer-events:none; opacity:.5;
  background-image: linear-gradient(rgba(122,131,138,.05) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(122,131,138,.05) 1px, transparent 1px);
  background-size: 46px 46px; }

@media (prefers-reduced-motion: reduce) {
  .hx-panel, .hx-panel video, .hx-content, .hx-edge { transition-duration: 1ms !important; }
  .hx-marq { animation: none; }
}

/* ── equalizer del botón de sonido ── */
.hx-eq { display:inline-flex; align-items:flex-end; gap:2px; height:11px; }
.hx-eq i { width:2px; height:100%; background:#B6E22E; box-shadow:0 0 6px rgba(182,226,46,.6);
  transform-origin:bottom; animation:hxEq 900ms ease-in-out infinite; }
.hx-eq i:nth-child(1){ animation-delay:0ms } .hx-eq i:nth-child(2){ animation-delay:140ms }
.hx-eq i:nth-child(3){ animation-delay:280ms } .hx-eq i:nth-child(4){ animation-delay:420ms }
@keyframes hxEq { 0%,100%{ transform:scaleY(.3) } 50%{ transform:scaleY(1) } }
.hx-eq.is-off i { animation:none; transform:scaleY(.28); background:#7A838A; box-shadow:none; }
@media (prefers-reduced-motion: reduce) { .hx-eq i { animation:none; transform:scaleY(.6); } }