/* work-identity.css — identidad por proyecto: carrusel de trabajo y paneles de ficha.
   Cada tarjeta define --wi-brand (color de marca) y --wi-brand-text (ese color legible sobre oscuro). */

.wi-carousel {
  position: relative;
  margin-top: clamp(1.5rem, 4vw, 2.5rem);
}
.wi-track {
  display: flex;
  gap: clamp(0.9rem, 2vw, 1.25rem);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  padding: 0.25rem 0.25rem 1rem;
  margin: 0;
  list-style: none;
}
.wi-track::-webkit-scrollbar { display: none; }
.wi-track:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }

.wi-item {
  min-width: 0; /* un logo grande nunca ensancha la tarjeta */
  flex: 0 0 min(84%, 380px);
  display: flex;
  scroll-snap-align: start;
}
.wi-card {
  --wi-brand: var(--accent);
  --wi-brand-text: var(--wi-brand);
  flex: 1;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border-mid);
  border-radius: 14px;
  overflow: hidden;
  background: var(--bg-card);
  color: inherit;
  text-decoration: none;
  transition: border-color var(--ease), transform var(--ease);
}
.wi-card:hover,
.wi-card:focus-visible {
  border-color: color-mix(in srgb, var(--wi-brand) 60%, transparent);
  transform: translateY(-2px);
}
.wi-card:focus-visible { outline: 2px solid var(--wi-brand-text); outline-offset: 2px; }

/* Escenario del logo: misma altura en todas las tarjetas, pero cada logo conserva
   su forma. No se normalizan: unos flotan, otros son una pieza con fondo propio. */
.wi-stage {
  --wi-stage-h: clamp(150px, 20vw, 190px);
  position: relative;
  height: var(--wi-stage-h);
  display: grid;
  place-items: center;
  padding: 0 clamp(0.9rem, 2.4vw, 1.4rem);
  overflow: hidden;
  background: radial-gradient(ellipse 75% 85% at 50% 50%, color-mix(in srgb, var(--wi-brand) 20%, transparent), transparent 70%);
}
.wi-stage--bleed { padding: 0; background: #000; }
.wi-logo {
  display: block;
  width: auto;
  height: auto;
  max-width: var(--wi-w, 86%);
  /* La altura se limita contra la altura real del escenario: un porcentaje no aplica aquí. */
  max-height: calc(var(--wi-stage-h) * var(--wi-hf, 0.78));
  object-fit: contain;
}
/* Transparente: flota sobre la tarjeta. */
.wi-logo--float { filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.45)); }
/* Con fondo propio: pieza con su proporción. */
.wi-logo--tile { border-radius: 10px; box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45); }
/* Ícono de app. */
.wi-logo--icon { border-radius: 22%; box-shadow: 0 10px 28px rgba(0, 0, 0, 0.5); }
/* Logo de tinta oscura: va sobre papel claro, a su tamaño. */
.wi-logo--paper { box-sizing: border-box; padding: 0.85rem 1.1rem; border-radius: 10px; background: #f3efe6; box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45); }
/* Ilustración: a sangre. */
.wi-logo--bleed { width: 100%; height: 100%; max-width: none; max-height: none; object-fit: cover; }

.wi-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: 1.1rem 1.25rem 1.35rem;
  border-top: 2px solid var(--wi-brand);
}
.wi-tags { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.wi-tags .tag-state {
  background: color-mix(in srgb, var(--wi-brand) 16%, transparent);
  color: var(--wi-brand-text);
  border-color: color-mix(in srgb, var(--wi-brand) 42%, transparent);
}
.wi-card h3 {
  margin: 0;
  font-family: var(--font-serif);
  font-size: clamp(1.45rem, 2.6vw, 1.7rem);
  font-weight: 500;
  line-height: 1.15;
  color: var(--text-primary);
}
.wi-card p {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--text-secondary);
}

.wi-controls {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-top: 0.35rem;
}
.wi-btn {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid var(--border-mid);
  border-radius: 99px;
  background: var(--bg-surface);
  color: var(--text-primary);
  font: inherit;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  transition: border-color var(--ease), color var(--ease);
}
.wi-btn:hover { border-color: var(--accent); color: var(--accent); }
.wi-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.wi-btn[hidden] { display: none; }

@media (min-width: 900px) {
  .wi-item { flex-basis: calc((100% - 2 * clamp(0.9rem, 2vw, 1.25rem)) / 3); }
}
@media (prefers-reduced-motion: reduce) {
  .wi-track { scroll-behavior: auto; }
  .wi-card { transition: none; }
}

/* ---- Fichas de /trabajo: el panel toma la marca del proyecto ---- */
.caso[data-brand] .evidence-panel {
  border-color: color-mix(in srgb, var(--wi-brand) 40%, transparent);
  background-image: radial-gradient(ellipse 85% 60% at 50% 40%, color-mix(in srgb, var(--wi-brand) 15%, transparent), transparent 70%);
}
.caso[data-brand] .caso-tags .tag-accent {
  background: color-mix(in srgb, var(--wi-brand) 16%, transparent);
  color: var(--wi-brand-text, var(--wi-brand));
  border-color: color-mix(in srgb, var(--wi-brand) 42%, transparent);
}
.wi-mark {
  align-self: center;
  display: grid;
  place-items: center;
  width: 100%;
  margin: clamp(1rem, 3vw, 2rem) 0;
}
.wi-mark img {
  display: block;
  width: auto;
  height: auto;
  max-width: min(82%, 420px);
  max-height: clamp(7rem, 20vw, 13rem);
  object-fit: contain;
}
.wi-mark--light {
  width: auto;
  padding: clamp(1rem, 3vw, 1.75rem);
  border-radius: 12px;
  background: #f3efe6;
}
.wi-mark--light img { max-width: min(100%, 360px); }

/* Herramientas internas: el logo ocupa su propia fila sobre el nombre. */
.evidence-key__item .wi-mini {
  grid-column: 1 / -1;
  justify-self: start;
  display: block;
  height: 48px;
  width: auto;
  max-width: 100%;
  margin-bottom: 0.75rem;
  border-radius: 6px;
  object-fit: contain;
}
.wi-mark { position: relative; z-index: 1; }