/* ==========================================================
   HERO 08 · SISTEMAS WEB & BASES DE DATOS
   ========================================================== */
:root{
    --td-orange:#f28a1a;
    --td-orange-soft:#ff9d2e;
    --td-green:#2f9b57;
    --td-green-soft:#55c47f;
}
.sys-hero{
    position:relative;
    overflow:hidden;
    min-height:760px;
    display:flex;
    align-items:center;
    background:
        linear-gradient(135deg, #10110f 0%, #171713 48%, #0d0e0c 100%);
    color:#fff;
}

.sys-hero__bg{
    position:absolute;
    inset:0;
    pointer-events:none;
    overflow:hidden;
}

.sys-hero__grid{
    position:absolute;
    inset:0;
    opacity:.13;
    background-image:
        linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px);
    background-size:52px 52px;
    mask-image:linear-gradient(to bottom, rgba(0,0,0,.9), transparent);
    animation:gridMove 24s linear infinite;
}

.sys-hero__orb{
    position:absolute;
    display:block;
    border-radius:50%;
    filter:blur(10px);
}

.sys-hero__orb--1{
    width:520px;
    height:520px;
    top:-180px;
    right:9%;
    background:radial-gradient(
        circle,
        rgba(210,156,53,.18) 0%,
        rgba(210,156,53,.05) 46%,
        transparent 72%
    );
    animation:orbFloatOne 10s ease-in-out infinite;
}

.sys-hero__orb--2{
    width:420px;
    height:420px;
    bottom:-180px;
    left:12%;
    background:radial-gradient(
        circle,
        rgba(37,140,84,.16) 0%,
        rgba(37,140,84,.04) 50%,
        transparent 72%
    );
    animation:orbFloatTwo 12s ease-in-out infinite;
}

.sys-hero__inner{
    position:relative;
    z-index:2;
    width:min(1240px, calc(100% - 48px));
    margin:0 auto;
    display:grid;
    grid-template-columns:minmax(0, .92fr) minmax(500px, 1.08fr);
    align-items:center;
    gap:76px;
    padding:110px 0 95px;
}

.sys-hero__content{
    max-width:620px;
    animation:heroContentIn .9s ease both;
}

.sys-hero__eyebrow{
    display:inline-flex;
    align-items:center;
    gap:10px;
    margin-bottom:24px;
    font-size:13px;
    font-weight:700;
    letter-spacing:.14em;
    text-transform:uppercase;
     color:var(--td-orange);
}

.sys-hero__eyebrow::before{
    content:"";
    width:30px;
    height:1px;
    background:#d8aa51;
}

.sys-hero__title{
    margin:0;
    max-width:660px;
    font-size:clamp(50px, 5.4vw, 78px);
    line-height:.97;
    font-weight:700;
    letter-spacing:-.045em;
}

.sys-hero__title span{
    display:block;
    color:var(--td-orange);
}

.sys-hero__lead{
    margin:30px 0 0;
    max-width:590px;
    font-size:20px;
    line-height:1.55;
    color:rgba(255,255,255,.88);
}

.sys-hero__lead strong{
    color:#fff;
    font-weight:650;
}

.sys-hero__text{
    margin:15px 0 0;
    max-width:570px;
    font-size:16px;
    line-height:1.75;
    color:rgba(255,255,255,.62);
}

.sys-hero__statement{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-top:29px;
}

.sys-hero__statement span{
    position:relative;
    font-size:14px;
    font-weight:600;
    color:rgba(255,255,255,.82);
}

.sys-hero__statement span:not(:last-child)::after{
    content:"/";
    margin-left:10px;
    color:#d8aa51;
    opacity:.75;
}

.sys-hero__actions{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:14px;
    margin-top:34px;
}

.sys-hero__btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:15px;
    min-height:54px;
    padding:0 24px;
    border-radius:8px;
    text-decoration:none;
    font-size:14px;
    font-weight:650;
    transition:
        transform .25s ease,
        background .25s ease,
        border-color .25s ease,
        box-shadow .25s ease;
}

.sys-hero__btn--primary{
    color:#141510;
    background:var(--td-orange);
    box-shadow:0 16px 36px rgba(216,170,81,.16);
}

.sys-hero__btn--primary:hover{
    transform:translateY(-3px);
    background:#e1b65f;
    box-shadow:0 20px 42px rgba(216,170,81,.25);
}

.sys-hero__btn--primary span{
    transition:transform .25s ease;
}

.sys-hero__btn--primary:hover span{
    transform:translateX(4px);
}

.sys-hero__btn--ghost{
    color:rgba(255,255,255,.78);
    border:1px solid rgba(255,255,255,.13);
    background:rgba(255,255,255,.025);
}

.sys-hero__btn--ghost:hover{
    transform:translateY(-3px);
    border-color:rgba(255,255,255,.25);
    background:rgba(255,255,255,.055);
}

.sys-hero__tech{
    display:flex;
    flex-wrap:wrap;
    gap:9px;
    margin-top:29px;
}

.sys-hero__tech span{
    padding:8px 12px;
    border:1px solid rgba(255,255,255,.09);
    border-radius:99px;
    font-size:11px;
    font-weight:700;
    letter-spacing:.05em;
    color:rgba(255,255,255,.55);
    background:rgba(255,255,255,.025);
    backdrop-filter:blur(8px);
    animation:techBadgeIn .6s ease both;
}

.sys-hero__tech span:nth-child(1){animation-delay:.35s}
.sys-hero__tech span:nth-child(2){animation-delay:.45s}
.sys-hero__tech span:nth-child(3){animation-delay:.55s}
.sys-hero__tech span:nth-child(4){animation-delay:.65s}


/* ===============================
   VISUAL DEL SISTEMA
   =============================== */

.sys-hero__visual{
    position:relative;
    min-height:570px;
    display:flex;
    align-items:center;
    justify-content:center;
    perspective:1200px;
}

.sys-dashboard{
    position:relative;
    z-index:3;
    width:min(100%, 610px);
    overflow:hidden;
    border:1px solid rgba(255,255,255,.11);
    border-radius:18px;
    background:
        linear-gradient(145deg, rgba(35,36,32,.97), rgba(19,20,18,.98));
    box-shadow:
        0 45px 90px rgba(0,0,0,.4),
        0 0 0 1px rgba(255,255,255,.02) inset;
    transform:rotateY(-4deg) rotateX(1deg);
    animation:dashboardFloat 7s ease-in-out infinite;
}

.sys-dashboard::before{
    content:"";
    position:absolute;
    inset:-60% auto auto -20%;
    width:120px;
    height:200%;
    background:linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.04),
        transparent
    );
    transform:rotate(18deg);
    animation:dashboardShine 8s ease-in-out infinite;
    pointer-events:none;
}

.sys-dashboard__topbar{
    height:58px;
    padding:0 21px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    border-bottom:1px solid rgba(255,255,255,.07);
}

.sys-dashboard__topbar > div:first-child{
    display:flex;
    align-items:center;
    gap:9px;
    font-size:13px;
    letter-spacing:.01em;
}

.sys-dashboard__brand-dot{
    width:9px;
    height:9px;
    border-radius:50%;
    background:var(--td-orange);
    box-shadow:0 0 18px rgba(242,138,26,.65);
}

.sys-dashboard__window{
    display:flex;
    gap:6px;
}

.sys-dashboard__window span{
    width:7px;
    height:7px;
    border-radius:50%;
    background:rgba(255,255,255,.18);
}

.sys-dashboard__body{
    display:grid;
    grid-template-columns:120px minmax(0,1fr);
}

.sys-dashboard__sidebar{
    padding:21px 13px;
    border-right:1px solid rgba(255,255,255,.06);
    display:flex;
    flex-direction:column;
    gap:7px;
}

.sys-dashboard__sidebar span{
    display:block;
    padding:10px 12px;
    border-radius:7px;
    font-size:11px;
    color:rgba(255,255,255,.38);
}

.sys-dashboard__sidebar .active{
    color:#fff;
    background:rgba(216,170,81,.10);
}

.sys-dashboard__main{
    padding:23px;
}

.sys-dashboard__heading{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:16px;
}

.sys-dashboard__heading > div{
    display:flex;
    flex-direction:column;
    gap:4px;
}

.sys-dashboard__heading small{
    font-size:9px;
    text-transform:uppercase;
    letter-spacing:.1em;
    color:rgba(255,255,255,.34);
}

.sys-dashboard__heading strong{
    font-size:15px;
    font-weight:650;
}

