/* =========================================================================
   La página de un caso: la plantilla que dibuja cada «Historia» del panel.
   Va DESPUÉS de historias.css, del que toma sin repetirlas: las etiquetas,
   los enlaces de ficha (.enlace-ficha), la cadena de herramientas (.cadena),
   el cierre, la barra de WhatsApp y los keyframes «llega» y
   «marco-se-destapa».

   Editorial y corto: la cabeza (cliente, título y el cambio, los mismos de
   la ficha), la prueba grande y los tramos de la historia (antes, ahora,
   cómo funciona, lo que lo hace distinto) separados por filetes, sin cajas.
   En escritorio cada tramo es una fila de revista: el rótulo a la izquierda,
   el texto a la derecha; en el celular, uno abajo del otro.

   Todo lo opcional puede faltar: cada tramo trae su propio filete arriba
   (no depende del vecino), así que si falta uno no queda raya de más ni
   hueco. Sin captura principal, en su lugar va la cadena de herramientas
   (.caso-prueba--cadena).
   ========================================================================= */
.caso {
  --marco: #ECE6D9;                         /* papel un escalón más hondo, como en la lista */
  --radio-marco: 20px;
  --columnas: minmax(0, 3fr) minmax(0, 9fr);
  --hueco: clamp(2rem, 0.5rem + 4.5vw, 5.5rem);
  max-width: var(--ancho);
  margin: 0 auto;
  padding: clamp(0.5rem, 0.25rem + 1vw, 1.25rem) var(--margen) 0;
}

/* -------------------------------------------------------------------------
   Cabeza
   ------------------------------------------------------------------------- */
/* Para volver: en el celular el menú no se dibuja */
.caso-ruta {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  min-height: 2.75rem;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--tinta-2);
  text-decoration: none;
}
.caso-ruta svg,
.enlace-ficha--volver svg { flex: none; width: 1em; height: 1em; color: var(--enlace); transition: translate var(--t-rodar) var(--ease-out); }
.caso-ruta:focus-visible svg { translate: -3px 0; }

.caso-cliente {
  margin-top: clamp(0.75rem, 0.5rem + 1vw, 1.5rem);
  font-size: var(--t-chico);
  font-weight: 650;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--enlace);
}
.caso-titulo {
  margin-top: 0.85rem;
  max-width: 18ch;
  font-size: clamp(2.375rem, 1.4rem + 3.2vw, 4rem);         /* 38 → 64: menos que el hero (68) */
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.04em;
}
.caso-bajada {
  margin-top: 1.25rem;
  max-width: 30em;
  font-size: clamp(1.125rem, 1rem + 0.55vw, 1.4375rem);
  line-height: 1.45;
  color: var(--tinta-2);
}
/* Qué es y dónde anda (rol + donde): se lee en la cabeza, no al final */
.caso-rol {
  margin-top: 0.85rem;
  max-width: 34em;
  font-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  font-weight: 650;
  line-height: 1.45;
  color: var(--tinta);
}
.caso-cabeza .ficha-enlaces { margin-top: 0.6rem; }

/* -------------------------------------------------------------------------
   La prueba y las figuras de los tramos: la captura entera, grande, en un
   marco de papel hondo. El epígrafe, chico y apagado.
   ------------------------------------------------------------------------- */
.caso-prueba { margin-top: clamp(2rem, 1.25rem + 2.5vw, 3.5rem); }
.caso-marco {
  padding: clamp(0.75rem, 0.25rem + 2vw, 2rem);
  border-radius: var(--radio-marco);
  background: var(--marco);
  overflow: clip;
}
.caso-prueba .caso-marco { padding: clamp(0.75rem, 0.25rem + 3vw, 3rem); }
.caso-marco picture { display: block; }   /* el recorte del celular (captura_recorte) */
.caso-marco img {
  width: 100%;
  border-radius: 10px;
  box-shadow:
    0 0 0 1px rgb(10 22 40 / .08),
    0 18px 40px -24px rgb(10 22 40 / .4);
}
.caso-figura figcaption {
  margin-top: 0.6rem;
  font-size: var(--t-chico);
  color: var(--tenue);
}

/* Sin captura (los casos de automatización): la cadena real de herramientas
   en el lugar de la prueba, más grande que en la lista y de corrido. */
