/* ============================================================
   PROJECTS PAGE - FINAL
   YA PÍDELO
============================================================ */


/* ============================================================
   HERO
============================================================ */

.projects-hero {
    position: relative;

    min-height: 100svh;

    display: flex;

    align-items: center;

    overflow: hidden;

    padding:
        clamp(145px, 14vw, 185px)
        0
        clamp(90px, 8vw, 120px);

    background:
        radial-gradient(
            circle at 80% 16%,
            rgba(99, 102, 241, 0.13),
            transparent 30%
        ),
        radial-gradient(
            circle at 8% 76%,
            rgba(6, 182, 212, 0.07),
            transparent 28%
        ),
        linear-gradient(
            180deg,
            #ffffff 0%,
            #f8faff 100%
        );
}


.projects-hero-grid {
    position: absolute;

    inset: 0;

    pointer-events: none;

    background-image:
        linear-gradient(
            rgba(79, 70, 229, 0.03) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(79, 70, 229, 0.03) 1px,
            transparent 1px
        );

    background-size: 50px 50px;

    -webkit-mask-image:
        linear-gradient(
            to bottom,
            #000,
            transparent 88%
        );

    mask-image:
        linear-gradient(
            to bottom,
            #000,
            transparent 88%
        );
}


.projects-hero-glow {
    position: absolute;

    border-radius: 50%;

    filter: blur(110px);

    pointer-events: none;
}


.projects-glow-one {
    width: 520px;
    height: 520px;

    left: -260px;
    top: 100px;

    background:
        rgba(99, 102, 241, 0.14);
}


.projects-glow-two {
    width: 620px;
    height: 620px;

    right: -260px;
    top: 10px;

    background:
        rgba(124, 58, 237, 0.12);
}


.projects-hero-container {
    position: relative;

    z-index: 2;

    display: grid;

    grid-template-columns:
        minmax(0, 0.9fr)
        minmax(500px, 1.1fr);

    align-items: center;

    gap:
        clamp(45px, 6vw, 95px);
}


/* ============================================================
   HERO CONTENT
============================================================ */

.projects-hero-content {
    position: relative;

    z-index: 3;
}


.projects-hero-title {
    max-width: 800px;

    font-family:
        "Manrope",
        sans-serif;

    font-size:
        clamp(3.25rem, 5.7vw, 5.9rem);

    line-height: 0.98;

    letter-spacing: -0.063em;

    font-weight: 800;

    margin-bottom: 28px;
}


.projects-hero-description {
    max-width: 690px;

    color:
        var(--color-text-soft);

    font-size:
        clamp(1.02rem, 1.35vw, 1.17rem);

    line-height: 1.8;

    margin-bottom: 30px;
}


.projects-hero-actions {
    display: flex;

    flex-wrap: wrap;

    gap: 12px;

    margin-bottom: 29px;
}


.projects-hero-points {
    display: flex;

    flex-wrap: wrap;

    gap:
        10px 18px;
}


.projects-hero-points > div {
    display: flex;

    align-items: center;

    gap: 7px;

    color:
        var(--color-text-soft);

    font-size: 0.76rem;

    font-weight: 600;
}


.projects-hero-points i {
    color:
        var(--color-success);
}


/* ============================================================
   HERO SYSTEM VISUAL
============================================================ */

.projects-system-visual {
    position: relative;

    min-height: 610px;

    width: 100%;
}


.projects-system-core {
    position: absolute;

    z-index: 8;

    left: 50%;
    top: 50%;

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

    width: 190px;
    height: 190px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    text-align: center;

    border-radius: 50%;

    color: white;

    background:
        linear-gradient(
            135deg,
            var(--color-primary),
            var(--color-secondary)
        );

    box-shadow:
        0 30px 75px
        rgba(79, 70, 229, 0.28);
}


.projects-system-core::before {
    content: "";

    position: absolute;

    inset: -18px;

    border-radius: 50%;

    border:
        1px solid
        rgba(79, 70, 229, 0.11);
}


.projects-system-core-icon {
    width: 48px;
    height: 48px;

    display: grid;

    place-items: center;

    margin-bottom: 10px;

    border-radius: 14px;

    background:
        rgba(255, 255, 255, 0.12);

    border:
        1px solid
        rgba(255, 255, 255, 0.15);

    font-size: 1.05rem;
}


.projects-system-core small {
    color:
        rgba(255, 255, 255, 0.58);

    font-size: 0.45rem;

    letter-spacing: 0.1em;

    margin-bottom: 3px;
}


.projects-system-core strong {
    font-family:
        "Manrope",
        sans-serif;

    font-size: 0.86rem;
}


/* ============================================================
   HERO NODES
============================================================ */

.projects-system-node {
    position: absolute;

    z-index: 9;

    min-width: 160px;

    display: flex;

    align-items: center;

    gap: 10px;

    padding:
        12px 14px;

    border-radius: 15px;

    border:
        1px solid
        rgba(15, 23, 42, 0.07);

    background:
        rgba(255, 255, 255, 0.94);

    backdrop-filter:
        blur(14px);

    box-shadow:
        0 18px 45px
        rgba(15, 23, 42, 0.12);

    color:
        var(--color-text);

    animation:
        project-node-float
        5s ease-in-out
        infinite;
}


.projects-system-node > i {
    width: 39px;
    height: 39px;

    display: grid;

    place-items: center;

    flex-shrink: 0;

    border-radius: 11px;

    color:
        var(--color-primary);

    background:
        rgba(79, 70, 229, 0.08);
}


.projects-system-node small {
    display: block;

    color: #969dad;

    font-size: 0.43rem;

    letter-spacing: 0.08em;

    margin-bottom: 2px;
}


.projects-system-node span {
    color:
        var(--color-text);

    font-size: 0.64rem;

    font-weight: 700;
}


.node-production {
    left: 1%;
    top: 15%;
}


.node-inventory {
    right: 0;
    top: 17%;

    animation-delay: -0.8s;
}


.node-users {
    left: 0;
    top: 48%;

    animation-delay: -1.6s;
}


.node-workflow {
    right: 0;
    top: 48%;

    animation-delay: -2.4s;
}


.node-reports {
    left: 8%;
    bottom: 11%;

    animation-delay: -3.2s;
}


.node-notifications {
    right: 5%;
    bottom: 10%;

    animation-delay: -4s;
}


@keyframes project-node-float {

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

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

}


/* ============================================================
   HERO LINES
============================================================ */

.projects-system-line {
    position: absolute;

    z-index: 2;

    left: 50%;
    top: 50%;

    height: 1px;

    transform-origin:
        left center;

    background:
        linear-gradient(
            90deg,
            rgba(79, 70, 229, 0.36),
            rgba(79, 70, 229, 0.04)
        );
}


.system-line-one {
    width: 43%;

    transform:
        rotate(-145deg);
}


.system-line-two {
    width: 43%;

    transform:
        rotate(-35deg);
}


.system-line-three {
    width: 44%;

    transform:
        rotate(180deg);
}


.system-line-four {
    width: 44%;

    transform:
        rotate(0deg);
}


.system-line-five {
    width: 43%;

    transform:
        rotate(145deg);
}


.system-line-six {
    width: 43%;

    transform:
        rotate(35deg);
}


/* ============================================================
   BUILD SECTION
============================================================ */

.projects-build-section {
    background:
        linear-gradient(
            180deg,
            #ffffff,
            #f8faff
        );
}


.projects-build-grid {
    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 15px;
}


/* ============================================================
   BUILD CARD
============================================================ */

.project-build-card {
    position: relative;

    overflow: hidden;

    min-height: 390px;

    display: flex;

    flex-direction: column;

    padding: 25px;

    border-radius: 22px;

    background: white;

    border:
        1px solid
        var(--color-border);

    box-shadow:
        0 10px 32px
        rgba(15, 23, 42, 0.045);

    transition:
        transform var(--transition),
        box-shadow var(--transition),
        border-color var(--transition);
}


.project-build-card:hover {
    transform:
        translateY(-7px);

    border-color:
        rgba(79, 70, 229, 0.18);

    box-shadow:
        0 25px 58px
        rgba(15, 23, 42, 0.09);
}


.project-build-card-large {
    grid-column:
        span 2;
}


.project-build-icon {
    width: 52px;
    height: 52px;

    display: grid;

    place-items: center;

    margin-bottom: 22px;

    border-radius: 14px;

    color:
        var(--color-primary);

    background:
        rgba(79, 70, 229, 0.08);
}


.project-build-overline {
    display: block;

    color:
        var(--color-primary);

    font-size: 0.48rem;

    font-weight: 800;

    letter-spacing: 0.1em;

    margin-bottom: 8px;
}


.project-build-card h3 {
    font-family:
        "Manrope",
        sans-serif;

    font-size: 1.32rem;

    line-height: 1.2;

    margin-bottom: 11px;
}


.project-build-card > p {
    max-width: 630px;

    color:
        var(--color-text-soft);

    font-size: 0.77rem;

    line-height: 1.72;

    margin-bottom: 17px;
}


.project-build-tags {
    display: flex;

    flex-wrap: wrap;

    gap: 6px;

    margin-bottom: 20px;
}


.project-build-tags span {
    padding:
        5px 8px;

    border-radius: 999px;

    color:
        var(--color-primary-dark);

    background:
        rgba(79, 70, 229, 0.07);

    font-size: 0.55rem;

    font-weight: 700;
}


/* ============================================================
   ADMIN MINI UI
============================================================ */

.project-build-mini-ui {
    margin-top: auto;
}


.admin-mini-ui {
    min-height: 170px;

    display: grid;

    grid-template-columns:
        50px 1fr;

    overflow: hidden;

    border-radius: 14px;

    background:
        #f7f8fc;

    border:
        1px solid
        rgba(15, 23, 42, 0.05);
}


.admin-mini-sidebar {
    padding: 12px 9px;

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 9px;

    background:
        #10162e;
}


.admin-mini-sidebar span {
    width: 27px;
    height: 27px;

    border-radius: 8px;

    background:
        rgba(255, 255, 255, 0.06);
}


.admin-mini-sidebar span.active {
    background:
        rgba(99, 102, 241, 0.35);
}


.admin-mini-content {
    padding: 14px;
}


.admin-mini-top {
    display: flex;

    justify-content: space-between;

    margin-bottom: 13px;
}


.admin-mini-top span:first-child {
    width: 33%;
    height: 8px;

    border-radius: 999px;

    background:
        #dfe2eb;
}


