/**
 * MOTUS Global CSS
 * Base reusable para proyectos con Hello Elementor.
 */

:root {
    --motus-color-primary: #9f5f22;
    --motus-color-dark: #111111;
    --motus-color-text: #333333;
    --motus-color-light: #f5f5f5;
    --motus-color-white: #ffffff;

    --motus-container: 1200px;
    --motus-radius: 0px;
    --motus-transition: 220ms ease;
}

html {
    scroll-behavior: smooth;
}

body {
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

img {
    max-width: 100%;
    height: auto;
}

a {
    transition: color var(--motus-transition), opacity var(--motus-transition), background-color var(--motus-transition);
}

/* Utilidades */
.motus-container {
    width: min(100% - 40px, var(--motus-container));
    margin-inline: auto;
}

.motus-text-balance {
    text-wrap: balance;
}

.motus-hide-mobile {
    display: block;
}

.motus-hide-desktop {
    display: none;
}

@media (max-width: 767px) {
    .motus-hide-mobile {
        display: none !important;
    }

    .motus-hide-desktop {
        display: block !important;
    }
}

/* Formularios Elementor */
.elementor-field-group .elementor-field {
    box-shadow: none;
}

.elementor-button,
button,
input[type="submit"] {
    transition: transform var(--motus-transition), opacity var(--motus-transition), background-color var(--motus-transition);
}

.elementor-button:hover,
button:hover,
input[type="submit"]:hover {
    opacity: .92;
}