.elementor-37 .elementor-element.elementor-element-67a8a177 > .elementor-background-overlay{background-color:#0E0D0DF7;background-image:url("https://gammaconstrucciones.cl/wp-content/uploads/2025/11/BG3.png");opacity:0.4;mix-blend-mode:darken;transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}.elementor-37 .elementor-element.elementor-element-67a8a177 > .elementor-container{max-width:1600px;}.elementor-37 .elementor-element.elementor-element-67a8a177{transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;padding:9em 1em 8em 1em;}.elementor-37 .elementor-element.elementor-element-2e6637e .elementor-repeater-item-8f96e45 .swiper-slide-bg{background-color:#01010100;}.elementor-37 .elementor-element.elementor-element-2e6637e .elementor-repeater-item-603d352 .swiper-slide-bg{background-color:#01010100;}.elementor-37 .elementor-element.elementor-element-2e6637e .swiper-slide{transition-duration:calc(5000ms*1.2);height:386px;}.elementor-37 .elementor-element.elementor-element-2e6637e .elementor-slide-button{background-color:#000000;font-size:23px;font-weight:400;border-color:#02010100;}.elementor-37 .elementor-element.elementor-element-2e6637e .swiper-slide-contents{max-width:66%;}.elementor-37 .elementor-element.elementor-element-2e6637e .swiper-slide-inner{text-align:left;}.elementor-37 .elementor-element.elementor-element-2e6637e .elementor-slide-heading{font-family:"avenir-light", Sans-serif;font-size:47px;font-weight:900;}.elementor-37 .elementor-element.elementor-element-9754d2b{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-37 .elementor-element.elementor-element-51ac6ba{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-37 .elementor-element.elementor-element-d76e03a{padding:55px 55px 55px 55px;}.elementor-37 .elementor-element.elementor-element-d76e03a .elementor-heading-title{font-family:"avenir-light", Sans-serif;font-size:52px;font-weight:800;-webkit-text-stroke-width:1px;stroke-width:1px;-webkit-text-stroke-color:#000;stroke:#000;color:#000000;}.elementor-37 .elementor-element.elementor-element-4b05e63{margin:-49px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 189px;}.elementor-37 .elementor-element.elementor-element-066b04b{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-37 .elementor-element.elementor-element-e5a24f4 .elementor-wrapper{--video-aspect-ratio:0.5625;}.elementor-37 .elementor-element.elementor-element-d4654a3{--display:flex;--min-height:60px;--justify-content:center;}.elementor-37 .elementor-element.elementor-element-d4654a3:not(.elementor-motion-effects-element-type-background), .elementor-37 .elementor-element.elementor-element-d4654a3 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#000000;}.elementor-37 .elementor-element.elementor-element-7687c1a{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--margin-top:-101px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-37 .elementor-element.elementor-element-e389fe1{--display:flex;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-37 .elementor-element.elementor-element-c1758fd .elementor-flip-box__back{background-color:#000000;}.elementor-37 .elementor-element.elementor-element-c1758fd{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-37 .elementor-element.elementor-element-c1758fd .elementor-flip-box__front .elementor-flip-box__layer__overlay{text-align:center;justify-content:center;}.elementor-37 .elementor-element.elementor-element-c1758fd .elementor-icon-wrapper{margin-bottom:0px;}.elementor-37 .elementor-element.elementor-element-c1758fd .elementor-icon{font-size:6px;}.elementor-37 .elementor-element.elementor-element-c1758fd .elementor-icon svg{width:6px;transform:rotate(0deg);}.elementor-37 .elementor-element.elementor-element-c1758fd .elementor-icon i{transform:rotate(0deg);}.elementor-37 .elementor-element.elementor-element-c1758fd .elementor-flip-box__front .elementor-flip-box__layer__title{margin-bottom:9px;font-size:14px;font-weight:300;}.elementor-37 .elementor-element.elementor-element-c1758fd .elementor-flip-box__front .elementor-flip-box__layer__description{font-family:"avenir-light", Sans-serif;font-size:31px;font-weight:700;}.elementor-37 .elementor-element.elementor-element-c1758fd .elementor-flip-box__back .elementor-flip-box__layer__overlay{text-align:center;}.elementor-37 .elementor-element.elementor-element-c1758fd .elementor-flip-box__button{margin-center:0;}.elementor-37 .elementor-element.elementor-element-2339121{--display:flex;}.elementor-37 .elementor-element.elementor-element-1507ef3 .elementor-flip-box__back{background-color:#000000;}.elementor-37 .elementor-element.elementor-element-1507ef3{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-37 .elementor-element.elementor-element-1507ef3 .elementor-flip-box__front .elementor-flip-box__layer__overlay{text-align:center;justify-content:center;}.elementor-37 .elementor-element.elementor-element-1507ef3 .elementor-icon-wrapper{margin-bottom:0px;}.elementor-37 .elementor-element.elementor-element-1507ef3 .elementor-icon{font-size:6px;}.elementor-37 .elementor-element.elementor-element-1507ef3 .elementor-icon svg{width:6px;transform:rotate(0deg);}.elementor-37 .elementor-element.elementor-element-1507ef3 .elementor-icon i{transform:rotate(0deg);}.elementor-37 .elementor-element.elementor-element-1507ef3 .elementor-flip-box__front .elementor-flip-box__layer__title{margin-bottom:9px;font-size:14px;font-weight:300;}.elementor-37 .elementor-element.elementor-element-1507ef3 .elementor-flip-box__front .elementor-flip-box__layer__description{font-family:"avenir-light", Sans-serif;font-size:31px;font-weight:700;}.elementor-37 .elementor-element.elementor-element-1507ef3 .elementor-flip-box__back .elementor-flip-box__layer__overlay{text-align:center;}.elementor-37 .elementor-element.elementor-element-1507ef3 .elementor-flip-box__button{margin-center:0;}.elementor-37 .elementor-element.elementor-element-419f610{--display:flex;}.elementor-37 .elementor-element.elementor-element-f86427e .elementor-flip-box__back{background-color:#000000;}.elementor-37 .elementor-element.elementor-element-f86427e{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-37 .elementor-element.elementor-element-f86427e .elementor-flip-box__front .elementor-flip-box__layer__overlay{text-align:center;justify-content:center;}.elementor-37 .elementor-element.elementor-element-f86427e .elementor-icon-wrapper{margin-bottom:0px;}.elementor-37 .elementor-element.elementor-element-f86427e .elementor-icon{font-size:6px;}.elementor-37 .elementor-element.elementor-element-f86427e .elementor-icon svg{width:6px;transform:rotate(0deg);}.elementor-37 .elementor-element.elementor-element-f86427e .elementor-icon i{transform:rotate(0deg);}.elementor-37 .elementor-element.elementor-element-f86427e .elementor-flip-box__front .elementor-flip-box__layer__title{margin-bottom:9px;font-size:14px;font-weight:300;}.elementor-37 .elementor-element.elementor-element-f86427e .elementor-flip-box__front .elementor-flip-box__layer__description{font-family:"avenir-light", Sans-serif;font-size:31px;font-weight:700;}.elementor-37 .elementor-element.elementor-element-f86427e .elementor-flip-box__back .elementor-flip-box__layer__overlay{text-align:center;}.elementor-37 .elementor-element.elementor-element-f86427e .elementor-flip-box__button{margin-center:0;}.elementor-37 .elementor-element.elementor-element-dcd31d7{--display:flex;}.elementor-37 .elementor-element.elementor-element-791b728{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-37 .elementor-element.elementor-element-791b728 .elementor-flip-box__front .elementor-flip-box__layer__overlay{text-align:center;justify-content:center;}.elementor-37 .elementor-element.elementor-element-791b728 .elementor-icon-wrapper{margin-bottom:0px;}.elementor-37 .elementor-element.elementor-element-791b728 .elementor-icon{font-size:6px;}.elementor-37 .elementor-element.elementor-element-791b728 .elementor-icon svg{width:6px;transform:rotate(0deg);}.elementor-37 .elementor-element.elementor-element-791b728 .elementor-icon i{transform:rotate(0deg);}.elementor-37 .elementor-element.elementor-element-791b728 .elementor-flip-box__front .elementor-flip-box__layer__title{margin-bottom:9px;font-size:16px;font-weight:300;}.elementor-37 .elementor-element.elementor-element-791b728 .elementor-flip-box__front .elementor-flip-box__layer__description{font-family:"avenir-light", Sans-serif;font-size:21px;font-weight:700;}.elementor-37 .elementor-element.elementor-element-791b728 .elementor-flip-box__back .elementor-flip-box__layer__overlay{text-align:center;}.elementor-37 .elementor-element.elementor-element-791b728 .elementor-flip-box__button{margin-center:0;}.elementor-37 .elementor-element.elementor-element-f5c658d{--display:flex;}.elementor-37 .elementor-element.elementor-element-b5747be .elementor-flip-box__back{background-color:#000000;}.elementor-37 .elementor-element.elementor-element-b5747be{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-37 .elementor-element.elementor-element-b5747be .elementor-flip-box__front .elementor-flip-box__layer__overlay{text-align:center;justify-content:center;}.elementor-37 .elementor-element.elementor-element-b5747be .elementor-icon-wrapper{margin-bottom:0px;}.elementor-37 .elementor-element.elementor-element-b5747be .elementor-icon{font-size:6px;}.elementor-37 .elementor-element.elementor-element-b5747be .elementor-icon svg{width:6px;transform:rotate(0deg);}.elementor-37 .elementor-element.elementor-element-b5747be .elementor-icon i{transform:rotate(0deg);}.elementor-37 .elementor-element.elementor-element-b5747be .elementor-flip-box__front .elementor-flip-box__layer__title{margin-bottom:9px;font-size:14px;font-weight:300;}.elementor-37 .elementor-element.elementor-element-b5747be .elementor-flip-box__front .elementor-flip-box__layer__description{font-family:"avenir-light", Sans-serif;font-size:31px;font-weight:700;}.elementor-37 .elementor-element.elementor-element-b5747be .elementor-flip-box__back .elementor-flip-box__layer__overlay{text-align:center;}.elementor-37 .elementor-element.elementor-element-b5747be .elementor-flip-box__button{margin-center:0;}.elementor-37 .elementor-element.elementor-element-680bb57{--display:flex;}.elementor-37 .elementor-element.elementor-element-d7331e3{text-align:center;}.elementor-37 .elementor-element.elementor-element-d7331e3 .elementor-heading-title{font-size:17px;color:#000000;}.elementor-37 .elementor-element.elementor-element-6f47075{--display:flex;}.elementor-37 .elementor-element.elementor-element-508ca85{padding:29px 29px 29px 29px;text-align:center;}.elementor-37 .elementor-element.elementor-element-508ca85 .elementor-heading-title{font-size:30px;font-weight:500;color:#000000;}.elementor-37 .elementor-element.elementor-element-332ab01{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-37 .elementor-element.elementor-element-189534f{--display:flex;--min-height:0px;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-37 .elementor-element.elementor-element-6959121 .elementor-wrapper{--video-aspect-ratio:0.5625;}.elementor-37 .elementor-element.elementor-element-d6c999a{--display:flex;}.elementor-37 .elementor-element.elementor-element-d6c999a:not(.elementor-motion-effects-element-type-background), .elementor-37 .elementor-element.elementor-element-d6c999a > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#000000;}.elementor-37 .elementor-element.elementor-element-d3f546a{text-align:center;line-height:15px;color:#FFFFFF;}.elementor-37 .elementor-element.elementor-element-f3e027b{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-37 .elementor-element.elementor-element-f3e027b.e-con{--flex-grow:0;--flex-shrink:0;}.elementor-37 .elementor-element.elementor-element-e0c6011{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-37 .elementor-element.elementor-element-e13e217{--display:flex;--min-height:0px;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-37 .elementor-element.elementor-element-5461b2a .elementor-wrapper{--video-aspect-ratio:0.5625;}.elementor-37 .elementor-element.elementor-element-9fbad45{--display:flex;}.elementor-37 .elementor-element.elementor-element-9fbad45:not(.elementor-motion-effects-element-type-background), .elementor-37 .elementor-element.elementor-element-9fbad45 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#000000;}.elementor-37 .elementor-element.elementor-element-1cd2dba{text-align:center;line-height:15px;color:#FFFFFF;}.elementor-37 .elementor-element.elementor-element-d648c2a{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-37 .elementor-element.elementor-element-d648c2a.e-con{--flex-grow:0;--flex-shrink:0;}.elementor-37 .elementor-element.elementor-element-fda151e{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:center;}.elementor-37 .elementor-element.elementor-element-d3162f8{--display:flex;}.elementor-37 .elementor-element.elementor-element-148383e{--e-image-carousel-slides-to-show:5;}.elementor-37 .elementor-element.elementor-element-9a2c16b{--e-image-carousel-slides-to-show:5;}.elementor-37 .elementor-element.elementor-element-4d4c05d{--display:flex;}body:not(.rtl) .elementor-37 .elementor-element.elementor-element-6740111{left:-38px;}body.rtl .elementor-37 .elementor-element.elementor-element-6740111{right:-38px;}.elementor-37 .elementor-element.elementor-element-6740111{top:-497px;}.elementor-37 .elementor-element.elementor-element-6740111 img{width:30%;border-style:solid;border-width:13px 13px 13px 13px;border-color:#000000;border-radius:-2px -2px -2px -2px;box-shadow:0px 0px 10px 0px rgba(0,0,0,0.5);}.elementor-37 .elementor-element.elementor-element-6c73dd6{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--overlay-opacity:0.5;--padding-top:132px;--padding-bottom:132px;--padding-left:132px;--padding-right:132px;}.elementor-37 .elementor-element.elementor-element-6c73dd6::before, .elementor-37 .elementor-element.elementor-element-6c73dd6 > .elementor-background-video-container::before, .elementor-37 .elementor-element.elementor-element-6c73dd6 > .e-con-inner > .elementor-background-video-container::before, .elementor-37 .elementor-element.elementor-element-6c73dd6 > .elementor-background-slideshow::before, .elementor-37 .elementor-element.elementor-element-6c73dd6 > .e-con-inner > .elementor-background-slideshow::before, .elementor-37 .elementor-element.elementor-element-6c73dd6 > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{background-color:#1A1616;background-image:url("https://gammaconstrucciones.cl/wp-content/uploads/2025/11/BG3.png");--background-overlay:'';}.elementor-37 .elementor-element.elementor-element-8c21bb6{--display:flex;--justify-content:center;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );}.elementor-37 .elementor-element.elementor-element-abdd409{text-align:center;}.elementor-37 .elementor-element.elementor-element-abdd409 .elementor-heading-title{font-weight:400;}.elementor-37 .elementor-element.elementor-element-30c2abb .elementor-icon-list-icon i{color:#FFFFFF;transition:color 0.3s;}.elementor-37 .elementor-element.elementor-element-30c2abb .elementor-icon-list-icon svg{fill:#FFFFFF;transition:fill 0.3s;}.elementor-37 .elementor-element.elementor-element-30c2abb{--e-icon-list-icon-size:14px;--icon-vertical-offset:0px;}.elementor-37 .elementor-element.elementor-element-30c2abb .elementor-icon-list-text{color:#FFFFFF;transition:color 0.3s;}.elementor-37 .elementor-element.elementor-element-2fa3d7d{--grid-template-columns:repeat(0, auto);text-align:center;--grid-column-gap:5px;--grid-row-gap:0px;}.elementor-37 .elementor-element.elementor-element-2fa3d7d .elementor-social-icon{background-color:#FFFFFF00;}.elementor-37 .elementor-element.elementor-element-c0c5375 .elementor-field-group{padding-right:calc( 10px/2 );padding-left:calc( 10px/2 );margin-bottom:10px;}.elementor-37 .elementor-element.elementor-element-c0c5375 .elementor-form-fields-wrapper{margin-left:calc( -10px/2 );margin-right:calc( -10px/2 );margin-bottom:-10px;}.elementor-37 .elementor-element.elementor-element-c0c5375 .elementor-field-group.recaptcha_v3-bottomleft, .elementor-37 .elementor-element.elementor-element-c0c5375 .elementor-field-group.recaptcha_v3-bottomright{margin-bottom:0;}body.rtl .elementor-37 .elementor-element.elementor-element-c0c5375 .elementor-labels-inline .elementor-field-group > label{padding-left:0px;}body:not(.rtl) .elementor-37 .elementor-element.elementor-element-c0c5375 .elementor-labels-inline .elementor-field-group > label{padding-right:0px;}body .elementor-37 .elementor-element.elementor-element-c0c5375 .elementor-labels-above .elementor-field-group > label{padding-bottom:0px;}.elementor-37 .elementor-element.elementor-element-c0c5375 .elementor-field-type-html{padding-bottom:0px;}.elementor-37 .elementor-element.elementor-element-c0c5375 .elementor-field-group .elementor-field:not(.elementor-select-wrapper){background-color:#ffffff;}.elementor-37 .elementor-element.elementor-element-c0c5375 .elementor-field-group .elementor-select-wrapper select{background-color:#ffffff;}.elementor-37 .elementor-element.elementor-element-c0c5375 .e-form__buttons__wrapper__button-next{color:#ffffff;}.elementor-37 .elementor-element.elementor-element-c0c5375 .elementor-button[type="submit"]{color:#ffffff;}.elementor-37 .elementor-element.elementor-element-c0c5375 .elementor-button[type="submit"] svg *{fill:#ffffff;}.elementor-37 .elementor-element.elementor-element-c0c5375 .e-form__buttons__wrapper__button-previous{color:#ffffff;}.elementor-37 .elementor-element.elementor-element-c0c5375 .e-form__buttons__wrapper__button-next:hover{color:#ffffff;}.elementor-37 .elementor-element.elementor-element-c0c5375 .elementor-button[type="submit"]:hover{color:#ffffff;}.elementor-37 .elementor-element.elementor-element-c0c5375 .elementor-button[type="submit"]:hover svg *{fill:#ffffff;}.elementor-37 .elementor-element.elementor-element-c0c5375 .e-form__buttons__wrapper__button-previous:hover{color:#ffffff;}.elementor-37 .elementor-element.elementor-element-c0c5375{--e-form-steps-indicators-spacing:20px;--e-form-steps-indicator-padding:30px;--e-form-steps-indicator-inactive-secondary-color:#ffffff;--e-form-steps-indicator-active-secondary-color:#ffffff;--e-form-steps-indicator-completed-secondary-color:#ffffff;--e-form-steps-divider-width:1px;--e-form-steps-divider-gap:10px;}:root{--page-title-display:none;}@media(min-width:768px){.elementor-37 .elementor-element.elementor-element-51ac6ba{--width:50%;}.elementor-37 .elementor-element.elementor-element-066b04b{--width:27%;}.elementor-37 .elementor-element.elementor-element-d4654a3{--content-width:1200px;}.elementor-37 .elementor-element.elementor-element-189534f{--width:26%;}.elementor-37 .elementor-element.elementor-element-f3e027b{--width:59.18%;}.elementor-37 .elementor-element.elementor-element-e13e217{--width:26%;}.elementor-37 .elementor-element.elementor-element-d648c2a{--width:59.18%;}.elementor-37 .elementor-element.elementor-element-8c21bb6{--width:100%;}}@media(max-width:1024px){.elementor-37 .elementor-element.elementor-element-67a8a177{padding:5em 1em 5em 1em;}}@media(max-width:767px){.elementor-37 .elementor-element.elementor-element-67a8a177{padding:4em 0.5em 4em 0.5em;}.elementor-37 .elementor-element.elementor-element-2e6637e .elementor-slide-heading{font-size:28px;}.elementor-37 .elementor-element.elementor-element-d76e03a .elementor-heading-title{font-size:34px;}.elementor-37 .elementor-element.elementor-element-1507ef3{padding:0px 0px 0px 0px;}.elementor-37 .elementor-element.elementor-element-148383e{--e-image-carousel-slides-to-show:3;}.elementor-37 .elementor-element.elementor-element-9a2c16b{--e-image-carousel-slides-to-show:3;}body:not(.rtl) .elementor-37 .elementor-element.elementor-element-6740111{left:11px;}body.rtl .elementor-37 .elementor-element.elementor-element-6740111{right:11px;}.elementor-37 .elementor-element.elementor-element-6740111{top:-197px;}.elementor-37 .elementor-element.elementor-element-6740111 img{width:47%;}.elementor-37 .elementor-element.elementor-element-6c73dd6{--padding-top:03px;--padding-bottom:3px;--padding-left:3px;--padding-right:3px;}.elementor-37 .elementor-element.elementor-element-8c21bb6{--width:1600px;}}/* Start custom CSS for flip-box, class: .elementor-element-c1758fd *//* CÍRCULO PERFECTO EN MÓVIL PARA FLIP BOX */
@media (max-width: 767px){
  /* Limita el ancho y centra el widget */
  .circulo-paso .elementor-widget-container{
    max-width: 220px;          /* ajusta a tu gusto */
    margin-left: auto;
    margin-right: auto;
  }

  /* Cuadrado 1:1 (se vuelve círculo con border-radius) */
  .circulo-paso .elementor-flip-box{
    width: 100%;
    aspect-ratio: 1 / 1;       /* altura = ancho */
    height: auto !important;   /* anula alturas fijas del widget */
    min-height: 0 !important;
    border-radius: 50% !important;
    overflow: hidden;
  }

  /* Asegura que las capas también sean redondas */
  .circulo-paso .elementor-flip-box__layer,
  .circulo-paso .elementor-flip-box__layer__overlay{
    border-radius: 50% !important;
  }

  /* Centra el contenido dentro del círculo */
  .circulo-paso .elementor-flip-box__layer__overlay{
    display: grid;
    place-items: center;
    padding: 18px;
    text-align: center;
  }
}

/* (Opcional) Para navegadores sin aspect-ratio */
@supports not (aspect-ratio: 1/1){
  .circulo-paso .elementor-flip-box{ height: auto !important; }
  .circulo-paso .elementor-flip-box::before{
    content:""; display:block; padding-top:100%;
  }
  .circulo-paso .elementor-flip-box > *{ position:absolute; inset:0; }
}/* End custom CSS */
/* Start custom CSS for flip-box, class: .elementor-element-1507ef3 */.circulo-paso .elementor-widget-container { 
  width: clamp(140px, 18vw, 230px);
}
.circulo-paso .elementor-flip-box {
  height: clamp(140px, 18vw, 230px);
}

/* Redondear todo y centrar contenido */
.circulo-paso .elementor-flip-box,
.circulo-paso .elementor-flip-box__layer,
.circulo-paso .elementor-flip-box__layer__overlay {
  border-radius: 50% !important;
  overflow: hidden;
}
.circulo-paso .elementor-flip-box__layer__overlay {
  display: grid;
  place-items: center;
  padding: 20px;
  text-align: center;
}

/* Colores y tipografías (ajusta a tu marca) */
.circulo-paso .elementor-flip-box__front .elementor-flip-box__layer__overlay,
.circulo-paso .elementor-flip-box__back .elementor-flip-box__layer__overlay {
  background: #EB0B2D;   /* rojo */
  color: #fff;
}
.circulo-paso .elementor-flip-box__button {
  display: none; /* ocultar botón si no lo usas */
}

/* Texto superior “1 PASO” más pequeño y espaciado */
.circulo-paso .elementor-flip-box__heading {
  letter-spacing: 2px;
}
Superponer sobre la franja negra
En la sección blanca, pestaña Avanzado → Margen superior pon un margen negativo (p. ej. -70px) hasta que los círculos queden mitad sobre negro, mitad sobre blanco. Si hace falta, sube el z-index (p. ej. 2).
Con esto tienes: círculos, flip al pasar el mouse y textos delante/detrás sin programar nada.
B) Sin Elementor Pro (HTML + CSS listo para pegar)
En la sección blanca agrega un widget HTML.
Pega este código (edita los textos del anverso/reverso):
html
Copiar código
<style>
  .pasos-circulos{
    --rojo: #EB0B2D;
    --diametro: clamp(140px, 18vw, 230px);
    display:flex; justify-content:space-evenly; align-items:flex-start;
    gap: clamp(12px, 3vw, 32px); flex-wrap: wrap;
    position: relative;
  }
  .flip-circle{
    width: var(--diametro); height: var(--diametro);
    perspective: 1000px; cursor: pointer; /* click en móvil */
    outline: none;
  }
  .flip-inner{
    position: relative; width: 100%; height: 100%;
    transform-style: preserve-3d; transition: transform .6s ease;
  }
  .flip-circle:hover .flip-inner,
  .flip-circle.is-flipped .flip-inner{ transform: rotateY(180deg); }

  .cara{
    position:absolute; inset:0;
    border-radius:50%;
    background: var(--rojo); color:#fff;
    display:grid; place-items:center; text-align:center;
    padding: 18px; backface-visibility: hidden;
    box-shadow: 0 8px 18px rgba(0,0,0,.18);
  }
  .cara.back{ transform: rotateY(180deg); }

  .sup{ font-size:.8rem; letter-spacing: 2px; display:block; margin-bottom:.2rem; }
  .ttl{ font-size: clamp(1rem, 2.2vw, 1.6rem); font-weight:600; line-height:1.1; text-transform: uppercase; }
  .desc{ font-size: .95rem; line-height:1.35; }

  /* Ajuste para que “pisen” la franja negra (pon este margen a la fila de círculos) */
  .pasos-circulos.superpuesto { margin-top: -70px; z-index: 2; }
