:root{
    --bg:#061018;
    --bg-2:#091720;
    --bg-3:#0d1c27;
    --surface:#0e1f2b;
    --surface-2:#132734;
    --line:rgba(255,255,255,.10);
    --text:#f6f8fa;
    --muted:#a8b5bf;
    --green:#75d52a;
    --green-2:#4bab0c;
    --cyan:#2dd4bf;
    --shadow:0 30px 80px rgba(0,0,0,.35);
    --radius:24px;
    --container:1180px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
    margin:0;
    font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
    background:var(--bg);
    color:var(--text);
    line-height:1.6;
}
body.menu-open{overflow:hidden}
a{text-decoration:none;color:inherit}
.container{width:min(calc(100% - 40px),var(--container));margin-inline:auto}

.top-strip{
    background:#03090e;
    border-bottom:1px solid var(--line);
}
.top-strip-inner{
    min-height:36px;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-wrap:wrap;
    gap:28px;
    color:#dbe4e9;
    font-size:12px;
}
.top-strip-inner span::before{
    content:"✓";
    color:var(--green);
    font-weight:900;
    margin-right:7px;
}

.site-header{
    position:sticky;
    top:0;
    z-index:1000;
    background:rgba(4,11,16,.86);
    backdrop-filter:blur(18px);
    border-bottom:1px solid var(--line);
}
.header-inner{
    min-height:82px;
    display:flex;
    align-items:center;
    gap:30px;
}
.brand{
    display:flex;
    align-items:center;
    gap:12px;
    margin-right:auto;
}
.brand-mark{font-size:42px;line-height:1}
.brand-copy strong{
    display:block;
    font-size:24px;
    letter-spacing:.04em;
}
.brand-copy strong span{color:var(--green)}
.brand-copy small{
    display:block;
    color:var(--muted);
    font-size:10px;
    letter-spacing:.25em;
    text-transform:uppercase;
}
.main-nav{display:flex;gap:28px}
.main-nav a{font-size:14px;font-weight:800;color:#dce4e8}
.main-nav a:hover{color:var(--green)}
.nav-toggle{
    display:none;
    border:1px solid var(--line);
    background:var(--surface);
    color:#fff;
    border-radius:10px;
    padding:8px 12px;
    font-size:20px;
}

.btn{
    min-height:50px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:0 24px;
    border-radius:13px;
    border:1px solid transparent;
    font-size:14px;
    font-weight:900;
    letter-spacing:.02em;
    text-transform:uppercase;
    transition:.25s ease;
}
.btn:hover{transform:translateY(-2px)}
.btn-primary{
    color:#fff;
    background:linear-gradient(135deg,var(--green-2),var(--green));
    box-shadow:0 16px 40px rgba(91,190,20,.24);
}
.btn-outline{
    color:#fff;
    border-color:rgba(117,213,42,.52);
    background:rgba(5,13,18,.35);
}
.btn-outline:hover{border-color:var(--green);color:var(--green)}

.hero{
    position:relative;
    overflow:hidden;
    padding:105px 0 95px;
    background:
        radial-gradient(circle at 70% 20%,rgba(25,110,91,.28),transparent 32%),
        linear-gradient(180deg,#061018 0%,#08141d 100%);
}
.hero::before{
    content:"";
    position:absolute;
    inset:0;
    opacity:.24;
    background-image:
        linear-gradient(rgba(117,213,42,.08) 1px,transparent 1px),
        linear-gradient(90deg,rgba(117,213,42,.08) 1px,transparent 1px);
    background-size:58px 58px;
    mask-image:linear-gradient(to bottom,black,transparent 80%);
}
.hero-orb{
    position:absolute;
    border-radius:50%;
    filter:blur(50px);
    opacity:.20;
}
.hero-orb-one{width:420px;height:420px;background:var(--green);right:-160px;top:10%}
.hero-orb-two{width:300px;height:300px;background:var(--cyan);left:-120px;bottom:-100px}

.hero-grid{
    position:relative;
    display:grid;
    grid-template-columns:1fr 1.08fr;
    gap:66px;
    align-items:center;
}
.eyebrow{
    display:inline-block;
    margin-bottom:14px;
    color:var(--green);
    font-size:12px;
    font-weight:900;
    letter-spacing:.16em;
    text-transform:uppercase;
}
.hero h1{
    margin:0;
    max-width:680px;
    font-size:clamp(54px,6.4vw,86px);
    line-height:.95;
    letter-spacing:-.055em;
}
.hero h1 span{display:block;color:var(--green)}
.hero-lead{
    max-width:660px;
    margin:30px 0;
    color:#cbd4da;
    font-size:20px;
}
.hero-actions,.system-actions,.final-actions{
    display:flex;
    flex-wrap:wrap;
    gap:15px;
}
.hero-proof{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:18px;
    margin-top:40px;
    padding-top:24px;
    border-top:1px solid var(--line);
}
.hero-proof div{
    padding:15px 18px;
    background:rgba(255,255,255,.035);
    border:1px solid var(--line);
    border-radius:16px;
}
.hero-proof strong,.hero-proof span{display:block}
.hero-proof span{color:var(--muted);font-size:13px}

.hero-console{position:relative;min-height:545px}
.console-window{
    position:absolute;
    inset:20px 28px 30px 0;
    overflow:hidden;
    background:#050b10;
    border:1px solid rgba(255,255,255,.18);
    border-radius:24px;
    box-shadow:var(--shadow);
    transform:perspective(1200px) rotateY(-5deg) rotateX(1deg);
}
.console-bar{
    min-height:52px;
    display:flex;
    align-items:center;
    gap:15px;
    padding:0 18px;
    border-bottom:1px solid var(--line);
    background:#091219;
}
.console-bar>span{font-weight:800}
.console-bar small{margin-left:auto;color:var(--green)}
.console-dots{display:flex;gap:7px}
.console-dots i{width:8px;height:8px;border-radius:50%;background:#3a4650}
.console-body{
    display:grid;
    grid-template-columns:145px 1fr;
    min-height:445px;
}
.console-sidebar{
    display:flex;
    flex-direction:column;
    gap:18px;
    padding:24px 16px;
    border-right:1px solid var(--line);
    color:#84939e;
    font-size:13px;
}
.console-sidebar strong{
    color:var(--green);
    font-size:24px;
    margin-bottom:12px;
}
.console-sidebar span{padding:8px 10px;border-radius:8px}
.console-sidebar .active{background:rgba(117,213,42,.12);color:var(--green)}
.console-main{padding:26px}
.console-title{display:flex;justify-content:space-between;gap:20px}
.console-title small,.console-title strong{display:block}
.console-title small{color:var(--muted)}
.console-title strong{font-size:22px;margin-top:4px}
.console-title>span{color:var(--green);font-size:12px}
.console-metrics{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:12px;
    margin-top:24px;
}
.console-metrics div{
    padding:15px;
    border:1px solid var(--line);
    border-radius:12px;
    background:var(--surface);
}
.console-metrics small,.console-metrics strong{display:block}
.console-metrics small{color:var(--muted)}
.console-metrics strong{color:var(--green);margin-top:5px}
.console-chart{
    height:225px;
    display:flex;
    align-items:end;
    gap:13px;
    margin-top:18px;
    padding:22px;
    border:1px solid var(--line);
    border-radius:14px;
    background:
        linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px);
    background-size:100% 45px;
}
.console-chart i{
    flex:1;
    border-radius:8px 8px 2px 2px;
    background:linear-gradient(180deg,var(--green),var(--green-2));
}
.floating-card{
    position:absolute;
    min-width:155px;
    padding:14px 16px;
    background:rgba(9,22,31,.96);
    border:1px solid rgba(117,213,42,.25);
    border-radius:16px;
    box-shadow:var(--shadow);
}
.floating-card span,.floating-card strong{display:block}
.floating-card span{font-size:11px;color:var(--muted);text-transform:uppercase}
.floating-card strong{color:var(--green)}
.floating-card-one{right:0;top:50px}
.floating-card-two{right:8px;bottom:24px}

.section{padding:100px 0}
.systems-section{background:#040a0f}
.subscription-section{background:#09151e}
.services-section{background:#0b1822}
.about-section{background:#050c12}
.section-heading{max-width:780px;margin-bottom:50px}
.section-heading h2,.subscription-copy h2,.about-title h2,.final-cta-box h2{
    margin:0;
    font-size:clamp(38px,4.6vw,60px);
    line-height:1.05;
    letter-spacing:-.045em;
}
.section-heading p,.subscription-copy p,.about-copy,.final-cta-box p{
    color:var(--muted);
    font-size:18px;
}
.demo-credentials{
    display:inline-flex;
    flex-wrap:wrap;
    gap:14px;
    margin-top:14px;
    padding:13px 16px;
    border:1px solid rgba(117,213,42,.28);
    border-radius:14px;
    background:rgba(117,213,42,.08);
    font-size:14px;
}
.demo-credentials span{color:var(--green);font-weight:900}
.system-showcase{display:grid;gap:34px}
.system-card{
    display:grid;
    grid-template-columns:1.15fr .85fr;
    gap:0;
    overflow:hidden;
    border:1px solid var(--line);
    border-radius:28px;
    background:linear-gradient(180deg,#0d1b25,#09141c);
    box-shadow:var(--shadow);
}
.system-card.reverse{grid-template-columns:.85fr 1.15fr}
.system-card.reverse .system-preview{order:2}
.system-card.featured{border-color:rgba(117,213,42,.42)}
.system-preview{
    min-height:390px;
    padding:24px;
    background:
        radial-gradient(circle at 70% 10%,rgba(117,213,42,.16),transparent 36%),
        #071017;
}
.preview-toolbar{
    display:flex;
    justify-content:space-between;
    padding:13px 16px;
    border:1px solid var(--line);
    border-radius:14px 14px 0 0;
    background:#0b161f;
}
.preview-toolbar small{color:var(--green)}
.preview-ui,.preview-dashboard,.credit-ui{
    min-height:300px;
    border:1px solid var(--line);
    border-top:0;
    border-radius:0 0 14px 14px;
    background:#09131b;
}
.preview-ui{display:grid;grid-template-columns:90px 1fr}
.preview-sidebar,.preview-menu{
    border-right:1px solid var(--line);
    background:
        linear-gradient(#142430 12px,transparent 12px) 16px 26px/50px 42px repeat-y;
}
.preview-content{padding:22px}
.preview-search{
    height:38px;
    width:75%;
    border-radius:10px;
    background:#132530;
}
.preview-products{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:12px;
    margin-top:20px;
}
.preview-products i{
    min-height:82px;
    border-radius:12px;
    background:linear-gradient(180deg,#152a36,#0e1d27);
    border:1px solid var(--line);
}
.preview-dashboard{display:grid;grid-template-columns:90px 1fr}
.preview-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:12px;
    padding:22px;
}
.preview-grid i{
    min-height:76px;
    border-radius:12px;
    background:#132630;
    border:1px solid var(--line);
}
.preview-grid b{
    grid-column:1/-1;
    min-height:160px;
    border-radius:14px;
    background:
        linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px);
    background-size:100% 34px;
    border:1px solid var(--line);
}
.credit-ui{padding:22px}
.credit-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.credit-summary i{
    min-height:75px;
    border:1px solid var(--line);
    border-radius:12px;
    background:#132630;
}
.credit-table{
    display:grid;
    gap:10px;
    margin-top:18px;
}
.credit-table b{
    min-height:38px;
    border-radius:9px;
    background:#10212b;
    border:1px solid var(--line);
}
.system-content{padding:42px}
.system-tag{
    color:var(--green);
    font-size:12px;
    font-weight:900;
    letter-spacing:.15em;
    text-transform:uppercase;
}
.system-content h3{
    margin:12px 0 14px;
    font-size:34px;
    line-height:1.12;
}
.system-content p,.system-content li{color:var(--muted)}
.system-content ul{padding-left:18px;margin:22px 0 28px}
.text-link{align-self:center;color:var(--green);font-weight:900}

.subscription-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:72px;
    align-items:start;
}
.subscription-copy strong{color:#fff}
.subscription-copy .btn{margin-top:16px}
.subscription-benefits{display:grid;gap:14px}
.subscription-benefits article{
    display:grid;
    grid-template-columns:55px 1fr;
    gap:16px;
    padding:22px;
    border:1px solid var(--line);
    border-radius:18px;
    background:rgba(255,255,255,.035);
}
.subscription-benefits article>span{
    width:46px;height:46px;
    display:grid;place-items:center;
    border-radius:13px;
    background:rgba(117,213,42,.12);
    color:var(--green);
    font-weight:900;
}
.subscription-benefits h3{margin:0 0 4px}
.subscription-benefits p{margin:0;color:var(--muted)}

.services-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:20px;
}
.service-card{
    min-height:250px;
    padding:28px;
    border:1px solid var(--line);
    border-radius:22px;
    background:linear-gradient(180deg,#10212c,#0b1821);
    transition:.3s ease;
}
.service-card:hover{
    transform:translateY(-8px);
    border-color:rgba(117,213,42,.38);
}
.service-card>span{font-size:42px}
.service-card h3{font-size:22px}
.service-card p{color:var(--muted)}

.about-grid{
    display:grid;
    grid-template-columns:.9fr 1.1fr;
    gap:80px;
}
.about-copy{font-size:20px}

.final-cta{
    padding:70px 0;
    background:#061018;
}
.final-cta-box{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:40px;
    padding:48px;
    border-radius:28px;
    background:
        radial-gradient(circle at 80% 10%,rgba(255,255,255,.14),transparent 26%),
        linear-gradient(135deg,var(--green-2),var(--green));
    box-shadow:var(--shadow);
}
.final-cta-box .eyebrow,.final-cta-box p{color:#efffe7}
.final-cta-box h2{max-width:770px}
.final-cta-box .btn-primary{background:#061018}
.final-cta-box .btn-outline{border-color:rgba(255,255,255,.65)}

.site-footer{
    padding:34px 0;
    background:#020609;
    border-top:1px solid var(--line);
}
.footer-inner{
    display:flex;
    justify-content:space-between;
    gap:30px;
}
.footer-inner p,.footer-inner div:last-child{
    color:var(--muted);
    font-size:13px;
}
.footer-inner div:last-child{display:flex;gap:22px}

.floating-whatsapp{
    position:fixed;
    right:22px;
    bottom:22px;
    width:62px;
    height:62px;
    display:grid;
    place-items:center;
    border-radius:50%;
    background:#25d366;
    color:#fff;
    font-size:28px;
    box-shadow:0 18px 45px rgba(0,0,0,.35);
    z-index:999;
    transition:.25s ease;
}
.floating-whatsapp:hover{transform:translateY(-4px) scale(1.04)}

.reveal{
    opacity:0;
    transform:translateY(28px);
    transition:opacity .75s ease,transform .75s ease;
}
.reveal.visible{opacity:1;transform:none}
.reveal-delay{transition-delay:.12s}

@media(max-width:1020px){
    .header-cta{display:none}
    .nav-toggle{display:block}
    .main-nav{
        position:fixed;
        inset:118px 0 auto 0;
        display:none;
        flex-direction:column;
        padding:26px 20px;
        background:#040a0f;
        border-bottom:1px solid var(--line);
    }
    .main-nav.open{display:flex}
    .hero-grid,.subscription-grid,.about-grid{grid-template-columns:1fr}
    .hero-console{min-height:480px}
    .services-grid{grid-template-columns:repeat(2,1fr)}
    .system-card,.system-card.reverse{grid-template-columns:1fr}
    .system-card.reverse .system-preview{order:0}
    .final-cta-box{flex-direction:column;align-items:flex-start}
}
@media(max-width:700px){
    .container{width:min(calc(100% - 28px),var(--container))}
    .top-strip-inner{justify-content:flex-start;gap:12px;padding:8px 0}
    .brand-copy strong{font-size:19px}
    .brand-copy small{font-size:8px}
    .hero{padding:72px 0 62px}
    .hero h1{font-size:48px}
    .hero-lead{font-size:18px}
    .hero-actions,.system-actions,.final-actions{flex-direction:column}
    .hero-actions .btn,.system-actions .btn,.final-actions .btn{width:100%}
    .hero-proof{grid-template-columns:1fr}
    .hero-console{min-height:360px}
    .console-window{inset:0;transform:none}
    .console-body{grid-template-columns:82px 1fr;min-height:305px}
    .console-sidebar{padding:16px 8px;font-size:10px;gap:12px}
    .console-main{padding:14px}
    .console-title strong{font-size:16px}
    .console-metrics{grid-template-columns:1fr}
    .console-metrics div:nth-child(n+2){display:none}
    .console-chart{height:145px;padding:12px;gap:8px}
    .floating-card{display:none}
    .section{padding:72px 0}
    .system-preview{min-height:300px;padding:14px}
    .system-content{padding:28px 22px}
    .system-content h3{font-size:29px}
    .services-grid{grid-template-columns:1fr}
    .final-cta-box{padding:32px 24px}
    .footer-inner,.footer-inner div:last-child{flex-direction:column}
}


/* Capturas reales de los sistemas */
.real-preview {
    min-height: 390px;
    padding: 0;
    overflow: hidden;
    background: #050b10;
}

.real-preview a {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    min-height: 390px;
    overflow: hidden;
}

.real-preview img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 390px;
    object-fit: cover;
    object-position: center;
    transition: transform .45s ease, filter .45s ease;
}

.preview-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    opacity: 0;
    background: rgba(2, 8, 12, .72);
    transition: opacity .35s ease;
}

.preview-overlay strong {
    color: var(--green);
    font-size: 24px;
    text-transform: uppercase;
    letter-spacing: .05em;
}

.preview-overlay small {
    color: #fff;
    font-size: 14px;
}

.real-preview a:hover img {
    transform: scale(1.035);
    filter: brightness(.55);
}

.real-preview a:hover .preview-overlay {
    opacity: 1;
}

@media (max-width: 700px) {
    .real-preview,
    .real-preview a,
    .real-preview img {
        min-height: 250px;
    }

    .real-preview img {
        object-fit: cover;
    }

    .preview-overlay {
        opacity: 1;
        justify-content: flex-end;
        padding-bottom: 18px;
        background: linear-gradient(to top, rgba(2,8,12,.88), transparent 60%);
    }

    .preview-overlay strong {
        font-size: 18px;
    }
}