/* CAP Software - pagina individual CAP Gestion. Estilos aislados bajo cg- */
.cg-hero {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    background: linear-gradient(121deg,#07192f 0%,#0c2b4c 54%,#123d69 100%);
    color: #fff
}

.cg-hero-light {
    position: absolute;
    z-index: -1;
    pointer-events: none;
    border-radius: 50%;
    filter: blur(2px)
}

.cg-hero-light-1 {
    width: 500px;
    height: 500px;
    background: radial-gradient(circle,rgba(52,191,229,.15),transparent 69%);
    right: -160px;
    top: -190px
}

.cg-hero-light-2 {
    width: 460px;
    height: 460px;
    background: radial-gradient(circle,rgba(55,207,183,.09),transparent 70%);
    left: 15%;
    bottom: -360px
}

.cg-container {
    position: relative
}

.cg-breadcrumb {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding-top: 27px;
    color: #abc4de;
    font-size: 12px
}

    .cg-breadcrumb a:hover {
        color: #7be0dc
    }

    .cg-breadcrumb [aria-current=page] {
        color: #fff;
        font-weight: 650
    }

    .cg-breadcrumb > span[aria-hidden=true] {
        color: #6287ad
    }

.cg-hero-grid {
    display: grid;
    grid-template-columns: 1fr 1.05fr;
    gap: 66px;
    align-items: center;
    min-height: 580px;
    padding: 63px 0 100px
}

.cg-hero-copy {
    position: relative;
    z-index: 2
}

.cg-kicker {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #7be1db;
    font-size: 11px;
    font-weight: 750;
    letter-spacing: .16em
}

.cg-kicker-dot {
    display: block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #4adcd6;
    box-shadow: 0 0 0 5px rgba(74,220,214,.13)
}

.cg-hero h1 {
    font-size: clamp(58px,6vw,92px);
    line-height: 1.06;
    letter-spacing: -.07em;
    margin: 27px 0 18px;
    font-weight: 800;
    white-space: nowrap
}

    .cg-hero h1 span {
        background: linear-gradient(110deg,#a1f0e4,#57cad6 53%,#63a6f7);
        color: #82dfdb;
        background-clip: text;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent
    }

.cg-hero-subtitle {
    font-size: clamp(23px,2.45vw,34px);
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -.04em;
    max-width: 530px;
    margin: 0 0 18px
}

.cg-hero-description {
    font-size: 16px;
    line-height: 1.9;
    color: #c8d6e7;
    max-width: 540px;
    margin: 0 0 24px
}

.cg-hero-points {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 30px;
    color: #c6d9ea;
    font-size: 13px
}

    .cg-hero-points span {
        display: flex;
        align-items: center;
        gap: 10px
    }

    .cg-hero-points .icon {
        width: 17px;
        height: 17px;
        color: #62ded1
    }

.cg-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap
}

.cg-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 15px 20px;
    min-height: 51px;
    font-size: 13px;
    font-weight: 780;
    border-radius: 11px;
    transition: transform .2s ease,box-shadow .2s ease,background .2s ease;
    text-decoration: none
}

    .cg-btn:hover {
        transform: translateY(-2px)
    }

    .cg-btn .icon {
        width: 17px;
        height: 17px
    }

