/* ==========================================================================
   caso-layouts.css — capa de maquetación para las secciones de proyectos
   pequeños. Ago 2026.
   --------------------------------------------------------------------------
   Por qué existe este archivo y no está dentro de caso-base.css:

   caso-base.css dice "no tocar" y cada proyecto tiene su PROPIA COPIA de él
   (Ascoop, Asistir, La Cañaña). Editar una copia las hace divergir en
   silencio, que es peor que tener un archivo más. Así que esto es una capa
   ADITIVA: solo clases nuevas, ninguna redefinición de las que ya existen.
   Se puede enlazar junto a caso-base.css sin cambiar nada de lo anterior, y
   las secciones viejas siguen funcionando porque no usan estas clases.

   Usa los mismos tokens que caso-base.css (--caso-*).

   Se enlaza UNA SOLA VEZ en la página, igual que caso-base.css.
   ========================================================================== */

/* --- Sección de apertura: texto a un lado, imágenes al otro -------------- */
/* Las dos columnas TERMINAN A LA MISMA ALTURA. No con números mágicos: las
   dos son flex en columna con el último bloque empujado abajo (margin-top:
   auto), así que la columna más corta reparte el sobrante por dentro y los
   dos bloques inferiores —tarjetas y cifras— quedan a ras. Si mañana cambia
   el largo del texto, sigue cuadrando solo. */

.caso__hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: stretch;
}
.caso__hero > * { display: flex; flex-direction: column; min-width: 0; }
.caso__hero-abajo { margin-top: auto; }

@media (max-width: 900px) {
  .caso__hero { grid-template-columns: 1fr; }
  /* En una sola columna no hay nada con que alinear y el auto abriría un
     hueco enorme entre la entradilla y las tarjetas. */
  .caso__hero-abajo { margin-top: 1.75rem; }
}

/* La píldora de arriba. Ancla la columna de texto cuando al lado hay
   imágenes que pesan mucho más visualmente. */
.caso__pildora {
  align-self: flex-start;
  margin: 0 0 1.1rem;
  padding: .34rem .85rem;
  border-radius: 999px;
  background: var(--caso-acento);
  color: var(--caso-acento-texto);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.caso__display {
  margin: 0 0 1rem;
  font-size: clamp(2rem, 4.6vw, 3.15rem);
  line-height: 1.06;
  letter-spacing: -.025em;
  text-wrap: balance;
}
.caso__display em { font-style: normal; color: var(--caso-acento); }

.caso__lead {
  margin: 0;
  max-width: 46ch;
  font-size: clamp(1rem, 1.5vw, 1.11rem);
  color: var(--caso-tinta-suave);
}

/* --- Encabezado de sección, centrado ------------------------------------- */

.caso__cabeza {
  max-width: 62ch;
  margin-inline: auto;
  text-align: center;
}
.caso__titulo-2 {
  margin: 0 0 .8rem;
  font-size: clamp(1.6rem, 3.2vw, 2.35rem);
  line-height: 1.1;
  letter-spacing: -.022em;
  text-wrap: balance;
}
.caso__titulo-2 em { font-style: normal; color: var(--caso-acento); }
/* Dos líneas y punto. El ancho está topado en 56ch a propósito: con textos de
   entre 60 y 112 caracteres, dos líneas es el resultado y no una casualidad.
   Si alguien alarga el texto en generar_seccion.py, se va a tres y se nota. */
.caso__intro {
  margin: 0 auto;
  max-width: 56ch;
  color: var(--caso-tinta-suave);
  text-wrap: balance;
}

/* --- Tarjetas de apoyo (el encargo / lo entregado) ----------------------- */

.caso__tarjetas { display: grid; gap: .75rem; }

.caso__tarjeta {
  display: grid;
  grid-template-columns: 2.2rem 1fr;
  gap: .85rem;
  padding: 1rem 1.1rem;
  background: var(--caso-fondo-alt);
  border: 1px solid var(--caso-linea);
  border-radius: var(--caso-radio);
}
.caso__tarjeta-icono {
  width: 2.2rem;
  height: 2.2rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--caso-acento);
  color: var(--caso-acento-texto);
}
.caso__tarjeta-icono svg { width: 1.1rem; height: 1.1rem; display: block; }
/* Deliberadamente NO es un <h4>. La tarjeta es una etiqueta dentro del bloque
   de apertura, no una subsección: marcarla como encabezado saltaría de h2 a
   h4 y le mentiría al lector de pantalla sobre la estructura. */
.caso__tarjeta-titulo {
  margin: .1rem 0 .25rem;
  font-size: .93rem;
  font-weight: 700;
  letter-spacing: -.005em;
  color: var(--caso-tinta);
}
.caso__tarjeta p { margin: 0; font-size: .875rem; color: var(--caso-tinta-suave); }

/* --- Cifras -------------------------------------------------------------- */
/* Reemplazan la barra de ficha (cliente / año / rol). Un dato que se puede
   contar pesa más que una etiqueta que se puede suponer. */