</style>

<div class="pasos-circulos superpuesto">
  <!-- 1 -->
  <article class="flip-circle" tabindex="0" aria-label="1 Paso: Visítanos">
    <div class="flip-inner">
      <div class="cara front">
        <span class="sup">1 PASO</span>
        <div class="ttl">VISÍTANOS</div>
      </div>
      <div class="cara back">
        <p class="desc">Agenda tu cita y conoce nuestras opciones.</p>
      </div>
    </div>
  </article>

  <!-- 2 -->
  <article class="flip-circle" tabindex="0" aria-label="2 Paso: Diseño">
    <div class="flip-inner">
      <div class="cara front">
        <span class="sup">2 PASO</span>
        <div class="ttl">DISEÑO</div>
      </div>
      <div class="cara back">
        <p class="desc">Creamos la propuesta a tu medida.</p>
      </div>
    </div>
  </article>

  <!-- 3 -->
  <article class="flip-circle" tabindex="0" aria-label="3 Paso: Ejecución">
    <div class="flip-inner">
      <div class="cara front">
        <span class="sup">3 PASO</span>
        <div class="ttl">EJECUCIÓN</div>
      </div>
      <div class="cara back">
        <p class="desc">Coordinamos materiales y tiempos.</p>
      </div>
    </div>
  </article>

  <!-- 4 -->
  <article class="flip-circle" tabindex="0" aria-label="4 Paso: Construcción">
    <div class="flip-inner">
      <div class="cara front">
        <span class="sup">4 PASO</span>
        <div class="ttl">CONSTRUCCIÓN</div>
      </div>
      <div class="cara back">
        <p class="desc">Ejecutamos la obra con control de calidad.</p>
      </div>
    </div>
  </article>

  <!-- 5 -->
  <article class="flip-circle" tabindex="0" aria-label="5 Paso: Entrega">
    <div class="flip-inner">
      <div class="cara front">
        <span class="sup">5 PASO</span>
        <div class="ttl">ENTREGA</div>
      </div>
      <div class="cara back">
        <p class="desc">Hacemos entrega y cierre del proyecto.</p>
      </div>
    </div>
  </article>
