/* Google Fonts para las fuentes personalizadas */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700;800&family=Roboto:wght@300;400;500;700&family=Open+Sans:wght@300;400;600;700&family=Poppins:wght@300;400;500;600;700&family=Oswald:wght@300;400;500;600;700&family=Playfair+Display:wght@400;500;600;700&display=swap');

/* Estilos personalizados para el mensaje de bienvenida */
.mensaje-bienvenida,
.hero-title,
.main-title {
    font-family: Arial, sans-serif !important;
    font-weight: 600 !important;
    font-size: 1.8rem !important;
    line-height: 1.4 !important;
    text-align: center !important;
    opacity: 1 !important;
    transform: scale(1) !important;
    letter-spacing: normal !important;
    word-spacing: normal !important;
    display: block !important;
    color: #FFD700 !important;
    text-shadow: none !important;
        animation:  1.5s ease-out !important;
}

/* Estilos para el título principal */
.titulo-principal,
.subtitle,
.hero-subtitle {
    font-family: Arial, sans-serif !important;
    font-weight: 600 !important;
    font-size: 1.8rem !important;
    line-height: 1.4 !important;
    text-align: center !important;
    opacity: 1 !important;
    transform: scale(1) !important;
    letter-spacing: normal !important;
    word-spacing: normal !important;
    display: block !important;
    color: #FFD700 !important;
    text-shadow: none !important;
        animation:  1.8s ease-out 0.3s both !important;
}

/* Estilos para la descripción principal */
.descripcion-principal,
.hero-description,
.main-description {
    font-family: Arial, sans-serif !important;
    font-weight: 600 !important;
    font-size: 1.8rem !important;
    line-height: 1.4 !important;
    text-align: center !important;
    opacity: 1 !important;
    transform: scale(1) !important;
    letter-spacing: normal !important;
    word-spacing: normal !important;
    display: block !important;
    color: #FFD700 !important;
    text-shadow: none !important;
        animation:  2s ease-out 0.6s both !important;
}

/* Estilos para el título de creaciones */
.titulo-creaciones,
.projects-title,
.creaciones-title {
    font-family: Arial, sans-serif !important;
    font-weight: 600 !important;
    font-size: 1.8rem !important;
    line-height: 1.4 !important;
    text-align: center !important;
    opacity: 1 !important;
    transform: scale(1) !important;
    letter-spacing: normal !important;
    word-spacing: normal !important;
    display: block !important;
    color: #FFD700 !important;
    text-shadow: none !important;
        animation:  1.5s ease-out !important;
}

/* Estilos para tecnologías de vanguardia */
.titulo-tecnologias,
.tech-title,
.tecnologias-title {
    font-family: Arial, sans-serif !important;
    font-weight: 600 !important;
    font-size: 1.8rem !important;
    line-height: 1.4 !important;
    text-align: center !important;
    opacity: 1 !important;
    transform: scale(1) !important;
    letter-spacing: normal !important;
    word-spacing: normal !important;
    display: block !important;
    color: #FFD700 !important;
    text-shadow: none !important;
        animation:  1.8s ease-out 0.3s both !important;
}

/* Animaciones CSS */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes fadeInDown {
    from { opacity: 0; transform: translateY(-30px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInLeft {
    from { opacity: 0; transform: translateX(-30px); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes fadeInRight {
    from { opacity: 0; transform: translateX(30px); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes slideInLeft {
    from { opacity: 0; transform: translateX(-100px); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes slideInRight {
    from { opacity: 0; transform: translateX(100px); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes bounceIn {
    0% { opacity: 0; transform: scale(0.3); }
    50% { opacity: 1; transform: scale(1.05); }
    70% { transform: scale(0.9); }
    100% { opacity: 1; transform: scale(1); }
}

@keyframes zoomIn {
    from { opacity: 0; transform: scale(0.5); }
    to { opacity: 1; transform: scale(1); }
}

@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

@keyframes typewriter {
    from { width: 0; }
    to { width: 100%; }
}

/* ANIMACIÓN PARA DEGRADADO DIAGONAL - IGUAL QUE PRINCIPALES.PHP */
@keyframes degradadoTextoMovimientoDiagonal {
    0% { 
        background-position: 0% 50%; 
    }
    50% { 
        background-position: 100% 50%; 
    }
    100% { 
        background-position: 0% 50%; 
    }
}

/* Efectos adicionales para mejorar la apariencia */
.mensaje-bienvenida, .titulo-principal, .descripcion-principal, .titulo-creaciones, .titulo-tecnologias {
    transition: all 0.3s ease !important;
}

.mensaje-bienvenida:hover, .titulo-principal:hover, .titulo-creaciones:hover, .titulo-tecnologias:hover {
    transform: translateY(-2px) !important;
}

/* Responsividad */
@media (max-width: 768px) {
    .mensaje-bienvenida, .titulo-principal, .descripcion-principal, .titulo-creaciones, .titulo-tecnologias {
        animation-duration: 1s !important;
    }
}

/* Compatibilidad con diferentes estructuras HTML del index */
h1.hero-title, h1.main-title, .hero h1, .main h1 {
    font-family: Arial, sans-serif !important;
    font-weight: 600 !important;
    font-size: 1.8rem !important;
    line-height: 1.4 !important;
    text-align: center !important;
    opacity: 1 !important;
    transform: scale(1) !important;
    letter-spacing: normal !important;
    word-spacing: normal !important;
    display: block !important;
    color: #FFD700 !important;
    text-shadow: none !important;
    }

h2.subtitle, h2.hero-subtitle, .hero h2, .main h2 {
    font-family: Arial, sans-serif !important;
    font-weight: 600 !important;
    font-size: 1.8rem !important;
    line-height: 1.4 !important;
    text-align: center !important;
    opacity: 1 !important;
    transform: scale(1) !important;
    letter-spacing: normal !important;
    word-spacing: normal !important;
    display: block !important;
    color: #FFD700 !important;
    text-shadow: none !important;
    }

p.description, p.hero-description, .hero p, .main p {
    font-family: Arial, sans-serif !important;
    font-weight: 600 !important;
    font-size: 1.8rem !important;
    line-height: 1.4 !important;
    text-align: center !important;
    opacity: 1 !important;
    transform: scale(1) !important;
    letter-spacing: normal !important;
    word-spacing: normal !important;
    display: block !important;
    color: #FFD700 !important;
    text-shadow: none !important;
    }