@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; }
@font-face { font-family: QS; src: url("assets/typography/queen-skittles-pixel/QueenSkittlesPixel-SuperSlanted.woff2") format("woff2"); font-display: swap; }
/* Peso vertical (no itálico) de Pixel, para el cuerpo de texto del perfil.
   La SuperSlanted de arriba es solo para el logo/marca -- muy inclinada para
   párrafos largos. */
@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; --ink: #101010; --text: #111011; --muted: #8b8688;
  --pink: #f000a8; --mint: #7fe0d4;
  --script: "Nocturne Script", "Times New Roman", serif;
  --pixel: "Queen Skittles Pixel", monospace;
}
* { box-sizing: border-box; }
/* Esta página no usa Arial en ningún texto -- solo las dos tipografías del
   proyecto: Queen Skittles Pixel (contenido/UI) y Nocturne Script (títulos y
   nombres), pedido explícito de Vill. */
body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--pixel); overflow-x: hidden; }
a { color: inherit; }
.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; }

/* --- Header (igual que portfolio.html / project.html) -------------------- */
/* Cyan pedido por Vill para los dos textos del header. Va sin
   `mix-blend-mode: difference` a propósito: con difference el color que se
   ve es la resta contra el fondo, no el color que uno pone -- el cyan nunca
   se vería cyan. A cambio se le pone una sombra sutil para que aguante sobre
   las zonas claras de la foto, que es lo que antes resolvía el difference. */
