/* ===== assets/css/pages/home.css ===== */

body {
  background-color: #ffffff;
  color: #111; /* opcional: asegura contraste */
.hero {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-attachment: fixed;
  background-size: cover;
  background-position: center;
  position: relative;
}

.hero-inner {
  text-align: center;
  color: white;
  z-index: 2;
}

.about-video {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-lg);
  padding: var(--spacing-xl) 0;
}

@media (max-width: 768px) {
  .about-video {
    grid-template-columns: 1fr;
  }
}