/* Fondo específico para la página de inicio */
body.pagina-inicio {
  background-image: none;
  background-color: var(--color-fondo); /* Fondo verde sólido para el resto de la página */
}

/* ====== SECCIÓN HERO (PANTALLA PRINCIPAL) ====== */
/* Contenedor que ocupa toda la altura de la pantalla */
.pantallaPpal {
  position: relative;
  height: 100vh;
  background-image: url("imagenes/fondo_ppal_02_01.png");
  background-size: cover;
  background-position: center center;
}

/* Capa oscura superpuesta para mejorar legibilidad */
.pantallaPpal::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--degradado);
  z-index: 1; /* Encima del vídeo, debajo del texto */
}

/* Se implementará más adelante: VIDEO DE FONDO
   .video-fondo {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     object-fit: cover;
     z-index: 0;
     transition: opacity 1s ease;
   }

   .video-fondo.oculto {
     opacity: 0;
   }
*/

/* ====== BOTÓN DEL MENÚ ====== */
/* Contenedor del botón central */
.rectangulo {
  position: relative;
  z-index: 2; /* Encima de todo */
  display: flex;
  justify-content: center;
  padding-top: 45vh;
  /* Transición suave para cuando el botón suba */
  transition: padding-top 1.5s cubic-bezier(0.25, 1, 0.5, 1);
}

/* Se implementará más adelante: Estado cuando el vídeo está reproduciéndose
   .rectangulo.video-activo {
     padding-top: 75vh;
   }
*/

/* Estilos visuales del botón */
.boton-menu {
  padding: 1rem 2.5rem;
  font-size: clamp(1rem, 4vw, 1.3rem);
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--color-ppal);
  text-decoration: none;
  border-radius: 12px;
  box-shadow:
    0 6px 14px var(--color-sombra-cajas),
    0 0 0 1px var(--color-ppal);
  text-shadow: 1px 1px 3px var(--color-sombra);
  transition: transform 0.2s ease;
}

.boton-menu:hover {
  transform: scale(1.05);
}

/* ====== SLOGAN ====== */
/* Texto promocional en la parte inferior */
.slogan {
  position: absolute;
  bottom: 20vh;
  width: 100%;
  text-align: center;
  font-size: clamp(1.4rem, 3vw, 2.2rem);
  font-weight: 600;
  letter-spacing: 0.05em;
  text-shadow: 2px 2px 8px var(--color-sombra);
  z-index: 2; /* Encima de todo */
  /* Transición para aparecer suavemente */
  transition:
    opacity 2s cubic-bezier(0.22, 1, 0.36, 1),
    transform 2s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Se implementará más adelante: Estado oculto mientras el vídeo se reproduce
   .slogan.video-activo {
     opacity: 0;
     transform: translateY(20px);
   }
*/

/* ====== FLECHA INDICADORA DE SCROLL ====== */
/* Icono animado que invita a bajar */
.flecha-scroll {
  position: absolute;
  bottom: 3vh;
  left: 50%;
  transform: translateX(-50%);
  color: var(--color-ppal);
  width: 40px;
  height: 40px;
  animation: bote 2s infinite;
  z-index: 5;
  opacity: 0.8;
  cursor: pointer;
}

/* Animación de rebote para la flecha */
@keyframes bote {
  0%,
  20%,
  50%,
  80%,
  100% {
    transform: translateX(-50%) translateY(0);
  }
  40% {
    transform: translateX(-50%) translateY(-10px);
  }
  60% {
    transform: translateX(-50%) translateY(-5px);
  }
}

/* ====== SECCIÓN DE INFORMACIÓN (ABAJO) ====== */
/* Grid de 3 columnas para Dirección, Horario y Contacto */
.pantalla1abajo {
  margin: 3rem auto;
  padding: 3.5rem 3rem;
  max-width: 1100px;
  background-color: transparent;

  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3rem;

  /* animación de aparición móvil */
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity 0.6s ease,
    transform 0.6s ease;
}

/* Estilos para cada bloque de información */
.infoBloque {
  text-align: left;
}

.icono {
  width: 1.3rem;
  height: 1.3rem;
  vertical-align: middle;
  margin-right: 0.5rem;
  color: var(--color-sec);
}

.infoTitulo {
  display: block;
  font-size: clamp(1.2rem, 4vw, 1.4rem);
  font-weight: 600;
  letter-spacing: 0.04em;
  margin-bottom: 0.6rem;
  color: var(--color-terciario);
}

.infoTexto {
  font-size: clamp(0.9rem, 3vw, 1rem);
  line-height: 1.8;
  color: var(--color-sec);
}

/* ====== DISEÑO RESPONSIVE (MÓVIL) ====== */
/* Ajustes para pantallas menores a 768px */
@media (max-width: 768px) {
  /* BLOQUE INFERIOR más cerca del hero y animado */
  .pantalla1abajo {
    margin-top: 0.5rem; /* más cerca del hero */
    grid-template-columns: 1fr;
    padding: 3rem 2rem;
    text-align: center;
    opacity: 0; /* empieza invisible */
    transform: translateY(20px); /* ligeramente abajo */
    transition:
      opacity 0.6s ease,
      transform 0.6s ease;
  }

  .pantalla1abajo.visible {
    opacity: 1;
    transform: translateY(0);
  }

  /* InfoBloques centrados en móvil */
  .infoBloque {
    text-align: center;
    margin-bottom: 2rem;
  }

  /* Slogan mantiene posición */
  .slogan {
    bottom: 22vh;
    font-size: clamp(1.2rem, 5vw, 1.7rem);
  }

  /* Botón más pequeño */
  .boton-menu {
    padding: 0.8rem 1.6rem;
  }
}