/* =====================================================================
   brand-diartinez.css — PIEL de pablodiartinez.com (la MADRE)

   Separación física E1 (ratificada por). Este archivo es la
   capa PERCEPTIBLE de la marca madre: colores, tipografías, movimiento,
   métricas ópticas de su tipografía display (Outfit) y TODO el CSS que pinta
   (primitives, semantic, components, utilities, figuras de tinta).

   Depende de core.css (geometría invisible) y se carga DESPUÉS de él. No
   redefine ningún token de core. Las demás marcas tienen su propio brand-*.css
   con sus decisiones; aquí vive solo lo que HOY es la madre.
   ===================================================================== */

@layer tokens, primitives, semantic, components, utilities;

/* =====================================================================
   FONT-FACE  (no layer — must apply globally) · tipografías de la MADRE
   ===================================================================== */
/* Outfit no distribuye itálica dedicada; el rol display se compone
   SIEMPRE en caja alta y nunca en cursiva, así que no se declara. */
@font-face {
  font-family: 'Outfit';
  src: url('fonts/Outfit-VariableFont_wght.ttf') format('truetype-variations');
  font-weight: 100 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('fonts/Inter-VariableFont_opsz_wght.ttf') format('truetype-variations');
  font-weight: 100 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('fonts/Inter-Italic-VariableFont_opsz_wght.ttf') format('truetype-variations');
  font-weight: 100 900; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Literata';
  src: url('fonts/Literata-VariableFont_opsz_wght.ttf') format('truetype-variations');
  font-weight: 200 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Literata';
  src: url('fonts/Literata-Italic-VariableFont_opsz_wght.ttf') format('truetype-variations');
  font-weight: 200 900; font-style: italic; font-display: swap;
}


