/* ============================================ */
/* ANIMACIONES — Keyframes y efectos             */
/* ============================================ */

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes fadeInUp { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeInDown { from { opacity: 0; transform: translateY(-40px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeInLeft { from { opacity: 0; transform: translateX(-40px); } to { opacity: 1; transform: translateX(0); } }
@keyframes fadeInRight { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: translateX(0); } }
@keyframes scaleIn { from { opacity: 0; transform: scale(0.8); } to { opacity: 1; transform: scale(1); } }
@keyframes flotar { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes pulso { 0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(200,164,92,0.4); } 50% { transform: scale(1.05); box-shadow: 0 0 0 15px rgba(200,164,92,0); } }
@keyframes brillar { 0% { background-position: -200% center; } 100% { background-position: 200% center; } }
@keyframes girar { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes deslizar { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }
@keyframes gradienteAnimado { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
@keyframes parpadear { 0%,50% { opacity: 1; } 51%,100% { opacity: 0; } }
@keyframes rebote { 0%,20%,53%,100% { transform: translateY(0); } 40% { transform: translateY(-20px); } 70% { transform: translateY(-10px); } }

/* -- Clases de animación en scroll -- */
.animar-al-scroll { opacity: 0; transform: translateY(30px); transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.23,1,0.32,1); }
.animar-al-scroll.visible { opacity: 1; transform: translateY(0); }
.animar-al-scroll.desde-izquierda { transform: translateX(-40px); }
.animar-al-scroll.desde-izquierda.visible { transform: translateX(0); }
.animar-al-scroll.desde-derecha { transform: translateX(40px); }
.animar-al-scroll.desde-derecha.visible { transform: translateX(0); }
.animar-al-scroll.escalar { transform: scale(0.8); }
.animar-al-scroll.escalar.visible { transform: scale(1); }

/* -- Delays -- */
.delay-1 { transition-delay: 0.1s; } .delay-2 { transition-delay: 0.2s; } .delay-3 { transition-delay: 0.3s; }
.delay-4 { transition-delay: 0.4s; } .delay-5 { transition-delay: 0.5s; } .delay-6 { transition-delay: 0.6s; }

/* -- Efecto 3D -- */
.perspectiva-3d { perspective: 1000px; }
.efecto-3d { transition: transform var(--transicion-media); transform-style: preserve-3d; }
.efecto-3d:hover { transform: rotateX(5deg) rotateY(5deg) translateZ(10px); }

/* -- Efecto brillo -- */
.efecto-brillo { position: relative; overflow: hidden; }
.efecto-brillo::after { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: linear-gradient(45deg, transparent 40%, rgba(200,164,92,0.08) 45%, rgba(200,164,92,0.15) 50%, rgba(200,164,92,0.08) 55%, transparent 60%); transform: rotate(45deg); transition: all 0.6s; opacity: 0; }
.efecto-brillo:hover::after { animation: deslizar 0.8s ease forwards; opacity: 1; }

/* -- Efecto glow -- */
.efecto-glow { transition: box-shadow var(--transicion-media); }
.efecto-glow:hover { box-shadow: 0 0 20px rgba(200,164,92,0.15), 0 0 40px rgba(200,164,92,0.1), 0 0 60px rgba(200,164,92,0.05); }

/* -- Contador y typewriter -- */
.contador { font-family: var(--fuente-titulo); font-size: 3rem; font-weight: 800; background: var(--gradiente-dorado); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }