/* ============================================================
   A.D.G.B — hoja de estilos
   Rojo y negro. El blanco queda solo para el texto (y para el modo claro).
   El rojo es SIEMPRE el mismo (--red-rgb) en los tres modos de color.

   Capas (el orden de abajo manda, no el orden de escritura):
   reset · tokens · base · layout · components · pages · effects · a11y

   MEDIDAS REALES AL 70 %: todas las medidas de este archivo ya están escritas al 70 %
   del diseño original (la raíz vale 100 % = 16 px, sin ningún truco de zoom).
   El tamaño base del texto es 0,7 rem = 11,2 px. Los textos más pequeños nunca bajan de 9–10 px
   y en pantallas táctiles los botones no bajan de 32 px, para que sigan siendo legibles y tocables.
   ============================================================ */

@layer reset, tokens, base, layout, components, pages, effects, a11y;

/* ------------------------------------------------------------
   Fuentes: archivos WOFF2 propios en /fonts (nada se pide a terceros)
   ------------------------------------------------------------ */
@font-face { font-family: "Chakra Petch"; font-style: normal; font-weight: 500; font-display: swap; src: url("/fonts/chakra-petch-500.woff2") format("woff2"); }
@font-face { font-family: "Chakra Petch"; font-style: normal; font-weight: 600; font-display: swap; src: url("/fonts/chakra-petch-600.woff2") format("woff2"); }
@font-face { font-family: "Chakra Petch"; font-style: normal; font-weight: 700; font-display: swap; src: url("/fonts/chakra-petch-700.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/ibm-plex-sans-400.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400 500; font-display: swap; src: url("/fonts/ibm-plex-mono-400.woff2") format("woff2"); }
/* Chino: "-min" trae solo 中文 (la etiqueta del botón de idioma, en todas las páginas); el archivo completo solo se baja si eliges 中文 */
@font-face { font-family: "Noto Sans SC"; font-style: normal; font-weight: 400 500; font-display: swap; src: url("/fonts/noto-sans-sc-400-min.woff2") format("woff2"); unicode-range: U+4E2D, U+6587; }
@font-face { font-family: "Noto Sans SC"; font-style: normal; font-weight: 600 900; font-display: swap; src: url("/fonts/noto-sans-sc-700-min.woff2") format("woff2"); unicode-range: U+4E2D, U+6587; }
@font-face { font-family: "Noto Sans SC"; font-style: normal; font-weight: 400 500; font-display: swap; src: url("/fonts/noto-sans-sc-400.woff2") format("woff2"); unicode-range: U+2E80-4E2C, U+4E2E-6586, U+6588-9FFF, U+3000-303F, U+FF00-FFEF, U+2018-201D, U+2026; }
@font-face { font-family: "Noto Sans SC"; font-style: normal; font-weight: 600 900; font-display: swap; src: url("/fonts/noto-sans-sc-700.woff2") format("woff2"); unicode-range: U+2E80-4E2C, U+4E2E-6586, U+6588-9FFF, U+3000-303F, U+FF00-FFEF, U+2018-201D, U+2026; }

/* Propiedades animables (barrido de las tarjetas) */
@property --sa { syntax: "<number>"; inherits: false; initial-value: 0; }
@property --sw { syntax: "<percentage>"; inherits: false; initial-value: -40%; }

/* ============================================================
   reset
   ============================================================ */
@layer reset {
  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
  ul { list-style: none; }
  img, svg, canvas { display: block; max-width: 100%; }
  a { color: inherit; text-decoration: none; }
  a, button { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
  button { font: inherit; color: inherit; letter-spacing: inherit; background: none; border: 0; border-radius: 0; cursor: pointer; }
  dl, dd { margin: 0; }
  [hidden] { display: none !important; }
}

/* ============================================================
   tokens: marca, tipografía, espacios y los tres modos de color
   ============================================================ */
@layer tokens {
  :root {
    /* Marca: el rojo se define aquí y en ningún otro sitio (js/scene.js lo lee de aquí para dibujar el fondo) */
    --red-rgb: 225 6 0;
    --red: rgb(var(--red-rgb));
    --red-hi-rgb: 251 62 44;      /* brillo de las esferas, la A y el halo del cursor: un rojo más vivo, nunca rosado */
    --red-deep: #7a0a07;          /* sombras de las esferas y estados al apretar */
    --black: #0a0a0a;

    /* Tipografía: Chakra Petch (títulos, botones, menús) · IBM Plex Sans (texto) · IBM Plex Mono (etiquetas) */
    --font-display: "Chakra Petch", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", "Arial Narrow", Arial, sans-serif;
    --font-body: "IBM Plex Sans", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-mono: "IBM Plex Mono", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", ui-monospace, "SFMono-Regular", Menlo, monospace;

    --fs-1: max(.525rem, 9px);      /* etiquetas (mono) */
    --fs-2: max(.6125rem, 10px);    /* interfaz: botones, menú */
    --fs-3: .7rem;                   /* texto */
    --fs-4: .7875rem;               /* texto destacado */
    --fs-5: .9625rem;               /* subtítulos */
    --fs-7: clamp(1.4rem, .91rem + 1.96vw, 2.275rem);   /* títulos de sección */
    --fs-8: clamp(1.82rem, .98rem + 3.5vw, 3.325rem);   /* título de página */

    --tr-0: .02em;   /* texto corrido */
    --tr-1: .12em;   /* botones y menús */
    --tr-2: .18em;   /* etiquetas pequeñas */

    /* Espaciado (base 4) */
    --sp-1: .175rem; --sp-2: .35rem; --sp-3: .525rem; --sp-4: .7rem;
    --sp-5: 1.05rem; --sp-6: 1.4rem; --sp-7: 2.1rem; --sp-8: 2.8rem;
    --section-y: clamp(2.625rem, 2.275rem + 2.8vw, 4.725rem);
    --gutter: clamp(.7875rem, 2.8vw, 1.4rem);
    --container: 52.5rem;
    --card-pad: clamp(.875rem, 2.1vw, 1.4rem);
    --header-h: 3.15rem;
    --ctl: 1.575rem;                 /* alto de los botones de la cabecera */

    --ease: cubic-bezier(.2, .7, .1, 1);
  }

  /* Modo OSCURO: fondos negros y rojo; el blanco es solo para el texto */
  :root {
    color-scheme: dark;
    --bg: #0a0a0a;
    --surface: #121212;
    --surface-2: #1a1a1a;
    --fg: #fff;
    --fg-2: rgb(255 255 255 / .74);
    --fg-3: rgb(255 255 255 / .52);
    --line: rgb(255 255 255 / .12);
    --line-2: rgb(255 255 255 / .26);
    --focus: var(--red);
    --shade: 10 10 10;              /* velos sobre el fondo animado */
    --ink: 255 255 255;             /* líneas del fondo animado */
    --tile-bg: #0a0a0a;
    --tile-ink: 255 255 255;
    --wipe-ink: #0a0a0a;            /* la A de la cortina roja entre páginas */
    --noise-op: .06;
  }

  /* Modo A.D.G.B (por defecto): el oscuro, con los fondos levemente rojos */
  :root[data-theme="adgb"] {
    --black: #160606;
    --bg: #160606;
    --surface: #200909;
    --surface-2: #2b0e0d;
    --shade: 22 6 6;
    --tile-bg: #160606;
    --wipe-ink: #160606;
  }

  /* Modo CLARO: el negativo exacto del oscuro (255 − valor); el rojo no cambia */
  :root[data-theme="light"] {
    color-scheme: light;
    --bg: #f5f5f5;
    --surface: #ededed;
    --surface-2: #e5e5e5;
    --fg: #000;
    --fg-2: rgb(0 0 0 / .74);
    --fg-3: rgb(0 0 0 / .52);
    --line: rgb(0 0 0 / .12);
    --line-2: rgb(0 0 0 / .26);
    --shade: 245 245 245;
    --ink: 0 0 0;
    --tile-bg: #f5f5f5;
    --tile-ink: 0 0 0;
    --wipe-ink: #fff;
    --noise-op: .045;
  }

  @media (pointer: coarse) { :root { --ctl: 32px; } }

  /* Chino: menos espacio entre letras */
  :root[lang="zh-CN"] { --tr-0: 0em; --tr-1: .04em; --tr-2: .08em; }

  @media (prefers-contrast: more) {
    :root { --line: rgb(255 255 255 / .34); --line-2: rgb(255 255 255 / .6); --fg-2: rgb(255 255 255 / .92); --fg-3: rgb(255 255 255 / .78); }
    :root[data-theme="light"] { --line: rgb(0 0 0 / .34); --line-2: rgb(0 0 0 / .6); --fg-2: rgb(0 0 0 / .92); --fg-3: rgb(0 0 0 / .78); }
  }
}

/* ============================================================
   base
   ============================================================ */
@layer base {
  html { font-size: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 1.05rem); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

  body {
    min-height: 100vh; min-height: 100svh;
    display: flex; flex-direction: column;
    background: var(--bg); color: var(--fg);
    font-family: var(--font-body); font-size: var(--fs-3); font-weight: 400; line-height: 1.65;
    letter-spacing: var(--tr-0);
    overflow-x: hidden; overflow-x: clip;
    -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility; font-kerning: normal; font-synthesis: none;
  }
  :root[lang="zh-CN"] body { line-height: 1.8; }

  ::selection { background: var(--red); color: #fff; }

  /* Barra de desplazamiento con los colores de la marca */
  ::-webkit-scrollbar { width: .525rem; }
  ::-webkit-scrollbar-track { background: var(--bg); }
  ::-webkit-scrollbar-thumb { background: var(--red); border: .1312rem solid var(--bg); background-clip: padding-box; }
  ::-webkit-scrollbar-thumb:hover { background: var(--red-deep); }
  @supports not selector(::-webkit-scrollbar) { html { scrollbar-color: var(--red) var(--bg); scrollbar-width: thin; } }

  /* La "A" roja: sello de la marca. Siempre roja y siempre en Chakra Petch Bold, también dentro de textos con otra tipografía */
  .a { color: var(--red); font-family: var(--font-display); font-weight: 700; }

  .h1, .h2, .h3 { font-family: var(--font-display); text-wrap: balance; }
  .h1 { font-size: var(--fs-8); font-weight: 700; line-height: 1; letter-spacing: -.01em; }
  .h2 { font-size: var(--fs-7); font-weight: 600; line-height: 1.06; letter-spacing: -.005em; }
  .h3 { font-size: var(--fs-5); font-weight: 600; line-height: 1.2; letter-spacing: .02em; }
  .lead { font-size: var(--fs-4); color: var(--fg-2); max-width: 58ch; text-wrap: pretty; }
  .text { color: var(--fg-2); max-width: 60ch; text-wrap: pretty; }

  .eyebrow { display: inline-flex; align-items: center; gap: var(--sp-3); font-family: var(--font-mono); font-size: var(--fs-1); letter-spacing: var(--tr-2); color: var(--red); }
  .eyebrow::before { content: ""; width: 1.05rem; height: 2px; background: currentColor; }

  .sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}

/* ============================================================
   layout: contenedor, cabecera, pie, secciones, fondo
   ============================================================ */
@layer layout {
  .container { width: 100%; max-width: calc(var(--container) + var(--gutter) * 2); margin-inline: auto; padding-inline: max(var(--gutter), env(safe-area-inset-left), env(safe-area-inset-right)); }
  .main { flex: 1; display: flex; flex-direction: column; position: relative; }
  .main > .grow { flex: 1; }
  .section { position: relative; z-index: 2; padding-block: var(--section-y); color: var(--fg); }

  .skip { position: fixed; left: var(--sp-4); top: -3.5rem; z-index: 300; padding: .525rem .7875rem; background: var(--red); color: #fff; font-family: var(--font-display); font-weight: 600; font-size: var(--fs-2); letter-spacing: var(--tr-1); transition: top .2s ease; }
  .skip:focus { top: var(--sp-4); }

  /* Fondo animado (un solo lienzo fijo) y su cuadrícula, que dibuja el CSS (siempre nítida, sin coste por fotograma) */
  .scene { position: fixed; inset: 0; z-index: 0; width: 100%; height: 100%; pointer-events: none; }
  body::before {
    content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
    background:
      linear-gradient(rgb(var(--ink) / .05) 1px, transparent 1px) 0 0 / var(--cell, 44.8px) var(--cell, 44.8px),
      linear-gradient(90deg, rgb(var(--ink) / .05) 1px, transparent 1px) 0 0 / var(--cell, 44.8px) var(--cell, 44.8px);
    -webkit-mask-image: radial-gradient(ellipse at 50% 50%, #000 25%, rgb(0 0 0 / .3) 100%);
    mask-image: radial-gradient(ellipse at 50% 50%, #000 25%, rgb(0 0 0 / .3) 100%);
  }

  /* Cabecera (la misma en todas las páginas) */
  .header { position: fixed; inset: 0 0 auto 0; z-index: 100; height: var(--header-h); color: var(--fg); transition: transform .5s var(--ease), opacity .7s ease; }
  .header.is-hidden { transform: translateY(-101%); }     /* se esconde al bajar y vuelve al subir */
  /* Velo suave bajo la cabecera al hacer scroll: difumina lo que pasa por detrás para que el menú siempre se lea */
  .header::before {
    content: ""; position: absolute; inset: 0 0 -1.225rem 0; z-index: -1; pointer-events: none;
    background: linear-gradient(to bottom, rgb(var(--shade) / .7), rgb(var(--shade) / 0));
    -webkit-backdrop-filter: blur(.4375rem); backdrop-filter: blur(.4375rem);
    -webkit-mask-image: linear-gradient(to bottom, #000 45%, transparent); mask-image: linear-gradient(to bottom, #000 45%, transparent);
    opacity: 0; transition: opacity .4s ease;
  }
  .header.is-stuck::before { opacity: 1; }
  .header__inner { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-5); }
  .header__actions { display: flex; align-items: center; gap: var(--sp-3); }

  .logo { display: inline-flex; align-items: center; gap: var(--sp-3); }
  .logo__mark { width: .4375rem; height: .4375rem; background: var(--red); flex-shrink: 0; transition: rotate .5s var(--ease), scale .5s var(--ease); }
  .logo__text { font-family: var(--font-display); font-weight: 700; font-size: .875rem; letter-spacing: .14em; line-height: 1; }
  /* El rojo se ve más fino que el blanco sobre oscuro: un contorno finísimo del mismo color iguala el grosor óptico de la A con "D.G.B" */
  .logo__text .a, .marquee__group b { -webkit-text-stroke: .022em currentColor; paint-order: stroke fill; }

  .nav { display: flex; gap: var(--sp-1); }
  .nav a { position: relative; padding: .4375rem .7rem; font-family: var(--font-display); font-weight: 500; font-size: var(--fs-2); letter-spacing: var(--tr-1); color: var(--fg-2); transition: color .25s ease; }
  .nav a::after { content: ""; position: absolute; left: .7rem; right: .7rem; bottom: .175rem; height: 2px; background: var(--red); transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease); }
  .nav a[aria-current="page"] { color: var(--fg); }
  .nav a[aria-current="page"]::after { transform: scaleX(1); }

  .burger { display: none; position: relative; width: 1.75rem; height: 1.75rem; }
  .burger span { position: absolute; left: .3937rem; right: .3937rem; height: 2px; background: currentColor; transition: transform .4s var(--ease), top .4s var(--ease); }
  .burger span:first-child { top: .6562rem; }
  .burger span:last-child { top: 1.05rem; }
  .burger[aria-expanded="true"] span:first-child { top: .875rem; transform: rotate(45deg); }
  .burger[aria-expanded="true"] span:last-child { top: .875rem; transform: rotate(-45deg); }

  /* Pie de página */
  .footer { position: relative; z-index: 2; color: var(--fg); }
  .footer__grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: var(--sp-7); padding-block: var(--sp-8); }
  .footer__brand p { margin-top: var(--sp-4); max-width: 34ch; color: var(--fg-2); }
  .footer__title { margin-bottom: var(--sp-4); font-family: var(--font-mono); font-size: var(--fs-1); letter-spacing: var(--tr-2); color: var(--fg-3); }
  .footer__list { display: grid; gap: var(--sp-3); }
  .footer__list a { font-family: var(--font-display); font-weight: 500; font-size: var(--fs-2); letter-spacing: var(--tr-1); color: var(--fg-2); transition: color .25s ease; }
  .footer__bottom { position: relative; padding-block: var(--sp-5); font-family: var(--font-mono); font-size: var(--fs-1); letter-spacing: var(--tr-1); color: var(--fg-3); }
  .footer__bottom::before { content: ""; position: absolute; top: 0; left: max(var(--gutter), env(safe-area-inset-left)); right: max(var(--gutter), env(safe-area-inset-right)); height: 1px; background: var(--line); }

  /* Bloque de cierre: una tarjeta con borde, panel y esquinas rojas */
  .cta { position: relative; z-index: 2; padding-block: clamp(1.925rem, 1.54rem + 2.1vw, 3.15rem); color: var(--fg); }
  .cta__card { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--sp-6); align-items: center; padding: var(--card-pad); }
  .cta .h2 { font-size: clamp(.805rem, .7rem + .49vw, 1.05rem); line-height: 1.15; }
  .cta .lead { margin-top: var(--sp-3); }
}

/* ============================================================
   components
   ============================================================ */
@layer components {
  /* Botones: el relleno sube desde abajo al pasar el mouse / tocar */
  .btn {
    --hover-bg: var(--black); --hover-fg: #fff; --hover-bd: var(--red);
    position: relative; isolation: isolate; overflow: hidden;
    display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-3);
    min-height: 2.1rem; padding: 0 1.225rem;
    background: var(--red); color: #fff; border: 1px solid var(--red);
    font-family: var(--font-display); font-weight: 600; font-size: var(--fs-2); letter-spacing: var(--tr-1); line-height: 1; white-space: nowrap;
    transition: color .35s var(--ease), border-color .35s var(--ease), box-shadow .45s var(--ease), scale .25s var(--ease);
  }
  .btn::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--hover-bg); transform: translateY(101%); transition: transform .45s var(--ease); }
  .btn:active { color: var(--hover-fg); border-color: var(--hover-bd); scale: .98; }
  .btn:active::before { transform: translateY(0); }
  .btn--outline { --hover-bg: var(--red); --hover-fg: #fff; --hover-bd: var(--red); background: transparent; color: var(--fg); border-color: var(--line-2); }
  .hero .btn--outline, .page-head .btn--outline, .notfound .btn--outline { background: rgb(var(--shade) / .55); }
  .btn-row { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
  @media (pointer: coarse) { .btn { min-height: max(2.1rem, 38px); } }

  /* Controles de la cabecera (idioma, sonido y modo): mismo estilo que los botones, con el activo en rojo sólido. Los tres idiomas forman un selector unido. */
  .lang { display: inline-flex; }
  .lang__btn + .lang__btn { margin-left: -1px; }
  .lang__btn, .sound, .theme {
    --hover-bg: var(--red); --hover-fg: #fff; --hover-bd: var(--red);
    position: relative; isolation: isolate; overflow: hidden; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    height: var(--ctl); min-width: var(--ctl); padding: 0 .525rem;
    background: rgb(var(--shade) / .55); color: var(--fg); border: 1px solid var(--line-2);
    font-family: var(--font-display); font-weight: 600; font-size: var(--fs-2); letter-spacing: var(--tr-1); line-height: 1; white-space: nowrap;
    transition: color .35s var(--ease), border-color .35s var(--ease), box-shadow .45s var(--ease), scale .25s var(--ease);
  }
  .sound, .theme { padding: 0; }
  .lang__btn::before, .sound::before, .theme::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--hover-bg); transform: translateY(101%); transition: transform .45s var(--ease); }
  .lang__btn:active, .sound:active, .theme:active { color: var(--hover-fg); border-color: var(--hover-bd); scale: .98; }
  .lang__btn:active::before, .sound:active::before, .theme:active::before { transform: translateY(0); }
  .lang__btn.is-active, .sound.is-on { background: var(--red); border-color: var(--red); color: #fff; }
  .lang__btn.is-active, .lang__btn:focus-visible { z-index: 1; }
  .sound svg, .theme svg { width: max(.7875rem, 14px); height: max(.7875rem, 14px); shape-rendering: geometricPrecision; }
  .sound svg *, .theme svg * { vector-effect: non-scaling-stroke; stroke-width: 2px; }
  .sound .sound__waves { display: none; }
  .sound.is-on .sound__waves { display: inline; }
  .sound.is-on .sound__slash { display: none; }

  /* Botón de modo: el icono es el del modo al que se pasa. A.D.G.B → luna (va a oscuro) · Oscuro → sol (va a claro) · Claro → la A (va a A.D.G.B) */
  .theme .theme__moon, .theme .theme__a { display: none; }
  :root[data-theme="light"] .theme .theme__sun, :root[data-theme="adgb"] .theme .theme__sun { display: none; }
  :root[data-theme="light"] .theme .theme__a { display: inline; }
  :root[data-theme="adgb"] .theme .theme__moon { display: inline; }
  .theme .theme__a { stroke: none; }
  .theme.is-spin svg { animation: themeSpin .75s var(--ease); }
  @keyframes themeSpin { from { rotate: -160deg; scale: .3; opacity: 0; } to { rotate: 0deg; scale: 1; opacity: 1; } }

  /* Estado del proyecto */
  .chip { display: inline-flex; align-items: center; gap: .35rem; padding: .2625rem .525rem .2625rem .4375rem; border: 1px solid var(--line-2); font-family: var(--font-mono); font-size: var(--fs-1); letter-spacing: var(--tr-1); line-height: 1.2; color: var(--fg); }
  .chip::before { content: ""; width: .3062rem; height: .3062rem; border-radius: 50%; background: var(--red); flex-shrink: 0; animation: ping 2.4s ease-out infinite; }
  @keyframes ping {
    0% { box-shadow: 0 0 0 0 rgb(var(--red-rgb) / .55); }
    70% { box-shadow: 0 0 0 .35rem rgb(var(--red-rgb) / 0); }
    100% { box-shadow: 0 0 0 0 rgb(var(--red-rgb) / 0); }
  }

  /* Tarjeta con las esquinas rojas de la marca */
  .card { position: relative; background: var(--surface); border: 1px solid var(--line); color: var(--fg); transition: border-color .35s ease, background-color .35s ease, --sa .45s ease; }
  .card::before, .card::after { content: ""; position: absolute; width: .7rem; height: .7rem; pointer-events: none; z-index: 3; transition: width .35s var(--ease), height .35s var(--ease); }
  .card::before { top: -1px; left: -1px; border-top: 2px solid var(--red); border-left: 2px solid var(--red); }
  .card::after { right: -1px; bottom: -1px; border-right: 2px solid var(--red); border-bottom: 2px solid var(--red); }

  /* El cuadro con la A roja exactamente en el centro (sigue al modo; el rojo no cambia) */
  .tile {
    position: relative; isolation: isolate; overflow: hidden; container-type: size;
    display: grid; place-items: center; width: 100%; aspect-ratio: 1;
    border: 1px solid rgb(var(--tile-ink) / .14); color: var(--red);
    background:
      linear-gradient(rgb(var(--tile-ink) / .04) 1px, transparent 2px) calc(50% + .7rem) calc(50% + .7rem) / 1.4rem 1.4rem,
      linear-gradient(90deg, rgb(var(--tile-ink) / .04) 1px, transparent 2px) calc(50% + .7rem) calc(50% + .7rem) / 1.4rem 1.4rem,
      radial-gradient(circle at 50% 50%, rgb(var(--red-rgb) / .4), transparent 64%),
      var(--tile-bg);
  }
  .tile__ring, .tile__sq, .tile__orbit { position: absolute; left: 50%; top: 50%; translate: -50% -50%; width: var(--d); height: var(--d); pointer-events: none; }
  .tile__ring { border: 1px solid rgb(var(--tile-ink) / .12); border-radius: 50%; box-shadow: 0 0 .6125rem rgb(var(--tile-ink) / .04), inset 0 0 .6125rem rgb(var(--tile-ink) / .03); }
  .tile__ring.r1 { --d: 64cqmin; border-color: rgb(var(--red-rgb) / .6); }
  .tile__ring.r2 { --d: 90cqmin; }
  .tile__sq { --d: 46cqmin; --r0: 45deg; rotate: 45deg; border: 1px solid rgb(var(--tile-ink) / .24); animation: spin 48s linear infinite; }
  .tile__orbit { animation: spin var(--t, 18s) linear infinite; }
  .tile__orbit::after { content: ""; position: absolute; left: 50%; top: 0; width: clamp(.3062rem, 4.5cqmin, .6125rem); aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; background: radial-gradient(circle at 35% 35%, rgb(var(--red-hi-rgb)), var(--red) 55%, var(--red-deep)); box-shadow: 0 0 .7rem rgb(var(--red-rgb) / .8); }
  .tile__orbit.o1 { --d: 64cqmin; --t: 16s; }
  .tile__orbit.o2 { --d: 90cqmin; --t: 26s; animation-direction: reverse; }
  .tile__orbit.o2::after { width: clamp(.2188rem, 3cqmin, .3937rem); background: transparent; border: 2px solid var(--red); box-shadow: 0 0 .525rem rgb(var(--red-rgb) / .55); }
  .tile__a { position: relative; z-index: 2; width: 44cqmin; height: 44cqmin; color: var(--red); filter: drop-shadow(0 0 1.1375rem rgb(var(--red-rgb) / .55)); transition: transform .7s var(--ease); }
  @keyframes spin { from { rotate: var(--r0, 0deg); } to { rotate: calc(var(--r0, 0deg) + 360deg); } }

  /* Migas de pan */
  .crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); font-family: var(--font-mono); font-size: var(--fs-1); letter-spacing: var(--tr-1); color: var(--fg-3); }
  .crumbs a { color: var(--fg-2); transition: color .25s ease; }
  .crumbs [aria-current] { color: var(--fg); }
  .crumbs i { font-style: normal; color: var(--red); }

  /* Brillo que cruza los botones rojos (también el idioma activo y el sonido encendido) */
  .btn:not(.btn--outline)::after, .lang__btn.is-active::after, .sound.is-on::after {
    content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1;
    background: linear-gradient(105deg, transparent 36%, rgb(255 255 255 / .3) 50%, transparent 64%);
    translate: -130% 0; animation: btnShine 6s ease-in-out 1.5s infinite;
  }
  @keyframes btnShine { 0%, 68% { translate: -130% 0; } 100% { translate: 130% 0; } }
}

