/* Efecto de cursor parpadeante al escribir */
.typing-cursor::after {
    content: '|';
    animation: blink 1s step-start infinite;
    color: #2563EB;
    /* Color del cursor (brand-azure) */
    margin-left: 2px;
}
html, body {
    overflow-x: hidden;
    width: 100%;
    position: relative;
}
@keyframes blink {
    50% {
        opacity: 0;
    }
}

body {
    background-color: #F8FAFC;
}

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

.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s cubic-bezier(0.5, 0, 0, 1);
}

.reveal.active {
    opacity: 1;
    transform: translateY(0);
}

.delay-100 {
    transition-delay: 100ms;
}

.delay-200 {
    transition-delay: 200ms;
}

.delay-300 {
    transition-delay: 300ms;
}

/* Efecto Hover Certificados */
/* Efecto Hover Certificados Mejorado */
.cert-hover {
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    /* Efecto rebote suave */
    transform-origin: bottom center;
    position: relative;
    z-index: 10;
    background-color: rgba(255, 255, 255, 0.05);
    /* Fondo sutil en reposo */
}

.cert-hover:hover {
    transform: scale(1.8) translateY(-15px);
    /* Zoom controlado */
    z-index: 100;
    background-color: white;
    /* Fondo blanco sólido al hacer hover */
    border-radius: 12px;
    box-shadow: 0 20px 40px -5px rgba(0, 0, 0, 0.3);
    /* Sombra elegante */
    padding: 10px;
    /* Un poco más de aire */
    border: 1px solid rgba(0, 0, 0, 0.1);
}

.animate-blob {
    animation: blob 7s infinite;
}

.animation-delay-2000 {
    animation-delay: 2s;
}

.animation-delay-4000 {
    animation-delay: 4s;
}

.bg-grid-pattern {
    background-image: linear-gradient(to right, rgba(255, 255, 255, 0.05) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
    background-size: 40px 40px;
}

/* Animación Reveal */
.reveal {
    position: relative;
    transform: translateY(50px); /* Empieza más abajo */
    opacity: 0; /* Empieza invisible */
    transition: all 1s ease; /* Transición suave */
}

.reveal.active {
    transform: translateY(0); /* Sube a su sitio */
    opacity: 1; /* Se vuelve visible */
}