body, html {
    height: 100%;
    margin: 0;
    width: 100%;
  }

  *, *::before, *::after {
    box-sizing: border-box;
  }

  header{
    width: 100% !important;
  }

  .section {
    height: 100vh;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    /*background-color: rgb(248, 248, 243);*/
  }
  
  .imposing-text{
    color: rgb(59, 58, 58) !important;
    text-shadow: none !important;
  }
  /* Estilos para los textos imponentes */
  .title-container {
    width: 100%;
    font-size: 16vw; /* Letras más grandes */
    font-weight: 900; /* Extra bold */
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    line-height: 0.9; /* Espaciado casi imperceptible */
    /*text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.8);  Sombra para darles presencia */
  }
  
  .title-container div {
    margin: 0;
    padding: 0;
    transition: transform 1s ease-out, opacity 1s ease-out;
  }
  
  /* Reducir el margen entre ambas líneas a la mitad */
  .title-container div:first-child {
    margin-bottom: 0em !important; /* Si antes era 0.2em, ahora es la mitad */
  }
  
  /* Clase para textos imponentes reutilizable */
  .imposing-text {
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.8);
    font-weight: 900;
  }
  
  /* Modificaciones para el header: texto azul, en capa superior y animación forzada */
  .header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: rgba(248, 248, 243, 0.829);
    color: rgb(0, 0, 0); /* Fuerza el texto a color azul */
    z-index: 9999; /* Capa superior */
    transition: transform 0.6s ease-in-out !important;
    transform: translateY(-100px) !important;  /* Inicialmente fuera de vista */
    box-shadow: 0 4px 6px rgba(36, 36, 36, 0.425);
  }
  /* Keyframes para que emergan sin cruzarse */
@keyframes emergeUp {
    from {
      transform: translateY(25px);
      opacity: 0;
    }
    to {
      transform: translateY(0);
      opacity: 1;
    }
  }
  
  @keyframes emergeDown {
    from {
      transform: translateY(-25px);
      opacity: 0;
    }
    to {
      transform: translateY(0);
      opacity: 1;
    }
  }

  /* Clases para la animación */
  .animate-emergeUp {
    animation: emergeUp 1s ease-out forwards;
  }
  
  .animate-emergeDown {
    animation: emergeDown 1s ease-out forwards;
  }
  
  /* Opcional: se puede añadir un pequeño margen entre líneas para que no se crucen */
  .title-container div:first-child {
    margin-bottom: 0.2em; /* ajusta según convenga */
  }
  
  /*Animacion de sección 2*/
  /* Animación para la imagen: opacidad */
.animate-image {
  opacity: 0;
  transition: opacity 0.5s ease;
}

.animate-image.visible {
  opacity: 1;
}

/* Animación para el texto: deslizamiento de izquierda a derecha y opacidad */
.animate-text {
  transform: translateX(-50px);
  opacity: 0;
  transition: transform 0.5s ease, opacity 0.5s ease;
}

.animate-text.visible {
  transform: translateX(0);
  opacity: 1;
}
/******************* Section 3**********************/

#service p {
  opacity: 0;
  color: rgb(59, 58, 58) !important;
  transition: opacity 1s ease;
}

#service p.visible {
  opacity: 1;
}

/*******************Cuarta section******************/
/* Para cada línea de la sección "slogan" */
#slogan .line {
  /* Las transiciones se aplican tanto a entrada como a salida */
  transition: transform 0.5s ease, opacity 0.5s ease;
}

/* Estado por defecto (cuando la sección NO tiene la clase "visible"): 
   las líneas se desplazan 50px a la derecha y son invisibles */
#slogan:not(.visible) .line {
  transform: translateX(50px);
  opacity: 0;
  /* Se asignan retrasos para mantener la secuencia también en la salida */
}
#slogan:not(.visible) .line:nth-child(1) { transition-delay: 0.2s; }
#slogan:not(.visible) .line:nth-child(2) { transition-delay: 0.4s; }
#slogan:not(.visible) .line:nth-child(3) { transition-delay: 0.6s; }
#slogan:not(.visible) .line:nth-child(4) { transition-delay: 0.8s; }
#slogan:not(.visible) .line:nth-child(5) { transition-delay: 1s; }

