/* ============================================================
   YA PÍDELO - INDEX
   Estilos exclusivos de index.html
============================================================ */

/* ============================================================
   INDEX PAGE - FINAL V2
   YA PÍDELO
============================================================ */


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

.home-hero {
    position: relative;
    min-height: 100svh;

    display: flex;
    align-items: center;

    overflow: hidden;

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

    background:
        radial-gradient(
            circle at 78% 18%,
            rgba(99, 102, 241, 0.12),
            transparent 30%
        ),
        radial-gradient(
            circle at 7% 72%,
            rgba(6, 182, 212, 0.07),
            transparent 27%
        ),
        linear-gradient(
            180deg,
            #ffffff 0%,
            #f8faff 100%
        );
}


.home-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%
        );
}


.home-hero-glow {
    position: absolute;

    border-radius: 50%;

    filter:
        blur(110px);

    pointer-events: none;
}


.home-hero-glow-one {
    width: 520px;
    height: 520px;

    left: -270px;
    top: 100px;

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


.home-hero-glow-two {
    width: 620px;
    height: 620px;

    right: -260px;
    top: 15px;

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


.home-hero-container {
    position: relative;
    z-index: 2;

    display: grid;

    grid-template-columns:
        minmax(0, 0.92fr)
        minmax(500px, 1.08fr);

    align-items: center;

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


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

.home-hero-content {
    position: relative;
    z-index: 3;
}


.home-hero-title {
    max-width: 780px;

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

    font-size:
        clamp(3.2rem, 5.8vw, 5.9rem);

    line-height: 0.98;

    letter-spacing: -0.065em;

    font-weight: 800;

    margin-bottom: 28px;
}


.home-changing-word {
    display: block;

    width: fit-content;

    min-height: 1.05em;

    transition:
        opacity 0.18s ease,
        transform 0.28s ease;
}


.home-changing-word.is-changing {
    opacity: 0;

    transform:
        translateY(10px);
}


.home-hero-description {
    max-width: 680px;

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

    font-size:
        clamp(1rem, 1.3vw, 1.15rem);

    line-height: 1.8;

    margin-bottom: 29px;
}


.home-goal-label {
    color:
        var(--color-text);

    font-size: 0.74rem;

    font-weight: 750;

    margin-bottom: 11px;
}


/* ============================================================
   HERO BOTONES DE CONCEPTO
============================================================ */

.home-goal-selector {
    display: flex;
    flex-wrap: wrap;

    gap: 8px;

    margin-bottom: 28px;
}


.home-goal-button {
    min-height: 43px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    padding:
        0 15px;

    border-radius: 11px;

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

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

    backdrop-filter:
        blur(12px);

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

    font-size: 0.72rem;

    font-weight: 700;

    box-shadow:
        0 6px 20px
        rgba(15, 23, 42, 0.035);

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


.home-goal-button:hover {
    color:
        var(--color-primary);

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

    background: white;

    transform:
        translateY(-2px);
}


.home-goal-button.active {
    color: white;

    border-color: transparent;

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

    box-shadow:
        0 12px 28px
        rgba(79, 70, 229, 0.23);
}


.home-hero-actions {
    display: flex;

    flex-wrap: wrap;

    gap: 12px;

    margin-bottom: 28px;
}


.home-hero-trust {
    display: flex;

    flex-wrap: wrap;

    gap:
        10px 20px;
}


.home-hero-trust div {
    display: flex;

    align-items: center;

    gap: 7px;

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

    font-size: 0.76rem;

    font-weight: 580;
}


.home-hero-trust i {
    color:
        var(--color-success);
}


/* ============================================================
   HERO CONCEPT STAGE
============================================================ */

.home-concept-stage {
    position: relative;

    min-height: 590px;

    width: 100%;
}


.home-concept-panel {
    position: absolute;

    inset: 0;

    display: grid;

    place-items: center;

    opacity: 0;

    visibility: hidden;

    pointer-events: none;

    transform:
        translateY(12px)
        scale(0.985);

    transition:
        opacity 0.35s ease,
        visibility 0.35s ease,
        transform 0.45s
        cubic-bezier(0.22, 1, 0.36, 1);
}


.home-concept-panel.active {
    opacity: 1;

    visibility: visible;

    pointer-events: auto;

    transform:
        translateY(0)
        scale(1);
}


/* ============================================================
   ELEMENTOS FLOTANTES COMUNES
============================================================ */

.concept-floating-card {
    position: absolute;

    z-index: 10;

    display: flex;

    align-items: center;

    gap: 10px;

    padding:
        12px 15px;

    border-radius: 15px;

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

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

    backdrop-filter:
        blur(16px);

    box-shadow:
        0 20px 50px
        rgba(15, 23, 42, 0.16);

    animation:
        concept-card-float
        5s ease-in-out
        infinite;
}


.concept-floating-icon {
    width: 38px;
    height: 38px;

    flex-shrink: 0;

    display: grid;

    place-items: center;

    border-radius: 11px;

    color: white;

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


.concept-floating-card small {
    display: block;

    color: #969dad;

    font-size: 0.48rem;

    font-weight: 800;

    letter-spacing: 0.08em;

    margin-bottom: 2px;
}


.concept-floating-card strong {
    display: block;

    color:
        var(--color-text);

    font-size: 0.64rem;
}


.concept-success {
    margin-left: 5px;

    padding:
        5px 8px;

    border-radius: 999px;

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

    color:
        #16a34a;

    font-size: 0.57rem;

    font-weight: 800;
}


@keyframes concept-card-float {

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

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

}


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

.concept-browser {
    position: relative;

    width:
        min(100%, 650px);

    min-height: 470px;

    overflow: hidden;

    border-radius: 28px;

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

    background: white;

    box-shadow:
        0 40px 100px
        rgba(15, 23, 42, 0.16);
}


.concept-browser-header {
    height: 52px;

    display: flex;

    align-items: center;

    gap: 18px;

    padding:
        0 17px;

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

    background:
        #f8f9fd;
}


.concept-url {
    width:
        min(65%, 310px);

    height: 27px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 8px;

    background: white;

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

    color: #9aa1b1;

    font-size: 0.58rem;
}


.sales-storefront {
    min-height: 418px;

    padding: 28px;

    background:
        radial-gradient(
            circle at 80% 20%,
            rgba(99, 102, 241, 0.12),
            transparent 30%
        ),
        linear-gradient(
            145deg,
            #f8f9ff,
            #ffffff
        );
}


.sales-storefront-top {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    margin-bottom: 25px;
}


.sales-storefront-top small {
    display: block;

    color: #9aa1b1;

    font-size: 0.5rem;

    letter-spacing: 0.09em;

    margin-bottom: 3px;
}


.sales-storefront-top strong {
    font-size: 1rem;
}


.sales-storefront-top > span {
    display: inline-flex;

    align-items: center;

    gap: 5px;

    padding:
        6px 9px;

    border-radius: 999px;

    color: #15803d;

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

    font-size: 0.56rem;

    font-weight: 750;
}


.sales-storefront-top > span i {
    font-size: 0.35rem;
}


.sales-products {
    display: grid;

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

    gap: 12px;

    margin-bottom: 20px;
}


.sales-product {
    min-height: 175px;

    padding: 13px;

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    border-radius: 17px;

    background: white;

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

    box-shadow:
        0 10px 28px
        rgba(15, 23, 42, 0.05);
}


.sales-product > div {
    flex: 1;

    display: grid;

    place-items: center;

    border-radius: 13px;

    background:
        linear-gradient(
            145deg,
            #f0f1ff,
            #fafbff
        );

    color:
        var(--color-primary);

    font-size: 1.7rem;
}


.sales-product > span {
    display: block;

    width: 65%;
    height: 8px;

    margin-top: 12px;

    border-radius: 999px;

    background:
        #e8eaf2;
}


.sales-contact-line {
    display: flex;

    align-items: center;

    justify-content: space-between;

    min-height: 58px;

    padding:
        0 16px;

    border-radius: 14px;

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

    color: white;

    font-size: 0.7rem;

    font-weight: 700;
}


.sales-contact-line > div {
    display: flex;

    align-items: center;

    gap: 9px;
}


.sales-order-card {
    left: -28px;
    top: 92px;
}


.sales-channel-card {
    right: -24px;
    bottom: 62px;

    animation-delay: -2.2s;
}


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

.concept-admin-board {
    width:
        min(100%, 650px);

    min-height: 470px;

    overflow: hidden;

    display: grid;

    grid-template-columns:
        70px 1fr;

    border-radius: 28px;

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

    background: white;

    box-shadow:
        0 40px 100px
        rgba(15, 23, 42, 0.16);
}


.concept-admin-sidebar {
    padding:
        18px 12px;

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 13px;

    background:
        linear-gradient(
            180deg,
            #10162e,
            #0a1024
        );
}


.concept-admin-logo {
    width: 39px;
    height: 39px;

    display: grid;

    place-items: center;

    margin-bottom: 15px;

    border-radius: 11px;

    color: white;

    font-size: 0.6rem;

    font-weight: 800;

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


.concept-admin-sidebar span {
    width: 38px;
    height: 38px;

    display: grid;

    place-items: center;

    border-radius: 10px;

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

    font-size: 0.7rem;
}


.concept-admin-sidebar span.active {
    color: white;

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


.concept-admin-content {
    padding: 27px;

    background:
        #f8f9fd;
}


.concept-admin-title {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 18px;

    margin-bottom: 23px;
}


.concept-admin-title small {
    display: block;

    color: #969dad;

    font-size: 0.5rem;

    letter-spacing: 0.09em;

    margin-bottom: 3px;
}


.concept-admin-title strong {
    font-size: 1rem;
}


.concept-admin-title > span {
    padding:
        6px 10px;

    border-radius: 8px;

    background: white;

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

    color: #7a8191;

    font-size: 0.57rem;
}


.concept-admin-kpis {
    display: grid;

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

    gap: 9px;

    margin-bottom: 18px;
}


.concept-admin-kpis > div {
    min-height: 100px;

    padding: 13px;

    border-radius: 13px;

    background: white;

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

    box-shadow:
        0 7px 20px
        rgba(15, 23, 42, 0.035);
}


.concept-admin-kpis i {
    color:
        var(--color-primary);

    margin-bottom: 11px;
}


.concept-admin-kpis small {
    display: block;

    color: #9aa1b1;

    font-size: 0.45rem;

    margin-bottom: 3px;
}


.concept-admin-kpis strong {
    display: block;

    font-size: 0.62rem;
}


.concept-admin-table {
    overflow: hidden;

    border-radius: 13px;

    background: white;

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


.admin-table-row {
    min-height: 52px;

    display: grid;

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

    align-items: center;

    padding:
        0 14px;

    border-bottom:
        1px solid
        rgba(15, 23, 42, 0.045);

    color: #596071;

    font-size: 0.58rem;
}


.admin-table-row:last-child {
    border-bottom: 0;
}


.admin-table-header {
    min-height: 38px;

    color: #9ba1b0;

    background:
        #fbfcfe;

    font-size: 0.48rem;

    font-weight: 700;
}


.admin-status {
    width: fit-content;

    padding:
        5px 7px;

    border-radius: 999px;

    color: #15803d;

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


.admin-report-card {
    right: -25px;
    top: 70px;
}


/* ============================================================
   HERO AUTOMATIZACIÓN
============================================================ */

.concept-workflow {
    position: relative;

    width:
        min(100%, 650px);

    min-height: 470px;

    padding:
        30px;

    border-radius: 28px;

    overflow: hidden;

    color: white;

    background:
        radial-gradient(
            circle at 80% 12%,
            rgba(99, 102, 241, 0.24),
            transparent 30%
        ),
        linear-gradient(
            135deg,
            #0e142c,
            #161d3e
        );

    box-shadow:
        0 40px 100px
        rgba(15, 23, 42, 0.20);
}


.workflow-heading {
    display: grid;

    grid-template-columns:
        1fr auto;

    align-items: center;

    gap: 15px;

    margin-bottom: 40px;
}


.workflow-heading small {
    display: block;

    color:
        rgba(255, 255, 255, 0.43);

    font-size: 0.48rem;

    letter-spacing: 0.09em;

    margin-bottom: 4px;
}


.workflow-heading strong {
    display: block;

    font-size: 1.05rem;
}


.workflow-heading > span {
    display: inline-flex;

    align-items: center;

    gap: 5px;

    padding:
        7px 10px;

    border-radius: 999px;

    background:
        rgba(99, 102, 241, 0.18);

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

    color: #c4c8ff;

    font-size: 0.56rem;

    font-weight: 700;
}


.workflow-road {
    display: grid;

    gap: 0;
}


.workflow-stage {
    min-height: 66px;

    display: grid;

    grid-template-columns:
        auto 1fr auto;

    align-items: center;

    gap: 12px;

    padding:
        11px 14px;

    border-radius: 14px;

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

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

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


.workflow-stage.completed {
    color:
        rgba(255, 255, 255, 0.84);

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

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


.workflow-stage.active {
    color: white;

    background:
        linear-gradient(
            135deg,
            rgba(79, 70, 229, 0.28),
            rgba(124, 58, 237, 0.14)
        );

    border-color:
        rgba(139, 143, 255, 0.23);

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


.workflow-stage-icon {
    width: 37px;
    height: 37px;

    display: grid;

    place-items: center;

    border-radius: 10px;

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


.workflow-stage small {
    display: block;

    font-size: 0.43rem;

    letter-spacing: 0.08em;

    opacity: 0.55;

    margin-bottom: 2px;
}


.workflow-stage strong {
    display: block;

    font-size: 0.65rem;
}


.workflow-stage > i {
    font-size: 0.7rem;
}


.workflow-stage.completed > i {
    color: #4ade80;
}


.workflow-stage.active > i {
    color: #aeb6ff;

    animation:
        workflow-spinner
        2s linear
        infinite;
}


@keyframes workflow-spinner {

    to {
        transform:
            rotate(360deg);
    }

}


.workflow-connector {
    width: 2px;
    height: 20px;

    margin-left: 31px;

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


.workflow-connector.completed {
    background:
        rgba(34, 197, 94, 0.40);
}


.workflow-connector.active {
    background:
        linear-gradient(
            180deg,
            #4ade80,
            #818cf8
        );
}


.workflow-notification {
    left: -26px;
    bottom: 54px;
}


.workflow-history {
    right: -24px;
    top: 105px;

    animation-delay: -2.2s;
}


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

.concept-security-center {
    width:
        min(100%, 650px);

    min-height: 470px;

    padding: 27px;

    border-radius: 28px;

    overflow: hidden;

    color: white;

    background:
        radial-gradient(
            circle at 88% 8%,
            rgba(6, 182, 212, 0.15),
            transparent 30%
        ),
        linear-gradient(
            135deg,
            #0b1224,
            #121b32
        );

    box-shadow:
        0 40px 100px
        rgba(15, 23, 42, 0.20);
}


.security-heading {
    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 18px;

    margin-bottom: 23px;
}


.security-heading small {
    display: block;

    color:
        rgba(255, 255, 255, 0.43);

    font-size: 0.47rem;

    letter-spacing: 0.09em;

    margin-bottom: 3px;
}


.security-heading strong {
    display: block;

    font-size: 1rem;
}


.security-heading > span {
    display: inline-flex;

    align-items: center;

    gap: 6px;

    padding:
        6px 9px;

    border-radius: 999px;

    color: #86efac;

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

    font-size: 0.52rem;
}


.security-heading > span i {
    font-size: 0.34rem;
}


.security-camera-grid {
    display: grid;

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

    gap: 10px;
}


.security-camera {
    overflow: hidden;

    border-radius: 14px;

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

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


.camera-scene {
    height: 115px;

    display: grid;

    place-items: center;

    color:
        rgba(255, 255, 255, 0.32);

    background:
        radial-gradient(
            circle at center,
            rgba(99, 102, 241, 0.13),
            transparent 60%
        ),
        #10172a;

    font-size: 2rem;
}


.security-camera > span {
    min-height: 34px;

    display: flex;

    align-items: center;

    gap: 6px;

    padding:
        0 11px;

    color:
        rgba(255, 255, 255, 0.55);

    font-size: 0.5rem;
}


.security-camera > span i {
    color: #4ade80;

    font-size: 0.33rem;
}


.security-network {
    grid-column:
        1 / -1;

    min-height: 70px;

    display: grid;

    grid-template-columns:
        auto 1fr auto;

    align-items: center;

    gap: 13px;

    padding:
        13px 15px;

    border-radius: 14px;

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

    border:
        1px solid
        rgba(255, 255, 255, 0.07);
}


.security-network > i {
    width: 38px;
    height: 38px;

    display: grid;

    place-items: center;

    border-radius: 11px;

    color: #67e8f9;

    background:
        rgba(6, 182, 212, 0.10);
}


.security-network small {
    display: block;

    color:
        rgba(255, 255, 255, 0.40);

    font-size: 0.45rem;

    margin-bottom: 3px;
}


.security-network strong {
    display: block;

    font-size: 0.64rem;
}


.security-network > span {
    color: #67e8f9;

    font-size: 0.72rem;

    font-weight: 800;
}


.security-mobile-card {
    right: -25px;
    bottom: 60px;
}


/* ============================================================
   ADVISOR
============================================================ */

.home-advisor-section {
    position: relative;

    background:
        linear-gradient(
            180deg,
            #ffffff,
            #f7f9ff
        );
}


.home-advisor-heading {
    display: grid;

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

    gap: 70px;

    align-items: end;

    margin-bottom: 55px;
}


.home-advisor-heading h2 {
    font-family:
        "Manrope",
        sans-serif;

    font-size:
        clamp(2.4rem, 4.4vw, 4.7rem);

    line-height: 1.04;

    letter-spacing: -0.055em;
}


.home-advisor-heading > p {
    color:
        var(--color-text-soft);

    line-height: 1.8;
}


.home-advisor-layout {
    display: grid;

    grid-template-columns:
        minmax(330px, 0.72fr)
        minmax(0, 1.28fr);

    gap:
        clamp(30px, 5vw, 65px);

    align-items: stretch;
}


/* ============================================================
   ADVISOR OPTIONS
============================================================ */

.home-advisor-options {
    display: grid;

    gap: 9px;
}


.advisor-option {
    width: 100%;

    min-height: 74px;

    display: grid;

    grid-template-columns:
        auto 1fr auto;

    align-items: center;

    gap: 13px;

    padding:
        12px 15px;

    text-align: left;

    border-radius: 15px;

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

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

    box-shadow:
        0 6px 22px
        rgba(15, 23, 42, 0.035);

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


.advisor-option > div {
    width: 42px;
    height: 42px;

    display: grid;

    place-items: center;

    flex-shrink: 0;

    border-radius: 12px;

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

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


.advisor-option > span strong {
    display: block;

    color:
        var(--color-text);

    font-size: 0.76rem;

    line-height: 1.3;

    margin-bottom: 3px;
}


.advisor-option > span small {
    display: block;

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

    font-size: 0.61rem;

    line-height: 1.35;
}


.advisor-option > i {
    color: #abb1bd;

    font-size: 0.62rem;

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


.advisor-option:hover {
    transform:
        translateX(5px);

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

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


.advisor-option:hover > i {
    color:
        var(--color-primary);

    transform:
        translateX(2px);
}


.advisor-option.active {
    border-color:
        rgba(79, 70, 229, 0.28);

    background:
        linear-gradient(
            135deg,
            rgba(79, 70, 229, 0.08),
            rgba(124, 58, 237, 0.04)
        );

    box-shadow:
        0 14px 35px
        rgba(79, 70, 229, 0.08);
}


.advisor-option.active > div {
    color: white;

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

    box-shadow:
        0 8px 20px
        rgba(79, 70, 229, 0.20);
}


/* ============================================================
   ADVISOR RESULT V2
============================================================ */

.home-advisor-result-v2 {
    position: relative;

    min-height: 660px;

    display: grid;

    grid-template-rows:
        auto 1fr;

    overflow: hidden;

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

    border-radius: 30px;

    color: white;

    background:
        radial-gradient(
            circle at 88% 8%,
            rgba(99, 102, 241, 0.28),
            transparent 30%
        ),
        radial-gradient(
            circle at 0% 100%,
            rgba(6, 182, 212, 0.10),
            transparent 30%
        ),
        linear-gradient(
            135deg,
            #0c1228,
            #151c3d
        );

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


.advisor-result-copy {
    position: relative;
    z-index: 3;

    max-width: 760px;
}


.advisor-result-overline {
    display: block;

    color:
        rgba(255, 255, 255, 0.46);

    font-size: 0.59rem;

    font-weight: 800;

    letter-spacing: 0.12em;

    margin-bottom: 16px;
}


.home-advisor-result-v2 h3 {
    max-width: 760px;

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

    font-size:
        clamp(2rem, 3.2vw, 3.4rem);

    line-height: 1.07;

    letter-spacing: -0.045em;

    margin-bottom: 17px;
}


.home-advisor-result-v2
.advisor-result-copy > p {
    max-width: 760px;

    color:
        rgba(255, 255, 255, 0.64);

    line-height: 1.76;

    margin-bottom: 22px;
}


.advisor-result-insight {
    display: flex;

    align-items: center;

    gap: 11px;

    margin-bottom: 25px;
}


.advisor-result-insight > div {
    width: 41px;
    height: 41px;

    display: grid;

    place-items: center;

    flex-shrink: 0;

    border-radius: 12px;

    color: #d8dcff;

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

    border:
        1px solid
        rgba(255, 255, 255, 0.09);
}


.advisor-result-insight small {
    display: block;

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

    font-size: 0.46rem;

    letter-spacing: 0.08em;

    margin-bottom: 2px;
}


.advisor-result-insight strong {
    display: block;

    font-size: 0.68rem;
}


.advisor-fixed-actions {
    display: flex;

    flex-wrap: wrap;

    gap: 10px;

    margin-bottom: 32px;
}


.home-advisor-result-v2
.button-secondary {
    color: white;

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

    border-color:
        rgba(255, 255, 255, 0.15);
}


.home-advisor-result-v2
.button-secondary:hover {
    background:
        rgba(255, 255, 255, 0.11);
}


/* ============================================================
   ADVISOR DYNAMIC VISUAL
============================================================ */

.advisor-dynamic-visual {
    position: relative;

    z-index: 2;

    min-height: 270px;

    margin-top: auto;

    transition:
        opacity 0.18s ease,
        transform 0.18s ease;
}


.advisor-dynamic-visual.is-changing {
    opacity: 0;

    transform:
        translateY(8px);
}


.advisor-visual {
    position: relative;

    width: 100%;
    height: 100%;

    min-height: 270px;
}


/* ============================================================
   ADVISOR MAPA
============================================================ */

.advisor-map {
    position: absolute;

    inset: 0;

    overflow: hidden;

    border-radius: 20px;

    background:
        linear-gradient(
            145deg,
            #18223e,
            #10182d
        );

    border:
        1px solid
        rgba(255, 255, 255, 0.08);
}


.advisor-map::before {
    content: "";

    position: absolute;

    inset: 0;

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

    background-size:
        32px 32px;
}


.advisor-map-road {
    position: absolute;

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

    border-radius: 999px;
}


.road-one {
    width: 125%;
    height: 25px;

    left: -10%;
    top: 42%;

    transform:
        rotate(-12deg);
}


.road-two {
    width: 23px;
    height: 130%;

    left: 54%;
    top: -15%;

    transform:
        rotate(18deg);
}


.road-three {
    width: 90%;
    height: 17px;

    left: 8%;
    bottom: 15%;

    transform:
        rotate(8deg);
}


.advisor-map-pin {
    position: absolute;

    z-index: 4;

    left: 49%;
    top: 44%;

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

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 7px;
}


.advisor-map-pin > div {
    width: 60px;
    height: 60px;

    display: grid;

    place-items: center;

    border-radius:
        50% 50% 50% 8px;

    transform:
        rotate(-45deg);

    color: white;

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

    box-shadow:
        0 15px 40px
        rgba(79, 70, 229, 0.36);
}


.advisor-map-pin > div i {
    transform:
        rotate(45deg);

    font-size: 1rem;
}


.advisor-map-pin > span {
    padding:
        5px 8px;

    border-radius: 7px;

    color: white;

    background:
        rgba(8, 12, 27, 0.82);

    font-size: 0.52rem;

    font-weight: 700;
}


.advisor-map-user {
    position: absolute;

    width: 34px;
    height: 34px;

    display: grid;

    place-items: center;

    border-radius: 50%;

    color: #bdc4ff;

    background:
        rgba(99, 102, 241, 0.15);

    border:
        1px solid
        rgba(139, 143, 255, 0.20);

    font-size: 0.58rem;
}


.user-one {
    left: 18%;
    top: 24%;
}


.user-two {
    right: 15%;
    top: 32%;
}


.user-three {
    right: 28%;
    bottom: 18%;
}


.advisor-location-card {
    position: absolute;

    z-index: 5;

    left: 25px;
    bottom: 22px;

    display: grid;

    grid-template-columns:
        auto 1fr auto;

    align-items: center;

    gap: 10px;

    min-width: 260px;

    padding:
        12px 14px;

    border-radius: 14px;

    color:
        var(--color-text);

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

    box-shadow:
        0 18px 45px
        rgba(0, 0, 0, 0.22);
}


.advisor-location-card > div {
    width: 37px;
    height: 37px;

    display: grid;

    place-items: center;

    border-radius: 10px;

    color: white;

    background:
        var(--color-primary);
}


.advisor-location-card small {
    display: block;

    color: #999faf;

    font-size: 0.45rem;

    margin-bottom: 2px;
}


.advisor-location-card strong {
    display: block;

    font-size: 0.63rem;
}


.advisor-location-card > i {
    color: #22c55e;

    font-size: 1rem;
}


/* ============================================================
   ADVISOR CATÁLOGO
============================================================ */

.advisor-visual-catalog {
    display: grid;

    place-items: center;
}


.catalog-phone {
    position: relative;

    width: 190px;
    min-height: 275px;

    padding: 16px;

    border-radius: 28px;

    background: white;

    color:
        var(--color-text);

    box-shadow:
        0 25px 60px
        rgba(0, 0, 0, 0.28);

    transform:
        rotate(-4deg);
}


.catalog-phone-top {
    width: 48px;
    height: 5px;

    margin:
        0 auto 15px;

    border-radius: 999px;

    background:
        #d9dce7;
}


.catalog-phone-title small {
    display: block;

    color: #999faf;

    font-size: 0.42rem;

    margin-bottom: 2px;
}


.catalog-phone-title strong {
    font-size: 0.72rem;
}


.catalog-products-grid {
    display: grid;

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

    gap: 8px;

    margin-top: 15px;
}


.catalog-products-grid > div {
    min-height: 85px;

    padding: 10px;

    border-radius: 11px;

    background:
        #f5f6fb;
}


.catalog-products-grid i {
    display: grid;

    place-items: center;

    height: 50px;

    border-radius: 8px;

    color:
        var(--color-primary);

    background:
        #eceeff;
}


.catalog-products-grid span {
    display: block;

    width: 65%;
    height: 5px;

    margin-top: 8px;

    border-radius: 999px;

    background:
        #dfe2ec;
}


.catalog-product-detail {
    position: absolute;

    z-index: 4;

    right: 10%;
    bottom: 25px;

    display: flex;

    align-items: center;

    gap: 10px;

    padding:
        12px 14px;

    border-radius: 14px;

    color:
        var(--color-text);

    background: white;

    box-shadow:
        0 20px 50px
        rgba(0, 0, 0, 0.22);
}


.catalog-product-detail > div {
    width: 38px;
    height: 38px;

    display: grid;

    place-items: center;

    border-radius: 10px;

    color: white;

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


.catalog-product-detail small,
.orders-status-card small,
.pos-stock-card small {
    display: block;

    color: #969dad;

    font-size: 0.45rem;

    margin-bottom: 2px;
}


.catalog-product-detail strong,
.orders-status-card strong,
.pos-stock-card strong {
    display: block;

    font-size: 0.62rem;
}


/* ============================================================
   ADVISOR PEDIDOS
============================================================ */

.advisor-visual-orders {
    display: grid;

    place-items: center;
}


.orders-ticket {
    width:
        min(80%, 390px);

    padding: 22px;

    border-radius: 19px;

    background: white;

    color:
        var(--color-text);

    box-shadow:
        0 25px 60px
        rgba(0, 0, 0, 0.25);
}


.orders-ticket-head {
    display: flex;

    align-items: center;

    gap: 11px;

    padding-bottom: 15px;

    margin-bottom: 12px;

    border-bottom:
        1px dashed
        #dfe2ea;
}


.orders-ticket-head > span {
    width: 40px;
    height: 40px;

    display: grid;

    place-items: center;

    border-radius: 11px;

    color: white;

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


.orders-ticket-head small {
    display: block;

    color: #9ba1af;

    font-size: 0.46rem;

    margin-bottom: 2px;
}


.orders-ticket-head strong {
    font-size: 0.75rem;
}


.orders-ticket-line,
.orders-ticket-total {
    display: flex;

    justify-content: space-between;

    gap: 20px;

    padding:
        8px 0;

    font-size: 0.61rem;
}


.orders-ticket-line {
    color: #72798a;
}


.orders-ticket-total {
    margin-top: 7px;

    padding-top: 13px;

    border-top:
        1px dashed
        #dfe2ea;

    font-weight: 800;
}


.orders-status-card {
    position: absolute;

    right: 7%;
    top: 22px;

    display: flex;

    align-items: center;

    gap: 10px;

    padding:
        12px 14px;

    border-radius: 14px;

    color:
        var(--color-text);

    background: white;

    box-shadow:
        0 18px 45px
        rgba(0, 0, 0, 0.22);
}


.orders-status-card > i {
    color: #22c55e;

    font-size: 1.25rem;
}


/* ============================================================
   ADVISOR POS
============================================================ */

.advisor-visual-pos {
    display: grid;

    place-items: center;
}


.pos-terminal {
    width:
        min(78%, 430px);
}


.pos-screen {
    padding: 18px;

    overflow: hidden;

    border:
        8px solid #0b1020;

    border-radius:
        18px 18px 8px 8px;

    background:
        #f6f7fb;

    color:
        var(--color-text);

    box-shadow:
        0 25px 60px
        rgba(0, 0, 0, 0.25);
}


.pos-screen-heading {
    display: flex;

    justify-content: space-between;

    margin-bottom: 14px;

    color: #8f96a7;

    font-size: 0.48rem;

    font-weight: 800;
}


.pos-product-list {
    display: grid;

    gap: 6px;
}


.pos-product-list > div {
    display: flex;

    justify-content: space-between;

    gap: 10px;

    padding:
        9px 10px;

    border-radius: 8px;

    background: white;

    font-size: 0.57rem;
}


.pos-product-list span {
    color: #72798a;
}


.pos-total {
    display: flex;

    justify-content: space-between;

    margin-top: 10px;

    padding:
        11px;

    border-radius: 9px;

    color: white;

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

    font-size: 0.63rem;
}


.pos-terminal-base {
    width: 45%;
    height: 55px;

    margin-inline: auto;

    background:
        linear-gradient(
            90deg,
            #c9cdd8,
            #eef0f5,
            #c9cdd8
        );

    clip-path:
        polygon(
            25% 0,
            75% 0,
            100% 100%,
            0 100%
        );
}


.pos-stock-card {
    position: absolute;

    right: 7%;
    bottom: 18px;

    display: flex;

    align-items: center;

    gap: 10px;

    padding:
        12px 14px;

    border-radius: 14px;

    color:
        var(--color-text);

    background: white;

    box-shadow:
        0 18px 45px
        rgba(0, 0, 0, 0.22);
}


.pos-stock-card > i {
    width: 37px;
    height: 37px;

    display: grid;

    place-items: center;

    border-radius: 10px;

    color:
        var(--color-primary);

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


/* ============================================================
   ADVISOR EMPRESA
============================================================ */

.advisor-visual-company {
    display: flex;

    align-items: center;

    justify-content: center;

    gap: 25px;
}


.company-files {
    position: relative;

    width: 180px;
    height: 220px;
}


.company-file {
    position: absolute;

    width: 78px;
    height: 88px;

    display: grid;

    place-items: center;

    border-radius: 16px;

    background: white;

    box-shadow:
        0 15px 35px
        rgba(0, 0, 0, 0.18);

    font-size: 1.45rem;
}


.file-excel {
    left: 0;
    top: 0;

    color: #22c55e;

    transform:
        rotate(-7deg);
}


.file-message {
    right: 0;
    top: 20px;

    color: #22c55e;

    transform:
        rotate(6deg);
}


.file-paper {
    left: 20px;
    bottom: 10px;

    color: #64748b;

    transform:
        rotate(4deg);
}


.file-folder {
    right: 10px;
    bottom: 0;

    color: #f59e0b;

    transform:
        rotate(-5deg);
}


.company-arrow {
    width: 52px;
    height: 52px;

    display: grid;

    place-items: center;

    flex-shrink: 0;

    border-radius: 50%;

    color: white;

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

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


.company-system {
    width: 210px;
    min-height: 185px;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    text-align: center;

    padding: 22px;

    border-radius: 22px;

    background:
        linear-gradient(
            145deg,
            rgba(99, 102, 241, 0.22),
            rgba(255, 255, 255, 0.06)
        );

    border:
        1px solid
        rgba(139, 143, 255, 0.20);
}


.company-system > i {
    width: 58px;
    height: 58px;

    display: grid;

    place-items: center;

    border-radius: 17px;

    color: white;

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

    font-size: 1.25rem;

    margin-bottom: 14px;
}


.company-system small {
    display: block;

    color:
        rgba(255, 255, 255, 0.45);

    font-size: 0.45rem;

    margin-bottom: 3px;
}


.company-system strong {
    color: white;

    font-size: 0.68rem;
}


/* ============================================================
   ADVISOR WORKFLOW
============================================================ */

.advisor-visual-workflow {
    display: flex;

    flex-direction: column;

    justify-content: center;

    gap: 0;

    max-width: 520px;

    margin-inline: auto;
}


.mini-workflow-stage {
    min-height: 62px;

    display: grid;

    grid-template-columns:
        auto 1fr auto;

    align-items: center;

    gap: 12px;

    padding:
        10px 13px;

    border-radius: 13px;

    color:
        rgba(255, 255, 255, 0.50);

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

    border:
        1px solid
        rgba(255, 255, 255, 0.08);
}


.mini-workflow-stage > span {
    width: 33px;
    height: 33px;

    display: grid;

    place-items: center;

    border-radius: 9px;

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

    font-size: 0.5rem;

    font-weight: 800;
}


.mini-workflow-stage small {
    display: block;

    font-size: 0.43rem;

    opacity: 0.55;

    margin-bottom: 2px;
}


.mini-workflow-stage strong {
    display: block;

    font-size: 0.62rem;
}


.mini-workflow-stage.complete {
    color: white;

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


.mini-workflow-stage.complete > i {
    color: #4ade80;
}


.mini-workflow-stage.active {
    color: white;

    background:
        rgba(99, 102, 241, 0.16);

    border-color:
        rgba(139, 143, 255, 0.20);
}


.mini-workflow-stage.active > i {
    color: #aeb6ff;
}


.mini-workflow-line {
    width: 2px;
    height: 22px;

    margin-left: 28px;

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


.mini-workflow-line.complete {
    background: #4ade80;
}


/* ============================================================
   ADVISOR NETWORK
============================================================ */

.advisor-visual-network {
    display: grid;

    place-items: center;

    overflow: hidden;
}


.network-router {
    position: relative;
    z-index: 6;

    width: 120px;
    height: 120px;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    gap: 8px;

    border-radius: 50%;

    color: white;

    background:
        linear-gradient(
            135deg,
            var(--color-primary),
            #0891b2
        );

    box-shadow:
        0 20px 60px
        rgba(6, 182, 212, 0.20);
}


.network-router i {
    font-size: 1.65rem;
}


.network-router span {
    font-size: 0.45rem;

    font-weight: 800;

    letter-spacing: 0.08em;
}


.network-wave {
    position: absolute;

    border-radius: 50%;

    border:
        1px solid
        rgba(103, 232, 249, 0.14);
}


.wave-one {
    width: 190px;
    height: 190px;
}


.wave-two {
    width: 300px;
    height: 300px;
}


.wave-three {
    width: 420px;
    height: 420px;
}


.network-device {
    position: absolute;

    z-index: 5;

    width: 50px;
    height: 50px;

    display: grid;

    place-items: center;

    border-radius: 14px;

    color: #a5f3fc;

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

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

    box-shadow:
        0 15px 35px
        rgba(0, 0, 0, 0.18);
}


.device-laptop {
    left: 16%;
    top: 20%;
}


.device-phone {
    right: 18%;
    top: 18%;
}


.device-camera {
    left: 14%;
    bottom: 12%;
}


.device-pos {
    right: 15%;
    bottom: 12%;
}


/* ============================================================
   ADVISOR SECURITY
============================================================ */

.advisor-visual-security {
    display: grid;

    place-items: center;
}


.security-monitor {
    width:
        min(92%, 560px);

    display: grid;

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

    gap: 7px;

    padding: 8px;

    border-radius: 17px;

    background:
        #070c18;

    box-shadow:
        0 25px 60px
        rgba(0, 0, 0, 0.26);
}


.security-monitor > div {
    min-height: 100px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap: 8px;

    border-radius: 10px;

    color:
        rgba(255, 255, 255, 0.45);

    background:
        radial-gradient(
            circle,
            rgba(99, 102, 241, 0.10),
            transparent 65%
        ),
        #11192c;
}


.security-monitor > div i {
    font-size: 1.4rem;
}


.security-monitor > div span {
    font-size: 0.46rem;
}


.security-monitor-status {
    position: absolute;

    right: 7%;
    bottom: 13px;

    display: flex;

    align-items: center;

    gap: 7px;

    padding:
        8px 11px;

    border-radius: 999px;

    color: #86efac;

    background:
        rgba(11, 18, 36, 0.88);

    border:
        1px solid
        rgba(34, 197, 94, 0.13);

    font-size: 0.53rem;
}


.security-monitor-status i {
    font-size: 0.35rem;
}


/* ============================================================
   SIMPLE TECH
============================================================ */

.home-simple-tech-section {
    position: relative;

    background: white;
}


.home-simple-tech-card {
    position: relative;

    display: grid;

    grid-template-columns:
        minmax(0, 0.85fr)
        minmax(480px, 1.15fr);

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

    align-items: center;

    min-height: 600px;

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

    overflow: hidden;

    border-radius: 34px;

    background:
        radial-gradient(
            circle at 80% 20%,
            rgba(99, 102, 241, 0.11),
            transparent 30%
        ),
        linear-gradient(
            145deg,
            #f9faff,
            #ffffff
        );

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

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


.home-simple-tech-content {
    position: relative;
    z-index: 3;
}


.home-simple-tech-content h2 {
    font-family:
        "Manrope",
        sans-serif;

    font-size:
        clamp(2.5rem, 4vw, 4.4rem);

    line-height: 1.04;

    letter-spacing: -0.05em;

    margin-bottom: 20px;
}


.home-simple-tech-content > p {
    max-width: 600px;

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

    line-height: 1.8;

    margin-bottom: 25px;
}


.home-simple-tech-visual {
    position: relative;

    min-height: 450px;
}


.simple-tech-core {
    position: absolute;

    z-index: 5;

    left: 50%;
    top: 50%;

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

    width: 155px;
    height: 155px;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    text-align: center;

    border-radius: 50%;

    color: white;

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

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


.simple-tech-core-icon {
    font-size: 1.45rem;

    margin-bottom: 8px;
}


.simple-tech-core span {
    color:
        rgba(255, 255, 255, 0.62);

    font-size: 0.46rem;

    letter-spacing: 0.09em;

    margin-bottom: 2px;
}


.simple-tech-core strong {
    font-size: 0.83rem;
}


.simple-tech-item {
    position: absolute;

    z-index: 4;

    min-width: 165px;

    display: flex;

    align-items: center;

    gap: 10px;

    padding:
        13px 15px;

    border-radius: 15px;

    background: white;

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

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

    animation:
        simple-tech-float
        5s ease-in-out
        infinite;
}


.simple-tech-item > 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);
}


.simple-tech-item small {
    display: block;

    color: #999faf;

    font-size: 0.44rem;

    letter-spacing: 0.08em;

    margin-bottom: 2px;
}


.simple-tech-item span {
    color:
        var(--color-text);

    font-size: 0.64rem;

    font-weight: 700;
}


.simple-tech-item-one {
    left: 2%;
    top: 15%;
}


.simple-tech-item-two {
    right: 0;
    top: 18%;

    animation-delay: -1.2s;
}


.simple-tech-item-three {
    left: 3%;
    bottom: 15%;

    animation-delay: -2.4s;
}


.simple-tech-item-four {
    right: 1%;
    bottom: 14%;

    animation-delay: -3.5s;
}


@keyframes simple-tech-float {

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

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

}


.simple-tech-path {
    position: absolute;

    z-index: 1;

    left: 50%;
    top: 50%;

    height: 1px;

    transform-origin:
        left center;

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


.simple-tech-path-one {
    width: 42%;

    transform:
        rotate(-145deg);
}


.simple-tech-path-two {
    width: 42%;

    transform:
        rotate(-35deg);
}


.simple-tech-path-three {
    width: 42%;

    transform:
        rotate(145deg);
}


.simple-tech-path-four {
    width: 42%;

    transform:
        rotate(35deg);
}


/* ============================================================
   TRANSFORMACIÓN
============================================================ */

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


.home-transformation-card {
    display: grid;

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

    align-items: stretch;

    overflow: hidden;

    border-radius: 30px;

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

    background:
        #f9faff;

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


.transformation-side {
    padding:
        clamp(32px, 5vw, 55px);
}


.transformation-before {
    background:
        linear-gradient(
            145deg,
            #fbfbfd,
            #f3f4f8
        );
}


.transformation-after {
    background:
        linear-gradient(
            145deg,
            #f4f4ff,
            #eef9ff
        );
}


.transformation-label {
    width: fit-content;

    padding:
        6px 10px;

    border-radius: 999px;

    color:
        var(--color-primary);

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

    font-size: 0.58rem;

    font-weight: 800;

    letter-spacing: 0.10em;

    margin-bottom: 15px;
}


.transformation-side h3 {
    font-family:
        "Manrope",
        sans-serif;

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

    line-height: 1.1;

    letter-spacing: -0.04em;

    margin-bottom: 28px;
}


.transformation-items {
    display: grid;

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

    gap: 10px;
}


.transformation-items div {
    min-height: 55px;

    display: flex;

    align-items: center;

    gap: 10px;

    padding:
        11px 13px;

    border-radius: 12px;

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

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

    color: #535a6c;

    font-size: 0.73rem;

    font-weight: 600;
}


.transformation-before
.transformation-items i {
    color: #939aaa;
}


.transformation-after
.transformation-items i {
    color:
        var(--color-primary);
}


.transformation-center {
    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap: 12px;

    color: white;

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


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

    display: grid;

    place-items: center;

    border-radius: 50%;

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

    border:
        1px solid
        rgba(255, 255, 255, 0.16);
}


.transformation-center span {
    writing-mode:
        vertical-rl;

    transform:
        rotate(180deg);

    font-size: 0.58rem;

    font-weight: 800;

    letter-spacing: 0.11em;
}


/* ============================================================
   ESCENARIOS
============================================================ */

.home-scenarios-section {
    position: relative;

    overflow: hidden;

    background: white;
}


.home-scenarios-slider {
    display: flex;

    gap: 18px;

    overflow-x: auto;

    scroll-behavior: smooth;

    scroll-snap-type:
        x mandatory;

    scrollbar-width: none;

    padding:
        8px 4px 22px;
}


.home-scenarios-slider::-webkit-scrollbar {
    display: none;
}


.home-scenario-card {
    flex:
        0 0
        calc(
            (100% - 36px) / 3
        );

    min-width: 0;

    scroll-snap-align: start;

    overflow: hidden;

    border-radius: 24px;

    background: white;

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

    box-shadow:
        0 10px 35px
        rgba(15, 23, 42, 0.05);

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


.home-scenario-card:hover {
    transform:
        translateY(-7px);

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


.scenario-photo {
    position: relative;

    height: 230px;

    overflow: hidden;
}


.scenario-photo img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform 0.65s
        cubic-bezier(0.22, 1, 0.36, 1);
}


.home-scenario-card:hover
.scenario-photo img {
    transform:
        scale(1.055);
}


.scenario-photo::after {
    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            180deg,
            transparent 43%,
            rgba(8, 12, 27, 0.58)
        );
}


.scenario-photo > span {
    position: absolute;

    z-index: 3;

    left: 17px;
    bottom: 16px;

    padding:
        6px 9px;

    border-radius: 999px;

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

    color:
        var(--color-text);

    font-size: 0.54rem;

    font-weight: 800;

    letter-spacing: 0.09em;
}


.scenario-content {
    padding: 24px;
}


.scenario-content h3 {
    font-family:
        "Manrope",
        sans-serif;

    font-size: 1.28rem;

    line-height: 1.22;

    margin-bottom: 10px;
}


.scenario-content p {
    color:
        var(--color-text-soft);

    font-size: 0.80rem;

    line-height: 1.68;

    margin-bottom: 18px;
}


.scenario-tags {
    display: flex;

    flex-wrap: wrap;

    gap: 6px;
}


.scenario-tags span {
    padding:
        5px 8px;

    border-radius: 999px;

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

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

    font-size: 0.57rem;

    font-weight: 700;
}


.home-scenarios-hint {
    width: fit-content;

    display: flex;

    align-items: center;

    gap: 10px;

    margin:
        20px auto 0;

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

    font-size: 0.67rem;

    font-weight: 600;
}


/* ============================================================
   FILOSOFÍA
============================================================ */

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


.home-philosophy-card {
    position: relative;

    min-height: 500px;

    overflow: hidden;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: flex-start;

    padding:
        clamp(45px, 7vw, 90px);

    border-radius:
        clamp(28px, 4vw, 42px);

    color: white;

    background:
        radial-gradient(
            circle at 80% 18%,
            rgba(99, 102, 241, 0.34),
            transparent 30%
        ),
        radial-gradient(
            circle at 15% 95%,
            rgba(6, 182, 212, 0.10),
            transparent 25%
        ),
        linear-gradient(
            135deg,
            #0c1125,
            #171d40
        );

    box-shadow:
        0 40px 100px
        rgba(15, 23, 42, 0.16);
}


.home-philosophy-decoration {
    position: absolute;

    width: 540px;
    height: 540px;

    right: -160px;
    top: -130px;

    border-radius: 50%;

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

    box-shadow:
        inset 0 0 0 72px
        rgba(255, 255, 255, 0.015);
}


.home-philosophy-overline {
    position: relative;
    z-index: 2;

    color:
        rgba(255, 255, 255, 0.50);

    font-size: 0.61rem;

    font-weight: 800;

    letter-spacing: 0.12em;

    margin-bottom: 18px;
}


.home-philosophy-card h2 {
    position: relative;
    z-index: 2;

    max-width: 830px;

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

    font-size:
        clamp(2.7rem, 5vw, 5.3rem);

    line-height: 1;

    letter-spacing: -0.055em;

    margin-bottom: 18px;
}


.home-philosophy-card h2 span {
    display: block;

    color: #aeb6ff;
}


.home-philosophy-card > p {
    position: relative;
    z-index: 2;

    color:
        rgba(255, 255, 255, 0.68);

    font-size:
        clamp(1.1rem, 1.8vw, 1.45rem);

    margin-bottom: 28px;
}


.home-philosophy-card > a {
    position: relative;
    z-index: 2;
}


.home-philosophy-icons {
    position: absolute;

    right:
        clamp(40px, 7vw, 100px);

    bottom:
        clamp(35px, 6vw, 70px);

    display: flex;

    gap: 14px;
}


.home-philosophy-icons div {
    width: 58px;
    height: 58px;

    display: grid;

    place-items: center;

    border-radius: 17px;

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

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

    backdrop-filter:
        blur(12px);

    color: #bec4ff;

    animation:
        philosophy-icon-float
        5s ease-in-out
        infinite;
}


.home-philosophy-icons div:nth-child(2) {
    animation-delay: -1.6s;
}


.home-philosophy-icons div:nth-child(3) {
    animation-delay: -3.1s;
}


@keyframes philosophy-icon-float {

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

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

}


/* ============================================================
   IMPACTO
============================================================ */

.home-impact-section {
    background: white;
}


.home-impact-card {
    display: grid;

    grid-template-columns:
        minmax(280px, 0.72fr)
        minmax(0, 1.28fr);

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

    align-items: center;

    padding:
        clamp(40px, 6vw, 70px);

    border-radius: 32px;

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

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

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


.home-impact-overline {
    display: block;

    color:
        var(--color-primary);

    font-size: 0.60rem;

    font-weight: 800;

    letter-spacing: 0.11em;

    margin-bottom: 13px;
}


.home-impact-intro h2 {
    font-family:
        "Manrope",
        sans-serif;

    font-size:
        clamp(2.1rem, 3.6vw, 3.7rem);

    line-height: 1.06;

    letter-spacing: -0.045em;

    margin-bottom: 17px;
}


.home-impact-intro h2 span {
    display: block;
}


.home-impact-intro p {
    max-width: 570px;

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

    line-height: 1.75;
}


.home-impact-stats {
    display: grid;

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

    gap: 11px;
}


.impact-stat {
    position: relative;

    min-height: 170px;

    padding: 22px;

    border-radius: 18px;

    background: white;

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

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


.impact-stat-main {
    background:
        linear-gradient(
            145deg,
            #f1f1ff,
            #ffffff
        );

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


.impact-stat > div {
    width: 39px;
    height: 39px;

    display: grid;

    place-items: center;

    border-radius: 11px;

    color:
        var(--color-primary);

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

    margin-bottom: 22px;
}


.impact-stat strong {
    display: block;

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

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

    line-height: 1;

    margin-bottom: 7px;
}


.impact-stat > span {
    color:
        var(--color-text-soft);

    font-size: 0.66rem;
}


/* ============================================================
   FINAL CHALLENGE
============================================================ */

.home-final-challenge-section {
    padding-top:
        clamp(50px, 6vw, 80px);

    background:
        linear-gradient(
            180deg,
            #ffffff,
            #f8faff
        );
}


.home-final-challenge {
    position: relative;

    overflow: hidden;

    display: grid;

    grid-template-columns:
        minmax(0, 0.95fr)
        minmax(420px, 1.05fr);

    gap:
        clamp(45px, 6vw, 80px);

    align-items: center;

    min-height: 610px;

    padding:
        clamp(45px, 7vw, 85px);

    border-radius:
        clamp(28px, 4vw, 42px);

    color: white;

    background:
        radial-gradient(
            circle at 80% 20%,
            rgba(99, 102, 241, 0.30),
            transparent 30%
        ),
        radial-gradient(
            circle at 10% 90%,
            rgba(6, 182, 212, 0.10),
            transparent 30%
        ),
        linear-gradient(
            135deg,
            #0a1023,
            #161c3d
        );

    box-shadow:
        0 40px 100px
        rgba(15, 23, 42, 0.17);
}


.home-final-challenge-glow {
    position: absolute;

    width: 450px;
    height: 450px;

    right: -180px;
    top: -160px;

    border-radius: 50%;

    background:
        rgba(124, 58, 237, 0.16);

    filter:
        blur(80px);
}


.home-final-challenge-content {
    position: relative;
    z-index: 3;
}


.home-final-challenge h2 {
    font-family:
        "Manrope",
        sans-serif;

    font-size:
        clamp(2.6rem, 4.6vw, 4.8rem);

    line-height: 1.03;

    letter-spacing: -0.055em;

    margin-bottom: 19px;
}


.home-final-challenge h2 span {
    display: block;

    color: #aeb6ff;
}


.home-final-challenge-content > p {
    max-width: 650px;

    color:
        rgba(255, 255, 255, 0.64);

    line-height: 1.8;

    margin-bottom: 26px;
}


.home-final-problems {
    display: grid;

    gap: 9px;

    margin-bottom: 30px;
}


.home-final-problems span {
    display: flex;

    align-items: center;

    gap: 8px;

    color:
        rgba(255, 255, 255, 0.72);

    font-size: 0.72rem;
}


.home-final-problems i {
    width: 20px;
    height: 20px;

    display: grid;

    place-items: center;

    flex-shrink: 0;

    border-radius: 50%;

    color: #86efac;

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

    font-size: 0.48rem;
}


.home-final-challenge-actions {
    display: flex;

    flex-wrap: wrap;

    gap: 10px;
}


/* ============================================================
   FINAL CHALLENGE VISUAL
============================================================ */

.home-final-challenge-visual {
    position: relative;
    z-index: 3;
}


.challenge-flow {
    display: grid;

    gap: 0;
}


.challenge-flow-item {
    min-height: 86px;

    display: grid;

    grid-template-columns:
        auto 1fr auto;

    align-items: center;

    gap: 13px;

    padding:
        14px 16px;

    border-radius: 16px;

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

    border:
        1px solid
        rgba(255, 255, 255, 0.08);
}


.challenge-flow-item-active {
    background:
        linear-gradient(
            135deg,
            rgba(99, 102, 241, 0.22),
            rgba(124, 58, 237, 0.12)
        );

    border-color:
        rgba(139, 143, 255, 0.20);

    box-shadow:
        0 18px 45px
        rgba(79, 70, 229, 0.13);
}


.challenge-flow-item > span {
    width: 42px;
    height: 42px;

    display: grid;

    place-items: center;

    border-radius: 12px;

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

    color:
        rgba(255, 255, 255, 0.60);

    font-size: 0.54rem;

    font-weight: 800;
}


.challenge-flow-item small {
    display: block;

    color:
        rgba(255, 255, 255, 0.40);

    font-size: 0.44rem;

    letter-spacing: 0.09em;

    margin-bottom: 3px;
}


.challenge-flow-item strong {
    display: block;

    font-size: 0.72rem;
}


.challenge-flow-item > i {
    width: 39px;
    height: 39px;

    display: grid;

    place-items: center;

    border-radius: 11px;

    color: #bec4ff;

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


.challenge-flow-line {
    width: 2px;
    height: 22px;

    margin-left: 35px;

    background:
        linear-gradient(
            180deg,
            rgba(139, 143, 255, 0.40),
            rgba(139, 143, 255, 0.10)
        );
}


.challenge-result-card {
    display: flex;

    align-items: center;

    gap: 12px;

    margin-top: 22px;

    padding:
        16px 18px;

    border-radius: 17px;

    color:
        var(--color-text);

    background: white;

    box-shadow:
        0 22px 55px
        rgba(0, 0, 0, 0.22);
}


.challenge-result-card > i {
    width: 44px;
    height: 44px;

    display: grid;

    place-items: center;

    flex-shrink: 0;

    border-radius: 13px;

    color: white;

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


.challenge-result-card small {
    display: block;

    color: #969dad;

    font-size: 0.45rem;

    letter-spacing: 0.08em;

    margin-bottom: 2px;
}


.challenge-result-card strong {
    display: block;

    font-size: 0.72rem;
}


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

@media (max-width: 1250px) {

    .home-hero-container {
        grid-template-columns:
            minmax(0, 0.9fr)
            minmax(450px, 1.1fr);

        gap: 45px;
    }


    .home-concept-stage {
        min-height: 550px;
    }


    .concept-browser,
    .concept-admin-board,
    .concept-workflow,
    .concept-security-center {
        min-height: 450px;
    }

}


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

@media (max-width: 1100px) {

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


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

        gap: 65px;
    }


    .home-hero-content {
        max-width: 800px;
    }


    .home-concept-stage {
        width:
            min(100%, 760px);

        min-height: 600px;

        margin-inline: auto;
    }


    .home-advisor-layout {
        grid-template-columns:
            minmax(310px, 0.75fr)
            minmax(0, 1.25fr);

        gap: 30px;
    }


    .home-scenario-card {
        flex-basis:
            calc(
                (100% - 18px) / 2
            );
    }


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

        gap: 35px;
    }


    .home-simple-tech-content {
        max-width: 760px;
    }


    .home-simple-tech-visual {
        width:
            min(100%, 700px);

        margin-inline: auto;
    }

}


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

@media (max-width: 991px) {

    .home-hero {
        padding:
            135px 0 90px;
    }


    .home-advisor-heading {
        grid-template-columns:
            1fr;

        gap: 20px;
    }


    .home-advisor-layout {
        grid-template-columns:
            1fr;

        gap: 35px;
    }


    .home-advisor-options {
        grid-template-columns:
            repeat(2, 1fr);
    }


    .home-advisor-result-v2 {
        min-height: 620px;
    }


    .home-impact-card {
        grid-template-columns:
            1fr;

        gap: 35px;
    }


    .home-transformation-card {
        grid-template-columns:
            1fr;
    }


    .transformation-center {
        min-height: 88px;

        flex-direction: row;
    }


    .transformation-center span {
        writing-mode: initial;

        transform: none;
    }


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


    .home-final-challenge {
        grid-template-columns:
            1fr;

        gap: 55px;
    }


    .home-final-challenge-visual {
        width:
            min(100%, 650px);
    }

}


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

@media (max-width: 767px) {

    .home-hero-title {
        font-size:
            clamp(2.8rem, 12vw, 4.4rem);
    }


    .home-goal-selector {
        display: grid;

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


    .home-goal-button {
        width: 100%;
    }


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


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


    .home-hero-trust {
        display: grid;
    }


    .home-concept-stage {
        min-height: 540px;
    }


    .concept-floating-card {
        display: none;
    }


    .concept-browser,
    .concept-admin-board,
    .concept-workflow,
    .concept-security-center {
        min-height: 430px;
    }


    .home-advisor-options {
        grid-template-columns:
            1fr;
    }


    .advisor-fixed-actions {
        flex-direction: column;
    }


    .advisor-fixed-actions
    .button {
        width: 100%;
    }


    .home-advisor-result-v2 {
        min-height: 610px;
    }


    .advisor-visual-company {
        gap: 13px;
    }


    .company-files {
        transform:
            scale(0.86);
    }


    .company-arrow {
        width: 43px;
        height: 43px;
    }


    .company-system {
        width: 180px;
    }


    .home-scenario-card {
        flex-basis: 86%;
    }


    .home-impact-stats {
        grid-template-columns:
            repeat(2, 1fr);
    }


    .home-philosophy-icons {
        display: none;
    }

}


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

@media (max-width: 575px) {

    .home-hero {
        padding:
            110px 0 72px;
    }


    .home-hero-title {
        font-size:
            clamp(2.55rem, 13vw, 3.75rem);
    }


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


    .home-goal-selector {
        grid-template-columns:
            1fr 1fr;

        gap: 7px;
    }


    .home-goal-button {
        min-height: 46px;

        padding:
            0 8px;

        font-size: 0.65rem;
    }


    .home-concept-stage {
        min-height: 455px;
    }


    .concept-browser,
    .concept-admin-board,
    .concept-workflow,
    .concept-security-center {
        width: 100%;

        min-height: 390px;

        border-radius: 21px;
    }


    /* VENDER */

    .concept-browser-header {
        height: 43px;
    }


    .sales-storefront {
        min-height: 345px;

        padding: 17px;
    }


    .sales-products {
        gap: 6px;
    }


    .sales-product {
        min-height: 135px;

        padding: 8px;
    }


    .sales-product > div {
        font-size: 1.2rem;
    }


    /* ADMIN */

    .concept-admin-board {
        grid-template-columns:
            46px 1fr;
    }


    .concept-admin-sidebar {
        padding:
            13px 6px;
    }


    .concept-admin-logo {
        width: 31px;
        height: 31px;

        font-size: 0.5rem;
    }


    .concept-admin-sidebar span {
        width: 31px;
        height: 31px;
    }


    .concept-admin-content {
        padding: 15px;
    }


    .concept-admin-kpis {
        grid-template-columns:
            repeat(2, 1fr);
    }


    .concept-admin-kpis > div:nth-child(3) {
        grid-column:
            1 / -1;
    }


    .concept-admin-kpis > div {
        min-height: 76px;
    }


    .admin-table-row {
        grid-template-columns:
            1fr 0.8fr;

        padding:
            0 10px;
    }


    .admin-table-row span:nth-child(2) {
        display: none;
    }


    /* WORKFLOW */

    .concept-workflow {
        padding: 20px;
    }


    .workflow-heading {
        margin-bottom: 22px;
    }


    .workflow-stage {
        min-height: 57px;
    }


    /* SECURITY */

    .concept-security-center {
        padding: 18px;
    }


    .camera-scene {
        height: 90px;
    }


    .security-heading > span {
        display: none;
    }


    /* ADVISOR */

    .home-advisor-result-v2 {
        min-height: auto;

        padding:
            28px 20px;

        border-radius: 23px;
    }


    .advisor-dynamic-visual {
        min-height: 260px;
    }


    .advisor-location-card {
        left: 12px;
        right: 12px;
        bottom: 12px;

        min-width: 0;
    }


    .catalog-product-detail {
        right: 0;
    }


    .orders-ticket {
        width: 95%;
    }


    .orders-status-card {
        right: 0;
        top: 5px;
    }


    .pos-terminal {
        width: 92%;
    }


    .pos-stock-card {
        right: 0;
        bottom: 4px;
    }


    .advisor-visual-company {
        flex-direction: column;

        gap: 8px;
    }


    .company-files {
        width: 170px;
        height: 115px;

        transform:
            scale(0.75);
    }


    .company-arrow {
        transform:
            rotate(90deg);
    }


    .company-system {
        width: 210px;
        min-height: 100px;

        flex-direction: row;

        gap: 12px;

        text-align: left;
    }


    .company-system > i {
        margin-bottom: 0;
    }


    .wave-three {
        width: 330px;
        height: 330px;
    }


    /* SIMPLE TECH */

    .home-simple-tech-card {
        padding:
            32px 21px;

        border-radius: 24px;
    }


    .home-simple-tech-visual {
        min-height: 500px;
    }


    .simple-tech-core {
        width: 125px;
        height: 125px;
    }


    .simple-tech-item {
        min-width: 140px;

        padding:
            10px 11px;
    }


    .simple-tech-item-one {
        left: 0;
        top: 5%;
    }


    .simple-tech-item-two {
        right: 0;
        top: 7%;
    }


    .simple-tech-item-three {
        left: 0;
        bottom: 7%;
    }


    .simple-tech-item-four {
        right: 0;
        bottom: 5%;
    }


    /* TRANSFORMATION */

    .home-transformation-card {
        border-radius: 22px;
    }


    .transformation-side {
        padding:
            28px 22px;
    }


    .transformation-items {
        grid-template-columns:
            1fr;
    }


    .transformation-center {
        min-height: 72px;
    }


    /* SCENARIOS */

    .home-scenario-card {
        flex-basis: 91%;
    }


    .scenario-photo {
        height: 210px;
    }


    /* PHILOSOPHY */

    .home-philosophy-card {
        min-height: 420px;

        padding:
            38px 24px;

        border-radius: 26px;
    }


    .home-philosophy-card h2 {
        font-size:
            clamp(2.3rem, 12vw, 3.5rem);
    }


    /* IMPACT */

    .home-impact-card {
        padding:
            30px 20px;

        border-radius: 24px;
    }


    .home-impact-stats {
        grid-template-columns:
            1fr 1fr;

        gap: 8px;
    }


    .impact-stat {
        min-height: 140px;

        padding: 16px;
    }


    .impact-stat > div {
        margin-bottom: 16px;
    }


    .impact-stat strong {
        font-size: 1.8rem;
    }


    /* FINAL */

    .home-final-challenge {
        min-height: auto;

        padding:
            38px 23px;

        border-radius: 26px;
    }


    .home-final-challenge h2 {
        font-size:
            clamp(2.3rem, 11vw, 3.5rem);
    }


    .home-final-challenge-actions {
        flex-direction: column;
    }


    .home-final-challenge-actions
    .button {
        width: 100%;
    }

}


/* ============================================================
   DISPOSITIVOS PEQUEÑOS
============================================================ */

@media (max-width: 390px) {

    .home-goal-selector {
        grid-template-columns:
            1fr;
    }


    .concept-admin-kpis {
        grid-template-columns:
            1fr;
    }


    .concept-admin-kpis > div:nth-child(3) {
        grid-column: auto;
    }


    .security-camera-grid {
        grid-template-columns:
            1fr;
    }


    .security-camera:nth-child(2),
    .security-camera:nth-child(3) {
        display: none;
    }


    .security-network {
        grid-column:
            auto;
    }


    .home-impact-stats {
        grid-template-columns:
            1fr;
    }


    .advisor-map-user {
        display: none;
    }

}


/* ============================================================
   PANTALLAS GRANDES
============================================================ */

@media (min-width: 1600px) {

    .home-hero-container {
        gap: 100px;
    }


    .home-concept-stage {
        min-height: 630px;
    }


    .concept-browser,
    .concept-admin-board,
    .concept-workflow,
    .concept-security-center {
        width: 690px;
        min-height: 490px;
    }

}


/* ============================================================
   REDUCIR MOVIMIENTO
============================================================ */

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

    .concept-floating-card,
    .simple-tech-item,
    .home-philosophy-icons div,
    .workflow-stage.active > i {
        animation: none !important;
    }


    .home-changing-word,
    .home-concept-panel,
    .advisor-dynamic-visual,
    .scenario-photo img,
    .home-scenario-card {
        transition: none !important;
    }

} */

/* ============================================================
   AJUSTE DE ESPACIADOS ENTRE SECCIONES - INDEX
============================================================ */

/* Recomendador */
.home-advisor-section {
    padding-bottom:
        clamp(55px, 6vw, 85px);
}


/* Tecnología sin complicar */
.home-simple-tech-section {
    padding-top:
        clamp(25px, 3vw, 45px);

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


/* Evita altura innecesaria */
.home-simple-tech-card {
    min-height: 520px;
}


/* Transformación */
.home-transformation-section {
    padding-top:
        clamp(55px, 6vw, 85px);

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


/* Escenarios */
.home-scenarios-section {
    padding-top:
        clamp(55px, 6vw, 85px);

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


/* Filosofía */
.home-philosophy-section {
    padding-top:
        clamp(45px, 5vw, 70px);

    padding-bottom:
        clamp(55px, 6vw, 85px);
}


/* Impacto */
.home-impact-section {
    padding-top:
        clamp(45px, 5vw, 70px);

    padding-bottom:
        clamp(55px, 6vw, 85px);
}


/* Cierre */
.home-final-challenge-section {
    padding-top:
        clamp(45px, 5vw, 70px);

    padding-bottom:
        clamp(70px, 8vw, 110px);
}


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

@media (max-width: 991px) {

    .home-advisor-section,
    .home-simple-tech-section,
    .home-transformation-section,
    .home-scenarios-section,
    .home-philosophy-section,
    .home-impact-section,
    .home-final-challenge-section {

        padding-top:
            55px;

        padding-bottom:
            70px;
    }

}


@media (max-width: 575px) {

    .home-advisor-section,
    .home-simple-tech-section,
    .home-transformation-section,
    .home-scenarios-section,
    .home-philosophy-section,
    .home-impact-section,
    .home-final-challenge-section {

        padding-top:
            42px;

        padding-bottom:
            55px;
    }


    .home-simple-tech-card {
        min-height: auto;
    }

}



/* ============================================================
   HOME DEMO SHOWCASE
   YA PÍDELO
============================================================ */

.home-demo-section {
    position: relative;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 8% 18%,
            rgba(99, 102, 241, 0.08),
            transparent 25%
        ),
        radial-gradient(
            circle at 94% 80%,
            rgba(6, 182, 212, 0.05),
            transparent 22%
        ),
        linear-gradient(
            180deg,
            #ffffff,
            #f8faff
        );
}


/* ============================================================
   HEADING
============================================================ */

.home-demo-heading {
    display: grid;

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

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

    align-items: end;

    margin-bottom: 38px;
}


.home-demo-heading h2 {
    max-width: 820px;

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

    font-size:
        clamp(2.6rem, 4.6vw, 4.9rem);

    line-height: 1.03;

    letter-spacing: -0.052em;
}


.home-demo-heading > p {
    color:
        var(--color-text-soft);

    line-height: 1.8;
}


/* ============================================================
   TABS
============================================================ */

.home-demo-tabs {
    width: fit-content;

    max-width: 100%;

    display: flex;

    gap: 4px;

    margin:
        0 auto 34px;

    padding: 5px;

    overflow-x: auto;

    border-radius: 999px;

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

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

    box-shadow:
        0 12px 30px
        rgba(15, 23, 42, 0.08);

    scrollbar-width: none;
}


.home-demo-tabs::-webkit-scrollbar {
    display: none;
}


.home-demo-tab {
    min-width: 120px;

    min-height: 45px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 7px;

    flex-shrink: 0;

    padding:
        0 17px;

    border-radius: 999px;

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

    background: transparent;

    font-size: 0.68rem;

    font-weight: 700;

    transition:
        transform 0.3s ease,
        color 0.3s ease,
        background 0.3s ease,
        box-shadow 0.3s ease;
}


.home-demo-tab span {
    color:
        rgba(79, 70, 229, 0.48);

    font-size: 0.45rem;
}


.home-demo-tab:hover {
    color:
        var(--color-text);

    transform:
        translateY(-1px);
}


.home-demo-tab.active {
    color: white;

    background:
        #10131c;

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


.home-demo-tab.active span {
    color:
        rgba(255, 255, 255, 0.48);
}


/* ============================================================
   SHOWCASE
============================================================ */

.home-demo-showcase {
    display: grid;

    grid-template-columns:
        minmax(520px, 1.08fr)
        minmax(0, 0.92fr);

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

    align-items: center;

    min-height: 650px;
}


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

.home-demo-visual {
    position: relative;

    min-height: 560px;

    display: grid;

    place-items: center;

    overflow: hidden;

    border-radius: 31px;

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

    background:
        radial-gradient(
            circle at 15% 15%,
            rgba(99, 102, 241, 0.13),
            transparent 28%
        ),
        radial-gradient(
            circle at 90% 85%,
            rgba(6, 182, 212, 0.08),
            transparent 27%
        ),
        linear-gradient(
            145deg,
            #f4f5ff,
            #eef7ff
        );

    box-shadow:
        0 30px 80px
        rgba(15, 23, 42, 0.10);

    transition:
        opacity 0.25s ease,
        transform 0.25s ease;
}


.home-demo-visual.is-changing {
    opacity: 0;

    transform:
        scale(0.985);
}


.demo-scene {
    position: relative;

    width: 100%;
    min-height: 560px;

    display: grid;

    place-items: center;
}


/* ============================================================
   CURSOR FALSO
============================================================ */

.demo-cursor {
    position: absolute;

    z-index: 20;

    width: 34px;
    height: 34px;

    color:
        #111827;

    font-size: 1.2rem;

    filter:
        drop-shadow(
            0 4px 5px
            rgba(0,0,0,.18)
        );

    pointer-events: none;
}


.demo-cursor > span {
    position: absolute;

    left: -6px;
    top: -6px;

    width: 30px;
    height: 30px;

    border-radius: 50%;

    border:
        2px solid
        rgba(79,70,229,.35);

    opacity: 0;

    transform:
        scale(.4);
}


/* ============================================================
   CLICK DEL CURSOR
============================================================ */

@keyframes demo-click-ring {

    0% {
        opacity: 0;
        transform: scale(.4);
    }

    30% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        transform: scale(1.5);
    }

}


/* ============================================================
   PRESENCIA
============================================================ */

.demo-browser {
    position: relative;

    z-index: 3;

    width:
        min(88%, 610px);

    overflow: hidden;

    border-radius: 24px;

    background: white;

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

    box-shadow:
        0 28px 70px
        rgba(15,23,42,.15);

    animation:
        demo-window-enter
        .75s
        cubic-bezier(.22,1,.36,1)
        both;
}


@keyframes demo-window-enter {

    from {
        opacity: 0;

        transform:
            translateY(30px)
            scale(.96);
    }

    to {
        opacity: 1;

        transform:
            translateY(0)
            scale(1);
    }

}


.demo-browser-top {
    min-height: 46px;

    display: grid;

    grid-template-columns:
        auto 1fr auto;

    align-items: center;

    gap: 12px;

    padding:
        0 14px;

    background:
        #f5f6fa;

    border-bottom:
        1px solid
        #e9ebf1;
}


.demo-browser-dots {
    display: flex;

    gap: 5px;
}


.demo-browser-dots span {
    width: 7px;
    height: 7px;

    border-radius: 50%;

    background:
        #d2d5de;
}


.demo-browser-address {
    max-width: 230px;

    padding:
        6px 10px;

    border-radius: 7px;

    color: #9198a7;

    background: white;

    font-size: .45rem;
}


/* ============================================================
   WEBSITE
============================================================ */

.demo-website {
    padding: 21px;
}


.demo-website-nav {
    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-bottom: 30px;
}


.demo-website-nav strong {
    color:
        var(--color-primary);

    font-size: .57rem;
}


.demo-website-nav > div {
    display: flex;

    gap: 6px;
}


.demo-website-nav span {
    width: 38px;
    height: 5px;

    border-radius: 999px;

    background:
        #e1e4ea;
}


.demo-website-hero {
    min-height: 310px;

    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(180px, .72fr);

    gap: 24px;

    align-items: center;
}


.demo-website-copy small {
    display: block;

    color:
        var(--color-primary);

    font-size: .43rem;

    font-weight: 800;

    letter-spacing: .09em;

    margin-bottom: 8px;

    animation:
        demo-content-enter
        .6s .15s
        both;
}


.demo-website-copy h4 {
    max-width: 350px;

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

    font-size:
        clamp(1.5rem, 2.4vw, 2.25rem);

    line-height: 1.07;

    letter-spacing: -.04em;

    margin-bottom: 15px;

    animation:
        demo-content-enter
        .6s .27s
        both;
}


.demo-website-copy p {
    width: 79%;
    height: 7px;

    margin-bottom: 6px;

    border-radius: 999px;

    background:
        #e2e5eb;

    animation:
        demo-content-enter
        .6s .36s
        both;
}


.demo-website-copy p.short {
    width: 55%;
}


.demo-website-copy button {
    min-width: 105px;

    min-height: 36px;

    margin-top: 11px;

    border-radius: 9px;

    color: white;

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

    font-size: .51rem;

    font-weight: 700;

    animation:
        demo-content-enter
        .6s .47s
        both;
}


@keyframes demo-content-enter {

    from {
        opacity: 0;

        transform:
            translateY(12px);
    }

    to {
        opacity: 1;

        transform:
            translateY(0);
    }

}


.demo-website-image {
    min-height: 245px;

    display: grid;

    place-items: center;

    border-radius: 18px;

    color: white;

    background:
        linear-gradient(
            145deg,
            #6366f1,
            #06b6d4
        );

    font-size: 3rem;

    animation:
        demo-image-enter
        .75s .30s
        cubic-bezier(.22,1,.36,1)
        both;
}


@keyframes demo-image-enter {

    from {
        opacity: 0;

        transform:
            translateX(25px)
            scale(.94);
    }

    to {
        opacity: 1;

        transform:
            translateX(0)
            scale(1);
    }

}


/* ============================================================
   CURSOR PRESENCE
============================================================ */

.demo-presence-cursor {
    left: 30%;
    top: 63%;

    animation:
        demo-presence-cursor
        7s
        ease-in-out
        infinite;
}


.demo-presence-cursor > span {
    animation:
        demo-presence-click
        7s
        infinite;
}


@keyframes demo-presence-cursor {

    0%,
    20% {
        left: 18%;
        top: 30%;
    }

    42% {
        left: 32%;
        top: 66%;
    }

    56% {
        left: 32%;
        top: 66%;
    }

    78%,
    100% {
        left: 73%;
        top: 55%;
    }

}


@keyframes demo-presence-click {

    0%,
    44% {
        opacity: 0;
        transform: scale(.4);
    }

    48% {
        opacity: 1;
        transform: scale(.5);
    }

    54% {
        opacity: 0;
        transform: scale(1.5);
    }

    100% {
        opacity: 0;
    }

}


/* ============================================================
   PHONE
============================================================ */

.demo-presence-phone {
    position: absolute;

    z-index: 8;

    right: 2%;
    bottom: 12px;

    width: 140px;
    min-height: 245px;

    display: flex;

    flex-direction: column;

    align-items: center;

    text-align: center;

    padding:
        14px 12px;

    border-radius: 25px;

    color:
        var(--color-text);

    background: white;

    border:
        6px solid
        #11131a;

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

    opacity: 0;

    animation:
        demo-phone-show
        7s
        infinite;
}


@keyframes demo-phone-show {

    0%,
    48% {
        opacity: 0;

        transform:
            translateY(35px);
    }

    62%,
    90% {
        opacity: 1;

        transform:
            translateY(0);
    }

    100% {
        opacity: 0;

        transform:
            translateY(10px);
    }

}


.demo-phone-notch {
    width: 40px;
    height: 5px;

    margin-bottom: 24px;

    border-radius: 999px;

    background:
        #dfe2e8;
}


.demo-presence-phone > i {
    width: 50px;
    height: 50px;

    display: grid;

    place-items: center;

    margin-bottom: 13px;

    border-radius: 15px;

    color: white;

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


.demo-presence-phone strong {
    font-size: .65rem;

    margin-bottom: 5px;
}


.demo-presence-phone small {
    color: #16a34a;

    font-size: .47rem;
}


.demo-presence-phone > div:last-child {
    width: 100%;

    min-height: 34px;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 6px;

    margin-top: auto;

    border-radius: 9px;

    color: #15803d;

    background:
        rgba(34,197,94,.08);

    font-size: .47rem;

    font-weight: 700;
}


/* ============================================================
   TOAST
============================================================ */

.demo-toast {
    position: absolute;

    z-index: 15;

    display: flex;

    align-items: center;

    gap: 10px;

    padding:
        11px 13px;

    border-radius: 13px;

    color:
        var(--color-text);

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

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


.demo-toast > i {
    width: 37px;
    height: 37px;

    display: grid;

    place-items: center;

    border-radius: 11px;

    color: #16a34a;

    background:
        rgba(34,197,94,.09);
}


.demo-toast small {
    display: block;

    color: #9aa1ae;

    font-size: .40rem;

    margin-bottom: 2px;
}


.demo-toast strong {
    display: block;

    font-size: .58rem;
}


.demo-presence-toast {
    left: 2%;
    bottom: 24px;

    opacity: 0;

    animation:
        demo-toast-show
        7s
        infinite;
}


@keyframes demo-toast-show {

    0%,
    66% {
        opacity: 0;

        transform:
            translateY(15px);
    }

    75%,
    92% {
        opacity: 1;

        transform:
            translateY(0);
    }

    100% {
        opacity: 0;

        transform:
            translateY(8px);
    }

}


/* ============================================================
   INFO
============================================================ */

.home-demo-info {
    position: relative;

    max-width: 640px;
}


.home-demo-icon {
    width: 49px;
    height: 49px;

    display: grid;

    place-items: center;

    margin-bottom: 23px;

    border-radius: 14px;

    color: white;

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

    box-shadow:
        0 14px 32px
        rgba(79,70,229,.20);
}


.home-demo-overline {
    display: block;

    color:
        var(--color-primary);

    font-size: .50rem;

    font-weight: 800;

    letter-spacing: .1em;

    margin-bottom: 12px;
}


.home-demo-info h3 {
    font-family:
        "Manrope",
        sans-serif;

    font-size:
        clamp(2.25rem, 3.7vw, 3.9rem);

    line-height: 1.04;

    letter-spacing: -.048em;

    margin-bottom: 18px;
}


.home-demo-info > p {
    color:
        var(--color-text-soft);

    line-height: 1.8;

    margin-bottom: 23px;
}


/* ============================================================
   BENEFITS
============================================================ */

.home-demo-benefits {
    display: flex;

    flex-wrap: wrap;

    gap: 7px;

    margin-bottom: 27px;
}


.home-demo-benefits > div {
    display: inline-flex;

    align-items: center;

    gap: 6px;

    padding:
        7px 10px;

    border-radius: 999px;

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

    background:
        rgba(79,70,229,.055);

    font-size: .58rem;

    font-weight: 650;
}


.home-demo-benefits i {
    color: #16a34a;

    font-size: .43rem;
}


/* ============================================================
   LINK
============================================================ */

.home-demo-link {
    display: inline-flex;

    align-items: center;

    gap: 11px;

    color:
        var(--color-text);

    font-size: .78rem;

    font-weight: 700;

    transition:
        color .25s ease,
        gap .25s ease;
}


.home-demo-link:hover {
    gap: 17px;

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


/* ============================================================
   AUTOPLAY
============================================================ */

.home-demo-autoplay {
    margin-top: 30px;
}


.home-demo-progress {
    width: 100%;
    height: 3px;

    overflow: hidden;

    margin-bottom: 8px;

    border-radius: 999px;

    background:
        rgba(15,23,42,.07);
}


.home-demo-progress span {
    display: block;

    width: 0;
    height: 100%;

    border-radius: inherit;

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


.home-demo-autoplay small {
    color:
        var(--color-text-light);

    font-size: .49rem;
}


/* ============================================================
   OPERATION DEMO
============================================================ */

.demo-operation-window {
    width:
        min(88%, 610px);

    overflow: hidden;

    border-radius: 23px;

    background: white;

    box-shadow:
        0 28px 70px
        rgba(15,23,42,.15);

    animation:
        demo-window-enter
        .7s
        both;
}


.demo-operation-header {
    min-height: 50px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding:
        0 16px;

    color: white;

    background:
        #10162e;
}


.demo-operation-header strong {
    font-size: .59rem;
}


.demo-operation-header span {
    color: #86efac;

    font-size: .46rem;
}


.demo-operation-body {
    display: grid;

    grid-template-columns:
        58px 1fr;

    min-height: 410px;
}


.demo-operation-sidebar {
    padding:
        14px 8px;

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 11px;

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

    background:
        #11172d;
}


.demo-operation-sidebar i {
    width: 33px;
    height: 33px;

    display: grid;

    place-items: center;

    border-radius: 9px;
}


.demo-operation-sidebar i.active {
    color: white;

    background:
        rgba(99,102,241,.27);
}


.demo-operation-content {
    padding: 17px;

    background:
        #f7f8fc;
}


.demo-operation-kpis {
    display: grid;

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

    gap: 8px;

    margin-bottom: 13px;
}


.demo-operation-kpis > div {
    min-height: 78px;

    padding: 12px;

    border-radius: 11px;

    background: white;
}


.demo-operation-kpis small {
    display: block;

    color: #9aa0ad;

    font-size: .40rem;

    margin-bottom: 6px;
}


.demo-operation-kpis strong {
    font-size: .78rem;
}


.demo-sale-panel {
    min-height: 245px;

    display: grid;

    grid-template-columns:
        1.1fr .9fr;

    gap: 10px;
}


.demo-product-grid {
    display: grid;

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

    gap: 7px;
}


.demo-product {
    min-height: 70px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 9px;

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

    background: white;

    border:
        1px solid
        #eceef3;

    font-size: .53rem;
}


.demo-ticket {
    display: flex;

    flex-direction: column;

    padding: 12px;

    border-radius: 11px;

    background: white;
}


.demo-ticket > small {
    color: #999fac;

    font-size: .42rem;

    margin-bottom: 10px;
}


.demo-ticket-row {
    display: flex;

    justify-content: space-between;

    gap: 10px;

    padding:
        8px 0;

    border-bottom:
        1px solid
        #eceef3;

    font-size: .50rem;

    opacity: 0;
}


.demo-ticket-row.row-one {
    animation:
        demo-ticket-row
        8s 2.2s
        infinite;
}


.demo-ticket-row.row-two {
    animation:
        demo-ticket-row
        8s 3.8s
        infinite;
}


@keyframes demo-ticket-row {

    0% {
        opacity: 0;

        transform:
            translateX(10px);
    }

    12%,
    80% {
        opacity: 1;

        transform:
            translateX(0);
    }

    100% {
        opacity: 0;
    }

}


.demo-ticket-total {
    display: flex;

    justify-content: space-between;

    margin-top: auto;

    padding-top: 12px;

    font-size: .60rem;

    font-weight: 800;
}


.demo-ticket button {
    min-height: 34px;

    margin-top: 11px;

    border-radius: 8px;

    color: white;

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

    font-size: .49rem;
}


/* ============================================================
   OPERATION CURSOR
============================================================ */

.demo-operation-cursor {
    left: 28%;
    top: 49%;

    animation:
        demo-operation-cursor
        8s
        infinite;
}


.demo-operation-cursor > span {
    animation:
        demo-operation-click
        8s
        infinite;
}


@keyframes demo-operation-cursor {

    0%,
    12% {
        left: 22%;
        top: 38%;
    }

    28%,
    38% {
        left: 29%;
        top: 53%;
    }

    48%,
    60% {
        left: 48%;
        top: 53%;
    }

    75%,
    90% {
        left: 76%;
        top: 76%;
    }

    100% {
        left: 22%;
        top: 38%;
    }

}


@keyframes demo-operation-click {

    0%,
    24% {
        opacity: 0;
    }

    28% {
        opacity: 1;

        transform:
            scale(.4);
    }

    33% {
        opacity: 0;

        transform:
            scale(1.5);
    }

    45% {
        opacity: 0;
    }

    49% {
        opacity: 1;

        transform:
            scale(.4);
    }

    54% {
        opacity: 0;

        transform:
            scale(1.5);
    }

    74% {
        opacity: 0;
    }

    78% {
        opacity: 1;

        transform:
            scale(.4);
    }

    83% {
        opacity: 0;

        transform:
            scale(1.5);
    }

}


/* ============================================================
   SUCCESS SALE
============================================================ */

.demo-sale-success {
    position: absolute;

    z-index: 16;

    right: 5%;
    bottom: 28px;

    display: flex;

    align-items: center;

    gap: 9px;

    padding:
        11px 13px;

    border-radius: 12px;

    color: #15803d;

    background: white;

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

    font-size: .56rem;

    opacity: 0;

    animation:
        demo-sale-success
        8s
        infinite;
}


.demo-sale-success i {
    color: #16a34a;
}


@keyframes demo-sale-success {

    0%,
    78% {
        opacity: 0;

        transform:
            translateY(12px);
    }

    85%,
    94% {
        opacity: 1;

        transform:
            translateY(0);
    }

    100% {
        opacity: 0;
    }

}


/* ============================================================
   AUTOMATION
============================================================ */

.demo-workflow {
    width:
        min(92%, 650px);

    min-height: 420px;

    display: flex;

    align-items: center;

    justify-content: center;
}


.demo-workflow-node {
    min-width: 120px;

    min-height: 110px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap: 8px;

    padding: 14px;

    border-radius: 16px;

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

    background: white;

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

    box-shadow:
        0 12px 30px
        rgba(15,23,42,.07);

    opacity: 0;

    animation:
        demo-node-appear
        .6s
        forwards;

    animation-delay:
        var(--demo-node-delay);
}


.demo-workflow-node i {
    width: 38px;
    height: 38px;

    display: grid;

    place-items: center;

    border-radius: 11px;

    color:
        var(--color-primary);

    background:
        rgba(79,70,229,.08);
}


.demo-workflow-node strong {
    font-size: .58rem;
}


.demo-workflow-node small {
    color: #9aa1ae;

    font-size: .42rem;
}


.demo-workflow-node.complete {
    border-color:
        rgba(34,197,94,.20);
}


.demo-workflow-node.complete i {
    color: #16a34a;

    background:
        rgba(34,197,94,.09);
}


.demo-workflow-node.active {
    color: white;

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


.demo-workflow-node.active i {
    color: white;

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


.demo-workflow-node.active small {
    color:
        rgba(255,255,255,.56);
}


@keyframes demo-node-appear {

    from {
        opacity: 0;

        transform:
            translateY(15px);
    }

    to {
        opacity: 1;

        transform:
            translateY(0);
    }

}


.demo-workflow-line {
    position: relative;

    width: 55px;
    height: 2px;

    overflow: hidden;

    background:
        #dfe2e9;
}


.demo-workflow-line::after {
    content: "";

    position: absolute;

    inset: 0;

    transform:
        translateX(-100%);

    background:
        var(--color-primary);

    animation:
        demo-workflow-progress
        .6s
        forwards;

    animation-delay:
        var(--demo-line-delay);
}


@keyframes demo-workflow-progress {

    to {
        transform:
            translateX(0);
    }

}


/* ============================================================
   WORKFLOW NOTIFICATION
============================================================ */

.demo-workflow-notification {
    position: absolute;

    z-index: 15;

    right: 7%;
    bottom: 35px;

    display: flex;

    align-items: center;

    gap: 10px;

    padding:
        12px 14px;

    border-radius: 13px;

    color:
        var(--color-text);

    background: white;

    box-shadow:
        0 20px 50px
        rgba(15,23,42,.16);

    opacity: 0;

    animation:
        demo-workflow-notification
        7s
        infinite;
}


.demo-workflow-notification > i {
    width: 38px;
    height: 38px;

    display: grid;

    place-items: center;

    border-radius: 11px;

    color: white;

    background:
        var(--color-primary);
}


.demo-workflow-notification small {
    display: block;

    color: #9aa0ae;

    font-size: .41rem;

    margin-bottom: 2px;
}


.demo-workflow-notification strong {
    font-size: .57rem;
}


@keyframes demo-workflow-notification {

    0%,
    67% {
        opacity: 0;

        transform:
            translateY(15px);
    }

    76%,
    92% {
        opacity: 1;

        transform:
            translateY(0);
    }

    100% {
        opacity: 0;
    }

}


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

.demo-growth-dashboard {
    width:
        min(88%, 610px);

    padding: 22px;

    border-radius: 24px;

    color: white;

    background:
        radial-gradient(
            circle at 88% 10%,
            rgba(99,102,241,.28),
            transparent 30%
        ),
        linear-gradient(
            135deg,
            #0c1228,
            #151c3d
        );

    box-shadow:
        0 30px 75px
        rgba(15,23,42,.18);

    animation:
        demo-window-enter
        .7s
        both;
}


.demo-growth-header {
    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-bottom: 17px;
}


.demo-growth-header small {
    color:
        rgba(255,255,255,.43);

    font-size: .43rem;
}


.demo-growth-header span {
    padding:
        6px 9px;

    border-radius: 999px;

    color: #86efac;

    background:
        rgba(34,197,94,.08);

    font-size: .46rem;
}


.demo-growth-kpis {
    display: grid;

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

    gap: 8px;

    margin-bottom: 12px;
}


.demo-growth-kpis > div {
    min-height: 72px;

    padding: 11px;

    border-radius: 11px;

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

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


.demo-growth-kpis small {
    display: block;

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

    font-size: .40rem;

    margin-bottom: 5px;
}


.demo-growth-kpis strong {
    font-size: .76rem;
}


.demo-growth-chart {
    height: 265px;

    display: flex;

    align-items: flex-end;

    gap: 11px;

    padding:
        20px;

    border-radius: 14px;

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

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


.demo-growth-chart > div {
    position: relative;

    flex: 1;

    height:
        var(--demo-growth-height);

    border-radius:
        7px 7px 3px 3px;

    transform:
        scaleY(0);

    transform-origin:
        bottom;

    background:
        linear-gradient(
            180deg,
            #8b8fff,
            #604cf2
        );

    animation:
        demo-growth-bar
        .8s
        forwards;

    animation-delay:
        var(--demo-growth-delay);
}


.demo-growth-chart span {
    position: absolute;

    left: 50%;
    bottom: -24px;

    transform:
        translateX(-50%);

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

    font-size: .41rem;
}


@keyframes demo-growth-bar {

    to {
        transform:
            scaleY(1);
    }

}


/* ============================================================
   GROWTH FLOAT
============================================================ */

.demo-growth-float {
    position: absolute;

    z-index: 16;

    right: 4%;
    top: 65px;

    display: flex;

    align-items: center;

    gap: 10px;

    padding:
        11px 13px;

    border-radius: 13px;

    color:
        var(--color-text);

    background: white;

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

    animation:
        demo-growth-float
        4s
        ease-in-out
        infinite;
}


.demo-growth-float > i {
    width: 38px;
    height: 38px;

    display: grid;

    place-items: center;

    border-radius: 11px;

    color: #16a34a;

    background:
        rgba(34,197,94,.09);
}


.demo-growth-float small {
    display: block;

    color: #9aa0ad;

    font-size: .40rem;

    margin-bottom: 2px;
}


.demo-growth-float strong {
    font-size: .58rem;
}


@keyframes demo-growth-float {

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

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

}


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

@media (max-width: 1050px) {

    .home-demo-heading {
        grid-template-columns:
            1fr;

        gap: 20px;
    }


    .home-demo-showcase {
        grid-template-columns:
            1fr;

        gap: 45px;
    }


    .home-demo-visual {
        width:
            min(100%, 820px);

        margin-inline: auto;
    }


    .home-demo-info {
        max-width: 760px;
    }

}


@media (max-width: 767px) {

    .home-demo-tabs {
        width: 100%;

        justify-content: flex-start;
    }


    .home-demo-visual,
    .demo-scene {
        min-height: 470px;
    }


    .demo-workflow {
        flex-direction: column;
    }


    .demo-workflow-line {
        width: 2px;
        height: 34px;
    }


    .demo-workflow-line::after {
        transform:
            translateY(-100%);
    }


    @keyframes demo-workflow-progress {

        to {
            transform:
                translateY(0);
        }

    }

}


@media (max-width: 575px) {

    .home-demo-showcase {
        min-height: auto;
    }


    .home-demo-visual,
    .demo-scene {
        min-height: 390px;

        border-radius: 23px;
    }


    .demo-browser {
        width: 96%;
    }


    .demo-browser-top {
        grid-template-columns:
            auto 1fr;
    }


    .demo-website {
        padding: 13px;
    }


    .demo-website-nav > div {
        display: none;
    }


    .demo-website-hero {
        min-height: 260px;

        grid-template-columns:
            1fr;
    }


    .demo-website-image {
        min-height: 90px;

        font-size: 1.7rem;
    }


    .demo-presence-phone {
        width: 100px;

        min-height: 180px;

        right: -4px;
    }


    .demo-presence-toast {
        display: none;
    }


    .demo-operation-window {
        width: 96%;
    }


    .demo-operation-body {
        grid-template-columns:
            42px 1fr;
    }


    .demo-operation-content {
        padding: 10px;
    }


    .demo-operation-kpis {
        grid-template-columns:
            repeat(2, 1fr);
    }


    .demo-operation-kpis > div:last-child {
        display: none;
    }


    .demo-sale-panel {
        grid-template-columns:
            1fr;
    }


    .demo-product-grid {
        display: none;
    }


    .demo-workflow-node {
        min-width: 180px;

        min-height: 80px;
    }


    .demo-workflow-notification {
        right: 10px;
        bottom: 10px;
    }


    .demo-growth-dashboard {
        width: 96%;

        padding: 14px;
    }


    .demo-growth-chart {
        height: 190px;

        padding: 12px;

        gap: 6px;
    }


    .demo-growth-kpis {
        grid-template-columns:
            repeat(2, 1fr);
    }


    .demo-growth-kpis > div:last-child {
        display: none;
    }


    .demo-growth-float {
        display: none;
    }

}




/* ============================================================
   ASESOR - RESULTADO EN VENTANA MÓVIL
============================================================ */

.advisor-mobile-overlay,
.advisor-mobile-close {
    display: none;
}

@media (max-width: 767px) {
    .advisor-mobile-overlay {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 4990;
        background: rgba(8, 12, 30, 0.58);
        backdrop-filter: blur(6px);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity .28s ease, visibility .28s ease;
    }

    .advisor-mobile-overlay.is-open {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    .home-advisor-result-v2 {
        position: fixed;
        z-index: 5000;
        left: 10px;
        right: 10px;
        bottom: 10px;
        width: auto;
        max-height: min(82svh, 760px);
        overflow-y: auto;
        overscroll-behavior: contain;
        border-radius: 26px;
        transform: translateY(calc(100% + 30px));
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: transform .38s cubic-bezier(.22,1,.36,1), opacity .25s ease, visibility .25s ease;
        box-shadow: 0 30px 90px rgba(7, 12, 32, .32);
    }

    .home-advisor-result-v2.is-mobile-open {
        transform: translateY(0);
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    .advisor-mobile-close {
        position: sticky;
        top: 0;
        z-index: 20;
        margin-left: auto;
        margin-bottom: 4px;
        width: 42px;
        height: 42px;
        display: grid;
        place-items: center;
        border-radius: 50%;
        color: var(--color-text);
        background: rgba(255,255,255,.94);
        border: 1px solid var(--color-border);
        box-shadow: var(--shadow-xs);
    }

    body.advisor-mobile-open {
        overflow: hidden;
    }
}

@media (min-width: 768px) {
    .home-advisor-result-v2 {
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
    }
}



/* ============================================================
   HOME CLIENTS
   PROYECTOS REALES / PRUEBA SOCIAL
============================================================ */

.home-clients-section {
    position: relative;
    overflow: hidden;
    background: linear-gradient(180deg, #fff 0%, #f8f9ff 52%, #fff 100%);
}

.home-clients-background {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
}

.home-clients-grid {
    position: absolute;
    inset: 0;
    opacity: .52;
    background-image:
        linear-gradient(rgba(79,70,229,.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(79,70,229,.035) 1px, transparent 1px);
    background-size: 48px 48px;
}

.home-clients-glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(120px);
    opacity: .65;
}

.clients-glow-one {
    width: 520px;
    height: 520px;
    left: -280px;
    top: 8%;
    background: rgba(79,70,229,.10);
}

.clients-glow-two {
    width: 560px;
    height: 560px;
    right: -300px;
    bottom: 0;
    background: rgba(6,182,212,.08);
}

.home-clients-heading {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(0,1.15fr) minmax(320px,.85fr);
    gap: clamp(36px,7vw,86px);
    align-items: end;
    margin-bottom: clamp(42px,6vw,70px);
}

.home-clients-heading h2 {
    max-width: 760px;
    margin-top: 17px;
    font-family: "Manrope", sans-serif;
    font-size: clamp(2.6rem,5vw,5rem);
    line-height: 1.02;
    letter-spacing: -.052em;
}

.home-clients-heading-copy {
    display: grid;
    gap: 15px;
}

.home-clients-heading-copy p {
    margin: 0;
    color: var(--color-text-soft);
    line-height: 1.8;
}

.home-clients-heading-copy > span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #475569;
    font-size: .74rem;
    font-weight: 750;
}

.home-clients-heading-copy > span i {
    color: #16a34a;
}

.home-clients-showcase {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 16px;
}

.home-client-card {
    position: relative;
    min-height: 290px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 18px;
    border-radius: 22px;
    border: 1px solid rgba(15,23,42,.08);
    background: rgba(255,255,255,.88);
    backdrop-filter: blur(12px);
    box-shadow: 0 14px 38px rgba(15,23,42,.055);
    text-decoration: none;
    transition:
        transform .38s cubic-bezier(.22,1,.36,1),
        border-color .3s ease,
        box-shadow .35s ease;
}

.home-client-card::before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: 0;
    pointer-events: none;
    background: radial-gradient(circle at 80% 10%, rgba(99,102,241,.14), transparent 34%);
    transition: opacity .35s ease;
}

.home-client-card:hover {
    transform: translateY(-9px);
    border-color: rgba(79,70,229,.20);
    box-shadow: 0 28px 65px rgba(15,23,42,.11);
}

.home-client-card:hover::before {
    opacity: 1;
}

.home-client-card-top {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: center;
}

.home-client-type {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 9px;
    border-radius: 999px;
    color: #4f46e5;
    background: #eef2ff;
    font-size: .60rem;
    font-weight: 800;
}

.home-client-card-private .home-client-type {
    color: #64748b;
    background: #f1f5f9;
}

.home-client-status {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 11px;
    color: var(--color-primary);
    background: #eef2ff;
    transition: transform .3s ease, color .3s ease, background .3s ease;
}

.home-client-card-public:hover .home-client-status {
    transform: rotate(7deg) scale(1.08);
    color: #fff;
    background: var(--color-primary);
}

.home-client-status.is-private {
    color: #64748b;
    background: #f1f5f9;
}

.home-client-logo-wrap {
    position: relative;
    z-index: 2;
    min-height: 135px;
    display: grid;
    place-items: center;
    margin: 14px 0 16px;
    border-radius: 17px;
    border: 1px solid rgba(15,23,42,.06);
    background: linear-gradient(145deg,#fbfcff,#f6f7fc);
}

.home-client-logo-wrap img {
    max-width: 72%;
    max-height: 76px;
    width: auto;
    height: auto;
    object-fit: contain;
    transition: transform .35s ease;
}

.home-client-card:hover .home-client-logo-wrap img {
    transform: scale(1.045);
}

.client-logo-placeholder {
    width: 80px;
    height: 80px;
    display: grid;
    place-items: center;
    border-radius: 22px;
    color: #fff;
    background: linear-gradient(135deg,#4f46e5,#7c3aed);
    font-family: "Manrope", sans-serif;
    font-size: 1.1rem;
    font-weight: 900;
    box-shadow: 0 15px 32px rgba(79,70,229,.20);
    transition: transform .38s cubic-bezier(.22,1,.36,1);
}

.home-client-card:nth-child(2) .client-logo-placeholder {
    background: linear-gradient(135deg,#0f766e,#0891b2);
}
.home-client-card:nth-child(3) .client-logo-placeholder {
    background: linear-gradient(135deg,#db2777,#7c3aed);
}
.home-client-card:nth-child(4) .client-logo-placeholder {
    background: linear-gradient(135deg,#334155,#0f172a);
}
.home-client-card:nth-child(5) .client-logo-placeholder {
    background: linear-gradient(135deg,#ea580c,#f59e0b);
}
.home-client-card:nth-child(6) .client-logo-placeholder {
    background: linear-gradient(135deg,#2563eb,#0891b2);
}

.home-client-card:hover .client-logo-placeholder {
    transform: translateY(-4px) rotate(-2deg) scale(1.05);
}

.home-client-card-copy {
    position: relative;
    z-index: 2;
    display: grid;
    gap: 5px;
    margin-top: auto;
}

.home-client-card-copy small {
    color: #94a3b8;
    font-size: .52rem;
    font-weight: 900;
    letter-spacing: .10em;
}

.home-client-card-copy strong {
    color: var(--color-text);
    font-family: "Manrope", sans-serif;
    font-size: 1rem;
}

.home-client-card-copy > span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 4px;
    color: var(--color-primary);
    font-size: .67rem;
    font-weight: 800;
}

.home-client-card-copy .is-private-label {
    color: #64748b;
}

.home-client-card-public:hover .home-client-card-copy > span i {
    transform: translateX(4px);
}

.home-client-card-copy > span i {
    transition: transform .28s ease;
}

.home-clients-footer {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 25px;
    margin-top: clamp(30px,5vw,52px);
    padding: 22px 24px;
    border-radius: 20px;
    color: #fff;
    background:
        radial-gradient(circle at 85% 15%, rgba(129,140,248,.33), transparent 28%),
        linear-gradient(135deg,#10172f,#202755);
    box-shadow: 0 24px 60px rgba(15,23,42,.15);
}

.home-clients-footer > div {
    display: flex;
    align-items: center;
    gap: 13px;
}

.home-clients-footer-icon {
    width: 45px;
    height: 45px;
    display: grid;
    place-items: center;
    border-radius: 13px;
    background: rgba(255,255,255,.09);
    animation: home-client-spark 3s ease-in-out infinite;
}

.home-clients-footer small,
.home-clients-footer strong {
    display: block;
}

.home-clients-footer small {
    margin-bottom: 3px;
    color: rgba(255,255,255,.42);
    font-size: .51rem;
    font-weight: 900;
    letter-spacing: .10em;
}

.home-clients-footer strong {
    font-family: "Manrope", sans-serif;
    font-size: clamp(1rem,2vw,1.35rem);
}

@keyframes home-client-spark {
    0%,100% { transform: rotate(0deg) scale(1); }
    50% { transform: rotate(8deg) scale(1.08); }
}

@media (max-width:1050px) {
    .home-clients-heading {
        grid-template-columns: 1fr;
        gap: 23px;
    }

    .home-clients-showcase {
        grid-template-columns: repeat(2,minmax(0,1fr));
    }
}

@media (max-width:767px) {
    .home-clients-heading {
        margin-bottom: 32px;
    }

    .home-clients-heading h2 {
        font-size: clamp(2.25rem,10vw,3.35rem);
    }

    .home-clients-showcase {
        display: flex;
        gap: 12px;
        margin-inline: calc(var(--container-padding,20px) * -1);
        padding-inline: var(--container-padding,20px);
        padding-bottom: 12px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .home-clients-showcase::-webkit-scrollbar {
        display: none;
    }

    .home-client-card {
        flex: 0 0 min(82vw,315px);
        min-height: 270px;
        scroll-snap-align: center;
    }

    .home-clients-footer {
        align-items: stretch;
        flex-direction: column;
        padding: 19px;
    }

    .home-clients-footer .button {
        width: 100%;
        justify-content: center;
    }
}

/* ============================================================
   HOME CLIENTS V34
   SLIDER AUTOMÁTICO + DRAG DESKTOP
============================================================ */

.home-clients-slider-shell {
    position: relative;
    z-index: 2;
    min-width: 0;
}


/* ============================================================
   TRACK
============================================================ */

.home-clients-showcase {
    display: flex !important;
    grid-template-columns: none !important;

    gap: 16px;

    width: 100%;
    min-width: 0;

    padding:
        10px 4px
        18px;

    overflow-x: auto;
    overflow-y: visible;

    scroll-behavior: auto;

    scroll-snap-type: none !important;

    scrollbar-width: none;

    -webkit-overflow-scrolling: touch;

    overscroll-behavior-inline: contain;
}


.home-clients-showcase::-webkit-scrollbar {
    display: none;
}


.home-clients-showcase
.home-client-card {
    flex:
        0 0
        calc(
            (
                100% - 32px
            ) / 3
        ) !important;

    width:
        calc(
            (
                100% - 32px
            ) / 3
        ) !important;

    min-width: 0;

    scroll-snap-align:
        none !important;
}


/*
    Las copias se usan únicamente para que el recorrido
    pueda continuar sin un salto visual al último cliente.
*/

.home-client-card.is-client-clone {
    pointer-events: none;
}


/* ============================================================
   DRAG DESKTOP
============================================================ */

@media
(hover: hover)
and
(pointer: fine) {

    .home-clients-showcase {
        cursor: grab;

        user-select: none;

        -webkit-user-select:
            none;
    }


    .home-clients-showcase
    img {
        pointer-events: none;

        user-select: none;

        -webkit-user-drag:
            none;
    }


    .home-clients-showcase.is-dragging {
        cursor: grabbing;
    }


    .home-clients-showcase.is-dragging
    .home-client-card {
        pointer-events: none;
    }

}


/* ============================================================
   INDICADORES LATERALES
============================================================ */

.home-clients-slider-shell::before,
.home-clients-slider-shell::after {
    content: "";

    position: absolute;

    z-index: 8;

    top: 0;
    bottom: 58px;

    width: 50px;

    pointer-events: none;
}


.home-clients-slider-shell::before {
    left: -1px;

    background:
        linear-gradient(
            90deg,
            #f8f9ff 0%,
            rgba(
                248,
                249,
                255,
                .72
            ) 42%,
            transparent 100%
        );
}


.home-clients-slider-shell::after {
    right: -1px;

    background:
        linear-gradient(
            270deg,
            #f8f9ff 0%,
            rgba(
                248,
                249,
                255,
                .72
            ) 42%,
            transparent 100%
        );
}


/* ============================================================
   CONTROLES
============================================================ */

.home-clients-slider-controls {
    display: flex;

    align-items: center;

    justify-content:
        space-between;

    gap: 20px;

    padding:
        4px 5px 0;
}


.home-clients-slider-hint {
    display: inline-flex;

    align-items: center;

    gap: 9px;

    color: #64748b;

    font-size: .68rem;

    font-weight: 700;
}


.clients-autoplay-dot {
    position: relative;

    width: 8px;
    height: 8px;

    flex-shrink: 0;

    border-radius: 50%;

    background:
        var(--color-primary);

    box-shadow:
        0 0 0 5px
        rgba(
            79,
            70,
            229,
            .10
        );
}


.clients-autoplay-dot::after {
    content: "";

    position: absolute;

    inset: -5px;

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

    border-radius: inherit;

    animation:
        home-clients-autoplay-pulse
        2s ease-out
        infinite;
}


/*
    Al poner mouse encima o arrastrar,
    el punto comunica que el autoplay está pausado.
*/

.home-clients-slider-shell.is-interacting
.clients-autoplay-dot {
    background: #94a3b8;

    box-shadow:
        0 0 0 5px
        rgba(
            148,
            163,
            184,
            .10
        );
}


.home-clients-slider-shell.is-interacting
.clients-autoplay-dot::after {
    animation: none;

    opacity: 0;
}


.home-clients-slider-buttons {
    display: flex;

    align-items: center;

    gap: 7px;

    flex-shrink: 0;
}


.home-clients-slider-button {
    width: 42px;
    height: 42px;

    display: grid;

    place-items: center;

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

    border-radius: 12px;

    color: #475569;

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

    box-shadow:
        0 8px 22px
        rgba(
            15,
            23,
            42,
            .055
        );

    cursor: pointer;

    transition:
        transform .25s ease,
        color .25s ease,
        background .25s ease,
        border-color .25s ease,
        box-shadow .25s ease;
}


.home-clients-slider-button:hover {
    transform:
        translateY(-2px);

    color: #fff;

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

    background:
        var(--color-primary);

    box-shadow:
        0 12px 28px
        rgba(
            79,
            70,
            229,
            .18
        );
}


.home-clients-slider-button:active {
    transform:
        translateY(0)
        scale(.96);
}


.home-clients-slider-button:focus-visible {
    outline:
        3px solid
        rgba(
            79,
            70,
            229,
            .18
        );

    outline-offset: 3px;
}


/* ============================================================
   ANIMACIÓN DE AVANCE
============================================================ */

/*
    JS añade esta clase brevemente cuando cambia de tarjeta.
    Produce una sensación de desplazamiento más viva sin
    alterar la posición del contenido.
*/

.home-clients-showcase.is-auto-moving
.home-client-card {
    transition:
        transform .52s
        cubic-bezier(
            .22,
            1,
            .36,
            1
        ),
        box-shadow .35s ease,
        border-color .3s ease;
}


.home-clients-showcase.is-auto-moving
.home-client-card:not(.is-client-clone) {
    transform:
        translateY(-2px);
}


@keyframes home-clients-autoplay-pulse {

    0% {
        transform:
            scale(.65);

        opacity: .75;
    }


    75%,
    100% {
        transform:
            scale(1.65);

        opacity: 0;
    }

}


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

@media (max-width: 1050px) {

    .home-clients-showcase
    .home-client-card {
        flex:
            0 0
            calc(
                (
                    100% - 16px
                ) / 2
            ) !important;

        width:
            calc(
                (
                    100% - 16px
                ) / 2
            ) !important;
    }

}


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

@media (max-width: 767px) {

    .home-clients-slider-shell {
        margin-inline:
            calc(
                var(
                    --container-padding,
                    20px
                ) * -1
            );
    }


    .home-clients-showcase {
        gap: 12px;

        margin-inline:
            0 !important;

        padding:
            8px
            var(
                --container-padding,
                20px
            )
            17px !important;

        /*
            En móvil el navegador maneja el swipe
            de forma nativa.
        */

        scroll-snap-type:
            x proximity !important;

        touch-action:
            pan-x pan-y;
    }


    .home-clients-showcase
    .home-client-card {
        flex:
            0 0
            min(
                82vw,
                315px
            ) !important;

        width:
            min(
                82vw,
                315px
            ) !important;

        scroll-snap-align:
            center !important;
    }


    .home-clients-slider-shell::before,
    .home-clients-slider-shell::after {
        width: 20px;

        bottom: 67px;
    }


    .home-clients-slider-controls {
        padding-inline:
            var(
                --container-padding,
                20px
            );
    }


    .home-clients-slider-hint {
        max-width: 210px;

        font-size: .60rem;

        line-height: 1.4;
    }


    .home-clients-slider-button {
        width: 40px;
        height: 40px;

        border-radius: 11px;
    }

}


@media (max-width: 430px) {

    .home-clients-showcase
    .home-client-card {
        flex-basis:
            min(
                86vw,
                300px
            ) !important;

        width:
            min(
                86vw,
                300px
            ) !important;
    }


    .home-clients-slider-hint {
        max-width: 165px;
    }

}


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

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

    .clients-autoplay-dot::after {
        animation: none;
    }

}