</div>

<script>
  // Soporte para móvil (tap) y teclado (Enter/Espacio)
  (function(){
    document.querySelectorAll('.flip-circle').forEach(function(card){
      card.addEventListener('click', function(){ card.classList.toggle('is-flipped'); });
      card.addEventListener('keydown', function(e){
        if(e.key === 'Enter' || e.key === ' '){
          e.preventDefault(); card.classList.toggle('is-flipped');
        }
      });
    });
  })();
</script>/* End custom CSS */
/* Start custom CSS for flip-box, class: .elementor-element-f86427e */.circulo-paso .elementor-widget-container { 
  width: clamp(140px, 18vw, 230px);
}
.circulo-paso .elementor-flip-box {
  height: clamp(140px, 18vw, 230px);
}

/* Redondear todo y centrar contenido */
.circulo-paso .elementor-flip-box,
.circulo-paso .elementor-flip-box__layer,
.circulo-paso .elementor-flip-box__layer__overlay {
  border-radius: 50% !important;
  overflow: hidden;
}
.circulo-paso .elementor-flip-box__layer__overlay {
  display: grid;
  place-items: center;
  padding: 20px;
  text-align: center;
}

/* Colores y tipografías (ajusta a tu marca) */
.circulo-paso .elementor-flip-box__front .elementor-flip-box__layer__overlay,
.circulo-paso .elementor-flip-box__back .elementor-flip-box__layer__overlay {
  background: #EB0B2D;   /* rojo */
  color: #fff;
}
.circulo-paso .elementor-flip-box__button {
  display: none; /* ocultar botón si no lo usas */
}