/* ============================================================
   pages: pantalla de carga, cortina, portada, y cada página
   ============================================================ */
@layer pages {
  /* Pantalla de carga y cortina */
  .loader {
    position: fixed; inset: 0; z-index: 200;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-5);
    color: var(--fg);                 /* sin fondo propio: detrás se ve el fondo animado */
    transition: opacity .7s ease .1s, transform .9s var(--ease) .1s, visibility 0s linear 1s;
    animation: failsafe-hide .01s linear 5s forwards;
  }
  .loader__word, .loader__pct { text-shadow: 0 0 .525rem rgb(var(--shade) / .9), 0 0 1.4rem rgb(var(--shade) / .7); }
  .loader__word { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.68rem, 5.6vw, 3.5rem); letter-spacing: .22em; padding-left: .22em; animation: loaderWord 1.1s var(--ease) both; }
  .loader__bar { width: min(11.375rem, 42vw); height: 2px; background: var(--line); overflow: hidden; }
  .loader__bar span { display: block; width: 100%; height: 100%; background: var(--red); transform: translateX(-100%); animation: loaderBar 1.1s var(--ease) .1s forwards; }
  .loader__pct { font-family: var(--font-mono); font-size: var(--fs-1); letter-spacing: var(--tr-2); color: var(--fg-3); }
  .loader.is-done { opacity: 0; transform: translateY(-1.4rem); visibility: hidden; }
  @keyframes loaderWord { from { opacity: 0; letter-spacing: .5em; } to { opacity: 1; letter-spacing: .22em; } }
  @keyframes loaderBar { to { transform: translateX(0); } }
  @keyframes failsafe-hide { to { visibility: hidden; opacity: 0; } }
  @keyframes failsafe-show { to { opacity: 1; transform: none; } }

  /* Primera visita: mientras carga solo se ve el fondo animado con el nombre; la página aparece al terminar.
     La clase has-loader la pone js/boot.js antes de pintar (sin parpadeo); si algo falla, a los 5 s todo se muestra igual. */
  .has-loader body:not(.is-ready) { overflow: hidden; }
  .has-loader body:not(.is-ready) :is(.header, .main, .footer) { opacity: 0; animation: failsafe-show .01s linear 5s forwards; }
  .main, .footer { transition: opacity .7s ease; }

  .wipe {   /* cortina roja con borde diagonal */
    position: fixed; inset: 0 -16vw 0 0; padding-right: 16vw; z-index: 150;
    clip-path: polygon(0 0, calc(100% - 16vw) 0, 100% 100%, 0 100%);
    display: none; align-items: center; justify-content: center;
    background: var(--red); color: var(--wipe-ink);
    transform: translateX(-101%); pointer-events: none;
  }
  .wipe svg { width: min(21vw, 11.375rem); height: min(21vw, 11.375rem); }
  .is-arriving .wipe { display: flex; transform: translateX(0); }
  .is-arriving .loader, .skip-loader .loader { display: none; }

  /* Barra de progreso del scroll: la mueve el propio navegador (scroll-timeline); js/scroll.js solo la anima donde no existe */
  .progress { position: fixed; top: 0; left: 0; z-index: 120; width: 100%; height: 2px; background: var(--red); box-shadow: 0 0 .525rem 1px rgb(var(--red-rgb) / .75); transform-origin: left; transform: scaleX(var(--p, 0)); }
  @supports (animation-timeline: scroll()) {
    .progress { transform: scaleX(0); animation: progress linear both; animation-timeline: scroll(root block); }
    @keyframes progress { to { transform: scaleX(1); } }
  }

  /* Portada: las letras A D G B */
  .hero { position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: center; min-height: 100vh; min-height: 100svh; padding: calc(var(--header-h) + 1.75rem) 0 2.45rem; }
  .hero__inner { position: relative; z-index: 2; }
  .bigword { display: flex; align-items: flex-start; gap: .035em; margin: var(--sp-5) 0 clamp(1.225rem, .84rem + 1.4vw, 2.1rem); font-family: var(--font-display); font-weight: 700; font-size: clamp(2.8rem, 15.05vw, 11.9rem); line-height: .88; user-select: none; }
  .bl {
    position: relative; display: block; color: var(--fg); opacity: 0;
    text-shadow: 0 .35rem 2.625rem rgb(var(--shade) / .55);
    animation: blIn 1.1s var(--ease) both paused, failsafe-show .01s linear 5s forwards;
    animation-delay: calc(var(--i) * 85ms + 120ms), 5s;
    transition: translate .5s var(--ease), scale .5s var(--ease), text-shadow .5s ease;
  }
  .bl--a { color: var(--red); text-shadow: 0 0 3.5rem rgb(var(--red-rgb) / .55); }
  .bl--dot { margin-inline: .01em; }
  .bl.is-hot { translate: 0 -5%; }
  .bl--a.is-hot { scale: 1.06; text-shadow: 0 0 5.25rem rgb(var(--red-rgb) / .95), 0 0 1.4875rem rgb(var(--red-hi-rgb) / .6); }
  .is-ready .bl { animation-play-state: running, running; }
  /* Copia de la letra (en data-t) que se parte y parpadea en rojo al pasar el mouse */
  .bl::after { content: attr(data-t); position: absolute; left: 0; top: 0; color: var(--red); opacity: 0; pointer-events: none; text-shadow: none; }
  .bl--a::after { color: rgb(var(--red-hi-rgb)); }
  .bl.is-hot::after { animation: blGlitch .5s steps(1, end) 1; }
  @keyframes blGlitch {
    0% { opacity: .9; transform: translate(-.2625rem, 2px); clip-path: inset(8% 0 58% 0); }
    20% { opacity: .9; transform: translate(.2188rem, -2px); clip-path: inset(56% 0 10% 0); }
    40% { opacity: .8; transform: translate(-.1312rem, 1px); clip-path: inset(30% 0 36% 0); }
    60% { opacity: .7; transform: translate(.175rem, 0); clip-path: inset(66% 0 4% 0); }
    80% { opacity: .5; transform: translate(-2px, -1px); clip-path: inset(2% 0 74% 0); }
    100% { opacity: 0; transform: none; clip-path: inset(0); }
  }
  @keyframes blIn { from { opacity: 0; transform: translateY(42%) scale(.96); } to { opacity: 1; transform: none; } }
  /* Luz roja que respira detrás de la A grande */
  .bl--a::before { content: ""; position: absolute; inset: 8% -14%; z-index: -1; pointer-events: none; border-radius: 50%; background: radial-gradient(closest-side, rgb(var(--red-rgb) / .4), transparent); filter: blur(1.1375rem); animation: aPulse 4.8s ease-in-out infinite; }
  @keyframes aPulse { 0%, 100% { opacity: .3; scale: .92; } 50% { opacity: .85; scale: 1.08; } }

  .hero__foot { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--sp-6); }
  .hero__sub { max-width: 54ch; font-size: var(--fs-4); color: var(--fg-2); }
  .hero__meta { display: flex; align-items: center; position: relative; margin-top: var(--sp-8); padding-top: var(--sp-5); font-family: var(--font-mono); font-size: var(--fs-1); letter-spacing: var(--tr-2); color: var(--fg-3); }
  .hero__scroll { display: inline-flex; align-items: center; gap: var(--sp-3); }
  .hero__scroll i { position: relative; overflow: hidden; width: 2px; height: 1.4875rem; background: var(--line); }
  .hero__scroll i::after { content: ""; position: absolute; left: 0; top: -100%; width: 2px; height: 100%; background: var(--red); animation: drip 2.2s var(--ease) infinite; }
  @keyframes drip { to { top: 100%; } }

  /* Aparición al cargar */
  .pre { opacity: 0; transform: translateY(1.05rem); transition: opacity 1s ease, transform 1s var(--ease); transition-delay: var(--d, 0ms); animation: failsafe-show .01s linear 5s forwards; }
  .is-ready .pre { opacity: 1; transform: none; animation: none; }

  /* Cinta con el nombre A.D.G.B que corre sin parar */
  .marquee { position: relative; z-index: 2; overflow: hidden; padding-block: .35rem; color: var(--fg); -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
  .marquee__track { display: flex; width: max-content; animation: marquee 40s linear infinite; }
  .marquee__group { display: flex; flex-shrink: 0; }
  .marquee__group span { display: inline-block; padding-block: .7875rem; white-space: nowrap; font-family: var(--font-display); font-weight: 700; font-size: var(--fs-4); letter-spacing: .16em; }
  .marquee__group span b { color: var(--red); font-weight: 700; font-size: 1em; }
  .marquee__group span::after { content: ""; display: inline-block; width: .35rem; height: .35rem; margin: 0 var(--sp-6); background: var(--red); vertical-align: middle; }
  @keyframes marquee { to { transform: translateX(-50%); } }

  /* Sobre mí */
  .about { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: clamp(1.4rem, .7rem + 2.8vw, 4.2rem); align-items: center; }
  .about__text > * + * { margin-top: var(--sp-4); }
  .seal { padding: var(--card-pad); }
  .seal .tile { margin-bottom: var(--sp-5); }
  .seal .h3 { margin-bottom: var(--sp-2); }
  .seal p { color: var(--fg-2); }

  /* Cabecera de las páginas internas */
  .page-head { position: relative; isolation: isolate; overflow: hidden; padding: calc(var(--header-h) + clamp(1.925rem, 1.4rem + 2.8vw, 3.85rem)) 0 clamp(1.925rem, 1.4rem + 2.1vw, 3.15rem); }
  .page-head__inner { position: relative; z-index: 2; }
  .page-head__inner > * + * { margin-top: var(--sp-4); }

  /* Proyectos */
  .project { display: grid; grid-template-columns: minmax(8.75rem, 12.25rem) minmax(0, 1fr); gap: clamp(1.05rem, .7rem + 2.1vw, 2.45rem); padding: clamp(.875rem, .7rem + 1.4vw, 1.75rem); }
  .project__side { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-4); }
  .project__body > * + * { margin-top: var(--sp-4); }
  .project__body .btn-row { margin-top: var(--sp-6); }

  /* Redes */
  .channels { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); gap: var(--sp-5); }
  .channel { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-3); padding: var(--card-pad); min-height: 9.625rem; }
  .channel__label { font-family: var(--font-mono); font-size: var(--fs-1); letter-spacing: var(--tr-2); color: var(--red); }
  .channel__value { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-5); letter-spacing: .02em; overflow-wrap: anywhere; line-height: 1.2; }
  .channel--soon { border-style: dashed; background: transparent; }
  .channel--soon::before, .channel--soon::after { display: none; }
  .channel--soon .channel__label, .channel--soon .channel__value { color: var(--fg-3); }

  /* 404 */
  .notfound { position: relative; isolation: isolate; overflow: hidden; flex: 1; display: grid; place-items: center; text-align: center; padding: calc(var(--header-h) + 1.75rem) 0 2.8rem; }
  .notfound__inner { position: relative; z-index: 2; }
  .notfound__code { font-family: var(--font-display); font-weight: 700; font-size: clamp(4.2rem, 16.8vw, 10.5rem); line-height: .9; letter-spacing: .02em; text-shadow: 0 .35rem 2.625rem rgb(var(--shade) / .55); }
  .notfound__text { margin: var(--sp-4) auto var(--sp-6); max-width: 38ch; color: var(--fg-2); }
}