.sys-dashboard__status{
    display:inline-flex;
    align-items:center;
    gap:7px;
    padding:7px 9px;
    border-radius:99px;
    font-size:9px;
    color:var(--td-green-soft);
    background:rgba(47,155,87,.12);
}

.sys-dashboard__status i{
    width:6px;
    height:6px;
    border-radius:50%;
    background:var(--td-green);
    box-shadow:0 0 10px rgba(85,196,127,.8);
    animation:statusPulse 1.8s ease-in-out infinite;
}

.sys-dashboard__stats{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:10px;
    margin-top:22px;
}

.sys-stat{
    padding:15px;
    border:1px solid rgba(255,255,255,.06);
    border-radius:11px;
    background:rgba(255,255,255,.025);
    transition:transform .3s ease, background .3s ease;
}

.sys-stat:hover{
    transform:translateY(-4px);
    background:rgba(255,255,255,.045);
}

.sys-stat small,
.sys-stat strong,
.sys-stat span{
    display:block;
}

.sys-stat small{
    font-size:9px;
    color:rgba(255,255,255,.35);
}

.sys-stat strong{
    margin-top:7px;
    font-size:21px;
    font-weight:650;
}

.sys-stat span{
    margin-top:5px;
    font-size:9px;
    color:#75c997;
}

.sys-dashboard__chart-card{
    margin-top:12px;
    padding:15px 16px 17px;
    border:1px solid rgba(255,255,255,.06);
    border-radius:11px;
    background:rgba(255,255,255,.02);
}

.sys-chart__head{
    display:flex;
    justify-content:space-between;
    align-items:center;
}

.sys-chart__head strong{
    font-size:11px;
}

.sys-chart__head span{
    font-size:8px;
    color:rgba(255,255,255,.3);
}

.sys-chart{
    height:105px;
    display:flex;
    align-items:flex-end;
    gap:9px;
    margin-top:15px;
    padding-top:10px;
}

.sys-chart span{
    flex:1;
    height:var(--h);
    min-width:0;
    border-radius:4px 4px 1px 1px;
     background:linear-gradient(
        to top,
        rgba(242,138,26,.30),
        var(--td-orange)
    );
    transform-origin:bottom;
    animation:barGrow 1.2s cubic-bezier(.2,.8,.2,1) both;
}

.sys-chart span:nth-child(1){animation-delay:.25s}
.sys-chart span:nth-child(2){animation-delay:.32s}
.sys-chart span:nth-child(3){animation-delay:.39s}
.sys-chart span:nth-child(4){animation-delay:.46s}
.sys-chart span:nth-child(5){animation-delay:.53s}
.sys-chart span:nth-child(6){animation-delay:.60s}
.sys-chart span:nth-child(7){animation-delay:.67s}

.sys-dashboard__activity{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-top:12px;
    padding:12px 14px;
    border-radius:10px;
    background:rgba(255,255,255,.025);
}

.sys-dashboard__activity > div{
    display:flex;
    align-items:center;
    gap:10px;
}

.sys-dashboard__avatar{
    width:31px;
    height:31px;
    display:grid;
    place-items:center;
    border-radius:8px;
    font-size:9px;
    font-weight:700;
    color:#161711;
    background:#d8aa51;
}

.sys-dashboard__activity p{
    margin:0;
}

.sys-dashboard__activity strong,
.sys-dashboard__activity small{
    display:block;
}

.sys-dashboard__activity strong{
    font-size:10px;
}

.sys-dashboard__activity small{
    margin-top:3px;
    font-size:8px;
    color:rgba(255,255,255,.32);
}

.sys-dashboard__check{
    width:26px;
    height:26px;
    display:grid;
    place-items:center;
    border-radius:50%;
    font-size:10px;
    color:#76cf99;
    background:rgba(65,164,102,.10);
}


/* ===============================
   TARJETAS FLOTANTES
   =============================== */

.sys-float-card{
    position:absolute;
    z-index:5;
    display:flex;
    align-items:center;
    gap:11px;
    padding:12px 14px;
    border:1px solid rgba(255,255,255,.10);
    border-radius:12px;
    background:rgba(22,23,20,.88);
    backdrop-filter:blur(16px);
    box-shadow:0 18px 45px rgba(0,0,0,.28);
}

.sys-float-card small,
.sys-float-card strong{
    display:block;
}

.sys-float-card small{
    font-size:8px;
    text-transform:uppercase;
    letter-spacing:.08em;
    color:rgba(255,255,255,.34);
}

.sys-float-card strong{
    margin-top:3px;
    font-size:11px;
}

.sys-float-card--database{
    left:-12px;
    bottom:85px;
    animation:floatCardOne 5.6s ease-in-out infinite;
}

.sys-float-card--security{
    right:-8px;
    top:87px;
    animation:floatCardTwo 6.3s ease-in-out infinite;
}

.sys-float-card__icon,
.sys-float-card__shield{
    width:34px;
    height:34px;
    display:grid;
    place-items:center;
    border-radius:9px;
    font-size:9px;
    font-weight:700;
}

.sys-float-card__icon{
    color:#151610;
    background:#d8aa51;
}

.sys-float-card__shield{
    color:var(--td-green-soft);
    background:rgba(47,155,87,.13);
}

.sys-float-card--database i{
    width:7px;
    height:7px;
    margin-left:5px;
    border-radius:50%;
    background:#58c980;
    box-shadow:0 0 11px rgba(88,201,128,.75);
    animation:statusPulse 1.8s ease-in-out infinite;
}


/* ===============================
   LINEAS DE DATOS
   =============================== */

.sys-data-line{
    position:absolute;
    z-index:1;
    height:1px;
    overflow:hidden;
    background:linear-gradient(
        90deg,
        transparent,
        rgba(216,170,81,.20),
        transparent
    );
}

.sys-data-line span{
    display:block;
    width:48px;
    height:1px;
    background:linear-gradient(
        90deg,
        transparent,
        rgba(216,170,81,.95),
        transparent
    );
    animation:dataTravel 3s linear infinite;
}

.sys-data-line--1{
    width:190px;
    top:150px;
    left:0;
    transform:rotate(-18deg);
}

.sys-data-line--2{
    width:210px;
    bottom:122px;
    right:0;
    transform:rotate(18deg);
}

.sys-data-line--2 span{
    animation-delay:1.1s;
}


/* ===============================
   ANIMACIONES
   =============================== */

@keyframes heroContentIn{
    from{
        opacity:0;
        transform:translateY(24px);
    }
    to{
        opacity:1;
        transform:none;
    }
}

@keyframes techBadgeIn{
    from{
        opacity:0;
        transform:translateY(8px);
    }
    to{
        opacity:1;
        transform:none;
    }
}

@keyframes dashboardFloat{
    0%,100%{
        transform:rotateY(-4deg) rotateX(1deg) translateY(0);
    }
    50%{
        transform:rotateY(-4deg) rotateX(1deg) translateY(-11px);
    }
}

@keyframes dashboardShine{
    0%,65%{
        left:-35%;
        opacity:0;
    }
    75%{
        opacity:1;
    }
    100%{
        left:130%;
        opacity:0;
    }
}

@keyframes floatCardOne{
    0%,100%{
        transform:translateY(0) rotate(-1deg);
    }
    50%{
        transform:translateY(-9px) rotate(1deg);
    }
}

@keyframes floatCardTwo{
    0%,100%{
        transform:translateY(0);
    }
    50%{
        transform:translateY(8px);
    }
}

@keyframes statusPulse{
    0%,100%{
        opacity:.55;
        transform:scale(.92);
    }
    50%{
        opacity:1;
        transform:scale(1.15);
    }
}

@keyframes barGrow{
    from{
        transform:scaleY(0);
        opacity:.15;
    }
    to{
        transform:scaleY(1);
        opacity:1;
    }
}

@keyframes dataTravel{
    from{
        transform:translateX(-55px);
    }
    to{
        transform:translateX(230px);
    }
}

@keyframes gridMove{
    from{
        background-position:0 0;
    }
    to{
        background-position:52px 52px;
    }
}

@keyframes orbFloatOne{
    0%,100%{
        transform:translate3d(0,0,0) scale(1);
    }
    50%{
        transform:translate3d(-30px,25px,0) scale(1.06);
    }
}

@keyframes orbFloatTwo{
    0%,100%{
        transform:translate3d(0,0,0);
    }
    50%{
        transform:translate3d(25px,-20px,0);
    }
}


/* ===============================
   RESPONSIVE
   =============================== */

