/* ── Hero "perímetro": animación scroll-driven ───────────────────────────
   Todo lo que se mueve lo hace con custom properties que escribe
   assets/js/hero-perimetro.js en .hr-frame. Solo transform / opacity /
   clip-path: nada que fuerce layout. Scroll nativo, sticky nativo. */

.hero-stage { position: relative; }

.hr-track {
  --row: 58px;
  --scr: #0c1d16;          /* fondo del monitor "retro" */
  --scr-ink: #9af7c3;      /* fósforo */
  --ai-bg: #121110;        /* fondo del modo agente */
  --ai-ink: #f4f2ee;
  --brand: var(--mb-accent, #0ad5ff);  /* acento de página */
  --brand-ink: #fff;
  --crit: #ff4a3d;         /* severidad crítica */
  --frame-bg: #060606;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --sans: "Manrope", "Helvetica Neue", Arial, sans-serif;
  position: relative;
  width: var(--vw, 100vw);
  margin-left: calc(50% - var(--vw, 100vw) / 2);
  height: 440svh;
}
.hr-sticky { position: sticky; top: 0; height: 100svh; overflow: hidden; isolation: isolate; contain: layout paint; }
.hr-frame {
  position: absolute; inset: 0;
  background: var(--frame-bg);
  clip-path: inset(var(--it, 0px) var(--ir, 0px) var(--ib, 0px) var(--il, 0px));
}

/* escena + capa SVG (brillo, scanlines, pantalla final) */
.hr-media { position: absolute; left: 0; top: 0; }
.hr-img, .hr-crt { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.hr-crt-glow { opacity: var(--crt-glow, 0); mix-blend-mode: screen; }
.hr-crt-scan { opacity: var(--crt-scan, 0); }
.hr-crt-done { opacity: var(--done, 0); }
.hr-crt-barbg { opacity: var(--done, 0); }
.hr-crt-seg { opacity: 0; }
.hr-crt-seg.on { opacity: 1; }
.hr-crt-t1, .hr-crt-t2 { font-family: var(--mono); fill: var(--scr-ink); text-anchor: middle; letter-spacing: -.02em; }
.hr-crt-t1 { font-size: 30px; font-weight: 700; }
.hr-crt-t2 { font-size: 18px; font-weight: 500; }

.hr-shade {
  position: absolute; inset: 0;
  background: linear-gradient(270deg, rgba(6,6,6,.05) 45%, rgba(6,6,6,.45)),
              linear-gradient(rgba(6,6,6,.15), rgba(6,6,6,.3));
  opacity: var(--shade, 1);
}
.hr-shade--end {
  background: linear-gradient(20deg, rgba(6,6,6,.92), rgba(6,6,6,.55) 45%, rgba(6,6,6,0) 72%);
  opacity: var(--c, 0);
}

/* la "tele": tamaño ventana, recortada a la pantalla del monitor */
.hr-tv {
  position: absolute; inset: 0;
  clip-path: inset(var(--wt, 50%) var(--wr, 50%) var(--wb, 50%) var(--wl, 50%) round var(--wr-r, 12px));
  opacity: var(--tv-o, 0);
  visibility: var(--tv-v, hidden);
  color: var(--scr-ink);
}
.hr-tv-bg { position: absolute; inset: 0; }
.hr-tv-bg--retro { background: radial-gradient(120% 90% at 50% 45%, #14321f 0%, var(--scr) 55%, #06110c 100%); }
.hr-tv-bg--ai { background: var(--ai-bg); opacity: var(--mode, 0); }
.hr-tv-inner { position: absolute; inset: 0; transform: scaleY(var(--on, 1)); transform-origin: 50% 50%; }
.hr-tv-content {
  position: absolute; left: 50%; top: var(--tv-top, 96px); bottom: 24px;
  width: min(680px, 100% - 40px);
  transform: translateX(-50%) translateX(var(--jx, 0px)) skew(var(--skew, 0deg));
  display: grid; align-items: center;
  --rgb: calc(var(--g, 0) * 6px);
}
.hr-retro, .hr-ai { grid-area: 1 / 1; }
.hr-tv-scan {
  position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(rgba(0,0,0,.18) 0, rgba(0,0,0,.18) 1px, transparent 1px, transparent 3px);
  opacity: calc(1 - var(--mode, 0) * .85);
}
.hr-tv-vignette { position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 120px rgba(0,0,0,calc(.6 - var(--mode, 0) * .3)); }
.hr-tv-glitch {
  position: absolute; inset: 0; pointer-events: none; opacity: var(--g, 0);
  background:
    linear-gradient(transparent 0, transparent 18%, rgba(255,40,80,.35) 18%, rgba(255,40,80,.35) 21%, transparent 21%, transparent 47%, rgba(40,220,255,.32) 47%, rgba(40,220,255,.32) 52%, transparent 52%, transparent 71%, rgba(244,242,238,.5) 71%, rgba(244,242,238,.5) 72%, transparent 72%),
    repeating-linear-gradient(rgba(244,242,238,.08) 0, rgba(244,242,238,.08) 2px, transparent 2px, transparent 7px);
  transform: translateY(var(--gy, 0px));
  mix-blend-mode: screen;
}
.hr-tv-flash { position: absolute; inset: 0; pointer-events: none; background: #f4f2ee; opacity: var(--flash, 0); }
.hr-tv-line {
  position: absolute; left: 0; right: 0; top: 50%; height: 3px; margin-top: -1.5px;
  background: #eafff3;
  box-shadow: 0 0 18px 4px rgba(234,255,243,.9), 0 0 60px 10px rgba(154,247,195,.5);
  transform: scaleX(var(--line-x, 0)); opacity: var(--line-o, 0); pointer-events: none;
}

/* ── modo "buscador retro" ── */
.hr-retro {
  opacity: calc(1 - var(--mode, 0));
  font-family: var(--mono);
  text-shadow: var(--rgb) 0 0 rgba(255,30,70,.55), calc(var(--rgb) * -1) 0 0 rgba(20,200,255,.55), 0 0 8px rgba(154,247,195,.25);
}
.hr-r-search { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border: 2px solid var(--scr-ink); font: 500 18px/1.25 var(--mono); }
.hr-r-search-k { opacity: .55; white-space: nowrap; }
.hr-r-q { min-width: 0; }
.hr-r-caret { display: inline-block; width: .6em; height: 1.05em; margin-left: -6px; background: var(--scr-ink); animation: hr-blink 1s steps(1) infinite; flex: none; }
@keyframes hr-blink { 50% { opacity: 0; } }
.hr-r-meta { display: flex; justify-content: space-between; margin: 22px 0 8px; font: 500 12px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; opacity: .7; }
.hr-r-meta b { font-weight: 700; }
.hr-r-list { position: relative; list-style: none; margin: 0; padding: 0; height: calc(var(--row) * (var(--rivals) + 1)); }
.hr-r-row {
  position: absolute; left: 0; right: 0; top: 0; height: var(--row);
  display: grid; grid-template-columns: 34px minmax(0, 1fr) auto auto; align-items: center; gap: 12px;
  border-bottom: 1px dashed rgba(154,247,195,.3);
  will-change: transform;
}
.hr-r-n { font-variant-numeric: tabular-nums; padding-left: 4px; }
.hr-r-lines { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.hr-r-l1, .hr-r-l2 { display: block; height: 9px; background: rgba(154,247,195,.32); }
.hr-r-l2 { height: 6px; background: rgba(154,247,195,.16); }
.hr-r-row--brand {
  z-index: 1; background: var(--scr-ink); color: var(--scr); border-bottom-color: transparent; padding-right: 14px;
  box-shadow: 0 0 calc(var(--glow, 0) * 40px) rgba(154,247,195,calc(var(--glow, 0) * .6));
}
.hr-r-row--brand .hr-r-lines { gap: 4px; }
.hr-r-title { font: 700 15px/1.15 var(--mono); letter-spacing: -.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hr-r-row--rival .hr-r-title { font-weight: 500; opacity: .85; }
.hr-r-url { font: 500 11px/1 var(--mono); opacity: .7; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hr-r-sev { font: 700 10px/1 var(--mono); letter-spacing: .1em; padding: 5px 7px; border: 1px solid currentColor; border-radius: 3px; opacity: .75; white-space: nowrap; }
.hr-r-sev--media, .hr-r-sev--baja { opacity: .5; }
.hr-r-sev--critica { color: #fff; background: var(--crit); border-color: transparent; opacity: 1; box-shadow: 0 0 calc(var(--crit-glow, 0) * 22px) rgba(255,74,61,calc(var(--crit-glow, 0) * .95)); }
.hr-r-row--brand .hr-r-sev--critica { transform: scale(calc(1 + var(--crit-glow, 0) * .08)); }
.hr-r-gain { font: 700 13px/1 var(--mono); letter-spacing: .04em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.hr-r-gain:empty { display: none; }
.hr-r-bar { margin-top: 18px; height: 12px; border: 2px solid var(--scr-ink); padding: 2px; }
.hr-r-bar span { display: block; height: 100%; width: 0; background: repeating-linear-gradient(90deg, var(--scr-ink) 0 8px, transparent 8px 11px); }
.hr-r-list.tick { animation: hr-tick .16s steps(2); }
@keyframes hr-tick { 50% { transform: translateY(-2px); } }

/* ── modo "agente" ── */
.hr-ai {
  opacity: var(--mode, 0); color: var(--ai-ink); font-family: var(--sans);
  text-shadow: var(--rgb) 0 0 rgba(255,30,70,.5), calc(var(--rgb) * -1) 0 0 rgba(20,200,255,.5);
}
.hr-ai-head { display: flex; align-items: center; gap: 10px; font: 400 12px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: rgba(244,242,238,.7); }
.hr-ai-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--brand); box-shadow: 0 0 12px var(--brand); }
.hr-ai-q {
  margin: 22px 0 18px auto; max-width: 82%; width: fit-content; padding: 14px 16px;
  background: rgba(244,242,238,.12); border-radius: 14px 14px 2px 14px;
  font: 400 18px/1.4 var(--sans);
  opacity: var(--q-o, 0); transform: translateY(calc((1 - var(--q-o, 0)) * 10px));
}
.hr-ai-a { margin: 0; min-height: 4.4em; font: 400 clamp(18px, 2vw, 24px)/1.4 var(--sans); letter-spacing: -.01em; }
.hr-ai-a mark {
  background: var(--brand); color: var(--brand-ink); padding: 0 .2em; border-radius: 3px; font-weight: 600;
  box-shadow: 0 0 calc(var(--bpulse, 0) * 28px) rgba(var(--mb-accent-rgb, 10,213,255),calc(var(--bpulse, 0) * .9));
}
.hr-ai-a mark:empty { padding: 0; }
.hr-ai-a mark.hr-sev { background: var(--crit); color: #fff; font-weight: 700; letter-spacing: .04em; box-shadow: 0 0 calc(var(--bpulse, 0) * 28px) rgba(255,74,61,calc(var(--bpulse, 0) * .9)); }
.hr-ai-src { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 22px; opacity: var(--src-o, 0); }
.hr-ai-src-k { flex-basis: 100%; font: 500 12px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: rgba(244,242,238,.6); margin-bottom: 2px; }
.hr-engine--slot { visibility: hidden; }

/* chips de agentes: viven en el cierre y "vuelan" hasta sus huecos en la tele */
.hr-engine {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px;
  border: 1px solid rgba(244,242,238,.25); border-radius: 999px;
  font: 600 11px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: #f4f2ee;
  background: rgba(6,6,6,.82);
  white-space: nowrap; will-change: transform, opacity; transform-origin: 50% 50%;
}
.hr-engine i { width: 7px; height: 7px; border-radius: 50%; background: var(--brand); box-shadow: 0 0 8px var(--brand); }
.hr-engine small { font: 500 10px/1 var(--mono); letter-spacing: .04em; opacity: .55; text-transform: none; }

/* ── cierre ── */
.hr-final { position: absolute; left: var(--pad, 24px); right: var(--pad, 24px); bottom: var(--pad, 24px); color: #fff; font-family: var(--sans); }
.hr-final-lines { margin: 0 0 18px; font-weight: 700; letter-spacing: -.03em; font-size: clamp(28px, 4.6vw, 60px); line-height: 1.04; color: #fff; }
.hr-line { display: block; overflow: hidden; padding-bottom: .06em; }
.hr-line > span { display: block; transform: translateY(var(--ly, 110%)); }
.hr-line--muted > span { color: rgba(255,255,255,.6); }
.hr-engines { display: flex; flex-wrap: wrap; gap: 10px; }
.hr-engines .hr-engine { opacity: 0; }

.hr-hint {
  position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%);
  font: 500 11px/1 var(--mono); letter-spacing: .25em; text-transform: uppercase; color: rgba(255,255,255,.75);
  opacity: var(--hint-o, 1); pointer-events: none;
}
.hr-hint::after { content: ""; display: block; width: 1px; height: 22px; margin: 10px auto 0; background: rgba(255,255,255,.6); animation: hr-hint 1.4s ease-in-out infinite; }
@keyframes hr-hint { 0%, 100% { transform: scaleY(1); opacity: .6; } 50% { transform: scaleY(.4); opacity: 1; } }

/* ── móvil ── */
@media (max-width: 759px) {
  .hr-track { --row: 66px; }
  .hr-tv-content { width: calc(100% - 28px); bottom: 14px; }
  .hr-r-search { padding: 10px 12px; font-size: 13px; gap: 8px; }
  .hr-r-meta { margin: 16px 0 6px; font-size: 10px; }
  .hr-r-row { grid-template-columns: 24px minmax(0, 1fr) auto auto; gap: 7px; }
  .hr-r-title { font-size: 12px; line-height: 1.15; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .hr-r-url { font-size: 9.5px; }
  .hr-r-sev { font-size: 8.5px; padding: 4px 5px; letter-spacing: .06em; }
  .hr-r-gain { font-size: 11px; }
  .hr-r-l1 { height: 7px; } .hr-r-l2 { height: 5px; }
  .hr-r-bar { margin-top: 12px; }
  .hr-ai-q { font-size: 15px; max-width: 92%; margin-top: 16px; }
  .hr-ai-a { font-size: 17px; min-height: 0; }
  .hr-engine { padding: 7px 10px; font-size: 10px; }
  .hr-engine small { display: none; }
  .hr-final-lines { font-size: clamp(24px, 7.4vw, 34px); margin-bottom: 12px; }
  .hr-engines { gap: 6px; }
}

/* ── página /perimetro/: intro sobre el escenario ── */
.hp-intro { padding: 150px 0 48px; text-align: center; }
.hp-intro h1 { font: 700 clamp(32px, 5vw, 64px)/1.05 var(--default-font, "Manrope", sans-serif); letter-spacing: -.03em; color: var(--primary-color, #fff); margin: 0 auto; max-width: 18ch; }
.hp-intro h1 span { color: var(--mb-accent); }
.hp-intro .hp-ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: 15px 30px; margin-top: 40px; }
.hp-ctas .btn-default { font-size: 17px; }
.hp-after { padding: 96px 0; }
.hp-after p { max-width: 62ch; margin: 0 auto 18px; font-size: 18px; line-height: 1.5; color: var(--text-color, #a7aabb); text-align: center; }
@media (max-width: 759px) { .hp-intro { padding: 120px 0 28px; } }