body {
  display: grid;
  grid-template-columns: repeat(24, 1fr);
  grid-template-rows: repeat(24, 1fr);
  height: 100vh;
  width: 100vw;
}

header {
  grid-column: 2 / 22;
  grid-row: 1 / 4;
  display: flex;
  justify-content: space-between;
  align-items: center;

  z-index: 999;
}

nav {
  grid-column: 2 / 22;
  grid-row: 4 / 5;

  z-index: 999;
}

nav:nth-of-type(2) {
    grid-column: 7 / 22;
    grid-row: 5 / 7;

    z-index: 500;

    display: flex;
    flex-direction: column;
    align-items: flex-start;

    gap: 0.15em;

    /* IMPORTANTE: cancelamos lo heredado */
    flex-wrap: nowrap; 
    justify-content: flex-start;
}

/* Layout principal en escritorio */
main {
  grid-column: 1 / 25;
  grid-row: 1 / 25;
  display: flex;
  flex-direction: column;
  overflow: auto;
  scroll-snap-type: y mandatory;
  scroll-behavior: smooth;  
}

footer {
  grid-column: 1 / 25;
  grid-row: 23 / 25;
}

main > section,
main article section {
  flex: 0 0 calc(100vh * 18 / 24);
  scroll-snap-align: start;
  padding-top: calc(100vh * 6 / 24);
  padding-left: calc(100vw * 8 / 24);  
}

/* Article como contenedor lógico, no visual */
main > article {
  display: contents;
}

main.contacto {
  grid-row: 6 / 25;
  padding-bottom: 0;
}

main.contacto > section {
  scroll-snap-align: none;
  flex: none;
  flex-basis: auto;
  margin-top: 0;
  padding-top: 0;
  min-height: auto;
}