/* ============================================================
   GRUPO DIGITALS · MANUAL · tokens scopeados a .gd-manual-scope
   Adaptado de handoff/tokens.css · NO modifica el shell de la propuesta.
   ============================================================ */

.gd-manual-scope {
  /* ── Core palette ── */
  --ink: #0A0A0A;
  --ink-2: #141414;
  --ink-3: #1F1F1F;
  --paper: #F4F2EC;
  --paper-2: #EBE8E0;
  --line: #2A2A2A;

  /* Signature accent */
  --lime: #C6FF3A;
  --lime-deep: #9BD600;

  /* Sub-brand accents */
  --c-agencia:   #C6FF3A;
  --c-executive: #4DA6E8;
  --c-linkd:     #0A0A0A;
  --c-linkd-signal: #2D6BFF;
  --c-hapee:     #EC5826;
  --c-hapee-2:   #C2236A;
  --c-academy:   #FFD23F;
  --c-talent:    #FF4D9D;
  --c-zentru:    #00D4B8;

  /* Type */
  --f-display: 'Inter Tight', 'Helvetica Neue', sans-serif;
  --f-mono:    'JetBrains Mono', ui-monospace, monospace;
  --f-serif:   'Instrument Serif', Georgia, serif;

  /* Spacing */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px;

  /* Radius */
  --r-xs: 2px; --r-sm: 6px; --r-md: 12px; --r-lg: 20px; --r-pill: 999px;
}

/* utility primitives — scopeadas */
.gd-manual-scope .gd-mono { font-family: var(--f-mono); font-weight: 400; letter-spacing: 0.01em; }
.gd-manual-scope .gd-display { font-family: var(--f-display); font-weight: 800; letter-spacing: -0.04em; }
.gd-manual-scope .gd-serif { font-family: var(--f-serif); font-weight: 400; }

.gd-manual-scope .gd-eyebrow {
  font-family: var(--f-mono); font-size: 11px;
  letter-spacing: 0.18em; text-transform: uppercase; font-weight: 500;
}

.gd-manual-scope .gd-tag {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px;
  border: 1px solid currentColor; border-radius: var(--r-pill);
  font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.05em; text-transform: uppercase;
}

.gd-manual-scope .gd-tag-solid {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px;
  border-radius: var(--r-pill); font-family: var(--f-mono); font-size: 11px;
  letter-spacing: 0.05em; text-transform: uppercase;
}

.gd-manual-scope .gd-grid-bg {
  background-image:
    linear-gradient(to right, rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 32px 32px;
}

.gd-manual-scope .gd-grid-bg-dark {
  background-image:
    linear-gradient(to right, rgba(0,0,0,0.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(0,0,0,0.06) 1px, transparent 1px);
  background-size: 32px 32px;
}

.gd-manual-scope .gd-noise::after {
  content: ""; position: absolute; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.5; mix-blend-mode: overlay; pointer-events: none;
}

.gd-manual-scope .gd-iridescent {
  background:
    radial-gradient(at 18% 22%, #C6FF3A 0%, transparent 42%),
    radial-gradient(at 82% 18%, #FF4D9D 0%, transparent 45%),
    radial-gradient(at 50% 88%, #2D6BFF 0%, transparent 50%),
    radial-gradient(at 90% 75%, #FF6C2B 0%, transparent 38%),
    #0A0A0A;
}

.gd-manual-scope .gd-logo-stack {
  font-family: var(--f-display); line-height: 0.82; letter-spacing: -0.04em;
}
.gd-manual-scope .gd-logo-stack .a { font-weight: 400; font-size: 0.62em; display: block; }
.gd-manual-scope .gd-logo-stack .b { font-weight: 800; display: block; }

/* ============================================================
   Galería · grid de las 63 piezas escaladas con CSS calc()
   ============================================================ */
.gd-manual-grid {
  --tile-w: 280px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--tile-w), 1fr));
  gap: 18px;
  margin-bottom: 1.4rem;
}
@media (max-width: 1100px) { .gd-manual-grid { --tile-w: 220px; } }
@media (max-width: 760px)  { .gd-manual-grid { --tile-w: 100%; } .gd-manual-grid { grid-template-columns: 1fr; } }

.gd-manual-tile {
  position: relative;
  width: 100%;
  aspect-ratio: var(--pw, 1080) / var(--ph, 1080);
  overflow: hidden;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.06);
  background: #050608;
  box-shadow: 0 8px 24px -16px rgba(0,0,0,0.5);
  transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s;
}
.gd-manual-tile:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 38px -18px rgba(198,255,58,0.25);
  border-color: rgba(198,255,58,0.35);
}

.gd-manual-tile .tile-render {
  position: absolute; top: 0; left: 0;
  width: calc(var(--pw, 1080) * 1px);
  height: calc(var(--ph, 1080) * 1px);
  /* scale = container width / piece width · usamos cqw (container query unit) */
  transform: scale(calc(100cqw / (var(--pw, 1080) * 1px)));
  transform-origin: top left;
}
.gd-manual-tile { container-type: inline-size; }

.gd-manual-tile .tile-meta {
  position: absolute; bottom: 0; left: 0; right: 0;
  padding: .55rem .7rem;
  background: linear-gradient(to top, rgba(5,6,8,0.92), rgba(5,6,8,0));
  display: flex; justify-content: space-between; align-items: end;
  font-family: var(--fm, 'JetBrains Mono', monospace);
  font-size: .55rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: rgba(244,242,236,0.92);
  pointer-events: none;
}
.gd-manual-tile .tile-meta .label { font-weight: 700; max-width: 70%; line-height: 1.2; letter-spacing: 0.1em; }
.gd-manual-tile .tile-meta .dim { color: rgba(244,242,236,0.55); }

.gd-manual-section .group-h {
  font-family: var(--fm); font-size: .6rem; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--accent);
  margin: 1.8rem 0 .8rem; display: flex; align-items: center; gap: .6rem;
}
.gd-manual-section .group-h .count {
  background: var(--accent-soft); color: var(--accent);
  padding: .15rem .55rem; border-radius: 999px;
  border: 1px solid var(--accent); font-size: .55rem; letter-spacing: 0.16em;
}
.gd-manual-section .group-h .new-tag {
  background: rgba(255,77,157,0.16); color: #FF4D9D;
  padding: .12rem .45rem; border-radius: 999px;
  border: 1px solid rgba(255,77,157,0.5); font-size: .5rem; letter-spacing: 0.18em;
  margin-left: .4rem;
}