.admin-mini-top span:last-child {
    width: 18%;
    height: 8px;

    border-radius: 999px;

    background:
        #e8eaf1;
}


.admin-mini-cards {
    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 7px;

    margin-bottom: 11px;
}


.admin-mini-cards span {
    height: 48px;

    border-radius: 9px;

    background: white;

    border:
        1px solid
        #eaecf2;
}


.admin-mini-table {
    display: grid;

    gap: 5px;
}


.admin-mini-table span {
    height: 20px;

    border-radius: 6px;

    background: white;
}


/* ============================================================
   PROCESS MINI
============================================================ */

.project-process-mini {
    display: flex;

    align-items: center;

    margin-top: auto;

    padding-top: 20px;
}


.project-process-mini span {
    min-width: 68px;

    min-height: 34px;

    display: grid;

    place-items: center;

    padding:
        0 8px;

    border-radius: 9px;

    color: #8e95a5;

    background:
        #f2f3f7;

    font-size: 0.52rem;

    font-weight: 700;
}


.project-process-mini span.complete {
    color: #15803d;

    background:
        rgba(34, 197, 94, 0.09);
}


.project-process-mini span.active {
    color: white;

    background:
        linear-gradient(
            135deg,
            var(--color-primary),
            var(--color-secondary)
        );
}


.project-process-mini i {
    flex: 1;

    height: 2px;

    background:
        #e3e5ed;
}


/* ============================================================
   STOCK MINI
============================================================ */

.project-stock-mini {
    display: grid;

    grid-template-columns:
        1fr 1.2fr 1fr;

    gap: 8px;

    align-items: stretch;

    margin-top: auto;
}


.project-stock-mini > div {
    min-height: 90px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    text-align: center;

    border-radius: 12px;

    background:
        #f7f8fc;

    border:
        1px solid
        #eceef3;
}


.project-stock-mini i {
    color:
        var(--color-primary);

    margin-bottom: 7px;
}


.project-stock-mini span {
    color:
        var(--color-text-soft);

    font-size: 0.54rem;
}


.project-stock-mini strong {
    font-family:
        "Manrope",
        sans-serif;

    color:
        var(--color-primary);

    font-size: 1.05rem;
}


.project-stock-mini small {
    color:
        var(--color-text-soft);

    font-size: 0.45rem;
}


/* ============================================================
   WORKFLOW MINI
============================================================ */

.project-workflow-mini {
    display: flex;

    align-items: center;

    margin-top: auto;
}


.project-workflow-mini > div {
    min-width: 70px;

    min-height: 68px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap: 4px;

    padding:
        8px;

    border-radius: 11px;

    color: #9298a7;

    background:
        #f5f6fa;

    border:
        1px solid
        #eceef3;

    font-size: 0.50rem;

    font-weight: 700;
}


.project-workflow-mini > div span {
    width: 24px;
    height: 24px;

    display: grid;

    place-items: center;

    border-radius: 7px;

    background: white;

    font-size: 0.43rem;
}


.project-workflow-mini > div.complete {
    color: #15803d;

    background:
        rgba(34, 197, 94, 0.07);

    border-color:
        rgba(34, 197, 94, 0.12);
}


.project-workflow-mini > div.active {
    color: white;

    background:
        linear-gradient(
            135deg,
            var(--color-primary),
            var(--color-secondary)
        );
}


.project-workflow-mini > i {
    flex: 1;

    height: 2px;

    background:
        #e3e5ed;
}


/* ============================================================
   FORM MINI
============================================================ */

.project-form-mini {
    display: grid;

    gap: 8px;

    margin-top: auto;

    padding:
        14px;

    border-radius: 13px;

    background:
        #f7f8fc;

    border:
        1px solid
        #eceef3;
}


.project-form-mini > span {
    height: 34px;

    border-radius: 8px;

    background: white;

    border:
        1px solid
        #e7e9ef;
}


.project-form-mini > span.large {
    height: 58px;
}


.project-form-mini button {
    width: 90px;

    min-height: 34px;

    margin-left: auto;

    border-radius: 8px;

    color: white;

    background:
        linear-gradient(
            135deg,
            var(--color-primary),
            var(--color-secondary)
        );

    font-size: 0.50rem;

    font-weight: 700;
}


/* ============================================================
   DASHBOARD MINI
============================================================ */

.project-dashboard-mini {
    margin-top: auto;

    padding: 15px;

    border-radius: 14px;

    background:
        #f7f8fc;

    border:
        1px solid
        #eceef3;
}


.dashboard-mini-kpis {
    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 7px;

    margin-bottom: 13px;
}


.dashboard-mini-kpis span {
    height: 48px;

    border-radius: 9px;

    background: white;

    border:
        1px solid
        #eceef3;
}


.dashboard-mini-chart {
    height: 95px;

    display: flex;

    align-items: flex-end;

    gap: 8px;
}


.dashboard-mini-chart i {
    flex: 1;

    height:
        var(--project-bar);

    border-radius:
        6px 6px 2px 2px;

    background:
        linear-gradient(
            180deg,
            var(--color-primary),
            var(--color-secondary-light)
        );
}


/* ============================================================
   GROWTH SECTION
============================================================ */

.projects-growth-section {
    background: white;
}


.projects-growth-heading {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(300px, 0.6fr);

    gap: 70px;

    align-items: end;

    margin-bottom: 55px;
}


.projects-growth-heading h2 {
    font-family:
        "Manrope",
        sans-serif;

    font-size:
        clamp(2.45rem, 4.4vw, 4.6rem);

    line-height: 1.04;

    letter-spacing: -0.052em;
}


.projects-growth-heading > p {
    color:
        var(--color-text-soft);

    line-height: 1.8;
}


/* ============================================================
   GROWTH ROAD
============================================================ */

.projects-growth-road {
    display: grid;

    grid-template-columns:
        1fr auto
        1fr auto
        1fr auto
        1fr;

    align-items: center;

    gap: 10px;
}


.projects-growth-step {
    min-height: 300px;

    display: flex;

    flex-direction: column;

    padding: 23px;

    border-radius: 20px;

    background:
        linear-gradient(
            145deg,
            #ffffff,
            #f8f9ff
        );

    border:
        1px solid
        var(--color-border);

    box-shadow:
        0 12px 35px
        rgba(15, 23, 42, 0.045);
}


.growth-step-number {
    color:
        rgba(79, 70, 229, 0.24);

    font-family:
        "Manrope",
        sans-serif;

    font-size: 0.75rem;

    font-weight: 800;

    margin-bottom: 25px;
}


.growth-step-icon {
    width: 49px;
    height: 49px;

    display: grid;

    place-items: center;

    margin-bottom: 20px;

    border-radius: 14px;

    color:
        var(--color-primary);

    background:
        rgba(79, 70, 229, 0.08);
}


.projects-growth-step > span {
    color:
        var(--color-primary);

    font-size: 0.47rem;

    font-weight: 800;

    letter-spacing: 0.09em;

    margin-bottom: 8px;
}


.projects-growth-step h3 {
    font-family:
        "Manrope",
        sans-serif;

    font-size: 1.1rem;

    line-height: 1.25;

    margin-bottom: 10px;
}


.projects-growth-step p {
    color:
        var(--color-text-soft);

    font-size: 0.73rem;

    line-height: 1.7;
}


.growth-road-line {
    width: 36px;
    height: 2px;

    background:
        linear-gradient(
            90deg,
            rgba(79, 70, 229, 0.15),
            rgba(79, 70, 229, 0.5)
        );
}


/* ============================================================
   CONNECT SECTION
============================================================ */

.projects-connect-section {
    background:
        linear-gradient(
            180deg,
            #ffffff,
            #f8faff
        );
}


.projects-connect-card {
    display: grid;

    grid-template-columns:
        1fr 110px 1fr;

    overflow: hidden;

    border-radius: 30px;

    border:
        1px solid
        var(--color-border);

    background: white;

    box-shadow:
        0 25px 70px
        rgba(15, 23, 42, 0.07);
}


/* ============================================================
   CONNECT BEFORE
============================================================ */

.projects-connect-before,
.projects-connect-after {
    padding:
        clamp(32px, 5vw, 55px);
}


.projects-connect-before {
    background:
        linear-gradient(
            145deg,
            #fafbfc,
            #f4f5f8
        );
}


.projects-connect-after {
    background:
        linear-gradient(
            145deg,
            #f5f5ff,
            #eef9ff
        );
}


.projects-connect-label {
    display: block;

    width: fit-content;

    padding:
        6px 10px;

    margin-bottom: 15px;

    border-radius: 999px;

    color:
        var(--color-primary);

    background:
        rgba(79, 70, 229, 0.08);

    font-size: 0.56rem;

    font-weight: 800;

    letter-spacing: 0.1em;
}


.projects-connect-before h3,
.projects-connect-after h3 {
    font-family:
        "Manrope",
        sans-serif;

    font-size:
        clamp(1.75rem, 2.8vw, 2.7rem);

    line-height: 1.1;

    letter-spacing: -0.04em;

    margin-bottom: 25px;
}


.connect-source-grid {
    display: grid;

    grid-template-columns:
        repeat(2, 1fr);

    gap: 9px;
}


.connect-source-grid > div {
    min-height: 58px;

    display: flex;

    align-items: center;

    gap: 10px;

    padding:
        11px 13px;

    border-radius: 11px;

    color:
        var(--color-text-soft);

    background: white;

    border:
        1px solid
        rgba(15, 23, 42, 0.055);

    font-size: 0.70rem;

    font-weight: 600;
}


.connect-source-grid i {
    width: 29px;
    height: 29px;

    display: grid;

    place-items: center;

    border-radius: 8px;

    color:
        var(--color-primary);

    background:
        rgba(79, 70, 229, 0.07);
}


/* ============================================================
   CONNECT CENTER
============================================================ */

.projects-connect-center {
    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    gap: 13px;

    color: white;

    background:
        linear-gradient(
            180deg,
            var(--color-primary),
            var(--color-secondary)
        );
}


.projects-connect-center > div {
    width: 45px;
    height: 45px;

    display: grid;

    place-items: center;

    border-radius: 50%;

    background:
        rgba(255, 255, 255, 0.13);
}


.projects-connect-center span {
    writing-mode:
        vertical-rl;

    transform:
        rotate(180deg);

    font-size: 0.57rem;

    font-weight: 800;

    letter-spacing: 0.11em;
}


/* ============================================================
   CONNECT SYSTEM DEMO
============================================================ */