@layer tokens {
  :root {

    /**
     * @group color.core
     * @name "Core palette · Rítmica de la Mezquita"
     * @description Marfil canvas (warm/cool), Grafito text, Rojo Cordobés signal.
     *              Nunca negro puro. Tres familias y nada más en chrome.
     */
    --marfil:        hsl(40 33% 95%);     /* default ivory — warm */
    --marfil-warm:   hsl(36 42% 93%);     /* paper / stone */
    --marfil-cool:   hsl(210 18% 95%);    /* Flemish-sky */
    --marfil-soft:   hsl(40 33% 85% / 0.7);  /* fg-soft sobre grafito-night (modo film) */
    --marfil-50:     hsl(40 33% 95% / 0.5);  /* contorno de tag sobre grafito-night */
    --marfil-25:     hsl(40 33% 95% / 0.25); /* línea estructural sobre grafito-night */
    --marfil-06:     hsl(40 33% 95% / 0.06); /* lavado hover sobre grafito-night */
    --marfil-04:     hsl(40 33% 95% / 0.04); /* banda de medianil verificable (piel cine · páginas de proyecto) */
    --marfil-10:     hsl(40 33% 95% / 0.10); /* banda de medianil del CAMPO/vestíbulo (compite con burbujas) */
    --scrim-ink:     rgba(0,0,0,.55);        /* velo de tinta — pie de portada */
    --scrim-paper:   rgba(255,255,255,.6);   /* velo de papel — pie de portada */
    --scrim-obra:    rgba(18,16,14,.5);      /* velo cálido sobre obra — hover del campo */
    --papel-baraja:      hsl(36 41% 83%);    /* cartulina de la baraja (BIO) */
    --papel-baraja-deep: hsl(34 38% 76%);    /* cartulina · sombra/reverso */
    --mesa-lectura:      #C4B085;            /* mesa de lectura de la baraja (BIO) */

    --grafito:       #2A2A2A;             /* text, structure */
    --grafito-light: #5A5757;             /* secondary text, UI chrome */
    --grafito-80:    hsl(0 0% 16% / 0.8);
    --grafito-60:    hsl(0 0% 16% / 0.6);
    --grafito-40:    hsl(0 0% 16% / 0.4); /* default hairline */
    --grafito-25:    hsl(0 0% 16% / 0.25); /* línea estructural de la landing (calibrado, entre 20 y 40) */
    --grafito-20:    hsl(0 0% 16% / 0.2);
    --grafito-10:    hsl(0 0% 16% / 0.1);
    --grafito-05:    hsl(0 0% 16% / 0.05); /* medianil sobre marfil (antes literal en tres páginas) */

    --rojo:          #D02C02;             /* primary accent */
    --rojo-rust:     #8C2A10;             /* heritage hover */
    --rojo-hover:    var(--rojo-rust);
    --rojo-soft:     #D02C0218;           /* 9% — pill fill on selection */

    /**
     * @group color.illustration
     * @name "Tarot de Marseille · 11 colors"
     * @description Restored Jodorowsky·Camoin palette. ILLUSTRATION ONLY.
     *              Never use in chrome. Three colors (white/black/red) are
     *              aliases to the Core palette to guarantee cromatic continuity.
     */
    --tarot-white:    var(--marfil);
    --tarot-black:    var(--grafito);
    --tarot-violet:   #5B3A7A;
    --tarot-celeste:  #7FB6D4;
    --tarot-blue:     #1E3A8C;
    --tarot-yellow:   #F2D24A;
    --tarot-cadmium:  #E27C1F;
    --tarot-flesh:    #E8B79A;
    --tarot-red:      var(--rojo);
    --tarot-green-l:  #7AB068;
    --tarot-green-d:  #2E5C3A;

    /* Legacy aliases — illustration only */
    --ochre:     var(--tarot-cadmium);
    --imperial:  var(--tarot-blue);
    --violet:    var(--tarot-violet);
    --verdigris: var(--tarot-green-d);

    /**
     * @group color.mondrian
     * @name "Acentos de trama del modo Diseño"
     * @description Tríada ÚNICA de los acentos y bisagras del plano de mesa
     *              (modo Diseño): rojo óxido · cadmio · celeste. Se pintan con las
     *              TEXTURAS FOTOGRÁFICAS de Pablo (assets/texturas/trama-<hex>.jpg),
     *              no con trama generada por código (decisión de 14 oct 2026).
     */
    --mondrian-red:   var(--rojo-rust);     /* @kind color */ /* #8C2A10 · rojo óxido */
    --mondrian-gold:  var(--tarot-cadmium); /* @kind color */ /* #E27C1F · cadmio */
    --mondrian-blue:  var(--tarot-celeste); /* @kind color */ /* #7FB6D4 · celeste */
    --trama-size:     306px;                /* @kind spacing */ /* textura de trama a escala: paso aparente ≈ 3 px */

    /**
     * @group color.fondos
     * @name "Fondos del plano de mesa"
     * @description Tonos lisos de la tarjeta Fondos; con marfil y el cartel
     *              intervenido componen el patchwork del modo Diseño.
     */
    --fondo-papel:       hsl(38 22% 88%);   /* @kind color */
    --fondo-gris-calido: hsl(30 8% 82%);    /* @kind color */
    --fondo-gris-frio:   hsl(210 6% 80%);   /* @kind color */

    /**
     * @group color.section-mode
     * @name "Section mode accents"
     * @description Derivados; admitidos en chrome SÓLO dentro de section-modes.
     */
    --grafito-night: #1A1A1A;   /* Film canvas */
    --negro-tabaco:  #1A1410;   /* Design inverse block */
    --rojo-burnt:    #C2451E;   /* Film óxido */

    /**
     * @group evocacion.tienda
     * @name "Madre · evocación de poesía & gráfica (modo SHOP)"
     * @description (, orden de Pablo) En el modo SHOP la portada NO cambia
     *              de piel —sería cacofónico—: cambia solo la PALETA, evocando
     *              la tienda. Los valores se DECLARAN AQUÍ, no se importan de
     *              brand-pyg.css: la madre debe poder construirse sola (E7).
     *              Son los mismos colores que la tienda usa como marca (Prusia
     *              verdoso) y como transacción (dorado).
     */
    --prusia-tienda:    #0E3A3C;   /* @kind color */ /* Prusia verdoso · marca de la tienda */
    --prusia-tienda-hi: #1C5E5E;   /* @kind color */ /* Prusia claro · hover sobre oscuro */
    --oro-tienda:       #F5C24E;   /* @kind color */ /* dorado · transacción */

    /**
     * @group color.structural-accent
     * @name "Acentos por modo estructural"
     * @description design → --grafito · news → --rojo · shop → --verde-mezquita.
     */
    --verde-mezquita: #3A7A55;  /* @kind color */ /* acento estructural · shop */
    --verde-venta:    var(--tarot-green-d);  /* @kind color */ /* #2E5C3A · botón COMPRAR */

    /**
     * @group color.semantic
     * @name "Semantic surface/text aliases"
     * @description Aliases canónicos. Componentes consumen estos, no los hex.
     */
    --bg:           var(--marfil);
    --bg-alt:       var(--marfil-warm);
    --fg:           var(--grafito);
    --fg-muted:     var(--grafito-60);
    --fg-faint:     var(--grafito-40);
    --line:         var(--grafito-40);
    --line-strong:  var(--grafito-80);
    --accent:       var(--rojo);
    --accent-hover: var(--rojo-hover);

    /**
     * @group grid.cordoban.ink
     * @name "Tintes de la rejilla"
     * @description Color del vacío + hairlines (celda/mediana/cuarta). La
     *              GEOMETRÍA de la rejilla vive en core.css; su TINTA es marca.
     */
    --rej-shade:    rgba(42,42,42,.10);  /* @kind color */ /* tinte del vacío */
    --rej-cellline: rgba(208,44,2,.5);   /* @kind color */ /* línea de celda/columna */
    --rej-med:      rgba(208,44,2,.4);   /* @kind color */ /* mediana (½) */
    --rej-qrt:      rgba(208,44,2,.2);   /* @kind color */ /* cuartas (¼, ¾) */
    --rej-cross:    rgba(208,44,2,.4);   /* @kind color */ /* "+" de anclaje */

    /**
     * @group type.family
     * @name "Font families"
     * @description Display / UI / Editorial. Cada rol UNA familia, no mezclar.
     */
    --ff-display:   'Outfit', 'Futura', 'Century Gothic', ui-sans-serif, sans-serif; /* @kind font */
    --ff-ui:        'Inter', ui-sans-serif, system-ui, sans-serif; /* @kind font */
    /* Serif ÚNICA del sistema: Literata (variable opsz 7–72 · wght 200–900). */
    --ff-editorial: 'Literata', 'Georgia', ui-serif, serif; /* @kind font */
    /* Alias de rol para TÍTULOS DE ARCANO (misma familia Literata, uso titular).
       CLAVE ÓPTICA: opsz 24 · wght 900 → CONTRASTE MEDIO (tinta impresa). */
    --ff-arcana:    'Literata', 'Georgia', ui-serif, serif; /* @kind font */
    --fvs-arcana:   "opsz" 24, "wght" 900; /* @kind font */

    /**
     * @group motion
     * @name "Motion · Cordoban arch easing"
     * @description (E1 · destino MARCA, ratificado) El movimiento es piel:
     *              cada marca define su carácter. El de la madre es arquitectónico
     *              y decisivo. core.css no declara motion (para no forzar
     *              redefiniciones que romperían la regla 3 de E1).
     */
    --ease-arch: cubic-bezier(0.22, 1, 0.36, 1); /* @kind other */
    --dur-fast:  80ms;  /* @kind other */
    --shadow-orb: 0 var(--sp-2) var(--sp-5) color-mix(in srgb, var(--grafito) 18%, transparent); /* @kind shadow */ /* única sombra de la madre: los círculos de obra del índice, sin borde */
    --dur-base:  180ms; /* @kind other */
    --dur-slow:  260ms; /* @kind other */
    --dur-mood:  360ms; /* @kind other */ /* cambio de mood/tema de página entera */
    --dur-organic: 1100ms; /* @kind other */ /* crecimiento orgánico (círculos del campo) */
    --ease-organic: cubic-bezier(0.62, 0.01, 0.20, 1); /* @kind other */ /* entrada/salida "aceite" */
    --stagger-item: 70ms;  /* @kind other */ /* cascada de entrada · retardo por ítem */
    --stagger-char: 3.5ms; /* @kind other */ /* cascada de entrada · retardo por carácter */
    /* DURACIONES DE ARRANQUE. Ya NO son la ley: desde la portada calcula
       la duración de cada banda a partir de su recorrido y de --mq-v-*. Estos
       valores solo pintan el primer fotograma, antes de la medición, y por eso
       se han reordenado para que ni siquiera ese fotograma contradiga la regla
       (mayor = más lenta). Retirar cuando toda banda del sistema mida. */
    --marquee-lg: 50s; /* @kind other */ /* banda grande · la más lenta */
    --marquee-md: 38s; /* @kind other */ /* banda media */
    --marquee-sm: 29s; /* @kind other */ /* banda pequeña · la más rápida (reversa) */

    /**
     * @group motion.marquee
     * @name "Madre · velocidad de banda"
     * @description (, ratificado) La ley se escribe sobre VELOCIDAD, no sobre
     *              duración: dos bandas con textos de distinto largo deben MOVERSE
     *              igual. Duración de una vuelta = (recorrido en px ÷ velocidad).
     *              CALIBRACIÓN DEL ANCLA — tres pasadas hasta acertar:
     *              · 40 px/s (31/07) — MAL: se dedujo suponiendo que el recorrido
     *                era el ancho del lienzo (1197px). El recorrido real es la
     *                mitad del riel: 3.856–4.939px en la tienda. Ancla ~3× baja.
     *              · 130 px/s — medido en la tienda, pero aplicado como si
     *                su banda fuese la GRANDE. Resultado: las tres bandas de la
     *                portada demasiado rápidas.
     *              · 85 px/s — DEFINITIVO. La banda de la tienda (46.5px
     *                de cuerpo) no es la grande del ecosistema sino la PEQUEÑA:
     *                sus 113 px/s medidos son --mq-v-sm (111), no el ancla. Con
     *                eso la banda grande de la portada recupera su vuelta de ~50s
     *                —la que Pablo venía aprobando— y el orden se cumple:
     *                mayor ÷c más lenta, menor ×c más rápida.
     */
    --mq-v:    85px;  /* @kind other */ /* px/s · banda media (ANCLA) */
    --mq-v-lg: 65px;  /* @kind other */ /* 85 ÷ 1.306 · banda grande → MÁS LENTA */
    --mq-v-sm: 111px; /* @kind other */ /* 85 × 1.306 · banda pequeña → MÁS RÁPIDA */

    /**
     * @name "Velocidad de evocación · banda de la tienda"
     * @description (, orden de Pablo) La banda de SHOP de la portada NO
     *              toma su velocidad de la rampa por tamaño: toma la de las
     *              bandas del escaparate de poesía & gráfica, «aunque allí sean
     *              más grandes». Es la misma decisión que su paleta prusia — esa
     *              banda ES la tienda dentro de la portada, y hereda su tempo,
     *              no su posición en la escala de la madre.
     *              Calibrado por tamaño de letra: el escaparate corre a ~2.4
     *              cuerpos por segundo; con la letra de esta banda (12.3px) eso
     *              son ~30 px/s → vuelta de ~37s, la cadencia pausada del
     *              escaparate en vez de un teletipo.
     */
    --mq-v-tienda: 30px; /* @kind other */

    /**
     * @group button
     * @name "Madre · forma de botón"
     * @description ( · D5) La FORMA del botón es piel de marca. La madre usa
     *              la PASTILLA. Fusion usa rectángulo; C U, pastilla con una
     *              esquina en ángulo recto. No hay forma «por defecto» en el núcleo.
     */
    --btn-shape: var(--r-pill); /* @kind radius */

    /**
     * @group optical.outfit
     * @name "Outfit · optical metrics"
     * @description Constantes derivadas de las métricas de Outfit para corregir
     *              el descentrado óptico del em-box al renderizar mayúsculas con
     *              line-height:1. Cambiar de fuente display → redefinir estos
     *              tokens (por eso son piel de marca). Ver docs/sistema/optical-metrics.md.
     */
    --outfit-cap-height-ratio: 0.676;    /* @kind font */ /* cap-height / em — tabla OS/2 del TTF */
    --outfit-cap-nudge:        -0.019em; /* @kind font */ /* asiento pastilla · hero · nav · display */
    --outfit-cap-nudge-marquee:-0.026em; /* @kind font */ /* asiento de ítems de marquee grande */
    --outfit-dot-nudge:        -0.01em;  /* @kind font */ /* centra el «·» en la banda de mayúsculas */
    --outfit-asc-padding:       0.194em; /* @kind font */ /* line-box padding above cap-line (lh:1) */
    --outfit-desc-padding:      0.13em;  /* @kind font */ /* line-box padding below baseline (lh:1) */

    /**
     * @group optical.marquee
     * @name "Marquee cap-fills-band tolerance"
     * @description +15% sobre cap-height puro: compensa el área visual extra de
     *              mayúsculas con ascendentes parciales (L, B, R).
     */
    --marquee-cap-tolerance: 1.15; /* @kind font */
  }
}