/* Texto superior “1 PASO” más pequeño y espaciado */
.circulo-paso .elementor-flip-box__heading {
  letter-spacing: 2px;
}
Superponer sobre la franja negra
En la sección blanca, pestaña Avanzado → Margen superior pon un margen negativo (p. ej. -70px) hasta que los círculos queden mitad sobre negro, mitad sobre blanco. Si hace falta, sube el z-index (p. ej. 2).
Con esto tienes: círculos, flip al pasar el mouse y textos delante/detrás sin programar nada.
B) Sin Elementor Pro (HTML + CSS listo para pegar)
En la sección blanca agrega un widget HTML.
Pega este código (edita los textos del anverso/reverso):
html
Copiar código
<style>
  .pasos-circulos{
    --rojo: #EB0B2D;
    --diametro: clamp(140px, 18vw, 230px);
    display:flex; justify-content:space-evenly; align-items:flex-start;
    gap: clamp(12px, 3vw, 32px); flex-wrap: wrap;
    position: relative;
  }
  .flip-circle{
    width: var(--diametro); height: var(--diametro);
    perspective: 1000px; cursor: pointer; /* click en móvil */
    outline: none;
  }
  .flip-inner{
    position: relative; width: 100%; height: 100%;
    transform-style: preserve-3d; transition: transform .6s ease;
  }
  .flip-circle:hover .flip-inner,
  .flip-circle.is-flipped .flip-inner{ transform: rotateY(180deg); }

  .cara{
    position:absolute; inset:0;
    border-radius:50%;
    background: var(--rojo); color:#fff;
    display:grid; place-items:center; text-align:center;
    padding: 18px; backface-visibility: hidden;
    box-shadow: 0 8px 18px rgba(0,0,0,.18);
  }
  .cara.back{ transform: rotateY(180deg); }

  .sup{ font-size:.8rem; letter-spacing: 2px; display:block; margin-bottom:.2rem; }
  .ttl{ font-size: clamp(1rem, 2.2vw, 1.6rem); font-weight:600; line-height:1.1; text-transform: uppercase; }
  .desc{ font-size: .95rem; line-height:1.35; }

  /* Ajuste para que “pisen” la franja negra (pon este margen a la fila de círculos) */
  .pasos-circulos.superpuesto { margin-top: -70px; z-index: 2; }
