:root {
     --ink: #101827;
     --blue: #315efb;
     --cyan: #60d5d0;
     --muted: #68758a;
     --paper: #f6f8fc;
     --line: rgba(16, 24, 39, .1)
 }

 * {
     box-sizing: border-box
 }

 html {
     scroll-behavior: smooth
 }

 body {
     margin: 0;
     font-family: "DM Sans", sans-serif;
     color: var(--ink);
     background: #fff;
     overflow-x: hidden
 }

 h1,
 h2,
 h3,
 h4,
 .navbar-brand {
     font-family: "Manrope", sans-serif
 }

 .navbar {
     background: rgba(255, 255, 255, .9);
     backdrop-filter: blur(16px);
     border-bottom: 1px solid rgba(16, 24, 39, .06)
 }

 .navbar-brand {
     font-weight: 800;
     letter-spacing: -.055em;
     font-size: 1.4rem;
     color: var(--ink)
 }

 .brand-mark {
     display: inline-grid;
     place-items: center;
     width: 36px;
     height: 36px;
     border-radius: 12px;
     color: #fff;
     background: linear-gradient(135deg, var(--blue), #6e8bff);
     font-weight: 800;
     margin-right: 8px;
     box-shadow: 0 8px 22px rgba(49, 94, 251, .24)
 }

 .nav-link {
     color: #455166;
     font-weight: 600
 }

 .nav-link:hover {
     color: var(--blue)
 }

 .btn-brand {
     color: #fff;
     background: var(--blue);
     border: 1px solid var(--blue);
     border-radius: 12px;
     padding: .8rem 1.15rem;
     font-weight: 700;
     box-shadow: 0 10px 22px rgba(49, 94, 251, .18);
     transition: .2s
 }

 .btn-brand:hover {
     color: #fff;
     background: #244be0;
     transform: translateY(-2px)
 }

 .btn-outline-brand {
     color: var(--ink);
     border: 1px solid rgba(16, 24, 39, .18);
     border-radius: 12px;
     padding: .8rem 1.15rem;
     font-weight: 700;
     background: #fff
 }

 .btn-outline-brand:hover {
     color: var(--blue);
     border-color: var(--blue)
 }

 .hero {
     position: relative;
     isolation: isolate;
     padding: 150px 0 100px;
     background: radial-gradient(ellipse at 80% 12%, rgba(96, 213, 208, .18), transparent 30%), radial-gradient(ellipse at 10% 20%, rgba(49, 94, 251, .13), transparent 32%), linear-gradient(135deg, #f9fbff, #fff 52%, #f2f6ff);
     overflow: hidden
 }

 .hero:after {
     content: "";
     position: absolute;
     z-index: -1;
     width: 480px;
     height: 480px;
     border: 1px solid rgba(49, 94, 251, .12);
     border-radius: 50%;
     right: -150px;
     bottom: -230px;
     box-shadow: 0 0 0 40px rgba(49, 94, 251, .025), 0 0 0 80px rgba(49, 94, 251, .02)
 }

 .eyebrow {
     display: inline-flex;
     align-items: center;
     gap: .55rem;
     border: 1px solid rgba(49, 94, 251, .15);
     background: rgba(49, 94, 251, .06);
     color: var(--blue);
     border-radius: 999px;
     padding: .45rem .75rem;
     font-size: .82rem;
     font-weight: 700
 }

 .eyebrow-dot {
     width: 7px;
     height: 7px;
     border-radius: 50%;
     background: var(--cyan)
 }

 .hero h1 {
     font-size: clamp(2.7rem, 5.2vw, 4.65rem);
     font-weight: 800;
     letter-spacing: -.065em;
     line-height: 1.06;
     margin: 1.3rem 0
 }

 .hero h1 span {
     color: var(--blue)
 }

 .hero-copy {
     color: #59667b;
     font-size: clamp(1.05rem, 1.5vw, 1.2rem);
     line-height: 1.8;
     max-width: 610px
 }

 .hero-note {
     color: #7a8699;
     font-size: .88rem;
     margin-top: 1rem
 }

 .visual-wrap {
     position: relative;
     max-width: 490px;
     margin: 1rem auto
 }

 .visual-glow {
     position: absolute;
     inset: 10% 3%;
     background: rgba(49, 94, 251, .18);
     filter: blur(55px);
     border-radius: 40%
 }

 .app-window {
     position: relative;
     background: rgba(255, 255, 255, .94);
     border: 1px solid rgba(16, 24, 39, .09);
     border-radius: 26px;
     padding: 22px;
     box-shadow: 0 30px 90px rgba(25, 42, 80, .14);
     transform: rotate(1deg)
 }

 .window-top {
     display: flex;
     align-items: center;
     justify-content: space-between;
     padding-bottom: 18px;
     border-bottom: 1px solid var(--line)
 }

 .window-dots {
     display: flex;
     gap: 5px
 }

 .window-dots i {
     width: 7px;
     height: 7px;
     border-radius: 50%;
     background: #d9dfeb
 }

 .window-label {
     font-size: .72rem;
     font-weight: 800;
     letter-spacing: .06em;
     color: #6e7a90
 }

 .profile-row {
     display: flex;
     align-items: center;
     gap: 12px;
     padding: 20px 0
 }

 .avatar {
     display: grid;
     place-items: center;
     width: 47px;
     height: 47px;
     border-radius: 15px;
     background: #e9efff;
     color: var(--blue);
     font-weight: 800
 }

 .profile-row strong {
     display: block
 }

 .profile-row small,
 .mini-card small {
     color: var(--muted)
 }

 .status-pill {
     margin-left: auto;
     white-space: nowrap;
     background: #e6f8f3;
     color: #128064;
     border-radius: 999px;
     padding: .38rem .58rem;
     font-size: .7rem;
     font-weight: 800
 }

 .mini-card {
     background: var(--paper);
     border: 1px solid rgba(16, 24, 39, .06);
     border-radius: 16px;
     padding: 16px;
     margin-top: 10px
 }

 .mini-card strong {
     display: block;
     margin-top: 4px
 }

 .progress-line {
     height: 7px;
     background: #e3e8f3;
     border-radius: 99px;
     margin-top: 14px;
     overflow: hidden
 }

 .progress-line span {
     display: block;
     width: 75%;
     height: 100%;
     background: linear-gradient(90deg, var(--blue), var(--cyan));
     border-radius: inherit
 }

 .section {
     padding: 95px 0
 }

 .section-soft {
     background: var(--paper)
 }

 .section-kicker {
     color: var(--blue);
     text-transform: uppercase;
     font-size: .76rem;
     font-weight: 800;
     letter-spacing: .15em
 }

 .section-title {
     font-size: clamp(2rem, 3.4vw, 3rem);
     letter-spacing: -.055em;
     font-weight: 800;
     margin: .8rem 0 1rem
 }

 .section-lead {
     max-width: 700px;
     color: var(--muted);
     line-height: 1.8;
     font-size: 1.08rem
 }

 .feature-card {
     height: 100%;
     border: 1px solid var(--line);
     border-radius: 22px;
     padding: 28px;
     background: #fff;
     transition: transform .25s, box-shadow .25s
 }

 .feature-card:hover {
     transform: translateY(-5px);
     box-shadow: 0 20px 45px rgba(20, 35, 70, .08)
 }

 .feature-icon {
     display: grid;
     place-items: center;
     width: 52px;
     height: 52px;
     border-radius: 16px;
     background: #edf1ff;
     color: var(--blue);
     font-size: 1.45rem;
     margin-bottom: 22px
 }

 .feature-card h3 {
     font-size: 1.12rem;
     font-weight: 800;
     margin-bottom: 10px
 }

 .feature-card p,
 .step p {
     color: var(--muted);
     line-height: 1.75;
     margin: 0
 }

 .steps {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 20px;
     margin-top: 45px
 }

 .step {
     padding: 26px;
     border-radius: 20px;
     background: #fff;
     border: 1px solid var(--line)
 }

 .step-num {
     color: var(--blue);
     font-weight: 800;
     font-size: .8rem;
     letter-spacing: .1em
 }

 .step h3 {
     font-size: 1.15rem;
     font-weight: 800;
     margin: 14px 0 9px
 }

 .cta-panel {
     background: linear-gradient(125deg, #111b30, #1b2e50);
     border-radius: 28px;
     color: #fff;
     padding: clamp(30px, 6vw, 65px);
     position: relative;
     overflow: hidden
 }

 .cta-panel:after {
     content: "";
     position: absolute;
     width: 300px;
     height: 300px;
     right: -70px;
     top: -100px;
     border-radius: 50%;
     border: 1px solid rgba(255, 255, 255, .13);
     box-shadow: 0 0 0 35px rgba(255, 255, 255, .025), 0 0 0 70px rgba(255, 255, 255, .02)
 }

 .cta-panel h2 {
     font-weight: 800;
     letter-spacing: -.05em;
     font-size: clamp(2rem, 3.5vw, 3.2rem);
     position: relative;
     z-index: 1
 }

 .cta-panel p {
     color: #c4cede;
     max-width: 650px;
     line-height: 1.8;
     position: relative;
     z-index: 1
 }

 .cta-panel .btn {
     position: relative;
     z-index: 1
 }

 .kicker-light {
     color: var(--cyan)
 }

 footer {
     padding: 30px 0;
     border-top: 1px solid var(--line);
     color: #778398;
     font-size: .9rem
 }

 footer a {
     color: var(--ink);
     text-decoration: none;
     font-weight: 700
 }

 .reveal {
     opacity: 0;
     transform: translateY(18px);
     transition: opacity .65s ease, transform .65s ease
 }

 .reveal.visible {
     opacity: 1;
     transform: translateY(0)
 }

 @media(max-width:991.98px) {
     .hero {
         padding-top: 125px
     }

     .steps {
         grid-template-columns: 1fr
     }
 }

 @media(max-width:575.98px) {
     .hero {
         padding: 115px 0 65px
     }

     .section {
         padding: 70px 0
     }

     .app-window {
         padding: 17px
     }

     .status-pill {
         font-size: .62rem
     }
 }

 @media(prefers-reduced-motion:reduce) {

     *,
     *:before,
     *:after {
         scroll-behavior: auto !important;
         transition-duration: .01ms !important;
         animation-duration: .01ms !important
     }

     .reveal {
         opacity: 1;
         transform: none
     }
 }

 
/* Logo oficial Mandata en navbar */

.mandata-brand {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    text-decoration: none;
    line-height: 1;
}

.mandata-logo {
    display: block;
    width: 190px;
    height: auto;
    max-height: 58px;
    object-fit: contain;
    object-position: left center;
}

/* Ajustes para tablet y celular */
@media (max-width: 991.98px) {
    .mandata-logo {
        width: 155px;
        max-height: 48px;
    }
}

@media (max-width: 400px) {
    .mandata-logo {
        width: 140px;
    }
}


/* ===== FOOTER MANDATA ===== */

.site-footer {
    background: #0E1A2B;
    padding: 24px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.footer-content {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.footer-brand {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    text-decoration: none;
}

.footer-logo {
    display: block;
    width: 180px;
    height: 58px;
    object-fit: contain;
    object-position: left center;
}

/* Copyright */
.footer-copyright {
    color: #BFC7D5;
    font-size: 0.82rem;
    line-height: 1.6;
    text-align: center;
}

/* Estado del proyecto */
.footer-status {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #BFC7D5;
    font-size: 0.82rem;
    white-space: nowrap;
}

.status-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #D8B47C;
    flex-shrink: 0;
}

/* Responsive */
@media (max-width: 767.98px) {
    .site-footer {
        padding: 28px 0;
    }

    .footer-content {
        flex-direction: column;
        justify-content: center;
        gap: 18px;
        text-align: center;
    }

    .footer-logo {
        width: 165px;
        height: 55px;
        object-position: center;
    }

    .footer-copyright {
        max-width: 300px;
        font-size: 0.78rem;
    }

    .footer-status {
        font-size: 0.78rem;
    }
}