/*
 * FICHA DE PROYECTO · lo propio de un caso de éxito.
 *
 * Comparte con la portada la cabecera, el pie, los botones y el conmutador de
 * tema — todo eso vive en `sistema.css` y en las piezas comunes de abajo. Aquí
 * solo está lo que distingue a una ficha.
 *
 * LA IDEA. Una ficha es una PRUEBA, no un anuncio: el manifiesto afirma cosas
 * y aquí se comprueban. Por eso el orden es cliente → oficios → la imagen →
 * el desafío → lo que se entregó → el resto del material. Primero qué había
 * que resolver, luego cómo se ve resuelto.
 *
 * Los oficios van con el color de su área del manual (02.3) en el filo, igual
 * que en la portada. Un oficio sin área declarada se pinta neutro: el
 * generador NO le inventa un color.
 */

/* La cabecera, el pie, el cielo y el cierre vienen de `comun.css`, que la
   página carga antes que esta hoja. Aquí NO se importa nada: un `@import`
   cuesta una petición encadenada y el HTML ya trae los dos `<link>`. */

/* ═══ Cabecera de la ficha ════════════════════════════════════════════════ */

.ficha-cabecera { padding-block: var(--e6) var(--e4); }

.volver {
  display: inline-flex; align-items: center; min-height: 44px;
  color: var(--texto-suave); text-decoration: none;
  font-size: var(--t-pie); font-weight: 500;
  margin-bottom: var(--e2);
}
.volver:hover { color: var(--acento); }

.ficha-cabecera h1 {
  font-size: clamp(2rem, 1.2rem + 3.2vw, 3.75rem);
  margin-bottom: var(--e3);
}

/* Los oficios: ficha técnica, no etiquetas de adorno. Monoespaciada y el color
   del área en el canto, como en los servicios de la portada. */
.oficios { display: flex; flex-wrap: wrap; gap: var(--e1); list-style: none; padding: 0; margin: 0; }
.oficios li {
  font-family: var(--fuente-datos); font-size: var(--t-micro);
  color: var(--texto-suave);
  padding: .35rem .7rem; border-radius: var(--radio);
  background: var(--superficie); border: 1px solid var(--borde);
  box-shadow: inset 2px 0 0 var(--color-area, var(--borde));
}

/* ═══ La imagen principal ═════════════════════════════════════════════════
   A sangre completa: es la prueba, y una prueba no se enseña dentro de una
   cajita. Se acota el alto para que en pantallas muy anchas no se coma la
   página entera antes de que se lea una palabra. */
.ficha-portada { margin: 0 0 var(--e6); }
.ficha-portada img {
  width: 100%; max-height: 70vh; object-fit: cover;
  /* Mismo sesgo que las miniaturas: a sangre y con el alto acotado, una foto
     vertical se recorta muchísimo, y centrado el recorte se lleva la cabeza. */
  object-position: center 32%;
  display: block;
}

/* ═══ El cuerpo ═══════════════════════════════════════════════════════════ */

.ficha-cuerpo { padding-bottom: var(--e6); }
.ficha-cuerpo .lede {
  font-size: var(--t-lede); line-height: var(--renglon-medio);
  color: var(--texto-suave);
  margin-bottom: var(--e4);
}
.ficha-cuerpo .bloque { margin-top: var(--e5); }
.ficha-cuerpo .bloque h2 {
  font-size: var(--t-h2); margin-bottom: var(--e2);
  color: var(--acento);
}

/* ═══ La galería ══════════════════════════════════════════════════════════
 *
 * CADA FOTO CON SU PROPIA PROPORCIÓN. Antes esto era una retícula que metía
 * todo en cajas de 4/3 con `object-fit: cover`, y de 108 imágenes del archivo
 * SESENTA Y UNA son verticales. Medido en la ficha de Ave María: una foto de
 * 1350×2025 en una caja de 398×299 perdía el 50% de su altura, recortado por
 * el centro — un cuarto por arriba y otro por abajo. Ahí es donde estaban las
 * cabezas.
 *
 * Recortar así las fotos de una productora es la peor señal posible: el
 * trabajo que se enseña es justamente el encuadre. Se pasa a columnas, que
 * admiten alturas distintas sin pelearse, y la imagen se muestra ENTERA.
 *
 * `columns` y no `grid`: una retícula necesita saber la altura de cada celda
 * de antemano, y aquí no hay dos iguales. Con columnas cada foto ocupa lo que
 * mide y la columna sigue debajo — que es exactamente una hoja de contactos.
 */
.ficha-galeria {
  columns: 1;
  column-gap: var(--e2);
  padding-bottom: var(--e7);
}
@media (min-width: 40rem)  { .ficha-galeria { columns: 2; } }
@media (min-width: 68rem)  { .ficha-galeria { columns: 3; } }

.ficha-galeria figure {
  margin: 0 0 var(--e2);
  border-radius: var(--radio-caja);
  overflow: hidden;
  background: var(--superficie);
  /* Sin esto una foto puede partirse entre el pie de una columna y la cabeza
     de la siguiente, que en una galería de fotos se lee como un fallo. */
  break-inside: avoid;
}
.ficha-galeria img {
  width: 100%; height: auto; display: block;
  transition: transform var(--transicion);
}
.ficha-galeria figure:hover img { transform: scale(1.03); }

/* ═══ Cierre ══════════════════════════════════════════════════════════════ */

.acciones-cierre {
  display: flex; gap: var(--e2); flex-wrap: wrap;
  justify-content: center; margin-top: var(--e4);
}