</style>

<div class="pasos-circulos superpuesto">
  <!-- 1 -->
  <article class="flip-circle" tabindex="0" aria-label="1 Paso: Visítanos">
    <div class="flip-inner">
      <div class="cara front">
        <span class="sup">1 PASO</span>
        <div class="ttl">VISÍTANOS</div>
      </div>
      <div class="cara back">
        <p class="desc">Agenda tu cita y conoce nuestras opciones.</p>
      </div>
    </div>
  </article>

  <!-- 2 -->
  <article class="flip-circle" tabindex="0" aria-label="2 Paso: Diseño">
    <div class="flip-inner">
      <div class="cara front">
        <span class="sup">2 PASO</span>
        <div class="ttl">DISEÑO</div>
      </div>
      <div class="cara back">
        <p class="desc">Creamos la propuesta a tu medida.</p>
      </div>
    </div>
  </article>

  <!-- 3 -->
  <article class="flip-circle" tabindex="0" aria-label="3 Paso: Ejecución">
    <div class="flip-inner">
      <div class="cara front">
        <span class="sup">3 PASO</span>
        <div class="ttl">EJECUCIÓN</div>
      </div>
      <div class="cara back">
        <p class="desc">Coordinamos materiales y tiempos.</p>
      </div>
    </div>
  </article>

  <!-- 4 -->
  <article class="flip-circle" tabindex="0" aria-label="4 Paso: Construcción">
    <div class="flip-inner">
      <div class="cara front">
        <span class="sup">4 PASO</span>
        <div class="ttl">CONSTRUCCIÓN</div>
      </div>
      <div class="cara back">
        <p class="desc">Ejecutamos la obra con control de calidad.</p>
      </div>
    </div>
  </article>

  <!-- 5 -->
  <article class="flip-circle" tabindex="0" aria-label="5 Paso: Entrega">
    <div class="flip-inner">
      <div class="cara front">
        <span class="sup">5 PASO</span>
        <div class="ttl">ENTREGA</div>
      </div>
      <div class="cara back">
        <p class="desc">Hacemos entrega y cierre del proyecto.</p>
      </div>
    </div>
  </article>
