/* Animaciones para scroll */
.mobile-step-card {
    opacity: 0;
    transform: translateX(100px);
    transition: all 0.8s ease-out;
}

.mobile-step-card.animate-in {
    opacity: 1;
    transform: translateX(0);
}

/* Delay progresivo para cada card */
.mobile-step-card:nth-child(1) {
    transition-delay: 0.1s;
}

.mobile-step-card:nth-child(2) {
    transition-delay: 0.2s;
}

.mobile-step-card:nth-child(3) {
    transition-delay: 0.3s;
}

.mobile-step-card:nth-child(4) {
    transition-delay: 0.4s;
}

.mobile-step-card:nth-child(5) {
    transition-delay: 0.5s;
}

/* Animación más suave para el container */
.how-it-works-mobile-section {
    overflow-x: hidden;
}

/* Efecto hover manteniendo compatibilidad con estilos existentes */
.mobile-step-card:hover {
    transform: translateX(-5px) translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
}

/* Asegurar que las animaciones funcionen cuando las cards están animadas */
.mobile-step-card.animate-in:hover {
    transform: translateX(-5px) translateY(-5px);
}

/* Animación para el título de la sección */
.how-it-works-mobile-section .header-title,
.how-it-works-mobile-section .subtitle {
    opacity: 0;
    transform: translateY(-30px);
    transition: all 0.8s ease-out;
}

.how-it-works-mobile-section .header-title.animate-in,
.how-it-works-mobile-section .subtitle.animate-in {
    opacity: 1;
    transform: translateY(0);
}

.how-it-works-mobile-section .subtitle.animate-in {
    transition-delay: 0.2s;
}

/* ===== ANIMACIONES PARA PLANES ===== */

/* Estado inicial de las cards de planes */
.plan-card {
    opacity: 0;
    transform: translateY(50px) scale(0.95);
    transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Estado animado de las cards de planes */
.plan-card.animate-in {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* Delay progresivo para cada plan */
.plans-section .col-md-4:nth-child(1) .plan-card {
    transition-delay: 0.1s;
}

.plans-section .col-md-4:nth-child(2) .plan-card {
    transition-delay: 0.2s;
}

.plans-section .col-md-4:nth-child(3) .plan-card {
    transition-delay: 0.3s;
}

/* Animación para títulos de la sección planes */
.plans-section .header-title,
.plans-section .subtitle {
    opacity: 0;
    transform: translateY(-20px);
    transition: all 0.7s ease-out;
}

.plans-section .header-title.animate-in,
.plans-section .subtitle.animate-in {
    opacity: 1;
    transform: translateY(0);
}

.plans-section .subtitle.animate-in {
    transition-delay: 0.15s;
}

/* Mejorar el efecto hover para mantener la suavidad */
.plan-card.animate-in:hover {
    transform: translateY(-8px) scale(1.02);
    transition: all 0.3s ease;
}

/* Asegurar que el container no tenga overflow */
.plans-section {
    overflow-x: hidden;
}

/* ===== ANIMACIONES PARA "CÓMO FUNCIONA" DESKTOP ===== */

/* Título y subtítulo de la sección desktop */
.how-it-works-section .header-title,
.how-it-works-section .subtitle {
    opacity: 0;
    transform: translateY(-30px);
    transition: all 0.8s ease-out;
}

.how-it-works-section .header-title.animate-in,
.how-it-works-section .subtitle.animate-in {
    opacity: 1;
    transform: translateY(0);
}

.how-it-works-section .subtitle.animate-in {
    transition-delay: 0.2s;
}

/* Plato de comida - aparece con fade-in manteniendo el círculo blanco visible */
.food-plate {
    opacity: 0;
    transition: opacity 0.8s ease-out;
}

.food-plate.animate-in {
    opacity: 1;
}

/* Efecto de pulso sutil SOLO para la imagen del plato */
.food-plate.animate-in img {
    animation: subtle-pulse 3s ease-in-out infinite;
}

@keyframes subtle-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.01); }
}

/* Pasos - aparecen con fade-in radial */
.how-it-works-section .step {
    opacity: 0;
    transform: scale(0.9);
    transition: all 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.how-it-works-section .step.animate-in {
    opacity: 1;
    transform: scale(1);
}

/* Delays progresivos para cada paso siguiendo el orden numérico */
.how-it-works-section .step-1 {
    transition-delay: 0.6s;
}

.how-it-works-section .step-2 {
    transition-delay: 0.8s;
}

.how-it-works-section .step-3 {
    transition-delay: 1.0s;
}

.how-it-works-section .step-4 {
    transition-delay: 1.2s;
}

.how-it-works-section .step-5 {
    transition-delay: 1.4s;
}

/* Efecto hover mejorado para los pasos */
.how-it-works-section .step.animate-in:hover {
    transform: scale(1.05);
    transition: all 0.3s ease;
}

.how-it-works-section .step.animate-in:hover .step-number {
    transform: scale(1.1);
    transition: all 0.3s ease;
}

/* Animación adicional para números de paso */
.how-it-works-section .step-number {
    transition: all 0.3s ease;
}

/* Asegurar que no haya overflow en la sección */
.how-it-works-section {
    overflow: visible;
}