/* ======================================================= */
/* 1. CLASE BASE: ESTILOS Y RESET PARA TODOS LOS DISPOSITIVOS */
/* ======================================================= */
.section-title.typing-clip {
    /* Estilos de color y fuente (se aplican siempre) */
    font-family: monospace; 
    font-size: 3em; 
    color: #333777; 
    display: inline-block;
    
    /* 🔴 VALORES DE MÓVIL (Por defecto, el texto es visible y responsivo) */
    width: 100%;           /* Ocupa todo el ancho */
    overflow: visible;     /* Permite ver el texto */
    white-space: normal;   /* Permite el salto de línea normal */
    border-right: none;    /* Oculta el cursor neón en móviles */
    
    /* La propiedad 'animation' debe estar AUSENTE aquí */
}

/* Opcional: Ajustar el tamaño para móviles para que quepa bien */
@media (max-width: 767px) {
    .section-title.typing-clip {
        font-size: 3.0em; /* Reducir el tamaño de la letra */
    }
}

/* ======================================================= */
/* 2. MEDIA QUERY: SÓLO ESCRITORIO (Activa el efecto typing) */
/* ======================================================= */
@media (min-width: 768px) {
    
    /* 2A. Sobrescribe los estilos de móviles para iniciar la animación */
    .section-title.typing-clip {
        width: 0;               /* Oculta el texto (Punto de inicio) */
        overflow: hidden;       /* Recorta el texto */
        white-space: nowrap;    /* Impide saltos de línea */
        border-right: .15em solid #25D366; /* Muestra el cursor */
        font-size: 3em; /* Restaura el tamaño grande para escritorio */

        /* 2B. Aplica la animación (solo en escritorio) */
        animation: 
            typing 5s steps(38, end) infinite,
            blink-caret .75s step-end infinite;
    }
}


/* ======================================================= */
/* 3. KEYFRAMES: Definición del Bucle (Se definen una vez) */
/* ======================================================= */
@keyframes typing { 
    0% { width: 0; } 
    60% { width: 100%; }
    90% { width: 100%; }
    100% { width: 0; } 
}

@keyframes blink-caret { 
    from, to { border-color: transparent } 
    50% { border-color: #25D366; } 
}