/* v3 — recomendaciones de rediseño aplicadas sobre el sistema visual actual (solo se enlaza en la página v3) */
:root{--v3-teal:#12BCA9;--v3-soft:0 2px 40px rgba(0,0,0,.10);--v3-ink:#17151A;--v3-mute:#5b5566}

/* 01 hero: subtítulo blanco peso 400, fondo con radial sutil */
body.v3 .sec.purple.hero-2{background:radial-gradient(90% 75% at 50% 100%,#7C3AF2 0%,#6B25E5 100%)}
body.v3 .hero-sub{font-weight:400;color:#fff}

/* 02 comparación de dos columnas */
.v3-lead{font-size:24px;font-weight:700;line-height:33.6px;color:var(--purple);max-width:52ch;margin:33px 0 0}
.v3-cmp{display:grid;grid-template-columns:1fr 1fr;gap:33px;margin:33px 0 0;align-items:stretch}
.v3-col{background:#fff;border-radius:20px;padding:30px 32px;box-shadow:var(--v3-soft)}
.v3-col h4{display:flex;align-items:center;gap:12px;font:500 24px/28px var(--head);color:var(--v3-ink);padding-bottom:35px}
.v3-badge{font:700 12px/1 var(--font);letter-spacing:.06em;padding:5px 10px;border-radius:999px}
.v3-col.bad .v3-badge{background:#f4e2df;color:#a23b2e}
.v3-col.good .v3-badge{background:#e0f1ea;color:#1c8f69}
.v3-list{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.v3-list li{display:flex;gap:12px;align-items:flex-start;font:400 18px/25px var(--font);color:var(--v3-mute)}
.v3-list .i{flex:none;width:24px;height:24px;margin-top:1px;border-radius:50%;display:grid;place-items:center;font:700 13px/1 var(--font)}
.v3-list.x .i{background:#f4e2df;color:#a23b2e}
.v3-list.ok .i{background:#e0f1ea;color:#1c8f69}

/* 03 pasos como línea de tiempo */
.v3-tl{position:relative;max-width:900px;margin:40px 0 0;display:grid;gap:18px;z-index:2}
.v3-step:not(:last-child)::before{content:"";position:absolute;left:24px;top:25px;height:calc(100% + 18px);width:2px;background:rgba(255,255,255,.25)}
.v3-step{position:relative;display:grid;grid-template-columns:50px 1fr;gap:20px;align-items:start}
.v3-num{width:50px;height:50px;border-radius:50%;background:#e4ac25;color:var(--purple);font:700 20px/1 var(--head);display:grid;place-items:center;position:relative;z-index:1;box-shadow:0 0 0 6px var(--purple)}
.v3-body{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);border-radius:16px;padding:18px 24px}
.v3-body h4{font:500 20px/26px var(--head);color:#fff;padding-bottom:4px}
.v3-body p{font:400 16px/24px var(--font);color:rgba(255,255,255,.85)}

/* 04 beneficios: ícono, alturas iguales */
.v3-benefits{display:grid;grid-template-columns:repeat(3,1fr);gap:33px;margin:33px 0 28.5px;align-items:stretch}
.v3-benefit{background:#f5f0ff;border-radius:24px;padding:28px 26px;box-shadow:0 2px 30px rgba(0,0,0,.12);display:flex;flex-direction:column;gap:12px}
.v3-ic{width:56px;height:56px;border-radius:50%;background:var(--purple);color:#fff;display:grid;place-items:center}
.v3-ic svg{width:28px;height:28px}
.v3-benefit h4{font:500 20px/26px var(--head);color:var(--v3-ink)}
.v3-benefit p{font:400 16px/24px var(--font);color:var(--v3-mute)}

/* 09 métricas */
.v3-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;margin:60px 0 0;border-radius:18px;overflow:hidden;background:var(--purple)}
.v3-stat{background:rgba(255,255,255,.07);padding:32px 16px;text-align:center;color:#fff}
.v3-stat b{display:block;font:700 44px/1 var(--head)}
.v3-stat b .u{color:#fff}
.v3-stat span{display:block;margin-top:10px;font:400 15px/21px var(--font);color:rgba(255,255,255,.85)}

/* 08 capturas en marco de navegador */
body.v3 .zoom{border-radius:14px 14px 0 0;box-shadow:0 10px 34px rgba(46,16,110,.18)}
.v3-bar{background:#efeaf7;padding:11px 14px;display:flex;gap:7px;align-items:center}
.v3-bar i{width:10px;height:10px;border-radius:50%;background:#c9bfe0;display:block}
.v3-bar span{margin-left:8px;font:400 12px/1 var(--font);color:#8a80a0}

/* 05 bancos como chips */
body.v3 .bank-grid{display:flex;flex-wrap:wrap;gap:10px;grid-template-columns:none}
body.v3 .bank{background:#f5f0ff;border:1px solid rgba(107,37,229,.14);border-radius:30px;padding:9px 18px;font:400 15px/21px var(--font);color:var(--v3-ink);display:block}
body.v3 .bank.more{background:var(--purple);color:#fff;font-weight:700;border-color:transparent}

/* 06 tarjeta de precio */
body.v3 .price{background:#fff;color:var(--v3-ink);padding:0;border-radius:24px;overflow:hidden;position:relative;text-align:left;box-shadow:0 2px 40px rgba(0,0,0,.16);font-weight:400}
.v3-pcap{background:var(--purple);color:#fff;padding:14px 28px;font:700 13px/1 var(--head);letter-spacing:.12em;text-transform:uppercase}
.v3-amt{padding:26px 28px 8px;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.v3-amt b{font:700 56px/1 var(--head);color:var(--v3-ink)}
.v3-amt span{font-size:15px;color:var(--v3-mute)}
.v3-pl{list-style:none;margin:0;padding:16px 28px 20px;display:grid;gap:12px}
.v3-pl li{display:flex;gap:12px;align-items:flex-start;font:400 16px/24px var(--font);color:var(--v3-ink)}
.v3-pl svg{flex:none;width:20px;height:20px;margin-top:2px;color:var(--v3-teal)}
.v3-pfoot{padding:0 28px 26px;font:400 13px/1.55 var(--font);color:var(--v3-mute)}
.v3-pfoot p+p{margin-top:12px}
.v3-ribbon{position:absolute;top:31px;right:-53px;transform:rotate(45deg);background:var(--yellow);color:#1c1a1b;font:700 12px/1 var(--head);letter-spacing:.04em;padding:7px 50px;box-shadow:2px 2px 0 rgba(0,0,0,.15)}

/* 10 sistema: ritmo vertical y peso tipográfico */
body.v3 .s-lav,body.v3 .s-lav2{padding-bottom:120px}
body.v3 .d-card p,body.v3 .faq-a,body.v3 .bank-note{font-weight:400}
body.v3 .faq-item{background:transparent}
body.v3 .lead-rv.white{color:#fff}

/* 11 prueba social */
.v3-quote{max-width:900px;margin:40px auto 0;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);border-radius:20px;padding:34px 36px;position:relative;z-index:2}
.v3-stars{color:var(--yellow);letter-spacing:4px;font-size:18px;margin-bottom:14px}
.v3-quote p{font:500 24px/33px var(--head);color:#fff}
.v3-by{margin-top:18px;font:400 15px/21px var(--font);color:rgba(255,255,255,.8)}
.v3-logos{max-width:900px;margin:32px auto 0;display:flex;flex-wrap:wrap;justify-content:center;gap:14px 34px;position:relative;z-index:2}
.v3-logos b{font:700 20px/1 var(--head);color:rgba(255,255,255,.55)}

/* 12 cronograma */
.v3-weeks{display:grid;grid-template-columns:repeat(3,1fr);gap:33px;margin:33px 0 28.5px}
.v3-week{background:#f5f0ff;border-radius:20px;padding:26px 26px;box-shadow:var(--v3-soft)}
.v3-wk{font:700 14px/1 var(--head);color:var(--purple);letter-spacing:.09em;text-transform:uppercase}
.v3-week h4{font:500 20px/26px var(--head);color:var(--v3-ink);margin:10px 0 8px}
.v3-week p{font:400 16px/24px var(--font);color:var(--v3-mute)}

/* 13 seguridad y alcance */
.v3-sec-cmp{margin-top:33px}
body.v3 .v3-secur{padding-bottom:190px}

/* Bancos compatibles — cinta en movimiento (prototipo, opción 3), con logos reales */
.bk-body{margin-top:39px}
.bk-statline{display:flex;align-items:center;justify-content:flex-start;gap:18px;margin-bottom:34px;flex-wrap:wrap;text-align:left}
.bk-statline b{font:700 72px/1 var(--head);color:var(--purple)}
.bk-statline span{font:500 22px/28px var(--head);max-width:300px;color:#17151A}
.bk-marquee{overflow:hidden;display:grid;gap:16px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.bk-track{display:flex;gap:14px;width:max-content;animation:bkm 70s linear infinite}
.bk-track.rev{animation-direction:reverse;animation-duration:80s}
.bk-marquee:hover .bk-track{animation-play-state:paused}
.bk-pill{display:flex;align-items:center;gap:10px;background:#f5f0ff;border:1px solid rgba(107,37,229,.16);border-radius:40px;padding:6px 22px 6px 6px;font:600 15px var(--font);color:#17151A;white-space:nowrap}
.bk-logo-box{flex:none;height:34px;padding:3px 9px;border-radius:8px;display:flex;align-items:center;justify-content:center;overflow:hidden}
.bk-logo{height:100%;width:auto;max-width:130px;display:block;object-fit:contain}
.bk-logo-mb{mix-blend-mode:multiply}
@keyframes bkm{to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.bk-track{animation:none}}

@media(max-width:980px){
  .v3-cmp,.v3-weeks{grid-template-columns:1fr}
  .v3-benefits{grid-template-columns:1fr 1fr}
  .v3-stats{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:767px){
  .v3-benefits{grid-template-columns:1fr}
  .v3-lead,.v3-quote p{font-size:20px;line-height:28px}
  .v3-col{padding:24px 22px}
  .bk-statline b{font-size:56px}
  .bk-statline span{max-width:none}
}

/* Integración con Transportes: hero con ilustración, lista de transportes */
.tr-list{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;margin:34px 0 0;position:relative;z-index:2}
.tr-pill{background:#fff;color:var(--purple);font:700 22px/1 var(--head);padding:22px 28px;border-radius:18px;box-shadow:0 2px 30px rgba(0,0,0,.2)}
.tr-note{margin:30px 0 0;text-align:center;font:400 18px/27px var(--font);color:#fff;position:relative;z-index:2}
.tr-note a{color:var(--cyan);font-weight:700}
.tr-spec{padding-bottom:120px}
.v3-lead.reveal{margin-top:40px}
@media(max-width:767px){
        .tr-pill{font-size:20px;padding:18px 24px}
}
.tr-bal{text-wrap:balance}
body.v3 .tr-faq{padding-bottom:157px}
.tr-gb{display:inline-flex;vertical-align:top}
.tr-gb img{width:.87em;height:.87em}

/* Transportes: Así funciona (línea de tiempo + ilustración) */
.tr-how{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:56px;align-items:center;margin-top:40px}
.tr-how .v3-tl{max-width:none;margin:0}
.tr-how-img{align-self:start}
.tr-how-img svg{display:block;width:100%;max-width:440px;height:auto;margin:0 auto}
@media(max-width:980px){.tr-how{grid-template-columns:1fr;gap:34px}.tr-how-img{order:-1}.tr-how-img svg{max-width:320px}}