/* General */
body {
  display: flex;
  flex-direction: column;
  margin: 0;
  overflow: hidden;
  background: url("../images/stars_background.png") repeat;
  background-color: #362164;
  font-family: "Cinzel", serif;
  color: white;
  text-align: center;
  -webkit-tap-highlight-color: transparent;
  min-height: 100vh;

   transform: translateZ(0); 
    
    /* Otra opción: Avisar al navegador que el elemento va a cambiar su posición */
    will-change: transform, scroll-position;
}

body.no-scroll {
    overflow: hidden;
    color: rgba(0, 0, 0, 0.527);
}
.font-size-normal{
  font-size: 20px!important; 
}

.video_width_control{
  max-width:190px;
}

.roadmap{
  width: auto;
}

#main-content { 
    flex: 1; /* 🔑 CLAVE: Hace que este elemento crezca y empuje el footer hacia abajo */
}



.modal-open {
    /* Oculta la barra de scroll */
    overflow: hidden !important; 
    
    /* Fija la posición del body para evitar el 'scroll jump' */
    position: fixed; 
    
    /* Asegura que ocupe todo el viewport */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* 🔑 CLAVE: Aplica la clase a ambos elementos */
html.modal-open,
body.modal-open {
    overflow: hidden !important;
}

.fade_in {
 
  animation: fadeIn 2s ease-in-out forwards;
}

.landing-scene{
  margin-top: -120px;
}

.blurred_scene{
  -webkit-mask-image: linear-gradient(to top, transparent, black 25%, black 75%, transparent);
    mask-image: linear-gradient(to top, transparent, black 25%, black 75%, transparent);
    
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

#global-background-cover {
    position: fixed; /* Se posiciona con respecto a la ventana del navegador */
    top: 0;
    left: 0;
    width: 100vw; /* Ancho del 100% del viewport */
    height: 25vh; /* Altura del 100% del viewport */
    z-index: 0; /* ¡La clave! Lo envía detrás de todo */
    background: url('../images/background_header.png') no-repeat center bottom / cover; 
}

/* Escena principal */
#scene {
  position: relative;
  width: 100vw;
  height: 90vh;
  overflow:visible;
  user-select: none;
}

.centered-nav {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Hermeto */
.hermeto {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -55%);
  z-index: 15;
  display: block;
}

.hermeto img {
  width: 350px;
  transition: filter 0.5s;
}

.glow{
    filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0)); /* Sombra inicial transparente */
    transition: filter 0.3s ease-in-out, transform 0.2s ease-in-out; 
}





/* Nubes */
.cloud {
  width: 650px; 
  min-width: 650px;
  position: absolute;
  visibility: hidden;
  z-index: 2;
  pointer-events: none;
}
.cloudA { 
  width: 650px; 
  min-width: 650px;
  height: auto; 
}
.circular_light { min-width: 1500px; height: auto;  mix-blend-mode: lighten;  visibility: hidden;}
.circular_light2 { min-width: 2500px; 
  height: auto;  
  mix-blend-mode: lighten;
  opacity: 0.6;  visibility: hidden;
}
.cloudB { 
  min-width: 900px; 
  opacity: 0.4;
  height: auto; 
}


/* Píldora */
.pill {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 4;
  pointer-events: none;
  width: 60px;
}


/* Partículas */
#tsparticles {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 1;
  pointer-events: none;
}

.css-particle {
  position: absolute;
  border-radius: 50%;
  opacity: 1;
  pointer-events: none;
  transition:
    transform 1.2s cubic-bezier(0.4,0,0.2,1),
    opacity 1.2s linear;
  z-index: 2;
  mix-blend-mode: lighten;
}


/* Logos Sociales */
.social-logos {
  width:100%;
  position: relative;
  z-index: 6; /* Asegura que estén por encima de otros elementos */
  display: flex;
  gap: 0.7rem; /* Espacio entre los logos */
  justify-content: center; 
}


.social-logo {
  width: 70px; /* Tamaño de los logos */
  height: auto;
  transition: filter 0.3s ease-in-out,transform 0.2s ease-in-out;
}