@media (max-width:1080px){

    .sys-hero__inner{
        grid-template-columns:1fr 1fr;
        gap:40px;
    }

    .sys-dashboard{
        transform:none;
    }

    @keyframes dashboardFloat{
        0%,100%{
            transform:translateY(0);
        }
        50%{
            transform:translateY(-9px);
        }
    }

}

@media (max-width:900px){

    .sys-hero{
        min-height:auto;
    }

    .sys-hero__inner{
        grid-template-columns:1fr;
        padding:100px 0 80px;
    }

    .sys-hero__content{
        max-width:720px;
    }

    .sys-hero__visual{
        min-height:540px;
        width:min(100%, 680px);
        margin:0 auto;
    }

}

@media (max-width:620px){

    .sys-hero__inner{
        width:min(100% - 30px, 1240px);
        padding:82px 0 58px;
    }

    .sys-hero__title{
        font-size:clamp(44px, 13vw, 60px);
    }

    .sys-hero__lead{
        font-size:18px;
    }

    .sys-hero__actions{
        align-items:stretch;
        flex-direction:column;
    }

    .sys-hero__btn{
        width:100%;
    }

    .sys-hero__visual{
        min-height:460px;
    }

    .sys-dashboard__body{
        grid-template-columns:82px minmax(0,1fr);
    }

    .sys-dashboard__sidebar{
        padding:16px 8px;
    }

    .sys-dashboard__sidebar span{
        padding:9px 7px;
        font-size:8px;
    }

    .sys-dashboard__main{
        padding:17px 13px;
    }

    .sys-dashboard__stats{
        gap:6px;
    }

    .sys-stat{
        padding:10px 8px;
    }

    .sys-stat strong{
        font-size:16px;
    }

    .sys-float-card--database{
        left:5px;
        bottom:20px;
    }

    .sys-float-card--security{
        right:2px;
        top:50px;
    }

    .sys-data-line{
        display:none;
    }

}

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

    .sys-hero *,
    .sys-hero *::before,
    .sys-hero *::after{
        animation:none !important;
        transition:none !important;
    }

}
/* =========================================================
   BLOQUE 02 · EL PROBLEMA
   ========================================================= */

.sys-problem{
    position:relative;
    overflow:hidden;
    padding:125px 0;
    background:#f5f3ed;
    color:#171814;
}

.sys-problem::before{
    content:"";
    position:absolute;
    width:460px;
    height:460px;
    right:-180px;
    top:-180px;
    border-radius:50%;
    background:radial-gradient(
        circle,
        rgba(216,170,81,.14),
        transparent 68%
    );
    animation:problemGlow 10s ease-in-out infinite;
}

.sys-problem__inner{
    position:relative;
    z-index:2;
    width:min(1180px, calc(100% - 48px));
    margin:0 auto;
}

.sys-problem__head{
    max-width:780px;
}

.sys-section__eyebrow{
    display:inline-flex;
    align-items:center;
    gap:11px;
    margin-bottom:20px;
    font-size:12px;
    font-weight:700;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:#9b742e;
}

.sys-section__eyebrow::before{
    content:"";
    width:28px;
    height:1px;
    background:#c59843;
}

.sys-problem__head h2{
    margin:0;
    font-size:clamp(42px, 5vw, 68px);
    line-height:1;
    letter-spacing:-.04em;
}

.sys-problem__head h2 span{
    display:block;
    color:#b98a36;
}

.sys-problem__head p{
    max-width:700px;
    margin:26px 0 0;
    font-size:19px;
    line-height:1.7;
    color:#61625d;
}

.sys-problem__grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:16px;
    margin-top:65px;
}

.sys-problem__card{
    position:relative;
    min-height:300px;
    padding:29px;
    overflow:hidden;
    border:1px solid #e1ded4;
    border-radius:17px;
    background:#fff;
    transition:
        transform .35s ease,
        box-shadow .35s ease,
        border-color .35s ease;
}

.sys-problem__card:hover{
    transform:translateY(-9px);
    border-color:#d5c69f;
    box-shadow:0 22px 50px rgba(48,45,34,.10);
}

.sys-problem__number{
    position:absolute;
    right:20px;
    top:17px;
    font-size:11px;
    font-weight:700;
    color:#c6c1b5;
}

.sys-problem__icon{
    width:53px;
    height:53px;
    display:grid;
    place-items:center;
    border-radius:13px;
    font-size:12px;
    font-weight:800;
    letter-spacing:.04em;
    color:#181914;
    background:#e3b65c;
    transition:transform .35s ease;
}

.sys-problem__card:hover .sys-problem__icon{
    transform:rotate(-5deg) scale(1.08);
}

.sys-problem__card h3{
    margin:29px 0 12px;
    font-size:20px;
    line-height:1.2;
}

.sys-problem__card p{
    margin:0;
    font-size:14px;
    line-height:1.7;
    color:#77776f;
}

.sys-problem__closing{
    display:flex;
    align-items:center;
    gap:22px;
    margin-top:52px;
    max-width:800px;
}

.sys-problem__closing > span{
    width:55px;
    height:2px;
    flex:0 0 auto;
    background:#c4943d;
}

.sys-problem__closing p{
    margin:0;
    font-size:20px;
    line-height:1.55;
    color:#4a4b46;
}

.sys-problem__closing strong{
    color:#181914;
}

@keyframes problemGlow{
    0%,100%{
        transform:translate(0,0) scale(1);
    }
    50%{
        transform:translate(-30px,30px) scale(1.08);
    }
}

@media(max-width:980px){
    .sys-problem__grid{
        grid-template-columns:repeat(2,1fr);
    }
}

@media(max-width:580px){
    .sys-problem{
        padding:90px 0;
    }

    .sys-problem__inner{
        width:min(100% - 30px,1180px);
    }

    .sys-problem__grid{
        grid-template-columns:1fr;
        margin-top:45px;
    }

    .sys-problem__card{
        min-height:auto;
    }

    .sys-problem__closing{
        align-items:flex-start;
    }
}

/* =========================================================
   BLOQUE 03 · CONVERSIÓN A SISTEMA
   ========================================================= */

.sys-transform{
    position:relative;
    overflow:hidden;
    padding:130px 0;
    color:#fff;
    background:
        radial-gradient(
            circle at 75% 45%,
            rgba(216,170,81,.09),
            transparent 35%
        ),
        #11120f;
}

.sys-transform::before{
    content:"";
    position:absolute;
    inset:0;
    opacity:.08;
    background-image:
        linear-gradient(rgba(255,255,255,.08) 1px,transparent 1px),
        linear-gradient(90deg,rgba(255,255,255,.08) 1px,transparent 1px);
    background-size:55px 55px;
}

.sys-transform__inner{
    position:relative;
    z-index:2;
    width:min(1180px,calc(100% - 48px));
    margin:0 auto;
    display:grid;
    grid-template-columns:.92fr 1.08fr;
    align-items:center;
    gap:90px;
}

.sys-section__eyebrow--light{
    color:#d8aa51;
}

.sys-transform__content h2{
    margin:0;
    max-width:580px;
    font-size:clamp(43px,5vw,68px);
    line-height:1;
    letter-spacing:-.045em;
}

.sys-transform__content h2 span{
    display:block;
    color:#d8aa51;
}

.sys-transform__content > p{
    max-width:570px;
    margin:27px 0 0;
    font-size:18px;
    line-height:1.7;
    color:rgba(255,255,255,.63);
}

.sys-transform__list{
    list-style:none;
    padding:0;
    margin:35px 0 0;
    display:grid;
    gap:13px;
}

.sys-transform__list li{
    display:flex;
    align-items:center;
    gap:12px;
    font-size:15px;
    color:rgba(255,255,255,.80);
}

.sys-transform__list li span{
    width:25px;
    height:25px;
    display:grid;
    place-items:center;
    flex:0 0 auto;
    border-radius:50%;
    font-size:10px;
    color:var(--td-green-soft);
    background:rgba(47,155,87,.13);
}


/* VISUAL */

.sys-transform__visual{
    position:relative;
    min-height:520px;
}

.sys-core{
    position:absolute;
    z-index:5;
    left:50%;
    top:50%;
    width:270px;
    height:270px;
    transform:translate(-50%,-50%);
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    border:1px solid rgba(216,170,81,.26);
    border-color:rgba(242,138,26,.28);
    border-radius:50%;
     background:
        radial-gradient(
            circle,
            rgba(242,138,26,.13),
            rgba(24,25,21,.96) 66%
        );

    box-shadow:
        0 40px 90px rgba(0,0,0,.4),
        0 0 65px rgba(242,138,26,.10);
    animation:coreFloat 6s ease-in-out infinite;
}