.cg-btn-primary {
    background: linear-gradient(110deg,#79e9e0,#30c5be);
    color: #072b40;
    box-shadow: 0 12px 35px rgba(30,205,194,.15)
}

    .cg-btn-primary:hover {
        box-shadow: 0 15px 37px rgba(30,205,194,.3)
    }

.cg-btn-outline {
    border: 1px solid rgba(226,244,255,.23);
    background: rgba(255,255,255,.035);
    color: #fff
}

    .cg-btn-outline:hover {
        background: rgba(255,255,255,.11)
    }

.cg-hero-illustration {
    position: relative;
    min-width: 0;
    min-height: 410px;
    display: flex;
    align-items: center;
    justify-content: center
}

.cg-orbit {
    position: absolute;
    border: 1px solid rgba(84,174,238,.22);
    background: rgba(68,165,217,.03);
    transform: rotate(-9deg);
    border-radius: 22px;
    pointer-events: none
}

.cg-orbit-one {
    width: 85%;
    height: 80%;
    left: 9%;
    top: 8%
}

.cg-orbit-two {
    width: 95%;
    height: 87%;
    left: 5%;
    top: 8%;
    transform: rotate(7deg)
}

.cg-ui-shell {
    position: relative;
    z-index: 2;
    width: 92%;
    overflow: hidden;
    border-radius: 16px;
    background: #f6f9ff;
    color: #17385b;
    box-shadow: 0 30px 70px rgba(0,9,29,.32);
    transform: rotate(1deg)
}

.cg-ui-topbar {
    height: 37px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
    background: #e6eef7;
    color: #6685a4;
    font-weight: 800;
    font-size: 9px;
    letter-spacing: .13em
}

.cg-ui-dots {
    display: inline-flex;
    gap: 5px
}

    .cg-ui-dots i {
        display: block;
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: #ffbe9f
    }

        .cg-ui-dots i:nth-child(2) {
            background: #d8d2a9
        }

        .cg-ui-dots i:nth-child(3) {
            background: #b5ccdf
        }

.cg-ui-topright {
    font-size: 11px;
    color: #4d82b1
}

.cg-ui-main {
    display: grid;
    grid-template-columns: 57px minmax(0,1fr);
    min-height: 295px
}

.cg-ui-sidebar {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 17px;
    padding: 18px 0;
    background: #0c2d57;
    color: #99b1ce
}

    .cg-ui-sidebar strong {
        font-size: 13px;
        color: #fff;
        letter-spacing: -.06em;
        margin-bottom: 8px
    }

    .cg-ui-sidebar b {
        font-size: 21px;
        font-weight: 450;
        opacity: .65
    }

        .cg-ui-sidebar b:first-of-type {
            color: #72dddb;
            opacity: 1
        }

.cg-ui-content {
    padding: 27px 23px
}

.cg-ui-label {
    display: block;
    margin-bottom: 9px;
    font-size: 9px;
    letter-spacing: .15em;
    font-weight: 850;
    color: #4282c8
}

.cg-ui-content > strong {
    font-size: 21px;
    display: block;
    font-weight: 820;
    letter-spacing: -.05em
}

.cg-ui-content > small {
    display: block;
    margin-top: 4px;
    color: #94a6bb;
    font-size: 10px
}

.cg-ui-tiles {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 9px;
    margin-top: 26px
}

    .cg-ui-tiles > div {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 7px;
        min-height: 112px;
        background: #fff;
        border: 1px solid #e2ebf6;
        border-radius: 9px;
        padding: 12px 9px;
        box-shadow: 0 3px 0 #dce8f8
    }

        .cg-ui-tiles > div:nth-child(2) {
            box-shadow: 0 3px 0 #ccefe9
        }

        .cg-ui-tiles > div:nth-child(3) {
            box-shadow: 0 3px 0 #e8dfff
        }

.cg-ui-ico {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 7px;
    font-size: 15px
}

.cg-ui-ico-blue {
    background: #e5eeff;
    color: #4684e9
}

.cg-ui-ico-green {
    background: #dcf8ef;
    color: #18ae97
}

.cg-ui-ico-purple {
    background: #ede6ff;
    color: #9363e6
}

.cg-ui-tiles strong {
    font-size: 11px;
    letter-spacing: -.03em
}

.cg-ui-tiles small {
    font-size: 9px;
    color: #9aabc1;
    line-height: 1.4
}

.cg-ui-bars {
    display: flex;
    gap: 6px;
    margin-top: 18px
}

    .cg-ui-bars i {
        height: 6px;
        border-radius: 5px;
        background: #e3eaf5;
        flex: 1
    }

        .cg-ui-bars i:first-child {
            flex: 1.8;
            background: #7cb6f5
        }

        .cg-ui-bars i:nth-child(2) {
            background: #8fe0d2
        }

.cg-float {
    position: absolute;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 9px;
    color: #274967;
    background: #fff;
    border: 1px solid #e4edf6;
    border-radius: 11px;
    box-shadow: 0 15px 30px rgba(3,27,53,.16);
    padding: 12px 14px;
    font-size: 11px;
    font-weight: 760
}

.cg-float-one {
    right: -12px;
    top: 3%
}

.cg-float-two {
    left: -8px;
    bottom: 6%
}

.cg-float-icon {
    display: grid;
    place-items: center;
    background: #dff5ee;
    color: #158b7d;
    font-size: 15px;
    width: 28px;
    height: 28px;
    border-radius: 8px
}

.cg-float-icon-cyan {
    background: #e4f1ff;
    color: #417dd2
}

.cg-art-caption {
    position: absolute;
    bottom: -37px;
    left: 0;
    right: 0;
    text-align: center;
    font-size: 11px;
    color: #a9c2db;
    letter-spacing: .01em
}

.cg-trust-strip {
    background: #f2f7fc;
    border-bottom: 1px solid #e5edf5
}

.cg-trust-items {
    display: flex;
    justify-content: center;
    gap: clamp(16px,3.2vw,52px);
    align-items: center;
    flex-wrap: wrap;
    padding: 23px 0;
    color: #496581;
    font-size: 12px;
    font-weight: 640
}

    .cg-trust-items span {
        display: flex;
        align-items: center;
        gap: 8px
    }

    .cg-trust-items .icon {
        color: #2bbfb9;
        height: 15px;
        width: 15px
    }

.cg-section {
    padding: 103px 0
}

.cg-eyebrow {
    color: #2464c2;
    font-size: 11px;
    font-weight: 850;
    letter-spacing: .17em;
    line-height: 1.4;
    margin-bottom: 17px
}

.cg-section-title {
    color: #10294b;
    font-size: clamp(35px,3.4vw,49px);
    line-height: 1.16;
    letter-spacing: -.055em;
    margin: 0;
    font-weight: 800
}

    .cg-section-title em {
        font-style: normal;
        color: #2668d9
    }

.cg-overview-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 70px;
    align-items: center
}