.connect-system-demo {
    min-height: 260px;

    display: grid;

    grid-template-columns:
        55px 1fr;

    overflow: hidden;

    border-radius: 16px;

    background: white;

    border:
        1px solid
        rgba(15, 23, 42, 0.06);

    box-shadow:
        0 15px 38px
        rgba(15, 23, 42, 0.06);
}


.connect-system-sidebar {
    padding: 13px 8px;

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 10px;

    background:
        #11172e;
}


.connect-system-sidebar span {
    width: 32px;
    height: 32px;

    display: grid;

    place-items: center;

    border-radius: 9px;

    color:
        rgba(255, 255, 255, 0.42);
}


.connect-system-sidebar span.active {
    color: white;

    background:
        rgba(99, 102, 241, 0.28);
}


.connect-system-content {
    padding: 16px;
}


.connect-system-header {
    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-bottom: 14px;
}


.connect-system-header span {
    font-size: 0.66rem;

    font-weight: 750;
}


.connect-system-header small {
    color: #22a45a;

    font-size: 0.48rem;
}


.connect-system-kpis {
    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 7px;

    margin-bottom: 13px;
}


.connect-system-kpis div {
    height: 52px;

    border-radius: 9px;

    background:
        #f3f4f8;
}


.connect-system-table {
    display: grid;

    gap: 6px;
}


.connect-system-table span {
    height: 24px;

    border-radius: 7px;

    background:
        #f4f5f8;
}


/* ============================================================
   TECH SECTION
============================================================ */

.projects-tech-section {
    background: white;
}


.projects-tech-card {
    display: grid;

    grid-template-columns:
        minmax(280px, 0.8fr)
        minmax(0, 1.2fr);

    gap:
        clamp(40px, 6vw, 75px);

    align-items: center;

    padding:
        clamp(38px, 5vw, 62px);

    border-radius: 31px;

    border:
        1px solid
        rgba(79, 70, 229, 0.1);

    background:
        radial-gradient(
            circle at 88% 12%,
            rgba(99, 102, 241, 0.08),
            transparent 28%
        ),
        linear-gradient(
            145deg,
            #ffffff,
            #f7f8ff
        );

    box-shadow:
        0 25px 70px
        rgba(15, 23, 42, 0.07);
}


.projects-tech-copy h2 {
    font-family:
        "Manrope",
        sans-serif;

    font-size:
        clamp(2.2rem, 3.8vw, 4rem);

    line-height: 1.05;

    letter-spacing: -0.048em;

    margin-bottom: 18px;
}


.projects-tech-copy > p {
    color:
        var(--color-text-soft);

    line-height: 1.78;
}


.projects-tech-grid {
    display: grid;

    grid-template-columns:
        repeat(2, 1fr);

    gap: 10px;
}


.projects-tech-grid > div {
    min-height: 102px;

    display: flex;

    align-items: center;

    gap: 12px;

    padding:
        15px;

    border-radius: 15px;

    background: white;

    border:
        1px solid
        rgba(15, 23, 42, 0.06);

    box-shadow:
        0 8px 24px
        rgba(15, 23, 42, 0.04);
}


.projects-tech-grid > div > i {
    width: 44px;
    height: 44px;

    display: grid;

    place-items: center;

    flex-shrink: 0;

    border-radius: 12px;

    color:
        var(--color-primary);

    background:
        rgba(79, 70, 229, 0.08);
}


.projects-tech-grid strong {
    display: block;

    font-size: 0.70rem;

    margin-bottom: 3px;
}


.projects-tech-grid small {
    display: block;

    color:
        var(--color-text-soft);

    font-size: 0.56rem;

    line-height: 1.45;
}


/* ============================================================
   PROCESS SECTION
============================================================ */

.projects-process-section {
    position: relative;

    overflow: hidden;

    color: white;

    background:
        radial-gradient(
            circle at 84% 12%,
            rgba(99, 102, 241, 0.23),
            transparent 28%
        ),
        radial-gradient(
            circle at 5% 90%,
            rgba(6, 182, 212, 0.08),
            transparent 25%
        ),
        linear-gradient(
            135deg,
            #0b1127,
            #151c3d
        );
}


.projects-process-heading {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(300px, 0.58fr);

    gap:
        clamp(40px, 7vw, 90px);

    align-items: end;

    margin-bottom: 50px;
}


.projects-process-heading h2 {
    font-family:
        "Manrope",
        sans-serif;

    font-size:
        clamp(2.6rem, 4.5vw, 4.7rem);

    line-height: 1.03;

    letter-spacing: -0.052em;
}


.projects-process-heading h2 span {
    display: block;

    color: #aeb6ff;
}


.projects-process-heading > p {
    color:
        rgba(255, 255, 255, 0.61);

    line-height: 1.8;
}


/* ============================================================
   PROCESS GRID
============================================================ */

.projects-process-grid {
    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 11px;
}


.project-process-step {
    min-height: 235px;

    display: flex;

    flex-direction: column;

    padding: 21px;

    border-radius: 18px;

    background:
        rgba(255, 255, 255, 0.055);

    border:
        1px solid
        rgba(255, 255, 255, 0.085);

    transition:
        transform var(--transition),
        background var(--transition);
}


.project-process-step:hover {
    transform:
        translateY(-6px);

    background:
        rgba(255, 255, 255, 0.08);
}


.project-process-step > span {
    color:
        rgba(255, 255, 255, 0.30);

    font-size: 0.56rem;

    font-weight: 800;

    letter-spacing: 0.1em;

    margin-bottom: 22px;
}


.project-process-step > i {
    width: 46px;
    height: 46px;

    display: grid;

    place-items: center;

    margin-bottom: 18px;

    border-radius: 13px;

    color: #c2c8ff;

    background:
        rgba(99, 102, 241, 0.14);
}


.project-process-step h3 {
    font-family:
        "Manrope",
        sans-serif;

    font-size: 1.04rem;

    margin-bottom: 9px;
}


.project-process-step p {
    color:
        rgba(255, 255, 255, 0.58);

    font-size: 0.71rem;

    line-height: 1.66;
}


/* ============================================================
   PLATFORM QUESTION
============================================================ */

.projects-platform-question {
    background: white;
}


.projects-platform-question-card {
    display: grid;

    grid-template-columns:
        auto 1fr auto;

    align-items: center;

    gap: 27px;

    padding:
        clamp(30px, 4vw, 44px);

    border-radius: 25px;

    border:
        1px solid
        rgba(79, 70, 229, 0.10);

    background:
        linear-gradient(
            145deg,
            #f8f9ff,
            #ffffff
        );

    box-shadow:
        0 22px 60px
        rgba(15, 23, 42, 0.06);
}


.projects-platform-question-icon {
    width: 68px;
    height: 68px;

    display: grid;

    place-items: center;

    border-radius: 19px;

    color:
        var(--color-primary);

    background:
        rgba(79, 70, 229, 0.08);

    font-size: 1.2rem;
}


.projects-platform-question-card > div:nth-child(2) > span {
    display: block;

    color:
        var(--color-primary);

    font-size: 0.48rem;

    font-weight: 800;

    letter-spacing: 0.1em;

    margin-bottom: 7px;
}


.projects-platform-question-card h2 {
    font-family:
        "Manrope",
        sans-serif;

    font-size:
        clamp(1.7rem, 2.8vw, 2.8rem);

    line-height: 1.08;

    letter-spacing: -0.04em;

    margin-bottom: 9px;
}


.projects-platform-question-card h2 strong {
    display: inline;
}


.projects-platform-question-card p {
    max-width: 760px;

    color:
        var(--color-text-soft);

    font-size: 0.77rem;

    line-height: 1.7;
}


/* ============================================================
   SPACING
============================================================ */

.projects-build-section,
.projects-growth-section,
.projects-connect-section,
.projects-tech-section,
.projects-process-section,
.projects-platform-question {
    padding-top:
        clamp(65px, 7vw, 100px);

    padding-bottom:
        clamp(65px, 7vw, 100px);
}


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

@media (max-width: 1250px) {

    .projects-hero-container {
        grid-template-columns:
            minmax(0, 0.92fr)
            minmax(450px, 1.08fr);

        gap: 45px;
    }


    .projects-system-visual {
        min-height: 560px;
    }


    .projects-build-grid {
        grid-template-columns:
            repeat(2, 1fr);
    }


    .project-build-card-large {
        grid-column:
            span 2;
    }


    .projects-growth-road {
        grid-template-columns:
            repeat(2, 1fr);

        gap: 15px;
    }


    .growth-road-line {
        display: none;
    }

}


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

@media (max-width: 1050px) {

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


    .projects-hero-container {
        grid-template-columns:
            1fr;

        gap: 65px;
    }


    .projects-hero-content {
        max-width: 820px;
    }


    .projects-system-visual {
        width:
            min(100%, 720px);

        min-height: 590px;

        margin-inline: auto;
    }


    .projects-growth-heading {
        grid-template-columns:
            1fr;

        gap: 20px;
    }


    .projects-connect-card {
        grid-template-columns:
            1fr;
    }


    .projects-connect-center {
        min-height: 88px;

        flex-direction: row;
    }


    .projects-connect-center span {
        writing-mode: initial;

        transform: none;
    }


    .projects-connect-center > div i {
        transform:
            rotate(90deg);
    }


    .projects-tech-card {
        grid-template-columns:
            1fr;

        gap: 35px;
    }


    .projects-process-heading {
        grid-template-columns:
            1fr;

        gap: 20px;
    }


    .projects-platform-question-card {
        grid-template-columns:
            auto 1fr;
    }


    .projects-platform-question-card > a {
        grid-column:
            1 / -1;

        margin-left: 95px;
    }

}


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

@media (max-width: 800px) {

    .projects-hero {
        padding:
            135px 0 85px;
    }


    .projects-build-grid {
        grid-template-columns:
            1fr;
    }


    .project-build-card-large {
        grid-column: auto;
    }


    .projects-growth-road {
        grid-template-columns:
            1fr 1fr;
    }


    .projects-process-grid {
        grid-template-columns:
            repeat(2, 1fr);
    }


    .projects-tech-grid {
        grid-template-columns:
            1fr;
    }

}


/* ============================================================
   MOBILE
============================================================ */

