@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&family=IBM+Plex+Mono:wght@400;500&display=swap');

.rvp{
  --bg:#0B0A18; --panel:#100E24; --panel-2:#15122E;
  --violet:#5B3CF0; --violet-lt:#9B87F5; --green:#2FBF64; --blue:#7EC8FF;
  --text:#fff; --ink:#DAD8EE; --muted:#A9A6C4; --dim:#6E6A8C;
  --line:rgba(255,255,255,.09); --line-2:rgba(255,255,255,.14);
  --font:'Poppins',system-ui,sans-serif; --mono:'IBM Plex Mono',monospace;
  --max:1240px; --pad:clamp(20px,5vw,64px);
  background:var(--bg); color:var(--text); font-family:var(--font); line-height:1.6;
  overflow-x:clip; -webkit-font-smoothing:antialiased; position:relative;
}
.rvp *{box-sizing:border-box; margin:0; padding:0}
.rvp img{max-width:100%; display:block}
.rvp a{color:inherit; text-decoration:none}
.rvp ::selection{background:rgba(91,60,240,.4)}
.rvp-wrap{position:relative; z-index:1; max-width:var(--max); margin:0 auto; padding:0 var(--pad)}
.rvp-eyebrow{font-family:var(--mono); font-size:12px; letter-spacing:.28em; text-transform:uppercase; color:var(--violet-lt); display:inline-flex; align-items:center; gap:10px}
.rvp-eyebrow::before{content:""; width:26px; height:1px; background:var(--violet-lt); opacity:.6}

/* ===== HERO ===== */
.rvp-hero{position:relative; overflow:hidden; padding:clamp(90px,15vw,180px) 0 clamp(80px,12vw,150px); text-align:center}
.rvp-hero::before{content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(50% 60% at 50% 0%, rgba(91,60,240,.35), transparent 70%),
    radial-gradient(40% 50% at 80% 30%, rgba(47,191,100,.14), transparent 70%)}