/* =====================================================================
   LAYER 2 · PRIMITIVES
   Base canvas, body, links, selection — nivel HTML (pinta → marca).
   ===================================================================== */
@layer primitives {
  html, body {
    background: var(--bg);
    color: var(--fg);
    font-family: var(--ff-ui);
    -webkit-font-smoothing: antialiased;
  }
  a {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid currentColor;
    transition: color var(--dur-fast) var(--ease-arch);
  }
  @media (hover:hover) and (min-width:900px){a:hover { color: var(--accent); }}
  ::selection {
    background: var(--accent);
    color: var(--marfil);
  }

  /* Focus-visible — single canonical style for keyboard users. */
  :focus { outline: none; }
  :focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
  }
  .pill:focus-visible {
    outline-offset: 3px;
    border-radius: var(--r-pill);
  }

  /* Reduced motion — honour the user preference globally. */
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
  }
}


/* =====================================================================
   LAYER 3 · SEMANTIC
   Clases tipográficas con rol. Mapeables a un dropdown de CMS.
   ===================================================================== */
@layer semantic {

  /** @role typography.display.marquee */
  .t-marquee {
    font-family: var(--ff-display);
    font-size: var(--fs-marquee);
    font-weight: 700;
    font-variation-settings: "wght" var(--fw-bold);
    line-height: 0.9;
    letter-spacing: var(--tr-marquee);
    text-transform: uppercase;
    color: var(--fg);
  }

  /** @role typography.display.hero */
  .t-display, h1.display {
    font-family: var(--ff-display);
    font-size: var(--fs-display);
    font-weight: 700;
    font-variation-settings: "wght" var(--fw-bold);
    line-height: var(--lh-display);
    letter-spacing: var(--tr-display);
    text-transform: uppercase;
    color: var(--fg);
  }

  /** @role typography.heading.h1 */
  h1, .t-h1 {
    font-family: var(--ff-display);
    font-size: var(--fs-h1);
    font-weight: 700;
    font-variation-settings: "wght" var(--fw-bold);
    line-height: var(--lh-heading);
    letter-spacing: var(--tr-display);
    text-transform: uppercase;
    color: var(--fg);
  }

  /** @role typography.heading.h2 */
  h2, .t-h2 {
    font-family: var(--ff-display);
    font-size: var(--fs-h2);
    font-weight: 500;
    font-variation-settings: "wght" var(--fw-medium);
    line-height: var(--lh-heading);
    letter-spacing: var(--tr-label);
    text-transform: uppercase;
    color: var(--fg);
  }

  /** @role typography.heading.h3 */
  h3, .t-h3 {
    font-family: var(--ff-display);
    font-size: var(--fs-h3);
    font-weight: 400;
    font-variation-settings: "wght" var(--fw-regular);
    line-height: var(--lh-heading);
    letter-spacing: var(--tr-label);
    text-transform: uppercase;
    color: var(--fg);
  }

  /** @role typography.label */
  .t-label {
    font-family: var(--ff-display);
    font-size: var(--fs-small);
    font-weight: 500;
    font-variation-settings: "wght" var(--fw-medium);
    letter-spacing: var(--tr-label);
    text-transform: uppercase;
    color: var(--fg);
  }

  /** @role typography.kicker · Etiqueta de sección en rojo cordobés. */
  .t-kicker {
    font-family: var(--ff-display);
    font-size: var(--fs-micro);
    font-weight: 500;
    font-variation-settings: "wght" var(--fw-medium);
    letter-spacing: var(--tr-label);
    line-height: var(--lh-ui);
    text-transform: uppercase;
    color: var(--accent);
  }

  /** @role typography.eyebrow · Etiqueta de sección en grafito-light. */
  .t-eyebrow {
    font-family: var(--ff-display);
    font-size: var(--fs-micro);
    font-weight: 500;
    font-variation-settings: "wght" var(--fw-medium);
    letter-spacing: var(--tr-label);
    line-height: var(--lh-ui);
    text-transform: uppercase;
    color: var(--grafito-light);
  }

  /** @role typography.micro */
  .t-micro {
    font-family: var(--ff-ui);
    font-size: var(--fs-micro);
    font-weight: 400;
    font-variation-settings: "wght" var(--fw-regular);
    letter-spacing: var(--tr-ui);
    color: var(--fg-muted);
  }

  /** @role typography.spec · Metadata, captions. Inter micro, grafito-light. */
  .t-spec {
    font-family: var(--ff-ui);
    font-size: var(--fs-micro);
    font-weight: 400;
    font-variation-settings: "wght" var(--fw-regular);
    letter-spacing: var(--tr-ui);
    color: var(--grafito-light);
  }

  /** @role typography.ui */
  .t-ui, p.ui {
    font-family: var(--ff-ui);
    font-size: var(--fs-base);
    font-weight: 400;
    line-height: var(--lh-ui);
    color: var(--fg);
  }

  /** @role typography.data · Tabular numerals. */
  .t-data {
    font-family: var(--ff-ui);
    font-size: var(--fs-small);
    font-weight: 500;
    font-feature-settings: "tnum";
    color: var(--fg-muted);
  }

  /** @role typography.editorial */
  .t-editorial, p {
    font-family: var(--ff-editorial);
    font-size: var(--fs-lg);
    font-weight: 400;
    line-height: var(--lh-body);
    color: var(--fg);
  }

  /** @role typography.editorial.small */
  .t-editorial--small {
    font-family: var(--ff-editorial);
    font-size: var(--fs-base);
    line-height: var(--lh-body);
  }
}


