/* ========================================================================== Elementor Premium Widgets CSS ========================================================================== */ .cw-el-btn-wrapper { display: flex; } .cw-el-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none; position: relative; overflow: hidden; cursor: pointer; box-sizing: border-box; -webkit-tap-highlight-color: transparent; transform: translate3d(0,0,0); transition: transform .28s cubic-bezier(.16,1,.3,1), box-shadow .28s ease, background-color .28s ease, border-color .28s ease, color .22s ease, opacity .22s ease; /* Defaults are intentionally polished but remain fully editable in Elementor. */ padding: 12px 26px; border-radius: 999px; text-transform: uppercase; } .cw-el-btn:focus-visible { outline: 2px solid color-mix(in srgb, currentColor 58%, transparent); outline-offset: 3px; } .cw-el-btn:active { transform: translate3d(0,1px,0) scale(.992); } .cw-el-btn .cw-el-btn-text { position: relative; z-index: 2; } .cw-el-btn-icon { display: inline-flex; align-items: center; justify-content: center; z-index: 2; position: relative; flex-shrink: 0; overflow: visible; transition: transform var(--cw-icon-transition, 360ms) cubic-bezier(.16,1,.3,1), opacity .22s ease; } .cw-el-btn-icon svg { display: block; flex-shrink: 0; transform-origin: 50% 50%; transition: width var(--cw-icon-transition, 360ms) cubic-bezier(.16,1,.3,1), height var(--cw-icon-transition, 360ms) cubic-bezier(.16,1,.3,1), transform var(--cw-icon-transition, 360ms) cubic-bezier(.16,1,.3,1), fill .24s ease, color .24s ease; stroke: none !important; } .cw-el-btn-icon i { transform-origin: 50% 50%; transition: font-size var(--cw-icon-transition, 360ms) cubic-bezier(.16,1,.3,1), transform var(--cw-icon-transition, 360ms) cubic-bezier(.16,1,.3,1), color .24s ease; } .elementor-widget-button .elementor-button-icon svg { stroke: none !important; } /* El desplazamiento (TranslateX) ahora se maneja dinámicamente vía Elementor UI */ /* Efecto: Hover Float */ .cw-effect-float:hover, .cw-effect-float:focus-visible { transform: translate3d(0,-2px,0); } /* Efecto: Hover Shadow */ .cw-effect-shadow:hover, .cw-effect-shadow:focus-visible { box-shadow: 0 10px 24px rgba(31,76,73,.14), 0 2px 8px rgba(31,76,73,.08); } /* Efecto: Shimmer Continuo */ .cw-effect-shine::after { content: ''; position: absolute; top: 0; left: -150%; width: 36%; height: 100%; background: linear-gradient(120deg, transparent 0%, rgba(255, 255, 255, .26) 50%, transparent 100%); transform: skewX(-25deg); z-index: 1; pointer-events: none; } .cw-effect-shine:hover::after, .cw-effect-shine:focus-visible::after { animation: cw-widget-shimmer .72s cubic-bezier(.16,1,.3,1) 1 both; } @keyframes cw-widget-shimmer { 0% { left: -60%; } 100% { left: 125%; } } /* ========================================================================== CW Button Widget — Icon overrides The base text_color selector targets .cw-el-btn svg which is too broad. We re-assert the icon_bg_color and icon_color here with higher specificity. ========================================================================== */ /* The icon wrapper needs to be a flex box that clips its contents */ .cw-el-btn .cw-el-btn-icon { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; /* background-color, width, height, border-radius applied via Elementor selectors */ } /* SVG inside the icon wrapper: inherit color from the wrapper */ .cw-el-btn .cw-el-btn-icon svg { display: block; flex-shrink: 0; /* fill and stroke via Elementor selectors: icon_color control */ } /* Font Awesome / icon fonts inside the wrapper */ .cw-el-btn .cw-el-btn-icon i { /* color via Elementor icon_color selector */ line-height: 1; } /* ========================================================================== CW Blurry Background Extension ========================================================================== */ .cw-has-blurry-bg-yes { position: relative; /* z-index: 0 omitted to avoid breaking Elementor's stacking unexpectedly, ::before with z-index: 0 is enough */ } .cw-has-blurry-bg-yes::before { content: ''; position: absolute; inset: 0; z-index: 0; /* Above container background, below contents (due to DOM order) */ pointer-events: none; /* Global settings */ filter: blur(var(--cw-global-blur, 80px)); opacity: var(--cw-global-opacity, 0.8); mix-blend-mode: var(--cw-global-blend, normal); transform: translateZ(0); /* Hardware acceleration */ /* Background gradients for shapes */ background-image: radial-gradient(circle at var(--shape1-x, 50%) var(--shape1-y, 50%), var(--shape1-color, transparent) 0%, transparent var(--shape1-size, 50%)), radial-gradient(circle at var(--shape2-x, 80%) var(--shape2-y, 20%), var(--shape2-color, transparent) 0%, transparent var(--shape2-size, 50%)), radial-gradient(circle at var(--shape3-x, 20%) var(--shape3-y, 80%), var(--shape3-color, transparent) 0%, transparent var(--shape3-size, 50%)), radial-gradient(circle at var(--shape4-x, 80%) var(--shape4-y, 80%), var(--shape4-color, transparent) 0%, transparent var(--shape4-size, 50%)); } /* ========================================================================== CW Inverted Curve Extension — Dynamic (v2) The clip-path polygon is generated at runtime by cw-inverted-curve.js based on CSS custom properties. Only base styles & defaults live here. Custom properties (set by Elementor responsive controls): --cw-curve-depth Vertical depth of the concave cut (px) --cw-curve-radius Corner arc radius (px) --cw-curve-position top | bottom | both ========================================================================== */ .cw-inverted-curve-yes { /* Defaults — overridden by Elementor selectors */ --cw-curve-depth: 84px; --cw-curve-radius: 80px; --cw-curve-position: top; position: relative; overflow: visible; } /* Default position (top) and explicit top class */ .cw-inverted-curve-yes, .cw-inverted-curve-yes.cw-curve-pos-top { clip-path: polygon(100% var(--cw-curve-depth), calc(100% - calc(var(--cw-curve-radius) * 0.228)) calc(var(--cw-curve-depth) * 1), calc(100% - calc(var(--cw-curve-radius) * 0.3375)) calc(var(--cw-curve-depth) * 0.9934), calc(100% - calc(var(--cw-curve-radius) * 0.4437)) calc(var(--cw-curve-depth) * 0.9742), calc(100% - calc(var(--cw-curve-radius) * 0.5455)) calc(var(--cw-curve-depth) * 0.9429), calc(100% - calc(var(--cw-curve-radius) * 0.6419)) calc(var(--cw-curve-depth) * 0.9003), calc(100% - calc(var(--cw-curve-radius) * 0.7319)) calc(var(--cw-curve-depth) * 0.847), calc(100% - calc(var(--cw-curve-radius) * 0.8146)) calc(var(--cw-curve-depth) * 0.7837), calc(100% - calc(var(--cw-curve-radius) * 0.889)) calc(var(--cw-curve-depth) * 0.7111), calc(100% - calc(var(--cw-curve-radius) * 0.954)) calc(var(--cw-curve-depth) * 0.6298), calc(100% - calc(var(--cw-curve-radius) * 1.0086)) calc(var(--cw-curve-depth) * 0.5405), calc(100% - calc(var(--cw-curve-radius) * 1.0519)) calc(var(--cw-curve-depth) * 0.4439), calc(100% - calc(var(--cw-curve-radius) * 1.0693)) calc(var(--cw-curve-depth) * 0.3972), calc(100% - calc(var(--cw-curve-radius) * 1.1003)) calc(var(--cw-curve-depth) * 0.3282), calc(100% - calc(var(--cw-curve-radius) * 1.1393)) calc(var(--cw-curve-depth) * 0.2644), calc(100% - calc(var(--cw-curve-radius) * 1.1857)) calc(var(--cw-curve-depth) * 0.2064), calc(100% - calc(var(--cw-curve-radius) * 1.2388)) calc(var(--cw-curve-depth) * 0.1545), calc(100% - calc(var(--cw-curve-radius) * 1.2979)) calc(var(--cw-curve-depth) * 0.1093), calc(100% - calc(var(--cw-curve-radius) * 1.3622)) calc(var(--cw-curve-depth) * 0.0712), calc(100% - calc(var(--cw-curve-radius) * 1.4311)) calc(var(--cw-curve-depth) * 0.0408), calc(100% - calc(var(--cw-curve-radius) * 1.5038)) calc(var(--cw-curve-depth) * 0.0184), calc(100% - calc(var(--cw-curve-radius) * 1.5796)) calc(var(--cw-curve-depth) * 0.0047), calc(100% - calc(var(--cw-curve-radius) * 1.6578)) calc(var(--cw-curve-depth) * 0), calc(var(--cw-curve-radius) * 1.6578) calc(var(--cw-curve-depth) * 0), calc(var(--cw-curve-radius) * 1.5796) calc(var(--cw-curve-depth) * 0.0047), calc(var(--cw-curve-radius) * 1.5038) calc(var(--cw-curve-depth) * 0.0184), calc(var(--cw-curve-radius) * 1.4311) calc(var(--cw-curve-depth) * 0.0408), calc(var(--cw-curve-radius) * 1.3622) calc(var(--cw-curve-depth) * 0.0712), calc(var(--cw-curve-radius) * 1.2979) calc(var(--cw-curve-depth) * 0.1093), calc(var(--cw-curve-radius) * 1.2388) calc(var(--cw-curve-depth) * 0.1545), calc(var(--cw-curve-radius) * 1.1857) calc(var(--cw-curve-depth) * 0.2064), calc(var(--cw-curve-radius) * 1.1393) calc(var(--cw-curve-depth) * 0.2644), calc(var(--cw-curve-radius) * 1.1003) calc(var(--cw-curve-depth) * 0.3282), calc(var(--cw-curve-radius) * 1.0693) calc(var(--cw-curve-depth) * 0.3972), calc(var(--cw-curve-radius) * 1.0519) calc(var(--cw-curve-depth) * 0.4439), calc(var(--cw-curve-radius) * 1.0086) calc(var(--cw-curve-depth) * 0.5405), calc(var(--cw-curve-radius) * 0.954) calc(var(--cw-curve-depth) * 0.6298), calc(var(--cw-curve-radius) * 0.889) calc(var(--cw-curve-depth) * 0.7111), calc(var(--cw-curve-radius) * 0.8146) calc(var(--cw-curve-depth) * 0.7837), calc(var(--cw-curve-radius) * 0.7319) calc(var(--cw-curve-depth) * 0.847), calc(var(--cw-curve-radius) * 0.6419) calc(var(--cw-curve-depth) * 0.9003), calc(var(--cw-curve-radius) * 0.5455) calc(var(--cw-curve-depth) * 0.9429), calc(var(--cw-curve-radius) * 0.4437) calc(var(--cw-curve-depth) * 0.9742), calc(var(--cw-curve-radius) * 0.3375) calc(var(--cw-curve-depth) * 0.9934), calc(var(--cw-curve-radius) * 0.228) calc(var(--cw-curve-depth) * 1), 0 var(--cw-curve-depth), 0 100%, 100% 100%); -webkit-clip-path: polygon(100% var(--cw-curve-depth), calc(100% - calc(var(--cw-curve-radius) * 0.228)) calc(var(--cw-curve-depth) * 1), calc(100% - calc(var(--cw-curve-radius) * 0.3375)) calc(var(--cw-curve-depth) * 0.9934), calc(100% - calc(var(--cw-curve-radius) * 0.4437)) calc(var(--cw-curve-depth) * 0.9742), calc(100% - calc(var(--cw-curve-radius) * 0.5455)) calc(var(--cw-curve-depth) * 0.9429), calc(100% - calc(var(--cw-curve-radius) * 0.6419)) calc(var(--cw-curve-depth) * 0.9003), calc(100% - calc(var(--cw-curve-radius) * 0.7319)) calc(var(--cw-curve-depth) * 0.847), calc(100% - calc(var(--cw-curve-radius) * 0.8146)) calc(var(--cw-curve-depth) * 0.7837), calc(100% - calc(var(--cw-curve-radius) * 0.889)) calc(var(--cw-curve-depth) * 0.7111), calc(100% - calc(var(--cw-curve-radius) * 0.954)) calc(var(--cw-curve-depth) * 0.6298), calc(100% - calc(var(--cw-curve-radius) * 1.0086)) calc(var(--cw-curve-depth) * 0.5405), calc(100% - calc(var(--cw-curve-radius) * 1.0519)) calc(var(--cw-curve-depth) * 0.4439), calc(100% - calc(var(--cw-curve-radius) * 1.0693)) calc(var(--cw-curve-depth) * 0.3972), calc(100% - calc(var(--cw-curve-radius) * 1.1003)) calc(var(--cw-curve-depth) * 0.3282), calc(100% - calc(var(--cw-curve-radius) * 1.1393)) calc(var(--cw-curve-depth) * 0.2644), calc(100% - calc(var(--cw-curve-radius) * 1.1857)) calc(var(--cw-curve-depth) * 0.2064), calc(100% - calc(var(--cw-curve-radius) * 1.2388)) calc(var(--cw-curve-depth) * 0.1545), calc(100% - calc(var(--cw-curve-radius) * 1.2979)) calc(var(--cw-curve-depth) * 0.1093), calc(100% - calc(var(--cw-curve-radius) * 1.3622)) calc(var(--cw-curve-depth) * 0.0712), calc(100% - calc(var(--cw-curve-radius) * 1.4311)) calc(var(--cw-curve-depth) * 0.0408), calc(100% - calc(var(--cw-curve-radius) * 1.5038)) calc(var(--cw-curve-depth) * 0.0184), calc(100% - calc(var(--cw-curve-radius) * 1.5796)) calc(var(--cw-curve-depth) * 0.0047), calc(100% - calc(var(--cw-curve-radius) * 1.6578)) calc(var(--cw-curve-depth) * 0), calc(var(--cw-curve-radius) * 1.6578) calc(var(--cw-curve-depth) * 0), calc(var(--cw-curve-radius) * 1.5796) calc(var(--cw-curve-depth) * 0.0047), calc(var(--cw-curve-radius) * 1.5038) calc(var(--cw-curve-depth) * 0.0184), calc(var(--cw-curve-radius) * 1.4311) calc(var(--cw-curve-depth) * 0.0408), calc(var(--cw-curve-radius) * 1.3622) calc(var(--cw-curve-depth) * 0.0712), calc(var(--cw-curve-radius) * 1.2979) calc(var(--cw-curve-depth) * 0.1093), calc(var(--cw-curve-radius) * 1.2388) calc(var(--cw-curve-depth) * 0.1545), calc(var(--cw-curve-radius) * 1.1857) calc(var(--cw-curve-depth) * 0.2064), calc(var(--cw-curve-radius) * 1.1393) calc(var(--cw-curve-depth) * 0.2644), calc(var(--cw-curve-radius) * 1.1003) calc(var(--cw-curve-depth) * 0.3282), calc(var(--cw-curve-radius) * 1.0693) calc(var(--cw-curve-depth) * 0.3972), calc(var(--cw-curve-radius) * 1.0519) calc(var(--cw-curve-depth) * 0.4439), calc(var(--cw-curve-radius) * 1.0086) calc(var(--cw-curve-depth) * 0.5405), calc(var(--cw-curve-radius) * 0.954) calc(var(--cw-curve-depth) * 0.6298), calc(var(--cw-curve-radius) * 0.889) calc(var(--cw-curve-depth) * 0.7111), calc(var(--cw-curve-radius) * 0.8146) calc(var(--cw-curve-depth) * 0.7837), calc(var(--cw-curve-radius) * 0.7319) calc(var(--cw-curve-depth) * 0.847), calc(var(--cw-curve-radius) * 0.6419) calc(var(--cw-curve-depth) * 0.9003), calc(var(--cw-curve-radius) * 0.5455) calc(var(--cw-curve-depth) * 0.9429), calc(var(--cw-curve-radius) * 0.4437) calc(var(--cw-curve-depth) * 0.9742), calc(var(--cw-curve-radius) * 0.3375) calc(var(--cw-curve-depth) * 0.9934), calc(var(--cw-curve-radius) * 0.228) calc(var(--cw-curve-depth) * 1), 0 var(--cw-curve-depth), 0 100%, 100% 100%); } /* Bottom only */ .cw-inverted-curve-yes.cw-curve-pos-bottom { clip-path: polygon(100% 0, 0 0, 0 calc(100% - var(--cw-curve-depth)), calc(var(--cw-curve-radius) * 0.228) calc(100% - calc(var(--cw-curve-depth) * 1)), calc(var(--cw-curve-radius) * 0.3375) calc(100% - calc(var(--cw-curve-depth) * 0.9934)), calc(var(--cw-curve-radius) * 0.4437) calc(100% - calc(var(--cw-curve-depth) * 0.9742)), calc(var(--cw-curve-radius) * 0.5455) calc(100% - calc(var(--cw-curve-depth) * 0.9429)), calc(var(--cw-curve-radius) * 0.6419) calc(100% - calc(var(--cw-curve-depth) * 0.9003)), calc(var(--cw-curve-radius) * 0.7319) calc(100% - calc(var(--cw-curve-depth) * 0.847)), calc(var(--cw-curve-radius) * 0.8146) calc(100% - calc(var(--cw-curve-depth) * 0.7837)), calc(var(--cw-curve-radius) * 0.889) calc(100% - calc(var(--cw-curve-depth) * 0.7111)), calc(var(--cw-curve-radius) * 0.954) calc(100% - calc(var(--cw-curve-depth) * 0.6298)), calc(var(--cw-curve-radius) * 1.0086) calc(100% - calc(var(--cw-curve-depth) * 0.5405)), calc(var(--cw-curve-radius) * 1.0519) calc(100% - calc(var(--cw-curve-depth) * 0.4439)), calc(var(--cw-curve-radius) * 1.0693) calc(100% - calc(var(--cw-curve-depth) * 0.3972)), calc(var(--cw-curve-radius) * 1.1003) calc(100% - calc(var(--cw-curve-depth) * 0.3282)), calc(var(--cw-curve-radius) * 1.1393) calc(100% - calc(var(--cw-curve-depth) * 0.2644)), calc(var(--cw-curve-radius) * 1.1857) calc(100% - calc(var(--cw-curve-depth) * 0.2064)), calc(var(--cw-curve-radius) * 1.2388) calc(100% - calc(var(--cw-curve-depth) * 0.1545)), calc(var(--cw-curve-radius) * 1.2979) calc(100% - calc(var(--cw-curve-depth) * 0.1093)), calc(var(--cw-curve-radius) * 1.3622) calc(100% - calc(var(--cw-curve-depth) * 0.0712)), calc(var(--cw-curve-radius) * 1.4311) calc(100% - calc(var(--cw-curve-depth) * 0.0408)), calc(var(--cw-curve-radius) * 1.5038) calc(100% - calc(var(--cw-curve-depth) * 0.0184)), calc(var(--cw-curve-radius) * 1.5796) calc(100% - calc(var(--cw-curve-depth) * 0.0047)), calc(var(--cw-curve-radius) * 1.6578) calc(100% - calc(var(--cw-curve-depth) * 0)), calc(100% - calc(var(--cw-curve-radius) * 1.6578)) calc(100% - calc(var(--cw-curve-depth) * 0)), calc(100% - calc(var(--cw-curve-radius) * 1.5796)) calc(100% - calc(var(--cw-curve-depth) * 0.0047)), calc(100% - calc(var(--cw-curve-radius) * 1.5038)) calc(100% - calc(var(--cw-curve-depth) * 0.0184)), calc(100% - calc(var(--cw-curve-radius) * 1.4311)) calc(100% - calc(var(--cw-curve-depth) * 0.0408)), calc(100% - calc(var(--cw-curve-radius) * 1.3622)) calc(100% - calc(var(--cw-curve-depth) * 0.0712)), calc(100% - calc(var(--cw-curve-radius) * 1.2979)) calc(100% - calc(var(--cw-curve-depth) * 0.1093)), calc(100% - calc(var(--cw-curve-radius) * 1.2388)) calc(100% - calc(var(--cw-curve-depth) * 0.1545)), calc(100% - calc(var(--cw-curve-radius) * 1.1857)) calc(100% - calc(var(--cw-curve-depth) * 0.2064)), calc(100% - calc(var(--cw-curve-radius) * 1.1393)) calc(100% - calc(var(--cw-curve-depth) * 0.2644)), calc(100% - calc(var(--cw-curve-radius) * 1.1003)) calc(100% - calc(var(--cw-curve-depth) * 0.3282)), calc(100% - calc(var(--cw-curve-radius) * 1.0693)) calc(100% - calc(var(--cw-curve-depth) * 0.3972)), calc(100% - calc(var(--cw-curve-radius) * 1.0519)) calc(100% - calc(var(--cw-curve-depth) * 0.4439)), calc(100% - calc(var(--cw-curve-radius) * 1.0086)) calc(100% - calc(var(--cw-curve-depth) * 0.5405)), calc(100% - calc(var(--cw-curve-radius) * 0.954)) calc(100% - calc(var(--cw-curve-depth) * 0.6298)), calc(100% - calc(var(--cw-curve-radius) * 0.889)) calc(100% - calc(var(--cw-curve-depth) * 0.7111)), calc(100% - calc(var(--cw-curve-radius) * 0.8146)) calc(100% - calc(var(--cw-curve-depth) * 0.7837)), calc(100% - calc(var(--cw-curve-radius) * 0.7319)) calc(100% - calc(var(--cw-curve-depth) * 0.847)), calc(100% - calc(var(--cw-curve-radius) * 0.6419)) calc(100% - calc(var(--cw-curve-depth) * 0.9003)), calc(100% - calc(var(--cw-curve-radius) * 0.5455)) calc(100% - calc(var(--cw-curve-depth) * 0.9429)), calc(100% - calc(var(--cw-curve-radius) * 0.4437)) calc(100% - calc(var(--cw-curve-depth) * 0.9742)), calc(100% - calc(var(--cw-curve-radius) * 0.3375)) calc(100% - calc(var(--cw-curve-depth) * 0.9934)), calc(100% - calc(var(--cw-curve-radius) * 0.228)) calc(100% - calc(var(--cw-curve-depth) * 1)), 100% calc(100% - var(--cw-curve-depth))); -webkit-clip-path: polygon(100% 0, 0 0, 0 calc(100% - var(--cw-curve-depth)), calc(var(--cw-curve-radius) * 0.228) calc(100% - calc(var(--cw-curve-depth) * 1)), calc(var(--cw-curve-radius) * 0.3375) calc(100% - calc(var(--cw-curve-depth) * 0.9934)), calc(var(--cw-curve-radius) * 0.4437) calc(100% - calc(var(--cw-curve-depth) * 0.9742)), calc(var(--cw-curve-radius) * 0.5455) calc(100% - calc(var(--cw-curve-depth) * 0.9429)), calc(var(--cw-curve-radius) * 0.6419) calc(100% - calc(var(--cw-curve-depth) * 0.9003)), calc(var(--cw-curve-radius) * 0.7319) calc(100% - calc(var(--cw-curve-depth) * 0.847)), calc(var(--cw-curve-radius) * 0.8146) calc(100% - calc(var(--cw-curve-depth) * 0.7837)), calc(var(--cw-curve-radius) * 0.889) calc(100% - calc(var(--cw-curve-depth) * 0.7111)), calc(var(--cw-curve-radius) * 0.954) calc(100% - calc(var(--cw-curve-depth) * 0.6298)), calc(var(--cw-curve-radius) * 1.0086) calc(100% - calc(var(--cw-curve-depth) * 0.5405)), calc(var(--cw-curve-radius) * 1.0519) calc(100% - calc(var(--cw-curve-depth) * 0.4439)), calc(var(--cw-curve-radius) * 1.0693) calc(100% - calc(var(--cw-curve-depth) * 0.3972)), calc(var(--cw-curve-radius) * 1.1003) calc(100% - calc(var(--cw-curve-depth) * 0.3282)), calc(var(--cw-curve-radius) * 1.1393) calc(100% - calc(var(--cw-curve-depth) * 0.2644)), calc(var(--cw-curve-radius) * 1.1857) calc(100% - calc(var(--cw-curve-depth) * 0.2064)), calc(var(--cw-curve-radius) * 1.2388) calc(100% - calc(var(--cw-curve-depth) * 0.1545)), calc(var(--cw-curve-radius) * 1.2979) calc(100% - calc(var(--cw-curve-depth) * 0.1093)), calc(var(--cw-curve-radius) * 1.3622) calc(100% - calc(var(--cw-curve-depth) * 0.0712)), calc(var(--cw-curve-radius) * 1.4311) calc(100% - calc(var(--cw-curve-depth) * 0.0408)), calc(var(--cw-curve-radius) * 1.5038) calc(100% - calc(var(--cw-curve-depth) * 0.0184)), calc(var(--cw-curve-radius) * 1.5796) calc(100% - calc(var(--cw-curve-depth) * 0.0047)), calc(var(--cw-curve-radius) * 1.6578) calc(100% - calc(var(--cw-curve-depth) * 0)), calc(100% - calc(var(--cw-curve-radius) * 1.6578)) calc(100% - calc(var(--cw-curve-depth) * 0)), calc(100% - calc(var(--cw-curve-radius) * 1.5796)) calc(100% - calc(var(--cw-curve-depth) * 0.0047)), calc(100% - calc(var(--cw-curve-radius) * 1.5038)) calc(100% - calc(var(--cw-curve-depth) * 0.0184)), calc(100% - calc(var(--cw-curve-radius) * 1.4311)) calc(100% - calc(var(--cw-curve-depth) * 0.0408)), calc(100% - calc(var(--cw-curve-radius) * 1.3622)) calc(100% - calc(var(--cw-curve-depth) * 0.0712)), calc(100% - calc(var(--cw-curve-radius) * 1.2979)) calc(100% - calc(var(--cw-curve-depth) * 0.1093)), calc(100% - calc(var(--cw-curve-radius) * 1.2388)) calc(100% - calc(var(--cw-curve-depth) * 0.1545)), calc(100% - calc(var(--cw-curve-radius) * 1.1857)) calc(100% - calc(var(--cw-curve-depth) * 0.2064)), calc(100% - calc(var(--cw-curve-radius) * 1.1393)) calc(100% - calc(var(--cw-curve-depth) * 0.2644)), calc(100% - calc(var(--cw-curve-radius) * 1.1003)) calc(100% - calc(var(--cw-curve-depth) * 0.3282)), calc(100% - calc(var(--cw-curve-radius) * 1.0693)) calc(100% - calc(var(--cw-curve-depth) * 0.3972)), calc(100% - calc(var(--cw-curve-radius) * 1.0519)) calc(100% - calc(var(--cw-curve-depth) * 0.4439)), calc(100% - calc(var(--cw-curve-radius) * 1.0086)) calc(100% - calc(var(--cw-curve-depth) * 0.5405)), calc(100% - calc(var(--cw-curve-radius) * 0.954)) calc(100% - calc(var(--cw-curve-depth) * 0.6298)), calc(100% - calc(var(--cw-curve-radius) * 0.889)) calc(100% - calc(var(--cw-curve-depth) * 0.7111)), calc(100% - calc(var(--cw-curve-radius) * 0.8146)) calc(100% - calc(var(--cw-curve-depth) * 0.7837)), calc(100% - calc(var(--cw-curve-radius) * 0.7319)) calc(100% - calc(var(--cw-curve-depth) * 0.847)), calc(100% - calc(var(--cw-curve-radius) * 0.6419)) calc(100% - calc(var(--cw-curve-depth) * 0.9003)), calc(100% - calc(var(--cw-curve-radius) * 0.5455)) calc(100% - calc(var(--cw-curve-depth) * 0.9429)), calc(100% - calc(var(--cw-curve-radius) * 0.4437)) calc(100% - calc(var(--cw-curve-depth) * 0.9742)), calc(100% - calc(var(--cw-curve-radius) * 0.3375)) calc(100% - calc(var(--cw-curve-depth) * 0.9934)), calc(100% - calc(var(--cw-curve-radius) * 0.228)) calc(100% - calc(var(--cw-curve-depth) * 1)), 100% calc(100% - var(--cw-curve-depth))); } /* Both top and bottom */ .cw-inverted-curve-yes.cw-curve-pos-both { clip-path: polygon(100% var(--cw-curve-depth), calc(100% - calc(var(--cw-curve-radius) * 0.228)) calc(var(--cw-curve-depth) * 1), calc(100% - calc(var(--cw-curve-radius) * 0.3375)) calc(var(--cw-curve-depth) * 0.9934), calc(100% - calc(var(--cw-curve-radius) * 0.4437)) calc(var(--cw-curve-depth) * 0.9742), calc(100% - calc(var(--cw-curve-radius) * 0.5455)) calc(var(--cw-curve-depth) * 0.9429), calc(100% - calc(var(--cw-curve-radius) * 0.6419)) calc(var(--cw-curve-depth) * 0.9003), calc(100% - calc(var(--cw-curve-radius) * 0.7319)) calc(var(--cw-curve-depth) * 0.847), calc(100% - calc(var(--cw-curve-radius) * 0.8146)) calc(var(--cw-curve-depth) * 0.7837), calc(100% - calc(var(--cw-curve-radius) * 0.889)) calc(var(--cw-curve-depth) * 0.7111), calc(100% - calc(var(--cw-curve-radius) * 0.954)) calc(var(--cw-curve-depth) * 0.6298), calc(100% - calc(var(--cw-curve-radius) * 1.0086)) calc(var(--cw-curve-depth) * 0.5405), calc(100% - calc(var(--cw-curve-radius) * 1.0519)) calc(var(--cw-curve-depth) * 0.4439), calc(100% - calc(var(--cw-curve-radius) * 1.0693)) calc(var(--cw-curve-depth) * 0.3972), calc(100% - calc(var(--cw-curve-radius) * 1.1003)) calc(var(--cw-curve-depth) * 0.3282), calc(100% - calc(var(--cw-curve-radius) * 1.1393)) calc(var(--cw-curve-depth) * 0.2644), calc(100% - calc(var(--cw-curve-radius) * 1.1857)) calc(var(--cw-curve-depth) * 0.2064), calc(100% - calc(var(--cw-curve-radius) * 1.2388)) calc(var(--cw-curve-depth) * 0.1545), calc(100% - calc(var(--cw-curve-radius) * 1.2979)) calc(var(--cw-curve-depth) * 0.1093), calc(100% - calc(var(--cw-curve-radius) * 1.3622)) calc(var(--cw-curve-depth) * 0.0712), calc(100% - calc(var(--cw-curve-radius) * 1.4311)) calc(var(--cw-curve-depth) * 0.0408), calc(100% - calc(var(--cw-curve-radius) * 1.5038)) calc(var(--cw-curve-depth) * 0.0184), calc(100% - calc(var(--cw-curve-radius) * 1.5796)) calc(var(--cw-curve-depth) * 0.0047), calc(100% - calc(var(--cw-curve-radius) * 1.6578)) calc(var(--cw-curve-depth) * 0), calc(var(--cw-curve-radius) * 1.6578) calc(var(--cw-curve-depth) * 0), calc(var(--cw-curve-radius) * 1.5796) calc(var(--cw-curve-depth) * 0.0047), calc(var(--cw-curve-radius) * 1.5038) calc(var(--cw-curve-depth) * 0.0184), calc(var(--cw-curve-radius) * 1.4311) calc(var(--cw-curve-depth) * 0.0408), calc(var(--cw-curve-radius) * 1.3622) calc(var(--cw-curve-depth) * 0.0712), calc(var(--cw-curve-radius) * 1.2979) calc(var(--cw-curve-depth) * 0.1093), calc(var(--cw-curve-radius) * 1.2388) calc(var(--cw-curve-depth) * 0.1545), calc(var(--cw-curve-radius) * 1.1857) calc(var(--cw-curve-depth) * 0.2064), calc(var(--cw-curve-radius) * 1.1393) calc(var(--cw-curve-depth) * 0.2644), calc(var(--cw-curve-radius) * 1.1003) calc(var(--cw-curve-depth) * 0.3282), calc(var(--cw-curve-radius) * 1.0693) calc(var(--cw-curve-depth) * 0.3972), calc(var(--cw-curve-radius) * 1.0519) calc(var(--cw-curve-depth) * 0.4439), calc(var(--cw-curve-radius) * 1.0086) calc(var(--cw-curve-depth) * 0.5405), calc(var(--cw-curve-radius) * 0.954) calc(var(--cw-curve-depth) * 0.6298), calc(var(--cw-curve-radius) * 0.889) calc(var(--cw-curve-depth) * 0.7111), calc(var(--cw-curve-radius) * 0.8146) calc(var(--cw-curve-depth) * 0.7837), calc(var(--cw-curve-radius) * 0.7319) calc(var(--cw-curve-depth) * 0.847), calc(var(--cw-curve-radius) * 0.6419) calc(var(--cw-curve-depth) * 0.9003), calc(var(--cw-curve-radius) * 0.5455) calc(var(--cw-curve-depth) * 0.9429), calc(var(--cw-curve-radius) * 0.4437) calc(var(--cw-curve-depth) * 0.9742), calc(var(--cw-curve-radius) * 0.3375) calc(var(--cw-curve-depth) * 0.9934), calc(var(--cw-curve-radius) * 0.228) calc(var(--cw-curve-depth) * 1), 0 var(--cw-curve-depth), 0 calc(100% - var(--cw-curve-depth)), calc(var(--cw-curve-radius) * 0.228) calc(100% - calc(var(--cw-curve-depth) * 1)), calc(var(--cw-curve-radius) * 0.3375) calc(100% - calc(var(--cw-curve-depth) * 0.9934)), calc(var(--cw-curve-radius) * 0.4437) calc(100% - calc(var(--cw-curve-depth) * 0.9742)), calc(var(--cw-curve-radius) * 0.5455) calc(100% - calc(var(--cw-curve-depth) * 0.9429)), calc(var(--cw-curve-radius) * 0.6419) calc(100% - calc(var(--cw-curve-depth) * 0.9003)), calc(var(--cw-curve-radius) * 0.7319) calc(100% - calc(var(--cw-curve-depth) * 0.847)), calc(var(--cw-curve-radius) * 0.8146) calc(100% - calc(var(--cw-curve-depth) * 0.7837)), calc(var(--cw-curve-radius) * 0.889) calc(100% - calc(var(--cw-curve-depth) * 0.7111)), calc(var(--cw-curve-radius) * 0.954) calc(100% - calc(var(--cw-curve-depth) * 0.6298)), calc(var(--cw-curve-radius) * 1.0086) calc(100% - calc(var(--cw-curve-depth) * 0.5405)), calc(var(--cw-curve-radius) * 1.0519) calc(100% - calc(var(--cw-curve-depth) * 0.4439)), calc(var(--cw-curve-radius) * 1.0693) calc(100% - calc(var(--cw-curve-depth) * 0.3972)), calc(var(--cw-curve-radius) * 1.1003) calc(100% - calc(var(--cw-curve-depth) * 0.3282)), calc(var(--cw-curve-radius) * 1.1393) calc(100% - calc(var(--cw-curve-depth) * 0.2644)), calc(var(--cw-curve-radius) * 1.1857) calc(100% - calc(var(--cw-curve-depth) * 0.2064)), calc(var(--cw-curve-radius) * 1.2388) calc(100% - calc(var(--cw-curve-depth) * 0.1545)), calc(var(--cw-curve-radius) * 1.2979) calc(100% - calc(var(--cw-curve-depth) * 0.1093)), calc(var(--cw-curve-radius) * 1.3622) calc(100% - calc(var(--cw-curve-depth) * 0.0712)), calc(var(--cw-curve-radius) * 1.4311) calc(100% - calc(var(--cw-curve-depth) * 0.0408)), calc(var(--cw-curve-radius) * 1.5038) calc(100% - calc(var(--cw-curve-depth) * 0.0184)), calc(var(--cw-curve-radius) * 1.5796) calc(100% - calc(var(--cw-curve-depth) * 0.0047)), calc(var(--cw-curve-radius) * 1.6578) calc(100% - calc(var(--cw-curve-depth) * 0)), calc(100% - calc(var(--cw-curve-radius) * 1.6578)) calc(100% - calc(var(--cw-curve-depth) * 0)), calc(100% - calc(var(--cw-curve-radius) * 1.5796)) calc(100% - calc(var(--cw-curve-depth) * 0.0047)), calc(100% - calc(var(--cw-curve-radius) * 1.5038)) calc(100% - calc(var(--cw-curve-depth) * 0.0184)), calc(100% - calc(var(--cw-curve-radius) * 1.4311)) calc(100% - calc(var(--cw-curve-depth) * 0.0408)), calc(100% - calc(var(--cw-curve-radius) * 1.3622)) calc(100% - calc(var(--cw-curve-depth) * 0.0712)), calc(100% - calc(var(--cw-curve-radius) * 1.2979)) calc(100% - calc(var(--cw-curve-depth) * 0.1093)), calc(100% - calc(var(--cw-curve-radius) * 1.2388)) calc(100% - calc(var(--cw-curve-depth) * 0.1545)), calc(100% - calc(var(--cw-curve-radius) * 1.1857)) calc(100% - calc(var(--cw-curve-depth) * 0.2064)), calc(100% - calc(var(--cw-curve-radius) * 1.1393)) calc(100% - calc(var(--cw-curve-depth) * 0.2644)), calc(100% - calc(var(--cw-curve-radius) * 1.1003)) calc(100% - calc(var(--cw-curve-depth) * 0.3282)), calc(100% - calc(var(--cw-curve-radius) * 1.0693)) calc(100% - calc(var(--cw-curve-depth) * 0.3972)), calc(100% - calc(var(--cw-curve-radius) * 1.0519)) calc(100% - calc(var(--cw-curve-depth) * 0.4439)), calc(100% - calc(var(--cw-curve-radius) * 1.0086)) calc(100% - calc(var(--cw-curve-depth) * 0.5405)), calc(100% - calc(var(--cw-curve-radius) * 0.954)) calc(100% - calc(var(--cw-curve-depth) * 0.6298)), calc(100% - calc(var(--cw-curve-radius) * 0.889)) calc(100% - calc(var(--cw-curve-depth) * 0.7111)), calc(100% - calc(var(--cw-curve-radius) * 0.8146)) calc(100% - calc(var(--cw-curve-depth) * 0.7837)), calc(100% - calc(var(--cw-curve-radius) * 0.7319)) calc(100% - calc(var(--cw-curve-depth) * 0.847)), calc(100% - calc(var(--cw-curve-radius) * 0.6419)) calc(100% - calc(var(--cw-curve-depth) * 0.9003)), calc(100% - calc(var(--cw-curve-radius) * 0.5455)) calc(100% - calc(var(--cw-curve-depth) * 0.9429)), calc(100% - calc(var(--cw-curve-radius) * 0.4437)) calc(100% - calc(var(--cw-curve-depth) * 0.9742)), calc(100% - calc(var(--cw-curve-radius) * 0.3375)) calc(100% - calc(var(--cw-curve-depth) * 0.9934)), calc(100% - calc(var(--cw-curve-radius) * 0.228)) calc(100% - calc(var(--cw-curve-depth) * 1)), 100% calc(100% - var(--cw-curve-depth))); -webkit-clip-path: polygon(100% var(--cw-curve-depth), calc(100% - calc(var(--cw-curve-radius) * 0.228)) calc(var(--cw-curve-depth) * 1), calc(100% - calc(var(--cw-curve-radius) * 0.3375)) calc(var(--cw-curve-depth) * 0.9934), calc(100% - calc(var(--cw-curve-radius) * 0.4437)) calc(var(--cw-curve-depth) * 0.9742), calc(100% - calc(var(--cw-curve-radius) * 0.5455)) calc(var(--cw-curve-depth) * 0.9429), calc(100% - calc(var(--cw-curve-radius) * 0.6419)) calc(var(--cw-curve-depth) * 0.9003), calc(100% - calc(var(--cw-curve-radius) * 0.7319)) calc(var(--cw-curve-depth) * 0.847), calc(100% - calc(var(--cw-curve-radius) * 0.8146)) calc(var(--cw-curve-depth) * 0.7837), calc(100% - calc(var(--cw-curve-radius) * 0.889)) calc(var(--cw-curve-depth) * 0.7111), calc(100% - calc(var(--cw-curve-radius) * 0.954)) calc(var(--cw-curve-depth) * 0.6298), calc(100% - calc(var(--cw-curve-radius) * 1.0086)) calc(var(--cw-curve-depth) * 0.5405), calc(100% - calc(var(--cw-curve-radius) * 1.0519)) calc(var(--cw-curve-depth) * 0.4439), calc(100% - calc(var(--cw-curve-radius) * 1.0693)) calc(var(--cw-curve-depth) * 0.3972), calc(100% - calc(var(--cw-curve-radius) * 1.1003)) calc(var(--cw-curve-depth) * 0.3282), calc(100% - calc(var(--cw-curve-radius) * 1.1393)) calc(var(--cw-curve-depth) * 0.2644), calc(100% - calc(var(--cw-curve-radius) * 1.1857)) calc(var(--cw-curve-depth) * 0.2064), calc(100% - calc(var(--cw-curve-radius) * 1.2388)) calc(var(--cw-curve-depth) * 0.1545), calc(100% - calc(var(--cw-curve-radius) * 1.2979)) calc(var(--cw-curve-depth) * 0.1093), calc(100% - calc(var(--cw-curve-radius) * 1.3622)) calc(var(--cw-curve-depth) * 0.0712), calc(100% - calc(var(--cw-curve-radius) * 1.4311)) calc(var(--cw-curve-depth) * 0.0408), calc(100% - calc(var(--cw-curve-radius) * 1.5038)) calc(var(--cw-curve-depth) * 0.0184), calc(100% - calc(var(--cw-curve-radius) * 1.5796)) calc(var(--cw-curve-depth) * 0.0047), calc(100% - calc(var(--cw-curve-radius) * 1.6578)) calc(var(--cw-curve-depth) * 0), calc(var(--cw-curve-radius) * 1.6578) calc(var(--cw-curve-depth) * 0), calc(var(--cw-curve-radius) * 1.5796) calc(var(--cw-curve-depth) * 0.0047), calc(var(--cw-curve-radius) * 1.5038) calc(var(--cw-curve-depth) * 0.0184), calc(var(--cw-curve-radius) * 1.4311) calc(var(--cw-curve-depth) * 0.0408), calc(var(--cw-curve-radius) * 1.3622) calc(var(--cw-curve-depth) * 0.0712), calc(var(--cw-curve-radius) * 1.2979) calc(var(--cw-curve-depth) * 0.1093), calc(var(--cw-curve-radius) * 1.2388) calc(var(--cw-curve-depth) * 0.1545), calc(var(--cw-curve-radius) * 1.1857) calc(var(--cw-curve-depth) * 0.2064), calc(var(--cw-curve-radius) * 1.1393) calc(var(--cw-curve-depth) * 0.2644), calc(var(--cw-curve-radius) * 1.1003) calc(var(--cw-curve-depth) * 0.3282), calc(var(--cw-curve-radius) * 1.0693) calc(var(--cw-curve-depth) * 0.3972), calc(var(--cw-curve-radius) * 1.0519) calc(var(--cw-curve-depth) * 0.4439), calc(var(--cw-curve-radius) * 1.0086) calc(var(--cw-curve-depth) * 0.5405), calc(var(--cw-curve-radius) * 0.954) calc(var(--cw-curve-depth) * 0.6298), calc(var(--cw-curve-radius) * 0.889) calc(var(--cw-curve-depth) * 0.7111), calc(var(--cw-curve-radius) * 0.8146) calc(var(--cw-curve-depth) * 0.7837), calc(var(--cw-curve-radius) * 0.7319) calc(var(--cw-curve-depth) * 0.847), calc(var(--cw-curve-radius) * 0.6419) calc(var(--cw-curve-depth) * 0.9003), calc(var(--cw-curve-radius) * 0.5455) calc(var(--cw-curve-depth) * 0.9429), calc(var(--cw-curve-radius) * 0.4437) calc(var(--cw-curve-depth) * 0.9742), calc(var(--cw-curve-radius) * 0.3375) calc(var(--cw-curve-depth) * 0.9934), calc(var(--cw-curve-radius) * 0.228) calc(var(--cw-curve-depth) * 1), 0 var(--cw-curve-depth), 0 calc(100% - var(--cw-curve-depth)), calc(var(--cw-curve-radius) * 0.228) calc(100% - calc(var(--cw-curve-depth) * 1)), calc(var(--cw-curve-radius) * 0.3375) calc(100% - calc(var(--cw-curve-depth) * 0.9934)), calc(var(--cw-curve-radius) * 0.4437) calc(100% - calc(var(--cw-curve-depth) * 0.9742)), calc(var(--cw-curve-radius) * 0.5455) calc(100% - calc(var(--cw-curve-depth) * 0.9429)), calc(var(--cw-curve-radius) * 0.6419) calc(100% - calc(var(--cw-curve-depth) * 0.9003)), calc(var(--cw-curve-radius) * 0.7319) calc(100% - calc(var(--cw-curve-depth) * 0.847)), calc(var(--cw-curve-radius) * 0.8146) calc(100% - calc(var(--cw-curve-depth) * 0.7837)), calc(var(--cw-curve-radius) * 0.889) calc(100% - calc(var(--cw-curve-depth) * 0.7111)), calc(var(--cw-curve-radius) * 0.954) calc(100% - calc(var(--cw-curve-depth) * 0.6298)), calc(var(--cw-curve-radius) * 1.0086) calc(100% - calc(var(--cw-curve-depth) * 0.5405)), calc(var(--cw-curve-radius) * 1.0519) calc(100% - calc(var(--cw-curve-depth) * 0.4439)), calc(var(--cw-curve-radius) * 1.0693) calc(100% - calc(var(--cw-curve-depth) * 0.3972)), calc(var(--cw-curve-radius) * 1.1003) calc(100% - calc(var(--cw-curve-depth) * 0.3282)), calc(var(--cw-curve-radius) * 1.1393) calc(100% - calc(var(--cw-curve-depth) * 0.2644)), calc(var(--cw-curve-radius) * 1.1857) calc(100% - calc(var(--cw-curve-depth) * 0.2064)), calc(var(--cw-curve-radius) * 1.2388) calc(100% - calc(var(--cw-curve-depth) * 0.1545)), calc(var(--cw-curve-radius) * 1.2979) calc(100% - calc(var(--cw-curve-depth) * 0.1093)), calc(var(--cw-curve-radius) * 1.3622) calc(100% - calc(var(--cw-curve-depth) * 0.0712)), calc(var(--cw-curve-radius) * 1.4311) calc(100% - calc(var(--cw-curve-depth) * 0.0408)), calc(var(--cw-curve-radius) * 1.5038) calc(100% - calc(var(--cw-curve-depth) * 0.0184)), calc(var(--cw-curve-radius) * 1.5796) calc(100% - calc(var(--cw-curve-depth) * 0.0047)), calc(var(--cw-curve-radius) * 1.6578) calc(100% - calc(var(--cw-curve-depth) * 0)), calc(100% - calc(var(--cw-curve-radius) * 1.6578)) calc(100% - calc(var(--cw-curve-depth) * 0)), calc(100% - calc(var(--cw-curve-radius) * 1.5796)) calc(100% - calc(var(--cw-curve-depth) * 0.0047)), calc(100% - calc(var(--cw-curve-radius) * 1.5038)) calc(100% - calc(var(--cw-curve-depth) * 0.0184)), calc(100% - calc(var(--cw-curve-radius) * 1.4311)) calc(100% - calc(var(--cw-curve-depth) * 0.0408)), calc(100% - calc(var(--cw-curve-radius) * 1.3622)) calc(100% - calc(var(--cw-curve-depth) * 0.0712)), calc(100% - calc(var(--cw-curve-radius) * 1.2979)) calc(100% - calc(var(--cw-curve-depth) * 0.1093)), calc(100% - calc(var(--cw-curve-radius) * 1.2388)) calc(100% - calc(var(--cw-curve-depth) * 0.1545)), calc(100% - calc(var(--cw-curve-radius) * 1.1857)) calc(100% - calc(var(--cw-curve-depth) * 0.2064)), calc(100% - calc(var(--cw-curve-radius) * 1.1393)) calc(100% - calc(var(--cw-curve-depth) * 0.2644)), calc(100% - calc(var(--cw-curve-radius) * 1.1003)) calc(100% - calc(var(--cw-curve-depth) * 0.3282)), calc(100% - calc(var(--cw-curve-radius) * 1.0693)) calc(100% - calc(var(--cw-curve-depth) * 0.3972)), calc(100% - calc(var(--cw-curve-radius) * 1.0519)) calc(100% - calc(var(--cw-curve-depth) * 0.4439)), calc(100% - calc(var(--cw-curve-radius) * 1.0086)) calc(100% - calc(var(--cw-curve-depth) * 0.5405)), calc(100% - calc(var(--cw-curve-radius) * 0.954)) calc(100% - calc(var(--cw-curve-depth) * 0.6298)), calc(100% - calc(var(--cw-curve-radius) * 0.889)) calc(100% - calc(var(--cw-curve-depth) * 0.7111)), calc(100% - calc(var(--cw-curve-radius) * 0.8146)) calc(100% - calc(var(--cw-curve-depth) * 0.7837)), calc(100% - calc(var(--cw-curve-radius) * 0.7319)) calc(100% - calc(var(--cw-curve-depth) * 0.847)), calc(100% - calc(var(--cw-curve-radius) * 0.6419)) calc(100% - calc(var(--cw-curve-depth) * 0.9003)), calc(100% - calc(var(--cw-curve-radius) * 0.5455)) calc(100% - calc(var(--cw-curve-depth) * 0.9429)), calc(100% - calc(var(--cw-curve-radius) * 0.4437)) calc(100% - calc(var(--cw-curve-depth) * 0.9742)), calc(100% - calc(var(--cw-curve-radius) * 0.3375)) calc(100% - calc(var(--cw-curve-depth) * 0.9934)), calc(100% - calc(var(--cw-curve-radius) * 0.228)) calc(100% - calc(var(--cw-curve-depth) * 1)), 100% calc(100% - var(--cw-curve-depth))); } /* Backward-compat: map legacy size classes to depth values so old saved containers still work until they are re-saved with the new sliders. */ .cw-inverted-curve-yes.cw-curve-size-sm { --cw-curve-depth: 50px; --cw-curve-radius: 45px; } .cw-inverted-curve-yes.cw-curve-size-md { --cw-curve-depth: 84px; --cw-curve-radius: 80px; } .cw-inverted-curve-yes.cw-curve-size-lg { --cw-curve-depth: 120px; --cw-curve-radius: 110px; } /* ========================================================================== CW Transitions ========================================================================== */ .cw-separator-yes { --cw-separator-height: 92px; --cw-separator-width: 100%; --cw-separator-offset: 0px; --cw-separator-opacity: .85; --cw-separator-thickness: 2px; --cw-separator-blur: 18px; --cw-separator-primary: var(--cw-pf-primary, var(--e-global-color-primary, #00CFAB)); --cw-separator-secondary: var(--cw-pf-accent, var(--e-global-color-accent, #36CEAB)); --cw-separator-flip-x: 1; position: relative; isolation: isolate; } .cw-separator-yes.cw-separator-flip-yes { --cw-separator-flip-x: -1; } .cw-section-separator { position: absolute; left: 50%; width: var(--cw-separator-width); height: var(--cw-separator-height); display: none; pointer-events: none; z-index: 4; opacity: var(--cw-separator-opacity); transform-origin: center; overflow: visible; contain: layout style; } .cw-section-separator::before, .cw-section-separator::after { content: ""; position: absolute; pointer-events: none; box-sizing: border-box; } .cw-section-separator--top { top: 0; transform: translate(-50%, calc(-50% + var(--cw-separator-offset))) scaleX(var(--cw-separator-flip-x)); } .cw-section-separator--bottom { bottom: 0; transform: translate(-50%, calc(50% + var(--cw-separator-offset))) scaleX(var(--cw-separator-flip-x)); } .cw-separator-yes.cw-separator-pos-top > .cw-section-separator--top, .cw-separator-yes.cw-separator-pos-both > .cw-section-separator--top, .cw-separator-yes.cw-separator-pos-bottom > .cw-section-separator--bottom, .cw-separator-yes.cw-separator-pos-both > .cw-section-separator--bottom { display: block; } /* Horizonte luminoso */ .cw-separator-style-horizon > .cw-section-separator, .cw-separator-style-flow > .cw-section-separator { background: radial-gradient(ellipse at 24% 50%, color-mix(in srgb, var(--cw-separator-primary) 24%, transparent) 0 8%, transparent 46%), radial-gradient(ellipse at 76% 50%, color-mix(in srgb, var(--cw-separator-secondary) 20%, transparent) 0 8%, transparent 46%); } .cw-separator-style-horizon > .cw-section-separator::before, .cw-separator-style-flow > .cw-section-separator::before { left: 4%; right: 4%; top: 50%; height: max(1px, var(--cw-separator-thickness)); transform: translateY(-50%); background: linear-gradient(90deg, transparent 0%, color-mix(in srgb, var(--cw-separator-primary) 28%, transparent) 14%, var(--cw-separator-primary) 42%, var(--cw-separator-secondary) 58%, color-mix(in srgb, var(--cw-separator-secondary) 28%, transparent) 86%, transparent 100%); box-shadow: 0 0 var(--cw-separator-blur) color-mix(in srgb, var(--cw-separator-primary) 42%, transparent), 0 0 var(--cw-separator-blur) color-mix(in srgb, var(--cw-separator-secondary) 24%, transparent); } .cw-separator-style-horizon > .cw-section-separator::after, .cw-separator-style-flow > .cw-section-separator::after { width: 36%; height: 56%; left: 32%; top: 22%; border-radius: 999px; background: radial-gradient(ellipse, color-mix(in srgb, var(--cw-separator-primary) 22%, transparent), transparent 70%); filter: blur(var(--cw-separator-blur)); } /* Puente de cristal */ .cw-separator-style-glass > .cw-section-separator, .cw-separator-style-valley > .cw-section-separator { background: radial-gradient(ellipse at center, color-mix(in srgb, var(--cw-separator-primary) 10%, transparent), transparent 64%); } .cw-separator-style-glass > .cw-section-separator::before, .cw-separator-style-valley > .cw-section-separator::before { width: min(76%, 980px); height: clamp(14px, 28%, 34px); left: 50%; top: 50%; transform: translate(-50%, -50%); border-radius: 999px; border: 1px solid color-mix(in srgb, var(--cw-separator-primary) 34%, transparent); background: linear-gradient(180deg, color-mix(in srgb, white 10%, transparent), transparent 54%), linear-gradient(90deg, color-mix(in srgb, var(--cw-separator-primary) 8%, transparent), color-mix(in srgb, var(--cw-separator-secondary) 13%, transparent), color-mix(in srgb, var(--cw-separator-primary) 8%, transparent)); -webkit-backdrop-filter: blur(var(--cw-separator-blur)); backdrop-filter: blur(var(--cw-separator-blur)); box-shadow: inset 0 1px 0 color-mix(in srgb, white 24%, transparent), 0 10px 38px color-mix(in srgb, var(--cw-separator-primary) 13%, transparent); } .cw-separator-style-glass > .cw-section-separator::after, .cw-separator-style-valley > .cw-section-separator::after { width: min(56%, 720px); height: 1px; left: 50%; top: 50%; transform: translate(-50%, -50%); background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--cw-separator-primary) 72%, white 12%), transparent); box-shadow: 0 0 var(--cw-separator-blur) color-mix(in srgb, var(--cw-separator-primary) 30%, transparent); } /* Halo elíptico */ .cw-separator-style-halo > .cw-section-separator, .cw-separator-style-arc > .cw-section-separator { background: radial-gradient(ellipse at center, color-mix(in srgb, var(--cw-separator-secondary) 10%, transparent), transparent 58%); } .cw-separator-style-halo > .cw-section-separator::before, .cw-separator-style-arc > .cw-section-separator::before { width: min(86%, 1180px); height: 120%; left: 50%; top: 50%; transform: translate(-50%, -50%); border-radius: 50%; border: var(--cw-separator-thickness) solid color-mix(in srgb, var(--cw-separator-primary) 42%, transparent); border-left-color: transparent; border-right-color: transparent; box-shadow: inset 0 0 var(--cw-separator-blur) color-mix(in srgb, var(--cw-separator-primary) 10%, transparent), 0 0 var(--cw-separator-blur) color-mix(in srgb, var(--cw-separator-secondary) 16%, transparent); } .cw-separator-style-halo > .cw-section-separator::after, .cw-separator-style-arc > .cw-section-separator::after { width: 9px; height: 9px; left: 50%; top: 50%; transform: translate(-50%, -50%); border-radius: 50%; background: var(--cw-separator-primary); box-shadow: 0 0 0 5px color-mix(in srgb, var(--cw-separator-primary) 10%, transparent), 0 0 var(--cw-separator-blur) var(--cw-separator-primary); } /* Línea editorial */ .cw-separator-style-signal > .cw-section-separator, .cw-separator-style-editorial > .cw-section-separator { background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--cw-separator-primary) 7%, transparent), transparent); } .cw-separator-style-signal > .cw-section-separator::before, .cw-separator-style-editorial > .cw-section-separator::before { left: 8%; right: 8%; top: 50%; height: 1px; transform: translateY(-50%); background: linear-gradient(90deg, transparent 0 4%, color-mix(in srgb, var(--cw-separator-primary) 34%, transparent) 18%, color-mix(in srgb, var(--cw-separator-primary) 75%, transparent) 42%, transparent 42% 58%, color-mix(in srgb, var(--cw-separator-secondary) 75%, transparent) 58%, color-mix(in srgb, var(--cw-separator-secondary) 34%, transparent) 82%, transparent 96% 100%); } .cw-separator-style-signal > .cw-section-separator::after, .cw-separator-style-editorial > .cw-section-separator::after { width: clamp(48px, 7vw, 92px); height: clamp(18px, 24%, 28px); left: 50%; top: 50%; transform: translate(-50%, -50%); border-radius: 999px; border: 1px solid color-mix(in srgb, var(--cw-separator-primary) 44%, transparent); background: linear-gradient(100deg, color-mix(in srgb, var(--cw-separator-primary) 16%, transparent), color-mix(in srgb, var(--cw-separator-secondary) 10%, transparent)); box-shadow: inset 0 1px 0 color-mix(in srgb, white 18%, transparent), 0 0 var(--cw-separator-blur) color-mix(in srgb, var(--cw-separator-primary) 15%, transparent); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } /* Pliegue arquitectónico */ .cw-separator-style-fold > .cw-section-separator, .cw-separator-style-slope > .cw-section-separator { perspective: 700px; } .cw-separator-style-fold > .cw-section-separator::before, .cw-separator-style-slope > .cw-section-separator::before, .cw-separator-style-fold > .cw-section-separator::after, .cw-separator-style-slope > .cw-section-separator::after { top: 50%; width: 51%; height: clamp(14px, 25%, 32px); background: linear-gradient(180deg, color-mix(in srgb, var(--cw-separator-primary) 42%, transparent), color-mix(in srgb, var(--cw-separator-primary) 9%, transparent)); border-top: 1px solid color-mix(in srgb, var(--cw-separator-primary) 58%, transparent); box-shadow: 0 14px 30px color-mix(in srgb, black 12%, transparent); } .cw-separator-style-fold > .cw-section-separator::before, .cw-separator-style-slope > .cw-section-separator::before { right: 49.5%; transform-origin: right center; transform: translateY(-50%) skewY(-4deg) rotateY(8deg); clip-path: polygon(0 18%, 100% 0, 100% 100%, 0 78%); } .cw-separator-style-fold > .cw-section-separator::after, .cw-separator-style-slope > .cw-section-separator::after { left: 49.5%; transform-origin: left center; transform: translateY(-50%) skewY(4deg) rotateY(-8deg); clip-path: polygon(0 0, 100% 18%, 100% 78%, 0 100%); background: linear-gradient(180deg, color-mix(in srgb, var(--cw-separator-secondary) 36%, transparent), color-mix(in srgb, var(--cw-separator-secondary) 8%, transparent)); border-top-color: color-mix(in srgb, var(--cw-separator-secondary) 54%, transparent); } /* Trama degradada */ .cw-separator-style-matrix > .cw-section-separator, .cw-separator-style-organic > .cw-section-separator { background-image: radial-gradient(circle, color-mix(in srgb, var(--cw-separator-primary) 52%, transparent) 0 1px, transparent 1.6px), radial-gradient(circle, color-mix(in srgb, var(--cw-separator-secondary) 36%, transparent) 0 1px, transparent 1.5px); background-size: 18px 18px, 18px 18px; background-position: 0 0, 9px 9px; -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 13%, #000 87%, transparent 100%), linear-gradient(180deg, transparent 0%, #000 38%, #000 62%, transparent 100%); -webkit-mask-composite: source-in; mask-image: linear-gradient(90deg, transparent 0%, #000 13%, #000 87%, transparent 100%), linear-gradient(180deg, transparent 0%, #000 38%, #000 62%, transparent 100%); mask-composite: intersect; } .cw-separator-style-matrix > .cw-section-separator::before, .cw-separator-style-organic > .cw-section-separator::before { left: 12%; right: 12%; top: 50%; height: 1px; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--cw-separator-primary) 44%, transparent), transparent); } .cw-separator-style-matrix > .cw-section-separator::after, .cw-separator-style-organic > .cw-section-separator::after { width: 34%; height: 48%; left: 33%; top: 26%; border-radius: 50%; background: radial-gradient(ellipse, color-mix(in srgb, var(--cw-separator-primary) 15%, transparent), transparent 70%); filter: blur(var(--cw-separator-blur)); } /* Órbita */ .cw-separator-style-orbit > .cw-section-separator { background: radial-gradient(ellipse at center, color-mix(in srgb, var(--cw-separator-primary) 8%, transparent), transparent 58%); } .cw-separator-style-orbit > .cw-section-separator::before { width: min(64%, 860px); height: 128%; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(-2deg); border-radius: 50%; border-top: var(--cw-separator-thickness) solid color-mix(in srgb, var(--cw-separator-primary) 62%, transparent); border-bottom: var(--cw-separator-thickness) solid color-mix(in srgb, var(--cw-separator-secondary) 30%, transparent); border-left: 1px solid transparent; border-right: 1px solid transparent; filter: drop-shadow(0 0 var(--cw-separator-blur) color-mix(in srgb, var(--cw-separator-primary) 24%, transparent)); } .cw-separator-style-orbit > .cw-section-separator::after { width: 7px; height: 7px; left: 72%; top: 37%; border-radius: 50%; background: var(--cw-separator-secondary); box-shadow: 0 0 0 4px color-mix(in srgb, var(--cw-separator-secondary) 10%, transparent), 0 0 var(--cw-separator-blur) var(--cw-separator-secondary); } .cw-separator-motion-yes.cw-separator-style-horizon > .cw-section-separator::after, .cw-separator-motion-yes.cw-separator-style-flow > .cw-section-separator::after, .cw-separator-motion-yes.cw-separator-style-matrix > .cw-section-separator::after, .cw-separator-motion-yes.cw-separator-style-organic > .cw-section-separator::after { animation: cw-transition-breathe 6s ease-in-out infinite alternate; } .cw-separator-motion-yes.cw-separator-style-orbit > .cw-section-separator::before { animation: cw-transition-orbit 8s ease-in-out infinite alternate; } @keyframes cw-transition-breathe { from { opacity: .55; transform: scaleX(.92); } to { opacity: 1; transform: scaleX(1.08); } } @keyframes cw-transition-orbit { from { transform: translate(-50%, -50%) rotate(-2deg) scaleX(.96); } to { transform: translate(-50%, -50%) rotate(2deg) scaleX(1.04); } } @media (prefers-reduced-motion: reduce) { .cw-section-separator::before, .cw-section-separator::after { animation: none !important; } } .elementor-editor-active .cw-section-separator { pointer-events: none; } /* ========================================================================== v1.1.114 · CW Botón Premium — base semántica + segundo botón -------------------------------------------------------------------------- El botón deja de depender de que el usuario pinte manualmente un fondo para resultar legible. Cualquier valor definido desde Elementor sigue teniendo prioridad. El segundo botón usa una superficie semántica del tema. ========================================================================== */ .cw-el-btn{ background:var(--cw-pf-primary,var(--e-global-color-primary,#00CFAB)); color:var(--cw-pf-white,#fff); border:1px solid transparent; } .cw-el-btn:link,.cw-el-btn:visited{color:inherit} .cw-el-btn-wrapper--pair{ flex-wrap:wrap; align-items:center; gap:10px; } .cw-el-btn-wrapper--pair .cw-el-btn{min-height:44px} .cw-el-btn--secondary-soft, .cw-el-btn--secondary-soft:link, .cw-el-btn--secondary-soft:visited{ background:color-mix(in srgb,var(--cw-pf-primary,#00CFAB) 7%,var(--cw-pf-background,#fff) 93%); color:var(--cw-pf-text,var(--e-global-color-text,#333333)); border-color:color-mix(in srgb,var(--cw-pf-text,#333333) 12%,transparent); box-shadow:none; } .cw-el-btn--secondary-outline, .cw-el-btn--secondary-outline:link, .cw-el-btn--secondary-outline:visited{ background:transparent; color:var(--cw-pf-text,var(--e-global-color-text,#333333)); border-color:color-mix(in srgb,var(--cw-pf-text,#333333) 22%,transparent); box-shadow:none; } .cw-el-btn--secondary-soft:hover, .cw-el-btn--secondary-soft:focus-visible, .cw-el-btn--secondary-outline:hover, .cw-el-btn--secondary-outline:focus-visible{ background:color-mix(in srgb,var(--cw-pf-primary,#00CFAB) 12%,var(--cw-pf-background,#fff) 88%); color:var(--cw-pf-accent,var(--cw-pf-primary,#00CFAB)); border-color:color-mix(in srgb,var(--cw-pf-primary,#00CFAB) 38%,transparent); } html[data-theme="dark"] .cw-el-btn--secondary-soft, body[data-theme="dark"] .cw-el-btn--secondary-soft{ background:color-mix(in srgb,var(--cw-pf-primary,#36CEAB) 10%,var(--cw-pf-surface,#163234) 90%); color:var(--cw-pf-text,#F3F7F7); border-color:color-mix(in srgb,var(--cw-pf-text,#F3F7F7) 12%,transparent); } html[data-theme="dark"] .cw-el-btn--secondary-outline, body[data-theme="dark"] .cw-el-btn--secondary-outline{ color:var(--cw-pf-text,#F3F7F7); border-color:color-mix(in srgb,var(--cw-pf-text,#F3F7F7) 20%,transparent); } html[data-theme="dark"] .cw-el-btn--secondary-soft:hover, html[data-theme="dark"] .cw-el-btn--secondary-soft:focus-visible, html[data-theme="dark"] .cw-el-btn--secondary-outline:hover, html[data-theme="dark"] .cw-el-btn--secondary-outline:focus-visible, body[data-theme="dark"] .cw-el-btn--secondary-soft:hover, body[data-theme="dark"] .cw-el-btn--secondary-soft:focus-visible, body[data-theme="dark"] .cw-el-btn--secondary-outline:hover, body[data-theme="dark"] .cw-el-btn--secondary-outline:focus-visible{ background:color-mix(in srgb,var(--cw-pf-primary,#36CEAB) 15%,var(--cw-pf-surface,#163234) 85%); color:var(--cw-pf-primary,#36CEAB); border-color:color-mix(in srgb,var(--cw-pf-primary,#36CEAB) 38%,transparent); } /* ========================================================================== v1.1.115 · Botones estables y segundo CTA independiente ========================================================================== */ .cw-el-btn-wrapper .cw-el-btn, .cw-el-btn-wrapper .cw-el-btn:hover, .cw-el-btn-wrapper .cw-el-btn:focus, .cw-el-btn-wrapper .cw-el-btn:focus-visible, .cw-el-btn-wrapper .cw-el-btn:active, .cw-el-btn-wrapper .cw-effect-float:hover, .cw-el-btn-wrapper .cw-effect-float:focus-visible{ transform:none!important; } .cw-el-btn-wrapper--pair{gap:10px;align-items:center} .cw-el-btn--secondary-soft, .cw-el-btn--secondary-soft:link, .cw-el-btn--secondary-soft:visited{ background:color-mix(in srgb,var(--cw-pf-primary,#00CFAB) 5%,#F4EEE4 95%); color:var(--cw-pf-text,#333333); border-color:color-mix(in srgb,var(--cw-pf-text,#333333) 13%,transparent); } .cw-el-btn--secondary-outline, .cw-el-btn--secondary-outline:link, .cw-el-btn--secondary-outline:visited{ background:color-mix(in srgb,#F4EEE4 82%,transparent); color:var(--cw-pf-text,#333333); border-color:color-mix(in srgb,var(--cw-pf-text,#333333) 18%,transparent); } .cw-el-btn--secondary-soft:hover, .cw-el-btn--secondary-soft:focus-visible, .cw-el-btn--secondary-outline:hover, .cw-el-btn--secondary-outline:focus-visible{ background:color-mix(in srgb,var(--cw-pf-primary,#00CFAB) 9%,#F4EEE4 91%); color:var(--cw-pf-text,#333333); border-color:color-mix(in srgb,var(--cw-pf-primary,#00CFAB) 28%,transparent); } .cw-el-btn--secondary .cw-el-btn-icon{ background:transparent; color:currentColor; border-radius:0!important; } .cw-el-btn--secondary .cw-el-btn-icon svg{fill:currentColor!important;color:currentColor!important} html[data-theme="dark"] .cw-el-btn--secondary-soft, body[data-theme="dark"] .cw-el-btn--secondary-soft{ background:color-mix(in srgb,var(--cw-pf-primary,#36CEAB) 8%,var(--cw-pf-surface,#173437) 92%); color:var(--cw-pf-text,#F3F7F7); border-color:color-mix(in srgb,var(--cw-pf-text,#F3F7F7) 11%,transparent); } html[data-theme="dark"] .cw-el-btn--secondary-outline, body[data-theme="dark"] .cw-el-btn--secondary-outline{ background:color-mix(in srgb,var(--cw-pf-surface,#173437) 72%,transparent); color:var(--cw-pf-text,#F3F7F7); border-color:color-mix(in srgb,var(--cw-pf-text,#F3F7F7) 16%,transparent); } /* ========================================================================== v1.1.116 · CW Botón Premium — geometría inmutable entre estados -------------------------------------------------------------------------- Los iconos pueden cambiar visualmente en hover, pero su caja de layout no cambia de ancho. Así un icono grande (p. ej. WhatsApp) nunca empuja al CTA vecino ni altera la separación del par de botones. ========================================================================== */ .cw-el-btn--primary .cw-el-btn-icon, .cw-el-btn--secondary .cw-el-btn-icon{ flex:0 0 auto!important; align-self:center; } .cw-el-btn--secondary .cw-el-btn-icon{ width:var(--cw-secondary-icon-size,16px)!important; height:var(--cw-secondary-icon-size,16px)!important; min-width:var(--cw-secondary-icon-size,16px)!important; min-height:var(--cw-secondary-icon-size,16px)!important; display:inline-grid!important; place-items:center!important; overflow:visible!important; } .cw-el-btn-wrapper--pair{ align-items:center!important; } .cw-el-btn-wrapper--pair .cw-el-btn{ flex:0 0 auto; } /* Nunca permitimos que una microinteracción modifique la geometría del CTA. */ .cw-el-btn-wrapper .cw-el-btn, .cw-el-btn-wrapper .cw-el-btn:hover, .cw-el-btn-wrapper .cw-el-btn:focus, .cw-el-btn-wrapper .cw-el-btn:focus-visible, .cw-el-btn-wrapper .cw-el-btn:active{ margin:0!important; } .cw-el-btn--primary .cw-el-btn-icon{ width:var(--cw-primary-icon-slot-size,32px)!important; height:var(--cw-primary-icon-slot-size,32px)!important; min-width:var(--cw-primary-icon-slot-size,32px)!important; min-height:var(--cw-primary-icon-slot-size,32px)!important; flex-basis:var(--cw-primary-icon-slot-size,32px)!important; overflow:visible!important; } /* ========================================================================== v1.1.118 · CW Botón Premium — par geométricamente idéntico -------------------------------------------------------------------------- El tamaño visual del icono secundario es independiente, pero ambos CTA usan la misma caja estructural del icono. De este modo comparten altura real y un cambio de tamaño del SVG en hover nunca altera el layout ni empuja al vecino. ========================================================================== */ .cw-el-btn-wrapper--pair .cw-el-btn--primary, .cw-el-btn-wrapper--pair .cw-el-btn--secondary{ min-height:var(--cw-pair-button-height,56px)!important; box-sizing:border-box!important; } .cw-el-btn-wrapper--pair .cw-el-btn--secondary .cw-el-btn-icon{ width:var(--cw-primary-icon-slot-size,32px)!important; height:var(--cw-primary-icon-slot-size,32px)!important; min-width:var(--cw-primary-icon-slot-size,32px)!important; min-height:var(--cw-primary-icon-slot-size,32px)!important; flex:0 0 var(--cw-primary-icon-slot-size,32px)!important; display:inline-grid!important; place-items:center!important; overflow:visible!important; } .cw-el-btn-wrapper--pair .cw-el-btn--secondary .cw-el-btn-icon svg{ width:var(--cw-secondary-icon-size,16px); height:var(--cw-secondary-icon-size,16px); max-width:none!important; max-height:none!important; } .cw-el-btn-wrapper--pair .cw-el-btn--secondary .cw-el-btn-icon i{ font-size:var(--cw-secondary-icon-size,16px); } /* El movimiento del icono ocurre dentro de una caja fija: cero layout shift. */ .cw-el-btn-wrapper--pair .cw-el-btn-icon, .cw-el-btn-wrapper--pair .cw-el-btn-icon svg, .cw-el-btn-wrapper--pair .cw-el-btn-icon i{ will-change:transform; } /* ========================================================================== v1.1.119 · CW Botón Premium — compacto sin layout shift -------------------------------------------------------------------------- La caja de 32px añadida al emparejar botones generaba demasiado aire a la derecha y hacía que el CTA pareciera sobredimensionado. El slot se calcula ahora con el mayor tamaño visual realmente necesario. La animación ocurre dentro de esa caja y nunca altera el layout. ========================================================================== */ .cw-el-btn{ padding:10px 18px; gap:var(--cw-icon-gap,6px); } .cw-el-btn .cw-btn-icon-left, .cw-el-btn .cw-btn-icon-right{ margin:0!important; } .cw-el-btn-wrapper--pair{ gap:8px; align-items:center!important; --cw-pair-icon-slot:max( var(--cw-primary-icon-size,20px), var(--cw-primary-icon-hover-size,20px), var(--cw-secondary-icon-size,16px) ); } .cw-el-btn-wrapper--pair .cw-el-btn--primary, .cw-el-btn-wrapper--pair .cw-el-btn--secondary{ min-height:44px!important; padding-top:10px; padding-bottom:10px; } .cw-el-btn-wrapper--pair .cw-el-btn--primary .cw-el-btn-icon, .cw-el-btn-wrapper--pair .cw-el-btn--secondary .cw-el-btn-icon{ width:var(--cw-pair-icon-slot)!important; height:var(--cw-pair-icon-slot)!important; min-width:var(--cw-pair-icon-slot)!important; min-height:var(--cw-pair-icon-slot)!important; flex:0 0 var(--cw-pair-icon-slot)!important; display:inline-grid!important; place-items:center!important; overflow:visible!important; } .cw-el-btn-wrapper--pair .cw-el-btn--secondary .cw-el-btn-icon svg{ width:var(--cw-secondary-icon-size,16px); height:var(--cw-secondary-icon-size,16px); } .cw-el-btn-wrapper--pair .cw-el-btn--secondary .cw-el-btn-icon i{ font-size:var(--cw-secondary-icon-size,16px); } .cw-el-btn-wrapper--pair .cw-el-btn--secondary:hover .cw-el-btn-icon svg, .cw-el-btn-wrapper--pair .cw-el-btn--secondary:focus-visible .cw-el-btn-icon svg{ width:var(--cw-primary-icon-hover-size,var(--cw-secondary-icon-size,16px)); height:var(--cw-primary-icon-hover-size,var(--cw-secondary-icon-size,16px)); } .cw-el-btn-wrapper--pair .cw-el-btn--secondary:hover .cw-el-btn-icon i, .cw-el-btn-wrapper--pair .cw-el-btn--secondary:focus-visible .cw-el-btn-icon i{ font-size:var(--cw-primary-icon-hover-size,var(--cw-secondary-icon-size,16px)); } @media(max-width:767px){ .cw-el-btn{padding:9px 15px;gap:var(--cw-icon-gap,5px)} .cw-el-btn-wrapper--pair{gap:7px} .cw-el-btn-wrapper--pair .cw-el-btn--primary, .cw-el-btn-wrapper--pair .cw-el-btn--secondary{min-height:42px!important;padding-top:9px;padding-bottom:9px} } /* ========================================================================== v1.1.120 · CW Botón Premium — una sola microinteracción para ambos CTA -------------------------------------------------------------------------- El secundario usa exactamente las mismas variables de movimiento del principal. Los slots son independientes y compactos: el icono puede crecer, girar y desplazarse sin cambiar el ancho del botón ni empujar al vecino. Los colores por defecto no bloquean los controles de Elementor. ========================================================================== */ .cw-el-btn-wrapper{ --cw-primary-icon-size:20px; --cw-secondary-icon-size:16px; --cw-secondary-icon-hover-size:var(--cw-secondary-icon-size,16px); /* Sin tamaño hover explícito: se mantiene el tamaño normal configurado. */ --cw-icon-rotate-normal:0deg; /* Sin rotación hover explícita: conserva la normal. */ --cw-icon-translate-hover:0px; --cw-icon-transition:360ms; --cw-icon-gap:6px; } .cw-el-btn-wrapper--pair{ gap:var(--cw-button-pair-gap,8px); align-items:center!important; flex-wrap:wrap; } .cw-el-btn-wrapper--pair .cw-el-btn{ min-height:40px!important; padding:8px 14px; gap:var(--cw-icon-gap,6px); margin:0!important; transform:none!important; line-height:1; } .cw-el-btn-wrapper--pair .cw-el-btn--primary .cw-el-btn-icon{ --cw-current-icon-size:var(--cw-primary-icon-size,20px); --cw-current-slot-size:max(var(--cw-primary-icon-size,20px),var(--cw-icon-hover-size,20px)); } .cw-el-btn-wrapper--pair .cw-el-btn--secondary .cw-el-btn-icon{ --cw-current-icon-size:var(--cw-secondary-icon-size,16px); --cw-current-slot-size:max(var(--cw-secondary-icon-size,16px),var(--cw-secondary-icon-hover-size,var(--cw-secondary-icon-size,16px))); } .cw-el-btn-wrapper--pair .cw-el-btn-icon{ width:var(--cw-current-slot-size)!important; height:var(--cw-current-slot-size)!important; min-width:var(--cw-current-slot-size)!important; min-height:var(--cw-current-slot-size)!important; flex:0 0 var(--cw-current-slot-size)!important; display:inline-grid!important; place-items:center!important; overflow:visible!important; transform:translateX(0)!important; transition:transform var(--cw-icon-transition,360ms) cubic-bezier(.16,1,.3,1)!important; } .cw-el-btn-wrapper--pair .cw-el-btn-icon svg{ width:var(--cw-current-icon-size)!important; height:var(--cw-current-icon-size)!important; max-width:none!important; max-height:none!important; transform:rotate(var(--cw-icon-rotate-normal,0deg))!important; transform-origin:50% 50%!important; transition: width var(--cw-icon-transition,360ms) cubic-bezier(.16,1,.3,1), height var(--cw-icon-transition,360ms) cubic-bezier(.16,1,.3,1), transform var(--cw-icon-transition,360ms) cubic-bezier(.16,1,.3,1), fill .24s ease, color .24s ease!important; } .cw-el-btn-wrapper--pair .cw-el-btn-icon i{ font-size:var(--cw-current-icon-size)!important; transform:rotate(var(--cw-icon-rotate-normal,0deg))!important; transform-origin:50% 50%!important; transition: font-size var(--cw-icon-transition,360ms) cubic-bezier(.16,1,.3,1), transform var(--cw-icon-transition,360ms) cubic-bezier(.16,1,.3,1), color .24s ease!important; } .cw-el-btn-wrapper--pair .cw-el-btn:hover .cw-el-btn-icon, .cw-el-btn-wrapper--pair .cw-el-btn:focus-visible .cw-el-btn-icon{ transform:translateX(var(--cw-icon-translate-hover,0px))!important; } .cw-el-btn-wrapper--pair .cw-el-btn:hover .cw-el-btn-icon svg, .cw-el-btn-wrapper--pair .cw-el-btn:focus-visible .cw-el-btn-icon svg{ width:var(--cw-icon-hover-size,var(--cw-current-icon-size))!important; height:var(--cw-icon-hover-size,var(--cw-current-icon-size))!important; transform:rotate(var(--cw-icon-rotate-hover,var(--cw-icon-rotate-normal,0deg)))!important; } .cw-el-btn-wrapper--pair .cw-el-btn:hover .cw-el-btn-icon i, .cw-el-btn-wrapper--pair .cw-el-btn:focus-visible .cw-el-btn-icon i{ font-size:var(--cw-icon-hover-size,var(--cw-current-icon-size))!important; transform:rotate(var(--cw-icon-rotate-hover,var(--cw-icon-rotate-normal,0deg)))!important; } /* El secundario no recibe una microinteracción alternativa: comparte texto, duración y movimiento con el principal. Solo su icono y paleta pueden variar. */ .cw-el-btn-wrapper--pair .cw-el-btn--secondary .cw-el-btn-icon{ background:transparent!important; border-radius:0!important; } .cw-el-btn-wrapper--pair .cw-el-btn--secondary .cw-el-btn-icon svg{ fill:currentColor!important; color:currentColor!important; } @media(max-width:767px){ .cw-el-btn-wrapper--pair{gap:7px} .cw-el-btn-wrapper--pair .cw-el-btn{min-height:40px!important;padding:8px 13px} } /* ========================================================================== v1.1.121 · CW Botón Premium — hover del icono secundario independiente -------------------------------------------------------------------------- El secundario nunca hereda el tamaño hover del principal. Si no existe un valor específico de hover, conserva exactamente su tamaño normal. Rotación, desplazamiento y duración siguen compartiendo la microinteracción general. ========================================================================== */ .cw-el-btn-wrapper--pair .cw-el-btn--secondary .cw-el-btn-icon{ --cw-current-icon-size:var(--cw-secondary-icon-size,16px); --cw-current-slot-size:max( var(--cw-secondary-icon-size,16px), var(--cw-secondary-icon-hover-size,var(--cw-secondary-icon-size,16px)) ); } .cw-el-btn-wrapper--pair .cw-el-btn--secondary:hover .cw-el-btn-icon svg, .cw-el-btn-wrapper--pair .cw-el-btn--secondary:focus-visible .cw-el-btn-icon svg{ width:var(--cw-secondary-icon-hover-size,var(--cw-secondary-icon-size,16px))!important; height:var(--cw-secondary-icon-hover-size,var(--cw-secondary-icon-size,16px))!important; } .cw-el-btn-wrapper--pair .cw-el-btn--secondary:hover .cw-el-btn-icon i, .cw-el-btn-wrapper--pair .cw-el-btn--secondary:focus-visible .cw-el-btn-icon i{ font-size:var(--cw-secondary-icon-hover-size,var(--cw-secondary-icon-size,16px))!important; } /* v1.1.123 · Project-approved WhatsApp / Call artwork inside CW Botón Premium. */ .cw-el-btn .cw-el-btn-icon .cw-brand-icon{ width:var(--cw-primary-icon-size,20px); height:var(--cw-primary-icon-size,20px); transition:width var(--cw-icon-transition,360ms) cubic-bezier(.16,1,.3,1),height var(--cw-icon-transition,360ms) cubic-bezier(.16,1,.3,1),transform var(--cw-icon-transition,360ms) cubic-bezier(.16,1,.3,1); transform:rotate(var(--cw-icon-rotate-normal,0deg)); transform-origin:50% 50%; } .cw-el-btn--secondary .cw-el-btn-icon .cw-brand-icon{ width:var(--cw-secondary-icon-size,16px); height:var(--cw-secondary-icon-size,16px); } .cw-el-btn:hover .cw-el-btn-icon .cw-brand-icon, .cw-el-btn:focus-visible .cw-el-btn-icon .cw-brand-icon{ width:var(--cw-icon-hover-size,var(--cw-primary-icon-size,20px)); height:var(--cw-icon-hover-size,var(--cw-primary-icon-size,20px)); transform:rotate(var(--cw-icon-rotate-hover,var(--cw-icon-rotate-normal,0deg))); } .cw-el-btn--secondary:hover .cw-el-btn-icon .cw-brand-icon, .cw-el-btn--secondary:focus-visible .cw-el-btn-icon .cw-brand-icon{ width:var(--cw-secondary-icon-hover-size,var(--cw-secondary-icon-size,16px)); height:var(--cw-secondary-icon-hover-size,var(--cw-secondary-icon-size,16px)); } /* ========================================================================== v1.1.132 · CW Botón Premium: iconos manuales y automáticos del mismo tamaño. Elementor Icons_Manager renderiza SVG o fuentes de iconos. Antes solo los SVG de marca contaban con las dimensiones fijadas por los controles; el icono de un enlace manual heredaba em y cambiaba de tamaño. Se mantiene el tamaño independiente de los iconos secundarios y la caja estable del botón, incluido el tamaño responsive y de hover configurado. ========================================================================== */ .cw-el-btn-wrapper .cw-el-btn--primary .cw-el-btn-icon > svg, .cw-el-btn-wrapper .cw-el-btn--primary .cw-el-btn-icon > i { width: var(--cw-primary-icon-size, 20px) !important; height: var(--cw-primary-icon-size, 20px) !important; max-width: none !important; max-height: none !important; } .cw-el-btn-wrapper .cw-el-btn--primary .cw-el-btn-icon > i { font-size: var(--cw-primary-icon-size, 20px) !important; line-height: 1 !important; display: inline-grid; place-items: center; } .cw-el-btn-wrapper .cw-el-btn--primary:is(:hover, :focus-visible) .cw-el-btn-icon > svg, .cw-el-btn-wrapper .cw-el-btn--primary:is(:hover, :focus-visible) .cw-el-btn-icon > i { width: var(--cw-icon-hover-size, var(--cw-primary-icon-size, 20px)) !important; height: var(--cw-icon-hover-size, var(--cw-primary-icon-size, 20px)) !important; } .cw-el-btn-wrapper .cw-el-btn--primary:is(:hover, :focus-visible) .cw-el-btn-icon > i { font-size: var(--cw-icon-hover-size, var(--cw-primary-icon-size, 20px)) !important; } /* Los símbolos SVG internos de Elementor no deben recibir un segundo tamaño ajeno al control, y la rotación visual permanece consistente con la marca. */ .cw-el-btn-wrapper:not(.cw-el-btn-wrapper--pair) .cw-el-btn--primary .cw-el-btn-icon > svg, .cw-el-btn-wrapper:not(.cw-el-btn-wrapper--pair) .cw-el-btn--primary .cw-el-btn-icon > i { transform: rotate(var(--cw-icon-rotate-normal, 0deg)) !important; transform-origin: 50% 50%; } .cw-el-btn-wrapper:not(.cw-el-btn-wrapper--pair) .cw-el-btn--primary:is(:hover, :focus-visible) .cw-el-btn-icon > svg, .cw-el-btn-wrapper:not(.cw-el-btn-wrapper--pair) .cw-el-btn--primary:is(:hover, :focus-visible) .cw-el-btn-icon > i { transform: rotate(var(--cw-icon-rotate-hover, var(--cw-icon-rotate-normal, 0deg))) !important; } .cw-el-btn-wrapper:not(.cw-el-btn-wrapper--pair) .cw-el-btn--primary .cw-el-btn-icon { display: inline-grid !important; place-items: center !important; flex-shrink: 0 !important; overflow: visible !important; transform: translateX(0) !important; } .cw-el-btn-wrapper:not(.cw-el-btn-wrapper--pair) .cw-el-btn--primary:is(:hover, :focus-visible) .cw-el-btn-icon { transform: translateX(var(--cw-icon-translate-hover, 0px)) !important; } /* PF · Nuevos separadores sobrios, sin halos ni sombras de cristal. Solo se aplican a los tres estilos añadidos en 1.0.25. */ .cw-separator-style-precision > .cw-section-separator::before{ left:6%;right:6%;top:50%;height:max(1px,var(--cw-separator-thickness)); transform:translateY(-50%); background:linear-gradient(90deg,transparent 0%,color-mix(in srgb,var(--cw-separator-primary) 16%,transparent) 18%, var(--cw-separator-primary) 47%,var(--cw-separator-secondary) 52%, color-mix(in srgb,var(--cw-separator-secondary) 16%,transparent) 82%,transparent 100%); } .cw-separator-style-precision > .cw-section-separator::after{ width:7px;height:7px;left:50%;top:50%;transform:translate(-50%,-50%); border-radius:50%;background:var(--cw-separator-primary);border:2px solid var(--cw-pf-background,#fff); } .cw-separator-style-contour > .cw-section-separator::before{ left:8%;width:84%;top:8%;height:112%; border-top:var(--cw-separator-thickness) solid color-mix(in srgb,var(--cw-separator-primary) 44%,transparent); border-radius:50% 50% 0 0 / 100% 100% 0 0; transform:rotate(-1.5deg); -webkit-mask-image:linear-gradient(90deg,transparent 2%,#000 20% 80%,transparent 98%); mask-image:linear-gradient(90deg,transparent 2%,#000 20% 80%,transparent 98%); } .cw-separator-style-contour > .cw-section-separator::after{ left:17%;width:66%;top:22%;height:88%; border-top:1px solid color-mix(in srgb,var(--cw-separator-secondary) 38%,transparent); border-radius:50% 50% 0 0 / 100% 100% 0 0;transform:rotate(1.5deg); } .cw-separator-style-silk > .cw-section-separator{ background:linear-gradient(90deg,transparent 0%,color-mix(in srgb,var(--cw-separator-primary) 7%,transparent) 29%, color-mix(in srgb,var(--cw-separator-secondary) 8%,transparent) 72%,transparent 100%); -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 50%,transparent 100%); mask-image:linear-gradient(180deg,transparent 0%,#000 50%,transparent 100%); } .cw-separator-style-silk > .cw-section-separator::before{ width:82%;height:1px;left:9%;top:50%; background:linear-gradient(90deg,transparent,var(--cw-separator-primary),var(--cw-separator-secondary),transparent); opacity:.36; } /* Punto Fisio v1.0.26 · cinco separadores editorialmente consistentes. Los estilos anteriores siguen en CSS solo para instancias existentes guardadas. */ .cw-separator-style-precision>.cw-section-separator{background:none} .cw-separator-style-precision>.cw-section-separator::before{ top:50%;left:5%;right:5%;width:auto;height:max(1px,var(--cw-separator-thickness)); transform:translateY(-50%); background:linear-gradient(90deg,transparent 0%,color-mix(in srgb,var(--cw-separator-primary) 30%,transparent) 25%,var(--cw-separator-primary) 48%,var(--cw-separator-secondary) 52%,color-mix(in srgb,var(--cw-separator-secondary) 30%,transparent) 75%,transparent 100%); filter:none;border:0; } .cw-separator-style-precision>.cw-section-separator::after{ top:50%;left:50%;width:6px;height:6px;transform:translate(-50%,-50%); border-radius:50%;border:1px solid var(--cw-separator-primary);background:var(--cw-pf-background,#fff);filter:none; } /* Matriz refinada: escala pequeña y fundido suave sin brillo difuso. */ .cw-separator-style-matrix>.cw-section-separator{ background-image:radial-gradient(circle,color-mix(in srgb,var(--cw-separator-primary) 58%,transparent) .85px,transparent 1.2px),radial-gradient(circle,color-mix(in srgb,var(--cw-separator-secondary) 33%,transparent) .85px,transparent 1.2px); background-size:20px 20px;background-position:0 0,10px 10px; -webkit-mask-image:radial-gradient(ellipse at center,#000 8%,transparent 80%); mask-image:radial-gradient(ellipse at center,#000 8%,transparent 80%); } .cw-separator-style-matrix>.cw-section-separator::before,.cw-separator-style-matrix>.cw-section-separator::after{display:none} /* Filetes paralelos: jerarquía editorial sin acentos brillantes. */ .cw-separator-style-filet>.cw-section-separator::before{ top:calc(50% - 4px);left:9%;right:9%;height:1px; background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--cw-separator-primary) 50%,transparent),color-mix(in srgb,var(--cw-separator-secondary) 55%,transparent),transparent); } .cw-separator-style-filet>.cw-section-separator::after{ top:calc(50% + 4px);left:16%;right:16%;height:1px; background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--cw-separator-secondary) 26%,transparent),color-mix(in srgb,var(--cw-separator-primary) 24%,transparent),transparent); } /* Corte editorial: una única línea interrumpida en el centro. */ .cw-separator-style-cut>.cw-section-separator::before{ top:50%;left:7%;right:calc(50% + 22px);height:1px; background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--cw-separator-primary) 55%,transparent)); } .cw-separator-style-cut>.cw-section-separator::after{ top:50%;right:7%;left:calc(50% + 22px);height:1px; background:linear-gradient(90deg,color-mix(in srgb,var(--cw-separator-secondary) 55%,transparent),transparent); } /* Ritmo lineal: tres incisiones pequeñas en una trama horizontal muy tenue. */ .cw-separator-style-cadence>.cw-section-separator::before{ top:50%;left:12%;right:12%;height:1px; background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--cw-separator-primary) 25%,transparent),color-mix(in srgb,var(--cw-separator-secondary) 26%,transparent),transparent); } .cw-separator-style-cadence>.cw-section-separator::after{ top:calc(50% - 5px);left:calc(50% - 23px);width:46px;height:11px; background:linear-gradient(90deg,var(--cw-separator-primary) 0 2px,transparent 2px 21px,var(--cw-separator-secondary) 21px 23px,transparent 23px 44px,var(--cw-separator-primary) 44px 46px); opacity:.65; }