.sys-core__glow{
    position:absolute;
    inset:-17px;
    border:1px solid rgba(216,170,81,.10);
    border-radius:50%;
    animation:coreRing 4s ease-in-out infinite;
}

.sys-core__label{
    font-size:10px;
    font-weight:700;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:#d8aa51;
}

.sys-core strong{
    margin-top:13px;
    font-size:26px;
    line-height:1.05;
}

.sys-core strong b{
    display:block;
     color:var(--td-orange);
}

.sys-core small{
    margin-top:16px;
    font-size:10px;
    color:rgba(255,255,255,.35);
}


/* FUENTES */

.sys-source{
    position:absolute;
    z-index:4;
    width:105px;
    padding:13px 10px;
    border:1px solid rgba(255,255,255,.08);
    border-radius:12px;
    text-align:center;
    background:rgba(255,255,255,.035);
    backdrop-filter:blur(12px);
    box-shadow:0 16px 40px rgba(0,0,0,.22);
}

.sys-source span{
    display:grid;
    place-items:center;
    width:38px;
    height:38px;
    margin:0 auto 8px;
    border-radius:9px;
    font-size:10px;
    font-weight:800;
    color:#171814;
    background:#d8aa51;
}

.sys-source small{
    font-size:10px;
    color:rgba(255,255,255,.55);
}

.sys-source--excel{
    left:0;
    top:80px;
    animation:sourceOne 5.8s ease-in-out infinite;
}

.sys-source--mail{
    right:0;
    top:65px;
    animation:sourceTwo 6.5s ease-in-out infinite;
}

.sys-source--docs{
    left:10px;
    bottom:70px;
    animation:sourceThree 6.3s ease-in-out infinite;
}

.sys-source--chat{
    right:5px;
    bottom:72px;
    animation:sourceFour 5.5s ease-in-out infinite;
}


/* CONEXIONES */

.sys-connect{
    position:absolute;
    z-index:2;
    height:1px;
    overflow:hidden;
    background:rgba(216,170,81,.18);
}

.sys-connect i{
    display:block;
    width:50px;
    height:1px;
    background:linear-gradient(
        90deg,
        transparent,
        #d8aa51,
        transparent
    );
    animation:systemDataFlow 2.4s linear infinite;
}

.sys-connect--1{
    width:190px;
    top:165px;
    left:85px;
    transform:rotate(24deg);
}

.sys-connect--2{
    width:185px;
    top:155px;
    right:86px;
    transform:rotate(-24deg);
}

.sys-connect--3{
    width:185px;
    left:90px;
    bottom:160px;
    transform:rotate(-22deg);
}

.sys-connect--4{
    width:185px;
    right:88px;
    bottom:160px;
    transform:rotate(22deg);
}


/* ANIMACIONES */

@keyframes systemDataFlow{
    from{
        transform:translateX(-55px);
    }
    to{
        transform:translateX(220px);
    }
}

@keyframes coreFloat{
    0%,100%{
        transform:translate(-50%,-50%) translateY(0);
    }
    50%{
        transform:translate(-50%,-50%) translateY(-10px);
    }
}

@keyframes coreRing{
    0%,100%{
        transform:scale(.98);
        opacity:.4;
    }
    50%{
        transform:scale(1.08);
        opacity:.9;
    }
}

@keyframes sourceOne{
    0%,100%{transform:translateY(0)}
    50%{transform:translateY(-8px)}
}

@keyframes sourceTwo{
    0%,100%{transform:translateY(0)}
    50%{transform:translateY(9px)}
}

@keyframes sourceThree{
    0%,100%{transform:translateY(0)}
    50%{transform:translateY(7px)}
}

@keyframes sourceFour{
    0%,100%{transform:translateY(0)}
    50%{transform:translateY(-9px)}
}


/* RESPONSIVE */

@media(max-width:950px){

    .sys-transform__inner{
        grid-template-columns:1fr;
        gap:70px;
    }

    .sys-transform__visual{
        width:min(100%,650px);
        margin:0 auto;
    }
}

@media(max-width:580px){

    .sys-transform{
        padding:90px 0;
    }

    .sys-transform__inner{
        width:min(100% - 30px,1180px);
    }

    .sys-transform__visual{
        min-height:460px;
        transform:scale(.86);
    }

}
/* =========================================================
   BLOQUE 04 · SOLUCIONES
   ========================================================= */

.sys-solutions{
    position:relative;
    overflow:hidden;
    padding:125px 0;
    background:#f4f2ec;
    color:#171814;
}

.sys-solutions::before{
    content:"";
    position:absolute;
    left:-180px;
    bottom:-220px;
    width:520px;
    height:520px;
    border-radius:50%;
    background:
        radial-gradient(
            circle,
            rgba(47,155,87,.12),
            transparent 68%
        );
    animation:solutionsGlow 11s ease-in-out infinite;
}

.sys-solutions::after{
    content:"";
    position:absolute;
    right:-160px;
    top:-180px;
    width:480px;
    height:480px;
    border-radius:50%;
    background:
        radial-gradient(
            circle,
            rgba(242,138,26,.11),
            transparent 68%
        );
    animation:solutionsGlowTwo 12s ease-in-out infinite;
}

.sys-solutions__inner{
    position:relative;
    z-index:2;
    width:min(1180px,calc(100% - 48px));
    margin:0 auto;
}

.sys-solutions__head{
    max-width:790px;
}

.sys-solutions__head h2{
    margin:0;
    font-size:clamp(42px,5vw,68px);
    line-height:1;
    letter-spacing:-.045em;
}

.sys-solutions__head h2 span{
    display:block;
    color:var(--td-orange);
}

.sys-solutions__head p{
    max-width:680px;
    margin:25px 0 0;
    font-size:18px;
    line-height:1.7;
    color:#62635d;
}

.sys-solutions__grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:16px;
    margin-top:62px;
}

.sys-solution-card{
    position:relative;
    overflow:hidden;
    min-height:275px;
    padding:28px;
    border:1px solid #dedbd2;
    border-radius:17px;
    background:rgba(255,255,255,.83);
    backdrop-filter:blur(8px);
    transition:
        transform .35s ease,
        box-shadow .35s ease,
        border-color .35s ease;
}

.sys-solution-card::before{
    content:"";
    position:absolute;
    width:120px;
    height:120px;
    right:-60px;
    top:-60px;
    border-radius:50%;
    background:rgba(242,138,26,.06);
    transition:
        transform .5s ease,
        background .5s ease;
}

.sys-solution-card:hover{
    transform:translateY(-8px);
    border-color:rgba(242,138,26,.28);
    box-shadow:0 24px 55px rgba(37,37,29,.10);
}

.sys-solution-card:hover::before{
    transform:scale(1.45);
    background:rgba(242,138,26,.11);
}

.sys-solution-card__icon{
    position:relative;
    z-index:2;
    width:49px;
    height:49px;
    display:grid;
    place-items:center;
    border-radius:13px;
    font-size:11px;
    font-weight:800;
    letter-spacing:.04em;
    color:#fff;
    background:var(--td-orange);
    box-shadow:0 10px 24px rgba(242,138,26,.18);
    transition:
        transform .35s ease,
        background .35s ease;
}

.sys-solution-card:nth-child(2n) .sys-solution-card__icon{
    background:var(--td-green);
    box-shadow:0 10px 24px rgba(47,155,87,.16);
}

.sys-solution-card:hover .sys-solution-card__icon{
    transform:translateY(-3px) rotate(-4deg) scale(1.06);
}

.sys-solution-card h3{
    position:relative;
    z-index:2;
    margin:28px 0 11px;
    font-size:20px;
    line-height:1.2;
}

.sys-solution-card p{
    position:relative;
    z-index:2;
    margin:0;
    font-size:14px;
    line-height:1.72;
    color:#74756f;
}

.sys-solution-card__line{
    position:absolute;
    left:28px;
    right:28px;
    bottom:23px;
    height:2px;
    overflow:hidden;
    background:#ebe8df;
}

.sys-solution-card__line::after{
    content:"";
    position:absolute;
    inset:0 auto 0 0;
    width:0;
    background:linear-gradient(
        90deg,
        var(--td-orange),
        var(--td-green)
    );
    transition:width .45s ease;
}

.sys-solution-card:hover .sys-solution-card__line::after{
    width:100%;
}


/* TARJETA DESTACADA */