.caso-prueba--cadena {
  padding-top: clamp(1.25rem, 1rem + 1vw, 2rem);
  border-top: 1px solid var(--linea);
}
.caso-prueba--cadena .cadena {
  gap: 0.75rem;
  font-size: clamp(1rem, 0.92rem + 0.4vw, 1.1875rem);
}
.caso-prueba--cadena .cadena li + li::before { width: 1.25rem; }

/* -------------------------------------------------------------------------
   Los tramos de la historia
   ------------------------------------------------------------------------- */
.caso-tramos { margin-top: clamp(2.5rem, 1.5rem + 3.5vw, 5rem); }

.caso-tramo {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.9rem var(--hueco);
  padding-block: clamp(1.75rem, 1.25rem + 2vw, 3.25rem);
}
/* El filete propio de cada tramo (se traza al entrar, abajo en Movimiento) */
.caso-tramo::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background: var(--linea);
  transform-origin: 0 50%;
}

.caso-tramo-rotulo {
  font-size: clamp(1.0625rem, 1rem + 0.2vw, 1.125rem);     /* 17 → 18 */
  font-weight: 650;
  letter-spacing: 0.08em;
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--enlace);
}

.caso-tramo-cuerpo { display: grid; gap: 1rem; min-width: 0; }
.caso-tramo-cuerpo > p {
  max-width: 34em;
  line-height: 1.55;
  color: var(--tinta-2);
}
/* El primer párrafo de cada tramo es el que se lee: grande y en tinta */
.caso-tramo-cuerpo > p:first-child {
  max-width: 28em;
  font-size: clamp(1.1875rem, 1rem + 0.8vw, 1.625rem);     /* 19 → 26 */
  line-height: 1.4;
  letter-spacing: -0.01em;
  color: var(--tinta);
}
.caso-tramo-cuerpo > .caso-figura { margin-top: 1rem; }

/* Cómo funciona: pasos numerados, separados por filetes */
.caso-pasos { margin: 0; padding: 0; list-style: none; counter-reset: paso; }
.caso-pasos li {
  counter-increment: paso;
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr);
  padding-block: 0.95rem;
  border-top: 1px solid var(--linea);
  max-width: 36em;
  font-size: clamp(1.0625rem, 0.98rem + 0.4vw, 1.25rem);
  line-height: 1.45;
}
.caso-pasos li:first-child { padding-top: 0; border-top: 0; }
.caso-pasos li::before {
  content: counter(paso, decimal-leading-zero);
  content: counter(paso, decimal-leading-zero) / "";   /* el lector ya dice el número de la lista */
  padding-top: 0.15em;
  font-size: 0.9375rem;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
  color: var(--enlace);
}

/* Lo que lo hace distinto: dos o tres ideas, cada una con su título */
.caso-distinto { display: grid; gap: 1.5rem var(--hueco); }
.caso-distinto li + li { padding-top: 1.5rem; border-top: 1px solid var(--linea); }
.caso-distinto h3 {
  font-size: clamp(1.25rem, 1.05rem + 0.75vw, 1.625rem);  /* 20 → 26 */
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.025em;
}
.caso-distinto p {
  margin-top: 0.6rem;
  max-width: 30em;
  line-height: 1.55;
  color: var(--tinta-2);
}

/* -------------------------------------------------------------------------
   Los datos del final: qué resuelve y la tecnología, en segundo plano
   ------------------------------------------------------------------------- */
.caso-datos {
  display: grid;
  gap: 0.6rem;
  margin: 0;
  padding-block: clamp(1.5rem, 1.25rem + 1vw, 2.25rem);
  border-top: 1px solid var(--linea);
  font-size: 0.9375rem;
  line-height: 1.5;
}
.caso-datos > div { display: grid; gap: 0.1rem var(--hueco); }
.caso-datos dt { font-weight: 650; color: var(--tinta); }
.caso-datos dd { margin: 0; color: var(--tinta-2); }

/* -------------------------------------------------------------------------
   Más historias: la siguiente grande, la vuelta a la lista chica
   ------------------------------------------------------------------------- */
