/* ==========================================================================
   GLOBAL DESIGN ENHANCEMENTS - FUNDACION FORENSIS
   ========================================================================== */

/* 1. TYPOGRAPHY & SPACING HIERARCHY
   ========================================================================== */
h1, h2, h3, 
.elementor-heading-title {
    letter-spacing: -0.02em;
    margin-bottom: 0.5em;
}

p, 
.elementor-text-editor {
    line-height: 1.65;
}

/* 2. MODERN BUTTONS (Hover & Active States)
   ========================================================================== */
.elementor-button,
.elementor-widget-button .elementor-button {
    transition: all 0.3s ease !important;
    box-shadow: 0 4px 6px rgba(69, 106, 177, 0.1) !important;
    transform: translateY(0);
    position: relative;
}

.elementor-button:hover,
.elementor-widget-button .elementor-button:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 15px rgba(69, 106, 177, 0.25) !important;
    filter: brightness(1.05);
}

.elementor-button:active,
.elementor-widget-button .elementor-button:active {
    transform: translateY(1px) !important;
    box-shadow: 0 2px 4px rgba(69, 106, 177, 0.1) !important;
}

/* 3. CARDS & SECTIONS HOVER EFFECTS
   ========================================================================== */
/* Apply modern smooth lift to typical card widgets */
.elementor-widget-image-box .elementor-widget-container, 
.elementor-widget-icon-box .elementor-widget-container, 
.elementor-widget-call-to-action .elementor-widget-container,
.elementor-widget-testimonial .elementor-widget-container {
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
    border-radius: 8px;
    padding: 10px; /* slight padding to contain shadows gracefully if none exists */
}

.elementor-widget-image-box:hover .elementor-widget-container, 
.elementor-widget-icon-box:hover .elementor-widget-container, 
.elementor-widget-call-to-action:hover .elementor-widget-container,
.elementor-widget-testimonial:hover .elementor-widget-container {
    transform: translateY(-5px) !important;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08) !important;
    background-color: #ffffff; /* ensure background pops on hover */
}
