/* ============================================================================
   Retratos — las fotografias humanas.

   Origen: `noalergeno_humanos_bn_pack`, 19/09/2026. Vienen YA en blanco y
   negro, hechas asi a proposito.

   AQUI NO SE APLICA NINGUN FILTRO.

   La orden de entrega lo dice con dos frases: «no recolorear las imagenes» y
   «no aplicar filtros adicionales». Una version anterior de este fichero las
   ponia recortadas sobre un panel violeta y les metia `grayscale(1)
   contrast(1.08)`, porque el material que yo habia pedido eran recortes con
   transparencia. El material real son escenas completas. Manda el material.

   Tampoco hay velos oscuros encima: «no usar overlays oscuros agresivos».

   DONDE NO VA NINGUNA

   Alertas, fichas legales y paginas de fuentes. Y la tarjeta de resultado o
   cualquier pantalla que emita un veredicto: una escena agradable junto a «no
   hemos detectado gluten» es la tranquilidad que este producto no puede dar.
   ========================================================================= */

.retrato {
  margin: 0;
  border-radius: var(--no-radio);
  overflow: hidden;
  background: var(--no-superficie);   /* mientras carga, no un agujero negro */
  aspect-ratio: 3 / 2;                /* el de las cuatro, sin recortar */
}
.retrato img {
  width: 100%; height: 100%;
  object-fit: cover;
  /* El punto de interes lo pone cada foto desde el catalogo: donde estan la
     cara, el movil y el producto. Si falta, al centro. */
  object-position: var(--foco, 50% 50%);
  display: block;
}

/* Vertical cuando el retrato va en una columna al lado del texto. El foco
   horizontal importa mas aqui: al estrechar, es lo primero que se pierde. */
.retrato-alto { aspect-ratio: 4 / 5; }

/* En movil se achata: un 4:5 a 380 px de ancho empuja el boton fuera de la
   pantalla, y el boton es lo que hay que ver. */
@media (max-width: 899px) {
  .retrato, .retrato-alto { aspect-ratio: 16 / 10; }
}