/* Estilo para fuentes y suavizado de scroll */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;700;900&display=swap');

/* scroll bars */

.custom-scrollbar::-webkit-scrollbar { width: 5px; }
.custom-scrollbar::-webkit-scrollbar-track { background: transparent; }
.custom-scrollbar::-webkit-scrollbar-thumb { background: #10b981; border-radius: 10px; }

/* fin de seccion */
html {
    scroll-behavior: smooth;
}

.hero-gradient{
background:
radial-gradient(circle at 20% 30%, rgba(16,185,129,0.2), transparent 40%),
radial-gradient(circle at 80% 70%, rgba(59,130,246,0.15), transparent 40%);
}

.glass{
background: rgba(255,255,255,0.03);
backdrop-filter: blur(20px);
border:1px solid rgba(255,255,255,0.08);
}

.btn-shiny{
position:relative;
overflow:hidden;
}

.btn-shiny::before{
content:"";
position:absolute;
left:-100%;
top:0;
width:100%;
height:100%;
background:linear-gradient(
90deg,
transparent,
rgba(255,255,255,.4),
transparent
);
transition:0.6s;
}

.btn-shiny:hover::before{
left:100%;
}


----------
body {
    font-family: 'Inter', sans-serif;
}

/* Efecto de Vidrio (Glassmorphism) */
.glass {
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
}

/* Animación de Gradiente para el Hero */
.hero-gradient {
    background: linear-gradient(-45deg, #020617, #064e3b, #020617, #0f172a);
    background-size: 400% 400%;
    animation: gradientMove 15s ease infinite;
}

@keyframes gradientMove {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* Botones con brillo sutil */
.btn-shiny {
    position: relative;
    overflow: hidden;
}

.btn-shiny::after {
    content: "";
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: rgba(255,255,255,0.1);
    transform: rotate(45deg);
    transition: 0.5s;
}

.btn-shiny:hover::after {
    left: 120%;
}
Carpeta /public/js/main.js
document.addEventListener('DOMContentLoaded', () => {
    const contactForm = document.querySelector('form');
    
    if (contactForm) {
        contactForm.addEventListener('submit', function() {
            const btn = this.querySelector('button');
            btn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Enviando...';
            btn.style.opacity = '0.7';
            btn.style.pointerEvents = 'none';
        });
    }

    // Efecto de aparición al hacer scroll (Reveal)
    const observerOptions = {
        threshold: 0.1
    };

    const observer = new IntersectionObserver((entries) => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                entry.target.classList.add('opacity-100', 'translate-y-0');
                entry.target.classList.remove('opacity-0', 'translate-y-10');
            }
        });
    }, observerOptions);

    document.querySelectorAll('.glass').forEach(el => {
        el.classList.add('transition', 'duration-700', 'opacity-0', 'translate-y-10');
        observer.observe(el);
    });
});