/* ==========================================================================
   Cuantico — Subpáginas de versión (Lite · Starter · Pro · Enterprise)
   Se usa junto con sol.css (marco de monitor, visor, cierre).
   ========================================================================== */

/* ---------- Portada ---------- */
.vh { position: relative; overflow: hidden; isolation: isolate; padding: calc(var(--header-h) + 56px) 0 clamp(56px, 7vw, 96px); background: radial-gradient(52% 60% at 80% 35%, rgba(27, 79, 156, .55), transparent 70%), radial-gradient(36% 46% at 0% 100%, rgba(59, 154, 225, .18), transparent 70%), var(--navy); }
.vh__ghost { position: absolute; z-index: -1; left: -1vw; bottom: -4vw; font-size: clamp(7rem, 24vw, 22rem); font-weight: 600; letter-spacing: -.07em; line-height: .8; color: transparent; -webkit-text-stroke: 1px rgba(143, 201, 242, .16); white-space: nowrap; pointer-events: none; user-select: none; }
.vh__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(28px, 5vw, 76px); align-items: center; }
.vh__badge { display: inline-flex; align-items: center; gap: 12px; margin-top: 22px; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: #bfe6ff; }
.vh__badge b { display: inline-grid; place-items: center; min-width: 34px; height: 34px; padding: 0 8px; border-radius: 10px; font-weight: 500; color: var(--navy); background: linear-gradient(135deg, #bfe6ff, #3B9AE1); }
.vh__meter { display: inline-flex; gap: 4px; margin-left: 4px; } .vh__meter i { width: 22px; height: 5px; border-radius: 5px; background: rgba(255, 255, 255, .22); } .vh__meter i.on { background: linear-gradient(90deg, #3B9AE1, #bfe6ff); }
.vh .hx__t { font-size: clamp(2.5rem, 5vw, 5rem); max-width: 14ch; }
.vh .hx__t .tone { color: var(--sky); }
.vh__lead { max-width: 52ch; color: #c3d2e5; }
.vh__chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; list-style: none; padding: 0; }
.vh__chips li { display: grid; gap: 1px; padding: 10px 16px; border-radius: 14px; background: rgba(255, 255, 255, .07); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18); }
.vh__chips small { font-family: var(--font-mono); font-size: .58rem; letter-spacing: .14em; text-transform: uppercase; color: #8fc9f2; } .vh__chips strong { font-weight: 550; color: #fff; }
.vh__shot { position: relative; }
.vh__shot .mon { box-shadow: 0 0 0 1px rgba(255, 255, 255, .16), 0 50px 100px -30px rgba(0, 0, 0, .8); }
.vh__shot .mon img { max-height: 520px; object-fit: cover; object-position: top left; }
.vh__shot::before { content: ""; position: absolute; inset: 8% -6% -8% 10%; z-index: -1; border-radius: 28px; background: linear-gradient(135deg, rgba(59, 154, 225, .4), rgba(27, 79, 156, .1)); filter: blur(2px); transform: rotate(3deg); }
@media (max-width: 980px) { .vh__grid { grid-template-columns: 1fr; } .vh .mon--tilt { transform: none; } }

/* ---------- Qué incluye ---------- */
.vcore { list-style: none; margin: 0 0 clamp(28px, 4vw, 48px); padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.vcore li { position: relative; padding: 20px 20px 22px; border-radius: 20px; background: linear-gradient(160deg, #f3f5f8, #fff); box-shadow: inset 0 0 0 1px rgba(11, 31, 58, .1); overflow: hidden; transition: transform .5s var(--ease-out), box-shadow .4s; }
.vcore li::before { content: attr(data-n); position: absolute; right: 14px; top: 6px; font-size: 3.4rem; font-weight: 600; letter-spacing: -.06em; color: rgba(27, 79, 156, .08); }
.vcore li:hover { transform: translateY(-6px); box-shadow: 0 0 0 1px rgba(27, 79, 156, .4), 0 30px 50px -30px rgba(27, 79, 156, .5); }
.vcore strong { position: relative; font-size: 1.15rem; font-weight: 550; letter-spacing: -.02em; color: var(--navy); }
.vfeat { list-style: none; margin: clamp(22px, 3vw, 36px) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.vfeat li { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; font-size: .9rem; color: #23364f; background: #eef3fa; box-shadow: inset 0 0 0 1px rgba(27, 79, 156, .14); transition: background .3s, color .3s, transform .35s var(--ease-spring); }
.vfeat li:hover { background: var(--blue); color: #fff; transform: translateY(-2px); }
.vfeat svg { width: 14px; height: 14px; color: var(--ok, #1fa971); flex: none; } .vfeat li:hover svg { color: #fff; }
@media (max-width: 900px) { .vcore { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- Para quién + siguiente paso ---------- */
.vtg { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; counter-reset: tg; }
.vtg li { position: relative; padding: 26px 24px 28px; border-radius: 22px; background: #fff; box-shadow: 0 0 0 1px rgba(11, 31, 58, .08), 0 24px 50px -36px rgba(11, 31, 58, .4); transition: transform .5s var(--ease-out), box-shadow .4s; counter-increment: tg; }
.vtg li::before { content: "0" counter(tg); display: block; margin-bottom: 14px; font-family: var(--font-mono); font-size: .72rem; letter-spacing: .12em; color: var(--blue); }
.vtg li:hover { transform: translateY(-6px); box-shadow: 0 0 0 1px rgba(27, 79, 156, .4), 0 34px 60px -34px rgba(27, 79, 156, .5); }
.vtg h3 { font-size: 1.2rem; font-weight: 550; letter-spacing: -.02em; color: var(--navy); margin-bottom: 8px; } .vtg p { color: #23364f; font-size: .95rem; }
.vtg--steps li::after { content: ""; position: absolute; right: -14px; top: 50%; width: 14px; height: 2px; background: var(--blue); }
.vtg--steps li:last-child::after { display: none; }
.vnext { display: grid; grid-template-columns: 1fr auto; gap: 18px 32px; align-items: center; margin-top: clamp(22px, 3vw, 36px); padding: clamp(22px, 3vw, 32px); border-radius: 24px; color: #eaf2fc; background: linear-gradient(120deg, #0B1F3A, #1B4F9C); box-shadow: 0 40px 80px -44px rgba(11, 31, 58, .8); }
.vnext p { max-width: 62ch; font-size: 1.05rem; line-height: 1.5; }
.vnext .btn { white-space: nowrap; }
@media (max-width: 900px) { .vtg { grid-template-columns: 1fr; } .vtg--steps li::after { display: none; } .vnext { grid-template-columns: 1fr; } }

/* ---------- Otras versiones ---------- */
.vnav { display: flex; flex-wrap: wrap; gap: 10px; margin-top: clamp(26px, 4vw, 44px); padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, .26); align-items: center; }
.vnav > span { font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: #cfe3fa; margin-right: 6px; }
.vnav a { padding: 8px 16px; border-radius: 999px; font-size: .88rem; font-weight: 500; color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35); transition: background .3s, color .3s, transform .35s var(--ease-spring); }
.vnav a:hover { background: #fff; color: var(--navy); transform: translateY(-3px); }