/* ============================================================
   effects: movimiento, hover, cursor, ruido, adaptación a pantallas
   ============================================================ */
@layer effects {
  /* Revelado al hacer scroll */
  [data-reveal] { opacity: 0; transform: translateY(1.4rem); transition: opacity 1s ease var(--d, 0ms), transform 1.1s var(--ease) var(--d, 0ms), border-color .35s ease, background-color .35s ease, --sa .45s ease; animation: failsafe-show .01s linear 6s forwards; }
  [data-reveal].in { opacity: 1; transform: none; animation: none; }
  .fx [data-reveal] .h2 { clip-path: inset(0 100% 0 0); transition: clip-path 1.2s var(--ease) .25s; animation: failsafe-clip .01s linear 6s forwards; }
  .fx [data-reveal].in .h2 { clip-path: inset(0); animation: none; }
  @keyframes failsafe-clip { to { clip-path: inset(0); } }
  .fx [data-reveal] .eyebrow::before { width: 0; transition: width .9s var(--ease) .35s; }
  .fx [data-reveal].in .eyebrow::before { width: 1.05rem; }

  /* Cambio de modo: el modo nuevo aparece dentro de un círculo que crece desde el botón (View Transitions) */
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
  ::view-transition-old(root) { z-index: 1; }
  ::view-transition-new(root) { z-index: 2; }
  /* Respaldo sin View Transitions: fundido suave (js/theme.js pone la clase unos instantes) */
  .theme-switching, .theme-switching *, .theme-switching *::before, .theme-switching *::after { transition: background-color .4s ease, color .4s ease, border-color .4s ease, fill .4s ease, stroke .4s ease !important; }

  /* Cambio de idioma */
  [data-i18n] { transition: opacity .26s ease, filter .26s ease; }
  .lang-switching [data-i18n] { opacity: 0; filter: blur(.3062rem); }

  /* Halo de luz que sigue al cursor */
  .cursor-glow {
    position: fixed; top: 0; left: 0; z-index: 399; width: 27.125rem; height: 27.125rem; margin: -13.5625rem 0 0 -13.5625rem; border-radius: 50%;
    background: radial-gradient(circle, rgb(var(--red-hi-rgb) / .36), rgb(var(--red-rgb) / .17) 22%, rgb(var(--red-rgb) / .06) 44%, rgb(var(--red-rgb) / .015) 58%, transparent 70%);
    mix-blend-mode: screen; pointer-events: none; opacity: 0; transition: opacity .6s ease; will-change: transform;
  }
  :root[data-theme="light"] .cursor-glow { mix-blend-mode: multiply; background: radial-gradient(circle, rgb(var(--red-rgb) / .2), rgb(var(--red-rgb) / .08) 26%, rgb(var(--red-rgb) / .025) 48%, transparent 68%); }
  .cursor-glow.is-on { opacity: 1; }

  /* Cursor propio: punto exacto con un aro redondo y suave */
  .cur, .cur-dot { position: fixed; left: 0; top: 0; z-index: 400; pointer-events: none; border-radius: 50%; opacity: 0; will-change: translate; transition: opacity .3s ease, scale .4s var(--ease), background-color .3s ease, border-color .3s ease; }
  .cur { width: 1.6625rem; height: 1.6625rem; margin: -.8312rem 0 0 -.8312rem; border: 1.5px solid rgb(var(--red-rgb) / .7); background: rgb(var(--red-rgb) / .03); }
  .cur-dot { width: .3062rem; height: .3062rem; margin: -.1532rem 0 0 -.1532rem; background: var(--red); box-shadow: 0 0 0 2px rgb(var(--shade) / .9), 0 0 .6125rem rgb(var(--red-rgb) / .6); }
  .cur.is-on, .cur-dot.is-on { opacity: 1; }
  .cur.is-link { scale: 1.45; background: rgb(var(--red-rgb) / .14); border-color: var(--red); }
  .cur-dot.is-link { scale: .6; }
  .cur.is-down { scale: .72; }
  .cur-dot.is-down { scale: 1.35; }
  .has-cur, .has-cur * { cursor: none !important; }

  /* Onda y chispas al hacer clic */
  .ripple, .spark { position: fixed; z-index: 398; pointer-events: none; border-radius: 50%; }
  .ripple { width: .6125rem; height: .6125rem; margin: -.3062rem 0 0 -.3062rem; border: 1.5px solid var(--red); animation: ripple .75s var(--ease) forwards; }
  .spark { width: .175rem; height: .175rem; margin: -2px 0 0 -2px; background: var(--red); box-shadow: 0 0 .35rem rgb(var(--red-rgb) / .9); animation: spark .7s var(--ease) forwards; }
  @keyframes ripple { to { transform: scale(7); opacity: 0; border-width: .5px; } }
  @keyframes spark { to { transform: translate(var(--dx), var(--dy)) scale(.2); opacity: 0; } }

  /* Magnetismo, inclinación y brillo de tarjetas (solo con .fx: se apaga con "reducir movimiento") */
  .fx .btn, .fx .sound, .fx .theme { translate: var(--tx, 0) var(--ty, 0); }
  .fx .btn:not(.pre), .fx .sound, .fx .theme { transition: color .35s var(--ease), border-color .35s var(--ease), translate .3s var(--ease), box-shadow .45s var(--ease), scale .25s var(--ease); }
  .card.is-lit { --sa: .15; }
  .fx .card.is-lit .tile { transform: perspective(30.625rem) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .25s var(--ease); }
  .fx .card.card { background-image: radial-gradient(14.875rem circle at var(--mx, 50%) var(--my, 50%), rgb(var(--red-rgb) / var(--sa, 0)), transparent 70%), linear-gradient(112deg, transparent calc(var(--sw) - 16%), rgb(var(--red-rgb) / .1) var(--sw), transparent calc(var(--sw) + 16%)); }
  .fx .card.is-lit { animation: cardSweep 1.1s var(--ease) 1 forwards; }
  @keyframes cardSweep { from { --sw: -30%; } to { --sw: 130%; } }
  /* La palabra grande y la cinta solo llevan transformación mientras se mueven (en reposo el texto queda más nítido) */
  .fx .bigword { transition: transform .4s var(--ease); }
  .fx .marquee { transition: transform .15s linear; }

  /* Solo con ratón: efectos al pasar el cursor */
  @media (hover: hover) and (pointer: fine) {
    .btn:hover { color: var(--hover-fg); border-color: var(--hover-bd); box-shadow: 0 .6125rem 1.4875rem -.7rem rgb(var(--red-rgb) / .7); }
    .btn:hover::before { transform: translateY(0); }
    .nav a:hover { color: var(--fg); }
    .nav a:hover::after { transform: scaleX(1); }
    .lang__btn:not(.is-active):hover, .sound:not(.is-on):hover, .theme:hover { color: var(--hover-fg); border-color: var(--hover-bd); box-shadow: 0 .6125rem 1.4875rem -.7rem rgb(var(--red-rgb) / .7); }
    .lang__btn:not(.is-active):hover::before, .sound:not(.is-on):hover::before, .theme:hover::before { transform: translateY(0); }
    .crumbs a:hover, .footer__list a:hover { color: var(--fg); }
    .logo:hover .logo__mark { rotate: 90deg; scale: 1.35; }
    .footer__list a, .crumbs a { display: inline-block; background: linear-gradient(var(--red), var(--red)) 0 100% / 0 1px no-repeat; transition: color .25s ease, background-size .45s var(--ease), translate .45s var(--ease); }
    .footer__list a:hover, .crumbs a:hover { background-size: 100% 1px; translate: .175rem 0; }
    .bl:hover { translate: 0 -4%; }
    a.card:hover, .project:hover { border-color: var(--line-2); }
    .card:hover::before, .card:hover::after { width: 1.225rem; height: 1.225rem; }
    a.card:hover .tile__a, .project:hover .tile__a { transform: scale(1.06); }
  }
  /* Pantallas táctiles: respuesta al tocar */
  @media (hover: none) {
    .cursor-glow { display: none; }
    a.card:active { border-color: var(--line-2); background: var(--surface-2); }
    .card:active::before, .card:active::after { width: 1.225rem; height: 1.225rem; }
    a.card:active .tile__a, .project:active .tile__a { transform: scale(1.08); }
  }

  /* Ruido de película sobre TODO el sitio: dos capas de la misma semilla (puntos blancos y negros) para que se note sobre oscuro, claro y rojo.
     Se mueve a saltos (efecto película) y se queda quieto con "reducir movimiento". */
  :root {
    --noise-w: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256'%3E%3Cfilter id='n' x='0' y='0' width='100%25' height='100%25' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 1.9 0 0 0 -.95'/%3E%3C/filter%3E%3Crect width='256' height='256' filter='url(%23n)'/%3E%3C/svg%3E");
    --noise-b: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256'%3E%3Cfilter id='n' x='0' y='0' width='100%25' height='100%25' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -1.9 0 0 0 .95'/%3E%3C/filter%3E%3Crect width='256' height='256' filter='url(%23n)'/%3E%3C/svg%3E");
  }
  body::after { content: ""; position: fixed; inset: -8.75rem; z-index: 500; pointer-events: none; background-image: var(--noise-w), var(--noise-b); background-size: 11.2rem 11.2rem, 11.2rem 11.2rem; opacity: var(--noise-op); will-change: translate; animation: grain 1.1s steps(1, end) infinite; }
  @keyframes grain {
    0% { translate: 0 0; }
    10% { translate: -3% 2%; }
    20% { translate: 2.5% -3.5%; }
    30% { translate: -3.5% -1%; }
    40% { translate: 3.5% 3%; }
    50% { translate: -1.5% 3.5%; }
    60% { translate: 3% -2.5%; }
    70% { translate: -3.5% 1.5%; }
    80% { translate: 1% 3%; }
    90% { translate: -2.5% -3%; }
    100% { translate: 0 0; }
  }

  /* Legibilidad: como las secciones no tienen fondo, un halo muy suave del color de la página separa el texto de las esferas y cuadros */
  .header :is(.logo__text, .nav a),
  .main :is(h1, h2, h3, p, .eyebrow, .crumbs, .btn--outline, .channel__value, .channel__label, .hero__meta),
  .footer :is(p, a, li, .footer__title, .footer__bottom span) { text-shadow: 0 0 .35rem rgb(var(--shade) / .85), 0 0 .875rem rgb(var(--shade) / .6); }
  .main .btn:not(.btn--outline) { text-shadow: none; }
}