</div>

<script>
  // Soporte para móvil (tap) y teclado (Enter/Espacio)
  (function(){
    document.querySelectorAll('.flip-circle').forEach(function(card){
      card.addEventListener('click', function(){ card.classList.toggle('is-flipped'); });
      card.addEventListener('keydown', function(e){
        if(e.key === 'Enter' || e.key === ' '){
          e.preventDefault(); card.classList.toggle('is-flipped');
        }
      });
    });
  })();
</script>/* End custom CSS */
/* Start custom CSS for flip-box, class: .elementor-element-791b728 */.circulo-paso .elementor-widget-container { 
  width: clamp(140px, 18vw, 230px);
}
.circulo-paso .elementor-flip-box {
  height: clamp(140px, 18vw, 230px);
}

/* Redondear todo y centrar contenido */
.circulo-paso .elementor-flip-box,
.circulo-paso .elementor-flip-box__layer,
.circulo-paso .elementor-flip-box__layer__overlay {
  border-radius: 50% !important;
  overflow: hidden;
}
.circulo-paso .elementor-flip-box__layer__overlay {
  display: grid;
  place-items: center;
  padding: 20px;
  text-align: center;
}

/* Colores y tipografías (ajusta a tu marca) */
.circulo-paso .elementor-flip-box__front .elementor-flip-box__layer__overlay,
.circulo-paso .elementor-flip-box__back .elementor-flip-box__layer__overlay {
  background: #EB0B2D;   /* rojo */
  color: #fff;
}
.circulo-paso .elementor-flip-box__button {
  display: none; /* ocultar botón si no lo usas */
}

