/* ============================================================
   Interlaken® · Componente · Lockup -work
   Sistema visual parametrizable para Bridgework, Groundwork,
   Fieldwork, Responsework. Cambia solo la palabra.

   Sprint 2.E del rediseño · 25 abril 2026.
   Origen: work-lockup.css del Design System de Claude Design,
   adaptado al sistema de tokens Interlaken®.

   PROPORCIONES BLOQUEADAS (heredadas del Bridgework canónico):
   · Wordmark · Sarabun ExtraLight (200), todo minúsculas, color #1A1A1A
   · Endoso · "by interlaken®" en Sarabun Regular (400), color #2B2F45
   · Filetes · Dos líneas naranja #FF6700 de 1.5px flanqueando el endoso
   · Fondo de marca · Crema cálido #F6F1EA (admite blanco puro también)

   Variable maestra: --ilk-work-size (tamaño base del wordmark).
   Todo escala desde ahí.
   ============================================================ */

.ilk-work-lockup {
  /* Variable maestra — sobreescribir en uso para cambiar tamaño global */
  --ilk-work-size: 96px;

  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--ilk-work-size) * 0.22);
  font-family: var(--ilk-font-sans);
  line-height: 1;
  color: var(--ilk-work-ink);
  user-select: none;
}

.ilk-work-lockup__word {
  font-family: var(--ilk-font-sans);
  font-weight: var(--ilk-fw-extralight);   /* 200 */
  font-size: var(--ilk-work-size);
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--ilk-work-ink);
  text-transform: lowercase;
  white-space: nowrap;
}

/* Ajuste tipográfico específico para responsework — 12 letras */
.ilk-work-lockup--responsework .ilk-work-lockup__word {
  letter-spacing: -0.022em;
}

.ilk-work-lockup__endoso {
  display: flex;
  align-items: center;
  gap: calc(var(--ilk-work-size) * 0.12);
  font-weight: var(--ilk-fw-regular);       /* 400 */
  font-size: calc(var(--ilk-work-size) * 0.185);
  color: var(--ilk-work-endoso);
  letter-spacing: 0;
  white-space: nowrap;
}

/* Filetes a izquierda y derecha del endoso.
   Color naranja por default (paleta madre), pero las variantes
   cromáticas cool/green pueden sobrescribirlo con su accent. */
.ilk-work-lockup__endoso::before,
.ilk-work-lockup__endoso::after {
  content: "";
  display: block;
  width: calc(var(--ilk-work-size) * 0.45);
  height: 1.5px;
  background: var(--ilk-work-accent-line, var(--ilk-orange));
  flex: none;
}

.ilk-work-lockup__endoso em {
  font-style: normal;
  font-weight: var(--ilk-fw-regular);
}

.ilk-work-lockup__endoso sup {
  font-size: 0.55em;
  vertical-align: super;
  margin-left: 0.05em;
}

/* ────────────────────────────────────────────────────────────
   Variantes cromáticas
   ──────────────────────────────────────────────────────────── */

/* Sobre fondo oscuro: wordmark y endoso en blanco, filetes naranja */
.ilk-work-lockup--on-dark {
  --ilk-work-ink: var(--ilk-fg-inverse);
}
.ilk-work-lockup--on-dark .ilk-work-lockup__word { color: var(--ilk-fg-inverse); }
.ilk-work-lockup--on-dark .ilk-work-lockup__endoso { color: var(--ilk-fg-inverse); }

/* Variante cool (Academy) — para uso sobre frame cool claro #E8EDEF.
   Wordmark en azul tinta profundo, endoso en cool oscuro,
   filetes en cool medio (no naranja). */
.ilk-work-lockup--cool {
  --ilk-work-ink: var(--ilk-academy-deep);
  --ilk-work-endoso: var(--ilk-academy-accent);
  --ilk-work-accent-line: var(--ilk-academy-mid);
}
.ilk-work-lockup--cool .ilk-work-lockup__word { color: var(--ilk-academy-deep); }
.ilk-work-lockup--cool .ilk-work-lockup__endoso { color: var(--ilk-academy-accent); }

/* Variante green (Fieldwork) — para uso sobre frame green claro #E8EFE6.
   Wordmark en verde bosque profundo, endoso en verde oscuro,
   filetes en verde medio (no naranja). */
.ilk-work-lockup--green {
  --ilk-work-ink: var(--ilk-fieldwork-deep);
  --ilk-work-endoso: var(--ilk-fieldwork-accent);
  --ilk-work-accent-line: var(--ilk-fieldwork-mid);
}
.ilk-work-lockup--green .ilk-work-lockup__word { color: var(--ilk-fieldwork-deep); }
.ilk-work-lockup--green .ilk-work-lockup__endoso { color: var(--ilk-fieldwork-accent); }

/* Monocromo negro — para impresión 1 tinta o uso sobre fondos complejos */
.ilk-work-lockup--mono-black .ilk-work-lockup__word { color: var(--ilk-black); }
.ilk-work-lockup--mono-black .ilk-work-lockup__endoso { color: var(--ilk-black); }
.ilk-work-lockup--mono-black .ilk-work-lockup__endoso::before,
.ilk-work-lockup--mono-black .ilk-work-lockup__endoso::after {
  background: var(--ilk-black);
}

/* ────────────────────────────────────────────────────────────
   Frame de marca — caja con fondo crema cálido
   Se usa cuando el lockup necesita su propio espacio de respeto
   sobre fondo blanco u otros contextos. Optional wrapper.
   ──────────────────────────────────────────────────────────── */

.ilk-work-frame {
  --ilk-work-size: 96px;
  background: var(--ilk-work-cream);
  padding: calc(var(--ilk-work-size) * 0.6) calc(var(--ilk-work-size) * 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
}

.ilk-work-frame--white {
  background: var(--ilk-bg-1);
}

.ilk-work-frame--dark {
  background: var(--ilk-bg-dark);
}

/* ────────────────────────────────────────────────────────────
   Tamaños predefinidos
   Atajo de uso para los tamaños recurrentes del sitio.
   ──────────────────────────────────────────────────────────── */

.ilk-work-lockup--xs { --ilk-work-size: 24px; }   /* breadcrumbs, créditos */
.ilk-work-lockup--sm { --ilk-work-size: 36px; }   /* footer, headers compactos */
.ilk-work-lockup--md { --ilk-work-size: 56px; }   /* cards de instalador en home */
.ilk-work-lockup--lg { --ilk-work-size: 96px; }   /* heros de página de unidad */
.ilk-work-lockup--xl { --ilk-work-size: 144px; }  /* hero de home Interlaken® */

/* En tamaños pequeños (xs, sm), el endoso puede sentirse abigarrado.
   La regla del Design System permite: */
.ilk-work-lockup--xs .ilk-work-lockup__endoso,
.ilk-work-lockup--sm .ilk-work-lockup__endoso {
  font-size: calc(var(--ilk-work-size) * 0.22);
}

/* ────────────────────────────────────────────────────────────
   Responsive — escalar suavemente en mobile
   El --ilk-work-size se mantiene literal a menos que el padre
   use clamp() o variables fluidas. Para pantallas pequeñas,
   los tamaños xl y lg se reducen.
   ──────────────────────────────────────────────────────────── */

@media (max-width: 767px) {
  .ilk-work-lockup--xl { --ilk-work-size: clamp(72px, 18vw, 144px); }
  .ilk-work-lockup--lg { --ilk-work-size: clamp(56px, 14vw, 96px); }
  .ilk-work-lockup--md { --ilk-work-size: clamp(40px, 10vw, 56px); }
}