/**
 * Chile Social Innovation — tokens Canon Kit
 * Fuente: Brandbook pliego 18–19 + MARCA_CHILE_SOCIAL_INNOVATION_COLORES.pdf
 * UI consumidora: solo estas variables. Sin hex sueltos.
 */
:root {
  /* —— Paleta oficial (11) —— */
  --csi-teal: #00b2a9; /* 326 C · C81 M0 Y39 K0 · R0 G178 B169 */
  --csi-teal-deep: #007d8a; /* 7713 C · C100 M0 Y30 K26 · R0 G125 B138 — texto teal AA */
  --csi-navy: #003d4c; /* 548 C · C100 M21 Y28 K76 · R0 G61 B76 */
  --csi-blue-deep: #1d428a; /* 7687 C · C100 M78 Y0 K18 · R29 G66 B138 */
  --csi-blue-violet: #485cc7; /* 2726 C · C81 M70 Y0 K0 · R72 G92 B199 */
  --csi-blue: #418fde; /* 279 C · C68 M34 Y0 K0 · R65 G143 B222 */
  --csi-violet-mid: #606eb2; /* 7456 C · C72 M55 Y0 K0 · R96 G110 B178 */
  --csi-violet: #565294; /* 7670 C · C80 M74 Y0 K0 · R86 G82 B148 */
  --csi-magenta: #d0006f; /* 226 C · C0 M100 Y2 K0 · R208 G0 B111 */
  --csi-orange: #dc6b2f; /* 7578 C · C0 M67 Y100 K0 · R220 G107 B47 */
  --csi-black: #231f20; /* Black C · C0 M0 Y0 K100 · R35 G31 B32 */

  /* Aclarados solo sobre fondo oscuro de marca */
  --csi-blue-on-dark: #6bb0ee;
  --csi-magenta-on-dark: #f23e92;
  --csi-orange-on-dark: #f08a4e;

  /* —— Neutros = tintas de Pantone 548 C —— */
  --ground: #ffffff;
  --ground-2: #f4f8f9;
  --rule-2: #eaf0f1;
  --rule: #d7e1e3;
  --ink-3: #6e8085;
  --ink-2: #4a585c;
  --ink: #231f20;

  /* —— Dieta Canon (roles UI) —— */
  --canvas: var(--ground);
  --surface: var(--ground);
  --surface-elevated: var(--ground-2);
  --accent: var(--csi-magenta);
  --accent-hover: #a8005a;
  --primary: var(--csi-blue);
  --primary-hover: var(--csi-blue-deep);
  --muted: var(--ink-2);
  --muralla: var(--ink);
  --hoja: var(--csi-teal);

  /* Gradientes de marca */
  --csi-gradient-h: linear-gradient(
    135deg,
    #003d4c 0%,
    #1d428a 22%,
    #565294 48%,
    #d0006f 72%,
    #418fde 100%
  );
  --csi-gradient-v: linear-gradient(
    180deg,
    #1d428a 0%,
    #565294 28%,
    #d0006f 55%,
    #485cc7 75%,
    #00b2a9 100%
  );
  --csi-gradient-mesh:
    radial-gradient(120% 90% at 15% 0%, #1d428a 0%, transparent 60%),
    radial-gradient(110% 80% at 95% 30%, #d0006f 0%, transparent 62%),
    radial-gradient(130% 95% at 25% 105%, #00b2a9 0%, transparent 65%),
    #565294;

  /* —— Tipografía —— */
  --font-display: "Barlow Condensed", "Arial Narrow", "Helvetica Neue Condensed",
    Arial, sans-serif;
  --font-ui: "Barlow", Arial, Helvetica, sans-serif;
  --font-body: var(--font-ui);
  --font-accent: "Lora", Georgia, "Times New Roman", serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* —— Forma (sistema editorial, no pills) —— */
  --radius: 0px;
  --btn-radius: 0px;
  --rail-width: 22px;

  /* —— Espacio —— */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 40px;
  --space-6: 64px;

  /* —— Motion —— */
  --ease: cubic-bezier(0.32, 0.72, 0, 1);

  /* —— CTA —— */
  --btn-min-size: 16px;

  color-scheme: light;
}

/* La marca no tiene modo oscuro neutro: fondo siempre blanco o color de paleta */
:root[data-theme="dark"],
:root[data-theme="light"] {
  --canvas: #ffffff;
  --surface: #ffffff;
  --surface-elevated: #f4f8f9;
  --ink: #231f20;
  --muted: #4a585c;
  color-scheme: light;
}

.btn-accent {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 1.5rem;
  border: 0;
  border-radius: var(--btn-radius);
  background: var(--csi-magenta);
  color: #fff;
  font-family: var(--font-ui);
  font-size: max(1rem, var(--btn-min-size));
  font-weight: 700;
  letter-spacing: 0.02em;
  text-decoration: none;
  text-transform: uppercase;
  transition: background 160ms var(--ease);
}

.btn-accent:hover {
  background: var(--accent-hover);
}

.csi-rail {
  width: var(--rail-width);
  flex-shrink: 0;
  background: var(--csi-gradient-v);
  mask-image: repeating-linear-gradient(
    180deg,
    #000 0 1.5px,
    transparent 1.5px 5px
  );
  -webkit-mask-image: repeating-linear-gradient(
    180deg,
    #000 0 1.5px,
    transparent 1.5px 5px
  );
}

.csi-photo {
  position: relative;
  overflow: hidden;
}

.csi-photo > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.05);
}

.csi-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--csi-gradient-h);
  mix-blend-mode: color;
  opacity: 0.88;
  pointer-events: none;
}