/* GENERADO -- NO EDITAR EN EL SERVIDOR.
   Fuente unica: vault/01_Marca/identidad-visual/colors_and_type.css
   sha256: 79be24d7874bfda3f15adf7870fd7d0d8b7aaca121d7742f0fa298ed45e74d47
   Si editas este archivo por FTP, el proximo build lo pisa y
   `build.py --verificar-remoto` lo delata. Edita el canon. */

/* ==========================================================================
   MasterDrone — Foundations
   Elegante, cinematográfico, técnico. Predominio oscuro con amarillo de firma.

   FUENTE ÚNICA DE VERDAD de los tokens de marca.
   Ninguna pieza (infografía, carrusel, miniatura, landing) declara su propio
   :root — todas enlazan este archivo por ruta relativa.

   Sincronizado con claude.ai/design → "MasterDrone Design System"
   Ver decisiones.md para el historial de cambios y su porqué.
   ========================================================================== */

/* Tipografías
   Display + Body:  Inter (300–900)
   Mono:            JetBrains Mono (momentos técnicos / código)

   Nota: la marca se diseñó originalmente sobre TT Fors, pero los archivos
   disponibles son de licencia Trial. Inter es la tipográfica de trabajo:
   es la que está en el dashboard y en todas las piezas publicadas, es libre,
   y aguanta bien el tracking cerrado de los titulares display.
   Los .ttf de TT Fors siguen en el proyecto de claude.ai/design por si algún
   día se compra la licencia — ver --ff-display-alt más abajo.
*/
/* [build] servido localmente, ver fuentes.css -- @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300..900&display=swap'); */
/* [build] servido localmente, ver fuentes.css -- @import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500&display=swap'); */

