/* ============================================================
   CASE STUDIES
   ============================================================ */
.case-hero{padding-block:calc(var(--section-y) + var(--nav-h)) var(--section-y)}
.case__rol{font-size:var(--step--1);letter-spacing:var(--track-caps);
  text-transform:uppercase;font-weight:var(--w-medium);color:var(--dim);
  margin-block-end:var(--space-md)}
.case__title{font-size:var(--step-6);max-width:14ch}
.case__tagline{font-size:var(--step-2);line-height:var(--lh-snug);
  font-weight:var(--w-medium);max-width:38ch;margin-block-start:var(--space-lg)}
.case__ficha{
  display:flex;gap:clamp(1.5rem,5vw,4rem);flex-wrap:wrap;
  margin:var(--space-2xl) 0 0;padding-block-start:var(--space-lg);
  border-block-start:1px solid var(--hairline-alt);
}
.case__ficha dt{font-size:var(--step--1);color:var(--dim);margin-block-end:.2rem}
.case__ficha dd{margin:0;font-weight:var(--w-bold);font-size:var(--step-1)}

/* ============================================================
   LA GALERÍA DE CASE STUDIES
   Un slab por caso: cliente, titular que afirma algo, botón y
   métricas, con la carátula saliéndose por la derecha.
   ============================================================ */
.slabs{display:grid;gap:var(--space-lg)}

.slab{position:relative;overflow:hidden;border-radius:var(--r-lg);
  background:var(--lilac);color:var(--on-lilac);
  --pad:var(--space-2xl);
  padding:var(--pad);display:grid;gap:var(--space-xl);align-items:center;
  transition:translate var(--dur-base) var(--ease)}
/* El levantón usa translate y no transform a propósito. El reveal ya
   ocupa transform en este mismo elemento, y su regla .is-in gana por
   especificidad: con transform el hover simplemente no se veía. translate
   es una propiedad aparte, así que se compone con el reveal en vez de
   pelearse con él. */
.slab:hover,.slab:has(.slab__btn:focus-visible){translate:0 -4px}
@media (min-width:900px){
  .slab{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
        padding-inline-end:0;min-height:30rem}
}
.slab__cliente{font-size:var(--step--1);letter-spacing:var(--track-caps);
  text-transform:uppercase;font-weight:var(--w-bold)}
.slab__title{font-size:var(--step-4);line-height:1.02;
  letter-spacing:var(--track-tight);font-weight:var(--w-bold);
  margin-block:var(--space-md) var(--space-sm);max-width:16ch}
.slab__linea{color:var(--dim-lilac);max-width:40ch;line-height:var(--lh-snug)}
.slab__btn{display:inline-flex;align-items:center;gap:.5em;
  margin-block-start:var(--space-lg);background:var(--ink);color:var(--paper);
  border-radius:var(--r-pill);padding:.85em 1.7em;text-decoration:none;
  font-weight:var(--w-medium);transition:gap var(--dur-base) var(--ease)}
/* El botón se estira sobre todo el slab para que el bloque entero sea
   clicable, como las tarjetas de la galería de proyectos, sin meter un
   segundo enlace que el lector de pantalla tendría que anunciar aparte. */
.slab__btn::after{content:"";position:absolute;inset:0;border-radius:inherit}
.slab:hover .slab__btn{gap:1em}

.slab__metricas{display:grid;grid-template-columns:repeat(3,auto);
  justify-content:start;gap:var(--space-xl);margin-block-start:var(--space-2xl);
  align-items:start}
@media (max-width:520px){ .slab__metricas{grid-template-columns:repeat(2,auto)} }
/* Sin tabular-nums: las cifras tabulares tienen ancho fijo, así que en
   Instrument Sans le abren hueco de más al 1 y al signo y "+34%" salía
   descuadrado. Aquí no hay ninguna columna que alinear, son tres datos
   sueltos, así que van con las cifras proporcionales de siempre. */
.slab__metrica b{display:block;font-size:var(--step-4);font-weight:var(--w-bold);
  letter-spacing:var(--track-tight);line-height:.95}
