.ventajas-stage {
  --v-hang: 72px;                                   
  position: relative; isolation: isolate;
  margin-bottom: var(--v-hang);
  padding: clamp(32px, 2.6vw + 12px, 52px) clamp(18px, 1.2vw + 12px, 32px) 0;
  border-radius: 24px;
}
.ventajas-bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; border-radius: inherit; background: var(--panel, #0c1a2e); }
.ventajas-bg img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.ventajas-bg::after { content: ""; position: absolute; inset: 0; }
.ventajas-stage--photo .ventajas-bg::after {   
  background: linear-gradient(180deg, rgba(12, 26, 46, .3) 0%, rgba(12, 26, 46, .5) 34%, rgba(12, 26, 46, .9) 100%);
}
.ventajas-stage--brand { --v-hang: 0px; padding-bottom: clamp(18px, 1.2vw + 12px, 32px); }

.ventajas-stage--scene { --v-hang: 0px; margin-bottom: 0; padding: 0 0 clamp(8px, 1vw, 16px); border-radius: 0; }   
.ventajas-stage--scene .ventajas-bg { display: none; }
.ventajas-stage--scene .ventajas-lead { background: rgba(12, 26, 46, .86); }   
.ventajas-stage--brand .ventajas-bg {
  border: 1px solid var(--line, #dde4ee);
  background:
    radial-gradient(55% 60% at 88% 0%, rgba(204, 255, 0, .3), transparent 70%),
    radial-gradient(50% 50% at 0% 100%, rgba(0, 153, 52, .14), transparent 70%),
    linear-gradient(160deg, #eaf8ee 0%, #f4f7fb 55%, #ffffff 100%);
}
.ventajas-stage--brand .ventajas-bg::after {
  background-image: linear-gradient(rgba(0, 153, 52, .08) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 153, 52, .08) 1px, transparent 1px);
  background-size: 28px 28px; background-position: -1px -1px;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, .4) 65%, transparent 100%);
          mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, .4) 65%, transparent 100%);
}
.ventajas-lead {   
  display: inline-block; margin: 0 0 clamp(24px, 2.4vw, 36px); padding: 9px 14px; border-radius: 10px;
  background: rgba(12, 26, 46, .7); border: 1px solid rgba(255, 255, 255, .12);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  font-size: 1.05rem; font-weight: 700; line-height: 1.3; color: #fff; text-wrap: balance;
}
.ventajas-stage--brand .ventajas-lead { padding: 0; border: 0; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; color: var(--ink, #0c1a2e); }


.ventajas {
  --v-ink: var(--ink, #0c1a2e);
  --v-text: var(--text, #3b4a5c);
  --v-muted: var(--muted, #5b6b7e);
  --v-line: var(--line, #dde4ee);
  --v-green: var(--green, #009934);
  --v-green-ink: var(--green-ink, #007f2c);
  --v-green-soft: var(--green-soft, #e8f7ec);
  --v-lime: var(--lime, #ccff00);
  --v-navy: var(--panel, #0c1a2e);
  --v-live: var(--green-bright, #2fe56e);
  min-width: 0; color: var(--v-text);
}
.ventajas h3 { margin: 0; font-size: 1.15rem; font-weight: 700; line-height: 1.25; letter-spacing: -0.01em; color: var(--v-ink); text-wrap: balance; }
.ventajas p { margin: 0; font-size: .95rem; line-height: 1.55; }
.ventajas svg { display: block; max-width: 100%; }
.ventajas-s1 { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 14px; margin-bottom: calc(-1 * var(--v-hang)); }

.ventajas-s1-tile--latency { grid-column: span 7; }
.ventajas-s1-tile--safe { grid-column: span 5; }
.ventajas-s1-tile--storage, .ventajas-s1-tile--ram, .ventajas-s1-tile--support { grid-column: span 4; }
.ventajas-s1-tile {
  position: relative; display: flex; flex-direction: column; gap: 16px; min-width: 0;
  padding: 22px; background: #fff; border: 1px solid rgba(12, 26, 46, .08); border-radius: 16px;
  box-shadow: 0 14px 34px -18px rgba(12, 26, 46, .4), 0 1px 2px rgba(12, 26, 46, .06);
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.ventajas-s1-tile:hover { border-color: var(--v-green); box-shadow: 0 22px 44px -20px rgba(12, 26, 46, .5), 0 1px 2px rgba(12, 26, 46, .06); }
.ventajas-s1-tile--dark { background: rgba(12, 26, 46, .88); border-color: rgba(255, 255, 255, .14); color: #c4d0df; }
.ventajas-stage--brand .ventajas-s1-tile--dark { background: var(--v-navy); border-color: var(--v-navy); }
.ventajas-s1-tile--dark:hover { border-color: rgba(204, 255, 0, .6); }
.ventajas-s1-tile--dark h3 { color: #fff; }
.ventajas-s1-viz { display: flex; flex-direction: column; justify-content: flex-end; gap: 10px; min-height: 128px; }   
.ventajas-s1-viz > span, .ventajas-s1-up > span { font-size: .8rem; font-weight: 600; color: var(--v-muted); }
.ventajas-s1-tile--dark .ventajas-s1-viz > span { color: #9fb0c6; }
.ventajas-s1-text h3 { margin-bottom: 6px; }


.ventajas-s1-live {
  position: absolute; top: 16px; right: 16px; display: inline-flex; align-items: center; gap: 7px;
  padding: 4px 10px 4px 9px; border-radius: 999px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .12);
  font-size: .75rem; font-weight: 700; color: #e4ebf3;
}
.ventajas-s1-live i { position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--v-live); box-shadow: 0 0 0 3px rgba(47, 229, 110, .22); }
.ventajas-s1-live i::after { content: ""; position: absolute; inset: -3px; border-radius: 50%; border: 2px solid var(--v-live); opacity: 0; }
.ventajas-s1-spark { width: 100%; height: 72px; overflow: hidden; }   
.ventajas-s1-spark-fill { fill: url(#ve-spark-g); stroke: none; }
.ventajas-s1-spark-line { fill: none; stroke: var(--v-lime); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.ventajas-s1-ping { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 14px; }
.ventajas-s1-ping strong { font-size: 2.6rem; font-weight: 800; letter-spacing: -0.03em; line-height: 1; color: #fff; font-variant-numeric: tabular-nums; }
.ventajas-s1-ping strong.ventajas-s1-perfecto { color: var(--v-lime); font-size: clamp(2rem, 7vw, 2.6rem); }   
.ventajas-s1-ping strong small { margin-left: 4px; font-size: 1rem; font-weight: 700; letter-spacing: 0; color: var(--v-lime); }
.ventajas-s1-ping > span { font-size: .85rem; font-weight: 600; color: #9fb0c6; }

.ventajas-s1-nobr { white-space: nowrap; }
.ventajas-s1-mundo { display: inline-block; width: .95em; height: .95em; margin-left: .22em; vertical-align: -0.14em; border-radius: 50%; background: radial-gradient(circle at 34% 30%, #3a6fd0 0%, #1b449a 55%, #0f2a63 100%); box-shadow: 0 0 0 1px rgba(204, 255, 0, .18), 0 0 14px rgba(204, 255, 0, .14); }
.ventajas-s1-ping strong.ventajas-s1-perfecto { line-height: 1.08; }


.ventajas-s1-tile--safe .ventajas-s1-viz, .ventajas-s1-tile--storage .ventajas-s1-viz, .ventajas-s1-tile--ram .ventajas-s1-viz, .ventajas-s1-tile--support .ventajas-s1-viz { min-height: 0; }
.ventajas-s1-art { display: flex; align-items: center; gap: 14px; height: 64px; min-width: 0; }
.ventajas-s1-art > * { flex: none; }


.ventajas-s1-shield { width: 56px; height: 64px; overflow: visible; }
.ventajas-s1-shield .ve-sh { fill: var(--v-green-soft); stroke: var(--v-green-ink); stroke-width: 2.5; stroke-linejoin: round; }
.ventajas-s1-shield .ve-st { fill: none; stroke: var(--v-green-ink); stroke-width: 2.5; stroke-linecap: round; }
.ventajas-s1-shield .ve-lock { fill: var(--v-green); }
.ventajas-s1-shield .ve-key { fill: var(--v-lime); }
.ventajas-s1-chips { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.ventajas-s1-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; background: var(--v-green-soft); color: var(--v-green-ink); font-size: .76rem; font-weight: 700; white-space: nowrap; }
.ventajas-s1-chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--v-green); }
.ventajas-s1-wall {
  flex: 1 1 auto !important; align-self: stretch; min-width: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='32'%3E%3Cg fill='%23e8f7ec'%3E%3Crect x='0' y='0' width='27' height='13' rx='3'/%3E%3Crect x='-15' y='16' width='27' height='13' rx='3'/%3E%3Crect x='15' y='16' width='27' height='13' rx='3'/%3E%3C/g%3E%3C/svg%3E") 0 2px / 30px 32px repeat;
  -webkit-mask-image: linear-gradient(90deg, #000 0%, rgba(0, 0, 0, .6) 50%, transparent 100%);
          mask-image: linear-gradient(90deg, #000 0%, rgba(0, 0, 0, .6) 50%, transparent 100%);
}


.ventajas-s1-viz--inf .ventajas-s1-art strong { font-size: 3.4rem; font-weight: 800; line-height: 1; letter-spacing: -0.02em; color: var(--v-green-ink); }
.ventajas-s1-rack {
  flex: 1 1 auto !important; min-width: 0; height: 64px; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between;
  -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 45%, transparent 100%);
          mask-image: linear-gradient(90deg, #000 0%, #000 45%, transparent 100%);
}
.ventajas-s1-rack i {
  display: block; height: 18px; width: calc(100% + 44px);
  background:
    radial-gradient(circle at 8px 50%, var(--v-lime) 0 2.2px, transparent 2.7px) 0 0 / 44px 18px repeat-x,
    linear-gradient(90deg, var(--v-green) 0 38px, transparent 38px 44px) 0 0 / 44px 18px repeat-x;
  border-radius: 3px;
}
.ventajas-s1-rack i:nth-child(2) { margin-left: -22px; background-color: transparent; filter: brightness(.88); }
.ventajas-s1-rack i:nth-child(3) { filter: brightness(.78); }


.ventajas-s1-bars { display: flex; align-items: flex-end; gap: 5px; height: 64px; }
.ventajas-s1-bars i { flex: 1 1 0; height: 100%; border-radius: 3px; background: var(--v-green); transform-origin: bottom; }


.ventajas-s1-clock { position: relative; width: 64px; height: 64px; border-radius: 50%; border: 2.5px solid var(--v-green-ink); background: var(--v-green-soft); }
.ventajas-s1-clock b { position: absolute; left: 50%; top: 50%; width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; border-radius: 50%; background: var(--v-ink); }
.ventajas-s1-hand { position: absolute; left: 50%; bottom: 50%; width: 3px; margin-left: -1.5px; border-radius: 2px; transform-origin: 50% 100%; }
.ventajas-s1-hand--h { height: 15px; background: var(--v-ink); transform: rotate(305deg); }
.ventajas-s1-hand--m { height: 22px; background: var(--v-green-ink); transform: rotate(60deg); }
.ventajas-s1-chat {
  position: relative; flex: 1 1 auto !important; max-width: 190px; min-width: 0; height: 46px; margin-bottom: 10px;
  display: flex; align-items: center; justify-content: center; gap: 7px;
  border: 2.5px solid var(--v-green-ink); border-radius: 14px 14px 14px 3px; background: #fff;
}
.ventajas-s1-chat::after { content: ""; position: absolute; left: -2.5px; bottom: -12px; width: 12px; height: 12px; background: var(--v-green-ink); clip-path: polygon(0 0, 100% 0, 0 100%); }
.ventajas-s1-chat i { width: 9px; height: 9px; border-radius: 2px; background: var(--v-green); }
.ventajas-s1-online { position: absolute; top: -6px; right: -6px; width: 14px; height: 14px; border-radius: 50%; background: var(--v-lime); border: 2.5px solid var(--v-green-ink); }


.ventajas-s1-tile--uptime { grid-column: 1 / -1; flex-direction: row; align-items: center; gap: 28px; padding: 22px 26px; }
.ventajas-s1-tile--uptime .ventajas-s1-viz { flex: 1 1 56%; min-height: 0; }
.ventajas-s1-tile--uptime .ventajas-s1-text { flex: 1 1 44%; min-width: 0; padding-left: 28px; border-left: 1px solid var(--v-line); }
.ventajas-s1-viz--up { flex-direction: row; align-items: center; gap: 20px; }
.ventajas-s1-viz--up > strong { flex: none; font-size: 2.8rem; font-weight: 800; letter-spacing: -0.03em; line-height: 1; color: var(--v-ink); font-variant-numeric: tabular-nums; }
.ventajas-s1-viz--up > strong small { margin-left: 3px; font-size: 1.1rem; font-weight: 700; letter-spacing: 0; color: var(--v-green-ink); }
.ventajas-s1-up { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.ventajas-s1-pips { display: grid; grid-template-columns: repeat(60, minmax(0, 1fr)); gap: 3px; transform-origin: left; }
.ventajas-s1-pips i { height: 26px; border-radius: 2px; background: var(--v-green); }


@media (max-width: 900px) {
  .ventajas-s1 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ventajas-s1-tile { grid-column: auto; }
  .ventajas-s1-tile--latency, .ventajas-s1-tile--uptime { grid-column: 1 / -1; }
  .ventajas-s1-tile--uptime { flex-direction: column; align-items: stretch; gap: 16px; padding: 22px; }
  .ventajas-s1-tile--uptime .ventajas-s1-text { padding-left: 0; border-left: 0; }
  .ventajas-s1-pips { grid-template-columns: repeat(30, minmax(0, 1fr)); }
  .ventajas-s1-pips i:nth-child(n + 31) { display: none; }
}
@media (max-width: 600px) {
  .ventajas-stage { --v-hang: 40px; border-radius: 18px; }
  .ventajas-stage--brand { --v-hang: 0px; }
  .ventajas-stage--scene { --v-hang: 0px; border-radius: 0; }   
  .ventajas-lead { font-size: .98rem; padding: 8px 12px; }
  .ventajas-s1 { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .ventajas-s1-tile, .ventajas-s1-tile--latency, .ventajas-s1-tile--uptime { grid-column: auto; }
  .ventajas-s1-tile, .ventajas-s1-tile--uptime { padding: 20px 18px; }
  .ventajas-s1-viz { min-height: 0; }
  .ventajas-s1-viz--up { flex-direction: column; align-items: stretch; gap: 12px; }
}


@media (prefers-reduced-motion: no-preference) {
  .ventajas-s1-tile:hover { transform: translateY(-2px); }
  .ventajas-live .ventajas-s1-live i::after { animation: ve-ring 2s ease-out infinite; }
  .ventajas-live .ventajas-s1-bars i { animation: ve-rise .5s cubic-bezier(.2, .8, .2, 1) both; }
  .ventajas-live .ventajas-s1-bars i:nth-child(2) { animation-delay: .06s; }
  .ventajas-live .ventajas-s1-bars i:nth-child(3) { animation-delay: .12s; }
  .ventajas-live .ventajas-s1-bars i:nth-child(4) { animation-delay: .18s; }
  .ventajas-live .ventajas-s1-bars i:nth-child(5) { animation-delay: .24s; }
  .ventajas-live .ventajas-s1-bars i:nth-child(6) { animation-delay: .3s; }
  .ventajas-live .ventajas-s1-bars i:nth-child(7) { animation-delay: .36s; }
  .ventajas-live .ventajas-s1-bars i:nth-child(8) { animation-delay: .42s; }
  .ventajas-live .ventajas-s1-hand--m { animation: ve-spin 60s linear infinite; }
  .ventajas-live .ventajas-s1-hand--h { animation: ve-spin-h 720s linear infinite; }
  .ventajas-live .ventajas-s1-pips { animation: ve-grow 1s cubic-bezier(.2, .8, .2, 1) both; }
  .ventajas-live .ventajas-s1-rack i { animation: ve-rack 3.2s linear infinite; }
  .ventajas-live .ventajas-s1-rack i:nth-child(2) { animation-duration: 4.4s; }
  .ventajas-live .ventajas-s1-rack i:nth-child(3) { animation-duration: 5.6s; }
  .ventajas-live .ventajas-s1-chat i { animation: ve-typing 1.4s ease-in-out infinite; }
  .ventajas-live .ventajas-s1-chat i:nth-child(3) { animation-delay: .18s; }
  .ventajas-live .ventajas-s1-chat i:nth-child(4) { animation-delay: .36s; }
}
@keyframes ve-ring { from { transform: scale(.6); opacity: .9; } to { transform: scale(2); opacity: 0; } }
@keyframes ve-rise { from { transform: scaleY(.15); } }
@keyframes ve-spin { from { transform: rotate(60deg); } to { transform: rotate(420deg); } }
@keyframes ve-spin-h { from { transform: rotate(305deg); } to { transform: rotate(665deg); } }
@keyframes ve-grow { from { transform: scaleX(0); } }
@keyframes ve-rack { to { transform: translateX(-44px); } }
@keyframes ve-typing { 0%, 60%, 100% { transform: translateY(0); opacity: .45; } 30% { transform: translateY(-4px); opacity: 1; } }


.ventajas-s1-tile--safe .ventajas-s1-viz { flex: 1 1 auto; justify-content: center; }
.ventajas-s1-art--safe { height: 84px; }
.ventajas-s1-art--safe .ventajas-s1-shield { width: 72px; height: 82px; }
@media (max-width: 600px) { .ventajas-s1-art--safe { height: 72px; } .ventajas-s1-art--safe .ventajas-s1-shield { width: 60px; height: 70px; } }