/* Hackéalo — lo común a la portada y a los paneles, sacado de hackealo.css (v8) para no reinventarlo:
   tokens, fuentes, grano, marca con cursor, botones con brillo, etiquetas en mono que se decodifican,
   titulares que se revelan por palabras, entradas de borroso a nítido, foco que sigue al ratón y luz que respira.
   Lo usan app/, admin/ y las páginas legales. Vanilla, sin CDN. */

@font-face { font-family: "Inter"; src: url("fonts/inter.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "JB Mono"; src: url("fonts/jetbrains-mono.woff2") format("woff2"); font-weight: 100 800; font-display: swap; }

:root {
  --bg: #0d0d0d;
  --bg-2: #171717;
  --surface: #212121;
  --surface-2: #2f2f2f;
  --txt: #ececec;
  --dim: #b4b4b4;
  --faint: #8a8a8a;
  --line: rgba(255,255,255,.10);
  --line-soft: rgba(255,255,255,.06);
  --blanco: #ffffff;
  --negro: #0d0d0d;
  --ok: #4ade80;
  --rojo: #ff6b61;
  --ambar: #ffb44d;
  --verde: #4ade80;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --mono: "JB Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --suave: cubic-bezier(.16, 1, .3, 1);
  /* librería UI de la casa */
  --lui-acento: #ffffff;
  --lui-texto: var(--txt);
  --lui-superficie: var(--bg-2);
  --lui-linea: var(--line);
  --lui-atenuado: var(--faint);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--txt); font-family: var(--sans); line-height: 1.55; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
img, video { display: block; max-width: 100%; }
h1, h2, h3, h4 { margin: 0; font-weight: 600; letter-spacing: -.03em; }
::selection { background: #fff; color: #000; }
:focus-visible { outline: 2px solid rgba(255,255,255,.85); outline-offset: 2px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.gris { color: var(--faint); }
.mono { font-family: var(--mono); }
.saltar { position: fixed; left: 12px; top: -60px; z-index: 200; background: #fff; color: #000; padding: 10px 16px; border-radius: 99px; font-weight: 600; font-size: 14px; transition: top .2s; }
.saltar:focus { top: 12px; }

/* ── Grano de película ───────────────────────────────────────────────── */
.grano { position: fixed; inset: -60%; z-index: 90; pointer-events: none; opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 1.4 -.25'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grano 1s steps(6) infinite; will-change: transform; }
@keyframes grano {
  0% { transform: translate(0,0); } 17% { transform: translate(-4%,3%); } 33% { transform: translate(3%,-5%); }
  50% { transform: translate(-6%,-2%); } 67% { transform: translate(5%,4%); } 83% { transform: translate(-2%,6%); } 100% { transform: translate(0,0); }
}

/* ── Marca [h] hackéalo con cursor ───────────────────────────────────── */
.marca { display: inline-flex; align-items: center; gap: 9px; color: var(--txt); }
.marca .iso { width: 26px; height: 26px; transition: transform .5s var(--suave); }
.marca:hover .iso { transform: rotate(-8deg) scale(1.06); }
.marca .palabra { font-family: var(--mono); font-weight: 700; font-size: 19px; letter-spacing: -.02em; display: inline-flex; align-items: center; }
.marca .cur { display: inline-block; width: .5em; height: .95em; margin-left: .07em; background: var(--txt); transform: translateY(.06em); animation: parpadeo 1.06s steps(1) infinite; }
@keyframes parpadeo { 50% { opacity: 0; } }

/* ── Botones de la portada ───────────────────────────────────────────── */
.btn-blanco, .btn-borde, .btn-ghost {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 18px; border-radius: 999px; font-size: 14.5px; font-weight: 600; border: 0; cursor: pointer; white-space: nowrap;
  transition: transform .2s var(--suave), background .2s, opacity .2s, box-shadow .25s, border-color .25s;
}
.btn-blanco { position: relative; overflow: hidden; isolation: isolate; background: var(--blanco); color: var(--negro); box-shadow: 0 0 0 1px rgba(255,255,255,.4), 0 6px 24px -8px rgba(255,255,255,.35); }
.btn-blanco::after { content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 45%; z-index: -1;
  background: linear-gradient(100deg, transparent, rgba(0,0,0,.14) 45%, rgba(0,0,0,.02) 55%, transparent);
  transform: skewX(-20deg); animation: barrido 4.2s var(--suave) infinite; }
.btn-blanco:hover { transform: translateY(-1px); box-shadow: 0 0 0 1px #fff, 0 10px 34px -8px rgba(255,255,255,.55); }
@keyframes barrido { 0%, 55% { left: -60%; } 100% { left: 130%; } }
.btn-borde { position: relative; background: transparent; color: var(--txt); box-shadow: inset 0 0 0 1px var(--line); }
.btn-borde:hover { background: var(--surface); box-shadow: inset 0 0 0 1px rgba(255,255,255,.35), 0 0 22px -6px rgba(255,255,255,.3); }
.btn-ghost { background: transparent; color: var(--txt); }
.btn-ghost:hover { background: var(--surface); }
.btn-blanco:active, .btn-borde:active, .btn-ghost:active { transform: scale(.97); }

/* ── Etiqueta en mono con el prompt delante (se decodifica con efectos.js) ── */
.eyebrow { margin: 0 0 14px; font: 500 13px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--dim); }
.eyebrow::before { content: "> "; color: var(--faint); }

/* ── Titulares que se revelan por palabras (máscara) ─────────────────── */
.pal { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em; margin-bottom: -.08em; }
.pal > i { display: inline-block; font-style: normal; transform: translateY(105%); transition: transform 1s var(--suave); transition-delay: calc(var(--i, 0) * 55ms); }
.revela.visto .pal > i, .visto .revela .pal > i { transform: none; }

/* ── Entradas: de borroso a nítido, escalonadas ──────────────────────── */
.entra { opacity: 0; transform: translateY(22px); filter: blur(10px); transition: opacity 1s var(--suave), transform 1s var(--suave), filter 1s var(--suave); transition-delay: calc(var(--n, 0) * 70ms); }
.entra.visto { opacity: 1; transform: none; filter: none; }

/* ── Foco que sigue al ratón: canto de luz + halo dentro ─────────────── */
.foco { --mx: 50%; --my: 50%; position: relative; }
.foco::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 2; padding: 1px; opacity: 0; transition: opacity .4s;
  background: radial-gradient(260px circle at var(--mx) var(--my), rgba(255,255,255,.55), transparent 60%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
.foco:hover::after { opacity: 1; }
.foco-halo { background-image: radial-gradient(420px circle at var(--mx) var(--my), rgba(255,255,255,.05), transparent 45%); }

/* ── Luz que respira y haz que se filtra ─────────────────────────────── */
.respira { position: absolute; z-index: -1; left: 50%; top: 50%; width: min(1100px, 140vw); aspect-ratio: 2 / 1; transform: translate(-50%, -50%); pointer-events: none;
  background: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(255,255,255,.10), rgba(255,255,255,.03) 45%, transparent 70%);
  animation: respira 7s ease-in-out infinite; }
@keyframes respira { 0%, 100% { opacity: .55; transform: translate(-50%, -50%) scale(.92); } 50% { opacity: 1; transform: translate(-50%, -50%) scale(1.06); } }
.haz { position: absolute; z-index: -1; top: -20%; left: 58%; width: 26vw; height: 140%; pointer-events: none; transform: rotate(18deg);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.05) 40%, rgba(255,255,255,.08) 50%, rgba(255,255,255,.04) 60%, transparent);
  filter: blur(18px); animation: haz 11s ease-in-out infinite; }
@keyframes haz { 0%, 100% { opacity: .35; transform: rotate(18deg) translateX(0); } 50% { opacity: 1; transform: rotate(18deg) translateX(-4vw); } }

/* ── Foto B/N de fondo con velo (cabeceras, entrada, vacíos) ─────────── */
.foto-bn { position: absolute; inset: 0; z-index: -2; overflow: hidden; pointer-events: none; }
.foto-bn img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .5; filter: contrast(1.15) brightness(.85) grayscale(1); transform: scale(1.06); animation: kenburns 40s ease-in-out infinite alternate; }
.foto-bn::after { content: ""; position: absolute; inset: 0;
  background: radial-gradient(ellipse 60% 55% at 50% 50%, rgba(13,13,13,.55), transparent 75%), radial-gradient(ellipse 120% 100% at 50% 50%, transparent 40%, rgba(13,13,13,.95) 85%), linear-gradient(180deg, rgba(13,13,13,.6), transparent 30%, transparent 70%, var(--bg)); }
@keyframes kenburns { from { transform: scale(1.06) translate(0, 0); } to { transform: scale(1.14) translate(-1.5%, -1%); } }

/* ── Movimiento reducido: quieto y visible ───────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .grano, .respira, .haz, .btn-blanco::after, .foto-bn img { animation: none; }
  .marca .cur { animation: none; }
  .entra { opacity: 1; transform: none; filter: none; transition: none; }
  .pal > i { transform: none; transition: none; }
}
[hidden] { display: none !important; }
/* Las luces decorativas (.respira, .haz) son más anchas que la pantalla a propósito: que nunca generen scroll lateral. */
html { overflow-x: clip; }