.caso-mas {
  display: grid;
  justify-items: start;
  gap: 1rem var(--hueco);
  padding-top: clamp(1.75rem, 1.25rem + 2vw, 3rem);
  border-top: 1px solid var(--linea);
}
.caso-otra {
  display: grid;
  gap: 0.5rem;
  padding-block: 0.25rem;
  color: var(--tinta);
  text-decoration: none;
}
.caso-otra-rotulo {
  font-size: inherit;                       /* el mismo tamaño y peso que «Todas las historias» */
  font-weight: 650;
  color: var(--tinta-2);
}
.caso-otra-titulo {
  max-width: 24ch;
  font-size: clamp(1.5rem, 1.1rem + 1.5vw, 2.25rem);       /* 24 → 36, como el título de una ficha */
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.03em;
  text-wrap: balance;
  text-decoration: underline;
  text-decoration-color: var(--linea);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.18em;
  transition: text-decoration-color var(--t-hover) ease;
}
.caso-otra-titulo svg {
  display: inline-block;
  width: 0.7em;
  height: 0.7em;
  margin-left: 0.2em;
  vertical-align: -0.02em;
  color: var(--enlace);
  transition: translate var(--t-rodar) var(--ease-out);
}
.caso-otra:focus-visible .caso-otra-titulo { text-decoration-color: var(--acento); }
.caso-otra:focus-visible .caso-otra-titulo svg { translate: 3px 0; }
.enlace-ficha.enlace-ficha--volver:focus-visible svg { translate: -3px 0; }

@media (hover: hover) and (pointer: fine) {
  .caso-ruta:hover { color: var(--tinta); }
  .caso-ruta:hover svg,
  .enlace-ficha.enlace-ficha--volver:hover svg { translate: -3px 0; }
  .caso-otra:hover .caso-otra-titulo { text-decoration-color: var(--acento); }
  .caso-otra:hover .caso-otra-titulo svg { translate: 3px 0; }
}

/* -------------------------------------------------------------------------
   Escritorio: cada tramo, los datos y «más historias» en dos columnas, con
   el rótulo a la izquierda y el contenido alineado en la misma columna.
   ------------------------------------------------------------------------- */