.caso__cifras {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  margin: 1.1rem 0 0;
  padding: 0;
  list-style: none;
  background: var(--caso-linea);
  border: 1px solid var(--caso-linea);
  border-radius: var(--caso-radio);
  overflow: hidden;
}
@media (max-width: 520px) {
  .caso__cifras { grid-template-columns: repeat(2, 1fr); }
}
.caso__cifra { padding: .85rem .9rem; background: var(--caso-fondo); }
.caso__cifra b {
  display: block;
  font-size: clamp(1.4rem, 2.4vw, 1.9rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.03em;
  color: var(--caso-acento);
}
.caso__cifra span {
  display: block;
  margin-top: .28rem;
  font-size: .74rem;
  line-height: 1.3;
  color: var(--caso-tinta-suave);
}

/* --- Bento de apertura --------------------------------------------------- */
/* Una banda de marca arriba, tres piezas debajo —una por línea de producto—.
   Tres y no dos: con dos, la fila de abajo quedaba tan alta que la columna
   derecha se pasaba de la izquierda por más de 100 px y no había forma de
   alinear los bloques de abajo sin recortar el logotipo. */

.caso__bento {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(.4rem, .9vw, .65rem);
  margin: 0;
  padding: 0;
  list-style: none;
}
.caso__bento > li { margin: 0; min-width: 0; }
.caso__bento-banda { grid-column: 1 / -1; }
/* contain y no cover en la banda: es un logotipo. Recortarlo para que cuadre
   le come la filigrana, que es justo lo que hay que ver. */
.caso__bento-banda img { width: 100%; height: auto; object-fit: contain; }
.caso__bento > li:not(.caso__bento-banda) img {
  aspect-ratio: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --- Tira de piezas: 4 arriba, 5 abajo ---------------------------------- */
/* La rejilla es de 20 columnas porque 20 es el mínimo común múltiplo de 4 y
   5: cuatro casillas de 5 columnas llenan la primera fila y cinco de 4
   columnas llenan la segunda, sin sobrantes ni casillas huérfanas. */

.caso__tira {
  display: grid;
  grid-template-columns: repeat(20, 1fr);
  gap: clamp(.3rem, .7vw, .5rem);
  margin: 0;
  padding: 0;
  list-style: none;
}
.caso__tira > li { margin: 0; min-width: 0; }
.caso__tira > li:nth-child(-n+4) { grid-column: span 5; }   /* fila de arriba */
.caso__tira > li:nth-child(n+5)  { grid-column: span 4; }   /* fila de abajo */
.caso__tira img { aspect-ratio: 1; width: 100%; height: 100%; object-fit: cover; }

/* Por debajo de 720 px, 4 y 5 en fila dejan las piezas ilegibles. Pasa a tres
   columnas —que es como se ve un perfil real— y se sueltan los tramos.
   Va DESPUÉS de las reglas nth-child para ganar sin !important. */
@media (max-width: 720px) {
  .caso__tira { grid-template-columns: repeat(3, 1fr); }
  .caso__tira > li:nth-child(-n+4),
  .caso__tira > li:nth-child(n+5) { grid-column: auto; }
}

/* --- Vitrina de logotipo ------------------------------------------------- */

.caso__vitrina {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(.45rem, 1vw, .8rem);
  margin: 0;
  padding: 0;
  list-style: none;
}
.caso__vitrina > li { margin: 0; min-width: 0; }
.caso__vitrina img { width: 100%; height: auto; object-fit: contain; }
@media (max-width: 720px) {
  .caso__vitrina { grid-template-columns: repeat(2, 1fr); }
}

/* Los dos avatares, en círculo y al tamaño real en que se usan. */
.caso__avatares {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1rem 1.4rem;
  margin: clamp(1.1rem, 2.2vw, 1.6rem) 0 0;
  padding: 0;
  list-style: none;
}
.caso__avatares > li { margin: 0; }
.caso__avatares .caso__lupa { width: 5.25rem; border-radius: 50%; overflow: hidden; }
.caso__avatares img { width: 100%; height: auto; }
.caso__avatares-nota {
  margin: 0;
  max-width: 34ch;
  font-size: .84rem;
  line-height: 1.45;
  text-align: left;
  color: var(--caso-tinta-suave);
}

/* --- Cierre de una línea ------------------------------------------------- */
/* Una sola frase centrada y nada más. Sin regla arriba: la separación con el
   caso siguiente la da el aire, no una línea. Con varias secciones apiladas,
   una regla por caso convierte la página en una escalera de rayas. */

.caso__fin { margin-top: clamp(2.25rem, 4.5vw, 3.5rem); }
.caso__fin-linea {
  margin: 0 auto;
  max-width: 48ch;
  text-align: center;
  font-size: clamp(1.02rem, 1.7vw, 1.18rem);
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--caso-tinta);
  text-wrap: balance;
}