@media (max-width: 650px) {

    .projects-hero-title {
        font-size:
            clamp(2.65rem, 12vw, 4rem);
    }


    .projects-hero-actions {
        flex-direction: column;
    }


    .projects-hero-actions .button {
        width: 100%;
    }


    .projects-hero-points {
        display: grid;
    }


    .projects-system-visual {
        min-height: 490px;
    }


    .projects-system-core {
        width: 145px;
        height: 145px;
    }


    .projects-system-node {
        min-width: 120px;

        padding:
            9px 10px;

        font-size: 0.54rem;
    }


    .projects-system-node > i {
        width: 31px;
        height: 31px;
    }


    .node-production {
        left: 0;
        top: 11%;
    }


    .node-inventory {
        right: 0;
        top: 12%;
    }


    .node-users {
        left: 0;
        top: 44%;
    }


    .node-workflow {
        right: 0;
        top: 44%;
    }


    .node-reports {
        left: 2%;
        bottom: 8%;
    }


    .node-notifications {
        right: 0;
        bottom: 7%;
    }


    .project-build-card {
        min-height: auto;

        padding: 22px 20px;
    }


    .projects-growth-road {
        grid-template-columns:
            1fr;
    }


    .projects-growth-step {
        min-height: auto;
    }


    .connect-source-grid {
        grid-template-columns:
            1fr;
    }


    .projects-process-grid {
        grid-template-columns:
            1fr;
    }


    .projects-platform-question-card {
        grid-template-columns:
            1fr;

        gap: 20px;
    }


    .projects-platform-question-card > a {
        grid-column: auto;

        margin-left: 0;

        width: 100%;
    }

}


/* ============================================================
   MOBILE SMALL
============================================================ */

@media (max-width: 575px) {

    .projects-hero {
        padding:
            110px 0 70px;
    }


    .projects-hero-description {
        font-size: 0.95rem;
    }


    .projects-system-visual {
        min-height: 430px;
    }


    .projects-system-core {
        width: 125px;
        height: 125px;
    }


    .projects-system-core-icon {
        width: 40px;
        height: 40px;
    }


    .projects-system-node {
        min-width: 100px;

        gap: 6px;

        font-size: 0.49rem;
    }


    .projects-system-node span {
        font-size: 0.55rem;
    }


    .projects-system-node small {
        font-size: 0.38rem;
    }


    .project-process-mini,
    .project-workflow-mini {
        overflow-x: auto;
    }


    .project-stock-mini {
        grid-template-columns:
            1fr;
    }


    .projects-connect-before,
    .projects-connect-after {
        padding:
            28px 20px;
    }


    .connect-system-demo {
        min-height: 235px;
    }


    .projects-tech-card {
        padding:
            29px 20px;

        border-radius: 24px;
    }


    .projects-platform-question-card {
        padding:
            28px 20px;

        border-radius: 22px;
    }


    .projects-build-section,
    .projects-growth-section,
    .projects-connect-section,
    .projects-tech-section,
    .projects-process-section,
    .projects-platform-question {
        padding-top: 50px;

        padding-bottom: 55px;
    }

}


/* ============================================================
   VERY SMALL
============================================================ */

@media (max-width: 390px) {

    .projects-system-visual {
        min-height: 380px;
    }


    .projects-system-node span {
        display: none;
    }


    .projects-system-node {
        min-width: auto;

        padding: 8px;
    }


    .projects-system-node > i {
        width: 35px;
        height: 35px;
    }


    .projects-tech-grid > div {
        min-height: 90px;
    }

}


/* ============================================================
   LARGE DESKTOP
============================================================ */

@media (min-width: 1600px) {

    .projects-hero-container {
        gap: 105px;
    }


    .projects-system-visual {
        min-height: 650px;
    }

}


/* ============================================================
   REDUCED MOTION
============================================================ */

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

    .projects-system-node {
        animation: none !important;
    }


    .project-build-card,
    .project-process-step {
        transition: none !important;
    }

} */


/* ============================================================
   PROJECTS EXPERIENCE V2
   Blueprint + capacidades con identidad propia
============================================================ */

/* ------------------------------------------------------------
   HERO BLUEPRINT
------------------------------------------------------------ */

.projects-blueprint-visual {
    min-height: 590px;
    perspective: 1200px;
}

.project-blueprint-shell {
    --blueprint-x: 0deg;
    --blueprint-y: 0deg;

    width: min(100%, 690px);
    overflow: hidden;
    border-radius: 28px;
    border: 1px solid rgba(79, 70, 229, 0.12);
    background: #ffffff;
    box-shadow:
        0 38px 95px rgba(15, 23, 42, 0.16),
        0 10px 28px rgba(79, 70, 229, 0.07);
    transform:
        rotateX(var(--blueprint-y))
        rotateY(var(--blueprint-x));
    transform-style: preserve-3d;
    transition:
        transform 0.18s ease,
        box-shadow 0.35s ease;
}

.project-blueprint-shell:hover {
    box-shadow:
        0 45px 110px rgba(15, 23, 42, 0.19),
        0 14px 35px rgba(79, 70, 229, 0.10);
}

.project-blueprint-topbar {
    min-height: 52px;
    display: grid;
    grid-template-columns:
        auto 1fr auto;
    gap: 14px;
    align-items: center;
    padding: 0 17px;
    border-bottom:
        1px solid
        rgba(15, 23, 42, 0.07);
    background:
        linear-gradient(
            180deg,
            #fbfcff,
            #f7f8fc
        );
}

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

.project-blueprint-dots span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #cbd5e1;
}

.project-blueprint-dots span:first-child {
    background: #fca5a5;
}

.project-blueprint-dots span:nth-child(2) {
    background: #fde68a;
}

.project-blueprint-dots span:nth-child(3) {
    background: #86efac;
}

.project-blueprint-title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    color: #475569;
    font-size: 0.58rem;
    font-weight: 750;
}

.project-blueprint-title i {
    color: var(--color-primary);
}

.project-blueprint-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 9px;
    border-radius: 999px;
    color: #4f46e5;
    background: #eef2ff;
    font-size: 0.44rem;
    font-weight: 800;
}

.project-blueprint-status i {
    font-size: 0.34rem;
    animation:
        project-status-pulse
        1.5s ease-in-out
        infinite;
}

.project-blueprint-body {
    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        170px;
    min-height: 440px;
}

.project-blueprint-canvas {
    position: relative;
    min-height: 440px;
    overflow: hidden;
    background:
        radial-gradient(
            circle at 50% 50%,
            rgba(79, 70, 229, 0.05),
            transparent 42%
        ),
        #fbfcff;
}

.blueprint-grid-lines {
    position: absolute;
    inset: 0;
    opacity: 0.65;
    background-image:
        linear-gradient(
            rgba(79, 70, 229, 0.055) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(79, 70, 229, 0.055) 1px,
            transparent 1px
        );
    background-size:
        28px 28px;
}

.blueprint-connectors {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.blueprint-connectors path {
    fill: none;
    stroke:
        rgba(79, 70, 229, 0.30);
    stroke-width: 2;
    stroke-dasharray: 7 9;
    animation:
        project-blueprint-dash
        7s linear
        infinite;
}

.blueprint-core {
    position: absolute;
    z-index: 4;
    left: 50%;
    top: 50%;
    width: 150px;
    min-height: 135px;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 5px;
    padding: 15px;
    transform:
        translate(-50%, -50%);
    text-align: center;
    border-radius: 24px;
    color: #ffffff;
    background:
        radial-gradient(
            circle at 75% 15%,
            rgba(255,255,255,.20),
            transparent 30%
        ),
        linear-gradient(
            145deg,
            #312e81,
            #4f46e5
        );
    box-shadow:
        0 22px 50px
        rgba(79, 70, 229, 0.28);
    animation:
        project-core-float
        4s ease-in-out
        infinite;
}

.blueprint-core-icon {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    margin-bottom: 3px;
    border-radius: 13px;
    background:
        rgba(255, 255, 255, 0.12);
}

.blueprint-core small {
    color:
        rgba(255,255,255,.48);
    font-size: 0.35rem;
    font-weight: 900;
    letter-spacing: 0.10em;
}

.blueprint-core strong {
    font-size: 0.72rem;
}

.blueprint-core > span:last-child {
    color:
        rgba(255,255,255,.58);
    font-size: 0.42rem;
}

.blueprint-module {
    position: absolute;
    z-index: 3;
    min-width: 123px;
    display: grid;
    grid-template-columns:
        auto 1fr auto;
    gap: 8px;
    align-items: center;
    padding: 10px;
    border-radius: 14px;
    border:
        1px solid
        rgba(79, 70, 229, 0.12);
    background:
        rgba(255,255,255,.92);
    backdrop-filter:
        blur(10px);
    box-shadow:
        0 12px 32px
        rgba(15,23,42,.08);
    animation:
        project-module-float
        4.5s ease-in-out
        infinite;
}

.blueprint-module > i {
    width: 31px;
    height: 31px;
    display: grid;
    place-items: center;
    grid-row: 1 / 3;
    border-radius: 9px;
    color: var(--color-primary);
    background: #eef2ff;
}

.blueprint-module span {
    display: grid;
    color: #111827;
    font-size: 0.46rem;
    font-weight: 800;
}

.blueprint-module small {
    margin-bottom: 2px;
    color: #94a3b8;
    font-size: 0.29rem;
    letter-spacing: 0.08em;
}

.blueprint-module b {
    color: #c7d2fe;
    font-size: 0.42rem;
}

.blueprint-module-orders {
    left: 18px;
    top: 48px;
}

.blueprint-module-users {
    right: 17px;
    top: 44px;
    animation-delay: 0.5s;
}

.blueprint-module-flow {
    left: 18px;
    bottom: 50px;
    animation-delay: 1s;
}

.blueprint-module-data {
    right: 17px;
    bottom: 48px;
    animation-delay: 1.5s;
}

.blueprint-data-packet {
    position: absolute;
    z-index: 5;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #6366f1;
    box-shadow:
        0 0 0 4px
        rgba(99,102,241,.12);
}

.packet-one {
    left: 28%;
    top: 36%;
    animation:
        project-packet-one
        3.6s linear
        infinite;
}

.packet-two {
    right: 28%;
    top: 34%;
    animation:
        project-packet-two
        4s linear
        infinite;
}

.packet-three {
    left: 28%;
    bottom: 34%;
    animation:
        project-packet-three
        4.2s linear
        infinite;
}

.packet-four {
    right: 28%;
    bottom: 34%;
    animation:
        project-packet-four
        3.8s linear
        infinite;
}

.project-blueprint-inspector {
    display: grid;
    align-content: start;
    gap: 10px;
    padding: 20px 14px;
    border-left:
        1px solid
        rgba(15, 23, 42, 0.07);
    background:
        linear-gradient(
            180deg,
            #f8f9fd,
            #f4f6fb
        );
}

.blueprint-inspector-label {
    margin-bottom: 4px;
    color: #94a3b8;
    font-size: 0.34rem;
    font-weight: 900;
    letter-spacing: 0.10em;
}

.blueprint-inspector-row {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    align-items: center;
    padding: 10px;
    border-radius: 11px;
    background: #ffffff;
    border:
        1px solid
        #e8ebf2;
}

.blueprint-inspector-row span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #64748b;
    font-size: 0.38rem;
}