.sys-solution-card--featured{
    color:#fff;
    border-color:rgba(255,255,255,.05);
    background:
        linear-gradient(
            145deg,
            #171814,
            #21221d
        );
}

.sys-solution-card--featured::before{
    width:220px;
    height:220px;
    right:-100px;
    top:-100px;
    background:
        radial-gradient(
            circle,
            rgba(47,155,87,.20),
            transparent 67%
        );
}

.sys-solution-card--featured .sys-solution-card__icon{
    background:var(--td-green);
}

.sys-solution-card--featured p{
    color:rgba(255,255,255,.58);
}

.sys-solution-card--featured a{
    position:absolute;
    left:28px;
    bottom:27px;
    display:inline-flex;
    align-items:center;
    gap:10px;
    color:var(--td-orange);
    text-decoration:none;
    font-size:13px;
    font-weight:700;
}

.sys-solution-card--featured a span{
    transition:transform .25s ease;
}

.sys-solution-card--featured a:hover span{
    transform:translateX(5px);
}


/* MOVIMIENTO */

@keyframes solutionsGlow{
    0%,100%{
        transform:translate(0,0) scale(1);
    }
    50%{
        transform:translate(35px,-20px) scale(1.08);
    }
}

@keyframes solutionsGlowTwo{
    0%,100%{
        transform:translate(0,0);
    }
    50%{
        transform:translate(-35px,25px);
    }
}


/* RESPONSIVE */

@media(max-width:1050px){
    .sys-solutions__grid{
        grid-template-columns:repeat(2,1fr);
    }
}

@media(max-width:600px){

    .sys-solutions{
        padding:90px 0;
    }

    .sys-solutions__inner{
        width:min(100% - 30px,1180px);
    }

    .sys-solutions__grid{
        grid-template-columns:1fr;
        margin-top:45px;
    }

    .sys-solution-card{
        min-height:245px;
    }
}
/* =========================================================
   BLOQUE 05 · BASES DE DATOS
   ========================================================= */

.sys-database{
    position:relative;
    overflow:hidden;
    padding:135px 0;
    background:#f7f6f2;
    color:#171814;
}

.sys-database::before{
    content:"";
    position:absolute;
    width:560px;
    height:560px;
    left:-220px;
    top:-180px;
    border-radius:50%;
    background:
        radial-gradient(
            circle,
            rgba(47,155,87,.11),
            transparent 67%
        );
    animation:dbBackgroundOne 11s ease-in-out infinite;
}

.sys-database::after{
    content:"";
    position:absolute;
    width:520px;
    height:520px;
    right:-210px;
    bottom:-210px;
    border-radius:50%;
    background:
        radial-gradient(
            circle,
            rgba(242,138,26,.10),
            transparent 68%
        );
    animation:dbBackgroundTwo 13s ease-in-out infinite;
}

.sys-database__inner{
    position:relative;
    z-index:2;
    width:min(1180px,calc(100% - 48px));
    margin:0 auto;
    display:grid;
    grid-template-columns:1fr 1fr;
    align-items:center;
    gap:95px;
}


/* =========================================================
   VISUAL BASE DE DATOS
   ========================================================= */

.sys-database__visual{
    position:relative;
    min-height:570px;
}

.sys-db-core{
    position:absolute;
    z-index:5;
    top:50%;
    left:50%;
    width:255px;
    height:255px;
    transform:translate(-50%,-50%);
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    border-radius:50%;
    border:1px solid rgba(242,138,26,.23);
    background:
        radial-gradient(
            circle,
            rgba(242,138,26,.10),
            rgba(255,255,255,.97) 67%
        );
    box-shadow:
        0 35px 70px rgba(41,40,33,.12),
        0 0 60px rgba(242,138,26,.07);
    animation:dbCoreFloat 6s ease-in-out infinite;
}

.sys-db-core__ring{
    position:absolute;
    border-radius:50%;
    pointer-events:none;
}

.sys-db-core__ring--1{
    inset:-22px;
    border:1px solid rgba(242,138,26,.14);
    animation:dbRingPulse 4.2s ease-in-out infinite;
}

.sys-db-core__ring--2{
    inset:-48px;
    border:1px dashed rgba(47,155,87,.13);
    animation:dbRingRotate 24s linear infinite;
}

.sys-db-core__icon{
    width:62px;
    height:62px;
    display:grid;
    place-items:center;
    border-radius:17px;
    color:#fff;
    font-size:14px;
    font-weight:800;
    letter-spacing:.05em;
    background:var(--td-orange);
    box-shadow:0 15px 32px rgba(242,138,26,.22);
}

.sys-db-core > span{
    margin-top:18px;
    color:var(--td-green);
    font-size:11px;
    font-weight:800;
    letter-spacing:.12em;
    text-transform:uppercase;
}

.sys-db-core strong{
    margin-top:7px;
    font-size:22px;
    line-height:1.1;
}

.sys-db-core small{
    max-width:165px;
    margin-top:8px;
    font-size:10px;
    line-height:1.45;
    color:#8a8b84;
}


/* NODOS */

.sys-db-node{
    position:absolute;
    z-index:4;
    display:flex;
    align-items:center;
    gap:11px;
    min-width:178px;
    padding:13px 15px;
    border:1px solid #dfddd5;
    border-radius:13px;
    background:rgba(255,255,255,.88);
    backdrop-filter:blur(12px);
    box-shadow:0 17px 40px rgba(38,37,31,.09);
}

.sys-db-node > span{
    width:38px;
    height:38px;
    flex:0 0 auto;
    display:grid;
    place-items:center;
    border-radius:10px;
    font-size:9px;
    font-weight:800;
    color:#fff;
    background:var(--td-green);
}

.sys-db-node:nth-of-type(even) > span{
    background:var(--td-orange);
}

.sys-db-node small,
.sys-db-node strong{
    display:block;
}

.sys-db-node small{
    color:#92938c;
    font-size:8px;
    text-transform:uppercase;
    letter-spacing:.08em;
}

.sys-db-node strong{
    margin-top:3px;
    font-size:10px;
    color:#24251f;
}

.sys-db-node--1{
    top:58px;
    left:4px;
    animation:dbNodeOne 5.8s ease-in-out infinite;
}

.sys-db-node--2{
    top:72px;
    right:0;
    animation:dbNodeTwo 6.4s ease-in-out infinite;
}

.sys-db-node--3{
    bottom:64px;
    left:0;
    animation:dbNodeThree 6.1s ease-in-out infinite;
}

.sys-db-node--4{
    bottom:54px;
    right:4px;
    animation:dbNodeFour 5.5s ease-in-out infinite;
}


/* CONEXIONES */

.sys-db-connection{
    position:absolute;
    z-index:2;
    height:1px;
    overflow:hidden;
    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(47,155,87,.22),
            rgba(242,138,26,.22),
            transparent
        );
}

.sys-db-connection i{
    display:block;
    width:48px;
    height:1px;
    background:
        linear-gradient(
            90deg,
            transparent,
            var(--td-orange),
            var(--td-green),
            transparent
        );
    animation:dbDataMove 2.5s linear infinite;
}

.sys-db-connection--1{
    width:175px;
    left:108px;
    top:172px;
    transform:rotate(28deg);
}

.sys-db-connection--2{
    width:170px;
    right:104px;
    top:178px;
    transform:rotate(-28deg);
}

.sys-db-connection--3{
    width:172px;
    left:106px;
    bottom:175px;
    transform:rotate(-27deg);
}

.sys-db-connection--4{
    width:170px;
    right:105px;
    bottom:175px;
    transform:rotate(27deg);
}


/* =========================================================
   TEXTO
   ========================================================= */

.sys-database__content h2{
    margin:0;
    font-size:clamp(42px,5vw,67px);
    line-height:1;
    letter-spacing:-.045em;
}

.sys-database__content h2 span{
    display:block;
    color:var(--td-orange);
}

.sys-database__lead{
    max-width:590px;
    margin:28px 0 0;
    font-size:19px;
    line-height:1.65;
    color:#565751;
}

.sys-database__text{
    max-width:570px;
    margin:14px 0 0;
    font-size:15px;
    line-height:1.75;
    color:#777870;
}


/* BENEFICIOS */

.sys-database__features{
    margin-top:38px;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:13px;
}

.sys-db-feature{
    display:flex;
    gap:12px;
    padding:17px;
    border:1px solid #e2dfd7;
    border-radius:13px;
    background:rgba(255,255,255,.68);
    transition:
        transform .3s ease,
        background .3s ease,
        border-color .3s ease,
        box-shadow .3s ease;
}

