/* ===================================
    Configuration Styles - Global
====================================== */

/* CSS Variables for consistent theming */
:root {
    --primary-color: #6f6f6f;
    --secondary-color: #232323;
    --accent-color: #AC877F;
    --light-gray: #ededed;
    --medium-gray: #939393;
    --dark-gray: #6f6f6f;
    --white: #ffffff;
    --black: #000000;
    --bg-color: #FAF2E5;
    --green-light-color: rgba(220, 218, 174, 0.25); /* #DCDAAE40 */
    
    /* Typography */
    --font-primary: 'Open Sans', sans-serif;
    --font-secondary: 'Trirong', serif;
    --font-accent: 'Public Sans', sans-serif;
    --font-variable: 'Switzer', sans-serif;
    
    /* Spacing */
    --spacing-xs: 8px;
    --spacing-sm: 16px;
    --spacing-md: 24px;
    --spacing-lg: 32px;
    --spacing-xl: 48px;
    --spacing-xxl: 64px;
    
    /* Border radius */
    --border-radius-sm: 4px;
    --border-radius-md: 8px;
    --border-radius-lg: 16px;
    --border-radius-xl: 24px;
    --border-radius-round: 50%;
    
    /* Shadows */
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.15);
    --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.2);
    
    /* Custom containers */
    --container-page-padding: 100px;
    
    /* Transitions */
    --transition-fast: 0.2s ease;
    --transition-normal: 0.3s ease;
    --transition-slow: 0.5s ease;
}

.container-custom {
    padding-left: 100px;
    padding-right: 100px;
    width: 100%;
}

/* Responsive para container-custom */
@media (max-width: 768px) {
    .container-custom {
        padding-left: 50px;
        padding-right: 50px;
    }

    .services-button-container {
        margin-top: 50px;
    }
}

.mt-100 {
    margin-top: 100px;
}

/* ===================================
    Global Button Hover Effects
====================================== */

/* Efecto hover global: el botón se mueve HACIA LA IZQUIERDA y HACIA ABAJO para tapar su ::after */
.services-button:hover,
.solution-button:hover,
.waiting-list-button:hover,
.contact-banner-button:hover,
.primary-btn:hover,
.service-expand-btn:hover,
.back-catalog-btn:hover,
.error-btn:hover,
.phone-link:hover,
.email-link:hover,
.social-link:hover,
.newsletter-submit-btn:hover,
.newsletter-button:hover,
.btn:hover,
.button:hover,
.cta-button:hover,
.submit-btn:hover,
.form-submit:hover,
.modal-btn:hover {
    transform: translate(-2px, 2px) !important;
}

/* El ::after se mueve en dirección opuesta para mantener su posición visual fija */
.services-button:hover::after,
.solution-button:hover::after,
.waiting-list-button:hover::after,
.contact-banner-button:hover::after,
.primary-btn:hover::after,
.service-expand-btn:hover::after,
.back-catalog-btn:hover::after,
.error-btn:hover::after,
.newsletter-submit-btn:hover::after,
.newsletter-button:hover::after,
.btn:hover::after,
.button:hover::after,
.cta-button:hover::after,
.submit-btn:hover::after,
.form-submit:hover::after,
.modal-btn:hover::after {
    transform: translate(2px, -2px) !important;
}