:root {
  /* -------- Color de marca — amarillo de firma -------- */
  --md-yellow:        #FFDB00;   /* acento primario de marca */
  --md-yellow-hover:  #FFE633;   /* +hover */
  --md-yellow-press:  #E6C500;   /* -press */
  --md-yellow-soft:   #FFF3B0;   /* tintes suaves para fondos */
  --md-yellow-glow:   rgba(255, 219, 0, 0.35);

  /* -------- Escala neutra (negro cálido / grafito) -------- */
  --md-black:         #000000;
  --md-ink:           #0A0A0B;   /* fondo de página, el más profundo */
  --md-graphite-900:  #111113;   /* superficie de tarjeta sobre negro */
  --md-graphite-800:  #17181B;   /* superficie elevada */
  --md-graphite-700:  #1F2024;   /* superficie hover */
  --md-graphite-600:  #2A2B30;   /* bordes / divisores en oscuro */
  --md-graphite-500:  #3A3B42;
  --md-graphite-400:  #5C5E67;
  --md-graphite-300:  #8A8C95;
  --md-graphite-200:  #B8BAC2;
  --md-graphite-100:  #E4E5E9;
  --md-paper:         #F5F5F7;   /* superficie clara estilo Apple */
  --md-white:         #FFFFFF;

  /* -------- Tokens de primer plano -------- */
  --fg-1:             #FFFFFF;              /* texto primario sobre oscuro */
  --fg-2:             rgba(255,255,255,.72);/* texto secundario sobre oscuro */
  --fg-3:             rgba(255,255,255,.48);/* terciario / pie */
  --fg-4:             rgba(255,255,255,.24);/* deshabilitado / regla */
  --fg-accent:        var(--md-yellow);
  --fg-inverse-1:     #0A0A0B;              /* sobre superficies claras */
  --fg-inverse-2:     rgba(10,10,11,.64);
  --fg-inverse-3:     rgba(10,10,11,.40);

  /* -------- Tokens de fondo -------- */
  --bg-page:          var(--md-ink);
  --bg-card:          var(--md-graphite-900);
  --bg-card-elev:     var(--md-graphite-800);
  --bg-card-hover:    var(--md-graphite-700);
  --bg-paper:         var(--md-paper);

  /* -------- Semánticos (uso escaso; la marca es casi monocroma) -------- */
  --sem-success:      #34C759;
  --sem-warning:      #FFCC00;
  --sem-danger:       #FF3B30;
  --sem-info:         #64D2FF;

  /* -------- Bordes / trazos -------- */
  --stroke-1:         rgba(255,255,255,.08); /* filete sobre oscuro */
  --stroke-2:         rgba(255,255,255,.12);
  --stroke-3:         rgba(255,255,255,.18);
  --stroke-yellow:    rgba(255,219,0,.35);
  --stroke-inverse-1: rgba(0,0,0,.08);
  --stroke-inverse-2: rgba(0,0,0,.14);

  /* -------- Radios (tarjetas redondeadas estilo Apple) -------- */
  --r-xs:   6px;
  --r-sm:   10px;
  --r-md:   14px;
  --r-lg:   20px;   /* tarjeta por defecto */
  --r-xl:   28px;   /* tarjetas hero */
  --r-2xl:  36px;
  --r-pill: 999px;

  /* -------- Espaciado (base 4px) -------- */
  --s-0:  0px;
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  20px;
  --s-6:  24px;
  --s-8:  32px;
  --s-10: 40px;
  --s-12: 48px;
  --s-16: 64px;
  --s-20: 80px;
  --s-24: 96px;

  /* -------- Sombras (cinematográficas: sutiles en oscuro, nítidas en claro) -------- */
  --shadow-sm:      0 1px 2px rgba(0,0,0,.30);
  --shadow-md:      0 4px 12px rgba(0,0,0,.35);
  --shadow-lg:      0 12px 32px rgba(0,0,0,.45);
  --shadow-xl:      0 24px 60px rgba(0,0,0,.55);
  --shadow-glow:    0 0 0 1px var(--stroke-yellow), 0 8px 32px var(--md-yellow-glow);
  --inner-hairline: inset 0 0 0 1px var(--stroke-1);
  --inner-stroke:   inset 0 0 0 1px var(--stroke-2);

  /* -------- Movimiento (ease cinematográfico; nunca rebote) -------- */
  --ease-out-cine:  cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */
  --ease-in-cine:   cubic-bezier(0.7, 0, 0.84, 0); /* @kind other */
  --ease-inout:     cubic-bezier(0.65, 0, 0.35, 1); /* @kind other */
  --dur-fast:       150ms; /* @kind other */
  --dur-med:        300ms; /* @kind other */
  --dur-slow:       600ms; /* @kind other */

  /* -------- Fondos de firma -------- */
  --bg-chevron: repeating-linear-gradient(
    115deg,
    #0A0A0B 0 28px,
    #111113 28px 30px,
    #0A0A0B 30px 58px,
    #17181B 58px 60px
  );
  --bg-gradient-dark: radial-gradient(120% 80% at 30% 0%, #1C1D22 0%, #0A0A0B 55%, #000 100%);
  --bg-yellow-spot:   radial-gradient(60% 40% at 50% 30%, rgba(255,219,0,.18), transparent 60%);

  /* Degradados de protección — van sobre fotografía a sangre, antes del texto.
     Es uno de los dos únicos usos permitidos de degradado sobre imagen
     (el otro es el blur de los controles de reproductor). */
  --bg-proteccion-lateral: linear-gradient(100deg,
    #0A0A0B 0%, rgba(10,10,11,.86) 30%, transparent 68%);
  --bg-proteccion-inferior: linear-gradient(to top,
    #0A0A0B 0%, rgba(10,10,11,.85) 25%, transparent 60%);

  /* -------- Base tipográfica -------- */
  --ff-display:  Inter, -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif; /* @kind font */
  --ff-body:     Inter, -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif; /* @kind font */
  --ff-mono:     'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace; /* @kind font */

  /* Override de display para el día que exista licencia de TT Fors.
     Para activarla: descargar fonts/ del proyecto de claude.ai/design,
     declarar los @font-face y apuntar --ff-display aquí. */
  --ff-display-alt: var(--ff-display); /* @kind font */

  /* escala tipográfica (fluida en hero, estática en el resto) */
  --fs-hero:    clamp(56px, 8vw, 120px); /* @kind font */
  --fs-h1:      56px;
  --fs-h2:      40px;
  --fs-h3:      28px;
  --fs-h4:      22px;
  --fs-h5:      18px;
  --fs-body:    16px;
  --fs-small:   14px;
  --fs-caption: 12px;
  --fs-micro:   11px;

  --lh-tight:   1.04; /* @kind other */
  --lh-snug:    1.18; /* @kind other */
  --lh-normal:  1.45; /* @kind other */
  --lh-relaxed: 1.6; /* @kind other */

  --tr-tight:   -0.03em; /* @kind other */
  --tr-snug:    -0.015em; /* @kind other */
  --tr-normal:  0em; /* @kind other */
  --tr-wide:    0.04em; /* @kind other */
  --tr-uber:    0.18em; /* @kind other */

  /* -------- Colores de plataforma --------
     Para badges y etiquetas de canal. NO son colores de marca: identifican
     una plataforma. Nunca se usan como acento en un arte.
     Origen: vault/_sistema/scripts/build_dashboard.py */
  --plat-youtube: #FF4D4D;
  --plat-short:   #E0A0FF;
  --plat-reel:    #A0C0FF;
  --plat-tiktok:  #25F4EE;
  --plat-multi:   #7DE0C0;
  --plat-otro:    #8A8C95;

  /* Prioridad en el dashboard (estado, no marca) */
  --prio-alta:  #FF3B30;
  --prio-media: #FFCC00;
  --prio-baja:  #34C759;

  /* -------- Lienzos de salida --------
     Los formatos que se renderizan a PNG. Las plantillas de
     06_Recursos/templates/ toman de aquí su tamaño.
     El renderizador (tools/artes/render.py) los repite en su config.yaml. */
  --canvas-infografia-w:  1080px;  /* 1:1  — la que David muestra en cámara */
  --canvas-infografia-h:  1080px;
  --canvas-carrusel-w:    1080px;  /* 4:5  — carrusel Instagram */
  --canvas-carrusel-h:    1350px;
  --canvas-vertical-w:    1080px;  /* 9:16 — story / LinkedIn vertical */
  --canvas-vertical-h:    1920px;
  --canvas-miniatura-w:   1280px;  /* 16:9 — miniatura YouTube */
  --canvas-miniatura-h:    720px;
  --canvas-slide-w:       1280px;  /* 16:9 — slides de presentación */
  --canvas-slide-h:        720px;
  --canvas-animacion-w:   1920px;  /* 16:9 full HD — fondos de animación */
  --canvas-animacion-h:   1080px;
}

/* ==========================================================================
   Clases tipográficas semánticas — úsalas directamente
   ========================================================================== */

.md-display {
  font-family: var(--ff-display);
  font-weight: 800;
  font-size: var(--fs-hero);
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-tight);
  color: var(--fg-1);
  text-wrap: balance;
}

.md-h1 {
  font-family: var(--ff-display);
  font-weight: 800;
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-tight);
  color: var(--fg-1);
}

.md-h2 {
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: var(--fs-h2);
  line-height: var(--lh-snug);
  letter-spacing: var(--tr-snug);
  color: var(--fg-1);
}

.md-h3 {
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
  letter-spacing: var(--tr-snug);
  color: var(--fg-1);
}

.md-h4 {
  font-family: var(--ff-display);
  font-weight: 600;
  font-size: var(--fs-h4);
  line-height: var(--lh-snug);
  letter-spacing: var(--tr-snug);
  color: var(--fg-1);
}

.md-h5 {
  font-family: var(--ff-body);
  font-weight: 600;
  font-size: var(--fs-h5);
  line-height: var(--lh-snug);
  color: var(--fg-1);
}

.md-body {
  font-family: var(--ff-body);
  font-weight: 400;
  font-size: var(--fs-body);
  line-height: var(--lh-relaxed);
  color: var(--fg-2);
}

.md-body-strong {
  font-family: var(--ff-body);
  font-weight: 500;
  font-size: var(--fs-body);
  line-height: var(--lh-relaxed);
  color: var(--fg-1);
}

.md-small {
  font-family: var(--ff-body);
  font-weight: 400;
  font-size: var(--fs-small);
  line-height: var(--lh-normal);
  color: var(--fg-2);
}

.md-caption {
  font-family: var(--ff-body);
  font-weight: 500;
  font-size: var(--fs-caption);
  line-height: var(--lh-normal);
  color: var(--fg-3);
}

.md-eyebrow {
  font-family: var(--ff-body);
  font-weight: 600;
  font-size: var(--fs-caption);
  line-height: 1;
  letter-spacing: var(--tr-uber);
  text-transform: uppercase;
  color: var(--fg-accent);
}

.md-mono {
  font-family: var(--ff-mono);
  font-weight: 400;
  font-size: var(--fs-small);
  line-height: var(--lh-normal);
  color: var(--fg-2);
}

.md-number {
  font-family: var(--ff-display);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--tr-snug);
  color: var(--fg-1);
}

/* auxiliares en línea */
.md-accent { color: var(--fg-accent); }
.md-subtle { color: var(--fg-3); }

/* ==========================================================================
   Bases usadas por las preview cards y las plantillas de arte
   ========================================================================== */
.md-root {
  background: var(--bg-page);
  color: var(--fg-1);
  font-family: var(--ff-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}