/* flow.c227.css — contenedores, retícula editorial, cabecera/pie, secciones */
@layer layout {
  .container {
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--container-pad);
  }

  .container--narrow {
    max-width: 46rem;
  }

  .container--wide {
    max-width: 88rem;
  }

  /* cabecera ------------------------------------------------------- */
  .site-header {
    position: sticky;
    top: 0;
    z-index: 200;
    background: var(--paper);
    border-bottom: var(--border-hairline);
  }

  .site-header__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    padding-block: 0.9rem;
  }

  .site-header__nav {
    display: none;
  }

  @media (min-width: 64rem) {
    .site-header__nav {
      display: flex;
      align-items: center;
      gap: clamp(1rem, 2vw, 2.25rem);
    }
  }

  /* menu de pantalla completa (movil) ------------------------------ */
  .mobile-menu {
    position: fixed;
    inset: 0;
    z-index: 350;
    background: var(--paper);
    display: flex;
    flex-direction: column;
    padding: 6rem var(--container-pad) var(--space-lg);
    overflow-y: auto;
  }

  .mobile-menu[hidden] {
    display: none;
  }

  .mobile-menu__list {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
  }

  .mobile-menu__link {
    display: block;
    padding-block: 0.85rem;
    border-bottom: var(--border-hairline);
    font-family: var(--f-display);
    font-size: 1.6rem;
  }

  /* pie -------------------------------------------------------------- */
  .site-footer {
    background: var(--ink);
    color: var(--paper-on-ink);
    padding-block: var(--space-xl) var(--space-lg);
  }

  .site-footer__grid {
    display: grid;
    gap: var(--space-lg);
    grid-template-columns: 1fr;
  }

  .site-footer__base {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-top: var(--space-lg);
    padding-top: var(--space-md);
    border-top: 1px solid rgba(244, 239, 226, 0.2);
  }

  @media (min-width: 48rem) {
    .site-footer__grid {
      grid-template-columns: 1.3fr 1fr 1fr;
    }

    .site-footer__base {
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
    }
  }

  /* secciones — ritmo deliberadamente desigual ------------------------ */
  .section {
    padding-block: var(--space-xl);
  }

  .section--tight {
    padding-block: var(--space-lg);
  }

  .section--roomy {
    padding-block: var(--space-2xl);
  }

  .section--paper-deep {
    background: var(--paper-deep);
  }

  .section--ink {
    background: var(--ink);
    color: var(--paper-on-ink);
  }

  .section__head {
    display: grid;
    gap: var(--space-md);
    margin-bottom: var(--space-lg);
  }

  @media (min-width: 56rem) {
    .section__head--split {
      grid-template-columns: 0.85fr 1.15fr;
      align-items: end;
    }
  }

  /* retícula editorial: numero de sumario + columna de texto ---------- */
  .masthead-row {
    display: grid;
    gap: 0.5rem 1.5rem;
    grid-template-columns: auto 1fr;
    align-items: baseline;
  }

  .editorial-grid {
    display: grid;
    gap: var(--space-lg);
    grid-template-columns: 1fr;
  }

  @media (min-width: 56rem) {
    .editorial-grid--2 {
      grid-template-columns: 1fr 1fr;
    }

    .editorial-grid--rail {
      grid-template-columns: 18rem 1fr;
    }

    .editorial-grid--asym {
      grid-template-columns: 1.1fr 0.9fr;
    }
  }

  .stat-row {
    display: grid;
    gap: var(--space-md);
    grid-template-columns: repeat(2, 1fr);
  }

  @media (min-width: 40rem) {
    .stat-row {
      grid-template-columns: repeat(4, 1fr);
    }
  }

  /* la escala pierde una columna en pantallas muy anchas para no diluir el foco */
  @media (min-width: 100rem) {
    .stat-row {
      grid-template-columns: repeat(4, minmax(0, 14rem));
      justify-content: start;
    }
  }
}