@font-face { font-family: QS; src: url("assets/typography/queen-skittles-pixel/QueenSkittlesPixel-SuperSlanted.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Nocturne Script"; src: url("assets/typography/nocturne-script/nocturne-script-regular.woff2") format("woff2"), url("assets/typography/nocturne-script/nocturne-script-regular.ttf") format("truetype"); font-display: swap; }
/* Peso vertical de Pixel: es el que carga el contenido y los rótulos de UI.
   La SuperSlanted (QS, arriba) queda solo para la marca del header. */
@font-face { font-family: "Queen Skittles Pixel"; src: url("assets/typography/queen-skittles-pixel/QueenSkittlesPixel-Regular.woff2") format("woff2"); font-style: normal; font-display: swap; }
:root { --bg: #f4f2f0; --text: #111011; --muted: #696567; --pink: #f000a8; --script: "Nocturne Script", "Times New Roman", serif; --pixel: "Queen Skittles Pixel", monospace; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
/* Sin Arial en ningún texto del índice: todo hereda Queen Skittles Pixel, y
   los nombres de categoría y proyecto van en Nocturne por sus propias reglas. */
body { margin: 0; overflow-x: hidden; background: var(--bg); color: var(--text); font-family: var(--pixel); }
a { color: inherit; }
.index-header { position: fixed; inset: 0 0 auto; z-index: 10; display: grid; grid-template-columns: 1.1fr .9fr 1.5fr auto; gap: clamp(18px, 4vw, 70px); align-items: start; padding: 18px 20px; color: var(--muted); font-size: .68rem; text-transform: uppercase; }
.index-brand { color: var(--pink); font: italic 1.2rem/1 QS, monospace; text-decoration: none; text-transform: none; }
.index-manifesto { display: flex; flex-direction: column; margin: 0; }
.index-switcher { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 28px; }
.index-switcher a, .index-header a { text-decoration: none; }
/* Mismos dos destinos que los portales del landing y el menú superpuesto de
   index.html (que ya usan Nocturne): un atajo persistente a la misma
   categoría debe nombrarse igual, no en la Pixel de utilidad del resto de
   esta fila. */
.index-switcher a { font-family: var(--script); font-size: clamp(1.05rem, 1.6vw, 1.3rem); text-transform: none; }
.index-switcher a:hover, .index-switcher a:focus-visible { color: var(--pink); }
.prototype-note { text-align: right; }
.project-field { position: relative; min-height: 200dvh; }
.project-group { position: relative; min-height: 100dvh; padding: 100px 24px 30px; }
.project-group h1, .project-group h2 { position: absolute; left: 20px; bottom: 20px; max-width: 15ch; margin: 0; color: #807c7e; font: 400 clamp(1.5rem, 3.2vw, 2.7rem)/1.1 var(--script); }
.project-cloud { position: relative; width: 100%; height: calc(100dvh - 130px); }
.project-link { position: absolute; z-index: 2; padding: 10px 8px; color: #3a3739; font-family: var(--script); font-size: clamp(1.35rem, 2.4vw, 2.3rem); line-height: 1.1; text-decoration: none; transition: color .15s ease; }
.project-link:hover, .project-link:focus-visible { color: var(--pink); }
.pos-a { left: 12%; top: 18%; } .pos-b { left: 52%; top: 38%; } .pos-c { right: 8%; top: 11%; }
.pos-d { left: 7%; top: 25%; } .pos-e { left: 42%; top: 9%; } .pos-f { right: 13%; top: 52%; }
/* Obra tiene 8 piezas contra las 3 de Dirección, así que necesita su propia
   dispersión: las de arriba están calibradas para 3 y se amontonarían. Van
   acotadas a #obra para no mover el índice de Dirección. */
#obra .pos-a { left: 8%;  top: 10%; right: auto; }
#obra .pos-b { left: 46%; top: 21%; right: auto; }
#obra .pos-c { right: 6%; top: 6%;  left: auto; }
#obra .pos-d { left: 15%; top: 37%; right: auto; }
#obra .pos-e { left: 54%; top: 49%; right: auto; }
#obra .pos-f { right: 9%; top: 34%; left: auto; }
#obra .pos-g { left: 6%;  top: 63%; right: auto; }
#obra .pos-h { left: 39%; top: 75%; right: auto; }
.hover-preview { position: fixed; left: 0; top: 0; z-index: 1; width: clamp(230px, 32vw, 480px); aspect-ratio: 16/10; margin: 0; opacity: 0; overflow: hidden; pointer-events: none; box-shadow: 0 24px 70px rgba(30, 20, 27, .18); transform: translate3d(-50%, -50%, 0) scale(.94); transition: opacity .12s ease, transform .24s cubic-bezier(.16, 1, .3, 1); }
.hover-preview.visible { opacity: 1; transform: translate3d(-50%, -50%, 0) scale(1); }
.hover-preview img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.85) contrast(1.12); }

/* --- Obra, ilustración y objetos: catálogo -------------------------------
   El catálogo se muestra en cuadrícula, a diferencia de los proyectos de
   Dirección (que van dispersos espacialmente): son artículos que se
   comparan uno junto a otro, no casos con su propia narrativa. */
.shop-field { position: relative; height: calc(100dvh - 130px); display: flex; align-items: center; padding-right: 8%; }
.shop-empty { max-width: 46ch; margin: 0 0 14px; color: #6f6b6d; font-size: 1.05rem; line-height: 1.5; }
.shop-empty--note { font-size: .8rem; color: #9c9799; }
.shop-item { background: #fff; padding: 14px; }
.shop-item img { width: 100%; aspect-ratio: 4/5; object-fit: cover; margin-bottom: 10px; }
.shop-item h3 { margin: 0 0 4px; font-family: var(--script); font-size: 1.4rem; font-weight: 400; }
.shop-item__kind { margin: 0 0 10px; font-size: .68rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.shop-item__links { display: flex; flex-wrap: wrap; gap: 10px; }
.shop-item__links a { font-size: .72rem; font-weight: 700; text-transform: uppercase; text-decoration: underline; text-underline-offset: 3px; }
.shop-item__links a:hover, .shop-item__links a:focus-visible { color: var(--pink); }
[data-shop-field]:has(.shop-item) { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 20px; width: 100%; }
.index-menu { position: fixed; right: 18px; bottom: 18px; z-index: 30; width: 58px; height: 58px; border: 0; border-radius: 50%; background: var(--text); display: grid; place-content: center; gap: 7px; cursor: pointer; }
.index-menu span { width: 28px; height: 1px; background: var(--bg); transition: transform .25s ease; }
.index-menu[aria-expanded="true"] span:first-child { transform: translateY(4px) rotate(45deg); }
.index-menu[aria-expanded="true"] span:last-child { transform: translateY(-4px) rotate(-45deg); }
.index-drawer { position: fixed; inset: 0; z-index: 20; display: grid; place-items: center; visibility: hidden; opacity: 0; background: var(--pink); color: var(--text); transition: opacity .25s ease, visibility .25s; }
.index-drawer[aria-hidden="false"] { visibility: visible; opacity: 1; }
.index-drawer nav { display: flex; flex-direction: column; align-items: center; }
.index-drawer a { font: clamp(2.4rem, 6.4vw, 5.6rem)/1.08 var(--script); text-decoration: none; }
.index-drawer a:hover, .index-drawer a:focus-visible { color: var(--bg); }

/* Foco visible. El fondo cambia de claro (índice) a magenta (drawer) a oscuro
   (botón de menú), así que el color del anillo cambia con cada superficie en
   vez de usar uno solo que desaparecería en alguna de las tres. */
.project-link:focus-visible,
.index-switcher a:focus-visible,
.index-header a:focus-visible { outline: 2px solid var(--pink); outline-offset: 3px; border-radius: 2px; }
.index-drawer a:focus-visible { outline: 2px solid var(--text); outline-offset: 6px; border-radius: 2px; }
.index-menu:focus-visible { outline: 2px solid var(--bg); outline-offset: 3px; }
@media (max-width: 700px) {
  .index-header { grid-template-columns: 1fr auto; }
  .index-manifesto, .index-switcher { display: none; }
  .project-group { padding: 90px 16px 20px; }
  .project-cloud { height: calc(100dvh - 110px); }
  .project-link { padding: 12px 10px; font-size: clamp(1.2rem, 5vw, 1.7rem); }
  .pos-a { left: 5%; top: 18%; } .pos-b { left: 44%; top: 43%; } .pos-c { right: 4%; top: 8%; }
  .pos-d { left: 4%; top: 20%; } .pos-e { left: 35%; top: 8%; } .pos-f { right: 3%; top: 50%; }
  /* En vertical, 8 títulos dispersos se encimarían sin remedio: Obra pasa a
     lista apilada. Dirección, con 3, mantiene su dispersión. */
  #obra .project-cloud { position: static; height: auto; display: grid; justify-items: start; gap: 2px; }
  #obra .project-link { position: static; }
  .hover-preview { width: 70vw; }
  .shop-field { height: auto; padding: 0; }
  [data-shop-field]:has(.shop-item) { grid-template-columns: 1fr 1fr; gap: 12px; }
}
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; transition-duration: .01ms !important; } }