/* Datassa Agro · /css/agro.css
   Lo propio de /agro/ y /agro/te-lo-dejo-ordenado/ que todavía no está en /css/sitio.css.
   Son cinco reglas cortas, con los tokens y los nombres del sistema: el integrador las puede pegar en sitio.css
   (secciones 5 y 16) y sacar este archivo y su <link>. Ningún color ni tamaño escrito a mano. */

/* Una cabeza que es lo último de su columna (o de su sección): sin el aire de abajo */
.cabeza--sin-abajo { margin-bottom: 0; }

/* Párrafos comunes dentro de una cabeza (los dos de «Por qué yo»): cuerpo, color secundario, misma medida que el lead */
.cabeza > p:not(.lead):not(.ojal) { font-size: var(--t-cuerpo); line-height: 1.6; color: var(--texto-2); max-width: var(--medida); }

/* Retrato a lo alto dentro de un .partido (foto-mateo.jpg, 920×1080): no se recorta a 4/3 */
.foto--vertical { aspect-ratio: 920 / 1080; width: 100%; max-width: 420px; }

/* Dentro de una tarjeta, .tarjeta p le gana a .cifra y a .precio-nota (más específico): se devuelve cada tamaño */
.tarjeta .cifra { font-size: var(--t-cifra); }
.tarjeta .precio-nota { font-size: var(--t-nota); }

/* El ojal de un cierre lleva aire antes del título */
.cierre .ojal { margin-bottom: 12px; }

/* Las acciones del héroe ocupan toda la columna: .hero-cuerpo alinea a flex-start y los .boton--bloque quedaban al ancho
   de su texto en el celular (DISENO 5.4 los quiere al 100 % bajo 640). Desde 640 no cambia nada: la fila sigue en línea. */
.hero-cuerpo > .acciones { align-self: stretch; }