.cg-overview-copy p {
    font-size: 15px;
    line-height: 1.95;
    color: #657790;
    margin: 0 0 17px
}

    .cg-overview-copy p:last-child {
        margin: 0
    }

.cg-features-section {
    background: #f4f8fd
}

.cg-section-head {
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 45px;
    margin-bottom: 36px
}

    .cg-section-head > p {
        color: #667993;
        line-height: 1.8;
        max-width: 380px;
        margin: 0;
        font-size: 14px
    }

.cg-feature-grid {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 18px
}

.cg-feature-card {
    border: 1px solid #e2eaf4;
    border-radius: 17px;
    background: #fff;
    padding: 31px;
    min-height: 246px;
    box-shadow: 0 7px 22px rgba(15,44,85,.025);
    transition: transform .2s ease,box-shadow .2s ease
}

    .cg-feature-card:hover {
        transform: translateY(-3px);
        box-shadow: 0 17px 37px rgba(15,44,85,.08)
    }

.cg-feature-icon {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: 12px;
    margin-bottom: 20px
}

    .cg-feature-icon .icon {
        width: 23px;
        height: 23px
    }

.cg-icon-blue {
    background: #e6efff;
    color: #3674e5
}

.cg-icon-teal {
    background: #dff7f2;
    color: #18a894
}

.cg-icon-violet {
    background: #eee9ff;
    color: #805ada
}

.cg-feature-number {
    font-size: 10px;
    color: #6c8cb2;
    font-weight: 850;
    letter-spacing: .13em
}

.cg-feature-card h3 {
    font-size: 21px;
    letter-spacing: -.035em;
    margin: 8px 0 10px;
    color: #122b50
}

.cg-feature-card p {
    font-size: 13px;
    line-height: 1.82;
    margin: 0;
    color: #6a7a91
}

.cg-availability-note {
    font-size: 12px;
    color: #6e8095;
    margin: 23px 0 0
}

.cg-showcase-grid {
    display: grid;
    grid-template-columns: .83fr 1.17fr;
    align-items: center;
    gap: 75px
}

.cg-showcase-info p {
    font-size: 15px;
    line-height: 1.9;
    color: #647791;
    margin: 21px 0 0
}

    .cg-showcase-info p + p {
        margin-top: 12px
    }

.cg-inline-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 27px;
    font-size: 14px;
    color: #225ab5;
    font-weight: 800
}

    .cg-inline-link:hover {
        color: #0d3572
    }

    .cg-inline-link .icon {
        width: 18px;
        height: 18px
    }

