/* =========================
   📄 SECCIONES GENERALES
   ========================= */

/* estructura base de cada bloque de página */
.section {
  display: flex;
  flex-direction: column;
  justify-content: center; /* centra vertical */
  padding: 3.5rem 6rem 5rem;
  position: relative;
  width: 100%;
}

.reveal-fade {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity 1.8s ease-out,
    transform 2.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal-fade.revealed {
  opacity: 1;
  transform: translateY(0);
}
/* =========================
   📊 BARRA DE PROGRESO SCROLL
   ========================= */

.progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  width: 0%; /* JS la va aumentando */
  height: 3px;
  background: var(--accent-light);
  z-index: 1150;
}

/* =========================
   📱 TABLET
   ========================= */

@media (max-width: 1024px) {
  .section {
    padding: 3rem 3rem 4rem;
  }

  .reveal-fade {
    transform: translateY(15px);
    transition:
      opacity 1.4s ease-out,
      transform 1.8s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .progress-bar {
    height: 3px;
  }
}

/* =========================
   📱 MÓVIL
   ========================= */

@media (max-width: 600px) {
  .section {
    padding: 2.5rem 1.25rem 3.5rem;
    justify-content: flex-start;
  }

  .reveal-fade {
    transform: translateY(12px);
    transition:
      opacity 1s ease-out,
      transform 1.4s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .progress-bar {
    height: 2px;
  }
}

/* =========================
   📱 MÓVILES PEQUEÑOS
   ========================= */

@media (max-width: 380px) {
  .section {
    padding: 2rem 1rem 3rem;
  }
}