/* ============================================================
   adaptación a pantallas (breakpoints al 70 %)
   ============================================================ */
@layer effects {
  @media (max-width: 720px) {
    .about, .project, .cta__card { grid-template-columns: 1fr; }
    .seal .tile { max-width: 14rem; }
    .project__side { flex-direction: row; align-items: center; flex-wrap: wrap; }
    .project__side .tile { width: 6.5625rem; flex-shrink: 0; }
    .hero__foot { flex-direction: column; align-items: flex-start; }
  }

  @media (max-width: 640px) {
    .burger { display: block; }
    .nav {
      position: fixed; inset: var(--header-h) 0 auto 0; flex-direction: column; gap: 0;
      max-height: calc(100vh - var(--header-h)); max-height: calc(100svh - var(--header-h)); overflow-y: auto;
      padding: var(--sp-2) var(--gutter) var(--sp-5);
      background: var(--bg); box-shadow: 0 1.225rem 1.575rem -.875rem rgb(var(--shade) / .95);
      transform: translateY(-.525rem); opacity: 0; visibility: hidden;
      transition: transform .45s var(--ease), opacity .35s ease, visibility 0s linear .45s;
    }
    .nav.is-open { transform: none; opacity: 1; visibility: visible; transition-delay: 0s; }
    .nav a { padding: .7875rem .175rem; font-size: var(--fs-4); background: linear-gradient(90deg, rgb(var(--ink) / .22), transparent 85%) 0 100% / 100% 1px no-repeat; }
    .nav a::after { display: none; }
    .nav a[aria-current="page"] { color: var(--red); }
  }

  @media (max-width: 440px) {
    .header__inner, .header__actions { gap: var(--sp-2); }
    .logo { gap: var(--sp-2); }
    .logo__text { font-size: .735rem; letter-spacing: .1em; }
    .lang__btn { padding: 0 .35rem; }
    .hero { padding-bottom: 1.75rem; }
    .hero__scroll { display: none; }
    .hero__meta { display: none; }
    .btn-row, .btn-row .btn, .cta .btn { width: 100%; }
    .project__side .tile { width: 100%; }
    .footer__grid { gap: var(--sp-6) var(--sp-5); padding-block: var(--sp-7); }
    .footer__bottom { padding-bottom: max(var(--sp-5), env(safe-area-inset-bottom)); }
  }

  @media (max-width: 360px) {
    .logo__mark { display: none; }
    .logo__text { font-size: .665rem; letter-spacing: .08em; }
    .header__inner, .header__actions { gap: .2625rem; }
    .lang__btn { min-width: 1.3125rem; padding: 0 .2188rem; }
    .burger { width: 1.4875rem; }
    .burger span { left: .2625rem; right: .2625rem; }
  }

  @media (max-width: 330px) {
    :root { --gutter: .525rem; }
    .lang__btn { min-width: 1.225rem; padding: 0 .175rem; }
    .logo__text { font-size: .63rem; }
  }

  /* Celular en horizontal: la portada no necesita ocupar toda la altura */
  @media (max-height: 520px) and (orientation: landscape) {
    .hero { min-height: 0; padding-top: calc(var(--header-h) + .875rem); padding-bottom: 1.75rem; }
    .hero__meta { display: none; }
    .bigword { font-size: clamp(2.1rem, 9.8vh, 4.9rem); }
  }
}

/* ============================================================
   a11y: foco, movimiento reducido, alto contraste e impresión
   ============================================================ */
@layer a11y {
  :focus-visible { outline: 2px solid var(--focus, var(--red)); outline-offset: .1312rem; box-shadow: 0 0 0 .3062rem rgb(var(--red-rgb) / .16); }

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
    .progress { animation-duration: auto !important; }
    [data-reveal], .pre { opacity: 1; transform: none; }
    .bl { opacity: 1; animation-delay: 0s !important; }
    body::after { animation: none; }
  }
  @media (prefers-contrast: more) { body::after { display: none; } }

  /* Al imprimir: sin efectos, fondo blanco y texto negro */
  @media print {
    .loader, .wipe, .cursor-glow, .cur, .cur-dot, .scene, body::before, body::after, .progress, .header, .marquee, .ripple, .spark, .burger { display: none !important; }
    html, body, .section, .cta, .page-head, .footer, .hero, .notfound { background: #fff !important; color: #000 !important; }
    *, *::before, *::after { animation: none !important; transition: none !important; box-shadow: none !important; text-shadow: none !important; filter: none !important; }
    [data-reveal], .pre, .bl { opacity: 1 !important; transform: none !important; }
    a { color: inherit; text-decoration: underline; }
  }
}