.cg-screenshot-placeholder {
    background: linear-gradient(135deg,#e4eefb,#f5f9ff);
    padding: 29px;
    border: 1px solid #dbe8f6;
    border-radius: 24px
}

.cg-placeholder-window {
    box-shadow: 0 28px 45px rgba(28,63,109,.12);
    overflow: hidden;
    border: 1px solid #e0eaf5;
    border-radius: 13px;
    background: #fff
}

.cg-placeholder-top {
    height: 39px;
    background: #e9f0f9;
    display: flex;
    align-items: center;
    gap: 15px;
    color: #6d8aa8;
    letter-spacing: .13em;
    font-weight: 800;
    font-size: 10px;
    padding: 0 14px
}

.cg-placeholder-main {
    min-height: 265px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    text-align: center;
    padding: 25px;
    color: #5f7795
}

.cg-placeholder-symbol {
    display: grid;
    place-items: center;
    border-radius: 15px;
    width: 64px;
    height: 64px;
    background: #eaf2ff;
    color: #2a73d2
}

    .cg-placeholder-symbol .icon {
        width: 30px;
        height: 30px
    }

.cg-placeholder-main strong {
    font-size: 19px;
    color: #203c60
}

.cg-placeholder-main > span {
    font-size: 13px
}

.cg-placeholder-tag {
    border-radius: 100px;
    padding: 7px 11px;
    background: #eef3fa;
    color: #778ba4;
    margin-top: 7px;
    font-size: 11px !important
}

.cg-approach {
    background: #f4f8fd
}

.cg-section-head-center {
    justify-content: center;
    text-align: center
}

    .cg-section-head-center .cg-section-title {
        max-width: 660px
    }

.cg-steps {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 20px
}

    .cg-steps article {
        position: relative;
        background: #fff;
        border: 1px solid #e4edf5;
        border-radius: 17px;
        padding: 29px 31px;
        min-height: 194px
    }

        .cg-steps article > span {
            font-size: 30px;
            font-weight: 850;
            letter-spacing: -.06em;
            color: #9cc9ef
        }

    .cg-steps h3 {
        font-size: 19px;
        color: #142e52;
        letter-spacing: -.035em;
        margin: 15px 0 9px
    }

    .cg-steps p {
        font-size: 13px;
        color: #6b8099;
        line-height: 1.8;
        margin: 0
    }

.cg-final {
    background: linear-gradient(110deg,#0b2140,#103e65);
    color: #fff;
    padding: 77px 0
}

.cg-final-grid {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 40px;
    align-items: center
}

.cg-final .cg-eyebrow {
    color: #70ded9
}

.cg-final h2 {
    font-size: clamp(29px,3.1vw,43px);
    letter-spacing: -.05em;
    margin: 0 0 13px
}

.cg-final p {
    color: #c2d2e3;
    margin: 0;
    line-height: 1.8;
    font-size: 14px
}

.cg-final-actions {
    display: flex;
    align-items: center;
    gap: 17px;
    flex-direction: column
}

.cg-back-link {
    font-size: 12px;
    color: #bad1e7;
    font-weight: 650
}

    .cg-back-link:hover {
        color: #fff
    }

@media(max-width:1100px) {
    .cg-hero-grid {
        gap: 35px;
        grid-template-columns: 1fr 1fr
    }

    .cg-hero h1 {
        font-size: clamp(50px,5.5vw,68px)
    }

    .cg-float-one {
        right: -6px
    }

    .cg-float-two {
        left: -7px
    }

    .cg-ui-content {
        padding: 24px 15px
    }

    .cg-feature-card {
        padding: 26px
    }

    .cg-showcase-grid {
        gap: 40px
    }
}

@media(max-width:850px) {
    .cg-hero-grid {
        grid-template-columns: 1fr;
        gap: 38px;
        min-height: 0;
        padding: 66px 0 103px
    }

    .cg-hero-copy {
        max-width: 750px
    }

    .cg-hero h1 {
        font-size: clamp(56px,9vw,78px)
    }

    .cg-hero-illustration {
        max-width: 610px;
        margin: 0 auto;
        min-height: 415px;
        width: 100%
    }

    .cg-overview-grid {
        grid-template-columns: 1fr;
        gap: 26px
    }

    .cg-section-head {
        align-items: start;
        flex-direction: column;
        gap: 16px
    }

        .cg-section-head > p {
            max-width: 720px
        }

    .cg-feature-grid {
        grid-template-columns: repeat(2,minmax(0,1fr))
    }

    .cg-showcase-grid {
        grid-template-columns: 1fr;
        gap: 34px
    }

    .cg-final-grid {
        grid-template-columns: 1fr
    }

    .cg-final-actions {
        align-items: flex-start;
        flex-direction: row;
        flex-wrap: wrap
    }
}

@media(max-width:680px) {
    .cg-section {
        padding: 76px 0
    }

    .cg-breadcrumb {
        padding-top: 19px
    }

    .cg-hero-grid {
        padding-top: 47px
    }

    .cg-hero h1 {
        font-size: clamp(46px,10.5vw,65px)
    }

    .cg-hero-subtitle {
        font-size: 26px
    }

    .cg-hero-description {
        font-size: 15px
    }

    .cg-trust-items {
        justify-content: flex-start;
        padding: 20px 0;
        gap: 13px 23px
    }

    .cg-hero-illustration {
        min-height: 325px
    }

    .cg-ui-shell {
        width: 97%
    }

    .cg-ui-content {
        padding: 20px 12px
    }

    .cg-ui-main {
        grid-template-columns: 42px minmax(0,1fr);
        min-height: 253px
    }

    .cg-ui-sidebar {
        gap: 12px
    }

        .cg-ui-sidebar b {
            font-size: 16px
        }

    .cg-ui-content > strong {
        font-size: 18px
    }

    .cg-ui-tiles {
        gap: 5px;
        margin-top: 17px
    }

        .cg-ui-tiles > div {
            min-height: 98px;
            padding: 9px 5px
        }

        .cg-ui-tiles strong {
            font-size: 10px
        }

        .cg-ui-tiles small {
            font-size: 8px
        }

    .cg-float {
        font-size: 9px;
        padding: 8px
    }

    .cg-float-icon {
        height: 22px;
        width: 22px;
        font-size: 12px
    }

    .cg-float-one {
        top: 0
    }

    .cg-float-two {
        bottom: 0
    }

    .cg-art-caption {
        bottom: -25px
    }

    .cg-feature-grid {
        grid-template-columns: 1fr
    }

    .cg-feature-card {
        min-height: 0
    }

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

        .cg-steps article {
            min-height: 0
        }

    .cg-final {
        padding: 65px 0
    }

    .cg-final-actions {
        flex-direction: column;
        align-items: flex-start
    }
}

@media(max-width:440px) {
    .cg-kicker {
        font-size: 9px;
        letter-spacing: .1em
    }

    .cg-hero h1 {
        font-size: 47px
    }

    .cg-actions {
        flex-direction: column;
        align-items: stretch
    }

        .cg-actions .cg-btn {
            width: 100%
        }

    .cg-hero-illustration {
        min-height: 260px
    }

    .cg-ui-content > strong {
        font-size: 15px
    }

    .cg-ui-tiles strong {
        font-size: 8px
    }

    .cg-ui-tiles small {
        font-size: 7px
    }

    .cg-ui-topbar {
        height: 28px;
        font-size: 7px
    }

    .cg-ui-content {
        padding: 12px 7px
    }

        .cg-ui-content > small {
            font-size: 8px
        }

    .cg-ui-main {
        min-height: 215px
    }

    .cg-ui-sidebar {
        gap: 9px;
        padding-top: 11px
    }

        .cg-ui-sidebar strong {
            font-size: 10px
        }

    .cg-ui-tiles > div {
        min-height: 85px
    }

    .cg-ui-ico {
        width: 24px;
        height: 24px
    }

    .cg-float {
        font-size: 8px
    }

    .cg-float-one {
        right: -2px
    }

    .cg-float-two {
        left: -3px
    }

    .cg-screenshot-placeholder {
        padding: 13px
    }

    .cg-placeholder-main {
        min-height: 210px
    }

        .cg-placeholder-main strong {
            font-size: 17px
        }
}

@media(prefers-reduced-motion:reduce) {
    .cg-btn, .cg-feature-card {
        transition: none
    }
}