.elementor-266 .elementor-element.elementor-element-4e333ef{--display:flex;}.elementor-266 .elementor-element.elementor-element-4e333ef:not(.elementor-motion-effects-element-type-background), .elementor-266 .elementor-element.elementor-element-4e333ef > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#000000;}.elementor-266 .elementor-element.elementor-element-ff62d17{padding:21px 21px 21px 21px;text-align:center;font-size:21px;color:#FFFAFA;}.elementor-266 .elementor-element.elementor-element-ad7e135{--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:-63px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-266 .elementor-element.elementor-element-b8e0e5f{--display:flex;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-266 .elementor-element.elementor-element-ab82cd7 .elementor-flip-box__back{background-color:#000000;}.elementor-266 .elementor-element.elementor-element-ab82cd7{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-266 .elementor-element.elementor-element-ab82cd7 .elementor-flip-box__front .elementor-flip-box__layer__overlay{text-align:center;justify-content:center;}.elementor-266 .elementor-element.elementor-element-ab82cd7 .elementor-icon-wrapper{margin-bottom:0px;}.elementor-266 .elementor-element.elementor-element-ab82cd7 .elementor-icon{font-size:6px;}.elementor-266 .elementor-element.elementor-element-ab82cd7 .elementor-icon svg{width:6px;transform:rotate(0deg);}.elementor-266 .elementor-element.elementor-element-ab82cd7 .elementor-icon i{transform:rotate(0deg);}.elementor-266 .elementor-element.elementor-element-ab82cd7 .elementor-flip-box__front .elementor-flip-box__layer__title{margin-bottom:9px;font-size:14px;font-weight:300;}.elementor-266 .elementor-element.elementor-element-ab82cd7 .elementor-flip-box__front .elementor-flip-box__layer__description{font-family:"avenir-light", Sans-serif;font-size:31px;font-weight:700;}.elementor-266 .elementor-element.elementor-element-ab82cd7 .elementor-flip-box__back .elementor-flip-box__layer__overlay{text-align:center;}.elementor-266 .elementor-element.elementor-element-ab82cd7 .elementor-flip-box__button{margin-center:0;}.elementor-266 .elementor-element.elementor-element-c8b1efb{--display:flex;}.elementor-266 .elementor-element.elementor-element-e18b090 .elementor-flip-box__back{background-color:#000000;}.elementor-266 .elementor-element.elementor-element-e18b090{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-266 .elementor-element.elementor-element-e18b090 .elementor-flip-box__front .elementor-flip-box__layer__overlay{text-align:center;justify-content:center;}.elementor-266 .elementor-element.elementor-element-e18b090 .elementor-icon-wrapper{margin-bottom:0px;}.elementor-266 .elementor-element.elementor-element-e18b090 .elementor-icon{font-size:6px;}.elementor-266 .elementor-element.elementor-element-e18b090 .elementor-icon svg{width:6px;transform:rotate(0deg);}.elementor-266 .elementor-element.elementor-element-e18b090 .elementor-icon i{transform:rotate(0deg);}.elementor-266 .elementor-element.elementor-element-e18b090 .elementor-flip-box__front .elementor-flip-box__layer__title{margin-bottom:9px;font-size:14px;font-weight:300;}.elementor-266 .elementor-element.elementor-element-e18b090 .elementor-flip-box__front .elementor-flip-box__layer__description{font-family:"avenir-light", Sans-serif;font-size:31px;font-weight:700;}.elementor-266 .elementor-element.elementor-element-e18b090 .elementor-flip-box__back .elementor-flip-box__layer__overlay{text-align:center;}.elementor-266 .elementor-element.elementor-element-e18b090 .elementor-flip-box__button{margin-center:0;}.elementor-266 .elementor-element.elementor-element-2bdcc20{--display:flex;}.elementor-266 .elementor-element.elementor-element-f2eed47 .elementor-flip-box__back{background-color:#000000;}.elementor-266 .elementor-element.elementor-element-f2eed47{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-266 .elementor-element.elementor-element-f2eed47 .elementor-flip-box__front .elementor-flip-box__layer__overlay{text-align:center;justify-content:center;}.elementor-266 .elementor-element.elementor-element-f2eed47 .elementor-icon-wrapper{margin-bottom:0px;}.elementor-266 .elementor-element.elementor-element-f2eed47 .elementor-icon{font-size:6px;}.elementor-266 .elementor-element.elementor-element-f2eed47 .elementor-icon svg{width:6px;transform:rotate(0deg);}.elementor-266 .elementor-element.elementor-element-f2eed47 .elementor-icon i{transform:rotate(0deg);}.elementor-266 .elementor-element.elementor-element-f2eed47 .elementor-flip-box__front .elementor-flip-box__layer__title{margin-bottom:9px;font-size:14px;font-weight:300;}.elementor-266 .elementor-element.elementor-element-f2eed47 .elementor-flip-box__front .elementor-flip-box__layer__description{font-family:"avenir-light", Sans-serif;font-size:31px;font-weight:700;}.elementor-266 .elementor-element.elementor-element-f2eed47 .elementor-flip-box__back .elementor-flip-box__layer__overlay{text-align:center;}.elementor-266 .elementor-element.elementor-element-f2eed47 .elementor-flip-box__button{margin-center:0;}.elementor-266 .elementor-element.elementor-element-84aa6fe{--display:flex;}.elementor-266 .elementor-element.elementor-element-97c9b49{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-266 .elementor-element.elementor-element-97c9b49 .elementor-flip-box__front .elementor-flip-box__layer__overlay{text-align:center;justify-content:center;}.elementor-266 .elementor-element.elementor-element-97c9b49 .elementor-icon-wrapper{margin-bottom:0px;}.elementor-266 .elementor-element.elementor-element-97c9b49 .elementor-icon{font-size:6px;}.elementor-266 .elementor-element.elementor-element-97c9b49 .elementor-icon svg{width:6px;transform:rotate(0deg);}.elementor-266 .elementor-element.elementor-element-97c9b49 .elementor-icon i{transform:rotate(0deg);}.elementor-266 .elementor-element.elementor-element-97c9b49 .elementor-flip-box__front .elementor-flip-box__layer__title{margin-bottom:9px;font-size:16px;font-weight:300;}.elementor-266 .elementor-element.elementor-element-97c9b49 .elementor-flip-box__front .elementor-flip-box__layer__description{font-family:"avenir-light", Sans-serif;font-size:21px;font-weight:700;}.elementor-266 .elementor-element.elementor-element-97c9b49 .elementor-flip-box__back .elementor-flip-box__layer__overlay{text-align:center;}.elementor-266 .elementor-element.elementor-element-97c9b49 .elementor-flip-box__button{margin-center:0;}.elementor-266 .elementor-element.elementor-element-51c94e8{--display:flex;}.elementor-266 .elementor-element.elementor-element-2b9939d .elementor-flip-box__back{background-color:#000000;}.elementor-266 .elementor-element.elementor-element-2b9939d{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-266 .elementor-element.elementor-element-2b9939d .elementor-flip-box__front .elementor-flip-box__layer__overlay{text-align:center;justify-content:center;}.elementor-266 .elementor-element.elementor-element-2b9939d .elementor-icon-wrapper{margin-bottom:0px;}.elementor-266 .elementor-element.elementor-element-2b9939d .elementor-icon{font-size:6px;}.elementor-266 .elementor-element.elementor-element-2b9939d .elementor-icon svg{width:6px;transform:rotate(0deg);}.elementor-266 .elementor-element.elementor-element-2b9939d .elementor-icon i{transform:rotate(0deg);}.elementor-266 .elementor-element.elementor-element-2b9939d .elementor-flip-box__front .elementor-flip-box__layer__title{margin-bottom:9px;font-size:14px;font-weight:300;}.elementor-266 .elementor-element.elementor-element-2b9939d .elementor-flip-box__front .elementor-flip-box__layer__description{font-family:"avenir-light", Sans-serif;font-size:31px;font-weight:700;}.elementor-266 .elementor-element.elementor-element-2b9939d .elementor-flip-box__back .elementor-flip-box__layer__overlay{text-align:center;}.elementor-266 .elementor-element.elementor-element-2b9939d .elementor-flip-box__button{margin-center:0;}.elementor-266 .elementor-element.elementor-element-16f8db7{--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-266 .elementor-element.elementor-element-2cb3bcd{--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-266 .elementor-element.elementor-element-a9ce6fd{--divider-border-style:solid;--divider-color:#000;--divider-border-width:1px;}.elementor-266 .elementor-element.elementor-element-a9ce6fd .elementor-divider-separator{width:100%;}.elementor-266 .elementor-element.elementor-element-a9ce6fd .elementor-divider{padding-block-start:15px;padding-block-end:15px;}.elementor-266 .elementor-element.elementor-element-2ea4c82{--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-266 .elementor-element.elementor-element-2107b9c{--divider-border-style:solid;--divider-color:#000;--divider-border-width:1px;}.elementor-266 .elementor-element.elementor-element-2107b9c .elementor-divider-separator{width:100%;}.elementor-266 .elementor-element.elementor-element-2107b9c .elementor-divider{padding-block-start:15px;padding-block-end:15px;}.elementor-266 .elementor-element.elementor-element-b400584{--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-266 .elementor-element.elementor-element-42a6ae9{--divider-border-style:solid;--divider-color:#000;--divider-border-width:1px;}.elementor-266 .elementor-element.elementor-element-42a6ae9 .elementor-divider-separator{width:100%;}.elementor-266 .elementor-element.elementor-element-42a6ae9 .elementor-divider{padding-block-start:15px;padding-block-end:15px;}.elementor-266 .elementor-element.elementor-element-b2dfd26{--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-266 .elementor-element.elementor-element-a8521b0{--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-266 .elementor-element.elementor-element-49d6b1c{--divider-border-style:solid;--divider-color:#000;--divider-border-width:1px;}.elementor-266 .elementor-element.elementor-element-49d6b1c .elementor-divider-separator{width:100%;}.elementor-266 .elementor-element.elementor-element-49d6b1c .elementor-divider{padding-block-start:15px;padding-block-end:15px;}.elementor-266 .elementor-element.elementor-element-3ef0717{--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-266 .elementor-element.elementor-element-c005d55{--divider-border-style:solid;--divider-color:#000;--divider-border-width:1px;}.elementor-266 .elementor-element.elementor-element-c005d55 .elementor-divider-separator{width:100%;}.elementor-266 .elementor-element.elementor-element-c005d55 .elementor-divider{padding-block-start:15px;padding-block-end:15px;}.elementor-266 .elementor-element.elementor-element-40a6e6a{--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-266 .elementor-element.elementor-element-f778b8f{--divider-border-style:solid;--divider-color:#000;--divider-border-width:1px;}.elementor-266 .elementor-element.elementor-element-f778b8f .elementor-divider-separator{width:100%;}.elementor-266 .elementor-element.elementor-element-f778b8f .elementor-divider{padding-block-start:15px;padding-block-end:15px;}.elementor-266 .elementor-element.elementor-element-7ad4787{--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-266 .elementor-element.elementor-element-8a34147{--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-266 .elementor-element.elementor-element-d7a55e2{--divider-border-style:solid;--divider-color:#000;--divider-border-width:1px;}.elementor-266 .elementor-element.elementor-element-d7a55e2 .elementor-divider-separator{width:100%;}.elementor-266 .elementor-element.elementor-element-d7a55e2 .elementor-divider{padding-block-start:15px;padding-block-end:15px;}.elementor-266 .elementor-element.elementor-element-491a913{--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-266 .elementor-element.elementor-element-e866450{--divider-border-style:solid;--divider-color:#000;--divider-border-width:1px;}.elementor-266 .elementor-element.elementor-element-e866450 .elementor-divider-separator{width:100%;}.elementor-266 .elementor-element.elementor-element-e866450 .elementor-divider{padding-block-start:15px;padding-block-end:15px;}.elementor-266 .elementor-element.elementor-element-a3ad398{--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;}@media(min-width:768px){.elementor-266 .elementor-element.elementor-element-2cb3bcd{--width:50%;}.elementor-266 .elementor-element.elementor-element-2ea4c82{--width:50%;}.elementor-266 .elementor-element.elementor-element-b400584{--width:50%;}.elementor-266 .elementor-element.elementor-element-a8521b0{--width:50%;}.elementor-266 .elementor-element.elementor-element-3ef0717{--width:50%;}.elementor-266 .elementor-element.elementor-element-40a6e6a{--width:50%;}.elementor-266 .elementor-element.elementor-element-8a34147{--width:50%;}.elementor-266 .elementor-element.elementor-element-491a913{--width:50%;}.elementor-266 .elementor-element.elementor-element-a3ad398{--width:50%;}}@media(max-width:767px){.elementor-266 .elementor-element.elementor-element-e18b090{padding:0px 0px 0px 0px;}}/* Start custom CSS for flip-box, class: .elementor-element-ab82cd7 *//* 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-e18b090 */.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-f2eed47 */.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-97c9b49 */.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-2b9939d */.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 */