.blueprint-inspector-row span i {
    color: var(--color-primary);
}

.blueprint-inspector-row strong {
    color: #111827;
    font-size: 0.42rem;
}

.blueprint-inspector-row strong.is-ready {
    color: #16a34a;
}

.blueprint-progress {
    margin-top: 5px;
    padding: 10px;
    border-radius: 11px;
    background: #ffffff;
    border:
        1px solid
        #e8ebf2;
}

.blueprint-progress > div {
    display: flex;
    justify-content: space-between;
    margin-bottom: 7px;
    color: #64748b;
    font-size: 0.35rem;
}

.blueprint-progress > div b {
    color: var(--color-primary);
}

.blueprint-progress > i {
    display: block;
    height: 5px;
    overflow: hidden;
    border-radius: 999px;
    background: #e8eaf7;
}

.blueprint-progress > i span {
    display: block;
    width: 85%;
    height: 100%;
    border-radius: inherit;
    background:
        linear-gradient(
            90deg,
            var(--color-primary),
            var(--color-secondary)
        );
    animation:
        project-progress-breathe
        3s ease-in-out
        infinite alternate;
}

.blueprint-inspector-note {
    display: grid;
    grid-template-columns:
        auto 1fr;
    gap: 7px;
    align-items: start;
    margin-top: 4px;
    padding: 10px;
    border-radius: 11px;
    color: #64748b;
    background: #eef2ff;
    font-size: 0.35rem;
    line-height: 1.5;
}

.blueprint-inspector-note i {
    color: var(--color-primary);
}

.project-blueprint-floating-card {
    position: absolute;
    z-index: 10;
    right: 0;
    bottom: 34px;
    min-width: 180px;
    display: grid;
    grid-template-columns:
        auto 1fr;
    gap: 9px;
    align-items: center;
    padding: 12px;
    border-radius: 14px;
    border:
        1px solid
        rgba(255,255,255,.8);
    background:
        rgba(255,255,255,.90);
    backdrop-filter:
        blur(14px);
    box-shadow:
        0 18px 45px
        rgba(15,23,42,.15);
    animation:
        project-floating-card
        4s ease-in-out
        infinite;
}

.project-blueprint-floating-card > i {
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    color: #16a34a;
    background: #dcfce7;
}

.project-blueprint-floating-card span {
    display: grid;
    color: #111827;
    font-size: 0.48rem;
    font-weight: 800;
}

.project-blueprint-floating-card small {
    margin-bottom: 2px;
    color: #94a3b8;
    font-size: 0.30rem;
}

/* ------------------------------------------------------------
   CAPABILITIES / INTERACTIVE CARDS
------------------------------------------------------------ */

.project-build-card {
    cursor: pointer;
}

.project-build-card.is-project-focused {
    transform:
        translateY(-9px)
        scale(1.008);
    border-color:
        rgba(79, 70, 229, 0.24);
    box-shadow:
        0 30px 75px
        rgba(15, 23, 42, 0.12);
}

.project-build-card:focus-visible {
    outline:
        3px solid
        rgba(79, 70, 229, 0.20);
    outline-offset: 4px;
}

/* ADMIN COMMAND CENTER */

.project-command-center {
    min-height: 250px;
    display: grid;
    grid-template-columns:
        48px 1fr;
    overflow: hidden;
    border-radius: 17px;
    background: #f8fafc;
    border:
        1px solid
        #e7eaf0;
}

.command-center-sidebar {
    display: grid;
    align-content: start;
    gap: 8px;
    padding: 12px 8px;
    color: #64748b;
    background: #11182d;
}

.command-center-sidebar span {
    height: 32px;
    display: grid;
    place-items: center;
    border-radius: 9px;
}

.command-center-sidebar span.active {
    color: #ffffff;
    background:
        linear-gradient(
            135deg,
            #4f46e5,
            #7c3aed
        );
}

.command-center-main {
    min-width: 0;
    padding: 13px;
}

.command-center-header {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    align-items: center;
    margin-bottom: 10px;
}

.command-center-header small,
.command-center-header strong {
    display: block;
}

.command-center-header small {
    color: #94a3b8;
    font-size: 0.28rem;
    font-weight: 900;
}

.command-center-header strong {
    margin-top: 2px;
    color: #111827;
    font-size: 0.50rem;
}

.command-center-header > span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: #16a34a;
    font-size: 0.29rem;
    font-weight: 800;
}

.command-center-header > span i {
    font-size: 0.25rem;
    animation:
        project-status-pulse
        1.5s ease-in-out
        infinite;
}

.command-center-kpis {
    display: grid;
    grid-template-columns:
        repeat(3, 1fr);
    gap: 6px;
}

.command-center-kpis > div {
    padding: 9px;
    border-radius: 9px;
    background: #ffffff;
    border:
        1px solid
        #edf0f5;
}

.command-center-kpis small,
.command-center-kpis strong,
.command-center-kpis span {
    display: block;
}

.command-center-kpis small {
    color: #94a3b8;
    font-size: 0.25rem;
    font-weight: 900;
}

.command-center-kpis strong {
    margin: 3px 0;
    color: #111827;
    font-size: 0.62rem;
}

.command-center-kpis span {
    color: #16a34a;
    font-size: 0.26rem;
}

.command-center-feed {
    display: grid;
    gap: 5px;
    margin-top: 9px;
}

.command-center-feed > div {
    display: grid;
    grid-template-columns:
        auto 1fr auto;
    gap: 7px;
    align-items: center;
    padding: 8px;
    border-radius: 9px;
    background: #ffffff;
}

.command-center-feed > div.is-new {
    box-shadow:
        inset 3px 0
        var(--color-primary);
}

.command-center-feed > div > span {
    width: 27px;
    height: 27px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    color: var(--color-primary);
    background: #eef2ff;
}

.command-center-feed strong,
.command-center-feed small {
    display: block;
}

.command-center-feed strong {
    color: #111827;
    font-size: 0.32rem;
}

.command-center-feed small {
    margin-top: 2px;
    color: #94a3b8;
    font-size: 0.25rem;
}

.command-center-feed b {
    color: #94a3b8;
    font-size: 0.24rem;
}

/* PRODUCTION TWIN */

.project-production-twin {
    min-height: 180px;
    padding: 13px;
    border-radius: 16px;
    color: #ffffff;
    background:
        radial-gradient(
            circle at 85% 10%,
            rgba(59,130,246,.20),
            transparent 28%
        ),
        #10182d;
}

.production-twin-head {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    align-items: center;
}

.production-twin-head span {
    color: #94a3b8;
    font-size: 0.28rem;
    font-weight: 900;
}

.production-twin-head b {
    color: #93c5fd;
    font-size: 0.42rem;
}

.production-twin-track {
    display: grid;
    grid-template-columns:
        1fr 20px
        1fr 20px
        1fr;
    gap: 4px;
    align-items: center;
    margin-top: 16px;
}

.production-station {
    min-height: 78px;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 4px;
    text-align: center;
    border-radius: 11px;
    color: #94a3b8;
    background:
        rgba(255,255,255,.045);
    border:
        1px solid
        rgba(255,255,255,.07);
}

.production-station > span {
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    background:
        rgba(148,163,184,.10);
}

.production-station strong {
    color: #cbd5e1;
    font-size: 0.32rem;
}

.production-station small {
    font-size: 0.25rem;
}

.production-station.is-complete > span {
    color: #86efac;
    background:
        rgba(34,197,94,.10);
}

.production-station.is-active {
    border-color:
        rgba(59,130,246,.28);
    background:
        rgba(59,130,246,.08);
}

.production-station.is-active > span {
    color: #ffffff;
    background:
        linear-gradient(
            135deg,
            #4f46e5,
            #0ea5e9
        );
    animation:
        project-active-station
        1.7s ease-in-out
        infinite;
}

.production-flow-line {
    height: 2px;
    overflow: hidden;
    background:
        rgba(148,163,184,.18);
}

.production-flow-line::after {
    content: "";
    display: block;
    width: 55%;
    height: 100%;
    background: #64748b;
}

.production-flow-line.is-complete::after {
    width: 100%;
    background: #22c55e;
}

.production-twin-progress {
    margin-top: 12px;
}

.production-twin-progress > i {
    display: block;
    height: 4px;
    overflow: hidden;
    border-radius: 999px;
    background:
        rgba(255,255,255,.07);
}

.production-twin-progress > i span {
    display: block;
    width: 68%;
    height: 100%;
    background:
        linear-gradient(
            90deg,
            #4f46e5,
            #38bdf8
        );
    animation:
        production-progress
        3s ease-in-out
        infinite alternate;
}

.production-twin-progress small {
    display: block;
    margin-top: 6px;
    color: #64748b;
    font-size: 0.25rem;
}

/* WAREHOUSE MAP */

.project-warehouse-map {
    min-height: 180px;
    padding: 12px;
    border-radius: 16px;
    background:
        linear-gradient(
            145deg,
            #f8fafc,
            #eef2ff
        );
    border:
        1px solid
        #e5e7eb;
}

.warehouse-map-head {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    align-items: center;
}

.warehouse-map-head > span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: #64748b;
    font-size: 0.30rem;
    font-weight: 800;
}

.warehouse-map-head > span i {
    color: #ef4444;
}

.warehouse-map-head > strong {
    display: grid;
    text-align: right;
    color: #111827;
    font-size: 0.56rem;
}

.warehouse-map-head strong small {
    color: #94a3b8;
    font-size: 0.23rem;
    font-weight: 600;
}

.warehouse-shelves {
    display: grid;
    grid-template-columns:
        repeat(3, 1fr);
    gap: 6px;
    margin: 12px 0;
}

.warehouse-shelves > span {
    min-height: 44px;
    display: grid;
    grid-template-columns:
        auto 1fr;
    gap: 6px;
    align-items: center;
    padding: 7px;
    border-radius: 8px;
    color: #475569;
    background: #ffffff;
    font-size: 0.27rem;
    font-weight: 900;
    border:
        1px solid
        #e8ebf0;
}

