/* ═══════════════════════════════════════════════════════════
   CS06 · Reportería GA4 con IA Generativa
   Visual identity: morado · negros profundos · anchors claros
   Scope: [data-route^="portfolio/cs6"]
═══════════════════════════════════════════════════════════ */

/* ── Palette CS06 — definición única, usada via var() ────── */
:root {
  --cs6-purple:        #4455d6;
  --cs6-purple-mid:    #3848c0;
  --cs6-purple-strong: #2c3aaa;
  --cs6-purple-a07:    rgba(68,85,214,0.07);
  --cs6-purple-a10:    rgba(68,85,214,0.10);
  --cs6-purple-a14:    rgba(68,85,214,0.14);
  --cs6-purple-a18:    rgba(68,85,214,0.18);
  --cs6-purple-a22:    rgba(68,85,214,0.22);
  --cs6-purple-a30:    rgba(68,85,214,0.30);
  --cs6-purple-a40:    rgba(68,85,214,0.40);
  --cs6-black:         #0a0c14;
  --cs6-black2:        #1e2130;
}

/* ── Text más profundo en CS06 ──────────────────────────── */
[data-route^="portfolio/cs6"] {
  --text:  var(--cs6-black);
  --text2: var(--cs6-black2);
}

/* ── Headings: más peso, más negro ──────────────────────── */
[data-route^="portfolio/cs6"] h1,
[data-route^="portfolio/cs6"] h2,
[data-route^="portfolio/cs6"] h3 {
  color: var(--cs6-black);
  font-weight: 700;
  letter-spacing: -0.015em;
}

/* ── Eyebrow / labels → morado ──────────────────────────── */
[data-route^="portfolio/cs6"] .eyebrow,
[data-route^="portfolio/cs6"] .u-card-title-muted,
[data-route^="portfolio/cs6"] .ins-label {
  color: var(--cs6-purple-mid);
}

/* ── piece-insight-block → morado bold ──────────────────── */
[data-route^="portfolio/cs6"] .piece-insight-block {
  border-color: var(--cs6-purple);
  background: var(--cs6-purple-a10);
}

/* ── Tablas: header con fondo morado tenue ──────────────── */
[data-route^="portfolio/cs6"] .u-table .u-table-head {
  color: var(--cs6-purple-mid);
  background: var(--cs6-purple-a07);
  letter-spacing: 0.08em;
}

/* ── Labels de status: más bold ─────────────────────────── */
[data-route^="portfolio/cs6"] .u-table-cell .u-meta-label {
  font-size: 0.70rem;
  font-weight: 600;
  letter-spacing: 0.10em;
}

/* ── Screenshots: sombra morada ─────────────────────────── */
[data-route^="portfolio/cs6"] figure img {
  border: 1px solid var(--cs6-purple-a22);
  box-shadow:
    0 10px 40px var(--cs6-purple-a14),
    0 2px  8px  var(--cs6-purple-a10);
  border-radius: calc(var(--r) + 2px);
}

[data-route^="portfolio/cs6"] figcaption {
  color: var(--cs6-purple-mid);
  font-weight: 500;
}

/* ── Cards: acento morado ───────────────────────────────── */
[data-route^="portfolio/cs6"] .u-card-soft {
  border-color: var(--cs6-purple-a22);
}

/* ── Hero blob: tinte morado ────────────────────────────── */
[data-route^="portfolio/cs6"] .pearl-blob {
  background:
    radial-gradient(ellipse 70% 60% at 20% 60%, var(--cs6-purple-a14) 0%, transparent 70%),
    radial-gradient(ellipse 50% 70% at 75% 30%, var(--cs6-purple-a07) 0%, transparent 70%),
    radial-gradient(ellipse 60% 50% at 50% 80%, var(--cs6-purple-a07) 0%, transparent 65%);
}

/* ── Breadcrumb → morado ────────────────────────────────── */
[data-route^="portfolio/cs6"] .breadcrumb a {
  color: var(--cs6-purple-mid);
}