/* Cuando la sección tiene la clase "visible", las líneas se trasladan a su posición normal y aparecen */
#slogan.visible .line {
  transform: translateX(0);
  opacity: 1;
}
.slogan-wrapper {
  padding-right: 50px;
  overflow: hidden;
}

#slogan.visible .line:nth-child(1) { transition-delay: 0.2s; }
#slogan.visible .line:nth-child(2) { transition-delay: 0.4s; }
#slogan.visible .line:nth-child(3) { transition-delay: 0.6s; }
#slogan.visible .line:nth-child(4) { transition-delay: 0.8s; }
#slogan.visible .line:nth-child(5) { transition-delay: 1s; }

/***********Quinta section**************/
@keyframes fadeInUpFinal {
  from {
    opacity: 0;
    transform: translateY(50px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* El párrafo en la sección final inicia oculto y desplazado hacia abajo */
#final p {
  opacity: 0;
  transform: translateY(50px);
  color: rgb(68, 27, 27);
  /* Puedes agregar una transición para que si se aplica manualmente sin keyframes sea suave */
  transition: opacity 1s ease-out, transform 1s ease-out;
}

/* Cuando se active la animación (por ejemplo, agregando la clase "visible" a la sección final) */
#final.visible p {
  animation: fadeInUpFinal 1s ease-out forwards;
}

/* ================= Media Queries ================= */

/* Para tablets (ancho máximo 1024px) */
@media (max-width: 1024px) {
  .title-container {
    font-size: 20vw; /* Reducir tamaño relativo */
  }
  /* Ajustes en secciones donde se usan paddings mayores */
  .container,
  .section div {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
  /* Reducir tamaño de fuente en secciones de texto grande */
  #service p {
    font-size: 3.5rem;
  }
  #final p {
    font-size: 4.5rem;
  }
  /* Ajustar márgenes en la sección final */
  #final div {
    margin-left: 0; /* Evitar que se desplace demasiado a la derecha */
  }
  .bg-home {
    background-position: center center !important;
  }
}

/* Para celulares (ancho máximo 640px) */
@media (max-width: 640px) {
  .title-container {
    font-size: 24vw; /* Aumentar el valor para un mejor ajuste en móviles */
  }
  /* Reducir paddings generales */
  .container, .section div {
    padding-left: 1rem;
    padding-right: 1rem;
  }
  /* Ajustar tamaños de fuente para mejorar la legibilidad en móviles */
  #service p {
    font-size: 2rem;
  }
  #data{
    text-align: center;
  }
  #final p {
    font-size: 3.5rem;
  }
  /* En el footer, apilar elementos verticalmente */
  footer .flex {
    flex-direction: column;
  }
  footer .flex > div {
    width: 100% !important;
    margin-bottom: 1rem;
  }
  .bg-home {
    background-position: center center !important;
  }
}

/* Estilos para el menú móvil con transición */
#mobile-menu {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height 0.5s ease, opacity 0.5s ease;
}

/* Cuando se agrega la clase "open", el menú se expande */
#mobile-menu.open {
  max-height: 500px; /* Ajusta este valor según la altura de tu menú */
  opacity: 1;
}

.link{
  color: rgb(155, 83, 0);
}

.link:hover{
  color: rgb(90, 49, 1);
}

/* Elemento de fondo para secciones */
.bg-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-repeat: no-repeat;
  opacity: 0;
  transition: opacity 0.5s ease;
  z-index: -1; /* Queda detrás del contenido */
}

/* Fondo para la sección Home: imagen centrada */
.bg-home {
  background-image: url('../images/earth-home.png'); /* Reemplaza por tu imagen */
  background-position: top center;
  background-size: 100% auto;
}

/* Fondo para la sección Slogan: imagen a la izquierda */
.bg-slogan {
  background-image: url('../images/side-left.png'); /* Reemplaza por tu imagen */
  background-position: left center;
  background-size: auto 100%;
}

/* Fondo para la sección Final: imagen a la izquierda */
.bg-final {
  background-image: url('../images/bottom-sand.png'); /* Reemplaza por tu imagen */
  background-position: center bottom;
  background-size: 100% auto;
}

/* Cuando la sección tenga la clase "visible", se muestra el fondo */
.section.visible .bg-image {
  opacity: 1;
}