.warehouse-shelves > span i {
    height: 6px;
    border-radius: 999px;
    background: #cbd5e1;
}

.warehouse-shelves .stock-high i {
    background: #22c55e;
}

.warehouse-shelves .stock-mid i {
    background: #f59e0b;
}

.warehouse-shelves .stock-low i {
    background: #ef4444;
    animation:
        warehouse-low-stock
        1.5s ease-in-out
        infinite;
}

.warehouse-map-foot {
    display: flex;
    justify-content: space-between;
    gap: 6px;
}

.warehouse-map-foot span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: #64748b;
    font-size: 0.26rem;
}

.warehouse-map-foot span:first-child i {
    color: #16a34a;
}

.warehouse-map-foot span:last-child i {
    color: #f59e0b;
}

/* APPROVAL ENGINE */

.project-approval-engine {
    min-height: 180px;
    padding: 12px;
    border-radius: 16px;
    background: #fff;
    border:
        1px solid
        #e5e7eb;
}

.approval-engine-row {
    display: grid;
    grid-template-columns:
        1fr 18px
        1fr 18px
        1fr;
    align-items: center;
    gap: 3px;
}

.approval-node {
    min-height: 82px;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 3px;
    text-align: center;
    border-radius: 11px;
    color: #64748b;
    background: #f8fafc;
}

.approval-node > span {
    width: 29px;
    height: 29px;
    display: grid;
    place-items: center;
    border-radius: 9px;
    background: #e2e8f0;
}

.approval-node small {
    color: #94a3b8;
    font-size: 0.23rem;
}

.approval-node strong {
    font-size: 0.29rem;
}

.approval-node.is-complete > span {
    color: #16a34a;
    background: #dcfce7;
}

.approval-node.is-active {
    color: #312e81;
    background: #eef2ff;
}

.approval-node.is-active > span {
    color: #ffffff;
    background:
        linear-gradient(
            135deg,
            #4f46e5,
            #7c3aed
        );
    animation:
        project-active-station
        1.8s ease-in-out
        infinite;
}

.approval-connector {
    position: relative;
    height: 2px;
    overflow: hidden;
    background: #e2e8f0;
}

.approval-connector b {
    position: absolute;
    inset: 0;
    width: 45%;
    background: #a5b4fc;
    animation:
        approval-flow
        2s linear
        infinite;
}

.approval-connector.is-complete b {
    width: 100%;
    background: #22c55e;
    animation: none;
}

.approval-engine-condition {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    align-items: center;
    margin-top: 11px;
    padding: 8px;
    border-radius: 9px;
    background: #f8fafc;
}

.approval-engine-condition > span {
    color: #64748b;
    font-size: 0.27rem;
    font-weight: 750;
}

.approval-engine-condition > div {
    display: flex;
    gap: 4px;
}

.approval-engine-condition b {
    min-width: 27px;
    padding: 4px 6px;
    border-radius: 6px;
    color: #94a3b8;
    background: #e2e8f0;
    text-align: center;
    font-size: 0.24rem;
}

.approval-engine-condition b.yes {
    color: #16a34a;
    background: #dcfce7;
}

/* FORM BUILDER */

.project-form-builder {
    min-height: 185px;
    display: grid;
    grid-template-columns:
        86px 1fr;
    overflow: hidden;
    border-radius: 16px;
    border:
        1px solid
        #e5e7eb;
    background: #ffffff;
}

.form-builder-palette {
    display: grid;
    align-content: start;
    gap: 6px;
    padding: 10px 7px;
    background: #11182d;
}

.form-builder-palette span {
    display: grid;
    grid-template-columns:
        auto 1fr;
    gap: 5px;
    align-items: center;
    padding: 7px;
    border-radius: 7px;
    color: #cbd5e1;
    background:
        rgba(255,255,255,.04);
    font-size: 0.25rem;
}

.form-builder-palette span i {
    color: #a5b4fc;
}

.form-builder-canvas {
    display: grid;
    align-content: start;
    gap: 7px;
    padding: 11px;
    background:
        linear-gradient(
            rgba(79,70,229,.035) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(79,70,229,.035) 1px,
            transparent 1px
        ),
        #fbfcff;
    background-size: 20px 20px;
}

.form-builder-field {
    padding: 8px;
    border-radius: 8px;
    background: #ffffff;
    border:
        1px solid
        #e5e7eb;
}

.form-builder-field.is-selected {
    border-color:
        rgba(79,70,229,.35);
    box-shadow:
        0 0 0 3px
        rgba(79,70,229,.06);
}

.form-builder-field small {
    display: block;
    margin-bottom: 5px;
    color: #94a3b8;
    font-size: 0.22rem;
    font-weight: 900;
}

.form-builder-field > span {
    min-height: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #94a3b8;
    font-size: 0.25rem;
}

.form-builder-field:first-child > span {
    border-radius: 5px;
    background: #eef2f7;
}

.form-builder-dropzone {
    min-height: 39px;
    display: grid;
    place-items: center;
    grid-template-columns:
        auto auto;
    justify-content: center;
    gap: 5px;
    border-radius: 8px;
    color: #818cf8;
    border:
        1px dashed
        rgba(79,70,229,.30);
    background:
        rgba(238,242,255,.52);
    font-size: 0.24rem;
}

/* DECISION COCKPIT */

.project-decision-cockpit {
    min-height: 245px;
    padding: 13px;
    border-radius: 17px;
    color: #ffffff;
    background:
        radial-gradient(
            circle at 90% 10%,
            rgba(99,102,241,.22),
            transparent 32%
        ),
        #10172d;
}

.decision-cockpit-top {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    align-items: center;
}

.decision-cockpit-top small,
.decision-cockpit-top strong {
    display: block;
}

.decision-cockpit-top small {
    color: #64748b;
    font-size: 0.25rem;
    font-weight: 900;
}

.decision-cockpit-top strong {
    margin-top: 2px;
    font-size: 0.47rem;
}

.decision-cockpit-top > span {
    display: inline-flex;
    gap: 5px;
    align-items: center;
    padding: 5px 7px;
    border-radius: 7px;
    color: #cbd5e1;
    background:
        rgba(255,255,255,.055);
    font-size: 0.26rem;
}

.decision-cockpit-grid {
    display: grid;
    grid-template-columns:
        110px 1fr;
    grid-template-rows:
        125px auto;
    gap: 8px;
    margin-top: 11px;
}

.decision-ring {
    position: relative;
    display: grid;
    place-items: center;
    border-radius: 13px;
    background:
        rgba(255,255,255,.045);
}

.decision-ring svg {
    width: 88px;
    height: 88px;
    transform: rotate(-90deg);
}

.decision-ring circle {
    fill: none;
    stroke:
        rgba(255,255,255,.07);
    stroke-width: 10;
}

.decision-ring circle.ring-value {
    stroke: #818cf8;
    stroke-linecap: round;
    stroke-dasharray: 289;
    stroke-dashoffset: 46;
    animation:
        cockpit-ring
        3s ease-in-out
        infinite alternate;
}

.decision-ring > span {
    position: absolute;
    display: grid;
    text-align: center;
}

.decision-ring strong {
    font-size: 0.62rem;
}

.decision-ring small {
    color: #64748b;
    font-size: 0.24rem;
}

.decision-bars {
    display: flex;
    align-items: end;
    justify-content: space-around;
    gap: 6px;
    padding: 11px 10px 8px;
    border-radius: 13px;
    background:
        rgba(255,255,255,.045);
}

.decision-bars > span {
    height: 100%;
    flex: 1;
    display: grid;
    align-items: end;
    justify-items: center;
    grid-template-rows:
        1fr auto;
    gap: 5px;
}

.decision-bars i {
    width: 70%;
    height: var(--cockpit-bar);
    border-radius: 6px 6px 3px 3px;
    background:
        linear-gradient(
            180deg,
            #818cf8,
            #4f46e5
        );
    animation:
        cockpit-bars
        2.8s ease-in-out
        infinite alternate;
}

.decision-bars span:nth-child(2) i {
    animation-delay: .25s;
}

.decision-bars span:nth-child(3) i {
    animation-delay: .5s;
}

.decision-bars span:nth-child(4) i {
    animation-delay: .75s;
}

.decision-bars span:nth-child(5) i {
    animation-delay: 1s;
}

.decision-bars small {
    color: #64748b;
    font-size: 0.22rem;
}

.decision-alert {
    grid-column: 1 / -1;
    min-height: 49px;
    display: grid;
    grid-template-columns:
        auto 1fr;
    gap: 8px;
    align-items: center;
    padding: 9px;
    border-radius: 11px;
    background:
        rgba(99,102,241,.11);
    border:
        1px solid
        rgba(129,140,248,.14);
}

.decision-alert > i {
    width: 29px;
    height: 29px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    color: #fef3c7;
    background:
        rgba(245,158,11,.12);
    animation:
        cockpit-insight
        2.4s ease-in-out
        infinite;
}

.decision-alert span {
    display: grid;
    color: #cbd5e1;
    font-size: 0.30rem;
}

.decision-alert small {
    margin-bottom: 2px;
    color: #818cf8;
    font-size: 0.22rem;
    font-weight: 900;
}

/* ROADMAP ENFOQUE */

.projects-growth-step {
    transition:
        transform .3s ease,
        border-color .3s ease,
        box-shadow .3s ease;
}

.projects-growth-step.is-road-active {
    transform:
        translateY(-7px);
    border-color:
        rgba(99,102,241,.26);
    box-shadow:
        0 18px 44px
        rgba(15,23,42,.10);
}

/* CONNECT: flujo de datos */

.projects-connect-center {
    position: relative;
}

.projects-connect-center::before,
.projects-connect-center::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #818cf8;
    box-shadow:
        0 0 0 5px
        rgba(129,140,248,.10);
}

.projects-connect-center::before {
    left: -38px;
    animation:
        connect-packet-left
        2.8s ease-in-out
        infinite;
}

.projects-connect-center::after {
    right: -38px;
    animation:
        connect-packet-right
        2.8s ease-in-out
        infinite;
}

/* ------------------------------------------------------------
   KEYFRAMES
------------------------------------------------------------ */

