@font-face{font-family:"Queen Skittles Pixel";src:url("assets/typography/queen-skittles-pixel/QueenSkittlesPixel-Regular.woff2") format("woff2");font-style:normal;font-weight:400;font-display:swap}
@font-face{font-family:"Queen Skittles Pixel";src:url("assets/typography/queen-skittles-pixel/QueenSkittlesPixel-SuperSlanted.woff2") format("woff2");font-style:italic;font-weight:400;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-style:normal;font-weight:400;font-display:swap}
:root{--ink:#101010;--paper:#f2efef;--magenta:#f000a8;--pad:clamp(16px,2vw,34px);--script:"Nocturne Script","Times New Roman",serif;--pixel:"Queen Skittles Pixel",monospace}
*{box-sizing:border-box}html,body{width:100%;height:100%;overflow:hidden}body{margin:0;background:var(--ink);color:var(--paper);font-family:var(--pixel);-webkit-font-smoothing:antialiased}a{color:inherit}button,a{-webkit-tap-highlight-color:transparent}button:focus-visible,a:focus-visible{outline:3px solid var(--paper);outline-offset:-7px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.hero{position:relative;isolation:isolate;width:100%;min-height:100dvh;overflow:hidden}
/* Fondo a sangre completa. Antes el hero era mitad magenta / mitad foto, con
   el magenta sin nada detrás -- por eso el "calado" del título no podía ser
   real. Ahora la imagen (o el video) ocupa todo, y el magenta es la banda del
   SVG que va encima: así hay algo de verdad detrás de lo que la banda tapa. */
.hero-media{position:absolute;inset:0;z-index:0;overflow:hidden;background:#654e58}
.hero-media__source,.effect-canvas{position:absolute;inset:0;width:100%;height:100%}
.hero-media__source{object-fit:cover;object-position:50% 38%}
.effect-canvas{pointer-events:none;opacity:0;transition:opacity .16s ease}
.hero-media.is-active .effect-canvas{opacity:1}
.site-header{position:absolute;inset:0 0 auto;z-index:20;height:66px;display:flex;align-items:center;justify-content:space-between;padding:0 var(--pad);color:var(--paper);mix-blend-mode:difference;pointer-events:none}.brand{font:italic 1.35rem/1 "Queen Skittles Pixel",monospace}.header-actions{display:flex;align-items:center;gap:20px;pointer-events:auto}.menu-toggle{display:flex;align-items:center;gap:10px;border:0;background:none;color:inherit;font:700 .72rem/1 var(--pixel);text-transform:uppercase;letter-spacing:.08em;cursor:pointer}.menu-icon{width:25px;display:grid;gap:5px}.menu-icon i{width:100%;height:1px;background:currentColor;transition:transform .3s ease}body.menu-open .menu-icon i:first-child{transform:translateY(3px) rotate(45deg)}body.menu-open .menu-icon i:last-child{transform:translateY(-3px) rotate(-45deg)}
.menu-panel{position:fixed;inset:0;z-index:15;visibility:hidden;opacity:0;background:var(--ink);color:var(--magenta);transition:opacity .3s cubic-bezier(.16,1,.3,1),visibility .3s}.menu-panel[aria-hidden="false"]{visibility:visible;opacity:1}.menu-panel__inner{min-height:100dvh;display:grid;grid-template-columns:1fr 1.5fr;align-items:center;gap:7vw;padding:90px var(--pad) 34px}.menu-panel p{margin:0;color:var(--paper);font-size:clamp(2rem,5vw,5.5rem);line-height:.9}.menu-panel nav{display:flex;flex-direction:column;align-items:flex-start}.menu-panel a,.menu-panel nav span{font:clamp(2.2rem,5vw,5.4rem)/1.06 var(--script);text-decoration:none}.menu-panel nav span{opacity:.45}.menu-panel a{transition:color .2s ease,transform .2s ease}.menu-panel a:hover{color:var(--paper);transform:translateX(12px)}
/* --- Banda + título calado (máscara real, tipo buscatrazos) ----------------
   El SVG de Vill no se pinta como imagen: se usa como MÁSCARA de un bloque
   magenta. Consecuencias, que son justo lo que hacía falta:

     · El color sale del CSS (var(--magenta)), no del archivo, así que es el
       mismo magenta que el resto del sitio y se cambia en un solo lugar.
     · Los huecos de las letras son transparencia real: se ve el fondo que hay
       detrás (hoy la foto, mañana un video), no una copia de la imagen.
     · Escala de verdad. El tamaño lo manda `--qs-tile` (el ancho de una
       repetición del título), no el tamaño natural de una imagen; por eso en
       móvil basta con subir esa variable y la banda y el texto crecen juntos,
       sin quedarse chicos ni descuadrarse.

   El alto se calcula explícito (`--qs-tile-h`) en vez de dejarlo en `auto`:
   es el mismo resultado pero sin depender de cómo cada navegador deduce la
   proporción intrínseca de un SVG sin width/height.

   El bucle: el bloque mide una baldosa MÁS que la pantalla y se desplaza
   exactamente una baldosa, así que al reiniciar cae en el mismo sitio y no
   salta. Se anima `transform` (no `mask-position`) para que lo mueva el
   compositor y no repinte la máscara en cada cuadro.

   El movimiento NO se apaga con prefers-reduced-motion ni tiene botón de
   pausa: decisión explícita de Vill. El resto de transiciones sí la respeta. */
.hero-title{
  /* Ancho de UNA repetición del título. Manda el tamaño de la letra. */
  --qs-tile:150vw;
  /* Alto del texto, derivado del bbox real del vector (145.02/1647.19). */
  --qs-text-h:calc(var(--qs-tile) * .08804);
  /* Alto de la banda magenta: INDEPENDIENTE del texto. Esta es la pieza que
     antes no se podía tocar (venía pegada dentro del SVG) y por eso la banda
     no cubría bien arriba ni se adaptaba. */
  --qs-band-h:56vh;
  /* Qué fracción de la letra queda DENTRO de la banda (el resto sobresale
     por debajo, en magenta sólido). Es el cruce que dibujó Vill. */
  --qs-inside:.38;
  --qs-text-y:calc(var(--qs-band-h) - var(--qs-text-h) * var(--qs-inside));
  position:absolute;top:0;left:0;z-index:3;
  height:100%;width:calc(100% + var(--qs-tile));
  pointer-events:none;
  will-change:transform;
  animation:qs-title-scroll 26s linear infinite;
}
/* La banda: magenta pleno con las letras CALADAS. Dos capas de máscara --
   una que cubre todo y otra con las letras -- restadas con `mask-composite`.
   Eso es el buscatrazos: el resultado es "todo menos las letras", y por esos
   huecos se ve el fondo real. */
.hero-title__band{
  position:absolute;top:0;left:0;right:0;height:var(--qs-band-h);
  background:var(--magenta);
  -webkit-mask-image:linear-gradient(#000,#000),url("qs-title-tile.svg");
  mask-image:linear-gradient(#000,#000),url("qs-title-tile.svg");
  -webkit-mask-repeat:no-repeat,repeat-x;mask-repeat:no-repeat,repeat-x;
  -webkit-mask-size:100% 100%,var(--qs-tile) var(--qs-text-h);
  mask-size:100% 100%,var(--qs-tile) var(--qs-text-h);
  -webkit-mask-position:0 0,0 var(--qs-text-y);
  mask-position:0 0,0 var(--qs-text-y);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
}
/* La parte de las letras que sobresale por debajo de la banda, en magenta
   sólido sobre la foto. Misma baldosa, mismo tamaño y misma posición que la
   capa de arriba, recortada a partir del borde inferior de la banda: así las
   letras se leen continuas, caladas arriba y sólidas abajo. */
.hero-title__ink{
  position:absolute;inset:0;
  background:var(--magenta);
  -webkit-mask-image:url("qs-title-tile.svg");mask-image:url("qs-title-tile.svg");
  -webkit-mask-repeat:repeat-x;mask-repeat:repeat-x;
  -webkit-mask-size:var(--qs-tile) var(--qs-text-h);
  mask-size:var(--qs-tile) var(--qs-text-h);
  -webkit-mask-position:0 var(--qs-text-y);mask-position:0 var(--qs-text-y);
  clip-path:inset(var(--qs-band-h) 0 0 0);
}
@keyframes qs-title-scroll{from{transform:translate3d(0,0,0)}to{transform:translate3d(calc(-1 * var(--qs-tile)),0,0)}}
/* Las mitades ya NO son enlaces ni reaccionan al hover: antes toda la mitad
   de pantalla se oscurecía al pasar el mouse (`::before` con un velo negro) y
   eso ensuciaba la foto. Ahora solo colocan sus piezas y dejan pasar el
   puntero; el único elemento clickeable es el título. */
.category-portals{position:absolute;inset:0;z-index:5;display:grid;grid-template-columns:1fr 1fr;pointer-events:none}
.category-slot{position:relative;display:grid;grid-template-columns:auto 1fr auto;align-items:end;gap:16px;padding:0 var(--pad) 28px}
.category-slot--left{color:var(--ink)}
.category-slot--right{color:var(--paper)}
.category-slot::after{content:"";position:absolute;inset:auto 0 0;height:42%;z-index:0;pointer-events:none}/* El degradado magenta de la mitad izquierda se quitó: venía de cuando el
   hero era mitad magenta / mitad foto y ahí ataba las dos mitades. Con la
   foto a sangre completa ya no ata nada, solo ensucia la imagen. El scrim
   oscuro de la derecha sí se queda: ahí sostiene la legibilidad del texto
   claro sobre la foto. */
.category-slot--right::after{background:linear-gradient(to top,rgba(16,16,16,.66),rgba(16,16,16,0))}.portal-number,.portal-action{position:relative;z-index:1;font-family:var(--pixel);font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em}
/* El título ES el enlace: es lo único que recupera pointer-events, así que el
   área clickeable es exactamente el texto y nada más. */
a.portal-name{pointer-events:auto;text-decoration:none;transition:transform .2s ease,filter .2s ease}
.portal-name{position:relative;z-index:1;justify-self:center;display:inline-block;font-family:var(--script);font-size:clamp(1.4rem,2.7vw,2.6rem);font-weight:400;line-height:.94;text-align:center;color:var(--magenta);-webkit-text-stroke:.05em var(--ink);paint-order:stroke fill;text-shadow:0 0 .05em rgba(16,16,16,.98),0 0 .16em rgba(16,16,16,.9),0 0 .42em rgba(16,16,16,.7),0 0 1em rgba(16,16,16,.45)}
a.portal-name:hover,a.portal-name:focus-visible{transform:translateY(-2px);filter:brightness(1.25)}
.portal-action{opacity:0;transform:translateX(-8px);transition:opacity .2s ease,transform .2s ease}
/* "Entrar" aparece al apuntar el título, aunque sea su hermano y no su hijo. */
.category-slot:has(a.portal-name:hover) .portal-action,.category-slot:has(a.portal-name:focus-visible) .portal-action{opacity:1;transform:translateX(0)}
/* En vertical, una copia de 100vw deja la banda demasiado delgada (la
   proporción del SVG es ~4:1). Cada copia pasa a 220vw: la banda y el texto
   crecen, y el bucle sigue igual de limpio porque siguen siendo dos copias. */
/* En vertical la pantalla es mucho más angosta: con la misma baldosa el
   título saldría diminuto. Se sube la variable y banda y texto crecen juntos,
   manteniendo la proporción -- una sola línea, sin un segundo archivo. */
@media(max-width:767px){.hero-title{--qs-tile:420vw;--qs-band-h:48vh}.category-portals{grid-template-columns:1fr;grid-template-rows:1fr 1fr}.category-slot{padding-bottom:18px}.portal-name{font-size:clamp(1.2rem,5.2vw,1.7rem)}.portal-action{opacity:1;transform:none}.menu-label{display:none}.menu-panel__inner{grid-template-columns:1fr;align-content:center}.menu-panel p{display:none}.menu-panel a,.menu-panel nav span{font-size:clamp(2.2rem,10vw,3.4rem)}}
/* El título queda fuera de esta regla a propósito (ver .hero-title arriba):
   Vill pidió que siempre se mueva y que no haya botón de pausa. */
@media(prefers-reduced-motion:reduce){*:not(.hero-title),*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.hero-title{animation:qs-title-scroll 26s linear infinite!important}}