.about-header { position: fixed; inset: 0 0 auto; z-index: 30; display: flex; justify-content: space-between; align-items: baseline; padding: 20px 24px; color: var(--mint); }
.about-header a { text-decoration: none; color: var(--mint); text-shadow: 0 1px 3px rgba(16,16,16,.55); }
.header-brand { font: italic 1.2rem/1 QS, monospace; }
.header-back { font: 700 .7rem/1 var(--pixel); text-transform: uppercase; letter-spacing: .02em; }
.about-header a:focus-visible { outline: 2px solid #f1efed; outline-offset: 3px; border-radius: 2px; }

/* --- Sistema de esquinas, compartido por los dos paneles -----------------
   Referencia: el poster "Heels · Class" repite la misma micro-etiqueta en
   las 4 esquinas de sus 2 paneles — eso es lo que hace leer un díptico con
   contenido tan distinto (retrato completo / macro de un ojo) como una sola
   pieza. Aquí se repite igual: esquinas superiores en el panel 1, inferiores
   en el panel 2, mismo texto, mismo tamaño. */
.corner { position: absolute; z-index: 2; font-size: .6rem; line-height: 1.4; text-transform: uppercase; letter-spacing: .08em; }
.corner--tl, .corner--tr { top: 84px; color: #f1efed; }
.corner--tl { left: 24px; }
.corner--tr { right: 24px; text-align: right; }
.corner--bl, .corner--br { bottom: 28px; color: #6f6a6c; }
.corner--bl { left: 24px; }
.corner--br { right: 24px; text-align: right; }

.tick { position: absolute; z-index: 2; display: flex; flex-direction: column; gap: 4px; }
.tick i { display: block; width: 14px; height: 2px; background: currentColor; }
.tick--tl, .tick--tr { top: 118px; color: #f1efed; }
.tick--tl { left: 24px; }
.tick--tr { right: 24px; align-items: flex-end; }
.tick--bl { bottom: 62px; left: 24px; color: #6f6a6c; }

.dot { position: absolute; z-index: 2; width: 10px; height: 10px; border-radius: 50%; background: var(--pink); }
.dot--a { top: 206px; left: 30px; }
.dot--b { top: 230px; right: 64px; width: 6px; height: 6px; background: #f1efed; }
.dot--c { top: 40px; right: 15%; background: var(--mint); }

/* --- Módulo de dato: bullet + etiqueta + valor -----------------------------
   Mismo patrón que "data · 21 июня" del poster: un bullet sólido, una
   etiqueta delgada en minúsculas, un valor destacado. Aquí el valor es un
   dato real (enlace al portafolio), no texto inventado. */
.info-module { position: absolute; z-index: 2; left: 24px; top: 168px; display: flex; align-items: baseline; gap: 10px; color: #f1efed; }
.info-module__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--pink); flex: none; }
.info-module__label { font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; opacity: .8; }
.info-module__value { font-size: 1.05rem; font-weight: 700; text-decoration: none; text-transform: uppercase; }
.info-module__value:hover, .info-module__value:focus-visible { color: var(--mint); }

/* --- Panel 1: foto -> nombre en movimiento (difference) -> SVG encima -----
   Tres capas, en este orden de abajo a arriba:
     1. `background` — la foto de Queen Skittles posando.
     2. `.about-marquee` — el nombre corriendo de lado a lado, en
        mix-blend-mode:difference (mismo mecanismo que el marquee del hero
        de index.html): se invierte donde pasa sobre la foto, así que no
        hace falta ningún fondo ni sombra para que se lea.
     3. `.about-splat` — el SVG que trajo Vill (splat rosa + ojo + garabatos),
        siempre en el z-index más alto, tal como se pidió.
   La diagonal pared/piso de la propia foto ya divide la imagen en dos
   temperaturas, igual que la pared/madera del poster de referencia — no hace
   falta agregarla, el encuadre ya la trae. */
/* El alto: como el vector va a todo el ancho y ahora se ve completo, su alto
   queda atado al ancho de la pantalla (aspecto 2.15:1). En pantallas anchas
   eso se comía casi toda la foto, así que el héroe crece lo necesario para
   dejarle a la foto un tercio del alto de la ventana. En pantallas normales
   manda el 100dvh de siempre. */
.about-hero {
  position: relative;
  container-type: inline-size;   /* para medir el SVG en `cqw` (ver .about-text-zone) */
  min-height: max(100dvh, calc(100vw * .3723 + 32vh));
  overflow: hidden;
  background: #2b2320 center 30%/cover no-repeat url("assets/media/About/queen-pose.jpg");
}

.about-marquee { position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; overflow: hidden; mix-blend-mode: difference; pointer-events: none; }
.about-marquee__track {
  display: flex; width: max-content; white-space: nowrap;
  font: 400 clamp(4.2rem, 15vw, 13rem)/.86 var(--script);
  color: #fff;
  animation: qs-about-marquee 18s linear infinite;
}
.about-marquee__track span { padding-right: .28em; }
@keyframes qs-about-marquee {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .about-marquee__track { animation: none; }
}

/* Vill: Vector_overlay_About.svg (el grande) ES la zona donde vive el texto
   -- decora por debajo, el texto va encima. Vector_overlay_About_02.svg (el
   chico) es un acento fijo al margen superior de toda la sección. Las
   figuras 3D van en la capa más alta de todas para no cortarse contra
   ningún panel al girar o crecer.

   Capas de abajo a arriba:
     1. foto de fondo
     2. `.about-marquee` — nombre en movimiento, difference
     3. `.about-top-deco` — el vector chico, al margen superior
     4. `.about-text-zone` — panel de texto: el vector grande decorando por
        debajo (`.about-text-zone-deco`), el texto encima (`.about-copy`)
     5. `.about-deco` — las figuras 3D, siempre por encima de todo */
.about-top-deco {
  position: absolute; z-index: 3;
  top: 0; left: 0; width: 100%; height: auto;
  pointer-events: none;
}

/* Panel de texto: el propio vector ES la zona. Se muestra COMPLETO
   (`height:auto`, nada de `object-fit:cover`), con sus puntas de estrella
   asomando por arriba sobre la foto. No lleva fondo rosa propio -- el rosa
   lo trae el vector, y un recuadro liso detrás le tapaba las puntas.

   El único relleno es `::after`: continúa hacia abajo el mismo magenta del
   archivo para cuando el texto necesita más alto que la ilustración
   (pantallas angostas). Arranca al 22% del alto del SVG, justo donde
   empieza su bloque sólido, así que nunca invade la zona de las puntas.

   El magenta ya es var(--pink) en los dos lados: el SVG traía #e5348b y se
   cambió a #f000a8 en el archivo (una sola clase de las 16.816 que define,
   la de la banda -- el resto de la ilustración no se tocó), para que todos
   los magentas del sitio sean el mismo. */
.about-text-zone {
  /* Alto real del SVG: su viewBox es 1080 x 402.11 -> 0.3723 del ancho. Se
     mide en `cqw` (ancho del héroe) y no en `vw`, porque `vw` incluye la
     barra de scroll de la ventana y el cálculo se desfasaba unos píxeles. */
  --deco-alto: calc(100cqw * .3723);
  --rosa-desde: calc(var(--deco-alto) * .22); /* donde arranca su bloque sólido */
  position: absolute; z-index: 4; left: 0; right: 0; bottom: 0;
  min-height: var(--deco-alto);
  padding: calc(var(--rosa-desde) + clamp(16px, 2.5vw, 34px)) 4% clamp(28px, 5vw, 52px);
}
.about-text-zone::after {
  content: ""; position: absolute; z-index: 0;
  left: 0; right: 0; bottom: 0; top: var(--rosa-desde);
  background: var(--pink);
}
.about-text-zone-deco {
  position: absolute; z-index: 1; top: 0; left: 0;
  width: 100%; height: auto;
  pointer-events: none;
}

/* Figuras 3D decorativas (canvas de Three.js, no imágenes) — interactivas:
   arrastrar gira en 3D, la rueda del mouse crece o encoge. Capa más alta de
   la sección (por encima del panel de texto) para que nada las corte al
   girar o crecer. Ver decorations.js. */
.about-deco { position: absolute; z-index: 10; touch-action: none; cursor: grab; overflow: visible; }
.about-deco:active { cursor: grabbing; }
.about-deco canvas { display: block; width: 100%; height: 100%; }
.about-deco--a { top: 10%; right: 5%; width: clamp(150px, 20vw, 260px); aspect-ratio: 1; }
.about-deco--b { bottom: 6%; right: 7%; width: clamp(180px, 24vw, 320px); aspect-ratio: 1; }

.about-copy {
  position: relative; z-index: 2;
  max-width: min(56%, 620px);
  max-height: 46vh;
  overflow-y: auto;
  padding-right: 14px;
  color: var(--ink);
  scrollbar-width: thin;
  scrollbar-color: #ff2fc0 rgba(16, 16, 16, .18);
}
/* Barra de scroll en tonos magenta (pedido explícito), no el gris del
   sistema operativo. Firefox usa scrollbar-color de arriba; Chrome/Safari/
   Edge usan las pseudoclases -webkit- de abajo. */
.about-copy::-webkit-scrollbar { width: 8px; }
.about-copy::-webkit-scrollbar-track { background: rgba(16, 16, 16, .18); border-radius: 4px; }
.about-copy::-webkit-scrollbar-thumb { background: linear-gradient(180deg, #ff5fd6, #b8006e); border-radius: 4px; }
.about-copy::-webkit-scrollbar-thumb:hover { background: #ff2fc0; }
/* Título: la misma familia que los nombres de proyecto (Nocturne). El resto
   del contenido ya hereda Queen Skittles Pixel de `body` -- esta página no
   usa Arial en ningún texto, pedido explícito de Vill. */
.about-copy__title { margin: 0 0 10px; font: 400 2rem/1 var(--script); color: var(--ink); }

/* Si el texto no cabe en el panel, hace scroll SOLO el texto -- el pedido
   explícito -- no la página entera. */
.about-roles { margin: 0 0 14px; font: 400 .85rem/1.6 var(--pixel); text-transform: uppercase; letter-spacing: .02em; color: var(--ink); }
.about-body { margin: 0 0 18px; font: 400 1rem/1.55 var(--pixel); color: #1c1114; }
.about-body a { text-decoration: underline; text-underline-offset: 3px; color: var(--ink); }
.about-body a:hover, .about-body a:focus-visible { color: #fff; }
.about-pending { margin: 0 0 16px; padding: 10px 12px; border: 1px dashed rgba(16,16,16,.4); font: 400 .78rem/1.5 var(--pixel); color: #2c1a20; background: rgba(244,242,240,.25); }
.about-pending code { color: var(--ink); font-weight: 700; }
.about-social a { display: inline-block; font-family: var(--script); font-size: 1.3rem; color: var(--ink); text-decoration: none; }
.about-social a:hover, .about-social a:focus-visible { color: #fff; }

@media (max-width: 760px) {
  .corner, .tick, .info-module { display: none; }
  .about-marquee__track { font-size: clamp(3.2rem, 15vw, 5rem); }
  .about-top-deco { width: 82%; }
  .about-copy { max-width: 100%; max-height: 50vh; }
  /* A tamaño de escritorio las figuras se ven bien encima del texto, pero en
     una pantalla angosta lo tapan y estorban la lectura: se achican y se van
     a las esquinas. Siguen siendo interactivas igual. */
  .about-deco--a { width: clamp(100px, 28vw, 130px); top: 8%; right: 4%; }
  .about-deco--b { width: clamp(110px, 32vw, 140px); bottom: 2%; right: 2%; }
}

@media (prefers-reduced-motion: reduce) { * { transition-duration: .01ms !important; } }