/* =====================================================================
   LAYER 4 · COMPONENTS
   Pill, rejilla, noise overlay. Consumen tokens + clases semánticas.
   ===================================================================== */
@layer components {

  /**
   * @component Pill
   * @description Pastilla estricta — pieza fundacional de interacción del sistema.
   *              Altura = font × c (término de la rampa). Asiento óptico ÚNICO de
   *              Outfit vía --outfit-cap-nudge (−0.019em).
   * @sizes md (default — 20px) | sm (13px, footer y contextos densos)
   * @tones ghost (default) | dark | accent | primary (CTA)
   * @cms-mappable size, tone
   */
  .pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: fit-content;
    height: 27.3px;
    white-space: nowrap;
    border-radius: var(--r-pill);
    border: 1px solid var(--grafito-80);
    background: transparent;
    color: var(--fg);
    font-family: var(--ff-display);
    font-size: 20.9px;
    font-weight: 600;
    /* peldaño intermedio de la rampa de grosor: √(527·689) ≈ 602 */
    font-variation-settings: "wght" 602;
    letter-spacing: var(--tr-display);
    text-transform: uppercase;
    /* compensación de tracking en el PADDING derecho (no margen negativo) */
    padding: 0 calc(18px - var(--tr-display)) 0 18px;
    line-height: 1;
    cursor: pointer;
    transition:
      background   var(--dur-fast) var(--ease-arch),
      color        var(--dur-fast) var(--ease-arch),
      border-color var(--dur-fast) var(--ease-arch);
  }
  /* Optical nudge — Outfit: la mancha de mayúsculas cae baja; el asiento sube. */
  .pill > .pill__t,
  .pill__t {
    display: inline-block;
    transform: translateY(var(--outfit-cap-nudge));
  }

  /* ---- Tones ---------------------------------------------------------- */
  @media (hover:hover) and (min-width:900px) {
    .pill:hover {
      background: var(--grafito);
      color: var(--marfil);
    }
  }
  .pill.pill--dark {
    background: var(--grafito);
    color: var(--marfil);
  }
  @media (hover:hover) and (min-width:900px) {
    .pill.pill--dark:hover {
      background: var(--accent);
      border-color: var(--accent);
    }
  }
  .pill.pill--accent {
    border-color: var(--accent);
    color: var(--accent);
  }
  @media (hover:hover) and (min-width:900px) {
    .pill.pill--accent:hover {
      background: var(--accent);
      color: var(--marfil);
    }
  }
  .pill.pill--primary {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--marfil);
  }
  @media (hover:hover) and (min-width:900px) {
    .pill.pill--primary:hover {
      background: var(--rojo-rust, var(--accent));
      border-color: var(--rojo-rust, var(--accent));
    }
  }

  /* ---- Size variants -------------------------------------------------- */
  .pill.pill--sm {
    font-size: 12.3px;
    height: 16.1px;
    padding: 0 calc(16px - var(--tr-marquee, 0.22em)) 0 16px;
    line-height: 1;
    letter-spacing: var(--tr-marquee, 0.22em);
  }

  /* ---- Disabled ------------------------------------------------------- */
  .pill:disabled,
  .pill[aria-disabled="true"] {
    opacity: 0.35;
    cursor: not-allowed;
  }
  @media (hover:hover) and (min-width:900px) {
    .pill:disabled:hover,
    .pill[aria-disabled="true"]:hover {
      background: transparent;
      color: var(--fg);
    }
  }

  /**
   * @component Tag — etiqueta de filtro / metadato
   * @description FUENTE ÚNICA. Misma disciplina que Pill. Pastilla de palabra en
   *   Outfit, contorno grafito; variantes selected / accent / dot.
   * @tones (default) | --selected | --accent
   * @mods --dot (indicador de punto rojo)
   */
  .tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    position: relative;
    box-sizing: border-box;
    border: 1px solid var(--grafito-60);
    background: transparent;
    color: var(--fg);
    border-radius: var(--r-pill);
    height: 16.1px;
    width: fit-content;
    white-space: nowrap;
    padding: 0 calc(11px - var(--tr-display)) 0 11px;
    font-family: var(--ff-display);
    font-size: 10.5px;
    font-weight: 500;
    font-variation-settings: "wght" var(--fw-medium);
    letter-spacing: var(--tr-display);
    text-transform: uppercase;
    cursor: pointer;
  }
  .tag > span {
    display: inline-block;
    transform: translateY(var(--outfit-cap-nudge));
  }
  .tag--selected {
    background: var(--grafito);
    color: var(--marfil);
    border-color: var(--grafito);
  }
  .tag--accent {
    border-color: var(--accent);
    color: var(--accent);
  }
  .tag--dot { padding-left: 20px; }
  .tag--dot::before {
    content: "";
    position: absolute;
    left: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--accent);
  }

  /**
   * @component Rejilla — rejilla cordobesa + sombreado del vacío
   * @description FUENTE ÚNICA. La GEOMETRÍA (cell/subcell/medianiles) vive en
   *   core.css; aquí van el TINTE y el dibujo de hairlines (piel de marca).
   *   Sombreado a resolución de SUB-CELDA. Tres capas: .rejilla-shade (tinte del
   *   vacío, detrás) · .rejilla-lines/.rejilla-cell (hairlines, encima) ·
   *   contenido (islas opacas que tapan el tinte).
   */
  .rejilla-shade { background: var(--rej-shade); }

  .rejilla-lines {
    display: grid;
    grid-template-columns: repeat(var(--rejilla-cols, 12), var(--cell-w));
    grid-auto-rows: var(--cell-h);
    column-gap: var(--gutter-vertical);    /* medianil ancho entre columnas */
    row-gap: var(--gutter-horizontal);     /* medianil estándar entre filas */
    justify-content: var(--rejilla-justify, center);
    align-content: start;
  }
  .rejilla-cell {
    border: 1px solid var(--rej-cellline);
    background-repeat: no-repeat;
    background-size: 100% 1px,100% 1px,100% 1px,1px 100%,1px 100%,1px 100%;
    background-position: 0 50%,0 25%,0 75%,50% 0,25% 0,75% 0;
    background-image:
      repeating-linear-gradient(to right,  var(--rej-med) 0 1.2px, transparent 1.2px 3.6px),  /* mediana H */
      repeating-linear-gradient(to right,  var(--rej-qrt) 0 1.2px, transparent 1.2px 3.6px),  /* cuarta ¼ H */
      repeating-linear-gradient(to right,  var(--rej-qrt) 0 1.2px, transparent 1.2px 3.6px),  /* cuarta ¾ H */
      repeating-linear-gradient(to bottom, var(--rej-med) 0 1.2px, transparent 1.2px 3.6px),  /* mediana V */
      repeating-linear-gradient(to bottom, var(--rej-qrt) 0 1.2px, transparent 1.2px 3.6px),  /* cuarta ¼ V */
      repeating-linear-gradient(to bottom, var(--rej-qrt) 0 1.2px, transparent 1.2px 3.6px);  /* cuarta ¾ V */
  }

  /* ── COLOCACIÓN — la regla del sistema ──
     El CONTENIDO dicta la altura en pasos de SUB-CELDA enteros, redondeando
     SIEMPRE hacia arriba a la siguiente línea de rejilla. */
  .rejilla-place {
    align-self: stretch; justify-self: stretch;
    min-width: 0; min-height: 0; box-sizing: border-box; margin: 0;
    display: flex; align-items: center; justify-content: center;
    background: var(--rejilla-fill, var(--theme-bg, var(--marfil)));
  }
  .rejilla-place--baseline { align-items: flex-end; }
  .rejilla-place--spread   { justify-content: space-between; }

  /* Hairlines estructurales sueltas (uso aislado). */
  .rejilla-rule   { border: 1px solid var(--line); }
  .rejilla-rule--v { border-left: 1px solid var(--line); }
  .rejilla-rule--h { border-top:  1px solid var(--line); }

  /* Signo "+" de anclaje — intersección de medianiles. */
  .rejilla-cross {
    width: 11px; height: 11px; pointer-events: none;
    background:
      repeating-linear-gradient(to bottom, var(--rej-cross) 0 1.2px, transparent 1.2px 3.6px) center / 1px 100% no-repeat,
      repeating-linear-gradient(to right,  var(--rej-cross) 0 1.2px, transparent 1.2px 3.6px) center / 100% 1px no-repeat;
  }

  /* Círculo de la rejilla — módulo circular hairline. */
  .rejilla-circle {
    border: 1px solid var(--rej-cellline);
    border-radius: 50%;
    pointer-events: none;
  }

  /* ── ANCLAJES INTEGRADOS ── (.rejilla-lines--anchored) */
  .rejilla-lines--anchored .rejilla-cell { position: relative; }
  .rejilla-lines--anchored .rejilla-cell::before,
  .rejilla-lines--anchored .rejilla-cell::after {
    content: ""; position: absolute; pointer-events: none;
    left: calc(100% + var(--gutter-vertical) / 2);
    top:  calc(100% + var(--gutter-horizontal) / 2);
    transform: translate(-50%, -50%);
  }
  .rejilla-lines--anchored .rejilla-cell::before {
    width:  calc(2 * var(--cell-h) + var(--gutter-horizontal));
    height: calc(2 * var(--cell-h) + var(--gutter-horizontal));
    border: 1px solid var(--rej-cellline);
    border-radius: 50%;
  }
  .rejilla-lines--anchored .rejilla-cell::after {
    width: 11px; height: 11px;
    background:
      repeating-linear-gradient(to bottom, var(--rej-cross) 0 1.2px, transparent 1.2px 3.6px) center / 1px 100% no-repeat,
      repeating-linear-gradient(to right,  var(--rej-cross) 0 1.2px, transparent 1.2px 3.6px) center / 100% 1px no-repeat;
  }
  .rejilla-cell--last-col::before, .rejilla-cell--last-col::after,
  .rejilla-cell--last-row::before, .rejilla-cell--last-row::after { content: none; }

  /**
   * @component MondrianBlock
   * @description Bloque de acento con la TEXTURA FOTOGRÁFICA de trama de su color:
   *   --red (rojo óxido) · --gold (cadmio) · --blue (celeste). Misma fuente que
   *   los acentos del plano de mesa (.flatbed). Uso: <div class="mondrian-block mondrian-block--gold">.
   */
  .mondrian-block { position: relative; overflow: hidden; background-size: var(--trama-size) var(--trama-size); background-repeat: repeat; background-image: url("assets/texturas/trama-8C2A10.jpg"); }
  .mondrian-block--red  { background-image: url("assets/texturas/trama-8C2A10.jpg"); }
  .mondrian-block--gold { background-image: url("assets/texturas/trama-E27C1F.jpg"); }
  .mondrian-block--blue { background-image: url("assets/texturas/trama-7FB6D4.jpg"); }

  /**
   * @component Flatbed — superficie del modo Diseño (plano de mesa)
   * @description La pinta ui_kits/website/flatbed.js desde una semilla. Capas:
   *   campos y núcleos (.fb-plane) · grano · sombreado del vacío al 5 % · rejilla
   *   como transparencia en una sola sección (.fb-grid) · zonas activas (.fb-tiles).
   *   Rejilla: filete doble c en rojo óxido · subceldas 1/c en rojo óxido · eje
   *   punteado en celeste, sólido solo en los cruces · círculos 1/c en celeste.
   */
  .flatbed { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0;
    --fb-fill: var(--theme-bg, var(--marfil-cool)); }
  .fb-plane, .fb-lines, .fb-tiles { position: absolute; display: grid; }
  .fb-leaf { position: relative; overflow: hidden; }
  .fb-over { z-index: 1; }
  .fb-t-marfil { background: var(--marfil); }
  .fb-t-papel  { background: radial-gradient(ellipse at 30% 20%, var(--grafito-05), transparent 60%), radial-gradient(ellipse at 70% 80%, var(--grafito-05), transparent 55%), var(--fondo-papel); }
  .fb-t-gcal   { background: var(--fondo-gris-calido); }
  .fb-t-gfri   { background: var(--fondo-gris-frio); }
  .fb-t-cartel { background: url("assets/background-texture.jpg") center / cover; }
  .fb-t-ox, .fb-t-cad, .fb-t-cel { background-size: var(--trama-size) var(--trama-size); background-repeat: repeat; }
  .fb-t-ox  { background-image: url("assets/texturas/trama-8C2A10.jpg"); }
  .fb-t-cad { background-image: url("assets/texturas/trama-E27C1F.jpg"); }
  .fb-t-cel { background-image: url("assets/texturas/trama-7FB6D4.jpg"); }
  .fb-shade { position: absolute; inset: 0; z-index: 2; background: var(--grafito-05); mix-blend-mode: multiply; }
  .fb-tiles { z-index: 4; }
  .fb-tile  { background: var(--fb-fill); }
  /* en las páginas: la superficie solo existe en modo Diseño */
  .field .main > .flatbed:not(.fb-peek) { display: none; }
  .field.is-flatbed .main > .flatbed { display: block; }
  /* los medianiles sombreados son solo de Cine: sobre el plano de mesa no existen */
  .field.is-flatbed .main > .rejilla-medianiles { display: none; }

  /**
   * @component NoiseOverlay
   * @description Grano de papel a página completa en toda página de la madre (portada e interiores). Una sola capa: el plano de mesa no lleva grano propio.
   */
  .noise-overlay {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 9000;
    mix-blend-mode: multiply;
    opacity: 0.16;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  }
}