.rvp-hero .rvp-wrap{max-width:900px; text-align:center}
.rvp-hero .rvp-eyebrow{justify-content:center}
.rvp-hero h1{font-size:clamp(40px,8vw,86px); line-height:1.02; letter-spacing:-.03em; font-weight:700; margin:22px 0 0}
.rvp-hero h1 em{font-style:normal; background:linear-gradient(120deg,var(--violet-lt),var(--green)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent}
.rvp-lead{color:var(--muted); font-size:clamp(16px,2.2vw,21px); max-width:56ch; margin:24px auto 0}
.rvp-cta{margin-top:38px; display:flex; gap:14px; justify-content:center; flex-wrap:wrap}
/* Buttons on this page are the shared .btn/.btn--primary from style.css. */

/* ===== SECCIONES ===== */
.rvp-section{padding:clamp(64px,10vw,120px) 0}
.rvp-section-head{max-width:640px}
.rvp-section-head h2{font-size:clamp(28px,4.5vw,52px); line-height:1.08; letter-spacing:-.02em; font-weight:700; margin:16px 0 0}
.rvp-section-head p{color:var(--muted); font-size:clamp(15px,2vw,18px); margin-top:16px}

/* ===== PILLARS (alternating rows) ===== */
.rvp-pillars{display:flex; flex-direction:column; gap:clamp(48px,7vw,110px); margin-top:clamp(48px,7vw,90px)}
.rvp-pillar{display:grid; grid-template-columns:1fr 1fr; gap:clamp(30px,5vw,72px); align-items:center}
.rvp-pillar:nth-child(even) .rvp-shot{order:2}
.rvp-num{font-family:var(--mono); font-size:13px; letter-spacing:.2em; color:var(--violet-lt)}
.rvp-pillar h3{font-size:clamp(24px,3.4vw,38px); line-height:1.12; letter-spacing:-.015em; font-weight:700; margin:14px 0 0}
.rvp-pillar > div > p{color:var(--ink); font-size:16.5px; line-height:1.75; margin-top:16px; max-width:46ch}
.rvp-feats{list-style:none; margin:22px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:10px}
.rvp-feats li{font-family:var(--mono); font-size:12.5px; letter-spacing:.02em; color:var(--ink);
  border:1px solid var(--line-2); border-radius:999px; padding:8px 15px; display:inline-flex; align-items:center; gap:9px}
.rvp-feats li::before{content:""; width:6px; height:6px; border-radius:2px; background:var(--green); transform:rotate(45deg)}
.rvp-shot{position:relative; border-radius:20px; overflow:hidden; aspect-ratio:4/3; border:1px solid var(--line);
  background:radial-gradient(120% 120% at 20% 0%, rgba(91,60,240,.4), transparent 55%),
            radial-gradient(120% 120% at 100% 100%, rgba(47,191,100,.25), transparent 55%), var(--panel-2);
  display:flex; align-items:center; justify-content:center}
.rvp-shot::after{content:""; position:absolute; inset:0; border-radius:20px; padding:1px; pointer-events:none;
  background:linear-gradient(130deg, rgba(155,135,245,.5), transparent 55%, rgba(47,191,100,.35));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude}
.rvp-shot img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.rvp-shot-tag{font-family:var(--mono); font-size:11px; letter-spacing:.15em; color:var(--dim); border:1px dashed var(--line-2); padding:8px 13px; border-radius:6px}

/* ===== DIAGRAMA SVG ===== */
.rvp-diagram{background:linear-gradient(180deg,var(--panel-2),var(--panel)); border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.rvp-diagram .rvp-section-head{margin:0 auto; text-align:center}
.rvp-diagram .rvp-eyebrow{justify-content:center}
.rvp-svgwrap{margin-top:clamp(40px,6vw,72px); display:flex; justify-content:center}
.rvp-svg{width:100%; max-width:1000px; height:auto}
.rvp-node{cursor:default}
.rvp-node rect, .rvp-node circle.chip{transition:all .3s ease}
.rvp-node:hover .chip{fill:rgba(91,60,240,.28); stroke:var(--violet-lt)}
.rvp-node text{font-family:var(--font); fill:var(--ink); font-size:13px; font-weight:500}
.rvp-node .ic{fill:none; stroke:var(--violet-lt); stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
.rvp-plat{fill:var(--violet)}
.rvp-frame{fill:none; stroke:var(--green); stroke-width:2; opacity:.55}
.rvp-link{stroke:var(--line-2); stroke-width:1.4; stroke-dasharray:4 5; opacity:.5}
.rvp-pulse{transform-box:fill-box; transform-origin:center; animation:rvp-breathe 3s ease-in-out infinite}
@keyframes rvp-breathe{0%,100%{opacity:.35}50%{opacity:1}}
.rvp-dash{stroke-dasharray:6 8; animation:rvp-flow 2.4s linear infinite}
@keyframes rvp-flow{to{stroke-dashoffset:-28}}

/* ===== HOW IT WORKS ===== */
.rvp-steps{margin-top:clamp(40px,6vw,72px); display:grid; grid-template-columns:repeat(2,1fr); gap:18px}
.rvp-step{border:1px solid var(--line); border-radius:16px; padding:26px; background:var(--panel); display:flex; gap:18px; transition:transform .3s ease, border-color .3s ease}
.rvp-step:hover{transform:translateY(-4px); border-color:var(--violet-lt)}
.rvp-step-n{flex:none; width:42px; height:42px; border-radius:11px; display:grid; place-items:center; font-family:var(--mono); font-size:14px; color:#fff; background:linear-gradient(140deg,var(--violet),#3a25b8)}
.rvp-step h4{font-size:17px; font-weight:600; margin:2px 0 6px}
.rvp-step p{color:var(--muted); font-size:14.5px; line-height:1.6}

/* ===== CLOSING / CTA ===== */
.rvp-final{position:relative; overflow:hidden; text-align:center; padding:clamp(80px,12vw,150px) 0}
.rvp-final::before{content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(55% 70% at 50% 100%, rgba(91,60,240,.4), transparent 70%)}
.rvp-final .rvp-wrap{max-width:760px; position:relative; z-index:1}
.rvp-final h2{font-size:clamp(32px,5.5vw,60px); line-height:1.06; letter-spacing:-.02em; font-weight:700}
.rvp-final p{color:var(--muted); font-size:clamp(16px,2vw,19px); margin:20px auto 0; max-width:44ch}

/* diagram as image (full width) */
.rvp-diagram-shot{position:relative; margin:clamp(40px,6vw,72px) auto 0; width:100%; border-radius:20px; overflow:hidden; aspect-ratio:16/9; border:1px solid var(--line);
  background:radial-gradient(120% 120% at 20% 0%, rgba(91,60,240,.32), transparent 55%),
            radial-gradient(120% 120% at 100% 100%, rgba(47,191,100,.2), transparent 55%), var(--panel-2);
  display:flex; align-items:center; justify-content:center}
.rvp-diagram-shot::after{content:""; position:absolute; inset:0; border-radius:20px; padding:1px; pointer-events:none;
  background:linear-gradient(130deg, rgba(155,135,245,.5), transparent 55%, rgba(47,191,100,.35));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude}
.rvp-diagram-shot img{position:absolute; inset:0; width:100%; height:100%; object-fit:contain; padding:16px}

/* reveal */
.rvp-reveal{opacity:0; transform:translateY(24px); transition:opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1)}
.rvp-reveal.rvp-in{opacity:1; transform:none}

@media(max-width:820px){
  .rvp-pillar{grid-template-columns:1fr; gap:26px}
  .rvp-pillar:nth-child(even) .rvp-shot{order:0}
  .rvp-steps{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){
  .rvp *{animation:none!important}
  .rvp-reveal{opacity:1; transform:none; transition:none}
}