/* Ventanas: cada bloque entre dos líneas ocupa la pantalla y aparece al bajar (se usa con ventanas.js). */
html { scroll-behavior: smooth; scroll-snap-type: y proximity; }

.vista {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 56px 0;
  scroll-snap-align: center;
}
.vista-inicio { scroll-snap-align: start; position: relative; }

/* Flecha que invita a bajar (solo en la primera ventana) */
.bajar {
  position: absolute;
  left: 50%;
  bottom: 28px;
  width: 16px; height: 16px;
  margin-left: -8px;
  border-right: 2px solid var(--flecha, rgba(0, 0, 0, 0.45));
  border-bottom: 2px solid var(--flecha, rgba(0, 0, 0, 0.45));
  transform: rotate(45deg);
  animation: rebote 1.8s ease-in-out infinite;
}
@keyframes rebote {
  0%, 100% { transform: translateY(0) rotate(45deg); opacity: 0.4; }
  50% { transform: translateY(10px) rotate(45deg); opacity: 1; }
}

/* Con JavaScript, el contenido de cada ventana entra deslizándose y se va enfocando, uno detrás de otro */
.js .vista > *:not(.bajar) {
  opacity: 0;
  transform: translateY(44px);
  filter: blur(8px);
  transition: opacity 0.9s ease, transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1), filter 0.9s ease;
}
.js .vista.visible > *:not(.bajar) { opacity: 1; transform: none; filter: none; }
.js .vista.visible > :nth-child(2) { transition-delay: 0.15s; }
.js .vista.visible > :nth-child(3) { transition-delay: 0.3s; }
.js .vista.visible > :nth-child(4) { transition-delay: 0.45s; }
.js .vista.visible > :nth-child(5) { transition-delay: 0.6s; }
.js .vista.visible > :nth-child(6) { transition-delay: 0.75s; }

/* Las líneas se dibujan de lado a lado */
.js hr { transform: scaleX(0); opacity: 0; transition: transform 1s ease, opacity 1s ease; }
.js hr.visible { transform: none; opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; scroll-snap-type: none; }
  .bajar { animation: none; }
}