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


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

.about-hero {
    position: relative;

    min-height: 100svh;

    display: flex;

    align-items: center;

    overflow: hidden;

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

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


.about-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,
            black,
            transparent 88%
        );

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


.about-hero-glow {
    position: absolute;

    border-radius: 50%;

    filter:
        blur(110px);

    pointer-events: none;
}


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

    left: -260px;
    top: 110px;

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


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

    right: -250px;
    top: 10px;

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


.about-hero-container {
    position: relative;

    z-index: 2;

    display: grid;

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

    align-items: center;

    gap:
        clamp(50px, 7vw, 95px);
}


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

.about-hero-content {
    position: relative;

    z-index: 3;
}


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

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

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

    line-height: 0.99;

    letter-spacing: -0.062em;

    font-weight: 800;

    margin-bottom: 28px;
}


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

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

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

    line-height: 1.82;

    margin-bottom: 30px;
}


.about-hero-actions {
    display: flex;

    flex-wrap: wrap;

    gap: 12px;

    margin-bottom: 34px;
}


/* ============================================================
   HERO MINI INFO
============================================================ */

.about-hero-mini-info {
    display: grid;

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

    gap: 10px;

    max-width: 690px;
}


.about-hero-mini-info > div {
    min-height: 88px;

    padding:
        15px 16px;

    border-radius: 14px;

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

    backdrop-filter:
        blur(12px);

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

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


.about-hero-mini-info strong {
    display: block;

    color:
        var(--color-primary);

    font-size: 0.72rem;

    margin-bottom: 5px;
}


.about-hero-mini-info span {
    display: block;

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

    font-size: 0.64rem;

    line-height: 1.5;
}


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

.about-hero-visual {
    position: relative;

    min-width: 0;
}


.about-tech-orbit {
    position: relative;

    width:
        min(100%, 610px);

    aspect-ratio: 1;

    margin-inline: auto;

    display: grid;

    place-items: center;
}


/* ============================================================
   ÓRBITAS
============================================================ */

.about-orbit {
    position: absolute;

    left: 50%;
    top: 50%;

    border-radius: 50%;

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

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

    pointer-events: none;
}


.about-orbit-one {
    width: 86%;
    height: 86%;

    animation:
        about-orbit-spin
        26s linear
        infinite;
}


.about-orbit-two {
    width: 65%;
    height: 65%;

    border-style: dashed;

    border-color:
        rgba(124, 58, 237, 0.15);

    animation:
        about-orbit-spin-reverse
        22s linear
        infinite;
}


.about-orbit-three {
    width: 44%;
    height: 44%;

    border-color:
        rgba(6, 182, 212, 0.12);
}


.about-orbit-one::before,
.about-orbit-two::before {
    content: "";

    position: absolute;

    width: 9px;
    height: 9px;

    border-radius: 50%;

    background:
        var(--color-primary);

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


.about-orbit-one::before {
    left: 12%;
    top: 22%;
}


.about-orbit-two::before {
    right: 8%;
    bottom: 26%;

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


@keyframes about-orbit-spin {

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

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

}


@keyframes about-orbit-spin-reverse {

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

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

}


/* ============================================================
   CORE
============================================================ */

.about-tech-core {
    position: relative;

    z-index: 5;

    width: 205px;
    height: 205px;

    display: grid;

    place-items: center;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(99, 102, 241, 0.17),
            rgba(255, 255, 255, 0.88)
        );

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

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


.about-tech-core::before {
    content: "";

    position: absolute;

    inset: -16px;

    border-radius: 50%;

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


.about-tech-core-inner {
    width: 150px;
    height: 150px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    text-align: center;

    padding: 20px;

    border-radius: 50%;

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

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


.about-tech-core-inner img {
    width: 96px;

    height: auto;

    object-fit: contain;

    margin-bottom: 10px;
}


.about-tech-core-inner span {
    color:
        var(--color-text-soft);

    font-size: 0.58rem;

    font-weight: 700;
}


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

.about-floating-node {
    position: absolute;

    z-index: 7;

    min-width: 130px;

    display: flex;

    align-items: center;

    gap: 9px;

    padding:
        11px 13px;

    border-radius: 14px;

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

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

    backdrop-filter:
        blur(15px);

    box-shadow:
        0 17px 42px
        rgba(15, 23, 42, 0.11);

    color:
        var(--color-text);

    font-size: 0.63rem;

    font-weight: 700;

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


.about-floating-node i {
    width: 35px;
    height: 35px;

    flex-shrink: 0;

    display: grid;

    place-items: center;

    border-radius: 10px;

    color:
        var(--color-primary);

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


.node-code {
    left: 1%;
    top: 18%;
}


.node-chart {
    right: 0;
    top: 22%;

    animation-delay: -1.2s;
}


.node-network {
    left: 6%;
    bottom: 17%;

    animation-delay: -2.4s;
}


.node-system {
    right: 3%;
    bottom: 13%;

    animation-delay: -3.5s;
}


@keyframes about-node-float {

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

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

}


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

.about-philosophy {
    position: relative;

    background: white;
}


.about-philosophy-grid {
    display: grid;

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

    gap:
        clamp(50px, 8vw, 110px);

    align-items: start;
}


.about-philosophy-title {
    position: sticky;

    top: 130px;
}


.about-philosophy-title h2 {
    max-width: 620px;

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

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

    line-height: 1.04;

    letter-spacing: -0.052em;
}


.about-philosophy-content {
    display: grid;

    gap: 23px;

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

    border-radius: 28px;

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

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

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


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

    line-height: 1.85;
}


.about-philosophy-main {
    color:
        var(--color-text) !important;

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

    font-size:
        clamp(1.35rem, 2.3vw, 2rem);

    line-height: 1.38 !important;

    font-weight: 700;
}


/* ============================================================
   VALUES
============================================================ */

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


.about-values-grid {
    display: grid;

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

    gap: 15px;
}


.about-value-card {
    position: relative;

    overflow: hidden;

    min-height: 330px;

    display: flex;

    flex-direction: column;

    padding:
        25px;

    border-radius: 22px;

    background: white;

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

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

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


.about-value-card::after {
    content: "";

    position: absolute;

    width: 170px;
    height: 170px;

    right: -90px;
    bottom: -95px;

    border-radius: 50%;

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

    transition:
        transform 0.5s ease;
}


.about-value-card:hover {
    transform:
        translateY(-7px);

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

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


.about-value-card:hover::after {
    transform:
        scale(1.25);
}


.about-value-number {
    position: absolute;

    top: 20px;
    right: 21px;

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

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

    font-size: 1rem;

    font-weight: 800;
}


.about-value-icon {
    width: 51px;
    height: 51px;

    display: grid;

    place-items: center;

    margin-bottom: 34px;

    border-radius: 14px;

    color:
        var(--color-primary);

    background:
        linear-gradient(
            145deg,
            #eeeeff,
            #f8f8ff
        );

    box-shadow:
        inset 0 0 0 1px
        rgba(79, 70, 229, 0.07);
}


.about-value-card h3 {
    position: relative;
    z-index: 2;

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

    font-size: 1.18rem;

    line-height: 1.27;

    margin-bottom: 12px;
}


.about-value-card p {
    position: relative;
    z-index: 2;

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

    font-size: 0.78rem;

    line-height: 1.73;
}


/* ============================================================
   METHOD
============================================================ */

.about-method-section {
    position: relative;

    overflow: hidden;

    color: white;

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


.about-method-header {
    display: grid;

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

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

    align-items: end;

    margin-bottom: 52px;
}


.about-method-header h2 {
    font-family:
        "Manrope",
        sans-serif;

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

    line-height: 1.03;

    letter-spacing: -0.052em;
}


.about-method-header h2 span {
    display: block;

    color: #aeb6ff;
}


.about-method-header > p {
    color:
        rgba(255, 255, 255, 0.61);

    line-height: 1.8;
}


.about-method-grid {
    display: grid;

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

    gap: 12px;
}


.about-method-card {
    position: relative;

    min-height: 295px;

    display: flex;

    flex-direction: column;

    padding:
        23px;

    overflow: hidden;

    border-radius: 19px;

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

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

    backdrop-filter:
        blur(12px);

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


.about-method-card:hover {
    transform:
        translateY(-7px);

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

    border-color:
        rgba(174, 182, 255, 0.20);
}


.about-method-step {
    color:
        rgba(255, 255, 255, 0.27);

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

    font-size: 0.66rem;

    font-weight: 800;

    letter-spacing: 0.1em;

    margin-bottom: 29px;
}


.about-method-icon {
    width: 49px;
    height: 49px;

    display: grid;

    place-items: center;

    margin-bottom: 22px;

    border-radius: 14px;

    color: #c2c8ff;

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

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


.about-method-card h3 {
    font-family:
        "Manrope",
        sans-serif;

    font-size: 1.12rem;

    margin-bottom: 11px;
}


.about-method-card p {
    color:
        rgba(255, 255, 255, 0.58);

    font-size: 0.75rem;

    line-height: 1.73;
}


/* ============================================================
   REMOTE / TRABAJAR JUNTOS
============================================================ */

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


.about-remote-container {
    display: grid;

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

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

    align-items: center;
}


/* ============================================================
   REMOTE WINDOW
============================================================ */

.about-remote-visual {
    min-width: 0;
}


.remote-window {
    overflow: hidden;

    border-radius: 25px;

    background: white;

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

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


.remote-window-header {
    min-height: 51px;

    display: grid;

    grid-template-columns:
        auto 1fr;

    align-items: center;

    gap: 15px;

    padding:
        0 17px;

    background:
        #f8f9fc;

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


.remote-window-title {
    width:
        min(60%, 260px);

    margin-inline: auto;

    padding:
        7px 12px;

    text-align: center;

    border-radius: 8px;

    background: white;

    color: #979eae;

    font-size: 0.54rem;

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


.remote-window-body {
    padding:
        clamp(25px, 4vw, 38px);

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


/* ============================================================
   REMOTE STATUS
============================================================ */

.remote-status {
    display: grid;

    grid-template-columns:
        auto 1fr auto;

    align-items: center;

    gap: 12px;

    margin-bottom: 15px;
}


.remote-status-icon {
    width: 46px;
    height: 46px;

    display: grid;

    place-items: center;

    border-radius: 13px;

    color: white;

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

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


.remote-status small {
    display: block;

    color: #9a9faf;

    font-size: 0.47rem;

    letter-spacing: 0.08em;

    margin-bottom: 3px;
}


.remote-status strong {
    display: block;

    font-size: 0.76rem;
}


.remote-status > span {
    padding:
        6px 9px;

    border-radius: 999px;

    color: #15803d;

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

    font-size: 0.53rem;

    font-weight: 750;
}


/* ============================================================
   PROGRESS
============================================================ */

.remote-progress {
    height: 6px;

    overflow: hidden;

    border-radius: 999px;

    background:
        #e9ebf3;

    margin-bottom: 21px;
}


.remote-progress span {
    display: block;

    width: 72%;
    height: 100%;

    border-radius: inherit;

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


/* ============================================================
   TASKS
============================================================ */

.remote-tasks {
    display: grid;

    gap: 7px;

    margin-bottom: 20px;
}


.remote-tasks > div {
    min-height: 49px;

    display: grid;

    grid-template-columns:
        auto 1fr auto;

    align-items: center;

    gap: 10px;

    padding:
        8px 11px;

    border-radius: 11px;

    background: white;

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


.remote-tasks i {
    width: 29px;
    height: 29px;

    display: grid;

    place-items: center;

    border-radius: 8px;

    color:
        var(--color-primary);

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

    font-size: 0.58rem;
}


.remote-tasks span {
    color: #5c6374;

    font-size: 0.59rem;

    font-weight: 650;
}


.remote-tasks strong {
    color: #9aa1af;

    font-size: 0.50rem;

    font-weight: 650;
}


/* ============================================================
   REMOTE MESSAGE
============================================================ */

.remote-message {
    display: flex;

    align-items: flex-start;

    gap: 11px;

    padding:
        13px;

    border-radius: 13px;

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

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


.remote-avatar {
    width: 38px;
    height: 38px;

    display: grid;

    place-items: center;

    flex-shrink: 0;

    border-radius: 11px;

    color: white;

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

    font-size: 0.53rem;

    font-weight: 800;
}


.remote-message strong {
    display: block;

    font-size: 0.65rem;

    margin-bottom: 4px;
}


.remote-message p {
    color:
        var(--color-text-soft);

    font-size: 0.56rem;

    line-height: 1.55;
}


/* ============================================================
   REMOTE CONTENT
============================================================ */

.about-remote-content h2 {
    font-family:
        "Manrope",
        sans-serif;

    font-size:
        clamp(2.5rem, 4.1vw, 4.3rem);

    line-height: 1.04;

    letter-spacing: -0.052em;

    margin-bottom: 21px;
}


.about-remote-content > p {
    color:
        var(--color-text-soft);

    line-height: 1.8;

    margin-bottom: 14px;
}


.about-remote-benefits {
    display: grid;

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

    gap: 9px;

    margin-top: 25px;
}


.about-remote-benefits > div {
    min-height: 50px;

    display: flex;

    align-items: center;

    gap: 8px;

    padding:
        9px 11px;

    border-radius: 11px;

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

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

    font-size: 0.65rem;

    font-weight: 600;
}


.about-remote-benefits i {
    width: 21px;
    height: 21px;

    display: grid;

    place-items: center;

    flex-shrink: 0;

    border-radius: 50%;

    color: #16a34a;

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

    font-size: 0.47rem;
}


/* ============================================================
   PURPOSE
============================================================ */

.about-purpose-section {
    position: relative;

    background: white;
}


.about-purpose-card {
    position: relative;

    overflow: hidden;

    display: grid;

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

    align-items: center;

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

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

    min-height: 560px;

    border-radius: 32px;

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

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

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


.about-purpose-copy {
    position: relative;

    z-index: 3;
}


.about-purpose-copy h2 {
    font-family:
        "Manrope",
        sans-serif;

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

    line-height: 1.04;

    letter-spacing: -0.052em;

    margin-bottom: 20px;
}


.about-purpose-copy > p {
    max-width: 630px;

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

    line-height: 1.8;

    margin-bottom: 13px;
}


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

.about-purpose-visual {
    position: relative;

    min-height: 410px;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 10px;
}


.purpose-start,
.purpose-center,
.purpose-result {
    position: relative;

    z-index: 3;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    text-align: center;

    border-radius: 20px;

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


.purpose-start {
    width: 145px;
    min-height: 145px;

    padding: 20px;

    background: white;

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


.purpose-center {
    width: 185px;
    min-height: 185px;

    padding: 22px;

    color: white;

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

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


.purpose-result {
    width: 145px;
    min-height: 145px;

    padding: 20px;

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

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


.purpose-start > span,
.purpose-center > span,
.purpose-result > span {
    font-size: 0.47rem;

    font-weight: 800;

    letter-spacing: 0.09em;

    margin-bottom: 5px;
}


.purpose-start > span {
    color: #9aa1af;
}


.purpose-center > span {
    color:
        rgba(255, 255, 255, 0.59);
}


.purpose-result > span {
    color: #22a45a;
}


.purpose-start strong,
.purpose-center strong,
.purpose-result strong {
    font-family:
        "Manrope",
        sans-serif;

    font-size: 0.75rem;

    line-height: 1.35;
}


.purpose-center > div,
.purpose-result > div {
    width: 48px;
    height: 48px;

    display: grid;

    place-items: center;

    border-radius: 14px;

    margin-bottom: 13px;
}


.purpose-center > div {
    color: white;

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

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


.purpose-result > div {
    color: #16a34a;

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


.purpose-connector {
    position: relative;

    z-index: 2;

    width: 70px;

    display: flex;

    align-items: center;
}


.purpose-connector span {
    flex: 1;

    height: 1px;

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


.purpose-connector i {
    color:
        var(--color-primary);

    font-size: 0.7rem;

    margin-left: 4px;
}


/* ============================================================
   AJUSTE DE ESPACIADO ABOUT
============================================================ */

.about-philosophy,
.about-values-section,
.about-method-section,
.about-remote-section,
.about-purpose-section {
    padding-top:
        clamp(65px, 7vw, 100px);

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


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

@media (max-width: 1200px) {

    .about-hero-container {
        grid-template-columns:
            minmax(0, 0.95fr)
            minmax(440px, 1.05fr);

        gap: 45px;
    }


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


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

}


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

@media (max-width: 1050px) {

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


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

        gap: 65px;
    }


    .about-hero-content {
        max-width: 830px;
    }


    .about-hero-visual {
        width:
            min(100%, 700px);

        margin-inline: auto;
    }


    .about-tech-orbit {
        max-width: 590px;
    }


    .about-philosophy-grid {
        grid-template-columns:
            1fr;

        gap: 30px;
    }


    .about-philosophy-title {
        position: static;
    }


    .about-remote-container {
        grid-template-columns:
            1fr;

        gap: 50px;
    }


    .about-remote-visual {
        width:
            min(100%, 720px);

        margin-inline: auto;
    }


    .about-purpose-card {
        grid-template-columns:
            1fr;

        gap: 40px;
    }


    .about-purpose-copy {
        max-width: 760px;
    }

}


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

@media (max-width: 800px) {

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


    .about-hero-mini-info {
        grid-template-columns:
            1fr;
    }


    .about-hero-mini-info > div {
        min-height: auto;
    }


    .about-method-header {
        grid-template-columns:
            1fr;

        gap: 20px;
    }


    .about-purpose-visual {
        min-height: 390px;
    }


    .purpose-start {
        width: 125px;
        min-height: 125px;
    }


    .purpose-center {
        width: 160px;
        min-height: 160px;
    }


    .purpose-result {
        width: 125px;
        min-height: 125px;
    }


    .purpose-connector {
        width: 45px;
    }

}


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

@media (max-width: 650px) {

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


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


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


    .about-tech-orbit {
        width: 100%;

        min-height: 480px;
    }


    .about-tech-core {
        width: 165px;
        height: 165px;
    }


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


    .about-tech-core-inner img {
        width: 78px;
    }


    .about-floating-node {
        min-width: 112px;

        padding:
            9px 10px;

        font-size: 0.55rem;
    }


    .about-floating-node i {
        width: 30px;
        height: 30px;
    }


    .node-code {
        left: 0;
        top: 15%;
    }


    .node-chart {
        right: 0;
        top: 18%;
    }


    .node-network {
        left: 0;
        bottom: 15%;
    }


    .node-system {
        right: 0;
        bottom: 12%;
    }


    .about-values-grid {
        grid-template-columns:
            1fr;
    }


    .about-value-card {
        min-height: auto;
    }


    .about-method-grid {
        grid-template-columns:
            1fr;
    }


    .about-method-card {
        min-height: auto;
    }


    .about-remote-benefits {
        grid-template-columns:
            1fr;
    }


    .about-purpose-visual {
        min-height: auto;

        flex-direction: column;

        gap: 8px;

        padding:
            25px 0;
    }


    .purpose-start,
    .purpose-center,
    .purpose-result {
        width:
            min(100%, 260px);

        min-height: 120px;
    }


    .purpose-center {
        min-height: 145px;
    }


    .purpose-connector {
        width: 2px;
        height: 45px;

        flex-direction: column;
    }


    .purpose-connector span {
        width: 1px;
        height: 35px;

        flex: none;

        background:
            linear-gradient(
                180deg,
                rgba(79, 70, 229, 0.12),
                rgba(79, 70, 229, 0.42)
            );
    }


    .purpose-connector i {
        margin:
            3px 0 0;

        transform:
            rotate(90deg);
    }

}


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

@media (max-width: 575px) {

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


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


    .about-tech-orbit {
        min-height: 430px;
    }


    .about-orbit-one {
        width: 96%;
        height: 96%;
    }


    .about-orbit-two {
        width: 72%;
        height: 72%;
    }


    .about-orbit-three {
        width: 48%;
        height: 48%;
    }


    .about-floating-node {
        min-width: 100px;

        gap: 7px;

        font-size: 0.51rem;
    }


    .about-floating-node i {
        width: 28px;
        height: 28px;

        font-size: 0.6rem;
    }


    .about-philosophy-content {
        padding:
            26px 21px;

        border-radius: 21px;
    }


    .about-value-card {
        padding:
            23px 20px;

        border-radius: 19px;
    }


    .about-method-card {
        padding:
            22px 20px;

        border-radius: 17px;
    }


    .remote-window {
        border-radius: 20px;
    }


    .remote-window-body {
        padding: 20px 16px;
    }


    .remote-status {
        grid-template-columns:
            auto 1fr;
    }


    .remote-status > span {
        display: none;
    }


    .remote-tasks > div {
        grid-template-columns:
            auto 1fr;
    }


    .remote-tasks strong {
        display: none;
    }


    .about-purpose-card {
        min-height: auto;

        padding:
            31px 20px;

        border-radius: 24px;
    }


    .about-philosophy,
    .about-values-section,
    .about-method-section,
    .about-remote-section,
    .about-purpose-section {
        padding-top: 50px;

        padding-bottom: 55px;
    }

}


/* ============================================================
   MUY PEQUEÑOS
============================================================ */

@media (max-width: 390px) {

    .about-tech-orbit {
        min-height: 385px;
    }


    .about-tech-core {
        width: 145px;
        height: 145px;
    }


    .about-tech-core-inner {
        width: 108px;
        height: 108px;
    }


    .about-tech-core-inner img {
        width: 67px;
    }


    .about-floating-node {
        min-width: auto;

        padding: 8px;
    }


    .about-floating-node span {
        display: none;
    }


    .about-floating-node i {
        width: 34px;
        height: 34px;
    }

}


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

@media (min-width: 1600px) {

    .about-hero-container {
        gap: 110px;
    }


    .about-tech-orbit {
        max-width: 650px;
    }

}


/* ============================================================
   ACCESIBILIDAD - MOVIMIENTO REDUCIDO
============================================================ */

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

    .about-orbit-one,
    .about-orbit-two,
    .about-floating-node {
        animation: none !important;
    }


    .about-value-card,
    .about-method-card {
        transition: none !important;
    }

} */