/*
 * Base SEO GEO — mini-set de utilidades (prefijo u-). Solo consume tokens de theme.json.
 * Para patrones y landings: ritmo vertical, agrupaciones, rejillas y ayudas de texto.
 * Las de color no hacen falta: WordPress ya genera .has-{slug}-color y .has-{slug}-background-color.
 * Para texto destacado y oculto accesible existen ya .lead y .screen-reader-text en theme.css.
 */

/* Ritmo vertical: separación entre hijos directos. */
.u-flow > * + * { margin-block-start: var(--wp--preset--spacing--30); }
.u-flow-tight > * + * { margin-block-start: var(--wp--preset--spacing--20); }
.u-flow-loose > * + * { margin-block-start: var(--wp--preset--spacing--50); }

/* Agrupación horizontal que envuelve (botones, etiquetas, metadatos). */
.u-cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30);
}

.u-cluster-center { justify-content: center; }
.u-cluster-between { justify-content: space-between; }

/* Rejilla automática: tantas columnas como quepan con un mínimo por tarjeta. */
.u-grid {
  display: grid;
  gap: var(--wp--preset--spacing--40);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
}

.u-grid-wide { grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); }

/* Anchos: contenido, ancho y medida de lectura. */
.u-content { max-width: var(--wp--style--global--content-size); margin-inline: auto; }
.u-wide { max-width: var(--wp--style--global--wide-size); margin-inline: auto; }
.u-measure { max-width: var(--wp--custom--measure); }

/* Espaciado vertical de sección. */
.u-section { padding-block: var(--wp--preset--spacing--60); }
.u-section-tight { padding-block: var(--wp--preset--spacing--50); }
.u-mt-0 { margin-block-start: 0 !important; }
.u-mb-0 { margin-block-end: 0 !important; }
.u-mt-3 { margin-block-start: var(--wp--preset--spacing--30) !important; }
.u-mt-5 { margin-block-start: var(--wp--preset--spacing--50) !important; }

/* Texto. */
.u-center { text-align: center; }
.u-balance { text-wrap: balance; }
.u-small { font-size: var(--wp--preset--font-size--small); }
.u-muted { color: var(--wp--preset--color--contrast-2); }
.u-bold { font-weight: var(--wp--custom--font-weight--bold); }
.u-display { font-family: var(--wp--preset--font-family--display); }

/* Superficies. */
.u-rounded { border-radius: var(--wp--custom--radius--large); overflow: hidden; }
.u-bordered { border: var(--wp--custom--border--width) solid var(--wp--preset--color--border-light); }
.u-shadow { box-shadow: var(--wp--preset--shadow--medium); }

/* Superficie marina con texto claro (cabecera, pie, bandas de patrones); los enlaces y el foco los
   resuelve theme.css con .on-navy. */
.u-navy { background: var(--wp--preset--color--navy); color: var(--wp--preset--color--on-navy); }