.sys-db-feature:hover{
    transform:translateY(-5px);
    background:#fff;
    border-color:rgba(242,138,26,.28);
    box-shadow:0 15px 30px rgba(40,39,32,.07);
}

.sys-db-feature > span{
    width:31px;
    height:31px;
    flex:0 0 auto;
    display:grid;
    place-items:center;
    border-radius:8px;
    font-size:9px;
    font-weight:800;
    color:#fff;
    background:var(--td-orange);
}

.sys-db-feature:nth-child(even) > span{
    background:var(--td-green);
}

.sys-db-feature strong{
    display:block;
    font-size:13px;
}

.sys-db-feature p{
    margin:5px 0 0;
    font-size:11px;
    line-height:1.5;
    color:#81827b;
}


/* =========================================================
   ANIMACIONES
   ========================================================= */

@keyframes dbCoreFloat{
    0%,100%{
        transform:translate(-50%,-50%) translateY(0);
    }

    50%{
        transform:translate(-50%,-50%) translateY(-10px);
    }
}

@keyframes dbRingPulse{
    0%,100%{
        transform:scale(.98);
        opacity:.4;
    }

    50%{
        transform:scale(1.07);
        opacity:1;
    }
}

@keyframes dbRingRotate{
    from{
        transform:rotate(0deg);
    }

    to{
        transform:rotate(360deg);
    }
}

@keyframes dbDataMove{
    from{
        transform:translateX(-55px);
    }

    to{
        transform:translateX(220px);
    }
}

@keyframes dbNodeOne{
    0%,100%{transform:translateY(0)}
    50%{transform:translateY(-8px)}
}

@keyframes dbNodeTwo{
    0%,100%{transform:translateY(0)}
    50%{transform:translateY(7px)}
}

@keyframes dbNodeThree{
    0%,100%{transform:translateY(0)}
    50%{transform:translateY(8px)}
}

@keyframes dbNodeFour{
    0%,100%{transform:translateY(0)}
    50%{transform:translateY(-7px)}
}

@keyframes dbBackgroundOne{
    0%,100%{
        transform:translate(0,0);
    }

    50%{
        transform:translate(30px,25px);
    }
}

@keyframes dbBackgroundTwo{
    0%,100%{
        transform:translate(0,0) scale(1);
    }

    50%{
        transform:translate(-25px,-20px) scale(1.07);
    }
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media(max-width:980px){

    .sys-database__inner{
        grid-template-columns:1fr;
        gap:65px;
    }

    .sys-database__visual{
        width:min(100%,650px);
        margin:0 auto;
        order:2;
    }

    .sys-database__content{
        order:1;
    }
}

@media(max-width:600px){

    .sys-database{
        padding:90px 0;
    }

    .sys-database__inner{
        width:min(100% - 30px,1180px);
    }

    .sys-database__features{
        grid-template-columns:1fr;
    }

    .sys-database__visual{
        min-height:500px;
        transform:scale(.86);
        transform-origin:center;
    }
}

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

    .sys-database *,
    .sys-database *::before,
    .sys-database *::after{
        animation:none !important;
        transition:none !important;
    }
}
/* =========================================================
   BLOQUE 06 · EL SISTEMA SE ADAPTA A SU EMPRESA
   ========================================================= */

.sys-custom{
    position:relative;
    overflow:hidden;
    padding:135px 0;
    background:#11120f;
    color:#fff;
}


/* TEXTURA */

.sys-custom::before{
    content:"";
    position:absolute;
    inset:0;

    opacity:.07;

    background-image:
        linear-gradient(
            rgba(255,255,255,.07) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,.07) 1px,
            transparent 1px
        );

    background-size:58px 58px;

    animation:customGrid 28s linear infinite;
}


/* BRILLO NARANJA */

.sys-custom::after{
    content:"";
    position:absolute;

    width:650px;
    height:650px;

    right:-250px;
    top:-270px;

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(242,138,26,.12),
            transparent 67%
        );

    animation:customGlow 12s ease-in-out infinite;
}


.sys-custom__inner{
    position:relative;
    z-index:2;

    width:min(1180px,calc(100% - 48px));
    margin:0 auto;
}


/* =========================================================
   CABECERA
   ========================================================= */

.sys-custom__head{
    max-width:850px;
}

.sys-custom__head h2{
    margin:0;

    font-size:clamp(43px,5vw,69px);
    line-height:.98;

    letter-spacing:-.045em;
}

.sys-custom__head h2 span{
    display:block;
    color:var(--td-orange);
}

.sys-custom__head > p{
    margin:23px 0 0;

    font-size:21px;
    color:rgba(255,255,255,.62);
}


/* =========================================================
   COMPARACIÓN
   ========================================================= */

.sys-custom__comparison{
    display:grid;
    grid-template-columns:1fr 1fr;

    gap:18px;

    margin-top:65px;
}

.sys-custom__side{
    position:relative;

    min-height:610px;

    overflow:hidden;

    padding:38px;

    border-radius:21px;
}


/* GENÉRICO */

.sys-custom__side--generic{
    border:1px solid rgba(255,255,255,.07);

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.035),
            rgba(255,255,255,.012)
        );
}


/* A MEDIDA */

.sys-custom__side--tailored{
    border:1px solid rgba(242,138,26,.20);

    background:
        radial-gradient(
            circle at 70% 65%,
            rgba(47,155,87,.09),
            transparent 38%
        ),
        radial-gradient(
            circle at 20% 10%,
            rgba(242,138,26,.09),
            transparent 38%
        ),
        rgba(255,255,255,.025);
}


/* =========================================================
   TEXTO DE TARJETAS
   ========================================================= */

.sys-custom__side-head{
    position:relative;
    z-index:5;

    max-width:430px;
}

.sys-custom__tag{
    display:inline-flex;

    padding:7px 10px;

    border-radius:50px;

    font-size:9px;
    font-weight:800;

    letter-spacing:.12em;
    text-transform:uppercase;

    color:rgba(255,255,255,.45);

    background:rgba(255,255,255,.055);
}

.sys-custom__side--tailored .sys-custom__tag{
    color:var(--td-orange);

    background:rgba(242,138,26,.09);
}

.sys-custom__side h3{
    margin:20px 0 0;

    font-size:29px;
    line-height:1.1;

    font-weight:500;
}

.sys-custom__side h3 strong{
    display:block;
    font-weight:700;
}

.sys-custom__side--tailored h3 strong{
    color:var(--td-orange);
}

.sys-custom__side-head p{
    margin:15px 0 0;

    max-width:400px;

    font-size:14px;
    line-height:1.65;

    color:rgba(255,255,255,.46);
}


/* =========================================================
   SOFTWARE GENÉRICO
   ========================================================= */

