/* ===== ESTILOS COMUNES PARA TARJETAS ===== */
.service-card,
.project-card,
.skill-category,
.stat-item,
.price-card,
.tech-item,
.tech-item-slider,
.about-image-container,
.contact-btn,
.social-link {
    transform-style: preserve-3d;
    will-change: transform;
    transition: var(--transition-normal);
    border: 2px solid transparent;
    background: linear-gradient(var(--bg-card), var(--bg-card)) padding-box,
                var(--gradient) border-box;
    position: relative;
    overflow: hidden;
    box-shadow: 0 15px 30px var(--shadow-primary);
}

.service-card::before,
.project-card::before,
.skill-category::before,
.stat-item::before,
.price-card::before,
.tech-item::before,
.tech-item-slider::before,
.about-image-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, var(--overlay-primary), var(--overlay-secondary));
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 1;
    pointer-events: none;
}

.service-card:hover::before,
.project-card:hover::before,
.skill-category:hover::before,
.stat-item:hover::before,
.price-card:hover::before,
.tech-item:hover::before,
.tech-item-slider:hover::before,
.about-image-container:hover::before {
    opacity: 1;
}

.service-card:hover,
.project-card:hover,
.skill-category:hover,
.stat-item:hover,
.price-card:hover,
.tech-item:hover,
.tech-item-slider:hover,
.about-image-container:hover,
.contact-btn:hover,
.social-link:hover {
    border-color: transparent;
    box-shadow: 0 25px 45px var(--shadow-hover);
}

.price-card > * {
    position: relative;
    z-index: 2;
}