.elementor-707 .elementor-element.elementor-element-0476782{--display:flex;--min-height:343px;--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;--justify-content:center;--overlay-opacity:0.72;--margin-top:-200px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:100px;--padding-bottom:50px;--padding-left:0px;--padding-right:0px;}.elementor-707 .elementor-element.elementor-element-0476782:not(.elementor-motion-effects-element-type-background), .elementor-707 .elementor-element.elementor-element-0476782 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#0D0D0D;background-image:url("https://www.rt4.mx/wp-content/uploads/2025/09/feature-bg-1.jpg");}.elementor-707 .elementor-element.elementor-element-0476782::before, .elementor-707 .elementor-element.elementor-element-0476782 > .elementor-background-video-container::before, .elementor-707 .elementor-element.elementor-element-0476782 > .e-con-inner > .elementor-background-video-container::before, .elementor-707 .elementor-element.elementor-element-0476782 > .elementor-background-slideshow::before, .elementor-707 .elementor-element.elementor-element-0476782 > .e-con-inner > .elementor-background-slideshow::before, .elementor-707 .elementor-element.elementor-element-0476782 > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{background-color:#000000;--background-overlay:'';}.elementor-707 .elementor-element.elementor-element-fcdd60f{--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;--justify-content:center;}.elementor-707 .elementor-element.elementor-element-2222f7b{--display:flex;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-707 .elementor-element.elementor-element-2222f7b.e-con{--flex-grow:0;--flex-shrink:0;}.elementor-widget-heading .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );color:var( --e-global-color-primary );}.elementor-707 .elementor-element.elementor-element-ee820bc{width:var( --container-widget-width, 72% );max-width:72%;--container-widget-width:72%;--container-widget-flex-grow:0;text-align:center;}.elementor-707 .elementor-element.elementor-element-ee820bc .elementor-heading-title{font-family:"Space Grotesk", Sans-serif;font-size:64px;font-weight:700;line-height:72px;color:#FFFFFF;}.elementor-707 .elementor-element.elementor-element-002e05f{--display:flex;--min-height:126px;--overlay-opacity:0.35;--padding-top:80px;--padding-bottom:45px;--padding-left:0px;--padding-right:0px;}.elementor-707 .elementor-element.elementor-element-002e05f:not(.elementor-motion-effects-element-type-background), .elementor-707 .elementor-element.elementor-element-002e05f > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#000000;}.elementor-707 .elementor-element.elementor-element-002e05f::before, .elementor-707 .elementor-element.elementor-element-002e05f > .elementor-background-video-container::before, .elementor-707 .elementor-element.elementor-element-002e05f > .e-con-inner > .elementor-background-video-container::before, .elementor-707 .elementor-element.elementor-element-002e05f > .elementor-background-slideshow::before, .elementor-707 .elementor-element.elementor-element-002e05f > .e-con-inner > .elementor-background-slideshow::before, .elementor-707 .elementor-element.elementor-element-002e05f > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{background-color:#000000;background-image:url("https://www.rt4.mx/wp-content/uploads/2025/10/bgAI-1.jpeg");--background-overlay:'';background-position:center center;background-repeat:no-repeat;background-size:cover;}@media(min-width:768px){.elementor-707 .elementor-element.elementor-element-0476782{--content-width:1400px;}.elementor-707 .elementor-element.elementor-element-fcdd60f{--width:100%;}.elementor-707 .elementor-element.elementor-element-2222f7b{--width:100%;}.elementor-707 .elementor-element.elementor-element-002e05f{--content-width:1400px;}}@media(max-width:1024px) and (min-width:768px){.elementor-707 .elementor-element.elementor-element-0476782{--content-width:100%;}}@media(max-width:1024px){.elementor-707 .elementor-element.elementor-element-0476782{--min-height:425px;--padding-top:185px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-707 .elementor-element.elementor-element-ee820bc .elementor-heading-title{font-size:59px;line-height:1em;}.elementor-707 .elementor-element.elementor-element-002e05f{--padding-top:20px;--padding-bottom:20px;--padding-left:20px;--padding-right:20px;}}@media(max-width:767px){.elementor-707 .elementor-element.elementor-element-ee820bc .elementor-heading-title{font-size:35px;line-height:1.1em;}}/* Start custom CSS for html, class: .elementor-element-593314c *//* =============== RT4 — FINAL CLEAN (MOBILE SAFE) =============== */

/* Shell centers everything inside Elementor */
.rt4-shell{ display:grid; place-items:center; width:100%; }