.sys-generic{
    position:relative;

    height:330px;

    margin-top:35px;

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

.sys-generic__window{
    width:270px;

    overflow:hidden;

    border:1px solid rgba(255,255,255,.08);

    border-radius:14px;

    opacity:.58;

    background:#191a17;

    transform:rotate(-2deg);
}

.sys-generic__top{
    height:38px;

    display:flex;
    align-items:center;

    gap:5px;

    padding:0 13px;

    border-bottom:1px solid rgba(255,255,255,.06);
}

.sys-generic__top i{
    width:6px;
    height:6px;

    border-radius:50%;

    background:rgba(255,255,255,.18);
}

.sys-generic__body{
    padding:22px;
}

.sys-generic__body span{
    display:block;

    height:22px;

    margin-bottom:11px;

    border-radius:5px;

    background:rgba(255,255,255,.055);
}

.sys-generic__body span:nth-child(2){
    width:75%;
}

.sys-generic__body span:nth-child(3){
    width:88%;
}

.sys-generic__body span:nth-child(4){
    width:60%;
}

.sys-generic__body span:nth-child(5){
    width:82%;
}


/* RESTRICCIONES */

.sys-generic__constraint{
    position:absolute;

    padding:8px 11px;

    border:1px solid rgba(255,255,255,.07);

    border-radius:7px;

    font-size:9px;

    color:rgba(255,255,255,.40);

    background:#1b1c19;
}

.sys-generic__constraint--1{
    top:35px;
    right:5px;

    animation:genericOne 5s ease-in-out infinite;
}

.sys-generic__constraint--2{
    bottom:35px;
    left:0;

    animation:genericTwo 6s ease-in-out infinite;
}

.sys-generic__constraint--3{
    right:10px;
    bottom:70px;

    animation:genericThree 5.5s ease-in-out infinite;
}


/* =========================================================
   SISTEMA PERSONALIZADO
   ========================================================= */

.sys-tailored{
    position:relative;

    height:340px;

    margin-top:27px;
}


/* ÓRBITAS */

.sys-tailored__orbit{
    position:absolute;

    width:275px;
    height:275px;

    left:50%;
    top:50%;

    transform:translate(-50%,-50%);

    border-radius:50%;

    border:1px dashed rgba(242,138,26,.18);

    animation:tailoredOrbit 30s linear infinite;
}

.sys-tailored__orbit--2{
    width:220px;
    height:220px;

    border-color:rgba(47,155,87,.15);

    animation-direction:reverse;
    animation-duration:24s;
}


/* NÚCLEO */

.sys-tailored__core{
    position:absolute;

    z-index:5;

    left:50%;
    top:50%;

    width:145px;
    height:145px;

    transform:translate(-50%,-50%);

    display:flex;
    flex-direction:column;

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

    border-radius:50%;

    text-align:center;

    border:1px solid rgba(242,138,26,.28);

    background:
        radial-gradient(
            circle,
            rgba(242,138,26,.13),
            #171814 70%
        );

    box-shadow:
        0 20px 60px rgba(0,0,0,.35),
        0 0 45px rgba(242,138,26,.08);

    animation:tailoredCore 5s ease-in-out infinite;
}

.sys-tailored__core > span{
    width:33px;
    height:33px;

    display:grid;
    place-items:center;

    margin-bottom:7px;

    border-radius:9px;

    font-size:9px;
    font-weight:800;

    color:#fff;

    background:var(--td-orange);
}

.sys-tailored__core small{
    font-size:8px;

    text-transform:uppercase;
    letter-spacing:.1em;

    color:var(--td-green);
}

.sys-tailored__core strong{
    margin-top:5px;

    font-size:13px;
    line-height:1.15;
}


/* MÓDULOS */

.sys-tailored__module{
    position:absolute;
    z-index:6;

    display:flex;
    align-items:center;

    gap:7px;

    padding:8px 11px;

    border:1px solid rgba(255,255,255,.08);

    border-radius:9px;

    font-size:9px;

    color:rgba(255,255,255,.68);

    background:rgba(25,26,22,.92);

    backdrop-filter:blur(10px);

    box-shadow:0 12px 25px rgba(0,0,0,.20);
}

.sys-tailored__module span{
    width:22px;
    height:22px;

    display:grid;
    place-items:center;

    border-radius:6px;

    font-size:7px;
    font-weight:800;

    color:#fff;

    background:var(--td-green);
}

.sys-tailored__module:nth-of-type(even) span{
    background:var(--td-orange);
}


.sys-tailored__module--1{
    top:12px;
    left:42%;

    animation:moduleOne 5.5s ease-in-out infinite;
}

.sys-tailored__module--2{
    right:5px;
    top:46%;

    animation:moduleTwo 6s ease-in-out infinite;
}

.sys-tailored__module--3{
    bottom:8px;
    left:40%;

    animation:moduleThree 5.7s ease-in-out infinite;
}

.sys-tailored__module--4{
    left:0;
    top:47%;

    animation:moduleFour 6.3s ease-in-out infinite;
}


/* =========================================================
   MENSAJE FINAL
   ========================================================= */

.sys-custom__bottom{
    margin-top:70px;

    display:grid;
    grid-template-columns:.7fr 1.3fr;

    align-items:center;

    gap:55px;

    padding-top:40px;

    border-top:1px solid rgba(255,255,255,.08);
}

.sys-custom__bottom > p{
    margin:0;

    font-size:16px;
    line-height:1.6;

    color:rgba(255,255,255,.48);
}

.sys-custom__bottom > p strong{
    color:#fff;
}

.sys-custom__question{
    position:relative;

    padding-left:28px;

    border-left:3px solid var(--td-orange);
}

.sys-custom__question span{
    display:block;

    margin-bottom:6px;

    font-size:11px;
    font-weight:700;

    letter-spacing:.1em;
    text-transform:uppercase;

    color:var(--td-green);
}

.sys-custom__question strong{
    font-size:clamp(26px,3vw,39px);

    letter-spacing:-.025em;
}


/* =========================================================
   ANIMACIONES
   ========================================================= */

@keyframes tailoredOrbit{
    from{
        transform:translate(-50%,-50%) rotate(0deg);
    }

    to{
        transform:translate(-50%,-50%) rotate(360deg);
    }
}

@keyframes tailoredCore{
    0%,100%{
        transform:translate(-50%,-50%) scale(1);
    }

    50%{
        transform:translate(-50%,-50%) scale(1.035);
    }
}

@keyframes moduleOne{
    0%,100%{transform:translateY(0)}
    50%{transform:translateY(-7px)}
}

@keyframes moduleTwo{
    0%,100%{transform:translateX(0)}
    50%{transform:translateX(7px)}
}

@keyframes moduleThree{
    0%,100%{transform:translateY(0)}
    50%{transform:translateY(7px)}
}

@keyframes moduleFour{
    0%,100%{transform:translateX(0)}
    50%{transform:translateX(-7px)}
}

@keyframes genericOne{
    0%,100%{transform:translateY(0)}
    50%{transform:translateY(-5px)}
}

@keyframes genericTwo{
    0%,100%{transform:translateY(0)}
    50%{transform:translateY(6px)}
}

@keyframes genericThree{
    0%,100%{transform:translateY(0)}
    50%{transform:translateY(-5px)}
}

@keyframes customGrid{
    from{
        background-position:0 0;
    }

    to{
        background-position:58px 58px;
    }
}

@keyframes customGlow{
    0%,100%{
        transform:translate(0,0);
    }

    50%{
        transform:translate(-45px,35px);
    }
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media(max-width:900px){

    .sys-custom__comparison{
        grid-template-columns:1fr;
    }

    .sys-custom__side{
        min-height:590px;
    }

    .sys-custom__bottom{
        grid-template-columns:1fr;
        gap:25px;
    }

}

@media(max-width:600px){

    .sys-custom{
        padding:90px 0;
    }

    .sys-custom__inner{
        width:min(100% - 30px,1180px);
    }

    .sys-custom__side{
        min-height:550px;
        padding:27px 20px;
    }

    .sys-custom__side h3{
        font-size:25px;
    }

    .sys-tailored{
        transform:scale(.88);
        transform-origin:center;
    }

    .sys-generic{
        transform:scale(.92);
    }

}

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

    .sys-custom *,
    .sys-custom *::before,
    .sys-custom *::after{
        animation:none !important;
        transition:none !important;
    }

}
/* =========================================================
   BLOQUE 07 · CTA FINAL · VERSIÓN CLARA
   ========================================================= */

.sys-cta{
    position:relative;
    overflow:hidden;

    min-height:650px;

    display:flex;
    align-items:center;

    padding:120px 0;

    color:#171814;

    background:
        linear-gradient(
            135deg,
            #ffffff 0%,
            #fafaf8 52%,
            #f5f6f2 100%
        );
}


/* =========================================================
   FONDO
   ========================================================= */

.sys-cta__bg{
    position:absolute;
    inset:0;

    overflow:hidden;
    pointer-events:none;
}

.sys-cta__bg::before{
    content:"";

    position:absolute;
    inset:0;

    opacity:.45;

    background-image:
        linear-gradient(
            rgba(20,22,18,.045) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(20,22,18,.045) 1px,
            transparent 1px
        );

    background-size:60px 60px;

    mask-image:
        linear-gradient(
            to right,
            transparent 0%,
            rgba(0,0,0,.75) 45%,
            rgba(0,0,0,.9) 100%
        );

    animation:ctaGridMove 30s linear infinite;
}


/* =========================================================
   BRILLOS DE MARCA
   ========================================================= */

.sys-cta__orb{
    position:absolute;

    display:block;

    border-radius:50%;
    filter:blur(5px);
}

.sys-cta__orb--orange{
    width:650px;
    height:650px;

    left:-290px;
    bottom:-340px;

    background:
        radial-gradient(
            circle,
            rgba(242,138,26,.14),
            rgba(242,138,26,.035) 45%,
            transparent 70%
        );

    animation:ctaOrangeMove 12s ease-in-out infinite;
}

.sys-cta__orb--green{
    width:600px;
    height:600px;

    right:-240px;
    top:-300px;

    background:
        radial-gradient(
            circle,
            rgba(47,155,87,.13),
            rgba(47,155,87,.025) 48%,
            transparent 70%
        );

    animation:ctaGreenMove 14s ease-in-out infinite;
}


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

.sys-cta__inner{
    position:relative;
    z-index:5;

    width:min(1180px,calc(100% - 48px));

    margin:0 auto;
}

.sys-cta__inner > *{
    max-width:700px;
}


/* EYEBROW */

.sys-cta .sys-section__eyebrow{
    color:var(--td-green);
}

.sys-cta .sys-section__eyebrow::before{
    background:var(--td-orange);
}


/* TITULO */

.sys-cta h2{
    margin:0;

    font-size:clamp(52px,6.2vw,86px);

    line-height:.93;

    letter-spacing:-.055em;

    color:#171814;
}

.sys-cta h2 span{
    display:block;

    color:var(--td-orange);
}


/* TEXTO */

.sys-cta__lead{
    margin:30px 0 0;

    max-width:620px;

    font-size:19px;
    line-height:1.7;

    color:#65665f;
}


/* =========================================================
   FRASE PRINCIPAL
   ========================================================= */

.sys-cta__statement{
    position:relative;

    margin-top:35px;

    padding:5px 0 5px 25px;

    border-left:3px solid var(--td-green);
}

.sys-cta__statement > span{
    display:block;

    margin-bottom:7px;

    font-size:12px;
    font-weight:700;

    text-transform:uppercase;
    letter-spacing:.1em;

    color:var(--td-green);
}

.sys-cta__statement strong{
    display:block;

    max-width:590px;

    font-size:22px;
    line-height:1.4;

    font-weight:650;

    color:#20211d;
}


/* =========================================================
   ACCIONES
   ========================================================= */

.sys-cta__actions{
    display:flex;

    align-items:center;

    gap:24px;

    margin-top:40px;
}

.sys-cta__button{
    display:inline-flex;

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

    gap:17px;

    min-height:58px;

    padding:0 28px;

    border-radius:8px;

    color:#fff;

    text-decoration:none;

    font-size:14px;
    font-weight:700;

    background:var(--td-orange);

    box-shadow:
        0 16px 35px rgba(242,138,26,.20);

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

.sys-cta__button:hover{
    transform:translateY(-4px);

    box-shadow:
        0 22px 45px rgba(242,138,26,.30);
}

.sys-cta__button span{
    font-size:19px;

    transition:transform .25s ease;
}

.sys-cta__button:hover span{
    transform:translateX(5px);
}


/* PHP + MYSQL */

.sys-cta__note{
    display:flex;

    align-items:center;

    gap:9px;

    font-size:11px;
    font-weight:600;

    color:#777870;
}

.sys-cta__note i{
    width:8px;
    height:8px;

    border-radius:50%;

    background:var(--td-green);

    box-shadow:
        0 0 0 5px rgba(47,155,87,.09),
        0 0 14px rgba(47,155,87,.28);

    animation:ctaStatus 2s ease-in-out infinite;
}


/* =========================================================
   VISUAL DERECHO
   ========================================================= */

.sys-cta__code{
    position:absolute;

    z-index:3;

    width:370px;

    right:max(6vw,40px);
    top:50%;

    transform:translateY(-50%);

    display:flex;

    flex-direction:column;

    gap:12px;
}


/* TARJETAS */

.sys-cta__code-line{
    display:flex;

    align-items:center;

    gap:12px;

    width:210px;

    padding:14px 17px;

    border:1px solid #e4e5df;

    border-radius:11px;

    font-size:11px;
    font-weight:600;

    color:#696a64;

    background:rgba(255,255,255,.82);

    backdrop-filter:blur(12px);

    box-shadow:
        0 12px 30px rgba(37,39,31,.07);
}

.sys-cta__code-line i{
    width:8px;
    height:8px;

    flex:0 0 auto;

    border-radius:50%;

    background:var(--td-orange);

    box-shadow:
        0 0 0 4px rgba(242,138,26,.08);
}

.sys-cta__code-line:nth-child(2){
    margin-left:45px;
}

.sys-cta__code-line:nth-child(2) i{
    background:var(--td-green);

    box-shadow:
        0 0 0 4px rgba(47,155,87,.08);
}

.sys-cta__code-line:nth-child(3){
    margin-left:15px;
}


/* MOVIMIENTO INDEPENDIENTE */

.sys-cta__code-line:nth-child(1){
    animation:ctaItemOne 5.5s ease-in-out infinite;
}

.sys-cta__code-line:nth-child(2){
    animation:ctaItemTwo 6.3s ease-in-out infinite;
}

.sys-cta__code-line:nth-child(3){
    animation:ctaItemThree 5.8s ease-in-out infinite;
}


/* =========================================================
   FLECHA
   ========================================================= */

.sys-cta__arrow{
    position:relative;

    width:60px;

    margin:8px 0 8px 115px;

    font-size:30px;

    color:var(--td-orange);

    animation:ctaArrow 2s ease-in-out infinite;
}


/* =========================================================
   RESULTADO
   ========================================================= */

.sys-cta__result{
    position:relative;

    display:flex;

    align-items:center;

    gap:15px;

    width:245px;

    margin-left:70px;

    padding:18px;

    border:1px solid rgba(47,155,87,.20);

    border-radius:15px;

    background:
        linear-gradient(
            135deg,
            rgba(47,155,87,.08),
            rgba(242,138,26,.055)
        ),
        #fff;

    box-shadow:
        0 22px 50px rgba(37,39,31,.10);

    animation:ctaResultFloat 6s ease-in-out infinite;
}

.sys-cta__result::after{
    content:"";

    position:absolute;

    left:18px;
    right:18px;
    bottom:0;

    height:2px;

    background:
        linear-gradient(
            90deg,
            var(--td-orange),
            var(--td-green)
        );
}

.sys-cta__result > span{
    width:48px;
    height:48px;

    display:grid;
    place-items:center;

    flex:0 0 auto;

    border-radius:12px;

    color:#fff;

    font-size:12px;
    font-weight:800;

    background:var(--td-orange);

    box-shadow:
        0 10px 22px rgba(242,138,26,.18);
}

.sys-cta__result small,
.sys-cta__result strong{
    display:block;
}

.sys-cta__result small{
    font-size:9px;

    text-transform:uppercase;
    letter-spacing:.1em;

    color:var(--td-green);

    font-weight:700;
}

.sys-cta__result strong{
    margin-top:4px;

    font-size:17px;

    color:#20211d;
}


/* =========================================================
   ANIMACIONES
   ========================================================= */

@keyframes ctaGridMove{

    from{
        background-position:0 0;
    }

    to{
        background-position:60px 60px;
    }

}

@keyframes ctaOrangeMove{

    0%,100%{
        transform:translate(0,0) scale(1);
    }

    50%{
        transform:translate(50px,-30px) scale(1.06);
    }

}

@keyframes ctaGreenMove{

    0%,100%{
        transform:translate(0,0);
    }

    50%{
        transform:translate(-40px,35px);
    }

}

@keyframes ctaStatus{

    0%,100%{
        opacity:.55;
        transform:scale(.9);
    }

    50%{
        opacity:1;
        transform:scale(1.18);
    }

}

@keyframes ctaItemOne{

    0%,100%{
        transform:translateX(0);
    }

    50%{
        transform:translateX(7px);
    }

}

@keyframes ctaItemTwo{

    0%,100%{
        transform:translateX(0);
    }

    50%{
        transform:translateX(-8px);
    }

}

@keyframes ctaItemThree{

    0%,100%{
        transform:translateX(0);
    }

    50%{
        transform:translateX(6px);
    }

}

@keyframes ctaArrow{

    0%,100%{
        transform:translateX(0);
        opacity:.55;
    }

    50%{
        transform:translateX(8px);
        opacity:1;
    }

}

@keyframes ctaResultFloat{

    0%,100%{
        transform:translateY(0);
    }

    50%{
        transform:translateY(-9px);
    }

}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media(max-width:1050px){

    .sys-cta__code{
        opacity:.48;
        right:-80px;
    }

}

@media(max-width:850px){

    .sys-cta{
        min-height:auto;
        padding:105px 0;
    }

    .sys-cta__code{
        display:none;
    }

    .sys-cta__inner > *{
        max-width:720px;
    }

}

@media(max-width:600px){

    .sys-cta{
        padding:90px 0;
    }

    .sys-cta__inner{
        width:min(100% - 30px,1180px);
    }

    .sys-cta__actions{
        flex-direction:column;
        align-items:flex-start;
    }

    .sys-cta__button{
        width:100%;
    }

}

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

    .sys-cta *,
    .sys-cta *::before,
    .sys-cta *::after{
        animation:none !important;
        transition:none !important;
    }

}