/* =============================================================================
   UTILIDADES
   Pocas y con nombre de propósito. Si una utilidad aparece más de tres veces
   seguidas en el mismo orden, ese conjunto es un componente y le toca subir a
   components.css.
   ========================================================================== */

/* --- Flujo vertical ---------------------------------------------------------
   El espacio entre hermanos se declara una vez en el padre. Es la forma más
   directa de sostener un ritmo parejo sin repartir márgenes por todos lados. */
.flujo > * + * { margin-top: var(--sp-4); }
.flujo--apretado > * + * { margin-top: var(--sp-2); }
.flujo--suelto > * + * { margin-top: var(--sp-6); }
.flujo--amplio > * + * { margin-top: var(--sp-8); }

/* Un título quiere más aire arriba que abajo. */
.flujo > :is(h2, h3, h4) + * { margin-top: var(--sp-3); }
.flujo > * + :is(h2, h3, h4) { margin-top: var(--sp-8); }

/* --- Fila ------------------------------------------------------------------ */
.fila {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3);
}

.fila--suelta { gap: var(--sp-5); }
.fila--arriba { align-items: flex-start; }
.fila--entre { justify-content: space-between; }

/* --- Medida ---------------------------------------------------------------- */
.prosa { max-width: var(--w-prose); }
.medida-corta { max-width: 44ch; }

/* --- Texto ----------------------------------------------------------------- */
.tenue { color: var(--color-text-faint); }
.suave { color: var(--color-text-soft); }
.chico { font-size: var(--fs-xs); line-height: var(--lh-normal); }
.nota { font-size: var(--fs-3xs); line-height: var(--lh-normal); color: var(--color-text-faint); }

/* --- Visibilidad ----------------------------------------------------------- */
.solo-movil { display: none; }
.solo-escritorio { display: initial; }

@media (max-width: 47.99rem) {
  .solo-movil { display: initial; }
  .solo-escritorio { display: none; }
}

/* --- Promovidas al portar desde Astro ------------------------------------
   `.celda-menor` estaba definida DOS VECES, carácter por carácter idéntica, en
   los estilos scopeados de `atencion-al-usuario` y `tarifas-y-servicios`. Con el
   scoping de Astro eso no molestaba; aplanado son dos reglas iguales que
   compiten. Prefijarla por página habría producido dos copias de algo que ya es
   una sola cosa, así que se promueve acá (docs/COLISIONES.md §1.4).

   Es el renglón chico que va debajo del contenido principal de una celda: la
   aclaración de un plazo, la unidad de un importe, el detalle de un canal. */
.celda-menor {
  display: block;
  margin-top: 0.15rem;
  font-family: var(--font-body);
  font-size: var(--fs-3xs);
  font-weight: var(--fw-regular);
  line-height: 1.4;
  color: var(--color-text-faint);
}