/* utilidades.css — se carga la ÚLTIMA a propósito.
   Sin @layer, la precedencia la da el orden del documento, y estas
   utilidades deben poder ajustar a los componentes. */

.visualmente-oculto {
    position: absolute; inline-size: 1px; block-size: 1px;
    clip-path: inset(50%); overflow: hidden; white-space: nowrap;
  }
  .medida-cuerpo { max-inline-size: var(--measure-body); }
  /* Figura de contenido: el prototipo la define con esquinas redondeadas y el pie
     separado. Faltaba por completo, así que la imagen salía a canto vivo. */
  .figura img, .imagen-ancha { inline-size: 100%; block-size: auto; object-fit: cover; border-radius: var(--radius-l); }
  .figura figcaption { margin-block-start: var(--space-2xs); font-size: var(--text-s); color: var(--color-foreground-light); }
  /* Sellos de confianza: texto suelto, no chips. Interlineado propio porque la
     separación entre filas debe ser mayor que la de columnas. */
  .sellos { display: flex; flex-wrap: wrap; gap: var(--space-s) var(--space-m); font-size: var(--text-s); font-weight: 600; color: var(--color-foreground-light); }
  .medida-entradilla { max-inline-size: var(--measure-lede); font-size: var(--text-l); line-height: 1.5; color: var(--color-foreground-light); }
  .etiqueta { font-size: var(--text-s); font-weight: 700; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-primary); line-height: 1.4; }
  /* El modificador vive aquí, junto a su base: utilidades.css carga después de
     componentes.css, así que un modificador allí perdería contra .etiqueta. */
  .etiqueta--acento { color: var(--color-accent); }
  .salto-contenido { content-visibility: auto; } /* mejora progresiva: ignorada sin soporte */

/* Remate en rojo de marca dentro de un titular.
   Solo válido en encabezados: #EA1415 da 4,35:1 sobre `surface`, que cumple AA
   como texto grande (≥3:1) pero NO como cuerpo. No usar en párrafos. */
.acento { color: var(--color-accent); }
/* Sobre fondo oscuro el rojo pierde contraste: ahí el remate va en blanco. */
.seccion--oscura .acento,
.presupuesto__aside .acento,
.cta-cierre .acento,
.pie .acento { color: var(--color-background); }