.elementor-6764 .elementor-element.elementor-element-9794079{--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-6764 .elementor-element.elementor-element-28e9d9d{--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-6764 .elementor-element.elementor-element-1c65df4{--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-6764 .elementor-element.elementor-element-28e9d9d{--width:50%;}.elementor-6764 .elementor-element.elementor-element-1c65df4{--width:50%;}}/* Start custom CSS for html, class: .elementor-element-f0ad450 *//* ================ RUEDA DESKTOP (independiente) ================ */
.rueda-desktop {
  position: relative;
  width: 400px;
  height: 400px;
  margin: 50px auto;
}

/* base desktop */
.rueda-desktop .circle {
  position: absolute;
  width: 140px;
  height: 140px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  font-weight: 700;
  line-height: 1.15;
  font-size: 16px;
  padding: 10px;

  /* borde degradado redondo (truco con dos backgrounds) */
  border: 6px solid transparent;
  background-origin: border-box;
  background-clip: padding-box, border-box;
  /* color de relleno (capa 1) se define en cada círculo con linear-gradient(#eee,#eee) */
}

/* centro */
.rueda-desktop .center {
  width: 180px;
  height: 180px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border: none;                      /* el centro sin borde degradado */
  background: #eeeeee;               /* relleno */
  padding: 16px;
}

/* arriba (mueve en X) */
.rueda-desktop .top {
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  animation: floatXdesk 4s ease-in-out infinite alternate;
  background-image:
    linear-gradient(#eeeeee, #eeeeee),
    linear-gradient(90deg, #4facfe, #00f2fe); /* borde azul */
}

/* derecha (mueve en Y) */
.rueda-desktop .right {
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  animation: floatYdesk 4s ease-in-out infinite alternate;
  background-image:
    linear-gradient(#eeeeee, #eeeeee),
    linear-gradient(180deg, #ff9a9e, #fad0c4); /* borde salmón */
}

/* izquierda (mueve en Y) */
.rueda-desktop .left {
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  animation: floatYdesk 4s ease-in-out infinite alternate;
  animation-delay: 1.2s;
  background-image:
    linear-gradient(#eeeeee, #eeeeee),
    linear-gradient(180deg, #f093fb, #f5576c); /* borde rosa */
}

/* abajo (mueve en X) */
.rueda-desktop .bottom {
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  animation: floatXdesk 4s ease-in-out infinite alternate;
  animation-delay: 1.2s;
  background-image:
    linear-gradient(#eeeeee, #eeeeee),
    linear-gradient(90deg, #43e97b, #38f9d7); /* borde verde */
}

/* Animaciones exclusivas desktop (no afectan a móvil) */
@keyframes floatXdesk {
  0%   { transform: translateX(-50%) translateX(0); }
  100% { transform: translateX(-50%) translateX(20px); }  /* derecha-izquierda */
}
@keyframes floatYdesk {
  0%   { transform: translateY(-50%) translateY(0); }
  100% { transform: translateY(-50%) translateY(20px); }  /* arriba-abajo */
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-8e09fdf *//* ================ RUEDA MÓVIL (independiente) ================ */
.rueda-movil {
  position: relative;
  width: 260px;             /* versión más compacta */
  height: 260px;
  margin: 30px auto;
}

/* base móvil */
.rueda-movil .circle {
  position: absolute;
  width: 92px;
  height: 92px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  font-weight: 700;
  line-height: 1.15;
  font-size: 12px;
  padding: 8px;

  border: 4px solid transparent;
  background-origin: border-box;
  background-clip: padding-box, border-box;
}

/* centro móvil */
.rueda-movil .center {
  width: 130px;
  height: 130px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border: none;
  background: #eeeeee;
  padding: 12px;
}

/* arriba móvil (X) */
.rueda-movil .top {
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  animation: floatXmob 4s ease-in-out infinite alternate;
  background-image:
    linear-gradient(#eeeeee, #eeeeee),
    linear-gradient(90deg, #4facfe, #00f2fe);
}

/* derecha móvil (Y) */
.rueda-movil .right {
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  animation: floatYmob 4s ease-in-out infinite alternate;
  background-image:
    linear-gradient(#eeeeee, #eeeeee),
    linear-gradient(180deg, #ff9a9e, #fad0c4);
}

/* izquierda móvil (Y) */
.rueda-movil .left {
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  animation: floatYmob 4s ease-in-out infinite alternate;
  animation-delay: 1s;
  background-image:
    linear-gradient(#eeeeee, #eeeeee),
    linear-gradient(180deg, #f093fb, #f5576c);
}

/* abajo móvil (X) */
.rueda-movil .bottom {
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  animation: floatXmob 4s ease-in-out infinite alternate;
  animation-delay: 1s;
  background-image:
    linear-gradient(#eeeeee, #eeeeee),
    linear-gradient(90deg, #43e97b, #38f9d7);
}

/* Animaciones exclusivas móvil (no afectan a desktop) */* End custom CSS */