/* Nuevo estilo para el logo de Hermeto para que no tenga una regla de estilo en línea */
.hermeto-logo {
  display: block;
  position: absolute;
  top: 12%;
  left: 50%;
  transform: translateX(-50%);
  height: auto;
  width: 600px;
  z-index: 5;
  filter: url(#warp-filter);
   pointer-events: none;
}



/* Estilos para el Contrato (CA) - Actualizado */
.contract-address-container {
    position: relative;
    z-index: 7;
    display: block;
    align-items: center;
    background-color: rgba(0, 0, 0, 0.0); /* Fondo negro con transparencia */
    font-size: 1rem; /* Texto más grande */
    color: #cfb8a3;
    letter-spacing: 0.05em;
    white-space: nowrap;
    /* 🔑 CLAVE: ELIMINAR LOS MÁRGENES NEGATIVOS Y FIJOS */
    margin-top: -15px; 
    margin-right: 0px; 
    
}



.copy-button {
   margin-top:-10px;
    background-color: transparent; /* Fondo transparente para el botón */
    color: #ffffff; /* Color del icono */
    border: 0px;
    padding: 0.5rem 0.8rem; /* Tamaño del botón */
    border-radius: 50%; /* Botón circular para el icono */
    cursor: pointer;
    font-size: 1.2rem; /* Tamaño del icono */
    font-weight: normal; /* Aseguramos que el emoji no se vea en negrita si no es necesario */
    transition: background-color 0.2s ease-in-out, box-shadow 0.3s ease-in-out, transform 0.1s ease-in-out;
    display: flex; /* Para centrar bien el icono */
    align-items: center;
    justify-content: center;
    width: 45px; /* Ancho y alto para un botón circular */
    height: 45px;
    z-index: 10;
}



.copy-button:active {
    transform: translateY(0px) scale(1.1); /* Efecto de "clic" */
    box-shadow: 0 0 10px #00ffea; /* Glow más sutil al hacer clic */
}

.footer {
  position: relative; /* Lo fija a la ventana del navegador */
  left: 0%;
  bottom:0%;
  min-width: 100vw; /* 100% del ancho del viewport */
  height: 500px; /* 100% de la altura del viewport */
  z-index: 0; /* Lo envía detrás de todo el contenido */
  background: url('../images/footer.png') no-repeat center bottom; /* Tu imagen de fondo de estrellas */
  background-size: cover;
  margin-top:100px;
  -webkit-mask-image: linear-gradient(black 100%, black 75%, transparent);
  mask-image: linear-gradient( black 100%, black 75%, transparent);
 background-position: top;
}


/* Sección de Hermeto */
.section-hermeto {
    position: relative;
    z-index: 2; /* Asegura que esté sobre el fondo global */
    margin-top:-120px
}

/* Sección de Hermeto - Contenedor (Actualizado) */
.section-hermeto .container {
    background: linear-gradient(to bottom, rgba(18, 5, 27, 0) 0%, rgba(18, 5, 27, 0.6) 20%); /* Gradiente transparente arriba */
    border-radius: 16px;
    padding: 0rem 10rem;
}

.section-hermeto p {
    margin-bottom: 1.5rem;
    line-height: 1.6;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.2);
}

.section-hermeto .title {
    font-size: 2.5rem;
}

.section-hermeto .subtitle {
    font-size: 1.25rem;
    max-width: 600px;
    margin: 0 auto 1.5rem;
}

/* Colores de las palabras */
.hermeto-color {
    color: #00ffea;
    text-shadow: 0 0 12px #00ffea, 0 0 24px #00ffea;
}

.purple-text {
    color: #ff00ff;
    text-shadow: 0 0 12px #ff00ff;
}

.pink-text {
    color: #ff00c0;
    text-shadow: 0 0 12px #ff00c0;
}

.green-text {
    color: #00ff80;
    text-shadow: 0 0 12px #00ff80;
}

.orange-text {
    color: #ff8000;
    text-shadow: 0 0 12px #ff8000;
}

/* Animación de Resplandor Pulsante */
@keyframes pulse-glow {
    0% {
        box-shadow: 0 0 8px #00ffea, 0 0 16px #00ffea;
        transform: rotate(45deg) translateY(10px) scale(1);
    }
    50% {
        box-shadow: 0 0 20px #00ffea, 0 0 40px #00ffea, 0 0 60px rgba(0, 255, 234, 0.4);
        transform: rotate(45deg) translateY(10px) scale(1.1); /* Ligeramente más grande en el punto álgido */
    }
    100% {
        box-shadow: 0 0 8px #00ffea, 0 0 16px #00ffea;
        transform: rotate(45deg) translateY(10px) scale(1);
    }
}

@keyframes pulse-glow2 {
    0% {
        text-shadow: 0 0 8px #00ff80, 0 0 16px #00ff80;
    }
    50% {
        text-shadow: 0 0 20px #0e71fb, 0 0 40px #0e71fb, 0 0 60px rgba(32, 164, 153, 0.4);
    }
    100% {
        text-shadow: 0 0 8px #00ff80, 0 0 16px #00ff80;
    }
}

/* Divisor de diamante (Actualizado con animación) */
.diamond-divider {
    width: 20px;
    height: 20px;
    background-color: #00ffea;
    margin: 0 auto;
    transform: rotate(45deg) translateY(10px); /* Ajuste inicial */
    box-shadow: 0 0 12px #00ffea, 0 0 24px #00ffea; /* Glow inicial */
    position: relative;
    z-index: 1;

    /* Aplicar la animación */
    animation: pulse-glow 3s infinite ease-in-out; /* 3 segundos, infinito, suave */
}






/*Pharse*/

/* Contenedor de la frase (Inicialmente invisible y deshabilitado) */
#hermeto-phrase-container {
    position: absolute;
    top: 70%; /* Ajusta esta posición para que flote debajo de Hermeto */
    left: 50%;
    transform: translate(-50%, -50%);
    width: 500px; /* Tamaño del gráfico 'pharse_window.png' */ 
    z-index: 20; 
    opacity: 0;
    pointer-events: none; /* Deshabilita el click cuando está oculto */
}

