/* ══════════════════════════════════════════════════════════════════
   V5 · FASE 2 — hoja de casos

   Molde: /work y /case-study/cointracker de hugeinc.com. El markup de
   casos.js copia las clases utilitarias del sistema (styles.css, no
   se toca) para todo lo que tiene equivalente en Huge. Esta hoja
   solo define los roles que Huge NO tiene: la placa navy con logo
   (ASL/ELEVAN sin foto), el velo del hero, la posicion de las migas
   y del isologo sobre el hero, la ficha de overview (Cliente / Rubro
   / Provincia / Alcance) y el bloque de caso siguiente. Todas las
   clases propias llevan el prefijo ot- y consumen variables del
   tema (var(--theme-*), var(--spacing-N), var(--radius-N)); ningún
   color de marca esta escrito a mano aca.
   Reglas: NOTAS-V4.md, DIRECCION-V4.md §7, ANALISIS-HUGE.md §6.
══════════════════════════════════════════════════════════════════ */

/* ── 1 · Tarjeta apilada de /casos sin foto (placa navy) ── */
.ot-caso-tarjeta__placa{ z-index:0; }
.ot-caso-tarjeta__placa-logo{ width:min(46%,260px); height:auto; opacity:.92; }

/* ── 2 · Hero del caso individual ── */
.ot-caso-hero__velo{ position:absolute; inset:0; background:rgba(0,0,0,.55); }
.ot-caso-hero__placa-logo{ width:min(38%,320px); height:auto; opacity:.92; }
.ot-caso-hero__migas{ top:calc(var(--header-height) + var(--spacing-5)); color:var(--theme-on-base); }
.ot-caso-hero__migas a{ color:inherit; transition:opacity .3s var(--ease-osmo,ease); }
.ot-caso-hero__migas a:hover{ opacity:.7; }
.ot-caso-hero__marca{ top:calc(var(--header-height) + var(--spacing-16)); }
.ot-caso-hero{padding-top:calc(var(--header-height) + var(--spacing-32));padding-bottom:var(--spacing-12)}
.ot-caso-hero>.layout-grid{align-self:end}
@media(max-width:767px){
  .ot-caso-hero h1{font-size:clamp(2.5rem,12vw,4.25rem);line-height:.98;letter-spacing:-.045em}
  .ot-caso-hero .text-h3{font-size:var(--text-h5);line-height:1.12}
  .ot-caso-hero .gap-16{gap:var(--spacing-8)}
  .ot-caso-hero__migas{font-size:var(--text-tiny)}
}

/* ── 3 · Ficha de overview (Cliente / Rubro / Provincia / Alcance) ── */
.ot-overview{ row-gap:var(--spacing-8); padding-block:var(--spacing-8); }
.ot-overview__item{ grid-column:span 2; }
@media (min-width:64rem){ .ot-overview__item{ grid-column:span 3; } }

/* ── 4 · Caso siguiente (sin equivalente en el molde de Huge) ── */
.ot-siguiente{ position:relative; min-height:60svh; display:flex; background:var(--theme-bg); }
.ot-siguiente__enlace{ position:relative; width:100%; display:flex; align-items:flex-end; padding-block:var(--spacing-16); }
.ot-siguiente__medio{ position:absolute; inset:0; z-index:-2; }
.ot-siguiente__medio img{ width:100%; height:100%; object-fit:cover; transition:transform .5s var(--ease-out,ease); }
.ot-siguiente__enlace:hover .ot-siguiente__medio img{ transform:scale(1.05); }
.ot-siguiente__placa{ position:absolute; inset:0; }
.ot-siguiente__degrade{ position:absolute; inset:0; z-index:-1; background:linear-gradient(to top, rgba(0,0,0,.85) 0%, rgba(0,0,0,.35) 45%, rgba(0,0,0,0) 75%); }
.ot-siguiente__texto{ position:relative; display:flex; flex-direction:column; gap:.5em; }

/* ── 5 · Reducido de movimiento (§5) ── */
@media (prefers-reduced-motion:reduce){
  .group-hover\:scale-105,
  .ot-siguiente__medio img{ transition:none; }
}