@charset "utf-8";

.titulo-marmol-verde {
  position: relative;
  background-image:
    url('https://www.transparenttextures.com/patterns/marble.png'),
    linear-gradient(135deg, #1a3d22, #2e7d32, #43a047, #2e7d32, #1a3d22);
  background-size: cover, 250% 250%;
  background-blend-mode: overlay;
  color: #f5fff5;
  padding: 18px 30px;
  border-radius: 10px;
  text-align: center;
  font-size: 2rem;
  font-family: 'Georgia', serif;
  letter-spacing: 1.5px;
  box-shadow:
    inset 1px 1px 0 #3b6d4b,
    inset -1px -1px 0 #0f2e1c,
    4px 4px 12px rgba(0,0,0,0.5);
  border: 1px solid rgba(0,0,0,0.4);
  overflow: hidden;
  animation: movimientoMarmol 14s ease-in-out infinite alternate;
}

/* --- SÍMBOLOS CENTRADOS --- */
.titulo-marmol-verde::before,
.titulo-marmol-verde::after,
.titulo-marmol-verde span::before,
.titulo-marmol-verde span::after {
  position: absolute;
  top: 50%;
  transform: translateY(-50%); /* centra verticalmente */
  font-family: 'Georgia', serif;
  font-weight: 700;
  font-size: 2.5rem;
  color: #ffffff;
  text-shadow:
    0 0 8px rgba(255,255,255,0.9),
    0 0 18px rgba(180,255,200,1),
    0 0 28px rgba(100,255,150,0.9),
    2px 2px 6px rgba(0,0,0,0.5);
  animation: pulsoVerde 6s ease-in-out infinite alternate;
  pointer-events: none;
}

/* Posiciones ajustadas: centradas visualmente respecto del texto */
.titulo-marmol-verde::before { content: "α"; left: 6%; }
.titulo-marmol-verde::after { content: "Φ"; left: 16%; }
.titulo-marmol-verde span::before { content: "Ψ"; right: 16%; }
.titulo-marmol-verde span::after { content: "Ω"; right: 6%; }

/* --- animaciones --- */
@keyframes movimientoMarmol {
  0% { background-position: center, 0% 50%; }
  50% { background-position: center, 100% 50%; }
  100% { background-position: center, 0% 50%; }
}

@keyframes pulsoVerde {
  0% {
    text-shadow:
      0 0 6px rgba(255,255,255,0.8),
      0 0 10px rgba(180,255,200,0.9),
      0 0 20px rgba(100,255,150,0.7);
    transform: translateY(-50%) scale(1);
  }
  50% {
    text-shadow:
      0 0 12px rgba(255,255,255,1),
      0 0 24px rgba(180,255,200,1),
      0 0 48px rgba(100,255,150,0.9);
    transform: translateY(-50%) scale(1.05);
  }
  100% {
    text-shadow:
      0 0 6px rgba(255,255,255,0.8),
      0 0 10px rgba(180,255,200,0.9),
      0 0 20px rgba(100,255,150,0.7);
    transform: translateY(-50%) scale(1);
  }
}