/* Wheel: geometry + theme vars */
.rt4-wheel{
  --size: clamp(380px, 58vw, 760px);      /* wheel diameter */
  --bubble: 56px;                          /* blue dot diameter */
  --ring-border: 2px;                      /* dashed ring thickness */
  --brand:#22A7E6; --brand-dark:#1e6e8c;
  --txt:#eaf1f7; --muted:#9bb2c3;
  --ring-color: rgba(255,255,255,.13);

  /* pull dots/labels inward uniformly (increase to get closer) */
  --orbit-inset: 72px;                     /* try 56–84px */

  /* radius from center to ICON CENTER */
  --orbit-radius: calc(
    (var(--size)/2) - (var(--bubble)/2) - (var(--ring-border)/2) - 2px - var(--orbit-inset)
  );

  /* hover arc control (set by JS) */
  --hover-angle: 0deg;
  --hovering: 0;

  position:relative;
  width:var(--size);
  aspect-ratio:1;
  margin:0 auto;
  color:var(--txt);
  font-family:"Jost", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  isolation:isolate;
}

/* Dashed ring (single source of truth) */
.rt4-ring{
  position:absolute; inset:0;
  border-radius:50%;
  border:var(--ring-border) dashed var(--ring-color);
  pointer-events:none;
  z-index:0;
}

/* Center core (rotates) */
.rt4-core{
  position:absolute; top:50%; left:50%;
  width:calc(var(--size)*.40); height:calc(var(--size)*.40);
  transform:translate(-50%,-50%);
  border-radius:50%;
  display:grid; place-content:center; text-align:center;
  background:radial-gradient(60% 60% at 50% 40%, #27b5f4 0%, var(--brand) 55%, var(--brand-dark) 100%);
  box-shadow:0 15px 40px rgba(0,0,0,.35), inset 0 0 0 6px rgba(255,255,255,.08);
  z-index:2; /* over arc */
}
.rt4-core.spin{ animation: rt4-rotate 36s linear infinite; }
@keyframes rt4-rotate{
  from{ transform:translate(-50%,-50%) rotate(0) }
  to  { transform:translate(-50%,-50%) rotate(360deg) }
}
.rt4-title{ font-weight:800; font-size:clamp(36px,5.6vw,56px); line-height:1; }
.rt4-sub  { font-weight:600; font-size:clamp(14px,2vw,20px);  opacity:.95; }

/* “Back” outline arc behind the core, opposite hovered item */
.rt4-wheel::after{
  content:"";
  position:absolute;
  width:calc(var(--size)*.40 + 12px);
  height:calc(var(--size)*.40 + 12px);
  top:50%; left:50%;
  transform:translate(-50%,-50%) rotate(calc(var(--hover-angle) + 180deg));
  border-radius:50%;
  background: conic-gradient(from 0deg,
    transparent 0deg 340deg,
    rgba(255,255,255,.75) 340deg 360deg);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 100%);
          mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 100%);
  opacity:var(--hovering);
  transition:opacity .18s ease;
  z-index:1; /* under core */
  pointer-events:none;
}

/* Orbit items — true centering */
.rt4-orbit{ position:absolute; inset:0; }
.rt4-item{
  position:absolute; top:50%; left:50%;
  transform: translate(-50%, -50%) rotate(var(--angle));
  width:clamp(120px, 24vw, 180px);
  text-decoration:none; color:inherit;
  opacity:0;
  animation: rt4-in .6s ease both;
  animation-delay: var(--delay, 0s);
}
@keyframes rt4-in{
  0%   { opacity:0; transform:translate(-50%,-50%) rotate(var(--angle)) scale(.98); }
  100% { opacity:1; transform:translate(-50%,-50%) rotate(var(--angle)); }
}

/* push outward to the ring, then keep text upright */
.rt4-item-inner{
  transform: translateX(var(--orbit-radius)) rotate(calc(-1 * var(--angle)));
  text-align:center;
}

