/* =====================================================================
   RANGO CREATIVE STUDIO — Caso de estudio (/casos/<slug>)
   Réplica de pages/Project.jsx.

   Nota de contraste: el original pinta la categoría del hero en rojo sobre
   #191717 → 3.47:1, por debajo del 4.5:1 que WCAG exige a texto pequeño.
   Aquí la etiqueta de contexto conserva el gris --ink-muted (7.03:1) y el
   rojo se queda en el filete que la precede. Misma corrección que /contacto.
   ===================================================================== */

.page-hero--caso {
  background: var(--bg-elev);
  border-bottom-color: var(--red);
}
.page-hero--caso .page-hero__ctx  { color: var(--ink-muted); }
.page-hero--caso .page-hero__lead { color: var(--ink-muted); font-weight: 700;
  text-transform: uppercase; font-size: var(--fs-300); letter-spacing: 0.02em; }

/* ---- Volver al portafolio ---- */
.caso-back { padding-block: var(--space-4); border-bottom: var(--bw-thin) solid var(--line-faint); }
.link-arrow--back { color: var(--ink-muted); }

/* ---- Barra de metadatos ---- */
.caso-meta { border-bottom: var(--bw) solid var(--line); }
.caso-meta__inner { display: flex; flex-wrap: wrap; }
.caso-meta__cell { padding-block: var(--space-4); padding-right: var(--space-5); }
.caso-meta__cell + .caso-meta__cell {
  padding-left: var(--space-5); border-left: var(--bw) solid var(--line);
}
.caso-meta__k { color: var(--ink-muted); font-size: var(--fs-100); font-weight: 700;
  text-transform: uppercase; letter-spacing: var(--tracking-caps); }
.caso-meta__v { color: var(--ink); font-weight: 900; text-transform: uppercase;
  font-size: var(--fs-200); margin-top: var(--space-1); }

@media (max-width: 700px) {
  .caso-meta__cell + .caso-meta__cell { padding-left: 0; border-left: 0; }
  .caso-meta__cell { flex: 1 1 100%; }
  .caso-meta__cell + .caso-meta__cell { border-top: var(--bw-thin) solid var(--line); }
}

/* ---- Rejilla principal ---- */
.caso-grid { display: grid; gap: var(--space-6); padding-block: var(--space-7) var(--space-8); }
@media (min-width: 1024px) {
  .caso-grid { grid-template-columns: 4fr 8fr; gap: var(--space-7); align-items: start; }
  /* El header es sticky y ocupa 5rem + su borde: la columna se detiene debajo. */
  .caso-side__sticky { position: sticky; top: calc(5rem + var(--bw) + var(--space-5)); }

  /* Caso sin galería (julio-perdomo): una sola columna de lectura. Nada que
     pegar, así que tampoco hay sticky: no hay contra qué desplazarse. */
  .caso-grid--solo-texto { grid-template-columns: minmax(0, 70ch); }
  .caso-grid--solo-texto .caso-side__sticky { position: static; }
}
.caso-grid--solo-texto .caso-gal__vacia { margin-top: var(--space-6); }

.caso-block + .caso-block { margin-top: var(--space-6); }
.caso-block__h {
  display: inline-flex; align-items: center; gap: var(--space-3);
  color: var(--red); font-family: var(--font-body); font-weight: 900;
  text-transform: uppercase; letter-spacing: var(--tracking-caps);
  font-size: var(--fs-100); margin-bottom: var(--space-3);
}
.caso-block__h::before { content: ""; width: var(--space-5); height: var(--bw-thin);
  background: var(--red); flex: none; }
.caso-block__p { color: var(--ink-muted); font-size: var(--fs-300); line-height: 1.7; }

.caso-deliv { list-style: none; display: grid; gap: var(--space-3); }
.caso-deliv li { display: flex; align-items: flex-start; gap: var(--space-3);
  color: var(--ink-muted); font-size: var(--fs-200); font-weight: 700;
  text-transform: uppercase; line-height: 1.5; }
.caso-deliv svg { width: 16px; height: 16px; flex: none; color: var(--red); margin-top: 0.15em; }

.caso-tags { list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-2);
  margin-top: var(--space-6); }
.caso-tag { background: var(--bg-elev); border: var(--bw-thin) solid var(--line);
  color: var(--ink-muted); font-size: var(--fs-100); font-weight: 900;
  text-transform: uppercase; letter-spacing: 0.06em; padding: var(--space-2) var(--space-3); }

.caso-side__cta { margin-top: var(--space-6); padding-top: var(--space-5);
  border-top: var(--bw) solid var(--line); }
.caso-side__q { color: var(--ink-muted); font-size: var(--fs-100); font-weight: 700;
  text-transform: uppercase; letter-spacing: var(--tracking-caps); margin-bottom: var(--space-4); }
.caso-side__cta .btn { width: 100%; justify-content: center; }

/* ---- Galería ----
   GSAP anima `.caso-gal__item` y le deja un transform inline. Por eso el
   hover NO mueve la figura: escala la <img> de dentro, que ningún tween
   toca. Ver tools/audit-hover-transform.py. */
.caso-gal { display: grid; gap: var(--space-4); }
@media (min-width: 640px) { .caso-gal { grid-template-columns: 1fr 1fr; gap: var(--space-5); } }

.caso-gal__item { border: var(--bw) solid var(--line); overflow: hidden;
  background: var(--bg-elev); transition: border-color var(--dur-fast) var(--ease-out-expo); }
.caso-gal__item:hover, .caso-gal__item:focus-within { border-color: var(--red); }
@media (min-width: 640px) { .caso-gal__item--ancho { grid-column: 1 / -1; } }

.caso-gal__item img { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-out-expo); }
.caso-gal__item:hover img, .caso-gal__item:focus-within img { transform: scale(1.05); }

.caso-gal__v { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9;
  object-fit: cover; background: var(--bg); }
.caso-gal__v--vert { aspect-ratio: 9 / 16; }

.caso-gal__vacia { color: var(--ink-muted); font-size: var(--fs-300); line-height: 1.7;
  border-left: var(--bw) solid var(--red); padding-left: var(--space-4); }

/* Sin puntero no hay hover: nada que revelar, nada que compensar. */
@media (hover: none) {
  .caso-gal__item img { transform: none; }
}