@keyframes project-status-pulse {
    0%,
    100% {
        opacity: .45;
        transform: scale(.85);
    }

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

@keyframes project-blueprint-dash {
    to {
        stroke-dashoffset: -64;
    }
}

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

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

@keyframes project-module-float {
    0%,
    100% {
        transform: translateY(0);
    }

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

@keyframes project-packet-one {
    0% {
        transform: translate(0, 0);
        opacity: 0;
    }

    20% {
        opacity: 1;
    }

    100% {
        transform: translate(-82px, -62px);
        opacity: 0;
    }
}

@keyframes project-packet-two {
    0% {
        transform: translate(0, 0);
        opacity: 0;
    }

    20% {
        opacity: 1;
    }

    100% {
        transform: translate(84px, -68px);
        opacity: 0;
    }
}

@keyframes project-packet-three {
    0% {
        transform: translate(0, 0);
        opacity: 0;
    }

    20% {
        opacity: 1;
    }

    100% {
        transform: translate(-82px, 65px);
        opacity: 0;
    }
}

@keyframes project-packet-four {
    0% {
        transform: translate(0, 0);
        opacity: 0;
    }

    20% {
        opacity: 1;
    }

    100% {
        transform: translate(84px, 65px);
        opacity: 0;
    }
}

@keyframes project-progress-breathe {
    from {
        width: 72%;
    }

    to {
        width: 88%;
    }
}

@keyframes project-floating-card {
    0%,
    100% {
        transform:
            translateY(0)
            rotate(0deg);
    }

    50% {
        transform:
            translateY(-8px)
            rotate(-1deg);
    }
}

@keyframes project-active-station {
    0%,
    100% {
        transform: scale(1);
        box-shadow:
            0 0 0
            rgba(79,70,229,0);
    }

    50% {
        transform: scale(1.07);
        box-shadow:
            0 0 0 6px
            rgba(79,70,229,.08);
    }
}

@keyframes production-progress {
    from {
        width: 55%;
    }

    to {
        width: 74%;
    }
}

@keyframes warehouse-low-stock {
    0%,
    100% {
        opacity: .45;
    }

    50% {
        opacity: 1;
    }
}

@keyframes approval-flow {
    from {
        transform:
            translateX(-120%);
    }

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

@keyframes cockpit-ring {
    from {
        stroke-dashoffset: 82;
    }

    to {
        stroke-dashoffset: 42;
    }
}

@keyframes cockpit-bars {
    from {
        transform:
            scaleY(.82);
        transform-origin:
            bottom;
    }

    to {
        transform:
            scaleY(1);
        transform-origin:
            bottom;
    }
}

@keyframes cockpit-insight {
    0%,
    100% {
        transform:
            rotate(0deg)
            scale(1);
    }

    50% {
        transform:
            rotate(7deg)
            scale(1.08);
    }
}

@keyframes connect-packet-left {
    0% {
        transform:
            translateX(-30px);
        opacity: 0;
    }

    50% {
        opacity: 1;
    }

    100% {
        transform:
            translateX(60px);
        opacity: 0;
    }
}

@keyframes connect-packet-right {
    0% {
        transform:
            translateX(30px);
        opacity: 0;
    }

    50% {
        opacity: 1;
    }

    100% {
        transform:
            translateX(-60px);
        opacity: 0;
    }
}

/* ------------------------------------------------------------
   RESPONSIVE
------------------------------------------------------------ */

@media (max-width: 1050px) {

    .project-blueprint-shell {
        width:
            min(100%, 760px);
        margin-inline: auto;
    }

    .projects-blueprint-visual {
        min-height: 560px;
    }

}

@media (max-width: 767px) {

    .projects-blueprint-visual {
        min-height: 475px;
    }

    .project-blueprint-shell {
        border-radius: 21px;
    }

    .project-blueprint-topbar {
        min-height: 44px;
        padding: 0 11px;
    }

    .project-blueprint-title {
        justify-content: flex-start;
        font-size: .48rem;
    }

    .project-blueprint-status {
        font-size: .36rem;
    }

    .project-blueprint-body {
        grid-template-columns: 1fr;
        min-height: 390px;
    }

    .project-blueprint-canvas {
        min-height: 330px;
    }

    .project-blueprint-inspector {
        display: grid;
        grid-template-columns:
            repeat(3, 1fr);
        gap: 6px;
        padding: 9px;
        border-left: 0;
        border-top:
            1px solid
            rgba(15,23,42,.07);
    }

    .blueprint-inspector-label,
    .blueprint-progress,
    .blueprint-inspector-note {
        display: none;
    }

    .blueprint-inspector-row {
        padding: 7px;
    }

    .blueprint-inspector-row span {
        font-size: .30rem;
    }

    .blueprint-inspector-row span i {
        display: none;
    }

    .blueprint-core {
        width: 125px;
        min-height: 112px;
    }

    .blueprint-module {
        min-width: 102px;
        padding: 8px;
    }

    .blueprint-module > i {
        width: 26px;
        height: 26px;
    }

    .blueprint-module span {
        font-size: .37rem;
    }

    .project-blueprint-floating-card {
        right: 8px;
        bottom: 12px;
        min-width: 150px;
        padding: 9px;
    }

    .project-build-card-large
    .project-command-center {
        min-height: 225px;
    }

    .project-command-center {
        grid-template-columns:
            40px 1fr;
    }

    .command-center-kpis {
        gap: 4px;
    }

    .command-center-kpis > div {
        padding: 6px;
    }

    .production-twin-track {
        grid-template-columns:
            1fr 12px
            1fr 12px
            1fr;
    }

    .project-form-builder {
        grid-template-columns:
            70px 1fr;
    }

    .decision-cockpit-grid {
        grid-template-columns:
            95px 1fr;
    }

    .projects-connect-center::before,
    .projects-connect-center::after {
        display: none;
    }

}

@media (max-width: 430px) {

    .project-blueprint-status {
        display: none;
    }

    .project-blueprint-topbar {
        grid-template-columns:
            auto 1fr;
    }

    .project-blueprint-canvas {
        min-height: 305px;
    }

    .blueprint-module {
        min-width: 86px;
        grid-template-columns:
            auto 1fr;
    }

    .blueprint-module b {
        display: none;
    }

    .blueprint-module-orders {
        left: 7px;
        top: 35px;
    }

    .blueprint-module-users {
        right: 7px;
        top: 35px;
    }

    .blueprint-module-flow {
        left: 7px;
        bottom: 35px;
    }

    .blueprint-module-data {
        right: 7px;
        bottom: 35px;
    }

    .project-blueprint-inspector {
        grid-template-columns:
            1fr 1fr;
    }

    .project-blueprint-inspector
    .blueprint-inspector-row:nth-child(4) {
        display: none;
    }

    .project-blueprint-floating-card {
        display: none;
    }

    .command-center-kpis
    > div:nth-child(3) {
        display: none;
    }

    .command-center-kpis {
        grid-template-columns:
            1fr 1fr;
    }

    .command-center-feed
    > div:nth-child(2) {
        display: none;
    }

    .production-station {
        min-height: 70px;
    }

    .production-station small {
        display: none;
    }

    .warehouse-shelves {
        grid-template-columns:
            repeat(2, 1fr);
    }

    .approval-engine-row {
        grid-template-columns:
            1fr 12px
            1fr 12px
            1fr;
    }

    .approval-node {
        min-height: 70px;
    }

    .approval-node strong {
        font-size: .25rem;
    }

    .project-form-builder {
        grid-template-columns: 1fr;
    }

    .form-builder-palette {
        grid-template-columns:
            repeat(3, 1fr);
        padding: 7px;
    }

    .decision-cockpit-grid {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
    }

    .decision-ring {
        min-height: 105px;
    }

    .decision-bars {
        min-height: 105px;
    }

}

/* ============================================================
   PROJECTS V32
   INVENTARIO + WORKFLOW UX
============================================================ */

/* ------------------------------------------------------------
   INVENTARIO / ALMACÉN
------------------------------------------------------------ */

.project-warehouse-board {
    min-height: 285px;
    padding: 13px;
    border-radius: 17px;
    border: 1px solid #e5e7eb;
    background:
        linear-gradient(
            145deg,
            #ffffff,
            #f8fafc
        );
    box-shadow:
        inset 0 0 0 1px
        rgba(79,70,229,.02);
}

.warehouse-board-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.warehouse-board-top small,
.warehouse-board-top strong {
    display: block;
}

.warehouse-board-top small {
    color: var(--color-primary);
    font-size: .27rem;
    font-weight: 900;
    letter-spacing: .09em;
}

.warehouse-board-top strong {
    margin-top: 3px;
    color: #111827;
    font-size: .48rem;
}

.warehouse-board-status {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 7px;
    border-radius: 999px;
    color: #16a34a;
    background: #ecfdf5;
    font-size: .27rem;
    font-weight: 800;
}

.warehouse-board-status i {
    font-size: .23rem;
    animation:
        warehouse-status-pulse
        1.5s ease-in-out
        infinite;
}

.warehouse-board-summary {
    display: grid;
    grid-template-columns:
        repeat(3, 1fr);
    gap: 6px;
    margin: 10px 0;
}

.warehouse-board-summary > div {
    padding: 8px;
    border-radius: 9px;
    border: 1px solid #edf0f4;
    background: #fff;
}

.warehouse-board-summary small,
.warehouse-board-summary strong,
.warehouse-board-summary span {
    display: block;
}

.warehouse-board-summary small {
    color: #94a3b8;
    font-size: .22rem;
    font-weight: 900;
}

.warehouse-board-summary strong {
    margin: 3px 0 1px;
    color: #111827;
    font-size: .55rem;
}

.warehouse-board-summary span {
    color: #64748b;
    font-size: .23rem;
}

.warehouse-board-body {
    display: grid;
    grid-template-columns:
        minmax(0, 1.1fr)
        minmax(135px, .9fr);
    gap: 8px;
}

.warehouse-zone-grid {
    display: grid;
    grid-template-columns:
        repeat(2, 1fr);
    gap: 6px;
}

.warehouse-zone {
    min-height: 92px;
    padding: 8px;
    border-radius: 10px;
    border: 1px solid #e8ebf1;
    background: #fff;
}

.warehouse-zone header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
}

.warehouse-zone header span {
    min-width: 25px;
    height: 21px;
    display: grid;
    place-items: center;
    border-radius: 6px;
    color: #fff;
    background: var(--color-primary);
    font-size: .25rem;
    font-weight: 900;
}

.warehouse-zone.is-warning header span {
    background: #f59e0b;
}

.warehouse-zone header small {
    color: #94a3b8;
    font-size: .21rem;
    font-weight: 900;
}

.warehouse-zone-stock {
    display: flex;
    align-items: baseline;
    gap: 4px;
    margin: 10px 0 7px;
}

.warehouse-zone-stock strong {
    color: #111827;
    font-size: .58rem;
}

.warehouse-zone-stock span {
    color: #94a3b8;
    font-size: .22rem;
}

.warehouse-zone-meter {
    display: block;
    height: 5px;
    overflow: hidden;
    border-radius: 999px;
    background: #eef2f7;
}

.warehouse-zone-meter b {
    display: block;
    width: var(--zone-level);
    height: 100%;
    border-radius: inherit;
    background:
        linear-gradient(
            90deg,
            #22c55e,
            #16a34a
        );
    animation:
        warehouse-level
        2.7s ease-in-out
        infinite alternate;
}

.warehouse-zone.is-warning
.warehouse-zone-meter b {
    background:
        linear-gradient(
            90deg,
            #fbbf24,
            #f59e0b
        );
}

.warehouse-movement-feed {
    display: grid;
    align-content: start;
    gap: 5px;
    padding: 8px;
    border-radius: 10px;
    background: #f8fafc;
}

.warehouse-movement-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    margin-bottom: 2px;
    color: #64748b;
    font-size: .22rem;
    font-weight: 900;
}

.warehouse-movement {
    display: grid;
    grid-template-columns:
        auto 1fr auto;
    gap: 6px;
    align-items: center;
    padding: 7px;
    border-radius: 8px;
    background: #fff;
    border: 1px solid #edf0f4;
}

.movement-icon {
    width: 25px;
    height: 25px;
    display: grid;
    place-items: center;
    border-radius: 7px;
}

.warehouse-movement.is-in
.movement-icon {
    color: #16a34a;
    background: #dcfce7;
}

.warehouse-movement.is-out
.movement-icon {
    color: #2563eb;
    background: #dbeafe;
}

.warehouse-movement.is-alert
.movement-icon {
    color: #d97706;
    background: #fef3c7;
    animation:
        warehouse-alert
        1.7s ease-in-out
        infinite;
}

.warehouse-movement strong,
.warehouse-movement small {
    display: block;
}

.warehouse-movement strong {
    color: #111827;
    font-size: .27rem;
}

.warehouse-movement small {
    margin-top: 2px;
    color: #94a3b8;
    font-size: .21rem;
}

.warehouse-movement b {
    color: #94a3b8;
    font-size: .20rem;
}

/* ------------------------------------------------------------
   WORKFLOW
------------------------------------------------------------ */

.project-workflow-flow {
    min-height: 310px;
    padding: 12px;
    border-radius: 17px;
    border: 1px solid #e5e7eb;
    background:
        radial-gradient(
            circle at 90% 5%,
            rgba(99,102,241,.07),
            transparent 28%
        ),
        #fff;
}

.workflow-flow-head {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    align-items: center;
    margin-bottom: 10px;
}

.workflow-flow-head small,
.workflow-flow-head strong {
    display: block;
}

.workflow-flow-head small {
    color: var(--color-primary);
    font-size: .25rem;
    font-weight: 900;
    letter-spacing: .08em;
}

.workflow-flow-head strong {
    margin-top: 3px;
    color: #111827;
    font-size: .46rem;
}

.workflow-flow-head > span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 7px;
    border-radius: 999px;
    color: #7c3aed;
    background: #f3e8ff;
    font-size: .25rem;
    font-weight: 800;
}

