/* Estilos para Free Shipping Alert */
.resaltar {
    font-weight: bold;
}

.happymami-free-shipping-alert {
    width: 100%;
    margin-bottom: 15px;
}

/* Clases de visibilidad Elementor para el elemento movido */
@media (min-width: 1025px) {
    .happymami-free-shipping-alert.elementor-hidden-desktop {
        display: none !important;
    }
}

@media (min-width: 768px) and (max-width: 1024px) {
    .happymami-free-shipping-alert.elementor-hidden-tablet {
        display: none !important;
    }
}

@media (max-width: 767px) {
    .happymami-free-shipping-alert.elementor-hidden-mobile {
        display: none !important;
    }
}

.contenedor_azul {
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #fff;
    border-radius: 10px;
    width: 100%;
    margin: 0 auto;
    padding: 10px;
    border: 1px solid #ccc;
    box-sizing: border-box;
}

.contenedorAzul_infoFreeShipping {
    display: flex;
    align-items: center;
    width: 100%;
    margin-bottom: 8px;
}

.icono_freeShipping {
    display: inline-block;
    vertical-align: middle;
    margin-right: 5px;
    flex-shrink: 0;
    overflow: hidden;
    width: 50px;
    position: relative;
}

.icono_freeShipping svg {
    width: 20px;
    height: auto;
    fill: #2A3F53;
    color: #2A3F53;
    vertical-align: middle;
}

.icono_freeShipping svg path {
    fill: currentColor;
}

.texto_freeShipping {
    color: #2A3F53;
    font-size: 12px;
    line-height: 1.4;
    margin: 0 !important;
    text-align: center;
    width: 100%;
}

.icono_freeShipping img {
    width: 20px;
    vertical-align: middle;
}

.contenedorAzul_progressBarFreeShipping {
    width: 100%;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.happymami-progress-bar-wrapper {
    flex: 1;
    height: 8px;
    background-color: #d0d5dd;
    border-radius: 4px;
    overflow: visible;
    position: relative;
}

.happymami-progress-bar {
    height: 100%;
    background: #ff4363;
    border-radius: 4px;
    transition: width 0.8s ease-out;
    position: relative;
}

.happymami-progress-circle {
    position: absolute;
    right: -7px;
    top: 50%;
    transform: translateY(-50%);
    width: 14px;
    height: 14px;
    background: #ff4363;
    border-radius: 50%;
}

.happymami-umbral {
    color: #ff4363;
    font-size: 12px;
    font-weight: bold;
    white-space: nowrap;
}

/* ========== ANIMACIONES ========== */

/* Animación heartbeat para la bolita */
@keyframes heartbeat {
    0%, 100% {
        transform: translateY(-50%) scale(1);
    }
    15% {
        transform: translateY(-50%) scale(1.3);
    }
    30% {
        transform: translateY(-50%) scale(1);
    }
    45% {
        transform: translateY(-50%) scale(1.25);
    }
    60% {
        transform: translateY(-50%) scale(1);
    }
}

.happymami-progress-circle.heartbeat {
    animation: heartbeat 1.2s ease-in-out;
}

/* Animación del camión: saltar, irse a la derecha y volver por la izquierda */
@keyframes truckJumpAndMove {
    0% {
        transform: translateX(0) translateY(0);
        opacity: 1;
    }
    /* Salto hacia arriba */
    10% {
        transform: translateX(0) translateY(-6px);
        opacity: 1;
    }
    /* Baja del salto */
    18% {
        transform: translateX(0) translateY(0);
        opacity: 1;
    }
    /* Segundo salto más pequeño */
    24% {
        transform: translateX(3px) translateY(-3px);
        opacity: 1;
    }
    /* Empieza a irse a la derecha */
    32% {
        transform: translateX(10px) translateY(0);
        opacity: 1;
    }
    /* Sigue yendo a la derecha */
    42% {
        transform: translateX(25px) translateY(0);
        opacity: 0.7;
    }
    /* Desaparece por la derecha */
    52% {
        transform: translateX(50px) translateY(0);
        opacity: 0;
    }
    /* Aparece por la izquierda (instantáneo, invisible) */
    53% {
        transform: translateX(-50px) translateY(0);
        opacity: 0;
    }
    /* Empieza a aparecer desde la izquierda */
    65% {
        transform: translateX(-25px) translateY(0);
        opacity: 0.5;
    }
    /* Sigue apareciendo */
    78% {
        transform: translateX(-10px) translateY(0);
        opacity: 0.8;
    }
    /* Vuelve a su posición original */
    90% {
        transform: translateX(-3px) translateY(0);
        opacity: 1;
    }
    100% {
        transform: translateX(0) translateY(0);
        opacity: 1;
    }
}

.icono_freeShipping.animate-truck svg {
    animation: truckJumpAndMove 2s ease-in-out;
}

/* ========== FIN ANIMACIONES ========== */

.upsellingtext {
    text-align: center;
    margin: 20px 0 10px 0;
    color: #2A3F53;
}