@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&display=swap');

:root{
    --vbp-green:#008000;
    --vbp-green-dark:#006400;
    --vbp-green-soft:#edf8ee;
    --vbp-cream:#f7f3eb;
    --vbp-brown:#8b5e3c;
    --vbp-dark:#10141b;
    --vbp-text:#495567;
    --vbp-muted:#798393;
    --vbp-border:#e4e8ec;
    --vbp-soft:#f7f8f9;
    --vbp-width:1220px;
    --vbp-font:'Manrope',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
}

.vbp-page{width:100%;overflow-x:hidden;background:#fff;color:var(--vbp-text);font-family:var(--vbp-font);line-height:1.75;-webkit-font-smoothing:antialiased}
.vbp-page *,.vbp-page *:before,.vbp-page *:after{box-sizing:border-box}
.vbp-page img{max-width:100%}
.vbp-container{width:100%;max-width:var(--vbp-width);margin:auto;padding:0 24px}
.vbp-eyebrow{display:inline-block;margin-bottom:16px;color:var(--vbp-green);font-size:.7rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.vbp-btn{min-height:50px;padding:0 22px;border:1px solid transparent;border-radius:8px;display:inline-flex;align-items:center;justify-content:center;font-size:.87rem;font-weight:650;text-decoration:none;transition:.25s ease}
.vbp-btn-primary{background:var(--vbp-green);color:#fff!important;box-shadow:0 10px 24px rgba(0,128,0,.18)}
.vbp-btn-primary:hover{background:var(--vbp-green-dark);transform:translateY(-2px)}
.vbp-btn-secondary{border-color:rgba(255,255,255,.22);background:rgba(255,255,255,.08);color:#fff!important}
.vbp-btn-outline{border-color:var(--vbp-border);background:#fff;color:var(--vbp-dark)!important}
.vbp-actions{margin-top:34px;display:flex;flex-wrap:wrap;gap:12px}
.vbp-actions-center{justify-content:center}

.vbp-hero{position:relative;min-height:720px;height:82vh;max-height:920px;overflow:hidden;display:flex;align-items:center;background:#090b0f}
.vbp-hero-media,.vbp-hero-overlay{position:absolute;inset:0}
.vbp-hero-media img{width:100%;height:100%;object-fit:cover}
.vbp-hero-overlay{background:linear-gradient(90deg,rgba(7,9,13,.96) 0%,rgba(7,9,13,.8) 48%,rgba(7,9,13,.25) 100%)}
.vbp-hero-inner{position:relative;z-index:2}
.vbp-hero-copy{max-width:880px}
.vbp-kicker{display:inline-flex;margin-bottom:22px;padding:7px 12px;border:1px solid rgba(255,255,255,.15);border-radius:999px;background:rgba(255,255,255,.07);color:rgba(255,255,255,.82);font-size:.7rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase}
.vbp-hero h1{margin:0;color:#fff;font-size:clamp(3rem,5.7vw,5.5rem);line-height:1;font-weight:600;letter-spacing:-.063em}
.vbp-hero-copy>p{max-width:700px;margin:26px 0 0;color:rgba(255,255,255,.72);font-size:1.03rem}
.vbp-hero-tags{margin-top:30px;display:flex;flex-wrap:wrap;gap:9px}
.vbp-hero-tags span{padding:7px 11px;border:1px solid rgba(255,255,255,.12);border-radius:999px;color:rgba(255,255,255,.6);font-size:.68rem;font-weight:600}

.vbp-partners{padding:28px 0;border-bottom:1px solid var(--vbp-border)}
.vbp-partner-row{display:grid;grid-template-columns:190px 1fr;align-items:center;gap:45px}
.vbp-partner-row>span{color:var(--vbp-muted);font-size:.67rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.vbp-partner-logos{display:grid;grid-template-columns:repeat(4,1fr);align-items:center;gap:45px}
.vbp-partner-logos img{width:100%;height:42px;object-fit:contain}

.vbp-intro h2,.vbp-section-head h2,.vbp-orders h2,.vbp-production h2,.vbp-scale h2,.vbp-dark-head h2,.vbp-online h2,.vbp-hioffice h2,.vbp-payments h2,.vbp-implementation-head h2,.vbp-cta-inner h2{margin:0;color:var(--vbp-dark);font-size:clamp(2.2rem,4.3vw,3.6rem);line-height:1.07;font-weight:650;letter-spacing:-.052em}

.vbp-intro{padding:118px 0 90px}
.vbp-intro-grid{display:grid;grid-template-columns:.92fr 1.08fr;gap:95px}
.vbp-intro-grid>div:last-child{padding-top:38px}
.vbp-intro p{margin:0 0 18px;color:var(--vbp-muted)}

.vbp-journey{padding-bottom:112px}
.vbp-journey-line{position:relative;display:grid;grid-template-columns:repeat(5,1fr);gap:28px}
.vbp-journey-line:before{content:"";position:absolute;top:16px;left:2%;right:2%;height:1px;background:var(--vbp-border)}
.vbp-journey-line article{position:relative;padding-top:45px}
.vbp-journey-line article:before{content:"";position:absolute;top:11px;left:0;width:11px;height:11px;border-radius:50%;background:var(--vbp-green);box-shadow:0 0 0 7px var(--vbp-green-soft)}
.vbp-journey-line span{color:var(--vbp-green);font-size:.66rem;font-weight:700}
.vbp-journey-line h3{margin:12px 0 0;color:var(--vbp-dark);font-size:.95rem}
.vbp-journey-line p{margin:7px 0 0;color:var(--vbp-muted);font-size:.76rem}

.vbp-comparison,.vbp-operations,.vbp-orders,.vbp-production,.vbp-scale,.vbp-online,.vbp-hioffice,
.vbp-analytics,.vbp-payments,.vbp-implementation{padding:112px 0}
.vbp-comparison,.vbp-production,.vbp-hioffice,.vbp-payments{background:var(--vbp-soft)}
.vbp-section-head{margin-bottom:54px;display:grid;grid-template-columns:1fr 420px;align-items:end;gap:60px}
.vbp-section-head p{margin:0;color:var(--vbp-muted)}

.vbp-brand-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.vbp-brand-panel{padding:44px;border:1px solid var(--vbp-border);border-radius:24px;background:#fff;box-shadow:0 24px 50px rgba(15,23,42,.05)}
.vbp-brand-top{display:flex;align-items:center;justify-content:space-between;gap:20px}
.vbp-brand-top img{width:150px;height:55px;object-fit:contain;object-position:left center}
.vbp-brand-top span{padding:7px 11px;border-radius:999px;background:var(--vbp-green-soft);color:var(--vbp-green-dark);font-size:.63rem;font-weight:700}
.vbp-brand-panel h3{margin:36px 0 0;color:var(--vbp-dark);font-size:1.55rem}
.vbp-brand-panel>p{margin:14px 0 0;color:var(--vbp-muted)}
.vbp-brand-panel ul,.vbp-clean-list{margin:28px 0 0;padding:0;list-style:none}
.vbp-brand-panel li,.vbp-clean-list li{position:relative;padding:10px 0 10px 18px;border-bottom:1px solid var(--vbp-border);font-size:.8rem}
.vbp-brand-panel li:before,.vbp-clean-list li:before{content:"";position:absolute;top:1.25em;left:0;width:5px;height:5px;border-radius:50%;background:var(--vbp-green)}

.vbp-operation-grid{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--vbp-border)}
.vbp-operation-grid article{padding:32px 28px;border-right:1px solid var(--vbp-border);border-bottom:1px solid var(--vbp-border)}
.vbp-operation-grid article:nth-child(3n){border-right:0}
.vbp-operation-grid span{display:block;margin-bottom:42px;color:var(--vbp-green);font-size:.68rem;font-weight:700}
.vbp-operation-grid h3{margin:0;color:var(--vbp-dark);font-size:1rem}
.vbp-operation-grid p{margin:10px 0 0;color:var(--vbp-muted);font-size:.76rem}

.vbp-orders-grid,.vbp-production-grid,.vbp-scale-grid,.vbp-online-grid,.vbp-hioffice-grid,.vbp-payments-grid{display:grid;grid-template-columns:.95fr 1.05fr;align-items:center;gap:90px}
.vbp-orders p,.vbp-production p,.vbp-scale p,.vbp-online p,.vbp-hioffice p,.vbp-payments p{max-width:570px;margin:22px 0 0;color:var(--vbp-muted)}
.vbp-clean-list{display:grid;grid-template-columns:repeat(2,1fr);gap:0 22px}

.vbp-order-ui,.vbp-production-ui,.vbp-scale-ui,.vbp-shop-ui{padding:28px;border:1px solid var(--vbp-border);border-radius:24px;background:#fff;box-shadow:0 24px 55px rgba(15,23,42,.07)}
.vbp-ui-head{padding-bottom:20px;border-bottom:1px solid var(--vbp-border);display:flex;justify-content:space-between;align-items:center}
.vbp-ui-head small,.vbp-ui-head strong{display:block}
.vbp-ui-head small{color:var(--vbp-green);font-size:.62rem;text-transform:uppercase}
.vbp-ui-head strong{color:var(--vbp-dark)}
.vbp-ui-head>span{color:var(--vbp-muted);font-size:.65rem}
.vbp-order-row{padding:17px 0;border-bottom:1px solid var(--vbp-border);display:grid;grid-template-columns:55px 1fr auto;align-items:center;gap:12px}
.vbp-order-row>span{color:var(--vbp-muted);font-size:.7rem}
.vbp-order-row strong,.vbp-order-row small{display:block}
.vbp-order-row strong{color:var(--vbp-dark);font-size:.76rem}
.vbp-order-row small{color:var(--vbp-muted);font-size:.65rem}
.vbp-order-row b{padding:6px 9px;border-radius:999px;background:var(--vbp-green-soft);color:var(--vbp-green-dark);font-size:.6rem}

.vbp-production-grid{grid-template-columns:1.05fr .95fr}
.vbp-production-ui>small,.vbp-scale-display small{color:var(--vbp-green);font-size:.65rem;font-weight:700;text-transform:uppercase}
.vbp-production-ui h3{margin:8px 0 20px;color:var(--vbp-dark)}
.vbp-production-ui>div,.vbp-scale-ui>div{padding:15px 0;border-bottom:1px solid var(--vbp-border);display:flex;justify-content:space-between;font-size:.76rem}
.vbp-production-ui strong,.vbp-scale-ui strong{color:var(--vbp-dark)}

.vbp-scale-ui{max-width:430px;margin-left:auto}
.vbp-scale-display{display:block!important}
.vbp-scale-display strong{display:block;margin-top:7px;font-size:1.1rem}
.vbp-scale-total{padding-top:22px!important}
.vbp-scale-total strong{font-size:1.35rem;color:var(--vbp-green)}

.vbp-stock{padding:112px 0;background:var(--vbp-dark)}
.vbp-dark-head{max-width:790px;margin-bottom:54px}
.vbp-dark-head h2{color:#fff}
.vbp-dark-head p{max-width:680px;margin:20px 0 0;color:rgba(255,255,255,.6)}
.vbp-dashboard{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.vbp-dashboard div{padding:25px;border:1px solid rgba(255,255,255,.1);border-radius:14px;background:rgba(255,255,255,.045)}
.vbp-dashboard small,.vbp-dashboard strong,.vbp-dashboard span{display:block}
.vbp-dashboard small{color:rgba(255,255,255,.45);font-size:.64rem}
.vbp-dashboard strong{margin-top:10px;color:#fff;font-size:1.6rem}
.vbp-dashboard span{color:rgba(255,255,255,.45);font-size:.65rem}

.vbp-online{background:#fff}
.vbp-shop-ui{overflow:hidden;padding:0}
.vbp-browser{padding:14px 18px;border-bottom:1px solid var(--vbp-border);display:flex;gap:7px}
.vbp-browser span{width:8px;height:8px;border-radius:50%;background:#d9dee3}
.vbp-shop-hero{min-height:180px;padding:30px;display:flex;flex-direction:column;justify-content:flex-end;background:linear-gradient(145deg,#efe5d5,#f8f5ef)}
.vbp-shop-hero small{color:var(--vbp-brown);font-size:.64rem}
.vbp-shop-hero strong{color:var(--vbp-dark);font-size:1.35rem}
.vbp-shop-products{padding:20px;display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.vbp-shop-products div>span{display:block;height:90px;border-radius:8px;background:var(--vbp-cream)}
.vbp-shop-products strong,.vbp-shop-products small{display:block}
.vbp-shop-products strong{margin-top:8px;color:var(--vbp-dark);font-size:.68rem}
.vbp-shop-products small{color:var(--vbp-muted);font-size:.62rem}

.vbp-feature-grid{margin-top:36px;display:grid;grid-template-columns:repeat(2,1fr);border-top:1px solid var(--vbp-border)}
.vbp-feature-grid>div{min-height:82px;padding:20px;border-right:1px solid var(--vbp-border);border-bottom:1px solid var(--vbp-border);color:var(--vbp-dark);font-size:.76rem;font-weight:600}
.vbp-feature-grid>div:nth-child(2n){border-right:0}
.vbp-hioffice-image img{width:100%;max-height:430px;object-fit:contain}

.vbp-analytics-list{display:grid;grid-template-columns:repeat(2,1fr)}
.vbp-analytics-list div{padding:22px 0;border-bottom:1px solid var(--vbp-border);display:grid;grid-template-columns:52px 1fr}
.vbp-analytics-list span{color:var(--vbp-green);font-size:.65rem;font-weight:700}
.vbp-analytics-list strong{color:var(--vbp-dark);font-size:.8rem}

.vbp-payments-grid{grid-template-columns:1fr 420px}
.vbp-payment-logos{padding-left:45px;border-left:1px solid var(--vbp-border);display:grid;grid-template-columns:repeat(2,1fr);align-items:center;gap:32px}
.vbp-payment-logos img{width:100%;height:80px;object-fit:contain}

.vbp-types{padding:88px 0}
.vbp-type-list{display:flex;flex-wrap:wrap;gap:10px}
.vbp-type-list span{padding:10px 15px;border:1px solid var(--vbp-border);border-radius:999px;color:var(--vbp-dark);font-size:.78rem;font-weight:600}

.vbp-implementation{background:var(--vbp-dark)}
.vbp-implementation-head{max-width:790px;margin-bottom:58px}
.vbp-implementation-head h2{color:#fff}
.vbp-implementation-list{border-top:1px solid rgba(255,255,255,.12);display:grid;grid-template-columns:repeat(4,1fr)}
.vbp-implementation-list article{padding:34px 28px;border-right:1px solid rgba(255,255,255,.12)}
.vbp-implementation-list article:last-child{border-right:0}
.vbp-implementation-list span{display:block;margin-bottom:50px;color:#52ca5b;font-size:.68rem;font-weight:700}
.vbp-implementation-list h3{margin:0;color:#fff;font-size:1rem}
.vbp-implementation-list p{margin:10px 0 0;color:rgba(255,255,255,.55);font-size:.78rem}

.vbp-cta{padding:110px 0}
.vbp-cta-inner{max-width:920px;margin:auto;padding:64px 48px;border-top:1px solid var(--vbp-border);border-bottom:1px solid var(--vbp-border);text-align:center}
.vbp-cta-inner p{max-width:680px;margin:21px auto 0;color:var(--vbp-muted)}

@media(max-width:980px){
    .vbp-intro-grid,.vbp-section-head,.vbp-orders-grid,.vbp-production-grid,.vbp-scale-grid,.vbp-online-grid,.vbp-hioffice-grid,.vbp-payments-grid{grid-template-columns:1fr;gap:50px}
    .vbp-intro-grid>div:last-child{padding-top:0}
    .vbp-brand-grid{grid-template-columns:1fr}
    .vbp-journey-line{grid-template-columns:repeat(2,1fr)}
    .vbp-journey-line:before{display:none}
    .vbp-dashboard,.vbp-implementation-list{grid-template-columns:repeat(2,1fr)}
    .vbp-scale-ui{margin-left:0}
    .vbp-payment-logos{padding:35px 0 0;border-top:1px solid var(--vbp-border);border-left:0}
}

@media(max-width:720px){
    .vbp-container{padding:0 18px}
    .vbp-hero{min-height:650px;height:82vh;align-items:flex-end}
    .vbp-hero-overlay{background:linear-gradient(180deg,rgba(7,9,13,.12),rgba(7,9,13,.62) 42%,rgba(7,9,13,.97))}
    .vbp-hero-inner{padding-bottom:70px}
    .vbp-hero h1{font-size:clamp(2.5rem,11vw,4rem)}
    .vbp-partner-row{grid-template-columns:1fr;gap:22px}
    .vbp-partner-logos{grid-template-columns:repeat(2,1fr)}
    .vbp-intro,.vbp-comparison,.vbp-operations,.vbp-orders,.vbp-production,.vbp-scale,.vbp-stock,.vbp-online,.vbp-hioffice,.vbp-analytics,.vbp-payments,.vbp-implementation,.vbp-cta{padding-top:78px;padding-bottom:78px}
    .vbp-journey-line,.vbp-operation-grid,.vbp-dashboard,.vbp-analytics-list,.vbp-implementation-list{grid-template-columns:1fr}
    .vbp-operation-grid article,.vbp-operation-grid article:nth-child(3n),.vbp-implementation-list article{border-right:0}
    .vbp-clean-list,.vbp-feature-grid{grid-template-columns:1fr}
    .vbp-feature-grid>div{border-right:0}
    .vbp-shop-products{grid-template-columns:1fr}
    .vbp-brand-panel{padding:30px 24px}
    .vbp-cta-inner{padding:50px 20px}
}

@media(max-width:520px){
    .vbp-actions{flex-direction:column}
    .vbp-actions .vbp-btn{width:100%}
    .vbp-hero-tags{display:none}
    .vbp-partner-logos,.vbp-payment-logos{grid-template-columns:1fr}
    .vbp-order-row{grid-template-columns:48px 1fr}
    .vbp-order-row b{grid-column:2;justify-self:start}
}

@media(prefers-reduced-motion:reduce){
    .vbp-btn{transition:none}
}


/* =========================================================
   ANALÍTICA
   Imagen izquierda + contenido derecha
========================================================= */

.vbp-analytics {
    padding: 105px 0;
    background: #f6f8fa;
}

.vbp-analytics-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    align-items: center;
    gap: 75px;
}


/* =========================================================
   IMAGEN
========================================================= */

.vbp-analytics-photo {
    width: 100%;
    margin: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    overflow: hidden;

    border-radius: 20px;
    background: #fff;

    box-shadow: 0 20px 50px rgba(15, 23, 42, .08);
}

.vbp-analytics-photo img {
    display: block;

    height: 620px;

    object-fit: cover;
    object-position: center;
}


/* =========================================================
   CONTENIDO
========================================================= */

.vbp-analytics-content {
    width: 100%;
    max-width: 560px;
}

.vbp-analytics-heading {
    margin-bottom: 32px;
}

.vbp-analytics-heading h2 {
    margin: 0;

    color: var(--vbp-dark);

    font-size: clamp(2rem, 4vw, 3rem);
    line-height: 1.08;
    font-weight: 650;
    letter-spacing: -.045em;
}

.vbp-analytics-heading p {
    margin: 20px 0 0;

    color: var(--vbp-muted);

    font-size: .95rem;
    line-height: 1.75;
}


/* =========================================================
   LISTA DE ESTADÍSTICAS
========================================================= */

.vbp-analytics-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.vbp-analytics-list > div {
    min-height: 88px;

    padding: 20px;

    display: flex;
    align-items: center;

    border-radius: 13px;

    background: #fff;

    transition:
        transform .3s ease,
        border-color .3s ease,
        box-shadow .3s ease;
}

.vbp-analytics-list strong {
    color: var(--vbp-dark);

    font-size: .84rem;
    line-height: 1.45;
    font-weight: 600;
}

.vbp-analytics-list > div:hover {
    transform: translateY(-4px);

    border-color: rgba(0, 128, 0, .25);

    box-shadow: 0 12px 30px rgba(15, 23, 42, .06);
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 950px) {

    .vbp-analytics-layout {
        grid-template-columns: 1fr;
        gap: 45px;
    }

    .vbp-analytics-photo {
        max-width: 720px;
        margin: 0 auto;
    }

    .vbp-analytics-photo img {
        height: 460px;
    }

    .vbp-analytics-content {
        max-width: 720px;
        margin: 0 auto;
    }

}


/* =========================================================
   MÓVIL
========================================================= */

@media (max-width: 650px) {

    .vbp-analytics {
        padding: 75px 0;
    }

    .vbp-analytics-layout {
        gap: 35px;
    }

    .vbp-analytics-photo {
        border-radius: 15px;
    }

    .vbp-analytics-photo img {
        height: 330px;
    }

    .vbp-analytics-list {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .vbp-analytics-list > div {
        min-height: 72px;
        padding: 18px;
    }

}