/* Texto superior “1 PASO” más pequeño y espaciado */
.circulo-paso .elementor-flip-box__heading {
  letter-spacing: 2px;
}
Superponer sobre la franja negra
En la sección blanca, pestaña Avanzado → Margen superior pon un margen negativo (p. ej. -70px) hasta que los círculos queden mitad sobre negro, mitad sobre blanco. Si hace falta, sube el z-index (p. ej. 2).
Con esto tienes: círculos, flip al pasar el mouse y textos delante/detrás sin programar nada.
B) Sin Elementor Pro (HTML + CSS listo para pegar)
En la sección blanca agrega un widget HTML.
Pega este código (edita los textos del anverso/reverso):
html
Copiar código
<style>
  .pasos-circulos{
    --rojo: #EB0B2D;
    --diametro: clamp(140px, 18vw, 230px);
    display:flex; justify-content:space-evenly; align-items:flex-start;
    gap: clamp(12px, 3vw, 32px); flex-wrap: wrap;
    position: relative;
  }
  .flip-circle{
    width: var(--diametro); height: var(--diametro);
    perspective: 1000px; cursor: pointer; /* click en móvil */
    outline: none;
  }
  .flip-inner{
    position: relative; width: 100%; height: 100%;
    transform-style: preserve-3d; transition: transform .6s ease;
  }
  .flip-circle:hover .flip-inner,
  .flip-circle.is-flipped .flip-inner{ transform: rotateY(180deg); }

  .cara{
    position:absolute; inset:0;
    border-radius:50%;
    background: var(--rojo); color:#fff;
    display:grid; place-items:center; text-align:center;
    padding: 18px; backface-visibility: hidden;
    box-shadow: 0 8px 18px rgba(0,0,0,.18);
  }
  .cara.back{ transform: rotateY(180deg); }

  .sup{ font-size:.8rem; letter-spacing: 2px; display:block; margin-bottom:.2rem; }
  .ttl{ font-size: clamp(1rem, 2.2vw, 1.6rem); font-weight:600; line-height:1.1; text-transform: uppercase; }
  .desc{ font-size: .95rem; line-height:1.35; }

  /* Ajuste para que “pisen” la franja negra (pon este margen a la fila de círculos) */
  .pasos-circulos.superpuesto { margin-top: -70px; z-index: 2; }
</style>

<div class="pasos-circulos superpuesto">
  <!-- 1 -->
  <article class="flip-circle" tabindex="0" aria-label="1 Paso: Visítanos">
    <div class="flip-inner">
      <div class="cara front">
        <span class="sup">1 PASO</span>
        <div class="ttl">VISÍTANOS</div>
      </div>
      <div class="cara back">
        <p class="desc">Agenda tu cita y conoce nuestras opciones.</p>
      </div>
    </div>
  </article>

  <!-- 2 -->
  <article class="flip-circle" tabindex="0" aria-label="2 Paso: Diseño">
    <div class="flip-inner">
      <div class="cara front">
        <span class="sup">2 PASO</span>
        <div class="ttl">DISEÑO</div>
      </div>
      <div class="cara back">
        <p class="desc">Creamos la propuesta a tu medida.</p>
      </div>
    </div>
  </article>

  <!-- 3 -->
  <article class="flip-circle" tabindex="0" aria-label="3 Paso: Ejecución">
    <div class="flip-inner">
      <div class="cara front">
        <span class="sup">3 PASO</span>
        <div class="ttl">EJECUCIÓN</div>
      </div>
      <div class="cara back">
        <p class="desc">Coordinamos materiales y tiempos.</p>
      </div>
    </div>
  </article>

  <!-- 4 -->
  <article class="flip-circle" tabindex="0" aria-label="4 Paso: Construcción">
    <div class="flip-inner">
      <div class="cara front">
        <span class="sup">4 PASO</span>
        <div class="ttl">CONSTRUCCIÓN</div>
      </div>
      <div class="cara back">
        <p class="desc">Ejecutamos la obra con control de calidad.</p>
      </div>
    </div>
  </article>

  <!-- 5 -->
  <article class="flip-circle" tabindex="0" aria-label="5 Paso: Entrega">
    <div class="flip-inner">
      <div class="cara front">
        <span class="sup">5 PASO</span>
        <div class="ttl">ENTREGA</div>
      </div>
      <div class="cara back">
        <p class="desc">Hacemos entrega y cierre del proyecto.</p>
      </div>
    </div>
  </article>
</div>

<script>
  // Soporte para móvil (tap) y teclado (Enter/Espacio)
  (function(){
    document.querySelectorAll('.flip-circle').forEach(function(card){
      card.addEventListener('click', function(){ card.classList.toggle('is-flipped'); });
      card.addEventListener('keydown', function(e){
        if(e.key === 'Enter' || e.key === ' '){
          e.preventDefault(); card.classList.toggle('is-flipped');
        }
      });
    });
  })();
</script>/* End custom CSS */
/* Start custom CSS for flip-box, class: .elementor-element-b5747be */.circulo-paso .elementor-widget-container { 
  width: clamp(140px, 18vw, 230px);
}
.circulo-paso .elementor-flip-box {
  height: clamp(140px, 18vw, 230px);
}

