/* ===== ANIMACIÓN TEXTO HOVER ===== */

/* Oculto por defecto */
.index-item-title-text,
.index-item-subtext {
  opacity: 0;
  transform: translateY(10px);
  transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* Aparece al hacer hover */
.index-item:hover .index-item-title-text,
.index-item:hover .index-item-subtext {
  opacity: 1;
  transform: translateY(0);
}

/* Retraso del subtítulo */
.index-item-subtext {
  transition-delay: 0.15s;
}

/* Estilo del subtítulo */
.index-item-subtext {
  display: block;
  font-size: 13px;
  color: #555;
  margin-top: 6px;
  text-transform: none !important;
}

/* moving subtext */

.index-item-title-text {
  opacity: 0 !important;
  transform: translateX(20px) !important;
  transition: all 1s ease !important;
}

.index-item-subtext {
  opacity: 0 !important;
  transform: translateY(200px) !important;
  transition: all 1s ease !important;
}

.index-item:hover .index-item-title-text,
.index-item:hover .index-item-subtext {
  opacity: 1 !important;
  transform: translateX(0) !important;
}

/* CONTENEDOR */
.social-icons {
  display: flex;
  gap: 20px;
  justify-content: center;
}

/* CÍRCULO */
.social-icons a {
  width: 60px;
  height: 60px;
  background: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

/* ICONO */
.social-icons svg {
  width: 28px;
  height: 28px;
  fill: #222 !important; /* color icono */
}

/* HOVER (efecto pro) */
.social-icons a:hover {
  transform: scale(1.1);
  background: #222;
}

.social-icons a:hover svg {
  fill: white !important;
}

/* Font  
body, h1, h2, h3, p, a, span {
  font-family: 'Raleway', sans-serif !important;
  font-weight: bold;
}*/



/* Letras individuales */
.letter {
  display: inline-block;
  will-change: transform;
}

/* Animación caída realista */
@keyframes fallReal {
  0% {
    transform: translate(0,0) rotate(0deg);
    opacity: 1;
  }

  60% {
    transform: translate(var(--x), 300px) rotate(var(--r));
    opacity: 1;
  }

  80% {
    transform: translate(var(--x), 260px) rotate(calc(var(--r) * 0.7));
  }

  100% {
    transform: translate(var(--x), 400px) rotate(calc(var(--r) * 1.2));
    opacity: 0;
  }
}

.fall {
  animation: fallReal 1.6s cubic-bezier(.2,.8,.2,1) forwards;
}

/* ===== MENU HAMBURGUESA ===== */

#nav-container {
  position: fixed;
  top: 60px;
  right: 60px;
  z-index: 99999; /* MÁS alto aún */
}

/* BOTÓN */
#nav-toggle {
  width: 32px;
  height: 32px;
  cursor: pointer;
  /*position: relative;*/
  position: fixed;
  top: 60px;
  right: 60px;
  z-index: 10002; /* MÁS que el overlay y el menú */
  transform: scale(1.5);
}

#nav-toggle span {
  background-color: black;
  width: 100%;
  height: 4px;
  border-radius: 2px;
  position: absolute;
  left: 0;
  transition: .5s ease-in-out; /*  transition: .5s ease-in-out; JLF */
}

#nav-toggle.open span {
  background-color: white;
  cursor: pointer;
}

#nav-toggle span:nth-child(1) { top: 6px; }
#nav-toggle span:nth-child(2) { top: 14px; }
#nav-toggle span:nth-child(3) { top: 22px; }

/* ANIMACIÓN A X */
#nav-toggle.open span:nth-child(1) {
  transform: rotate(45deg);
  top: 10px;
}

#nav-toggle.open span:nth-child(2) {
  opacity: 0;
}

#nav-toggle.open span:nth-child(3) {
  transform: rotate(-45deg);
  top: 10px;
}

/* CÍRCULO */
#nav-overlay {
  position: fixed;
  top: 50%;
  left: 50%;
  background: black;
  border-radius: 50%;
  transform: scale(0);
  transition: 1.5s ease; /*  transition: 0.8s ease; JLF*/
  z-index: 1000;
}

#nav-overlay.open {
  transform: scale(1);
}

/* MENÚ */
#nav-fullscreen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;

  display: flex;
  align-items: center;
  justify-content: center;

  visibility: hidden;
  opacity: 0;
  transition: 1.5s; /*  transition: 0.3s; jlf*/
  z-index: 1001;
}

#nav-fullscreen.open {
  visibility: visible;
  opacity: 1;
}

#nav-fullscreen ul {
  list-style: none;
  text-align: center;
}

#nav-fullscreen a {
  color: white;
  font-size: 48px;
  text-decoration: none;
}



/*#nav-fullscreen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: black;

  justify-content: center;
  align-items: center;

  z-index: 1001;
}*/

.center-image,
.main-img,
.stretch-img {
  pointer-events: none;
}

/*#nav-toggle span {
  background-color: black;
  width: 100%;
  height: 4px;
  border-radius: 2px;
  position: absolute;
  left: 0;
  transition: all 0.4s ease-in-out; 
}*/

#nav-toggle.open span:nth-child(1) {
  transform: rotate(45deg);
  top: 10px;
}

#nav-toggle.open span:nth-child(2) {
  opacity: 0;
}

#nav-toggle.open span:nth-child(3) {
  transform: rotate(-45deg);
  top: 10px;
}




/*#nav-fullscreen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;

  display: flex;
  align-items: center;
  justify-content: center;

  opacity: 0;
  visibility: hidden;

  transition: opacity 0.4s ease, visibility 0.4s;

  z-index: 1001;
}*/