/* ============================================================
   ZABIDURIA — MANUAL DE MARCA
   marca.css
   ------------------------------------------------------------
   ESTE ES EL UNICO ARCHIVO QUE CAMBIA AL CAMBIAR DE MARCA.

   Fuente de verdad: ../README.md (el manual)
   y ../tokens/tokens.json. Los tokens de las secciones 2 y 3
   son COPIA EXACTA del manual: si el manual se actualiza, se
   regeneran desde tokens.json, no se editan a mano.

   Las secciones 4-7 son el puente hacia el sistema de decks
   (1920x1080) y son propias de este workspace.
   ============================================================ */

/* ============================================================
   1. TIPOGRAFIAS — servidas localmente
   ------------------------------------------------------------
   Archivo (titulares de slide), Fraunces (serif del manual
   original), Space Grotesk (cuerpo), JetBrains Mono (lo que se
   ejecuta: numeros, rotulos, codigo).
   Archivos en fonts/. No dependen de internet: la exportacion a
   PDF funciona offline y siempre da el mismo resultado.
   ============================================================ */

/* Fraunces · latin · pesos 400 700 */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(fonts/Fraunces-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Fraunces · latin-ext · pesos 400 700 */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(fonts/Fraunces-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* JetBrains Mono · latin · pesos 400 */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/JetBrainsMono-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* JetBrains Mono · latin-ext · pesos 400 */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/JetBrainsMono-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Space Grotesk · latin · pesos 400 700 */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(fonts/SpaceGrotesk-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Space Grotesk · latin-ext · pesos 400 700 */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(fonts/SpaceGrotesk-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Archivo · titulares de slide (capa grafica, sep 2026).
   Variable en dos ejes: ancho 62-125% y peso 100-900. Un solo
   archivo por subset. Se usa en ancho 112% via .titular. */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url(fonts/Archivo-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url(fonts/Archivo-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ============================================================
   2. TOKENS DEL MANUAL — tema claro (por defecto)
   ============================================================ */
:root, [data-theme="claro"] {
  --violeta-500: #701eda;
  --violeta-300: #a87ef1;
  --violeta-100: #e4d6fb;
  --violeta-700: #48128c;
  --negro-marca: #0b0a0f;
  --blanco-marca: #ffffff;
  --fondo: #ffffff;
  --fondo-elevado: #f7f5fb;
  --fondo-sutil: #eeeaf6;
  --tinta: #16121f;
  --tinta-suave: #5b5470;
  --borde: #ded8ec;
  --borde-fuerte: #9a8ebc;
  --acento: var(--violeta-500);
  --acento-texto: #ffffff;
  --acento-fondo: #f3edfd;
  --exito: #0e7a5f;
  --alerta: #9a6400;
  --error: #c0271f;
  --sombra-sm: 0 1px 2px #16121f14;
  --sombra-md: 0 4px 16px #16121f1f;
  --sombra-lg: 0 16px 40px #16121f26;

  /* Capa grafica (marca/guidelines/20-capa-grafica.md) */
  --lamina-fondo:      rgba(22, 18, 31, 0.045);
  --lamina-borde:      rgba(22, 18, 31, 0.12);
  --lamina-viva-fondo: rgba(112, 30, 218, 0.10);
  --lamina-viva-borde: rgba(112, 30, 218, 0.45);
  --grano-opacidad:    0.12;
}

/* ============================================================
   2b. TOKENS DEL MANUAL — tema oscuro
   ------------------------------------------------------------
   En un deck NO se pone en <html>: cada slide declara el suyo.
     <section data-theme="oscuro">  -> portada, cierre
     <section>                      -> contenido (claro)
   El selector es un atributo suelto, asi que aplica a cualquier
   elemento y los tokens cascadean a sus hijos.
   ============================================================ */
[data-theme="oscuro"] {
  --violeta-500: #701eda;
  --violeta-300: #a87ef1;
  --violeta-100: #e4d6fb;
  --violeta-700: #48128c;
  --negro-marca: #0b0a0f;
  --blanco-marca: #ffffff;
  --fondo: #0b0a0f;
  --fondo-elevado: #16131f;
  --fondo-sutil: #211c2e;
  --tinta: #f5f2fa;
  --tinta-suave: #a9a2bc;
  --borde: #2e2740;
  --borde-fuerte: #6b5f8c;
  --acento: var(--violeta-300);
  --acento-texto: #1a0b33;
  --acento-fondo: #2a1a4a;
  --exito: #3ecfa4;
  --alerta: #f0b84d;
  --error: #ff8a80;
  --sombra-sm: 0 1px 2px #00000066;
  --sombra-md: 0 4px 16px #00000080;
  --sombra-lg: 0 16px 40px #00000099;

  /* Capa grafica (marca/guidelines/20-capa-grafica.md) */
  --lamina-fondo:      rgba(255, 255, 255, 0.055);
  --lamina-borde:      rgba(255, 255, 255, 0.15);
  --lamina-viva-fondo: rgba(112, 30, 218, 0.20);
  --lamina-viva-borde: rgba(168, 126, 241, 0.55);
  --grano-opacidad:    0.24;
}

/* ============================================================
   3. ESCALAS DEL MANUAL
   ============================================================ */
:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  --radio-sm: 6px;
  --radio-md: 10px;
  --radio-lg: 16px;
  --radio-full: 999px;

  --font-display: "Fraunces", "Playfair Display", Georgia, serif;
  --font-sans: "Space Grotesk", "Inter", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;

  /* Titulares de slide. Aprobado en uso sobre todas las piezas de
     la capa grafica (sep 2026). El manual original fija Fraunces;
     ver marca/guidelines/20-capa-grafica.md, seccion "Tipografia". */
  --font-titular: "Archivo", "Arial Black", sans-serif;
  --titular-ancho: 112%;
}

/* ============================================================
   4. ESCALA DE DECK (1920x1080)
   ------------------------------------------------------------
   El manual fija la jerarquia en px pensando en documento y web.
   Una slide es un lienzo de 1920px, asi que aqui la misma
   jerarquia se multiplica por --escala-deck manteniendo
   familia, peso, tracking e interlinea del manual.

   --escala-deck: 1   = valores literales del manual
   --escala-deck: 1.4 = titulares con mas presencia en pantalla

   Cambiar SOLO este numero reescala todo el deck de forma
   proporcional. Ningun otro valor de aqui se toca.
   ============================================================ */
:root {
  --escala-deck: 1.4;

  /* Display — Fraunces 600, interlinea cerrada, tracking -0.02em */
  --display-xl:     calc(64px * var(--escala-deck));
  --display-xl-lh:  calc(60px * var(--escala-deck));
  --display-l:      calc(48px * var(--escala-deck));
  --display-l-lh:   calc(50px * var(--escala-deck));
  --display-m:      calc(36px * var(--escala-deck));
  --display-m-lh:   calc(42px * var(--escala-deck));

  /* Titulos */
  --titulo-l:       calc(28px * var(--escala-deck));
  --titulo-l-lh:    calc(34px * var(--escala-deck));
  --titulo-m:       calc(22px * var(--escala-deck));
  --titulo-m-lh:    calc(28px * var(--escala-deck));
  --titulo-s:       calc(18px * var(--escala-deck));
  --titulo-s-lh:    calc(26px * var(--escala-deck));

  /* Cuerpo — Space Grotesk, interlinea amplia */
  --cuerpo-l:       calc(18px * var(--escala-deck));
  --cuerpo-l-lh:    calc(28px * var(--escala-deck));
  --cuerpo:         calc(16px * var(--escala-deck));
  --cuerpo-lh:      calc(26px * var(--escala-deck));
  --cuerpo-s:       calc(14px * var(--escala-deck));
  --cuerpo-s-lh:    calc(22px * var(--escala-deck));

  --etiqueta:       calc(13px * var(--escala-deck));
  --etiqueta-lh:    calc(18px * var(--escala-deck));
  --overline:       calc(12px * var(--escala-deck));
  --overline-lh:    calc(16px * var(--escala-deck));
  --codigo:         calc(14px * var(--escala-deck));
  --codigo-lh:      calc(22px * var(--escala-deck));

  /* Escala de espaciado, tambien x --escala-deck.
     Repite los valores de la seccion 3 multiplicados: si solo se
     escalara la tipografia, en un lienzo de 1920 el aire entre
     bloques quedaria apretado y las lineas de 1px invisibles.
     Los numeros base son los mismos del manual. */
  --space-1: calc(4px  * var(--escala-deck));
  --space-2: calc(8px  * var(--escala-deck));
  --space-3: calc(12px * var(--escala-deck));
  --space-4: calc(16px * var(--escala-deck));
  --space-5: calc(24px * var(--escala-deck));
  --space-6: calc(32px * var(--escala-deck));
  --space-7: calc(48px * var(--escala-deck));
  --space-8: calc(64px * var(--escala-deck));

  --radio-lamina: calc(26px * var(--escala-deck));

  /* Grosor minimo de linea en slide. Un borde de 1px sobre 1920
     desaparece al proyectar y al exportar a PDF. */
  --linea:      calc(1px * var(--escala-deck));
  --linea-dura: calc(2px * var(--escala-deck));

  /* Margenes de slide. El manual pide space-8 de aire en portada;
     en 1920x1080 eso se traduce a este padding. */
  --pad-x:          120px;
  --pad-top:        110px;
  --pad-bottom:     110px;
}

/* ============================================================
   5. PUENTE CON EL SISTEMA DE CLASES
   ------------------------------------------------------------
   Nombres neutros que usan class-system.css y los decks nuevos.
   No inventan color: cada uno apunta a un token del manual.
   ============================================================ */
:root, [data-theme="claro"], [data-theme="oscuro"] {
  /* OJO: --c-hero apunta a --acento, NO a --violeta-500.
     Es la regla 1 del manual: el violeta de marca no se lee
     sobre negro. --acento se resuelve solo a violeta-300 en
     tema oscuro, asi que cualquier TEXTO que use --c-hero es
     legible en los dos temas. */
  --c-hero:       var(--acento);
  --c-hero-texto: var(--acento-texto);
  --c-hero-tint:  var(--acento-fondo);
  --c-deep:       var(--violeta-700);
  --c-accent:     var(--violeta-300);

  /* --c-bloque es el violeta a valor completo, para CAMPOS:
     bloques de portada, barras, celdas. Nunca para letra. */
  --c-bloque:     var(--violeta-500);

  --ink:          var(--tinta);
  --ink-soft:     var(--tinta-suave);
  --ink-mute:     var(--borde-fuerte);
  --ink-faint:    var(--borde);
  --hair:         var(--borde);
  --paper:        var(--fondo);
  --paper-raised: var(--fondo-elevado);
  --paper-sunken: var(--fondo-sutil);
  --white:        var(--blanco-marca);
  --black:        var(--negro-marca);

  --font-headline: var(--font-display);
  --font-subtitle: var(--font-display);
  --font-body:     var(--font-sans);

  /* Metrica heredada por los decks de _referencias/ */
  --type-title:   var(--display-xl);
  --type-eyebrow: var(--overline);

  /* Alias de compatibilidad: los decks de _referencias/ nacieron
     de una marca verde. Se mantienen para poder copiar bloques
     sin reescribirlos. En decks NUEVOS no usar estos. */
  --green:        var(--acento);
  --green-deep:   var(--violeta-700);
  --green-tint:   var(--acento-fondo);
  --blue:         var(--violeta-300);
  --dark-green:   var(--violeta-700);
  --near-black:   var(--tinta);
}

/* ============================================================
   6. LO QUE EL MANUAL PROHIBE — no agregar aqui
   ------------------------------------------------------------
   - Degradados violeta-azul. El violeta va PLANO. Si hace falta
     profundidad: violeta-700 al lado de violeta-500, en bloques
     separados, nunca fundidos.
   - Sombras para separar tarjetas. Se separan con --borde y
     --fondo-elevado. La sombra solo para lo que flota de verdad.
   - Fraunces por debajo de 22px (x --escala-deck). Debajo de
     --titulo-m, todo es Space Grotesk.
   - Botones pildora. --radio-md para botones, --radio-lg para
     tarjetas. --radio-full solo en avatares y puntos de estado.
   - Mas de un elemento en violeta por slide.
   ============================================================ */

/* ============================================================
   7. FIRMA DE MARCA — el logo esta PENDIENTE
   ------------------------------------------------------------
   Todavia no hay archivo de logo (seccion 9 del manual). La
   firma es tipografica y esta implementada aqui como clase.
   Cuando exista el logo definitivo, esto se reemplaza por un
   <img> en assets/ y se borra esta seccion.
   ============================================================ */
.firma-zabiduria {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--tinta);
  line-height: 1;
}
[data-theme="oscuro"] .firma-zabiduria,
.firma-zabiduria.sobre-violeta { color: var(--blanco-marca); }

.firma-zabiduria .descriptor {
  display: block;
  margin-top: var(--space-2);
  font-family: var(--font-sans);
  font-size: var(--overline);
  line-height: var(--overline-lh);
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--acento);
}