/*
  system.css — layout & rhythm (single source of truth)
  Objetivo: mismo espacio vertical y mismo “ritmo” en TODAS las páginas.
  Regla: el espaciado grande se decide aquí, no en páginas sueltas.
*/

:root{
  /* Layout: más ancho útil (reduce “bordes” laterales en pantallas grandes) */
  --content-max: 1240px;
  --content-pad: clamp(1rem, 2.2vw, 1.35rem);

  /* Rhythm */
  --page-top-gap: clamp(1.0rem, 2vw, 1.35rem);  /* distancia navbar → contenido */
  --page-y-pad: clamp(1.4rem, 2.4vw, 1.9rem);     /* padding vertical dentro del <main> */
  --section-gap: clamp(1.35rem, 2.8vw, 2.2rem);      /* separación entre “cards/sections” */
}

/* Contenedor estándar */
.container{
  width: min(var(--content-max), 100% - (var(--content-pad) * 2));
  margin-inline: auto;
}

/* Clase “legacy” que ya usa el proyecto.
   Solo aporta el hueco superior. El resto lo define <main>. */
.sectionSpacing{
  margin-top: var(--page-top-gap);
}

/* El <main> manda (padding vertical consistente en todas las páginas) */
main.container{
  padding-block: var(--page-y-pad);
}

/* Layout estándar: stack por gap (no márgenes sueltos por página) */
main.container.sectionSpacing{
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--section-gap);
  justify-items: stretch; /* opcional pero recomendable */
}

/* Evita que márgenes de hijos “cuelen” separaciones distintas */
main.container.sectionSpacing > *{
  margin: 0;
}

/* Fallback si alguna página aún no usa sectionSpacing */
main.container:not(.sectionSpacing) > * + *{
  margin-top: var(--section-gap);
}

/* Helper reutilizable */
.stack{
  display: grid;
  gap: var(--section-gap);
}

/* Utilidades mínimas */
.mt-xs{ margin-top: .25rem !important; }
.mt-sm{ margin-top: .9rem !important; }