/* Pixelario · capa de marca "La ventana"
   Se carga después de styles.css y antes de components.css.
   Aquí van los átomos de marca: logo, iconos, tratamiento de imagen, etiquetas y cargadores.
   Los componentes de interfaz (botones, campos, modales…) viven en css/components.css.
   Reglas y ejemplos en BRAND.md. */

/* ---------- Base ---------- */
body { font-feature-settings: "ss01", "cv11"; }
.display, h1, h2 { font-variation-settings: "opsz" 96; text-wrap: balance; }
:focus-visible { outline: 2px solid var(--spark); outline-offset: 2px; border-radius: 4px 1px 4px 4px; }
::selection { background: color-mix(in oklab, var(--spark) 50%, transparent); color: var(--fg); }

/* ---------- Logotipo ----------
   La p sobre una retícula de 3 × 4; el módulo central (la ventana) toma el color del pack. */
.logo { display: inline-flex; align-items: center; gap: 9px; color: var(--fg); text-decoration: none; flex: none; line-height: 0; }
.logo .mark { height: 28px; width: auto; }
.logo .wm { height: 19px; width: auto; fill: currentColor; overflow: visible; margin-top: 2px; }
.mark { overflow: visible; }
.mark .p { fill: currentColor; }
.mark .win { fill: var(--spark); transition: fill var(--dur-4) var(--ease); }
/* Entrada: la ventana se enciende por pasos, como un píxel que se refresca. */
.nav .logo .mark .win { animation: win-on 560ms var(--ease-px) 120ms both; }
@keyframes win-on { 0% { fill: var(--surface-3); } 50% { fill: var(--fg); } }
/* Hover: la ventana parpadea una vez. */
.logo:hover .mark .win, .logo:focus-visible .mark .win { animation: win-blink 420ms steps(3, end); }
@keyframes win-blink { 33% { fill: var(--fg); } 66% { fill: var(--surface-3); } }
footer .logo .mark { height: 32px; }
footer .logo .wm { height: 22px; }
.nav-bar { background: rgba(23, 22, 20, .78); }

/* ---------- Iconos (assets/icons.svg) ---------- */
.ico { width: 18px; height: 18px; flex: none; display: inline-block; vertical-align: -.2em; color: inherit; --ico-px: currentColor; }
.ico.sm { width: 14px; height: 14px; }
.ico.lg { width: 24px; height: 24px; }
.ico.xl { width: 32px; height: 32px; }
.ico.accent, .btn:hover .ico, a:hover > .ico { --ico-px: var(--spark); }
.btn-pack .ico, .btn-brand .ico, .btn-danger .ico { --ico-px: currentColor; }
.nav-search .ico { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); width: 15px; height: 15px; color: var(--muted); }

/* ---------- Tratamiento de imagen ---------- */
.card .img, .shot, .media { border-radius: var(--shape-lg); }
.card .img::before, .shot::before, .media::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(244, 239, 230, .07), inset 0 -60px 60px -40px rgba(15, 14, 13, .55);
  background: linear-gradient(var(--spark), var(--spark)) no-repeat right 10px top 10px / 0 0;
  transition: background-size var(--dur-2) var(--ease-px);
}
.media { position: relative; overflow: hidden; background: var(--surface); border: 1px solid var(--line); max-width: 100%; margin: 0; }
.media > img, .media > canvas, .media > video { display: block; width: 100%; height: 100%; object-fit: cover; }
.media.wide { aspect-ratio: 16 / 9; }
.media.square { aspect-ratio: 1; }
.media figcaption { position: absolute; left: 10px; bottom: 9px; z-index: 2; font: 500 11px/1.2 var(--mono); color: var(--paper-200); letter-spacing: .02em; }
/* Texturas y objetos: siempre nítidos y sobre tablero, nunca suavizados ni recortados. */
.tex, .media.tex > img, .media.tex > canvas { image-rendering: pixelated; image-rendering: crisp-edges; }
.media.tex { --chk: rgba(244, 239, 230, .035); background-color: var(--ink-900); background-image: conic-gradient(var(--chk) 25%, transparent 0 50%, var(--chk) 0 75%, transparent 0); background-size: 16px 16px; display: grid; place-items: center; }
.media.tex > img, .media.tex > canvas { width: 62%; height: auto; object-fit: contain; }

/* ---------- Etiquetas de texto ---------- */
.eyebrow::before, .px-list > li::before { content: ""; width: 6px; height: 6px; border-radius: 1.5px; background: var(--spark); flex: none; }
.eyebrow { display: inline-flex; align-items: center; gap: 9px; font: 500 var(--fs-2xs)/1 var(--mono); letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--muted); }
.px-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.px-list > li { display: flex; gap: 10px; align-items: baseline; }
.px-list > li::before { transform: translateY(-.12em); }
.tagline { font-family: var(--display); font-weight: 800; letter-spacing: -.03em; font-variation-settings: "opsz" 96; }
.tagline .on { color: var(--spark); }

/* ---------- Carga ----------
   .loader-px: un píxel que recorre las cuatro esquinas por pasos.
   .mark.is-loading: la ventana va pasando por colores (úsalo con markSVG({ cls: 'is-loading' })). */
.loader-px { position: relative; display: inline-block; width: 18px; height: 18px; vertical-align: middle; flex: none; }
.loader-px::before, .loader-px::after { content: ""; position: absolute; width: 7px; height: 7px; border-radius: 1.5px; }
.loader-px::before { background: var(--spark); animation: px-orbit 1.1s steps(1) infinite; }
.loader-px::after { background: currentColor; opacity: .35; animation: px-orbit 1.1s steps(1) infinite -.55s; }
@keyframes px-orbit { 0% { left: 0; top: 0; } 25% { left: 11px; top: 0; } 50% { left: 11px; top: 11px; } 75% { left: 0; top: 11px; } }
.mark.is-loading .win { animation: win-cycle 1.6s steps(1) infinite; }
@keyframes win-cycle { 0% { fill: var(--spark); } 25% { fill: #5fe3c4; } 50% { fill: #ff5fc8; } 75% { fill: #ffbb3d; } }

@media (prefers-reduced-motion: reduce) {
  .nav .logo .mark .win, .logo:hover .mark .win { animation: none !important; }
  .mark.is-loading .win, .loader-px::before, .loader-px::after { animation-duration: 2.4s !important; animation-iteration-count: infinite !important; }
}