@media (min-width: 48rem) {
  .caso-distinto { grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
  .caso-distinto li + li { padding-top: 0; border-top: 0; }
}
@media (min-width: 60rem) {
  .caso-tramo,
  .caso-datos > div,
  .caso-mas { grid-template-columns: var(--columnas); }
  .caso-tramo-rotulo { padding-top: 0.2em; }               /* a la altura del primer renglón grande */
  .caso-mas .caso-otra { grid-column: 2; }
  .caso-mas .enlace-ficha--volver { grid-column: 1; grid-row: 1; align-self: end; }
}

/* Compu: la cabeza y la prueba lado a lado (5 y 7), con la captura a la
   altura del h1, así la prueba se ve sin desplazar. La cabeza se deshace
   (display: contents) para que sus renglones y la figura compartan filas:
   la ruta y el antetítulo, solos arriba; desde el h1 (3.ª fila), la figura
   al lado. La última fila (1fr) se lleva lo que la figura tenga de más alto,
   así los renglones de la izquierda no se separan. Sólo con captura: la
   cadena de herramientas sigue abajo, a lo ancho. */
@media (min-width: 64rem) {
  .caso-arriba:has(> .caso-figura) {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    grid-template-rows: repeat(6, auto) 1fr;
    column-gap: var(--hueco);
  }
  .caso-arriba:has(> .caso-figura) > .caso-cabeza { display: contents; }
  .caso-arriba:has(> .caso-figura) > .caso-cabeza > * { grid-column: 1; }
  .caso-arriba:has(> .caso-figura) .caso-ruta { justify-self: start; }
  .caso-arriba > .caso-prueba.caso-figura {
    grid-column: 2;
    grid-row: 3 / -1;
    margin-top: 0.85rem;                    /* el mismo que el h1 */
  }
  .caso-arriba > .caso-prueba .caso-marco { padding: clamp(0.75rem, 0.25rem + 2vw, 2rem); }
}

/* Celular: las capturas de borde a borde, para que se lean lo más grande
   posible; el epígrafe vuelve al margen. */
@media (max-width: 47.99rem) {
  .caso { --radio-marco: 0px; }
  .caso-figura { margin-inline: calc(-1 * var(--margen)); }
  .caso-figura figcaption { padding-inline: var(--margen); }
  .caso-prueba .caso-marco,
  .caso-marco { padding: 0.75rem; }
  .caso-marco img { border-radius: 6px; }
}

/* -------------------------------------------------------------------------
   Movimiento. La cabeza llega una vez al cargar (cada renglón arranca
   después que el de arriba, así nunca se le monta); ligado al scroll, el
   marco se destapa (clip-path, sin mover nada) y el filete de cada tramo se
   traza de izquierda a derecha. Nada traslada un elemento sobre otro. Sin
   soporte, o con «reducir movimiento», todo quieto y a la vista.
   ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  .caso-cabeza > * { animation: llega 700ms var(--ease-out) both; }
  .caso-cabeza > :nth-child(2) { animation-delay: 60ms; }
  .caso-cabeza > :nth-child(3) { animation-delay: 120ms; }
  .caso-cabeza > :nth-child(n+4) { animation-delay: 180ms; }
}

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .caso-marco {
      animation: marco-se-destapa linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 80%;
    }
    .caso-tramo::before {
      animation: filete-se-traza linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 60%;
    }
  }
}

@keyframes filete-se-traza { from { scale: 0 1; } }

/* =========================================================================
   Variante con captura vertical o de celular (Survivo, Pasión Torino) y la
   ilustración del padrón (asociación). La ajusta sólo quien arma esos casos.
   ========================================================================= */
/* Captura vertical (el mapa de butacas, la entrada): angosta y centrada en
   su marco, para que no se coma la pantalla. En el celular, a todo el ancho. */
.caso-figura--vertical .caso-marco img {
  display: block;
  max-width: 24rem;
  margin-inline: auto;
}
/* Captura de celular: el teléfono entero, chico y centrado, con las puntas
   redondeadas de la pantalla. */
.caso-figura--celular .caso-marco img {
  display: block;
  width: 64%;
  max-width: 15rem;
  margin-inline: auto;
  border-radius: 22px;
}
/* El padrón (lo dibuja historias.css) en el lugar de la captura, centrado */
.caso-figura--padron .caso-marco { display: flex; justify-content: center; }
.caso-figura--padron .padron { max-width: 26rem; }

@media (max-width: 47.99rem) {
  .caso-figura--celular .caso-marco img { border-radius: 16px; }
}

/* --- fin variante con captura --- */

/* =========================================================================
   Variante sin captura: la cadena de herramientas en lugar de la foto
   (automatizaciones). La ajusta sólo quien arma esos casos.
   ========================================================================= */
/* Con dos automatizaciones (Cervi), cada cadena lleva arriba su rótulo, como
   en la lista: pegado a su cadena y separado de la anterior. */
.caso-prueba--cadena .cadena-rotulo { font-size: 0.875rem; }
.caso-prueba--cadena .cadena-rotulo + .cadena { margin-top: 0.6rem; }
.caso-prueba--cadena .cadena + .cadena-rotulo { margin-top: 1.5rem; }

/* Celular: la cadena baja en vertical, como un flujo (igual que la lista en
   la compu). De corrido corta renglón y la raya del renglón de abajo queda
   suelta, sin nada a su izquierda. */
@media (max-width: 47.99rem) {
  .caso-prueba--cadena .cadena { flex-direction: column; align-items: flex-start; gap: 0.95rem; }
  .caso-prueba--cadena .cadena li { position: relative; }
  .caso-prueba--cadena .cadena li + li::before {
    position: absolute;
    left: calc(0.625rem - 0.75px);
    bottom: calc(100% + 0.15rem);
    width: 1.5px;
    height: 0.65rem;
  }
}

/* Desde la tablet va de corrido, en un renglón, con la letra más grande que
   en la lista: los íconos crecen con ella. */
@media (min-width: 48rem) {
  .caso-prueba--cadena .cadena img,
  .caso-prueba--cadena .cadena-ia,
  .caso-prueba--cadena .cadena-sin-logo { width: 1.5rem; height: 1.5rem; }
  .caso-prueba--cadena .cadena-ia { border-radius: 6px; font-size: 0.75rem; }
}

/* --- fin variante sin captura --- */