/* Icon + text */
.rt4-ico{
  width:var(--bubble); height:var(--bubble);
  margin:0 auto 8px; border-radius:50%;
  display:grid; place-content:center;
  background:var(--brand);
  box-shadow:0 8px 18px rgba(0,0,0,.28), inset 0 0 0 4px rgba(255,255,255,.1);
  transition:transform .2s ease, box-shadow .2s ease;
}
.rt4-ico i{ font-size:24px; line-height:1; color:#fff; }
.rt4-label strong{ display:block; font-size:clamp(12px,1.7vw,14px); }
.rt4-label small { display:block; margin-top:2px; font-size:clamp(10px,1.5vw,12px); color:#9bb2c3; }

/* Hover micro + center-to-icon connector */
.rt4-item:hover .rt4-ico{
  transform:translateY(-2px) scale(1.06);
  box-shadow:0 12px 24px rgba(0,0,0,.32), inset 0 0 0 4px rgba(255,255,255,.14);
}
.rt4-item::before{
  content:"";
  position:absolute; top:50%; left:50%;
  width:var(--orbit-radius); height:2px;
  transform:translateY(-50%);
  transform-origin:left center;
  background:radial-gradient(circle, rgba(255,255,255,.55) 0 2px, transparent 2px) left/8px 2px repeat-x;
  opacity:0; transition:opacity .2s ease;
  pointer-events:none;
}
.rt4-item:hover::before{ opacity:1; }

/* -------- Mobile stack -------- */
.rt4-mobile{ display:none; }
@media (max-width:768px){
  .rt4-desktop{ display:none !important; }
  .rt4-mobile{ display:block !important; width:100%; position:relative; z-index:3; }

  .rt4-list{
    max-width:860px; margin:0 auto; padding:4px 2px;
    display:grid; gap:12px;
  }

  /* Default: visible (no JS required) */
  .rt4-card{
    display:grid; grid-template-columns:56px 1fr; gap:12px; align-items:center;
    padding:12px 14px; border-radius:14px;
    background:rgba(255,255,255,.04);
    border:1px solid rgba(255,255,255,.08);
    text-decoration:none; color:var(--txt);
    opacity:1; transform:none;
  }

  /* If JS enables animation, it will add .animate and then .inview */
  .rt4-list.animate .rt4-card{ opacity:0; transform:translateY(12px); }
  .rt4-list.animate.inview .rt4-card{ animation: rt4-card-in .5s cubic-bezier(.2,.8,.2,1) forwards; }
  .rt4-list.animate.inview .rt4-card:nth-child(1){ animation-delay:.00s }
  .rt4-list.animate.inview .rt4-card:nth-child(2){ animation-delay:.05s }
  .rt4-list.animate.inview .rt4-card:nth-child(3){ animation-delay:.10s }
  .rt4-list.animate.inview .rt4-card:nth-child(4){ animation-delay:.15s }
  .rt4-list.animate.inview .rt4-card:nth-child(5){ animation-delay:.20s }
  .rt4-list.animate.inview .rt4-card:nth-child(6){ animation-delay:.25s }
  .rt4-list.animate.inview .rt4-card:nth-child(7){ animation-delay:.30s }
  .rt4-list.animate.inview .rt4-card:nth-child(8){ animation-delay:.35s }
  .rt4-list.animate.inview .rt4-card:nth-child(9){ animation-delay:.40s }

  @keyframes rt4-card-in{
    0%   { transform:translateY(12px); opacity:0 }
    60%  { transform:translateY(-2px); opacity:1 }
    100% { transform:none; }
  }

  /* Icon pulse */
  .rt4-card i{
    width:56px; height:56px; border-radius:50%;
    display:grid; place-items:center; font-size:22px; color:#fff;
    background:var(--brand);
    box-shadow:0 6px 14px rgba(0,0,0,.25), inset 0 0 0 4px rgba(255,255,255,.1);
    animation: rt4-pulse 1.6s ease-in-out infinite;
  }
  @keyframes rt4-pulse{ 0%,100%{ transform:scale(1) } 50%{ transform:scale(1.06) } }
}

.rt4-label > strong{
    color:#fff!important;
    font-size:20px;
}

@media (max-width:768px){
     .rt4-card {
        display: grid
;
        grid-template-columns: 56px 1fr;
        gap: 12px;
        align-items: center;
        padding: 12px 14px;
        border-radius: 14px;
        background: rgb(0 0 0 / 50%);
        border: 1px solid rgba(255, 255, 255, .08);
        text-decoration: none;
        color: #fff;
        opacity: 1;
        transform: none;
    }
    .rt4-list.animate.inview .rt4-card {
        animation: rt4-card-in .5s 
cubic-bezier(.2, .8, .2, 1) forwards;
        display: block;
        opacity: 1 !important;
        margin-top: 20px;
    }
}
.rt4-wheel{ --orbit-inset: 80px; } /* inward */
/* Center logo sizing inside the rotating core */
.rt4-core-logo{
  display:block;
  width:min(100%, 350px);   /* tweak 60–75% to taste */
  height:auto;
  margin:0 auto;
  pointer-events:none;
  user-select:none;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.25));
}

