html {
    scroll-behavior: smooth;
}

/* ==========================================
   EFECTO MÁQUINA DE ESCRIBIR (CSS)
   ========================================== */
.cursor-blink {
    border-right: 4px solid var(--texto-principal); /* Crea la barrita vertical */
    margin-left: 5px;
    animation: parpadeo 0.8s step-end infinite; /* La hace titilar por siempre */
}

@keyframes parpadeo {
    from, to { border-color: transparent; }
    50% { border-color: var(--texto-principal); }
}

/* ==========================================
   ANIMACIONES AL HACER SCROLL (CSS)
   ========================================== */

/* Estado inicial (Ocultos) */
.oculto-izq {
    opacity: 0;
    transform: translateX(-100px);
    transition: transform 1s cubic-bezier(0.25, 1, 0.5, 1), opacity 1s ease;
}

.oculto-der {
    opacity: 0;
    transform: translateX(100px);
    transition: transform 1s cubic-bezier(0.25, 1, 0.5, 1), opacity 1s ease;
}

.oculto-bajar {
    opacity: 0;
    transform: translateY(50px);
    transition: transform 1s cubic-bezier(0.25, 1, 0.5, 1), opacity 1s ease;
}

/* Estado final (Cuando se muestran al hacer scroll en cualquier dirección) */
.mostrar {
    opacity: 1;
    transform: translate(0, 0);
}

/* ==========================================
   ANIMACIÓN DE ENTRADA SUAVE (VERTICAL)
   ========================================== */
@keyframes subirSuave {
    0% {
        opacity: 0;
        transform: translateY(40px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}