/* Redondear todo y centrar contenido */
.circulo-paso .elementor-flip-box,
.circulo-paso .elementor-flip-box__layer,
.circulo-paso .elementor-flip-box__layer__overlay {
  border-radius: 50% !important;
  overflow: hidden;
}
.circulo-paso .elementor-flip-box__layer__overlay {
  display: grid;
  place-items: center;
  padding: 20px;
  text-align: center;
}

/* Colores y tipografías (ajusta a tu marca) */
.circulo-paso .elementor-flip-box__front .elementor-flip-box__layer__overlay,
.circulo-paso .elementor-flip-box__back .elementor-flip-box__layer__overlay {
  background: #EB0B2D;   /* rojo */
  color: #fff;
}
.circulo-paso .elementor-flip-box__button {
  display: none; /* ocultar botón si no lo usas */
}

/* Texto superior “1 PASO” más pequeño y espaciado */
.circulo-paso .elementor-flip-box__heading {
  letter-spacing: 2px;
}
Superponer sobre la franja negra
En la sección blanca, pestaña Avanzado → Margen superior pon un margen negativo (p. ej. -70px) hasta que los círculos queden mitad sobre negro, mitad sobre blanco. Si hace falta, sube el z-index (p. ej. 2).
Con esto tienes: círculos, flip al pasar el mouse y textos delante/detrás sin programar nada.
B) Sin Elementor Pro (HTML + CSS listo para pegar)
En la sección blanca agrega un widget HTML.
Pega este código (edita los textos del anverso/reverso):
html
Copiar código
<style>
  .pasos-circulos{
    --rojo: #EB0B2D;
    --diametro: clamp(140px, 18vw, 230px);
    display:flex; justify-content:space-evenly; align-items:flex-start;
    gap: clamp(12px, 3vw, 32px); flex-wrap: wrap;
    position: relative;
  }
  .flip-circle{
    width: var(--diametro); height: var(--diametro);
    perspective: 1000px; cursor: pointer; /* click en móvil */
    outline: none;
  }
  .flip-inner{
    position: relative; width: 100%; height: 100%;
    transform-style: preserve-3d; transition: transform .6s ease;
  }
  .flip-circle:hover .flip-inner,
  .flip-circle.is-flipped .flip-inner{ transform: rotateY(180deg); }

  .cara{
    position:absolute; inset:0;
    border-radius:50%;
    background: var(--rojo); color:#fff;
    display:grid; place-items:center; text-align:center;
    padding: 18px; backface-visibility: hidden;
    box-shadow: 0 8px 18px rgba(0,0,0,.18);
  }
  .cara.back{ transform: rotateY(180deg); }

  .sup{ font-size:.8rem; letter-spacing: 2px; display:block; margin-bottom:.2rem; }
  .ttl{ font-size: clamp(1rem, 2.2vw, 1.6rem); font-weight:600; line-height:1.1; text-transform: uppercase; }
  .desc{ font-size: .95rem; line-height:1.35; }

  /* Ajuste para que “pisen” la franja negra (pon este margen a la fila de círculos) */
  .pasos-circulos.superpuesto { margin-top: -70px; z-index: 2; }
</style>

<div class="pasos-circulos superpuesto">
  <!-- 1 -->
  <article class="flip-circle" tabindex="0" aria-label="1 Paso: Visítanos">
    <div class="flip-inner">
      <div class="cara front">
        <span class="sup">1 PASO</span>
        <div class="ttl">VISÍTANOS</div>
      </div>
      <div class="cara back">
        <p class="desc">Agenda tu cita y conoce nuestras opciones.</p>
      </div>
    </div>
  </article>

  <!-- 2 -->
  <article class="flip-circle" tabindex="0" aria-label="2 Paso: Diseño">
    <div class="flip-inner">
      <div class="cara front">
        <span class="sup">2 PASO</span>
        <div class="ttl">DISEÑO</div>
      </div>
      <div class="cara back">
        <p class="desc">Creamos la propuesta a tu medida.</p>
      </div>
    </div>
  </article>

  <!-- 3 -->
  <article class="flip-circle" tabindex="0" aria-label="3 Paso: Ejecución">
    <div class="flip-inner">
      <div class="cara front">
        <span class="sup">3 PASO</span>
        <div class="ttl">EJECUCIÓN</div>
      </div>
      <div class="cara back">
        <p class="desc">Coordinamos materiales y tiempos.</p>
      </div>
    </div>
  </article>

  <!-- 4 -->
  <article class="flip-circle" tabindex="0" aria-label="4 Paso: Construcción">
    <div class="flip-inner">
      <div class="cara front">
        <span class="sup">4 PASO</span>
        <div class="ttl">CONSTRUCCIÓN</div>
      </div>
      <div class="cara back">
        <p class="desc">Ejecutamos la obra con control de calidad.</p>
      </div>
    </div>
  </article>

  <!-- 5 -->
  <article class="flip-circle" tabindex="0" aria-label="5 Paso: Entrega">
    <div class="flip-inner">
      <div class="cara front">
        <span class="sup">5 PASO</span>
        <div class="ttl">ENTREGA</div>
      </div>
      <div class="cara back">
        <p class="desc">Hacemos entrega y cierre del proyecto.</p>
      </div>
    </div>
  </article>
</div>

<script>
  // Soporte para móvil (tap) y teclado (Enter/Espacio)
  (function(){
    document.querySelectorAll('.flip-circle').forEach(function(card){
      card.addEventListener('click', function(){ card.classList.toggle('is-flipped'); });
      card.addEventListener('keydown', function(e){
        if(e.key === 'Enter' || e.key === ' '){
          e.preventDefault(); card.classList.toggle('is-flipped');
        }
      });
    });
  })();
</script>/* End custom CSS */