.slab__metrica span{display:block;margin-block-start:.5em;
  font-size:var(--step--1);color:var(--dim-lilac);line-height:var(--lh-snug)}

/* La carátula se sale por la derecha e inclinada: deja ver que hay más
   producto del que cabe en el bloque. */
/* drop-shadow y no box-shadow: la carátula viene en PNG con
   transparencia, y box-shadow sombrea la caja del elemento, no la
   silueta. Eso pintaba un panel rectangular pálido detrás del mockup y
   se comía la transparencia que Valeria dejó a propósito. Tampoco lleva
   border-radius, que solo se nota cuando hay fondo opaco. */
/* El ancho, y no scale(), es lo que agranda la caratula: scale no cuenta
   para el layout, asi que el slab no crecia y el mockup se recortaba
   arriba y abajo. Con width el bloque crece con la imagen y solo se sale
   por la derecha, que es lo que se busca. */
/* pointer-events:none porque la carátula va DESPUÉS del botón en el DOM
   y por lo tanto se pinta encima de su ::after estirado: sin esto, la
   mitad derecha del slab se veía clicable pero no lo era. La imagen es
   decorativa (alt vacío), así que no pierde nada al no recibir el clic. */
.slab__shot{display:block;width:100%;max-width:none;pointer-events:none;
  filter:drop-shadow(0 22px 40px rgb(0 0 0/.22));
  transition:scale var(--dur-slow) var(--ease)}
.slab:hover .slab__shot{scale:1.03}
/* ---- Móvil: la carátula también se sale del bloque ----
   Se ensancha más allá del ancho del slab y se recorta por abajo con el
   contenedor. El padding inferior se anula para que la imagen llegue al
   borde, y el margen negativo la empuja fuera para que overflow:hidden
   la corte. */
@media (max-width:899px){
  /* 5rem por lado se comía 160px de una pantalla de 390. */
  .slab{--pad:var(--space-lg);padding-block-end:0;gap:var(--space-lg)}
  /* Se calcula contra el padding del slab para que sobresalga lo mismo de
     los dos lados: ancho = contenido + los dos paddings + 6% por lado. */
  .slab__shot{width:calc(100% + 2 * var(--pad) + 12%);max-width:none;
              margin-inline:calc(-1 * var(--pad) - 6%);
              margin-block-end:-16%}
  /* El bloque de "próximamente" no trae imagen: si le quitamos el
     padding de abajo el texto queda pegado al borde. */
  .slab--soon{padding-block-end:var(--pad)}
}

@media (min-width:900px){
  /* La carátula manda: crece con el ancho de su columna y se pasa un
     18% para salirse por la derecha, que overflow:hidden recorta. Va en
     flujo y no absoluta a propósito, porque las carátulas cambian de
     proporción entre un caso y otro (una horizontal, otra vertical) y
     así el slab crece con ella en vez de recortarle el mockup.

     Sin rotación aquí: la inclinación la trae el archivo que compone
     Valeria. Si la pusiéramos también en CSS, se rotaría dos veces. */
  .slab__shot{width:118%;max-width:none}
}

/* Los que faltan: mismo bloque, sin color y con candado. Se anuncian. */
.slab--soon{background:color-mix(in srgb,var(--ink) 7%,var(--paper));
  color:var(--muted);min-height:0}
.slab--soon:hover{translate:none}   /* no es clicable, no se mueve */
@media (min-width:900px){ .slab--soon{grid-template-columns:1fr;padding-inline-end:var(--space-2xl)} }
.slab--soon .slab__title{color:var(--muted);font-size:var(--step-3);max-width:20ch}
.slab--soon .slab__linea{color:var(--muted)}
.slab__lock{display:inline-flex;align-items:center;gap:.45em;
  font-size:var(--step--1);font-weight:var(--w-medium);color:var(--muted);
  border:1px solid var(--hairline);border-radius:var(--r-pill);padding:.4em 1em}