.workflow-flow-track {
    display: grid;
    gap: 5px;
}

.workflow-step,
.workflow-decision {
    display: grid;
    grid-template-columns:
        auto 1fr auto;
    gap: 8px;
    align-items: center;
    padding: 9px;
    border-radius: 10px;
    border: 1px solid #e8ebf1;
    background: #f8fafc;
}

.workflow-step-icon,
.workflow-decision-icon {
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    border-radius: 9px;
    color: #64748b;
    background: #e2e8f0;
}

.workflow-step.is-complete
.workflow-step-icon {
    color: #16a34a;
    background: #dcfce7;
}

.workflow-step.is-active {
    border-color:
        rgba(79,70,229,.20);
    background: #eef2ff;
}

.workflow-step.is-active
.workflow-step-icon {
    color: #fff;
    background:
        linear-gradient(
            135deg,
            #4f46e5,
            #7c3aed
        );
    animation:
        workflow-active-pulse
        1.8s ease-in-out
        infinite;
}

.workflow-step small,
.workflow-step strong,
.workflow-step p,
.workflow-decision small,
.workflow-decision strong {
    display: block;
}

.workflow-step small,
.workflow-decision small {
    color: #94a3b8;
    font-size: .20rem;
    font-weight: 900;
}

.workflow-step strong,
.workflow-decision strong {
    margin-top: 2px;
    color: #111827;
    font-size: .31rem;
}

.workflow-step p {
    margin: 2px 0 0;
    color: #64748b;
    font-size: .22rem;
}

.workflow-step > b {
    width: 24px;
    height: 24px;
    display: grid;
    place-items: center;
    border-radius: 7px;
    color: #16a34a;
    background: #dcfce7;
    font-size: .23rem;
}

.workflow-step
.workflow-processing {
    width: auto;
    height: auto;
    padding: 5px 7px;
    color: #4f46e5;
    background: #fff;
    font-size: .21rem;
}

.workflow-flow-arrow {
    position: relative;
    width: 35px;
    height: 21px;
    margin: 0 auto;
    display: grid;
    place-items: center;
    color: #cbd5e1;
}

.workflow-flow-arrow span {
    position: absolute;
    width: 2px;
    top: 0;
    bottom: 5px;
    overflow: hidden;
    background: #e2e8f0;
}

.workflow-flow-arrow span::after {
    content: "";
    display: block;
    width: 100%;
    height: 45%;
    background: #a5b4fc;
    animation:
        workflow-line-flow
        1.8s linear
        infinite;
}

.workflow-flow-arrow.is-complete
span::after {
    height: 100%;
    background: #22c55e;
    animation: none;
}

.workflow-flow-arrow.is-complete {
    color: #22c55e;
}

.workflow-decision {
    grid-template-columns:
        auto 1fr auto;
    border-style: dashed;
    border-color:
        rgba(79,70,229,.24);
    background:
        linear-gradient(
            135deg,
            #fafaff,
            #f5f3ff
        );
}

.workflow-decision-icon {
    color: #fff;
    background:
        linear-gradient(
            135deg,
            #7c3aed,
            #4f46e5
        );
}

.workflow-decision-options {
    display: flex;
    gap: 4px;
}

.workflow-decision-options span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 7px;
    border-radius: 7px;
    font-size: .21rem;
    font-weight: 900;
}

.workflow-decision-options .yes {
    color: #16a34a;
    background: #dcfce7;
}

.workflow-decision-options .no {
    color: #dc2626;
    background: #fee2e2;
}

.workflow-result-row {
    display: grid;
    grid-template-columns:
        1fr 1fr;
    gap: 6px;
    margin-top: 2px;
}

.workflow-result {
    display: grid;
    grid-template-columns:
        auto 1fr;
    gap: 7px;
    align-items: center;
    padding: 8px;
    border-radius: 9px;
}

.workflow-result > span {
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    border-radius: 8px;
}

.workflow-result.approved {
    background: #f0fdf4;
    border: 1px solid #dcfce7;
}

.workflow-result.approved > span {
    color: #16a34a;
    background: #dcfce7;
}

.workflow-result.rejected {
    background: #fef2f2;
    border: 1px solid #fee2e2;
}

.workflow-result.rejected > span {
    color: #dc2626;
    background: #fee2e2;
}

.workflow-result small,
.workflow-result strong {
    display: block;
}

.workflow-result small {
    color: #94a3b8;
    font-size: .19rem;
    font-weight: 900;
}

.workflow-result strong {
    margin-top: 2px;
    color: #111827;
    font-size: .27rem;
}

/* ------------------------------------------------------------
   ANIMACIONES
------------------------------------------------------------ */

@keyframes warehouse-status-pulse {
    0%,100% {
        opacity: .45;
        transform: scale(.85);
    }
    50% {
        opacity: 1;
        transform: scale(1.12);
    }
}

@keyframes warehouse-level {
    from {
        transform: scaleX(.92);
        transform-origin: left;
    }
    to {
        transform: scaleX(1);
        transform-origin: left;
    }
}

@keyframes warehouse-alert {
    0%,100% {
        transform: rotate(0deg);
    }
    50% {
        transform: rotate(-8deg) scale(1.07);
    }
}

@keyframes workflow-active-pulse {
    0%,100% {
        transform: scale(1);
        box-shadow: 0 0 0 rgba(79,70,229,0);
    }
    50% {
        transform: scale(1.07);
        box-shadow:
            0 0 0 6px
            rgba(79,70,229,.07);
    }
}

@keyframes workflow-line-flow {
    from {
        transform: translateY(-110%);
    }
    to {
        transform: translateY(240%);
    }
}

/* ------------------------------------------------------------
   RESPONSIVE
------------------------------------------------------------ */

@media (max-width: 767px) {

    .project-warehouse-board,
    .project-workflow-flow {
        min-height: auto;
        padding: 11px;
    }

    .warehouse-board-body {
        grid-template-columns: 1fr;
    }

    .warehouse-zone-grid {
        grid-template-columns:
            repeat(2, 1fr);
    }

    .warehouse-movement-feed {
        margin-top: 2px;
    }

    .workflow-step,
    .workflow-decision {
        grid-template-columns:
            auto 1fr;
    }

    .workflow-step > b,
    .workflow-decision-options {
        grid-column: 2;
        justify-self: start;
    }

    .workflow-result-row {
        grid-template-columns: 1fr;
    }

}

@media (max-width: 430px) {

    .warehouse-board-top {
        align-items: flex-start;
    }

    .warehouse-board-status {
        font-size: .21rem;
    }

    .warehouse-board-summary {
        grid-template-columns:
            repeat(3, 1fr);
        gap: 4px;
    }

    .warehouse-board-summary > div {
        padding: 6px;
    }

    .warehouse-board-summary strong {
        font-size: .44rem;
    }

    .warehouse-zone {
        min-height: 82px;
        padding: 7px;
    }

    .warehouse-zone header small {
        font-size: .18rem;
    }

    .warehouse-movement b {
        display: none;
    }

    .workflow-flow-head {
        align-items: flex-start;
    }

    .workflow-flow-head > span {
        font-size: .21rem;
    }

    .workflow-step p {
        display: none;
    }

    .workflow-decision-options {
        flex-wrap: wrap;
    }

}