/* Imagen de la ventana */
.phrase-window-bg {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Wrapper para centrar el texto/loader DENTRO del gráfico */
.phrase-content-wrapper {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 70%; /* Ajusta el área para que quepa dentro de la ventana */
    height: 60%;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Estilo y animación simple del Loader (Spinner) */
.loader {
    border: 5px solid rgba(255, 255, 255, 0.3);
    border-top: 5px solid #00ffea; /* Color de neón */
    border-radius: 50%;
    width: 50px;
    height: 50px;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Estilo del texto de la frase */
#phrase-text {
    font-family: 'Trajan Pro', serif;
    font-style:normal;
    color: #ffffff;
    line-height: 1.2;
    font-size:20px;
}

/* Clase de Bulma para ocultar */
.is-hidden {
    display: none !important;
}

.phrase-glow {
    /* Múltiples sombras para un efecto de neón vibrante */
    filter: drop-shadow(0 0 8px #f56fff) 
            drop-shadow(0 0 16px #be79ff)
            drop-shadow(0 0 24px #006eff);
    transition: filter 0.5s ease-out; /* Transición suave */
}


@media (hover: hover) and (pointer: fine) {
  .copy-button:hover {
    background-color: #5bc3ff; /* Fondo sutil al pasar el ratón */
    box-shadow: 0 0 20px #5bc3ff; /* Glow azul intenso al pasar el ratón */
    transform: translateY(-2px) scale(1.05); /* Efecto de levantamiento y pequeño escalado */
  }

  .hermeto img:hover{
    cursor: pointer;
  }

  .glow:hover {
      filter: drop-shadow(0 0 5px #ffdcbb) drop-shadow(0 0 15px #ffdcbb) drop-shadow(0 0 45px #ffdcbb) drop-shadow(0 0 160px #ffbd24); /* Resplandor al pasar el ratón */
      cursor: pointer;
      transform: scale(1.1);
  }

  .social-logo:hover {
  filter: drop-shadow(0 0 5px #5bc3ff) drop-shadow(0 0 15px #5bc3ff);
  transform:scale(1.1);
  mix-blend-mode: lighten;
  }

}



/* Ajustes de tamaño en mobile */
@media screen and (max-width: 1023px) {

  .font-size-normal{
  font-size: 25px!important; 
}

  .video_width_control{
  max-width:100%;
}

   .img-wrap img {
    display: block;
    min-width: 160%;
    margin-left: -30%; /* centra visualmente la parte media */
  }


  
  .footer {
  background-size:cover;
  }

    /* Logos Sociales */
  .social-logos {
    position: relative;
    z-index: 6; /* Asegura que estén por encima de otros elementos */
    display:flex;
    width:100%;
    gap: 1.2rem; /* Espacio entre los logos */
    justify-content: center; 
    margin-top:40px;
  }

  .social-logo {
    width: 120px; /* Tamaño de los logos */
    height: auto;
  }

  .contract-address-container {
    top:0px;
    margin-top:20px;
    justify-content: center; 
    display: flex;
    align-items: center;
    font-size: 2.70vw;
  }

  .copy-button {
    margin-top:20px;
    left:49%;
    position:absolute;
    background-color: transparent; /* Fondo transparente para el botón */
    color: #ffffff; /* Color del icono */
    border: 0px;
    padding: 0.5rem 0.8rem; /* Tamaño del botón */
    font-size: 4.5rem; /* Tamaño del icono */
    font-weight: normal; /* Aseguramos que el emoji no se vea en negrita si no es necesario */
    display:flex; /* Para centrar bien el icono */
    align-items: center;
    justify-content: center;
    z-index: 10;
  }

  .hermeto img {
  width: 600px;
  filter: drop-shadow(0 0 20px rgba(255,255,255,0.6));
  transition: filter 0.5s;
  z-index: 0 !important;
  }

  .landing-scene{
  margin-top: -30%;
  }

  .hermeto-logo {
  display: block;
  position: absolute;
  top: 25%;
  left: 50%;
  transform: translateX(-50%);
  height: auto;
  width: auto;
  z-index: 5;
  filter: url(#warp-filter);
  }

  .section-hermeto {
  position: relative;
  z-index: 2; /* Asegura que esté sobre el fondo global */
  margin-top:-400px;
  }

  .section-hermeto .container {
    margin:20px;
    padding:0px;
  }

  .section-hermeto .subtitle {
      font-size: 1.7rem;
      width:100%;
      margin: 0 auto 1.5rem;
  }

  #hermeto-phrase-container {
    position: absolute;
    top: 65%; /* Ajusta esta posición para que flote debajo de Hermeto */
    left: 50%;
    transform: translate(-50%, -50%);
    width: 95%; 
    z-index: 20; 
    opacity: 0;
    pointer-events: none; /* Deshabilita el click cuando está oculto */
}

#phrase-text {

    font-size:4vw !important;
}

.circular_light2 { 
  min-width: 2300px;
}


}