/*
  grid.css — contenedor, ritmo de secciones y rejillas de contenido.
  Mobile-first (min-width). Sin !important.
*/

@layer layout;

@layer layout {
  .contenedor {
    width: 100%;
    max-width: var(--ancho-contenedor);
    margin-inline: auto;
    padding-inline: var(--s-sm);
  }

  .contenedor--lectura {
    max-width: 46rem;
  }

  @media (min-width: 640px) {
    .contenedor {
      padding-inline: var(--s-md);
    }
  }

  main {
    display: block;
  }

  .seccion {
    padding-block: var(--s-xl);
  }

  .seccion--corta {
    padding-block: var(--s-lg);
  }

  .seccion--amplia {
    padding-block: var(--s-2xl);
  }

  .seccion--oscura {
    background: var(--black);
    color: var(--texto-oscuro);
  }

  .seccion--oscura h2,
  .seccion--oscura h3 {
    color: var(--texto-oscuro);
  }

  .seccion--oscura p {
    color: var(--grey-claro);
  }

  .encabezado-seccion {
    max-width: 40rem;
    margin-bottom: var(--s-lg);
  }

  .encabezado-seccion__etiqueta {
    display: inline-block;
    font-family: var(--fuente-texto);
    font-weight: 600;
    font-size: 0.8rem;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--cobalt);
    margin-bottom: var(--s-2xs);
  }

  .encabezado-seccion p {
    color: var(--grey);
    margin-top: var(--s-xs);
  }

  .seccion--oscura .encabezado-seccion p {
    color: var(--grey-claro);
  }

  /* rejilla de dos columnas: bloque fijo + río de texto */
  .duo {
    display: grid;
    gap: var(--s-lg);
    align-items: start;
  }

  @media (min-width: 900px) {
    .duo {
      grid-template-columns: 1fr 1fr;
      gap: var(--s-2xl);
      align-items: center;
    }

    .duo--invertido {
      direction: rtl;
    }

    .duo--invertido > * {
      direction: ltr;
    }
  }

  /* rejilla de tarjetas */
  .rejilla-tarjetas {
    display: grid;
    gap: var(--s-md);
    grid-template-columns: 1fr;
  }

  @media (min-width: 640px) {
    .rejilla-tarjetas {
      grid-template-columns: repeat(2, 1fr);
    }
  }

  @media (min-width: 1040px) {
    .rejilla-tarjetas--tres {
      grid-template-columns: repeat(3, 1fr);
    }
  }

  .rejilla-equipo {
    display: grid;
    gap: var(--s-lg);
    grid-template-columns: 1fr;
  }

  @media (min-width: 700px) {
    .rejilla-equipo {
      grid-template-columns: repeat(3, 1fr);
    }
  }

  .rejilla-legal {
    display: grid;
    gap: var(--s-lg);
  }

  @media (min-width: 900px) {
    .rejilla-legal {
      grid-template-columns: 1.1fr 0.9fr;
      gap: var(--s-2xl);
    }
  }
}