/* ------------------------------------------------------
   TÍTULO BIENVENIDA
------------------------------------------------------ */
.bienvenido {
  font-family: 'Cinzel Decorative', 'Cormorant Garamond', serif;
  font-size: 2.8rem;
  font-weight: 500;
  letter-spacing: 0.5px;
  color: #f6e6b5;
  text-align: center;
  margin-top: -5px;
  margin-bottom: 10px;
  text-shadow:
    0 0 4px rgba(255,230,180,0.6),
    0 0 14px rgba(200,160,90,0.4),
    0 0 18px rgba(255,240,180,0.8);
  animation:
    brilloRespirante 8s ease-in-out infinite;
}

/* ------------------------------------------------------
   SÍMBOLO SAGRADO
------------------------------------------------------ */
.simbolo {
  font-size: 1.8rem;
  color: #f7deb0;
  opacity: 0;
  transform: scale(0.6);
  animation:
    aparecerSimbolo 1.8s ease-out forwards,
    latidoRespirante 8s ease-in-out infinite;
  animation-delay: 0s, 0.6s;
}

/* ------------------------------------------------------
   TEXTO PRINCIPAL
------------------------------------------------------ */
.texto {
  opacity: 0;
  transform: translateY(6px);
  animation: aparecerTexto 1s ease-out forwards;
  animation-delay: 1s;
}

/* ------------------------------------------------------
   ANIMACIONES DE APARICIÓN
------------------------------------------------------ */
@keyframes aparecerSimbolo {
  0% { opacity: 0; transform: scale(0.6); }
  60% { opacity: 1; transform: scale(1.2); }
  100% { opacity: 1; transform: scale(1); }
}

@keyframes aparecerTexto {
  0% { opacity: 0; transform: translateY(6px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* ------------------------------------------------------
   EFECTO RESPIRANTE DEL TEXTO
------------------------------------------------------ */
@keyframes brilloRespirante {
  0% {
    color: #f6e6b5;
    text-shadow: 0 0 6px rgba(255,240,180,0.6);
    filter: hue-rotate(0deg) brightness(1);
  }
  20% {
    color: #ffeabf;
    text-shadow: 0 0 14px rgba(255,250,200,0.8);
    filter: hue-rotate(10deg) brightness(1.05);
  }
  50% {
    color: #fff1c9;
    text-shadow: 0 0 22px rgba(255,255,210,1);
    filter: hue-rotate(20deg) brightness(1.1);
  }
  80% {
    color: #f5ddb0;
    text-shadow: 0 0 12px rgba(255,230,180,0.7);
    filter: hue-rotate(5deg) brightness(0.95);
  }
  100% {
    color: #f6e6b5;
    text-shadow: 0 0 6px rgba(255,240,180,0.6);
    filter: hue-rotate(0deg) brightness(1);
  }
}

/* ------------------------------------------------------
   EFECTO LATIDO DEL SÍMBOLO
------------------------------------------------------ */
@keyframes latidoRespirante {
  0%, 100% {
    transform: scale(1);
    filter: brightness(1) hue-rotate(0deg);
  }
  25% {
    transform: scale(1.03);
    filter: brightness(1.05) hue-rotate(8deg);
  }
  55% {
    transform: scale(1.06);
    filter: brightness(1.15) hue-rotate(15deg);
  }
  85% {
    transform: scale(0.99);
    filter: brightness(0.95) hue-rotate(-8deg);
  }
}

/* ------------------------------------------------------
   TÍTULO CYBERFRACTAL
------------------------------------------------------ */
.cyberfractal {
  width: 100%;
  font-family: 'Cinzel Decorative', 'Cormorant Garamond', serif;
  font-size: 4.4rem;
  font-weight: 400;
  text-align: left !important;

  padding-top: 08px;
  padding-left: 18px;
  margin: 0;

  color: #f6e6b5;
  text-shadow:
    0 0 4px rgba(255,230,180,0.55),
    0 0 12px rgba(200,160,90,0.45),
    0 0 16px rgba(255,240,180,0.75);

  opacity: 0;
  transform: translateY(6px);
  animation:
    aparecerCyber 1.2s ease-out forwards,
    brilloRespirante 8s ease-in-out infinite;
  animation-delay: 0.7s;
}

/* Asegurar alineación de contenedores */
.cyberfractal, 
.cyberfractal * {
  text-align: left !important;
}
#header, #headerbox, .cabecera, .top {
  text-align: left !important;
}

/* Aparición del título Cyberfractal */
@keyframes aparecerCyber {
  0% {
    opacity: 0;
    transform: translateY(8px) scale(0.98);
  }
  80% {
    opacity: 1;
    transform: translateY(0) scale(1.02);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}