/* Contenedores y ritmo de página. */

@layer layout {
  .contenedor {
    width: min(100% - 2 * var(--margen-lateral), var(--ancho-contenido));
    margin-inline: auto;
  }

  .contenedor--estrecho {
    max-width: 65ch;
  }

  .seccion {
    padding-block: var(--espacio-8);
  }

  .seccion + .seccion {
    padding-top: 0;
  }

  /* Primera sección bajo una cabecera pequeña, con las migas: menos hueco arriba. */
  .seccion--primera {
    padding-top: var(--espacio-6);
  }

  /* Rejilla centrada: la última fila incompleta queda centrada, como en el diseño original.
     --columnas fija cuántas caben por fila; los modificadores ajustan por ancho de pantalla. */
  .rejilla {
    --columnas: 1;
    --hueco: var(--espacio-5);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--hueco);
    margin: 0 0 var(--espacio-6);
    padding: 0;
    list-style: none;
  }

  .rejilla > * {
    flex: 0 0 calc((100% - (var(--columnas) - 1) * var(--hueco)) / var(--columnas));
    min-width: 0;
  }

  .rejilla--2-movil {
    --columnas: 2;
    --hueco: var(--espacio-4);
  }

  @media (min-width: 769px) {
    .rejilla--2 {
      --columnas: 2;
    }
  }

  @media (min-width: 993px) {
    .rejilla--3,
    .rejilla--2-movil {
      --columnas: 3;
      --hueco: var(--espacio-5);
    }
  }

  /* Contenedor con scroll horizontal propio para tablas anchas: la página nunca se desborda. */
  .desplazable {
    max-width: 100%;
    overflow-x: auto;
  }

  /* Texto corrido largo (páginas legales, fichas informativas). */
  .prosa h2 {
    margin-top: var(--espacio-6);
    font-size: var(--paso-2);
  }

  /* Páginas legales: al ancho del resto de páginas, con los apartados en azul y la fecha arriba. */
  .prosa--legal h2 {
    color: var(--color-marino);
    font-size: 1.2rem;
  }

  .prosa__fecha {
    margin: 0 0 var(--espacio-5);
    color: var(--color-texto-suave);
    font-size: 0.875rem;
  }

  /* Párrafo introductorio centrado bajo un título de sección. */
  .introduccion {
    max-width: 70ch;
    margin-inline: auto;
    text-align: center;
  }

  .texto-centrado {
    text-align: center;
  }
}