/* =====================================================================
   LAYER 5 · UTILITIES
   Mono-propiedad. Cordoban weights + tracking ramp. Mapean 1:1 a tokens.
   ===================================================================== */
@layer utilities {

  /** @utility font-weight (Cordoban ladder · anclada en 900, ÷c por peldaño) */
  .fw-thin    { font-weight: 200; font-variation-settings: "wght" 237; } /* suelo de Literata */
  .fw-light   { font-weight: 300; font-variation-settings: "wght" 309; }
  .fw-regular { font-weight: 400; font-variation-settings: "wght" 404; }
  .fw-medium  { font-weight: 500; font-variation-settings: "wght" 527; }
  .fw-bold    { font-weight: 700; font-variation-settings: "wght" 689; }
  .fw-black   { font-weight: 900; font-variation-settings: "wght" 900; }

  /** @utility tracking (allowed values only) */
  .tr-tight   { letter-spacing: var(--tr-tight); }
  .tr-body    { letter-spacing: var(--tr-body); }
  .tr-ui      { letter-spacing: var(--tr-ui); }
  .tr-label   { letter-spacing: var(--tr-label); }
  .tr-display { letter-spacing: var(--tr-display); }
  .tr-marquee { letter-spacing: var(--tr-marquee); }
}


/* =====================================================================
   FIGURAS CANÓNICAS DE TINTA CORDOBESA (corrección de Pablo, jul 2026)
   El ÁREA de la mancha de ambas figuras es idéntica a la de un RECTÁNGULO
   CORDOBÉS puro (c = 1.30656).

   FIGURA 1 — ISOTIPO «D» / MEDIA PASTILLA · anclada a la ALTURA
     H = 100 · W = 87.266 · semicírculo de radio 50 en un extremo.
   FIGURA 2 — ARCO ROMÁNICO · anclada a la ANCHURA
     W = 100 · H = 141.386 · corona semicircular de radio 50.

   NOTA técnica: el radio 9999px se auto-recorta al SEMICÍRCULO PERFECTO;
   border-radius 50% daría una ELIPSE — prohibido.
   ===================================================================== */
.pastilla-cap {                         /* Figura 1 — dale una altura */
  aspect-ratio: 87.266 / 100;
  overflow: hidden;
}
.pastilla-cap--izq { border-radius: 9999px 0 0 9999px; }  /* semicírculo a la izquierda */
.pastilla-cap--der { border-radius: 0 9999px 9999px 0; }  /* semicírculo a la derecha (la «D») */

.arco {                                  /* Figura 2 — dale un ancho */
  aspect-ratio: 100 / 141.386;
  border-radius: 9999px 9999px 0 0;      /* corona semicircular perfecta */
  overflow: hidden;
}


/* ── IMPRESIÓN · el PDF sale con TEXTO y VECTORES ───────────────────────
   Las guías de rejilla son tapices de degradados y las barras fijas se repiten o se
   cortan en papel: ambas se neutralizan al imprimir. Nada más se toca. */
@media print{
  .field{background:#fff}
  .field [class*="grid"]::before,.field.grid-on::before{display:none !important}
  .field header,.field .bar,.field nav[class*="bar"]{position:static !important}
  .field [class*="marquee"],.field [class*="-mq"]{display:none !important}
  .field section,.field article,.field [class*="card"]{break-inside:avoid}
}