:root {
  --bg:#0f1221; --panel:#121633; --ink:#e9ecff; --muted:#9aa3c9;
  --accent:#7bd0ff; --accent-2:#ffc0e2; --ok:#8bffc7;
  --radius:18px; --shadow:0 12px 30px rgba(0,0,0,.35);
}

.rt-section { isolation:isolate; background:#d6e9ff; color:var(--ink); padding:72px 20px; }
.rt-wrap { max-width:1100px; margin:auto; }

.rt-head { display:grid; gap:10px; margin-bottom:36px; }
.rt-head.rt-center { text-align:center; justify-items:center; }

.rt-title { font:800 clamp(28px,5vw,50px)/1.05 ui-sans-serif,system-ui; margin:0; color:#000; }
.rt-sub { font:600 clamp(15px,2vw,18px)/1.6 ui-sans-serif,system-ui; max-width:70ch; color:#000; }

/* Grid con flecha en medio */
.rt-grid { display:grid; grid-template-columns:1fr auto 1fr; gap:40px; align-items:center; }

.rt-block {
  background:linear-gradient(180deg,#171c42 0%,#0f1431 100%);
  border-radius:var(--radius); box-shadow:var(--shadow);
  padding:24px; display:flex; flex-direction:column; gap:20px;
}
.rt-block.rt-reverse { flex-direction:column-reverse; }

.rt-img-wrap { border-radius:var(--radius); overflow:hidden; }
.rt-img { width:100%; height:auto; display:block; border-radius:inherit; }

.rt-features { display:grid; gap:12px; }
.rt-list { display:grid; gap:10px; font:700 clamp(14px,2.3vw,16px)/1.2 ui-sans-serif,system-ui; }
.rt-item { display:flex; align-items:center; gap:10px; }
.rt-badge {
  display:grid; place-items:center; width:22px; height:22px; border-radius:50%;
  background:linear-gradient(180deg,#0a291a,#0e3b25); color:var(--ok);
  outline:2px solid #1b4a33; font-weight:900;
}

/* Flecha */
.rt-arrow { display:grid; place-items:center; }
.rt-arrow-svg {
  height:100px; /* tamaño base */
  width:auto;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.25));
}

/* Desktop: horizontal y más grande */
@media (min-width:931px) {
  .rt-arrow-svg {
    height:100px;   /* más visible */
    width:160px;    /* ancho horizontal */
    transform:rotate(-90deg);
  }
}

/* Móvil: vertical compacta */
@media (max-width:930px) {
  .rt-grid { grid-template-columns:1fr; gap:20px; }
  .rt-arrow-svg {
    height:120px; 
    width:auto;
    transform:none;
  }
}

/* Animación entrada */
[data-fx] { opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease; }
[data-fx].in { opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){ .rt-block, [data-fx]{ transition:none; } }
