/* styles.css - Estilos personalizados para complementar Tailwind */

/* 1. Configuraciones base */
html {
    scroll-behavior: smooth;
}

body {
    -webkit-font-smoothing: antialiased;
}

/* 2. Scrollbar en tonos cálidos (rosado/teal) */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #fff1f2; /* rose-50 */
}

::-webkit-scrollbar-thumb {
    background: #fb7185; /* rose-400 */
    border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
    background: #f43f5e; /* rose-500 */
}

/* 3. Animación de entrada (fade-in-up) */
.fade-in-up {
    animation: fadeInUp 1s ease-out forwards;
}

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

/* 4. Tarjetas con efecto cálido (card-warm) */
.card-warm {
    background: white;
    border: 1px solid #ffe4e6; /* rose-100 */
    transition: all 0.3s ease;
}

.card-warm:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px -10px rgba(251, 113, 133, 0.2);
    border-color: #fb7185; /* rose-400 */
}

/* 5. Ajustes adicionales para tipografía y espaciado */
.section-title {
    position: relative;
    display: inline-block;
}

.section-title::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 3px;
    background: #fb7185;
    border-radius: 2px;
}

/* 6. Efecto de fondo sutil para secciones alternas */
.bg-warm-pattern {
    background-image: radial-gradient(circle at 10% 30%, rgba(251, 113, 133, 0.03) 0%, transparent 30%);
}

/* 7. Estilo para los enlaces del footer y hover */
footer a {
    transition: color 0.2s ease;
}

/* 8. Mejora en la imagen de perfil (efecto de luz) */
nav + section img {
    transition: transform 0.5s ease;
}

nav + section img:hover {
    transform: scale(1.02);
}

/* 9. Pequeño detalle para las tarjetas de servicios */
#servicios .card-warm i {
    transition: transform 0.2s ease;
}

#servicios .card-warm:hover i {
    transform: scale(1.1);
}

/* 10. Responsive: ajustes para móvil en la navegación (si se despliega) */
@media (max-width: 768px) {
    .md\\:hidden + div {
        /* Espacio reservado para futuro menú desplegable */
    }
}

/* ===== NUEVOS ESTILOS AGREGADOS ===== */

/* 11. Partículas animadas del fondo - VERSIÓN MEJORADA */
.particle {
    position: absolute;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(251, 113, 133, 0.2), rgba(244, 63, 94, 0.05));
    filter: blur(60px);
    will-change: transform; /* Optimización para animaciones */
    animation-timing-function: cubic-bezier(0.45, 0.05, 0.55, 0.95); /* Curva suave personalizada */
}

/* Cada partícula tiene su propia órbita única */
.particle-1 {
    width: 500px;
    height: 500px;
    top: -150px;
    right: -100px;
    animation: floatOrbit1 45s infinite alternate ease-in-out;
}

.particle-2 {
    width: 400px;
    height: 400px;
    bottom: -100px;
    left: -100px;
    background: linear-gradient(135deg, rgba(45, 212, 191, 0.15), rgba(20, 184, 166, 0.05));
    animation: floatOrbit2 50s infinite alternate ease-in-out;
}

.particle-3 {
    width: 450px;
    height: 450px;
    top: 30%;
    left: 10%;
    background: linear-gradient(135deg, rgba(251, 113, 133, 0.15), rgba(244, 63, 94, 0.03));
    animation: floatOrbit3 55s infinite alternate ease-in-out;
}

.particle-4 {
    width: 350px;
    height: 350px;
    bottom: 20%;
    right: 5%;
    background: linear-gradient(135deg, rgba(45, 212, 191, 0.1), rgba(20, 184, 166, 0.03));
    animation: floatOrbit4 42s infinite alternate ease-in-out;
}

.particle-5 {
    width: 600px;
    height: 600px;
    top: 50%;
    right: -200px;
    background: linear-gradient(135deg, rgba(251, 113, 133, 0.1), rgba(244, 63, 94, 0.02));
    animation: floatOrbit5 48s infinite alternate ease-in-out;
}

/* Órbitas únicas para cada partícula - trayectorias elípticas */
@keyframes floatOrbit1 {
    0% {
        transform: translate(0, 0) scale(1) rotate(0deg);
    }
    25% {
        transform: translate(120px, 60px) scale(1.15) rotate(5deg);
    }
    50% {
        transform: translate(40px, -90px) scale(0.95) rotate(-5deg);
    }
    75% {
        transform: translate(-80px, 50px) scale(1.1) rotate(8deg);
    }
    100% {
        transform: translate(-120px, -40px) scale(0.9) rotate(-8deg);
    }
}

@keyframes floatOrbit2 {
    0% {
        transform: translate(0, 0) scale(1) rotate(0deg);
    }
    30% {
        transform: translate(-100px, 80px) scale(1.1) rotate(-4deg);
    }
    60% {
        transform: translate(-150px, -50px) scale(0.9) rotate(6deg);
    }
    100% {
        transform: translate(-50px, -120px) scale(1.05) rotate(-3deg);
    }
}

@keyframes floatOrbit3 {
    0% {
        transform: translate(0, 0) scale(1) rotate(0deg);
    }
    20% {
        transform: translate(70px, -110px) scale(1.2) rotate(7deg);
    }
    45% {
        transform: translate(140px, 30px) scale(0.85) rotate(-5deg);
    }
    70% {
        transform: translate(30px, 140px) scale(1.1) rotate(4deg);
    }
    100% {
        transform: translate(-60px, 60px) scale(0.95) rotate(-7deg);
    }
}

@keyframes floatOrbit4 {
    0% {
        transform: translate(0, 0) scale(1) rotate(0deg);
    }
    35% {
        transform: translate(90px, 100px) scale(1.05) rotate(-3deg);
    }
    65% {
        transform: translate(-110px, 70px) scale(1.15) rotate(8deg);
    }
    100% {
        transform: translate(-40px, -80px) scale(0.9) rotate(-5deg);
    }
}

@keyframes floatOrbit5 {
    0% {
        transform: translate(0, 0) scale(1) rotate(0deg);
    }
    22% {
        transform: translate(-120px, -80px) scale(0.9) rotate(-6deg);
    }
    48% {
        transform: translate(80px, -130px) scale(1.2) rotate(9deg);
    }
    76% {
        transform: translate(130px, 50px) scale(1.05) rotate(-4deg);
    }
    100% {
        transform: translate(40px, 110px) scale(0.95) rotate(7deg);
    }
}

/* 12. Efecto de brillo sutil para títulos */
h1, h2, h3 {
    text-shadow: 0 2px 10px rgba(251, 113, 133, 0.1);
}

/* 13. Versión simplificada para móviles */
@media (max-width: 768px) {
    .particle {
        filter: blur(40px);
    }
    
    .particle-1, .particle-5 {
        width: 300px;
        height: 300px;
    }
    
    .particle-2, .particle-3, .particle-4 {
        width: 250px;
        height: 250px;
    }
    
    /* Animaciones más simples para móvil */
    .particle-1, .particle-2, .particle-3, .particle-4, .particle-5 {
        animation: floatSimple 60s infinite alternate ease-in-out;
    }
}

@keyframes floatSimple {
    0% {
        transform: translate(0, 0) scale(1);
    }
    33% {
        transform: translate(50px, -30px) scale(1.1);
    }
    66% {
        transform: translate(-30px, 40px) scale(0.9);
    }
    100% {
        transform: translate(0, 0) scale(1);
    }
}