/* OPTIONAL: keep the logo upright while the sphere rotates (counter-rotate) */
/*
.rt4-core.spin .rt4-core-logo{
  animation: rt4-logo-counter 36s linear infinite;
  transform-origin:50% 50%;
}
@keyframes rt4-logo-counter{
  from{ transform: rotate(0) }
  to  { transform: rotate(-360deg) }
}
*/

/* ===== FIX: make orbit icons always render on top (but still below the core) ===== */

/* Layer order: ring(0) < arc(1) < orbit/items(2) < core(3) */
.rt4-ring{ z-index:0 !important; }
.rt4-wheel::after{ z-index:1 !important; }   /* hover arc (behind core) */
.rt4-orbit{ z-index:2 !important; }
.rt4-item{ z-index:2 !important; position:absolute; } /* ensure positioned stacking context */
.rt4-core{ z-index:3 !important; }           /* center sphere stays above */

/* Ensure the icon inside the blue dot can’t be occluded by composites */
.rt4-item-inner{ position:relative; }         /* local context for children */
.rt4-ico{ position:relative; z-index:1; 
  backface-visibility:hidden; transform:translateZ(0); will-change:transform;
  -webkit-font-smoothing: antialiased; }
.rt4-ico i{ position:relative; z-index:2; 
  backface-visibility:hidden; transform:translateZ(0); will-change:transform; }

/* Keep the connector line under the blue dot/icon so it never covers the glyph */
.rt4-item::before{ z-index:0; }
/* move dots slightly outward if needed */
.rt4-wheel{ --orbit-inset: 64px; } /* try 60–70px until overlap disappears */

/* Layer order: ring(0) < arc(1) < orbit/items(2) < core(3) */
.rt4-ring{ z-index:0 !important; }
.rt4-wheel::after{ z-index:1 !important; }
.rt4-orbit, .rt4-item{ z-index:2 !important; position:absolute; }
.rt4-core{ z-index:3 !important; }


/* ===== RT4 Mobile — centered cards ===== */
/* ===== RT4 Mobile — fully centered layout ===== */
@media (max-width:768px){

  .rt4-desktop{ display:none !important; }
  .rt4-mobile{ display:block; position:relative; padding:20px 14px; }

  .rt4-mobile .rt4-list{
    display:grid;
    gap:16px;
    position:relative;
    z-index:1;
  }

  /* Card */
  .rt4-card{
    --glass: rgba(255,255,255,.10);
    --border: rgba(255,255,255,.18);
    --muted: rgba(255,255,255,.85);

    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;

    padding:24px 18px;
    border-radius:20px;
    background:var(--glass);
    border:1px solid var(--border);
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
    box-shadow:0 8px 24px rgba(0,0,0,.28);
    color:#fff;
    text-decoration:none;
    overflow:hidden;
    min-height:130px;
  }

  /* Icon centered and larger */
  .rt4-card > i{
width: 64px;
        height: 64px;
        display: flex
;
        align-items: center;
        justify-content: center;
        border-radius: 16px;
        background: rgba(255, 255, 255, .15);
        font-size: 26px;
        color: #fff;
        margin-bottom: 12px;
        box-shadow: 0 2px 6px rgba(0, 0, 0, .3);
        margin-left: 44%;
        margin-bottom: 25px;
  }

  /* Text */
  .rt4-card > div{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    line-height:1.2;
  }
  .rt4-card b{
    font-size:17px;
    font-weight:800;
    color:#22a7e6; /* accent color */
    margin-bottom:6px;
    text-shadow:0 1px 2px rgba(0,0,0,.25);
  }
  .rt4-card span{
    font-size:14px;
    color:var(--muted);
    line-height:1.35;
  }

  /* Hover/Focus/Active */
  .rt4-card:hover{ border-color:rgba(255,255,255,.28); }
  .rt4-card:active{ transform:translateY(1px); }
  .rt4-card:focus-visible{ outline:2px solid #22a7e6; outline-offset:2px; }

  /* Entrance animation */
  .rt4-mobile .rt4-list.animate .rt4-card{
    opacity:0; transform:translateY(15px);
    transition:opacity .45s ease, transform .45s ease;
  }
  .rt4-mobile .rt4-list.inview .rt4-card{
    opacity:1; transform:none;
  }
  .rt4-mobile .rt4-list.inview .rt4-card:nth-child(n){
    transition-delay:calc(.05s * var(--i, 1));
  }

  /* Small screens */
  @media (max-width:380px){
    .rt4-card{ padding:18px 14px; min-height:115px; }
    .rt4-card > i{ width:54px; height:54px; font-size:22px; }
    .rt4-card b{ font-size:16px; }
    .rt4-card span{ font-size:13px; }
  }
}/* End custom CSS */