/* ==========================================================================
   layout.css — la columna y el ritmo vertical entre secciones.
   El diseño es de una sola columna mobile-first de 540px. No hay grid de
   escritorio: en pantallas grandes la columna simplemente se centra, que es
   la intención del diseñador.
   ========================================================================== */

.page {
  position: relative;
  z-index: 1;
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 36px var(--page-pad-x) 0;
}

/* Entrada escalonada de la primera pantalla. Sólo los cuatro primeros
   bloques: animar el doctor y el cierre al cargar no se ve, están fuera de
   la pantalla, y sólo cuesta trabajo al navegador. */
.page > [data-reveal]:nth-child(-n + 4) {
  animation: bfc-up .7s var(--ease-default) both;
}
.page > [data-reveal]:nth-child(1) { animation-delay: 0s; }
.page > [data-reveal]:nth-child(2) { animation-delay: .08s; }
.page > [data-reveal]:nth-child(3) { animation-delay: .16s; }
.page > [data-reveal]:nth-child(4) { animation-delay: .24s; }

.section { padding-top: var(--gap-section); }

/* Flecha de "sigue bajando" entre el video y el formulario. */
.scroll-hint {
  display: flex;
  justify-content: center;
  padding: 26px 0 4px;
  color: var(--bfc-gris-azul);
  font-size: 15px;
}

/* A partir de tablet el aire de arriba crece un poco: en pantallas altas la
   columna pegada al borde superior se ve descuidada. */
@media (min-width: 720px) {
  .page { padding-top: 56px; }
}